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..c332ff4 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 = { @@ -42,15 +41,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]); @@ -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/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/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/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..b4f64e2 100644 --- a/app/components/theme.ts +++ b/app/components/theme.ts @@ -92,5 +92,66 @@ 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 = () => { + // Theme variables + 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'), + 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 + +} diff --git a/app/page.tsx b/app/page.tsx index 9afccc2..b2e6c90 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, applyCustomTheme } 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': + applyCustomTheme(); + break; + default: + applyIOMarketTheme(); + break; + } + } + }, []); // Runs only once when the component mounts + return ( <>