diff --git a/app/components/Models.tsx b/app/components/Models.tsx index d8fe467..2c56cae 100644 --- a/app/components/Models.tsx +++ b/app/components/Models.tsx @@ -1,6 +1,7 @@ -import React, { useEffect, useState } from 'react'; +"use client"; +import React, { useState, useEffect } from 'react'; -// Sample modelList definition; replace this with your actual modelList +// Define all models that should be available. const modelList = { 'Offline Fast': { model_type: 'local', @@ -168,54 +169,62 @@ const selectedAIFunction = [ const ModelSection: React.FC = () => { // Initialize state with value from localStorage or default to '' - const [selectedModelDropdown, setSelectedModelDropdown] = useState('Offline Fast'); - const [radioSelection, setRadioSelection] = useState(""); + const [selectedModelDropdown, setSelectedModelDropdown] = useState(''); + const [radioSelection, setRadioSelection] = useState("") const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(''); const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState(""); const [isOpenSourceMode, setIsOpenSourceMode] = useState(localStorage.getItem('openSourceMode') || "false") useEffect(() => { - // Load initial values from localStorage - const temp = localStorage.getItem("activeSelectedAIFunction") || ""; - setActiveSelectedAIFunction(temp); - - // Check if localStorage keys exist, else set defaults + var temp = localStorage.getItem("activeSelectedAIFunction") || "" + setActiveSelectedAIFunction(temp) if (!localStorage.getItem('selectedModelDropdown')) { - localStorage.setItem("selectedModelDropdown", "Offline Fast"); + localStorage.setItem("selectedModelDropdown", "Offline Fast") } - // Set the dropdown and selected AI function from localStorage - const storedSelectedModel = localStorage.getItem('selectedModelDropdown') as ModelKeys; - const storedActiveFunction = localStorage.getItem("activeSelectedAIFunction") || 'Code'; - - setSelectedModelDropdown(storedSelectedModel); - setCurrentSelectedAIFunction(storedActiveFunction); + if (!localStorage.getItem("activeSelectedAIFunction")) { + setActiveSelectedAIFunction('Code') + localStorage.setItem('activeSelectedAIFunction', 'Code') + } if (!localStorage.getItem("model")) { - localStorage.setItem("model", 'starcoder2'); + localStorage.setItem("model", 'starcoder2') } if (!localStorage.getItem("radioSelection")) { - localStorage.setItem("radioSelection", 'None'); + localStorage.setItem("radioSelection", 'None') } - // Load radio selection from localStorage - setRadioSelection(localStorage.getItem('radioSelection') || ''); - }, []); + if (!localStorage.getItem("type")) { + localStorage.setItem("type", 'local') + } - const filteredModels = Object.keys(modelList).filter(model => modelList[model as ModelKeys]); + const handleStorageChange = () => { + setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || ''); + }; + + // Update immediately when localStorage changes + window.addEventListener('storage', handleStorageChange); + + setRadioSelection(localStorage.getItem('radioSelection') || ''); + setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || ''); + // Cleanup listener on component unmount + return () => { + window.removeEventListener('storage', handleStorageChange); + }; + }, []); // Dependency array can remain empty if you only want this to run on mount + + useEffect(() => { + var storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || ""; + if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) { + setCurrentSelectedAIFunction(storedActiveSelectedAIFunction); + } + }, [activeSelectedAIFunction]); const handleModelChange = (event: React.ChangeEvent) => { - const selectedModel = event.target.value as ModelKeys; - setSelectedModelDropdown(selectedModel); - localStorage.setItem('selectedModelDropdown', selectedModel); - - // Update model and type in local storage - const modelType = modelList[selectedModel].model_type; - const model = modelList[selectedModel][activeSelectedAIFunction as keyof typeof modelList[typeof selectedModel]]; - - localStorage.setItem('model', model); - localStorage.setItem('type', modelType); + const newModel = event.target.value; + setSelectedModelDropdown(newModel); + localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly }; // Determine the filtered models based on current radioSelection @@ -274,21 +283,12 @@ const ModelSection: React.FC = () => { modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model); const modelClicked = (model: string) => { - const selectedAIFunction = currentSelectedAIFunction as keyof typeof modelList; - - if (modelList[selectedModelDropdown] && modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]]) { - const newModel = modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]]; - const modelType = modelList[selectedModelDropdown]['model_type' as keyof typeof modelList[typeof selectedModelDropdown]]; - - localStorage.setItem('activeSelectedAIFunction', model); - setActiveSelectedAIFunction(model); - localStorage.setItem('model', newModel); - localStorage.setItem('type', modelType); - setCurrentSelectedAIFunction(model); // Ensure to set current function when model is clicked - } else { - console.error(`Model ${model} not found for function ${selectedModelDropdown}`); - } - }; + localStorage.setItem('activeSelectedAIFunction', model) + setActiveSelectedAIFunction(model) + const selectedAIFunction = selectedModelDropdown as keyof typeof modelList; + localStorage.setItem("model", modelList[selectedAIFunction][model as keyof typeof modelList[typeof selectedAIFunction]]) + localStorage.setItem("type", modelList[selectedAIFunction]['model_type' as keyof typeof modelList[typeof selectedAIFunction]]) + } return (
@@ -311,9 +311,8 @@ const ModelSection: React.FC = () => { {/* Model Grid with Cards */}
- {Object.keys(modelList[selectedModelDropdown]) - .filter((key) => key !== 'model_type') // Exclude model_type from display - .map((displayedCategory) => ( + {selectedAIFunction.map( + (displayedCategory) => (
- )) - } + ) + )}
diff --git a/app/components/settings/PrivacySettings.tsx b/app/components/settings/PrivacySettings.tsx index 02d551f..e9cab20 100644 --- a/app/components/settings/PrivacySettings.tsx +++ b/app/components/settings/PrivacySettings.tsx @@ -1,4 +1,5 @@ -import React, { useEffect } from 'react'; +// PrivacySettings.tsx +import React from 'react'; interface PrivacySettingsProps { selectedOption: string; // The currently selected option @@ -7,42 +8,39 @@ interface PrivacySettingsProps { } const PrivacySettings: React.FC = ({ selectedOption, handleRadioChange, openSourceMode }) => { - - // Set default option based on openSourceMode if no option is selected - useEffect(() => { - if (!selectedOption) { - handleRadioChange(openSourceMode ? 'Offline (FOSS)' : 'None'); - } - }, [selectedOption, handleRadioChange, openSourceMode]); - - // Define your options - const options = [ - { value: 'Online', label: 'Online' }, - { value: 'Offline', label: 'Offline' }, - { value: 'None', label: 'None' }, - { value: 'Offline (FOSS)', label: 'Offline (FOSS)' }, - { value: 'Online (FOSS)', label: 'Online (FOSS)' }, - { value: 'None (FOSS)', label: 'None (FOSS)' }, - ]; - return ( -
-

