From a05b9d6a5f36454e53a3c90eaa6fffa6db72f76f Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Thu, 26 Sep 2024 09:29:04 +0200 Subject: [PATCH 1/5] Trying to fix the settings --- app/components/Models.tsx | 224 +++++++++++++----------- app/components/Settings.tsx | 328 +++++++++++++++++------------------- app/styles/Settings.css | 27 ++- public/img/default.jpg | Bin 568224 -> 401256 bytes public/img/financial.jpg | Bin 143611 -> 95160 bytes public/img/image.jpg | Bin 248852 -> 188220 bytes public/img/language.jpg | Bin 107712 -> 101944 bytes public/img/math.jpg | Bin 42107 -> 72578 bytes public/img/time.jpg | Bin 159782 -> 107903 bytes public/img/weather.jpg | Bin 1420137 -> 1187008 bytes 10 files changed, 305 insertions(+), 274 deletions(-) diff --git a/app/components/Models.tsx b/app/components/Models.tsx index f151777..58815ec 100644 --- a/app/components/Models.tsx +++ b/app/components/Models.tsx @@ -1,6 +1,6 @@ -import React, { useState, useEffect } from 'react'; + import React, { useState, useEffect } from 'react'; -const Models: React.FC = () => { + // Define the available model options const modelOptions = [ 'Offline Fast', 'Offline Fast (FOSS)', @@ -16,106 +16,134 @@ const Models: React.FC = () => { 'Online Expensive (Google)', ]; - const [selectedModel, setSelectedModel] = useState(() => { - // Load the selected model from localStorage on initial render - return localStorage.getItem('selectedModel') || 'Offline Fast'; - }); + // Define the properties passed to the Models component + interface ModelsProps { + selectedOption: string; // Privacy setting: "Offline", "AI Online", "None" + } - const handleModelChange = (event: React.ChangeEvent) => { - const newModel = event.target.value; - setSelectedModel(newModel); - }; + const Models: React.FC = ({ selectedOption }) => { + // State for the selected model, default is loaded from localStorage or defaults to 'Offline Fast' + const [selectedModel, setSelectedModel] = useState(() => { + return localStorage.getItem('selectedModel') || 'Offline Fast'; + }); - const isOfflineModel = (model: string) => { - return model.includes('Offline'); - }; + // Handle changes in the selected model from the dropdown + const handleModelChange = (event: React.ChangeEvent) => { + const newModel = event.target.value; + setSelectedModel(newModel); + }; - // Save selected model to localStorage whenever it changes - useEffect(() => { - localStorage.setItem('selectedModel', selectedModel); - }, [selectedModel]); + // Utility function to check if a model is an offline model + const isOfflineModel = (model: string) => { + return model.includes('Offline'); + }; - return ( -
-
-
-

Different AI models

-
-
- - -
-
- - - - - - - - - - + // Utility function to check if a model is an online model + const isOnlineModel = (model: string) => { + return model.includes('Online'); + }; + + // Save selected model to localStorage whenever it changes + useEffect(() => { + localStorage.setItem('selectedModel', selectedModel); + }, [selectedModel]); + + // Filter models based on the selected privacy option (Offline, AI Online, None) + const filteredModels = modelOptions.filter((model) => { + if (selectedOption === 'Offline') { + return !isOnlineModel(model); // Hide online models + } else if (selectedOption === 'AI Online') { + return !isOfflineModel(model); // Hide offline models + } else { + return true; // Show all models for "None" + } + }); + + return ( +
+
+
+

Different AI models

+
+ + {/* Model Selection Dropdown */} +
+ + +
+ + {/* Model Grid with Cards */} +
+ + + + + + + + + + +
-
- ); -}; + ); + }; -export default Models; + export default Models; diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx index 84582fc..631a19e 100644 --- a/app/components/Settings.tsx +++ b/app/components/Settings.tsx @@ -6,7 +6,17 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const getItemFromLocalStorage = (key: string) => { const item = localStorage.getItem(key); - return item ? JSON.parse(item) : false; // Default to false if item is null + + if (item) { + try { + return JSON.parse(item); // Attempt to parse the item + } catch (e) { + console.error(`Error parsing JSON for key "${key}":`, e); + return false; // Return false if parsing fails + } + } + + return false; // Default to false if item is null or empty }; // Active section @@ -14,30 +24,29 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( // Language setting const [preferredLanguage, setPreferredLanguage] = useState(() => localStorage.getItem('preferredLanguage') || 'en'); - + // Currency setting const [preferredCurrency, setPreferredCurrency] = useState(() => localStorage.getItem('preferredCurrency') || 'usd'); - + // Date and time format settings const [dateFormat, setDateFormat] = useState(() => localStorage.getItem('dateFormat') || 'mm/dd/yyyy'); const [timeFormat, setTimeFormat] = useState(() => localStorage.getItem('timeFormat') || '12-hour'); const [timeZone, setTimeZone] = useState(() => localStorage.getItem('timeZone') || 'GMT'); - + // Online AI and chat history settings - // State declarations - const [disableOnlineAI, setDisableOnlineAI] = useState(() => getItemFromLocalStorage('disableOnlineAI')); + const [selectedOption, setSelectedOption] = useState('Offline'); // Default to 'Offline' const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory')); const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory')); const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode')); - + // User credentials const [newName, setNewName] = useState(() => localStorage.getItem('newName') || ''); const [newEmail, setNewEmail] = useState(() => localStorage.getItem('newEmail') || ''); const [newPassword, setNewPassword] = useState(() => localStorage.getItem('newPassword') || ''); - + // Measurement setting const [preferredMeasurement, setPreferredMeasurement] = useState(() => localStorage.getItem('preferredMeasurement') || 'Metric'); - + // Theme settings const [backgroundColor, setBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim()); const [textColor, setTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim()); @@ -58,174 +67,124 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const [inputBorderColor, setInputBorderColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim()); 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 [burgerMenu, setBurgerMenu] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color').trim()); + // Theme selection const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default'); - + // API Keys const [laPlateforme, setLaPlateforme] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim()); const [openAI, setOpenAI] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim()); const [anthropic, setAnthropic] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim()); const [google, setGoogle] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim()); + // Effect hooks to update localStorage whenever any state changes useEffect(() => { - localStorage.setItem('activeSection', activeSection); - }, [activeSection]); - - useEffect(() => { - localStorage.setItem('preferredLanguage', preferredLanguage); - }, [preferredLanguage]); - - useEffect(() => { - localStorage.setItem('preferredCurrency', preferredCurrency); - }, [preferredCurrency]); - - useEffect(() => { - localStorage.setItem('dateFormat', dateFormat); - }, [dateFormat]); - - useEffect(() => { - localStorage.setItem('timeFormat', timeFormat); - }, [timeFormat]); - - useEffect(() => { - localStorage.setItem('timeZone', timeZone); - }, [timeZone]); - - useEffect(() => { - localStorage.setItem('disableOnlineAI', JSON.stringify(disableOnlineAI)); - }, [disableOnlineAI]); - - useEffect(() => { - localStorage.setItem('disableChatHistory', JSON.stringify(disableChatHistory)); - }, [disableChatHistory]); - - useEffect(() => { - localStorage.setItem('disableAIMemory', JSON.stringify(disableAIMemory)); - }, [disableAIMemory]); - - useEffect(() => { - localStorage.setItem('openSourceMode', JSON.stringify(openSourceMode)); - }, [openSourceMode]); - - useEffect(() => { - localStorage.setItem('newName', newName); - }, [newName]); - - useEffect(() => { - localStorage.setItem('newEmail', newEmail); - }, [newEmail]); - - useEffect(() => { - localStorage.setItem('newPassword', newPassword); - }, [newPassword]); - - useEffect(() => { - localStorage.setItem('preferredMeasurement', preferredMeasurement); - }, [preferredMeasurement]); - - useEffect(() => { - localStorage.setItem('backgroundColor', backgroundColor); - }, [backgroundColor]); - - useEffect(() => { - localStorage.setItem('textColor', textColor); - }, [textColor]); - - useEffect(() => { - localStorage.setItem('inputBackgroundColor', inputBackgroundColor); - }, [inputBackgroundColor]); - - useEffect(() => { - localStorage.setItem('inputButtonColor', inputButtonColor); - }, [inputButtonColor]); - - useEffect(() => { - localStorage.setItem('inputButtonHoverColor', inputButtonHoverColor); - }, [inputButtonHoverColor]); - - useEffect(() => { - localStorage.setItem('userMessageBackgroundColor', userMessageBackgroundColor); - }, [userMessageBackgroundColor]); - - useEffect(() => { - localStorage.setItem('userMessageTextColor', userMessageTextColor); - }, [userMessageTextColor]); - - useEffect(() => { - localStorage.setItem('aiMessageBackgroundColor', aiMessageBackgroundColor); - }, [aiMessageBackgroundColor]); - - useEffect(() => { - localStorage.setItem('aiMessageTextColor', aiMessageTextColor); - }, [aiMessageTextColor]); - - useEffect(() => { - localStorage.setItem('buttonBackgroundColor', buttonBackgroundColor); - }, [buttonBackgroundColor]); - - useEffect(() => { - localStorage.setItem('buttonHoverBackgroundColor', buttonHoverBackgroundColor); - }, [buttonHoverBackgroundColor]); - - useEffect(() => { - localStorage.setItem('modelsBackgroundColor', modelsBackgroundColor); - }, [modelsBackgroundColor]); - - useEffect(() => { - localStorage.setItem('historyBackgroundColor', historyBackgroundColor); - }, [historyBackgroundColor]); - - useEffect(() => { - localStorage.setItem('leftPanelBackgroundColor', leftPanelBackgroundColor); - }, [leftPanelBackgroundColor]); - - useEffect(() => { - localStorage.setItem('conversationBackgroundColor', conversationBackgroundColor); - }, [conversationBackgroundColor]); - - useEffect(() => { - localStorage.setItem('popUpTextColor', popUpTextColor); - }, [popUpTextColor]); - - useEffect(() => { - localStorage.setItem('inputBorderColor', inputBorderColor); - }, [inputBorderColor]); - - useEffect(() => { - localStorage.setItem('fontFamily', fontFamily); - }, [fontFamily]); - - useEffect(() => { - localStorage.setItem('fontSize', fontSize); - }, [fontSize]); + const settings = { + 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, + laPlateforme, + openAI, + anthropic, + google, + }; + + // Update local storage + for (const [key, value] of Object.entries(settings)) { + if (typeof value === 'boolean') { + localStorage.setItem(key, JSON.stringify(value)); + } else { + localStorage.setItem(key, value); + } + } + }, [ + 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, + laPlateforme, + openAI, + anthropic, + google, + ]); + + useEffect(() => { + const savedOption = localStorage.getItem('radioSelection'); + if (savedOption) { + setSelectedOption(savedOption); // Set saved selection + } + }, []); + + const handleRadioChange = (newValue: string) => { + setSelectedOption(newValue); // Update the state with the selected option + localStorage.setItem('radioSelection', newValue); // Save the selection for persistence + }; - useEffect(() => { - localStorage.setItem('burgerMenu', burgerMenu); - }, [fontSize]); - - useEffect(() => { - localStorage.setItem('selectedTheme', selectedTheme); - }, [selectedTheme]); - - useEffect(() => { - localStorage.setItem('laPlateforme', laPlateforme); - }, [laPlateforme]); - - useEffect(() => { - localStorage.setItem('openAI', openAI); - }, [openAI]); - - useEffect(() => { - localStorage.setItem('anthropic', anthropic); - }, [anthropic]); - - useEffect(() => { - localStorage.setItem('google', google); - }, [google]); - // Apply imported settings to the CSS variables const applySettings = (settings: any) => { if (settings.backgroundColor) { @@ -439,16 +398,33 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( return (

Privacy Settings

+ + {/* AI Mode Radio Options */}
- +

Disable Options:

+
+
handleRadioChange('Offline')} // Handle selection + > + Offline tools +
+
handleRadioChange('AI Online')} + > + Online tools +
+
handleRadioChange('None')} + > + None +
+
+ + {/* Disable Chat History Checkbox */}
+ + {/* Disable AI Memory Checkbox */}