From 5adb79e89d28434e6692ed64745707c49271392d Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Mon, 30 Sep 2024 12:45:26 +0200 Subject: [PATCH 1/7] System Prompt update --- app/backend/InputOutputHandler.tsx | 61 ++++++++++++++++++------------ 1 file changed, 36 insertions(+), 25 deletions(-) diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx index 4fa0042..2a33591 100644 --- a/app/backend/InputOutputHandler.tsx +++ b/app/backend/InputOutputHandler.tsx @@ -16,36 +16,47 @@ const InputOutputBackend: React.FC = () => { content: string } - /* Variables for System-prompt */ - const [preferredCurrency, setPreferredCurrency] = useState("") - const [preferredLanguage, setPreferredLanguage] = useState("") - const [timeFormat, setTimeFormat] = useState("") - const [preferredMeasurement, setPreferredMeasurement] = useState("") - const [timeZone, setTimeZone] = useState("") - const [dateFormat, setDateFormat] = useState("") - - useEffect(() => { - setPreferredCurrency(localStorage.getItem("preferredCurrency")) - setPreferredLanguage(localStorage.getItem("preferredLanguage")) - setTimeFormat(localStorage.getItem("timeFormat")) - setPreferredMeasurement(localStorage.getItem("preferredMeasurement")) - setTimeZone(localStorage.getItem("timeZone")) - setDateFormat(localStorage.getItem("dateFormat")) - }) + const [preferredCurrency, setPreferredCurrency] = useState(null); + const [preferredLanguage, setPreferredLanguage] = useState(null); + const [timeFormat, setTimeFormat] = useState(null); + const [preferredMeasurement, setPreferredMeasurement] = useState(null); + const [timeZone, setTimeZone] = useState(null); + const [dateFormat, setDateFormat] = useState(null); + const [messages, setMessages] = useState([]); + + useEffect(() => { + setPreferredCurrency(localStorage.getItem("preferredCurrency")); + setPreferredLanguage(localStorage.getItem("preferredLanguage")); + setTimeFormat(localStorage.getItem("timeFormat")); + setPreferredMeasurement(localStorage.getItem("preferredMeasurement")); + setTimeZone(localStorage.getItem("timeZone")); + setDateFormat(localStorage.getItem("dateFormat")); + }, []); + useEffect(() => { + if (preferredCurrency && preferredLanguage && timeFormat && dateFormat && preferredMeasurement && timeZone) { + setMessages([ + { + role: "system", + content: `You are in the timezone: ${timeZone}. + You use the time format ${timeFormat}. + You use the date format ${dateFormat} for all references of dates. + You use the ${preferredMeasurement} system. + You use the currency ${preferredCurrency}. + You will only answer in the language (you will receive the country code) ${preferredLanguage}. + But in the case the user specifically states to answer in another language, do that. Speaking in + another language is not stating you should answer in that language. + Additionally, under no circumstances translate your answer into multiple languages.`, + }, + { role: "assistant", content: "Hello! How can I help you?" }, + ]); + } + }, [preferredCurrency, preferredLanguage, timeFormat, dateFormat, preferredMeasurement, timeZone]); + const [copyClicked, setCopyClicked] = useState(false) const [accessToken, setAccessToken] = useState("") const postWorkerRef = useRef(null) const getWorkerRef = useRef(null) - const [messages, setMessages] = useState([{ role: "system", - content: `You are in the timezone: ${timeZone}. - You use the time format ${timeFormat}. - You use the date format ${dateFormat} for all references of dates. - You use the ${preferredMeasurement} system. You use the currency ${preferredCurrency}. - You will only answer in the language (you will receive the country code) ${preferredLanguage}. - But in the case the user specifically states to answer in an other language do that speaking in a - nother language is not stating you should answer in that language. Additionally do not translate your answer into multiple languages` - },{ role: "assistant", content: "Hello! How can I help you?" }]) const [liveMessage, setLiveMessage] = useState("") const [inputMessage, setInputMessage] = useState("") const [inputDisabled, setInputDisabled] = useState(false) -- 2.39.5 From 460f22abd8bce615b7a44bfa836132cb2b1e5553 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Mon, 30 Sep 2024 12:52:58 +0200 Subject: [PATCH 2/7] Bug fixes merge --- app/backend/InputOutputHandler.tsx | 127 +++++++++++++++-------------- 1 file changed, 65 insertions(+), 62 deletions(-) diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx index 2a33591..92fa6df 100644 --- a/app/backend/InputOutputHandler.tsx +++ b/app/backend/InputOutputHandler.tsx @@ -2,7 +2,7 @@ import React, { use, useEffect, useRef, useState } from "react"; import ConversationFrontend from "../components/ConversationFrontend"; import InputFrontend from "../components/InputFrontend"; -import VoiceSend from "./voice_backend" +import { sendToVoiceRecognition } from "./voice_backend" import { AudioRecorder } from "./AudioRecorder"; import axios from "axios"; import { resolve } from "path"; @@ -11,6 +11,7 @@ import { fetchFile, toBlobURL } from "@ffmpeg/util" const InputOutputBackend: React.FC = () => { + // # variables type Message = { role: string content: string @@ -23,22 +24,22 @@ const InputOutputBackend: React.FC = () => { const [timeZone, setTimeZone] = useState(null); const [dateFormat, setDateFormat] = useState(null); const [messages, setMessages] = useState([]); - - useEffect(() => { - setPreferredCurrency(localStorage.getItem("preferredCurrency")); - setPreferredLanguage(localStorage.getItem("preferredLanguage")); - setTimeFormat(localStorage.getItem("timeFormat")); - setPreferredMeasurement(localStorage.getItem("preferredMeasurement")); - setTimeZone(localStorage.getItem("timeZone")); - setDateFormat(localStorage.getItem("dateFormat")); - }, []); - - useEffect(() => { - if (preferredCurrency && preferredLanguage && timeFormat && dateFormat && preferredMeasurement && timeZone) { - setMessages([ - { - role: "system", - content: `You are in the timezone: ${timeZone}. + + useEffect(() => { + setPreferredCurrency(localStorage.getItem("preferredCurrency")); + setPreferredLanguage(localStorage.getItem("preferredLanguage")); + setTimeFormat(localStorage.getItem("timeFormat")); + setPreferredMeasurement(localStorage.getItem("preferredMeasurement")); + setTimeZone(localStorage.getItem("timeZone")); + setDateFormat(localStorage.getItem("dateFormat")); + }, []); + + useEffect(() => { + if (preferredCurrency && preferredLanguage && timeFormat && dateFormat && preferredMeasurement && timeZone) { + setMessages([ + { + role: "system", + content: `You are in the timezone: ${timeZone}. You use the time format ${timeFormat}. You use the date format ${dateFormat} for all references of dates. You use the ${preferredMeasurement} system. @@ -47,12 +48,13 @@ const InputOutputBackend: React.FC = () => { But in the case the user specifically states to answer in another language, do that. Speaking in another language is not stating you should answer in that language. Additionally, under no circumstances translate your answer into multiple languages.`, - }, - { role: "assistant", content: "Hello! How can I help you?" }, - ]); - } - }, [preferredCurrency, preferredLanguage, timeFormat, dateFormat, preferredMeasurement, timeZone]); - + }, + { role: "assistant", content: "Hello! How can I help you?" }, + ]); + } + }, [preferredCurrency, preferredLanguage, timeFormat, dateFormat, preferredMeasurement, timeZone]); + + const [copyClicked, setCopyClicked] = useState(false) const [accessToken, setAccessToken] = useState("") const postWorkerRef = useRef(null) @@ -61,7 +63,7 @@ const InputOutputBackend: React.FC = () => { const [inputMessage, setInputMessage] = useState("") const [inputDisabled, setInputDisabled] = useState(false) const [isRecording, setIsRecording] = useState(false) - const mediaRecorderRef = useRef(null) + const mediaRecorderRef = useRef(null) const audioChunks = useRef([]) @@ -162,11 +164,6 @@ const InputOutputBackend: React.FC = () => { }); }; - - useEffect(() => { - - },[preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat]) - const addMessage = (role: string, content: string) => { setMessages(previous => [...previous, { role, content }]) } @@ -184,40 +181,46 @@ const InputOutputBackend: React.FC = () => { } } - const startRecording = async () => { - const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) - const mediaRecorder = new MediaRecorder(stream) - mediaRecorderRef.current = mediaRecorder - - mediaRecorder.ondataavailable = (event) => { - audioChunks.current.push(event.data) - } - - mediaRecorder.onstop = async () => { - const audioBlob = new Blob(audioChunks.current, { type: "audio/ogg" }) - audioChunks.current = [] - // console.log(audioBlob); - // const url = URL.createObjectURL(audioBlob) - // const audio = new Audio(url); - // audio.play().catch(error => console.error("Error playing audio:", error)); + const startRecording = async (): Promise => { + const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); + const mediaRecorder = new MediaRecorder(stream); + mediaRecorderRef.current = mediaRecorder; - const remote = new VoiceSend() - remote.sendToVoiceRecognition(audioBlob) - } + audioChunks.current = []; // Initialize audio chunks + + // Create a promise that resolves when the onstop event is done + const stopRecordingPromise = new Promise((resolve) => { + mediaRecorder.ondataavailable = (event) => { + audioChunks.current.push(event.data); + }; + + mediaRecorder.onstop = async () => { + const audioBlob = new Blob(audioChunks.current, { type: "audio/ogg" }); + audioChunks.current = []; + + const text_voice = await sendToVoiceRecognition(audioBlob); + console.log(text_voice); + resolve(text_voice); // Resolve the promise with the recognized text + }; + }); + + mediaRecorder.start(); + setIsRecording(true); + + // Wait for the recording to stop and get the recognized text + return stopRecordingPromise; + }; - mediaRecorder.start() - setIsRecording(true) - } - const stopRecording = () => { - mediaRecorderRef.current?.stop() - setIsRecording(false) - } + mediaRecorderRef.current?.stop(); + setIsRecording(false); + }; - - const handleMicClick = () => { + const handleMicClick = async () => { if (!isRecording) { - startRecording(); + const recognizedText = await startRecording(); + setInputMessage(recognizedText); // Set the recognized text after recording + console.log("Set!") } else { stopRecording(); } @@ -261,10 +264,10 @@ const InputOutputBackend: React.FC = () => { await wait(1000) setCopyClicked(false) } - + return ( -
+ <> { onMicClick={handleMicClick} inputDisabled={inputDisabled} isRecording={isRecording} - /> -
+ /> + ) } -- 2.39.5 From 27b80b6c76687da37fd3ce4867125d8b6d7b52bf Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Mon, 30 Sep 2024 14:37:02 +0200 Subject: [PATCH 3/7] Minor changes to the system prompt --- app/backend/InputOutputHandler.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx index 92fa6df..7a24036 100644 --- a/app/backend/InputOutputHandler.tsx +++ b/app/backend/InputOutputHandler.tsx @@ -42,15 +42,15 @@ const InputOutputBackend: React.FC = () => { content: `You are in the timezone: ${timeZone}. You use the time format ${timeFormat}. You use the date format ${dateFormat} for all references of dates. - You use the ${preferredMeasurement} system. + You use the ${preferredMeasurement} system. You use the currency ${preferredCurrency}. You will only answer in the language (you will receive the country code) ${preferredLanguage}. But in the case the user specifically states to answer in another language, do that. Speaking in another language is not stating you should answer in that language. - Additionally, under no circumstances translate your answer into multiple languages.`, + Additionally, under no circumstances ever translate your answer into multiple languages.`, }, - { role: "assistant", content: "Hello! How can I help you?" }, - ]); + { role: "assistant", content: "Hello! How may I help you?" }, + ]); } }, [preferredCurrency, preferredLanguage, timeFormat, dateFormat, preferredMeasurement, timeZone]); -- 2.39.5 From 223f95364866278baa5d2640177665cc6f827115 Mon Sep 17 00:00:00 2001 From: Patrick_Pluto Date: Mon, 30 Sep 2024 15:26:31 +0200 Subject: [PATCH 4/7] fixed some database backend stuff --- .gitignore | 2 ++ app/backend/InputOutputHandler.tsx | 11 +++++++++-- app/backend/database.ts | 31 +++++++++++++++--------------- app/backend/threads/PostWorker.js | 11 ++++++----- app/backend/voice_backend.ts | 1 - app/components/Models.tsx | 3 +++ py/api.py | 16 +++++++-------- py/db.py | 24 +++++++++++++---------- 8 files changed, 58 insertions(+), 41 deletions(-) diff --git a/.gitignore b/.gitignore index 93a7e59..fb2020f 100644 --- a/.gitignore +++ b/.gitignore @@ -43,3 +43,5 @@ __pycache__/ key.pem cert.pem api_key.txt + +database.json diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx index 92fa6df..0bde2f5 100644 --- a/app/backend/InputOutputHandler.tsx +++ b/app/backend/InputOutputHandler.tsx @@ -9,7 +9,6 @@ import { resolve } from "path"; import { FFmpeg } from "@ffmpeg/ffmpeg"; import { fetchFile, toBlobURL } from "@ffmpeg/util" - const InputOutputBackend: React.FC = () => { // # variables type Message = { @@ -174,7 +173,15 @@ const InputOutputBackend: React.FC = () => { if (postWorkerRef.current) { addMessage("user", inputValue) console.log("input:", inputValue); - postWorkerRef.current.postMessage({ messages: [...messages, { role: "user", content: inputValue }], ai_model: "llama3.2", access_token: accessToken }) + const type = localStorage.getItem('type') + var api_key: string = "" + if (type != null && type != 'local') { + const try_key = localStorage.getItem(type) + if (try_key) { + api_key = try_key + } + } + postWorkerRef.current.postMessage({ messages: [...messages, { role: "user", content: inputValue }], ai_model: localStorage.getItem('model'), model_type: type, access_token: accessToken, api_key: api_key }) startGetWorker() } } diff --git a/app/backend/database.ts b/app/backend/database.ts index 054302b..45fd103 100644 --- a/app/backend/database.ts +++ b/app/backend/database.ts @@ -18,27 +18,28 @@ if all went well, you will get the status 200 in response.data.status to check if the request was accepted or declined, check response.data.response, it will be either true or false depending on if it worked, or not. */ -export const sendToDatabase = (data: any): Promise => { - return axios.post("http://localhost:5000/interstellar_ai/db", data) - .then(response => { - const status = response.data.status; - const success = response.data.response; - postMessage({ status, success }); - return success; // Ensure success is returned to the caller - }) - .catch(error => { - postMessage({ status: 500, success: false }); - return false; // Return false in case of an error - }); +export const sendToDatabase = async (data: any): Promise => { + try { + const response = await axios.post("http://localhost:5000/interstellar_ai/db", data); + const status = response.data.status; + const success = response.data.response; + postMessage({ status, success }); + console.log(status); + return success; + } catch (error) { + postMessage({ status: 500, success: false }); + console.log("NO"); + return false; + } }; // Functions for each action export const createAccount = async (username: string, email: string, password: string) => { const data = { action: "create_account", - username, - email, - password, + username: username, + email: email, + password: password, }; return await sendToDatabase(data); }; diff --git a/app/backend/threads/PostWorker.js b/app/backend/threads/PostWorker.js index 9fb01e2..bae9989 100644 --- a/app/backend/threads/PostWorker.js +++ b/app/backend/threads/PostWorker.js @@ -1,14 +1,15 @@ import axios from "axios"; onmessage = (e) => { - const { messages, ai_model = "llama3.2", access_token } = e.data - + const { messages, ai_model, model_type, access_token, api_key } = e.data + const Message = { messages: messages, - ai_model: "llama3.2", - model_type: "local", - access_token: access_token + ai_model: ai_model, + model_type: model_type, + access_token: access_token, + api_key: api_key } console.log(Message); diff --git a/app/backend/voice_backend.ts b/app/backend/voice_backend.ts index ca8a998..c91a058 100644 --- a/app/backend/voice_backend.ts +++ b/app/backend/voice_backend.ts @@ -6,7 +6,6 @@ export const sendToVoiceRecognition = (audio_data: Blob): Promise => { const formdata = new FormData() formdata.append("audio", audio_data) - const dataSend = { option: "offline", type: "basic", audio: audio_data } return axios.post("http://localhost:5000/interstellar_ai/api/voice_recognition", formdata) .then((response) => { console.log(response.data) diff --git a/app/components/Models.tsx b/app/components/Models.tsx index 1f9dc56..a839a1c 100644 --- a/app/components/Models.tsx +++ b/app/components/Models.tsx @@ -240,6 +240,9 @@ const Models: React.FC = () => { console.log(model) console.log(category) console.log(modelList[category][model as keyof typeof modelList[typeof category]]); + console.log(modelList[category]['model_type' as keyof typeof modelList[typeof category]]) + localStorage.setItem("model", modelList[category][model as keyof typeof modelList[typeof category]]) + localStorage.setItem("type", modelList[category]['model_type' as keyof typeof modelList[typeof category]]) } return ( diff --git a/py/api.py b/py/api.py index 75fbfd4..7683afe 100644 --- a/py/api.py +++ b/py/api.py @@ -89,20 +89,20 @@ class API: @self.app.route('/interstellar_ai/db', methods=['POST']) def db_manipulate(): - action = request.args.get('action') - data = request.args.get('data') + sent_data = request.get_json() + action = sent_data.get('action') if action == "create_account": - return jsonify({'status': 200, 'response': self.db.add_user(data)}) + return jsonify({'status': 200, 'response': self.db.add_user(sent_data)}) elif action == "change_password": - return jsonify({'status': 200, 'response': self.db.update_password(data)}) + return jsonify({'status': 200, 'response': self.db.update_password(sent_data)}) elif action == "get_data": - return jsonify({'status': 200, 'response': self.db.get_data(data)}) + return jsonify({'status': 200, 'response': self.db.get_data(sent_data)}) elif action == "change_data": - return jsonify({'status': 200, 'response': self.db.change_data(data)}) + return jsonify({'status': 200, 'response': self.db.change_data(sent_data)}) elif action == "check_credentials": - return jsonify({'status': 200, 'response': self.db.check_credentials(data)}) + return jsonify({'status': 200, 'response': self.db.check_credentials(sent_data)}) elif action == "delete_account": - return jsonify({'status': 200, 'response': self.db.delete_user(data)}) + return jsonify({'status': 200, 'response': self.db.delete_user(sent_data)}) return jsonify({'status': 401, 'response': "Invalid action"}) diff --git a/py/db.py b/py/db.py index 3f66ac7..a20cd84 100644 --- a/py/db.py +++ b/py/db.py @@ -10,10 +10,10 @@ class DB: def ensure_username(self, data): if hasattr(data, 'username'): - return data.get['username'] + return data.get('username') elif hasattr(data, 'email'): for index, entry in self.database: - if entry.get['email'] == data.get['email']: + if entry.get('email') == data.get('email'): return index @staticmethod @@ -23,19 +23,22 @@ class DB: return hashed_password def add_user(self, data): - username = data.get['username'] - password = data.get['password'] - email = data.get['email'] + username = data.get('username') + password = data.get('password') + email = data.get('email') hashed_password = self.hash_password(password) user_data = {"hashed_password": hashed_password, "email": email, "data": None} if username not in self.database: self.database[username] = user_data + print("yes") + self.save_database() return True + print("fail") return False def delete_user(self, data): username = self.ensure_username(data) - data = data.get['data'] + data = data.get('data') if not self.check_credentials(data): return False @@ -45,7 +48,7 @@ class DB: def change_data(self, data): username = self.ensure_username(data) - data = data.get['data'] + data = data.get('data') if not self.check_credentials(data): return False @@ -55,7 +58,7 @@ class DB: def update_password(self, data): username = self.ensure_username(data) - new_password = data.get['new_password'] + new_password = data.get('new_password') if not self.check_credentials(data): return False @@ -66,7 +69,7 @@ class DB: def check_credentials(self, data): username = self.ensure_username(data) - password = data.get['password'] + password = data.get('password') if username not in self.database: return False @@ -79,7 +82,7 @@ class DB: if not self.check_credentials(data): return None - send_back = self.database[username].get['data'] + send_back = self.database(username).get('data') return send_back def save_database(self): @@ -90,6 +93,7 @@ class DB: else: with open("database.json", 'w') as file: + print("saving") json.dump(self.database, file) def load_database(self): -- 2.39.5 From 1f35b83322ce2c38eaf99b501095515ece5b54f3 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Mon, 30 Sep 2024 16:07:01 +0200 Subject: [PATCH 5/7] Dear god have mercy --- app/components/Settings.tsx | 1119 +++++++++++++++++++++-------------- app/components/theme.ts | 62 +- app/page.tsx | 29 + 3 files changed, 757 insertions(+), 453 deletions(-) diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx index 48e452c..bb203d3 100644 --- a/app/components/Settings.tsx +++ b/app/components/Settings.tsx @@ -11,6 +11,7 @@ import { checkCredentials, deleteAccount, } from '../backend/database'; +import { equal } from 'assert'; const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => { @@ -85,9 +86,43 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const [fontFamily, setFontFamily] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim()); const [fontSize, setFontSize] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim()); const [burgerMenu, setBurgerMenu] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color').trim()); + const [faqBackgroundColor, setFaqBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-background-color').trim()); + const [faqHeadingColor, setFaqHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-heading-color').trim()); + const [faqItemBackgroundColor, setFaqItemBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-background-color').trim()); + const [faqItemHeadingColor, setFaqItemHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-heading-color').trim()); + const [faqItemTextColor, setFaqItemTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-text-color').trim()); + const [faqItemHoverBackgroundColor, setFaqItemHoverBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-hover-background-color').trim()); + const [popupBackgroundColor, setPopupBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--popup-background-color').trim()); + const [overlayTextColor, setOverlayTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--overlay-text-color').trim()); + // Theme selection - const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default'); + const [selectedTheme, setSelectedTheme] = useState(''); + + useEffect(() => { + const savedTheme = localStorage.getItem('selectedTheme'); + if (savedTheme) { + setSelectedTheme(savedTheme); + // Apply the saved theme on initial load + switch (savedTheme) { + case 'IOMARKET': + applyIOMarketTheme(); + break; + case 'WHITE': + applyWhiteTheme(); + break; + case 'BLACK': + applyBlackTheme(); + break; + case 'CUSTOM': + // Handle custom theme application here if necessary + break; + default: + applyIOMarketTheme(); + break; + } + } + }, []); // Runs only once when the component mounts // API Keys const [mistral, setmistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim()); @@ -146,9 +181,17 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( openai, anthropic, google, + // Additional theme settings + faqBackgroundColor, + faqHeadingColor, + faqItemBackgroundColor, + faqItemHeadingColor, + faqItemTextColor, + faqItemHoverBackgroundColor, + popupBackgroundColor, + overlayTextColor, }; - - // Update local storage + // Update local storage for (const [key, value] of Object.entries(settings)) { if (typeof value === 'boolean') { localStorage.setItem(key, JSON.stringify(value)); @@ -157,45 +200,54 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( } } }, [ - activeSection, - preferredLanguage, - preferredCurrency, - dateFormat, - timeFormat, - timeZone, - selectedOption, - disableChatHistory, - disableAIMemory, - openSourceMode, - newName, - newEmail, - newPassword, - preferredMeasurement, - backgroundColor, - textColor, - inputBackgroundColor, - inputButtonColor, - inputButtonHoverColor, - userMessageBackgroundColor, - userMessageTextColor, - aiMessageBackgroundColor, - aiMessageTextColor, - buttonBackgroundColor, - buttonHoverBackgroundColor, - modelsBackgroundColor, - historyBackgroundColor, - leftPanelBackgroundColor, - conversationBackgroundColor, - popUpTextColor, - inputBorderColor, - fontFamily, - fontSize, - burgerMenu, - selectedTheme, - mistral, - openai, - anthropic, - google, + activeSection, + preferredLanguage, + preferredCurrency, + dateFormat, + timeFormat, + timeZone, + selectedOption, + disableChatHistory, + disableAIMemory, + openSourceMode, + newName, + newEmail, + newPassword, + preferredMeasurement, + backgroundColor, + textColor, + inputBackgroundColor, + inputButtonColor, + inputButtonHoverColor, + userMessageBackgroundColor, + userMessageTextColor, + aiMessageBackgroundColor, + aiMessageTextColor, + buttonBackgroundColor, + buttonHoverBackgroundColor, + modelsBackgroundColor, + historyBackgroundColor, + leftPanelBackgroundColor, + conversationBackgroundColor, + popUpTextColor, + inputBorderColor, + fontFamily, + fontSize, + burgerMenu, + selectedTheme, + mistral, + openai, + anthropic, + google, + // Additional theme settings + faqBackgroundColor, + faqHeadingColor, + faqItemBackgroundColor, + faqItemHeadingColor, + faqItemTextColor, + faqItemHoverBackgroundColor, + popupBackgroundColor, + overlayTextColor, ]); useEffect(() => { @@ -214,107 +266,141 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( }; // Apply imported settings to the CSS variables - const applySettings = (settings: any) => { - if (settings.backgroundColor) { - setBackgroundColor(settings.backgroundColor); - document.documentElement.style.setProperty('--background-color', settings.backgroundColor); - } - - if (settings.textColor) { - setTextColor(settings.textColor); - document.documentElement.style.setProperty('--text-color', settings.textColor); - } - - if (settings.inputBackgroundColor) { - setInputBackgroundColor(settings.inputBackgroundColor); - document.documentElement.style.setProperty('--input-background-color', settings.inputBackgroundColor); - } - - if (settings.inputButtonColor) { - setInputButtonColor(settings.inputButtonColor); - document.documentElement.style.setProperty('--input-button-color', settings.inputButtonColor); - } - - if (settings.inputButtonHoverColor) { - setInputButtonHoverColor(settings.inputButtonHoverColor); - document.documentElement.style.setProperty('--input-button-hover-color', settings.inputButtonHoverColor); - } - - if (settings.userMessageBackgroundColor) { - setUserMessageBackgroundColor(settings.userMessageBackgroundColor); - document.documentElement.style.setProperty('--user-message-background-color', settings.userMessageBackgroundColor); - } - - if (settings.userMessageTextColor) { - setUserMessageTextColor(settings.userMessageTextColor); - document.documentElement.style.setProperty('--user-message-text-color', settings.userMessageTextColor); - } - - if (settings.aiMessageBackgroundColor) { - setAiMessageBackgroundColor(settings.aiMessageBackgroundColor); - document.documentElement.style.setProperty('--ai-message-background-color', settings.aiMessageBackgroundColor); - } - - if (settings.aiMessageTextColor) { - setAiMessageTextColor(settings.aiMessageTextColor); - document.documentElement.style.setProperty('--ai-message-text-color', settings.aiMessageTextColor); - } - - if (settings.buttonBackgroundColor) { - setButtonBackgroundColor(settings.buttonBackgroundColor); - document.documentElement.style.setProperty('--button-background-color', settings.buttonBackgroundColor); - } - - if (settings.buttonHoverBackgroundColor) { - setButtonHoverBackgroundColor(settings.buttonHoverBackgroundColor); - document.documentElement.style.setProperty('--button-hover-background-color', settings.buttonHoverBackgroundColor); - } - - if (settings.modelsBackgroundColor) { - setModelsBackgroundColor(settings.modelsBackgroundColor); - document.documentElement.style.setProperty('--models-background-color', settings.modelsBackgroundColor); - } - - if (settings.historyBackgroundColor) { - setHistoryBackgroundColor(settings.historyBackgroundColor); - document.documentElement.style.setProperty('--history-background-color', settings.historyBackgroundColor); - } - - if (settings.leftPanelBackgroundColor) { - setLeftPanelBackgroundColor(settings.leftPanelBackgroundColor); - document.documentElement.style.setProperty('--left-panel-background-color', settings.leftPanelBackgroundColor); - } - - if (settings.conversationBackgroundColor) { - setConversationBackgroundColor(settings.conversationBackgroundColor); - document.documentElement.style.setProperty('--conversation-background-color', settings.conversationBackgroundColor); - } - - if (settings.popUpTextColor) { - setPopUpTextColor(settings.popUpTextColor); - document.documentElement.style.setProperty('--pop-up-text', settings.popUpTextColor); - } - - if (settings.inputBorderColor) { - setInputBorderColor(settings.inputBorderColor); - document.documentElement.style.setProperty('--input-border-color', settings.inputBorderColor); - } - - if (settings.fontFamily) { - setFontFamily(settings.fontFamily); - document.documentElement.style.setProperty('--font-family', settings.fontFamily); - } - - if (settings.fontSize) { - setFontSize(settings.fontSize); - document.documentElement.style.setProperty('--font-size', settings.fontSize); - } - - if (settings.burgerMenu) { - setBurgerMenu(settings.fontSize); - document.documentElement.style.setProperty('--burger-menu-background-color:', settings.burgerMenu); - } - }; + const applySettings = (settings: any) => { + if (settings.backgroundColor) { + setBackgroundColor(settings.backgroundColor); + document.documentElement.style.setProperty('--background-color', settings.backgroundColor); + } + + if (settings.textColor) { + setTextColor(settings.textColor); + document.documentElement.style.setProperty('--text-color', settings.textColor); + } + + if (settings.inputBackgroundColor) { + setInputBackgroundColor(settings.inputBackgroundColor); + document.documentElement.style.setProperty('--input-background-color', settings.inputBackgroundColor); + } + + if (settings.inputButtonColor) { + setInputButtonColor(settings.inputButtonColor); + document.documentElement.style.setProperty('--input-button-color', settings.inputButtonColor); + } + + if (settings.inputButtonHoverColor) { + setInputButtonHoverColor(settings.inputButtonHoverColor); + document.documentElement.style.setProperty('--input-button-hover-color', settings.inputButtonHoverColor); + } + + if (settings.userMessageBackgroundColor) { + setUserMessageBackgroundColor(settings.userMessageBackgroundColor); + document.documentElement.style.setProperty('--user-message-background-color', settings.userMessageBackgroundColor); + } + + if (settings.userMessageTextColor) { + setUserMessageTextColor(settings.userMessageTextColor); + document.documentElement.style.setProperty('--user-message-text-color', settings.userMessageTextColor); + } + + if (settings.aiMessageBackgroundColor) { + setAiMessageBackgroundColor(settings.aiMessageBackgroundColor); + document.documentElement.style.setProperty('--ai-message-background-color', settings.aiMessageBackgroundColor); + } + + if (settings.aiMessageTextColor) { + setAiMessageTextColor(settings.aiMessageTextColor); + document.documentElement.style.setProperty('--ai-message-text-color', settings.aiMessageTextColor); + } + + if (settings.buttonBackgroundColor) { + setButtonBackgroundColor(settings.buttonBackgroundColor); + document.documentElement.style.setProperty('--button-background-color', settings.buttonBackgroundColor); + } + + if (settings.buttonHoverBackgroundColor) { + setButtonHoverBackgroundColor(settings.buttonHoverBackgroundColor); + document.documentElement.style.setProperty('--button-hover-background-color', settings.buttonHoverBackgroundColor); + } + + if (settings.modelsBackgroundColor) { + setModelsBackgroundColor(settings.modelsBackgroundColor); + document.documentElement.style.setProperty('--models-background-color', settings.modelsBackgroundColor); + } + + if (settings.historyBackgroundColor) { + setHistoryBackgroundColor(settings.historyBackgroundColor); + document.documentElement.style.setProperty('--history-background-color', settings.historyBackgroundColor); + } + + if (settings.leftPanelBackgroundColor) { + setLeftPanelBackgroundColor(settings.leftPanelBackgroundColor); + document.documentElement.style.setProperty('--left-panel-background-color', settings.leftPanelBackgroundColor); + } + + if (settings.conversationBackgroundColor) { + setConversationBackgroundColor(settings.conversationBackgroundColor); + document.documentElement.style.setProperty('--conversation-background-color', settings.conversationBackgroundColor); + } + + if (settings.popUpTextColor) { + setPopUpTextColor(settings.popUpTextColor); + document.documentElement.style.setProperty('--pop-up-text', settings.popUpTextColor); + } + + if (settings.inputBorderColor) { + setInputBorderColor(settings.inputBorderColor); + document.documentElement.style.setProperty('--input-border-color', settings.inputBorderColor); + } + + if (settings.fontFamily) { + setFontFamily(settings.fontFamily); + document.documentElement.style.setProperty('--font-family', settings.fontFamily); + } + + if (settings.fontSize) { + setFontSize(settings.fontSize); + document.documentElement.style.setProperty('--font-size', settings.fontSize); + } + + if (settings.burgerMenu) { + setBurgerMenu(settings.burgerMenu); + document.documentElement.style.setProperty('--burger-menu-background-color', settings.burgerMenu); + } + + // Additional theme settings + if (settings.faqBackgroundColor) { + document.documentElement.style.setProperty('--faq-background-color', settings.faqBackgroundColor); + } + + if (settings.faqHeadingColor) { + document.documentElement.style.setProperty('--faq-heading-color', settings.faqHeadingColor); + } + + if (settings.faqItemBackgroundColor) { + document.documentElement.style.setProperty('--faq-item-background-color', settings.faqItemBackgroundColor); + } + + if (settings.faqItemHeadingColor) { + document.documentElement.style.setProperty('--faq-item-heading-color', settings.faqItemHeadingColor); + } + + if (settings.faqItemTextColor) { + document.documentElement.style.setProperty('--faq-item-text-color', settings.faqItemTextColor); + } + + if (settings.faqItemHoverBackgroundColor) { + document.documentElement.style.setProperty('--faq-item-hover-background-color', settings.faqItemHoverBackgroundColor); + } + + if (settings.popupBackgroundColor) { + document.documentElement.style.setProperty('--popup-background-color', settings.popupBackgroundColor); + } + + if (settings.overlayTextColor) { + document.documentElement.style.setProperty('--overlay-text-color', settings.overlayTextColor); + } + }; + // Function to handle updating all credentials const handleUpdateCredentials = async () => { @@ -521,330 +607,449 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( ); - case 'theme': - return ( -
-

Theme Settings

- - {/* Dropdown to select theme */} -
-

Select Theme

- -
+ case 'theme': + return ( +
+

Theme Settings

+ + {/* Dropdown to select theme */} +
+

Select Theme

+ +
+ {/* Conditionally render theme settings only if "CUSTOM" is selected */} + {selectedTheme === 'CUSTOM' && ( + <> + {/* Font Size */} +
+

Font Size

+ { + const newSize = `${e.target.value}px`; + setFontSize(newSize); + document.documentElement.style.setProperty('--font-size', newSize); + }} + /> + {fontSize} +
- {/* Conditionally render theme settings only if "CUSTOM" is selected */} - {selectedTheme === 'CUSTOM' && ( - <> -
-

Font Size

- { - const newSize = `${e.target.value}px`; - setFontSize(newSize); - document.documentElement.style.setProperty('--font-size', newSize); - }} - /> - {fontSize} -
+ {/* Background Color */} +
+

Background Color

+ { + const newColor = e.target.value; + setBackgroundColor(newColor); + document.documentElement.style.setProperty('--background-color', newColor); + }} + /> +
-
-

Background Color

- { - const newColor = e.target.value; - setBackgroundColor(newColor); - document.documentElement.style.setProperty('--background-color', newColor); - }} - /> -
+ {/* Text Color */} +
+

Text Color

+ { + const newColor = e.target.value; + setTextColor(newColor); + document.documentElement.style.setProperty('--text-color', newColor); + }} + /> +
-
-

Text Color

- { - const newColor = e.target.value; - setTextColor(newColor); - document.documentElement.style.setProperty('--text-color', newColor); - }} - /> -
+ {/* Input Background Color */} +
+

Input Background Color

+ { + const newColor = e.target.value; + setInputBackgroundColor(newColor); + document.documentElement.style.setProperty('--input-background-color', newColor); + }} + /> +
-
-

Input Background Color

- { - const newColor = e.target.value; - setInputBackgroundColor(newColor); - document.documentElement.style.setProperty('--input-background-color', newColor); - }} - /> -
+ {/* Input Button Color */} +
+

Input Button Color

+ { + const newColor = e.target.value; + setInputButtonColor(newColor); + document.documentElement.style.setProperty('--input-button-color', newColor); + }} + /> +
-
-

Input Button Color

- { - const newColor = e.target.value; - setInputButtonColor(newColor); - document.documentElement.style.setProperty('--input-button-color', newColor); - }} - /> -
+ {/* Input Button Hover Color */} +
+

Input Button Hover Color

+ { + const newColor = e.target.value; + setInputButtonHoverColor(newColor); + document.documentElement.style.setProperty('--input-button-hover-color', newColor); + }} + /> +
-
-

Input Button Hover Color

- { - const newColor = e.target.value; - setInputButtonHoverColor(newColor); - document.documentElement.style.setProperty('--input-button-hover-color', newColor); - }} - /> -
+ {/* User Message Background Color */} +
+

User Message Background Color

+ { + const newColor = e.target.value; + setUserMessageBackgroundColor(newColor); + document.documentElement.style.setProperty('--user-message-background-color', newColor); + }} + /> +
-
-

User Message Background Color

- { - const newColor = e.target.value; - setUserMessageBackgroundColor(newColor); - document.documentElement.style.setProperty('--user-message-background-color', newColor); - }} - /> -
+ {/* User Message Text Color */} +
+

User Message Text Color

+ { + const newColor = e.target.value; + setUserMessageTextColor(newColor); + document.documentElement.style.setProperty('--user-message-text-color', newColor); + }} + /> +
-
-

User Message Text Color

- { - const newColor = e.target.value; - setUserMessageTextColor(newColor); - document.documentElement.style.setProperty('--user-message-text-color', newColor); - }} - /> -
+ {/* AI Message Background Color */} +
+

AI Message Background Color

+ { + const newColor = e.target.value; + setAiMessageBackgroundColor(newColor); + document.documentElement.style.setProperty('--ai-message-background-color', newColor); + }} + /> +
-
-

AI Message Background Color

- { - const newColor = e.target.value; - setAiMessageBackgroundColor(newColor); - document.documentElement.style.setProperty('--ai-message-background-color', newColor); - }} - /> -
+ {/* AI Message Text Color */} +
+

AI Message Text Color

+ { + const newColor = e.target.value; + setAiMessageTextColor(newColor); + document.documentElement.style.setProperty('--ai-message-text-color', newColor); + }} + /> +
-
-

AI Message Text Color

- { - const newColor = e.target.value; - setAiMessageTextColor(newColor); - document.documentElement.style.setProperty('--ai-message-text-color', newColor); - }} - /> -
+ {/* Button Background Color */} +
+

Button Background Color

+ { + const newColor = e.target.value; + setButtonBackgroundColor(newColor); + document.documentElement.style.setProperty('--button-background-color', newColor); + }} + /> +
-
-

Button Background Color

- { - const newColor = e.target.value; - setButtonBackgroundColor(newColor); - document.documentElement.style.setProperty('--button-background-color', newColor); - }} - /> -
+ {/* Button Hover Background Color */} +
+

Button Hover Background Color

+ { + const newColor = e.target.value; + setButtonHoverBackgroundColor(newColor); + document.documentElement.style.setProperty('--button-hover-background-color', newColor); + }} + /> +
-
-

Button Hover Background Color

- { - const newColor = e.target.value; - setButtonHoverBackgroundColor(newColor); - document.documentElement.style.setProperty('--button-hover-background-color', newColor); - }} - /> -
+ {/* Models Background Color */} +
+

Models Background Color

+ { + const newColor = e.target.value; + setModelsBackgroundColor(newColor); + document.documentElement.style.setProperty('--models-background-color', newColor); + }} + /> +
-
-

Models Background Color

- { - const newColor = e.target.value; - setModelsBackgroundColor(newColor); - document.documentElement.style.setProperty('--models-background-color', newColor); - }} - /> -
+ {/* History Background Color */} +
+

History Background Color

+ { + const newColor = e.target.value; + setHistoryBackgroundColor(newColor); + document.documentElement.style.setProperty('--history-background-color', newColor); + }} + /> +
-
-

History Background Color

- { - const newColor = e.target.value; - setHistoryBackgroundColor(newColor); - document.documentElement.style.setProperty('--history-background-color', newColor); - }} - /> -
+ {/* Left Panel Background Color */} +
+

Left Panel Background Color

+ { + const newColor = e.target.value; + setLeftPanelBackgroundColor(newColor); + document.documentElement.style.setProperty('--left-panel-background-color', newColor); + }} + /> +
-
-

Left Panel Background Color

- { - const newColor = e.target.value; - setLeftPanelBackgroundColor(newColor); - document.documentElement.style.setProperty('--left-panel-background-color', newColor); - }} - /> -
+ {/* Conversation Background Color */} +
+

Conversation Background Color

+ { + const newColor = e.target.value; + setConversationBackgroundColor(newColor); + document.documentElement.style.setProperty('--conversation-background-color', newColor); + }} + /> +
-
-

Conversation Background Color

- { - const newColor = e.target.value; - setConversationBackgroundColor(newColor); - document.documentElement.style.setProperty('--conversation-background-color', newColor); - }} - /> -
+ {/* Pop-up Text Color */} +
+

Pop-up Text Color

+ { + const newColor = e.target.value; + setPopUpTextColor(newColor); + document.documentElement.style.setProperty('--pop-up-text', newColor); + }} + /> +
-
-

Pop-up Text Color

- { - const newColor = e.target.value; - setPopUpTextColor(newColor); - document.documentElement.style.setProperty('--pop-up-text', newColor); - }} - /> -
+ {/* Input Border Color */} +
+

Input Border Color

+ { + const newColor = e.target.value; + setInputBorderColor(newColor); + document.documentElement.style.setProperty('--input-border-color', newColor); + }} + /> +
-
-

Burger Menu Color

- { - const newColor = e.target.value; - setBurgerMenu(newColor); - document.documentElement.style.setProperty('--burger-menu-background-color', newColor); - }} - /> -
+ {/* Font Family */} +
+

Font Family

+ +
-
-

Input Border Color

- { - const newColor = e.target.value; - setInputBorderColor(newColor); - document.documentElement.style.setProperty('--input-border-color', newColor); - }} - /> -
+ {/* FAQ Background Color */} +
+

FAQ Background Color

+ { + const newColor = e.target.value; + setFaqBackgroundColor(newColor); + document.documentElement.style.setProperty('--faq-background-color', newColor); + }} + /> +
-
-

Font Family

- -
+ {/* FAQ Heading Color */} +
+

FAQ Heading Color

+ { + const newColor = e.target.value; + setFaqHeadingColor(newColor); + document.documentElement.style.setProperty('--faq-heading-color', newColor); + }} + /> +
- - )} + {/* FAQ Item Background Color */} +
+

FAQ Item Background Color

+ { + const newColor = e.target.value; + setFaqItemBackgroundColor(newColor); + document.documentElement.style.setProperty('--faq-item-background-color', newColor); + }} + /> +
+ + {/* FAQ Item Heading Color */} +
+

FAQ Item Heading Color

+ { + const newColor = e.target.value; + setFaqItemHeadingColor(newColor); + document.documentElement.style.setProperty('--faq-item-heading-color', newColor); + }} + /> +
+ + {/* FAQ Item Text Color */} +
+

FAQ Item Text Color

+ { + const newColor = e.target.value; + setFaqItemTextColor(newColor); + document.documentElement.style.setProperty('--faq-item-text-color', newColor); + }} + /> +
+ + {/* FAQ Item Hover Background Color */} +
+

FAQ Item Hover Background Color

+ { + const newColor = e.target.value; + setFaqItemHoverBackgroundColor(newColor); + document.documentElement.style.setProperty('--faq-item-hover-background-color', newColor); + }} + /> +
+ + {/* Popup Background Color */} +
+

Popup Background Color

+ { + const newColor = e.target.value; + setPopupBackgroundColor(newColor); + document.documentElement.style.setProperty('--popup-background-color', newColor); + }} + /> +
+ + {/* Overlay Text Color */} +
+

Overlay Text Color

+ { + const newColor = e.target.value; + setOverlayTextColor(newColor); + document.documentElement.style.setProperty('--overlay-text-color', newColor); + }} + /> +
+ + )}
); @@ -1028,12 +1233,22 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( disableChatHistory, disableAIMemory, openSourceMode, - + // API Keys - mistral, - openai, - anthropic, - google + mistral, + openai, + anthropic, + google, + + // Additional theme settings if needed + faqBackgroundColor, + faqHeadingColor, + faqItemBackgroundColor, + faqItemHeadingColor, + faqItemTextColor, + faqItemHoverBackgroundColor, + popupBackgroundColor, + overlayTextColor, }; @@ -1059,7 +1274,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( diff --git a/app/components/theme.ts b/app/components/theme.ts index f9367bd..bfd3d9a 100644 --- a/app/components/theme.ts +++ b/app/components/theme.ts @@ -92,5 +92,65 @@ export const applyBlackTheme = () => { document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family document.documentElement.style.setProperty('--font-size', '16px'); // Font size - document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size + document.documentElement.style.setProperty('--burger-menu-background-color', '# 79832e'); // Font size }; + +export const applyCustomTheme = () => { + // fix that later ouh fuck what have I done + /* + const themeVariables = { + backgroundColor: localStorage.getItem('backgroundColor'), + textColor: localStorage.getItem('textColor'), + inputBackgroundColor: localStorage.getItem('inputBackgroundColor'), + inputButtonColor: localStorage.getItem('inputButtonColor'), + inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'), + userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'), + userMessageTextColor: localStorage.getItem('userMessageTextColor'), + aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'), + aiMessageTextColor: localStorage.getItem('aiMessageTextColor'), + buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'), + buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'), + modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'), + historyBackgroundColor: localStorage.getItem('historyBackgroundColor'), + leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'), + conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'), + popUpTextColor: localStorage.getItem('popUpTextColor'), + inputBorderColor: localStorage.getItem('inputBorderColor'), + fontFamily: localStorage.getItem('fontFamily'), + fontSize: localStorage.getItem('fontSize'), + }; + + document.documentElement.style.setProperty('--header-background-color', themeVariables[header]); // Dark header background + document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color + document.documentElement.style.setProperty('--background-color', '#121212'); // Main background color + document.documentElement.style.setProperty('--text-color', '#e0e0e0'); // Main text color + document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Input fields background + document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color + document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color + document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background + document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color + document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background + document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI messages text color + document.documentElement.style.setProperty('--button-background-color', '#3c3c3c'); // Button background color + document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover color + document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); // Models section background + document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background + document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background + document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background + document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background + document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background + document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color + document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background + document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color + document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color + document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background + document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Pop-up text color + document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color + document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family + document.documentElement.style.setProperty('--font-size', '16px'); // Font size + document.documentElement.style.setProperty('--burger-menu-background-color', '# 79832e'); // Font size + + + // Apply those settings + */ +} diff --git a/app/page.tsx b/app/page.tsx index 9afccc2..6bddf87 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -7,6 +7,8 @@ import Documentation from './components/Documentation'; // Ensure the import pat import History from './components/History'; import Models from './components/Models'; import Credits from './components/Credits'; +import Settings from './components/Settings'; +import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './components/theme' import Head from 'next/head'; import './styles/master.css'; @@ -26,6 +28,33 @@ const LandingPage: React.FC = () => { } }; + const [selectedTheme, setSelectedTheme] = useState(''); + + useEffect(() => { + const savedTheme = localStorage.getItem('selectedTheme'); + if (savedTheme) { + setSelectedTheme(savedTheme); + // Apply the saved theme on initial load + switch (savedTheme) { + case 'IOMARKET': + applyIOMarketTheme(); + break; + case 'WHITE': + applyWhiteTheme(); + break; + case 'BLACK': + applyBlackTheme(); + break; + case 'CUSTOM': + + break; + default: + applyIOMarketTheme(); + break; + } + } + }, []); // Runs only once when the component mounts + return ( <>
Date: Mon, 30 Sep 2024 16:12:04 +0200 Subject: [PATCH 6/7] In the name of the lord i once have done it again... it finally works yay --- app/components/theme.ts | 73 +++++++++++++++++++++-------------------- app/page.tsx | 4 +-- 2 files changed, 39 insertions(+), 38 deletions(-) diff --git a/app/components/theme.ts b/app/components/theme.ts index bfd3d9a..b4f64e2 100644 --- a/app/components/theme.ts +++ b/app/components/theme.ts @@ -96,8 +96,7 @@ export const applyBlackTheme = () => { }; export const applyCustomTheme = () => { - // fix that later ouh fuck what have I done - /* + // Theme variables const themeVariables = { backgroundColor: localStorage.getItem('backgroundColor'), textColor: localStorage.getItem('textColor'), @@ -118,39 +117,41 @@ export const applyCustomTheme = () => { inputBorderColor: localStorage.getItem('inputBorderColor'), fontFamily: localStorage.getItem('fontFamily'), fontSize: localStorage.getItem('fontSize'), - }; + burgerMenu: localStorage.getItem('burgerMenu'), + faqBackgroundColor: localStorage.getItem('faqBackgroundColor'), + faqHeadingColor: localStorage.getItem('faqHeadingColor'), + faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'), + faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'), + faqItemTextColor: localStorage.getItem('faqItemTextColor'), + faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'), + popupBackgroundColor: localStorage.getItem('popupBackgroundColor'), + overlayTextColor: localStorage.getItem('overlayTextColor'), + }; + + document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212'); // Main background color + document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0'); // Main text color + document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e'); // Input fields background + document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c'); // Button color + document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a'); // Button hover color + document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000'); // User messages background + document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff'); // User messages text color + document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020'); // AI messages background + document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff'); // AI messages text color + document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c'); // Button background color + document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a'); // Button hover color + document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e'); // Models section background + document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a'); // History background + document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e'); // Left panel background + document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c'); // Conversation container background + document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c'); // FAQ section background + document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff'); // FAQ heading color + document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c'); // FAQ items background + document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff'); // FAQ items heading color + document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0'); // FAQ items text color + document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a'); // FAQ items hover background + document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c'); // Input border color + document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'"); // Font family + document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px'); // Font size + document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e'); // Burger menu background color - document.documentElement.style.setProperty('--header-background-color', themeVariables[header]); // Dark header background - document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color - document.documentElement.style.setProperty('--background-color', '#121212'); // Main background color - document.documentElement.style.setProperty('--text-color', '#e0e0e0'); // Main text color - document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Input fields background - document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color - document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color - document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background - document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color - document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background - document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI messages text color - document.documentElement.style.setProperty('--button-background-color', '#3c3c3c'); // Button background color - document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover color - document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); // Models section background - document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background - document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background - document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background - document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background - document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background - document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color - document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background - document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color - document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color - document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background - document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Pop-up text color - document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color - document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family - document.documentElement.style.setProperty('--font-size', '16px'); // Font size - document.documentElement.style.setProperty('--burger-menu-background-color', '# 79832e'); // Font size - - - // Apply those settings - */ } diff --git a/app/page.tsx b/app/page.tsx index 6bddf87..b2e6c90 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -8,7 +8,7 @@ import History from './components/History'; import Models from './components/Models'; import Credits from './components/Credits'; import Settings from './components/Settings'; -import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './components/theme' +import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme } from './components/theme' import Head from 'next/head'; import './styles/master.css'; @@ -46,7 +46,7 @@ const LandingPage: React.FC = () => { applyBlackTheme(); break; case 'CUSTOM': - + applyCustomTheme(); break; default: applyIOMarketTheme(); -- 2.39.5 From 36672f42aa47021639c700d43acee117ec8bb72a Mon Sep 17 00:00:00 2001 From: Patrick_Pluto Date: Mon, 30 Sep 2024 16:13:04 +0200 Subject: [PATCH 7/7] database works like 50% --- app/components/Login.tsx | 7 +++++-- py/db.py | 13 ++++++++++--- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/app/components/Login.tsx b/app/components/Login.tsx index c766f09..1d8a4e6 100644 --- a/app/components/Login.tsx +++ b/app/components/Login.tsx @@ -55,9 +55,12 @@ const Login: React.FC = () => { const savedAccountName = localStorage.getItem('accountName'); // Check if savedAccountName or savedAccountEmail is not null before passing to checkCredentials - const accountIdentifier = savedAccountName || savedAccountEmail; + var accountIdentifier = savedAccountName || savedAccountEmail; + if (!accountIdentifier) { + accountIdentifier = accountName + } - if (accountIdentifier && password === savedAccountPassword) { + if (accountIdentifier && password) { const success = await checkCredentials(accountIdentifier, password); if (success) { setIsLoggedIn(true); // Successful login diff --git a/py/db.py b/py/db.py index a20cd84..778c6c7 100644 --- a/py/db.py +++ b/py/db.py @@ -9,9 +9,13 @@ class DB: self.database = {} def ensure_username(self, data): - if hasattr(data, 'username'): + print(data) + print(self.database) + if 'username' in data: + print("usr") return data.get('username') - elif hasattr(data, 'email'): + elif 'email' in data: + print("email") for index, entry in self.database: if entry.get('email') == data.get('email'): return index @@ -71,10 +75,13 @@ class DB: username = self.ensure_username(data) password = data.get('password') if username not in self.database: + print("no username") + print(username) return False stored_hashed_password = self.database[username]["hashed_password"] entered_hashed_password = self.hash_password(password) + print(stored_hashed_password == entered_hashed_password) return stored_hashed_password == entered_hashed_password def get_data(self, data): @@ -82,7 +89,7 @@ class DB: if not self.check_credentials(data): return None - send_back = self.database(username).get('data') + send_back = self.database[username].get('data') return send_back def save_database(self): -- 2.39.5