Select Privacy Mode:

- {options.map((option) => ( -
- + <> + {/* AI Mode Radio Options */} +
+

Disable Options:

+
+ {/* Offline */} +
handleRadioChange('Offline')} // Allow selection only if not in open-source mode + > + Offline tools{openSourceMode ? ' (FOSS)' : ''} +
+ + {/* Online */} +
handleRadioChange('Online')} + > + Online tools{openSourceMode ? ' (FOSS)' : ''} +
+ + {/* None */} +
handleRadioChange('None')} + > + None{openSourceMode ? ' (FOSS)' : ''} +
- ))} -
+
+
+ ); }; diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index be45162..530b3da 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -56,14 +56,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const [timeZone, setTimeZone] = useState(() => localStorage.getItem('timeZone') || 'GMT'); // Online AI and chat history settings - const [selectedOption, setSelectedOption] = useState(() => { - // Check if openSourceMode exists in localStorage - const openSourceMode = localStorage.getItem("openSourceMode"); - - // If it exists and is "true", set selectedOption to None (Foss), otherwise set it to None - return openSourceMode === "true" ? "None (FOSS)" : "None"; - }); - + 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')); @@ -112,6 +105,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const [closeButtonHoverColor, setCloseButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--close-button-hover-color').trim()); const [applyButtonColor, setApplyButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-color').trim()); const [applyButtonHoverColor, setApplyButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-hover-color').trim()); + // Per default a purple color gradient const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#dc8add"); const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb"); @@ -123,6 +117,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const [selectedTheme, setSelectedTheme] = useState(''); // API Keys + const [mistral, setMistral] = useState(localStorage.getItem('mistral') || ""); const [openai, setOpenai] = useState(localStorage.getItem('openai') || ""); const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || ""); @@ -455,6 +450,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( return (

Privacy Settings

+ void; accountName: string }> = (