From f8f72ba447f7c19bb22b59e26927929854a8ff38 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Thu, 3 Oct 2024 14:03:28 +0200 Subject: [PATCH 01/11] Fixed | Change Main Category --- app/components/Models.tsx | 489 ++++++++++++++++---------------------- app/styles/models.css | 4 +- 2 files changed, 210 insertions(+), 283 deletions(-) diff --git a/app/components/Models.tsx b/app/components/Models.tsx index 24ba852..79f9124 100644 --- a/app/components/Models.tsx +++ b/app/components/Models.tsx @@ -1,328 +1,255 @@ -"use client"; -import React, { useState, useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; -// Define all models that should be available. +// Sample modelList definition; replace this with your actual modelList const modelList = { 'Offline Fast': { - 'model_type': 'local', - 'Math': 'qwen2-math:1.5b', - 'Code': 'starcoder2', - 'Language': 'llama3.2', - 'Character': 'dolphin-phi', - 'Finance': 'qwen2-math:1.5b', - 'Weather': 'llama3.2', - 'Time': 'llama3.2', - 'Image': 'llava-phi3' + model_type: 'local', + Math: 'qwen2-math:1.5b', + Code: 'starcoder2', + Language: 'llama3.2', + Character: 'dolphin-phi', + Finance: 'qwen2-math:1.5b', + Weather: 'llama3.2', + Time: 'llama3.2', + Image: 'llava-phi3' }, 'Offline Slow': { - 'model_type': 'local', - 'Math': 'wizard-math', - 'Code': 'starcoder2:7b', - 'Language': 'llama3.1', - 'Character': 'dolphin-llama3', - 'Finance': 'wizard-math', - 'Weather': 'llama3.1', - 'Time': 'llama3.1', - 'Image': 'llava' + model_type: 'local', + Math: 'wizard-math', + Code: 'starcoder2:7b', + Language: 'llama3.1', + Character: 'dolphin-llama3', + Finance: 'wizard-math', + Weather: 'llama3.1', + Time: 'llama3.1', + Image: 'llava' }, 'Offline Fast (FOSS)': { - 'model_type': 'local', - 'Math': 'qwen2-math:1.5b', - 'Code': 'qwen2.5-coder:1.5b', - 'Language': 'phi3.5', - 'Character': 'dolphin-mistral', - 'Finance': 'qwen2-math:1.5b', - 'Weather': 'phi3.5', - 'Time': 'phi3.5', - 'Image': 'llava' + model_type: 'local', + Math: 'qwen2-math:1.5b', + Code: 'qwen2.5-coder:1.5b', + Language: 'phi3.5', + Character: 'dolphin-mistral', + Finance: 'qwen2-math:1.5b', + Weather: 'phi3.5', + Time: 'phi3.5', + Image: 'llava' }, 'Offline Slow (FOSS)': { - 'model_type': 'local', - 'Math': 'mathstral', - 'Code': 'qwen2.5-coder', - 'Language': 'qwen2.5', - 'Character': 'dolphin-mistral', - 'Finance': 'mathstral', - 'Weather': 'qwen2.5', - 'Time': 'qwen2.5', - 'Image': 'llava' + model_type: 'local', + Math: 'mathstral', + Code: 'qwen2.5-coder', + Language: 'qwen2.5', + Character: 'dolphin-mistral', + Finance: 'mathstral', + Weather: 'qwen2.5', + Time: 'qwen2.5', + Image: 'llava' }, 'Online Cheap (OpenAI)': { - 'model_type': 'openai', - 'Math': 'gpt-4o-mini', - 'Code': 'gpt-4o-mini', - 'Language': 'gpt-4o-mini', - 'Character': 'gpt-4o-mini', - 'Finance': 'gpt-4o-mini', - 'Weather': 'gpt-4o-mini', - 'Time': 'gpt-4o-mini', - 'Image': 'gpt-4o-mini' + model_type: 'openai', + Math: 'gpt-4o-mini', + Code: 'gpt-4o-mini', + Language: 'gpt-4o-mini', + Character: 'gpt-4o-mini', + Finance: 'gpt-4o-mini', + Weather: 'gpt-4o-mini', + Time: 'gpt-4o-mini', + Image: 'gpt-4o-mini' }, 'Online Expensive (OpenAI)': { - 'model_type': 'openai', - 'Math': 'gpt-4o', - 'Code': 'gpt-4o', - 'Language': 'gpt-4o', - 'Character': 'gpt-4o', - 'Finance': 'gpt-4o', - 'Weather': 'gpt-4o', - 'Time': 'gpt-4o', - 'Image': 'gpt-4o' + model_type: 'openai', + Math: 'gpt-4o', + Code: 'gpt-4o', + Language: 'gpt-4o', + Character: 'gpt-4o', + Finance: 'gpt-4o', + Weather: 'gpt-4o', + Time: 'gpt-4o', + Image: 'gpt-4o' }, 'Online Cheap (Anthropic)': { - 'model_type': 'anthropic', - 'Math': 'claude-3-haiku', - 'Code': 'claude-3-haiku', - 'Language': 'claude-3-haiku', - 'Character': 'claude-3-haiku', - 'Finance': 'claude-3-haiku', - 'Weather': 'claude-3-haiku', - 'Time': 'claude-3-haiku', - 'Image': 'claude-3-haiku' + model_type: 'anthropic', + Math: 'claude-3-haiku', + Code: 'claude-3-haiku', + Language: 'claude-3-haiku', + Character: 'claude-3-haiku', + Finance: 'claude-3-haiku', + Weather: 'claude-3-haiku', + Time: 'claude-3-haiku', + Image: 'claude-3-haiku' }, 'Online Expensive (Anthropic)': { - 'model_type': 'anthropic', - 'Math': 'claude-3-5-sonnet', - 'Code': 'claude-3-5-sonnet', - 'Language': 'claude-3-5-sonnet', - 'Character': 'claude-3-5-sonnet', - 'Finance': 'claude-3-5-sonnet', - 'Weather': 'claude-3-5-sonnet', - 'Time': 'claude-3-5-sonnet', - 'Image': 'claude-3-5-sonnet' + model_type: 'anthropic', + Math: 'claude-3-5-sonnet', + Code: 'claude-3-5-sonnet', + Language: 'claude-3-5-sonnet', + Character: 'claude-3-5-sonnet', + Finance: 'claude-3-5-sonnet', + Weather: 'claude-3-5-sonnet', + Time: 'claude-3-5-sonnet', + Image: 'claude-3-5-sonnet' }, 'Online Cheap (Google)': { - 'model_type': 'google', - 'Math': 'gemini-1.5-flash-latest', - 'Code': 'gemini-1.5-flash-latest', - 'Language': 'gemini-1.5-flash-latest', - 'Character': 'gemini-1.5-flash-latest', - 'Finance': 'gemini-1.5-flash-latest', - 'Weather': 'gemini-1.5-flash-latest', - 'Time': 'gemini-1.5-flash-latest', - 'Image': 'gemini-1.5-flash-latest' + model_type: 'google', + Math: 'gemini-1.5-flash-latest', + Code: 'gemini-1.5-flash-latest', + Language: 'gemini-1.5-flash-latest', + Character: 'gemini-1.5-flash-latest', + Finance: 'gemini-1.5-flash-latest', + Weather: 'gemini-1.5-flash-latest', + Time: 'gemini-1.5-flash-latest', + Image: 'gemini-1.5-flash-latest' }, 'Online Expensive (Google)': { - 'model_type': 'google', - 'Math': 'gemini-1.5-pro-latest', - 'Code': 'gemini-1.5-pro-latest', - 'Language': 'gemini-1.5-pro-latest', - 'Character': 'gemini-1.5-pro-latest', - 'Finance': 'gemini-1.5-pro-latest', - 'Weather': 'gemini-1.5-pro-latest', - 'Time': 'gemini-1.5-pro-latest', - 'Image': 'gemini-1.5-pro-latest' + model_type: 'google', + Math: 'gemini-1.5-pro-latest', + Code: 'gemini-1.5-pro-latest', + Language: 'gemini-1.5-pro-latest', + Character: 'gemini-1.5-pro-latest', + Finance: 'gemini-1.5-pro-latest', + Weather: 'gemini-1.5-pro-latest', + Time: 'gemini-1.5-pro-latest', + Image: 'gemini-1.5-pro-latest' }, 'Online (La Plateforme)': { - 'model_type': 'mistral', - 'Math': 'open-mistral-nemo', - 'Code': 'codestral-latest', - 'Language': 'mistral-small-latest', - 'Character': 'mistral-large-latest', - 'Finance': 'open-mistral-nemo', - 'Weather': 'mistral-small-latest', - 'Time': 'mistral-small-latest', - 'Image': 'pixtral-12b-2409' + model_type: 'mistral', + Math: 'open-mistral-nemo', + Code: 'codestral-latest', + Language: 'mistral-small-latest', + Character: 'mistral-large-latest', + Finance: 'open-mistral-nemo', + Weather: 'mistral-small-latest', + Time: 'mistral-small-latest', + Image: 'pixtral-12b-2409' }, 'Online (FOSS) (La Plateforme)': { - 'model_type': 'mistral', - 'Math': 'open-mistral-nemo', - 'Code': 'open-codestral-mamba', - 'Language': 'open-mistral-nemo', - 'Character': 'open-mixtral-8x22b', - 'Finance': 'open-mixtral-8x22b', - 'Weather': 'open-mistral-nemo', - 'Time': 'open-mistral-nemo', - 'Image': 'pixtral-12b-2409' + model_type: 'mistral', + Math: 'open-mistral-nemo', + Code: 'open-codestral-mamba', + Language: 'open-mistral-nemo', + Character: 'open-mixtral-8x22b', + Finance: 'open-mixtral-8x22b', + Weather: 'open-mistral-nemo', + Time: 'open-mistral-nemo', + Image: 'pixtral-12b-2409' } } + // Define the keys of modelList + type ModelKeys = keyof typeof modelList; -// Define the available selectedAIFunction options -const modelDropdown = { - offlineNonFoss: ['Offline Fast', 'Offline Slow'], - offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'], - onlineNonFoss: [ - 'Online Cheap (OpenAI)', - 'Online Expensive (OpenAI)', - 'Online Cheap (Anthropic)', - 'Online Expensive (Anthropic)', - 'Online Cheap (Google)', - 'Online Expensive (Google)', - 'Online (La Plateforme)' - ], - onlineFoss: ['Online (FOSS) (La Plateforme)'], -}; + const ModelSection: React.FC = () => { + // Initialize state with value from localStorage or default to '' + const [selectedModelDropdown, setSelectedModelDropdown] = useState('Offline Fast'); + const [radioSelection, setRadioSelection] = useState(""); + const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(''); + const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState(""); -const selectedAIFunction = [ - 'Code', - 'Math', - 'Language', - 'Character', - 'Finance', - 'Weather', - 'Time', - 'Image', - 'Custom1', - 'Custom2' -] + useEffect(() => { + // Load initial values from localStorage + const temp = localStorage.getItem("activeSelectedAIFunction") || ""; + setActiveSelectedAIFunction(temp); -const ModelSection: React.FC = () => { - // Initialize state with value from localStorage or default to '' - const [selectedModelDropdown, setSelectedModelDropdown] = useState(''); - const [radioSelection, setRadioSelection] = useState("") - const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(''); - const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState(""); - - useEffect(() => { - var temp = localStorage.getItem("activeSelectedAIFunction") || "" - setActiveSelectedAIFunction(temp) - if (!localStorage.getItem('selectedModelDropdown')) { - localStorage.setItem("selectedModelDropdown", "Offline Fast" ) - } + // Check if localStorage keys exist, else set defaults + if (!localStorage.getItem('selectedModelDropdown')) { + localStorage.setItem("selectedModelDropdown", "Offline Fast"); + } - if (!localStorage.getItem("activeSelectedAIFunction")) { - setActiveSelectedAIFunction('Code') - localStorage.setItem('activeSelectedAIFunction' ,'Code') - } + // Set the dropdown and selected AI function from localStorage + const storedSelectedModel = localStorage.getItem('selectedModelDropdown') as ModelKeys; + const storedActiveFunction = localStorage.getItem("activeSelectedAIFunction") || 'Code'; - if (!localStorage.getItem("model")) { - localStorage.setItem("model" ,'starcoder2') - } + setSelectedModelDropdown(storedSelectedModel); + setCurrentSelectedAIFunction(storedActiveFunction); - if (!localStorage.getItem("radioSelection")) { - localStorage.setItem("radioSelection" ,'None') - } + if (!localStorage.getItem("model")) { + localStorage.setItem("model", 'starcoder2'); + } - const handleStorageChange = () => { - setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || ''); + if (!localStorage.getItem("radioSelection")) { + localStorage.setItem("radioSelection", 'None'); + } + + // Load radio selection from localStorage + setRadioSelection(localStorage.getItem('radioSelection') || ''); + }, []); + + const filteredModels = Object.keys(modelList).filter(model => modelList[model as ModelKeys]); + + 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); }; - // 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); + const isOfflineModel = (model: string) => { + return modelList[model as ModelKeys].model_type === 'local'; }; - }, []); // 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 modelClicked = (model: string) => { + const selectedAIFunction = currentSelectedAIFunction as keyof typeof modelList; - const handleModelChange = (event: React.ChangeEvent) => { - const newModel = event.target.value; - setSelectedModelDropdown(newModel); - localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly - }; + 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]]; - // Determine the filtered models based on current radioSelection - const filteredModels = (() => { - let models = []; - switch (radioSelection) { - case 'Offline': - models = [ - ...modelDropdown.onlineNonFoss, - ...modelDropdown.onlineFoss, - ]; // Show only offline models without FOSS - break; - case 'Offline (FOSS)': - models = [ - ...modelDropdown.onlineFoss, - ]; // Show only offline models with FOSS - break; - case 'Online': - models = [ - ...modelDropdown.offlineNonFoss, - ...modelDropdown.offlineFoss, - ]; // Show only online models without FOSS - break; - case 'Online (FOSS)': - models = [ - ...modelDropdown.offlineFoss, - ]; // Show only online models with FOSS - break; - case 'None': - models = [ - ...modelDropdown.offlineNonFoss, - ...modelDropdown.offlineFoss, - ...modelDropdown.onlineNonFoss, - ...modelDropdown.onlineFoss, - ]; // Show all models if nothing matches - break; - case 'None (FOSS)': - models = [ - ...modelDropdown.offlineFoss, - ...modelDropdown.onlineFoss, - ]; // Show all models if nothing matches - break; - default: - models = [ - ...modelDropdown.offlineNonFoss, - ...modelDropdown.offlineFoss, - ...modelDropdown.onlineNonFoss, - ...modelDropdown.onlineFoss, - ]; // Show all models if nothing matches - break; - } - return Array.from(new Set(models)); // Remove duplicates using Set - })(); + 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}`); + } + }; - const isOfflineModel = (model: string) => - modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model); + return ( +
+
+
+

Different AI Models

+
- const modelClicked = (model: string) => { - 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]]) - } + {/* Model Selection Dropdown */} +
+ + +
- return ( -
-
-
-

Different AI Models

-
- - {/* Model Selection Dropdown */} -
- - -
- - {/* Model Grid with Cards */} -
- {selectedAIFunction.map( - (displayedCategory) => ( - - ) - )} + {/* Model Grid with Cards */} +
+ {Object.keys(modelList[selectedModelDropdown]) + .filter((key) => key !== 'model_type') // Exclude model_type from display + .map((displayedCategory) => ( + + )) + } +
-
- ); -}; + ); + }; export default ModelSection; diff --git a/app/styles/models.css b/app/styles/models.css index 258f71a..7b833ae 100644 --- a/app/styles/models.css +++ b/app/styles/models.css @@ -61,8 +61,8 @@ } .model-box.selected { - box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7); /* Glowing border */ - border-color: yellow; + box-shadow: 0 0 25px 5px var(--apply-button-hover-color); /* Glowing border */ + border-color: var(--apply-button-hover-color); } .overlay { From d0ebe2d79a3e81b8e7a2b6510b073353abe0c330 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Thu, 3 Oct 2024 14:09:03 +0200 Subject: [PATCH 02/11] Added default gradient | Change Theme Settings --- app/components/settings/Settings.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index 583442e..e55657f 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -106,10 +106,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( 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()); - const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe"); - const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe"); - const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe"); - const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe"); + // Per default a purple color gradient + const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#dc8add"); + const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb"); + const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#9141ac"); + const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "##813d9c"); const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe"); // Theme selection From 7c77e43be812f54a61fc59071b38ce4cddac7ce3 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Thu, 3 Oct 2024 14:38:56 +0200 Subject: [PATCH 03/11] radio selection still broken will come back to that later --- app/components/settings/PrivacySettings.tsx | 26 +++++++++++++++------ app/components/settings/Settings.tsx | 13 ++++++++--- 2 files changed, 29 insertions(+), 10 deletions(-) diff --git a/app/components/settings/PrivacySettings.tsx b/app/components/settings/PrivacySettings.tsx index e9cab20..49dc680 100644 --- a/app/components/settings/PrivacySettings.tsx +++ b/app/components/settings/PrivacySettings.tsx @@ -1,5 +1,4 @@ -// PrivacySettings.tsx -import React from 'react'; +import React, { useEffect } from 'react'; interface PrivacySettingsProps { selectedOption: string; // The currently selected option @@ -8,24 +7,37 @@ 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' : 'None'); + } + }, [selectedOption, handleRadioChange, openSourceMode]); + + // Handle option click and allow all options, even in open-source mode + const handleOptionClick = (option: string) => { + handleRadioChange(option); // No restrictions on options + }; + return ( <> {/* AI Mode Radio Options */}
-

Disable Options:

+

{openSourceMode ? 'Disable Options (FOSS Mode):' : 'Disable Options:'}

{/* Offline */}
handleRadioChange('Offline')} // Allow selection only if not in open-source mode + onClick={() => handleOptionClick('Offline')} > Offline tools{openSourceMode ? ' (FOSS)' : ''}
- {/* Online */} + {/* Online (Available even in FOSS mode) */}
handleRadioChange('Online')} + onClick={() => handleOptionClick('Online')} > Online tools{openSourceMode ? ' (FOSS)' : ''}
@@ -33,7 +45,7 @@ const PrivacySettings: React.FC = ({ selectedOption, handl {/* None */}
handleRadioChange('None')} + onClick={() => handleOptionClick('None')} > None{openSourceMode ? ' (FOSS)' : ''}
diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index e55657f..7b752d7 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -56,7 +56,14 @@ 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('Offline'); // Default to 'Offline' + 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 [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory')); const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory')); const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode')); @@ -110,7 +117,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#dc8add"); const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb"); const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#9141ac"); - const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "##813d9c"); + const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#813d9c"); const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe"); // Theme selection @@ -331,7 +338,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( useEffect(() => { const savedOption = localStorage.getItem('radioSelection'); if (savedOption) { - setSelectedOption(savedOption); // Set saved selection + handleRadioChange(savedOption); // Set saved selection } }, []); From d12c850df0bac716053f1e752f3bde28f0701bcf Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Thu, 3 Oct 2024 14:54:59 +0200 Subject: [PATCH 04/11] Modified | Change Account Settings --- app/components/settings/Settings.tsx | 15 ++++++--------- app/components/settings/TextSettings.tsx | 4 +++- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index 7b752d7..cde6e92 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -580,26 +580,23 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( - void; // The method to update the state type: 'text' | 'email' | 'password'; // The type of input field + placeholder?: string; // Optional placeholder text } -const TextSetting: React.FC = ({ label, value, setValue, type }) => { +const TextSetting: React.FC = ({ label, value, setValue, type, placeholder }) => { const handleTextChange = (e: React.ChangeEvent) => { const newText = e.target.value; // Get the new value from the input setValue(newText); // Update the state in the parent component @@ -20,6 +21,7 @@ const TextSetting: React.FC = ({ label, value, setValue, type type={type} // Use the type prop for the input value={value} // Set the current value onChange={handleTextChange} // Handle input changes + placeholder={placeholder} // Set the placeholder text />
); From 03881dc20f940de6dc40f47fcff798d7a06fa469 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Thu, 3 Oct 2024 15:00:20 +0200 Subject: [PATCH 05/11] Fixed | Change API Keys --- app/components/settings/Settings.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index cde6e92..18fb661 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -124,10 +124,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const [selectedTheme, setSelectedTheme] = useState(''); // API Keys - const [mistral, setMistral] = 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()); + const [mistral, setMistral] = useState(localStorage.getItem('mistral') || ""); + const [openai, setOpenai] = useState(localStorage.getItem('openai') || ""); + const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || ""); + const [google, setGoogle] = useState(localStorage.getItem('google') || ""); const [myBoolean, setMyBoolean] =useState(() => getItemFromLocalStorage('myBoolean')); const settings = { @@ -624,24 +624,28 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( value={mistral} // State variable for the input setValue={setMistral} // State updater function type="text" // Input type + placeholder={localStorage.getItem('mistral') || "Enter the API key"} />
); From ca45d4801557d81a33f7a5dc4d31f7987813018e Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Thu, 3 Oct 2024 15:51:04 +0200 Subject: [PATCH 06/11] Radio button broken --- app/components/settings/PrivacySettings.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/components/settings/PrivacySettings.tsx b/app/components/settings/PrivacySettings.tsx index 49dc680..7dadb51 100644 --- a/app/components/settings/PrivacySettings.tsx +++ b/app/components/settings/PrivacySettings.tsx @@ -15,7 +15,7 @@ const PrivacySettings: React.FC = ({ selectedOption, handl } }, [selectedOption, handleRadioChange, openSourceMode]); - // Handle option click and allow all options, even in open-source mode + // Handle option click, allowing all options even in open-source mode const handleOptionClick = (option: string) => { handleRadioChange(option); // No restrictions on options }; @@ -30,6 +30,7 @@ const PrivacySettings: React.FC = ({ selectedOption, handl
handleOptionClick('Offline')} + style={{ pointerEvents: (openSourceMode && selectedOption !== 'Offline') ? 'none' : 'auto', opacity: (openSourceMode && selectedOption !== 'Offline') ? 0.5 : 1 }} > Offline tools{openSourceMode ? ' (FOSS)' : ''}
@@ -46,6 +47,7 @@ const PrivacySettings: React.FC = ({ selectedOption, handl
handleOptionClick('None')} + style={{ pointerEvents: (openSourceMode && selectedOption !== 'None') ? 'none' : 'auto', opacity: (openSourceMode && selectedOption !== 'None') ? 0.5 : 1 }} > None{openSourceMode ? ' (FOSS)' : ''}
From 6435d5f4e4e4fc8a4406929504a2f3b5ea88ebe5 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Thu, 3 Oct 2024 16:11:53 +0200 Subject: [PATCH 07/11] Setting radioSelection --- app/components/settings/PrivacySettings.tsx | 64 +++++++++------------ app/components/settings/Settings.tsx | 1 - 2 files changed, 26 insertions(+), 39 deletions(-) diff --git a/app/components/settings/PrivacySettings.tsx b/app/components/settings/PrivacySettings.tsx index 7dadb51..02d551f 100644 --- a/app/components/settings/PrivacySettings.tsx +++ b/app/components/settings/PrivacySettings.tsx @@ -11,50 +11,38 @@ const PrivacySettings: React.FC = ({ selectedOption, handl // Set default option based on openSourceMode if no option is selected useEffect(() => { if (!selectedOption) { - handleRadioChange(openSourceMode ? 'Offline' : 'None'); + handleRadioChange(openSourceMode ? 'Offline (FOSS)' : 'None'); } }, [selectedOption, handleRadioChange, openSourceMode]); - // Handle option click, allowing all options even in open-source mode - const handleOptionClick = (option: string) => { - handleRadioChange(option); // No restrictions on options - }; + // 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 ( - <> - {/* AI Mode Radio Options */} -
-

{openSourceMode ? 'Disable Options (FOSS Mode):' : 'Disable Options:'}

-
- {/* Offline */} -
handleOptionClick('Offline')} - style={{ pointerEvents: (openSourceMode && selectedOption !== 'Offline') ? 'none' : 'auto', opacity: (openSourceMode && selectedOption !== 'Offline') ? 0.5 : 1 }} - > - Offline tools{openSourceMode ? ' (FOSS)' : ''} -
- - {/* Online (Available even in FOSS mode) */} -
handleOptionClick('Online')} - > - Online tools{openSourceMode ? ' (FOSS)' : ''} -
- - {/* None */} -
handleOptionClick('None')} - style={{ pointerEvents: (openSourceMode && selectedOption !== 'None') ? 'none' : 'auto', opacity: (openSourceMode && selectedOption !== 'None') ? 0.5 : 1 }} - > - None{openSourceMode ? ' (FOSS)' : ''} -
+
+

Select Privacy Mode:

+ {options.map((option) => ( +
+
-
-
- + ))} +
); }; diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index 18fb661..ac94db3 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -458,7 +458,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( return (

Privacy Settings

- Date: Thu, 3 Oct 2024 16:57:24 +0200 Subject: [PATCH 08/11] very cool fixes and a bit of a revert --- app/components/Models.tsx | 256 ++++++++++---------- app/components/settings/Settings.tsx | 291 ++++++++++++----------- app/components/settings/TextSettings.tsx | 4 +- app/styles/models.css | 4 +- 4 files changed, 280 insertions(+), 275 deletions(-) diff --git a/app/components/Models.tsx b/app/components/Models.tsx index 7c22ab7..2c56cae 100644 --- a/app/components/Models.tsx +++ b/app/components/Models.tsx @@ -4,139 +4,140 @@ import React, { useState, useEffect } from 'react'; // Define all models that should be available. const modelList = { 'Offline Fast': { - 'model_type': 'local', - 'Math': 'qwen2-math:1.5b', - 'Code': 'starcoder2', - 'Language': 'llama3.2', - 'Character': 'dolphin-phi', - 'Finance': 'qwen2-math:1.5b', - 'Weather': 'llama3.2', - 'Time': 'llama3.2', - 'Image': 'llava-phi3' + model_type: 'local', + Math: 'qwen2-math:1.5b', + Code: 'starcoder2', + Language: 'llama3.2', + Character: 'dolphin-phi', + Finance: 'qwen2-math:1.5b', + Weather: 'llama3.2', + Time: 'llama3.2', + Image: 'llava-phi3' }, 'Offline Slow': { - 'model_type': 'local', - 'Math': 'wizard-math', - 'Code': 'starcoder2:7b', - 'Language': 'llama3.1', - 'Character': 'dolphin-llama3', - 'Finance': 'wizard-math', - 'Weather': 'llama3.1', - 'Time': 'llama3.1', - 'Image': 'llava' + model_type: 'local', + Math: 'wizard-math', + Code: 'starcoder2:7b', + Language: 'llama3.1', + Character: 'dolphin-llama3', + Finance: 'wizard-math', + Weather: 'llama3.1', + Time: 'llama3.1', + Image: 'llava' }, 'Offline Fast (FOSS)': { - 'model_type': 'local', - 'Math': 'qwen2-math:1.5b', - 'Code': 'qwen2.5-coder:1.5b', - 'Language': 'phi3.5', - 'Character': 'dolphin-mistral', - 'Finance': 'qwen2-math:1.5b', - 'Weather': 'phi3.5', - 'Time': 'phi3.5', - 'Image': 'llava' + model_type: 'local', + Math: 'qwen2-math:1.5b', + Code: 'qwen2.5-coder:1.5b', + Language: 'phi3.5', + Character: 'dolphin-mistral', + Finance: 'qwen2-math:1.5b', + Weather: 'phi3.5', + Time: 'phi3.5', + Image: 'llava' }, 'Offline Slow (FOSS)': { - 'model_type': 'local', - 'Math': 'mathstral', - 'Code': 'qwen2.5-coder', - 'Language': 'qwen2.5', - 'Character': 'dolphin-mistral', - 'Finance': 'mathstral', - 'Weather': 'qwen2.5', - 'Time': 'qwen2.5', - 'Image': 'llava' + model_type: 'local', + Math: 'mathstral', + Code: 'qwen2.5-coder', + Language: 'qwen2.5', + Character: 'dolphin-mistral', + Finance: 'mathstral', + Weather: 'qwen2.5', + Time: 'qwen2.5', + Image: 'llava' }, 'Online Cheap (OpenAI)': { - 'model_type': 'openai', - 'Math': 'gpt-4o-mini', - 'Code': 'gpt-4o-mini', - 'Language': 'gpt-4o-mini', - 'Character': 'gpt-4o-mini', - 'Finance': 'gpt-4o-mini', - 'Weather': 'gpt-4o-mini', - 'Time': 'gpt-4o-mini', - 'Image': 'gpt-4o-mini' + model_type: 'openai', + Math: 'gpt-4o-mini', + Code: 'gpt-4o-mini', + Language: 'gpt-4o-mini', + Character: 'gpt-4o-mini', + Finance: 'gpt-4o-mini', + Weather: 'gpt-4o-mini', + Time: 'gpt-4o-mini', + Image: 'gpt-4o-mini' }, 'Online Expensive (OpenAI)': { - 'model_type': 'openai', - 'Math': 'gpt-4o', - 'Code': 'gpt-4o', - 'Language': 'gpt-4o', - 'Character': 'gpt-4o', - 'Finance': 'gpt-4o', - 'Weather': 'gpt-4o', - 'Time': 'gpt-4o', - 'Image': 'gpt-4o' + model_type: 'openai', + Math: 'gpt-4o', + Code: 'gpt-4o', + Language: 'gpt-4o', + Character: 'gpt-4o', + Finance: 'gpt-4o', + Weather: 'gpt-4o', + Time: 'gpt-4o', + Image: 'gpt-4o' }, 'Online Cheap (Anthropic)': { - 'model_type': 'anthropic', - 'Math': 'claude-3-haiku', - 'Code': 'claude-3-haiku', - 'Language': 'claude-3-haiku', - 'Character': 'claude-3-haiku', - 'Finance': 'claude-3-haiku', - 'Weather': 'claude-3-haiku', - 'Time': 'claude-3-haiku', - 'Image': 'claude-3-haiku' + model_type: 'anthropic', + Math: 'claude-3-haiku', + Code: 'claude-3-haiku', + Language: 'claude-3-haiku', + Character: 'claude-3-haiku', + Finance: 'claude-3-haiku', + Weather: 'claude-3-haiku', + Time: 'claude-3-haiku', + Image: 'claude-3-haiku' }, 'Online Expensive (Anthropic)': { - 'model_type': 'anthropic', - 'Math': 'claude-3-5-sonnet', - 'Code': 'claude-3-5-sonnet', - 'Language': 'claude-3-5-sonnet', - 'Character': 'claude-3-5-sonnet', - 'Finance': 'claude-3-5-sonnet', - 'Weather': 'claude-3-5-sonnet', - 'Time': 'claude-3-5-sonnet', - 'Image': 'claude-3-5-sonnet' + model_type: 'anthropic', + Math: 'claude-3-5-sonnet', + Code: 'claude-3-5-sonnet', + Language: 'claude-3-5-sonnet', + Character: 'claude-3-5-sonnet', + Finance: 'claude-3-5-sonnet', + Weather: 'claude-3-5-sonnet', + Time: 'claude-3-5-sonnet', + Image: 'claude-3-5-sonnet' }, 'Online Cheap (Google)': { - 'model_type': 'google', - 'Math': 'gemini-1.5-flash-latest', - 'Code': 'gemini-1.5-flash-latest', - 'Language': 'gemini-1.5-flash-latest', - 'Character': 'gemini-1.5-flash-latest', - 'Finance': 'gemini-1.5-flash-latest', - 'Weather': 'gemini-1.5-flash-latest', - 'Time': 'gemini-1.5-flash-latest', - 'Image': 'gemini-1.5-flash-latest' + model_type: 'google', + Math: 'gemini-1.5-flash-latest', + Code: 'gemini-1.5-flash-latest', + Language: 'gemini-1.5-flash-latest', + Character: 'gemini-1.5-flash-latest', + Finance: 'gemini-1.5-flash-latest', + Weather: 'gemini-1.5-flash-latest', + Time: 'gemini-1.5-flash-latest', + Image: 'gemini-1.5-flash-latest' }, 'Online Expensive (Google)': { - 'model_type': 'google', - 'Math': 'gemini-1.5-pro-latest', - 'Code': 'gemini-1.5-pro-latest', - 'Language': 'gemini-1.5-pro-latest', - 'Character': 'gemini-1.5-pro-latest', - 'Finance': 'gemini-1.5-pro-latest', - 'Weather': 'gemini-1.5-pro-latest', - 'Time': 'gemini-1.5-pro-latest', - 'Image': 'gemini-1.5-pro-latest' + model_type: 'google', + Math: 'gemini-1.5-pro-latest', + Code: 'gemini-1.5-pro-latest', + Language: 'gemini-1.5-pro-latest', + Character: 'gemini-1.5-pro-latest', + Finance: 'gemini-1.5-pro-latest', + Weather: 'gemini-1.5-pro-latest', + Time: 'gemini-1.5-pro-latest', + Image: 'gemini-1.5-pro-latest' }, 'Online (La Plateforme)': { - 'model_type': 'mistral', - 'Math': 'open-mistral-nemo', - 'Code': 'codestral-latest', - 'Language': 'mistral-small-latest', - 'Character': 'mistral-large-latest', - 'Finance': 'open-mistral-nemo', - 'Weather': 'mistral-small-latest', - 'Time': 'mistral-small-latest', - 'Image': 'pixtral-12b-2409' + model_type: 'mistral', + Math: 'open-mistral-nemo', + Code: 'codestral-latest', + Language: 'mistral-small-latest', + Character: 'mistral-large-latest', + Finance: 'open-mistral-nemo', + Weather: 'mistral-small-latest', + Time: 'mistral-small-latest', + Image: 'pixtral-12b-2409' }, 'Online (FOSS) (La Plateforme)': { - 'model_type': 'mistral', - 'Math': 'open-mistral-nemo', - 'Code': 'open-codestral-mamba', - 'Language': 'open-mistral-nemo', - 'Character': 'open-mixtral-8x22b', - 'Finance': 'open-mixtral-8x22b', - 'Weather': 'open-mistral-nemo', - 'Time': 'open-mistral-nemo', - 'Image': 'pixtral-12b-2409' + model_type: 'mistral', + Math: 'open-mistral-nemo', + Code: 'open-codestral-mamba', + Language: 'open-mistral-nemo', + Character: 'open-mixtral-8x22b', + Finance: 'open-mixtral-8x22b', + Weather: 'open-mistral-nemo', + Time: 'open-mistral-nemo', + Image: 'pixtral-12b-2409' } } + // Define the available selectedAIFunction options const modelDropdown = { offlineNonFoss: ['Offline Fast', 'Offline Slow'], @@ -172,6 +173,7 @@ const ModelSection: React.FC = () => { const [radioSelection, setRadioSelection] = useState("") const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(''); const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState(""); + const [isOpenSourceMode, setIsOpenSourceMode] = useState(localStorage.getItem('openSourceMode') || "false") useEffect(() => { var temp = localStorage.getItem("activeSelectedAIFunction") || "" @@ -233,23 +235,23 @@ const ModelSection: React.FC = () => { models = [ ...modelDropdown.onlineNonFoss, ...modelDropdown.onlineFoss, - ]; // Show only offline models without FOSS - break; - case 'Offline (FOSS)': - models = [ - ...modelDropdown.onlineFoss, - ]; // Show only offline models with FOSS + ]; + if (isOpenSourceMode == "true") { + models = [ + ...modelDropdown.onlineFoss, + ]; + } // Show only offline models without FOSS break; case 'Online': models = [ ...modelDropdown.offlineNonFoss, ...modelDropdown.offlineFoss, - ]; // Show only online models without FOSS - break; - case 'Online (FOSS)': - models = [ - ...modelDropdown.offlineFoss, - ]; // Show only online models with FOSS + ]; + if (isOpenSourceMode == "true") { + models = [ + ...modelDropdown.offlineFoss, + ]; + } // Show only online models without FOSS break; case 'None': models = [ @@ -257,13 +259,13 @@ const ModelSection: React.FC = () => { ...modelDropdown.offlineFoss, ...modelDropdown.onlineNonFoss, ...modelDropdown.onlineFoss, - ]; // Show all models if nothing matches - break; - case 'None (FOSS)': - models = [ - ...modelDropdown.offlineFoss, - ...modelDropdown.onlineFoss, - ]; // Show all models if nothing matches + ]; + if (isOpenSourceMode == "true") { + models = [ + ...modelDropdown.offlineFoss, + ...modelDropdown.onlineFoss, + ]; + } // Show all models if nothing matches break; default: models = [ diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index 583442e..530b3da 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -105,22 +105,24 @@ 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()); - - const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe"); - const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe"); - const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe"); - const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe"); - const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe"); + + // Per default a purple color gradient + const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#dc8add"); + const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb"); + const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#9141ac"); + const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#813d9c"); + const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe"); // Theme selection const [selectedTheme, setSelectedTheme] = useState(''); // API Keys - const [mistral, setMistral] = 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()); - const [myBoolean, setMyBoolean] =useState(() => getItemFromLocalStorage('myBoolean')); + + const [mistral, setMistral] = useState(localStorage.getItem('mistral') || ""); + const [openai, setOpenai] = useState(localStorage.getItem('openai') || ""); + const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || ""); + const [google, setGoogle] = useState(localStorage.getItem('google') || ""); + const [myBoolean, setMyBoolean] = useState(() => getItemFromLocalStorage('myBoolean')); const settings = { userPreferences: { @@ -129,7 +131,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( preferredCurrency, preferredMeasurement, dateFormat, - timeFormat, + timeFormat, timeZone, selectedOption, disableChatHistory, @@ -216,7 +218,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( { name: "Apply Button Color", value: applyButtonColor, setValue: setApplyButtonColor, cssVariable: "--apply-button-color" }, { name: "Apply Button Hover Color", value: applyButtonHoverColor, setValue: setApplyButtonHoverColor, cssVariable: "--apply-button-hover-color" }, { name: "Burger Menu Background Color", value: burgerMenuBackgroundColor, setValue: setBurgerMenuBackgroundColor, cssVariable: "--burger-menu-background-color" }, -]; + ]; const timeZoneOptions = [ @@ -330,15 +332,13 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( useEffect(() => { const savedOption = localStorage.getItem('radioSelection'); if (savedOption) { + savedOption.replace(" (FOSS)", ""); setSelectedOption(savedOption); // Set saved selection } }, []); const handleRadioChange = (newValue: string) => { setSelectedOption(newValue); // Update the state with the selected option - if (openSourceMode) { - newValue += " (FOSS)" - } localStorage.setItem('radioSelection', newValue); // Save the selection for persistence }; @@ -472,85 +472,85 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( ); - case 'theme': - return ( -
-

Theme Settings

- - +

Theme Settings

+ + + + {selectedTheme === 'BASIC-CUSTOM' && ( + <> +

Basic Colors

+ {/* Basic Color Inputs using ColorSetting Component */} + - - {selectedTheme === 'BASIC-CUSTOM' && ( - <> -

Basic Colors

- {/* Basic Color Inputs using ColorSetting Component */} - - - - - - - )} - - {selectedTheme === 'CUSTOM' && ( - <> -

Additional Settings

- {/* Additional Font Size Setting */} - - - {colorSettings.map((setting) => ( - - ))} - - { - setFontFamily(newFont); - document.documentElement.style.setProperty('--font-family', newFont); - }} - options={fontOptions} - /> - - )} -
- ); + + + + + + )} + + {selectedTheme === 'CUSTOM' && ( + <> +

Additional Settings

+ {/* Additional Font Size Setting */} + + + {colorSettings.map((setting) => ( + + ))} + + { + setFontFamily(newFont); + document.documentElement.style.setProperty('--font-family', newFont); + }} + options={fontOptions} + /> + + )} +
+ ); case 'foss': return ( @@ -574,24 +574,21 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( value={newName} type='text' setValue={setNewName} + placeholder={localStorage.getItem("accountName") || "Current Name"} // Show current name or a default /> - void; accountName: string }> = ( value={mistral} // State variable for the input setValue={setMistral} // State updater function type="text" // Input type + placeholder={localStorage.getItem('mistral') || "Enter the API key"} />
); @@ -644,24 +645,24 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( case 'im/export': return (
-

Import & Export

-
-

Export the settings

- +

Import & Export

+
+

Export the settings

+ +
+
+

Import the settings

+ +
-
-

Import the settings

- -
-
- ); + ); default: return null; } @@ -695,36 +696,36 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( }; return ( -
-
-
-
-
    -
  • setActiveSection('general')}>General
    • -
  • setActiveSection('privacy')}>Privacy
    • -
  • setActiveSection('theme')}>Theme
    • -
  • setActiveSection('foss')}>FOSS
    • -
  • setActiveSection('account')}>Account
    • -
  • setActiveSection('api')}>API Keys
    • -
  • setActiveSection('im/export')}>Import/Export
    • -
-
-
-

Settings for {accountName}

- {renderSettingsContent()} - - -
+
+
+
+
+
    +
  • setActiveSection('general')}>General
    • +
  • setActiveSection('privacy')}>Privacy
    • +
  • setActiveSection('theme')}>Theme
    • +
  • setActiveSection('foss')}>FOSS
    • +
  • setActiveSection('account')}>Account
    • +
  • setActiveSection('api')}>API Keys
    • +
  • setActiveSection('im/export')}>Import/Export
    • +
+
+
+

Settings for {accountName}

+ {renderSettingsContent()} + +
+
); }; diff --git a/app/components/settings/TextSettings.tsx b/app/components/settings/TextSettings.tsx index ef8aafc..eca3071 100644 --- a/app/components/settings/TextSettings.tsx +++ b/app/components/settings/TextSettings.tsx @@ -5,9 +5,10 @@ interface TextSettingProps { value: string; // The current text value setValue: (newText: string) => void; // The method to update the state type: 'text' | 'email' | 'password'; // The type of input field + placeholder?: string; // Optional placeholder text } -const TextSetting: React.FC = ({ label, value, setValue, type }) => { +const TextSetting: React.FC = ({ label, value, setValue, type, placeholder }) => { const handleTextChange = (e: React.ChangeEvent) => { const newText = e.target.value; // Get the new value from the input setValue(newText); // Update the state in the parent component @@ -20,6 +21,7 @@ const TextSetting: React.FC = ({ label, value, setValue, type type={type} // Use the type prop for the input value={value} // Set the current value onChange={handleTextChange} // Handle input changes + placeholder={placeholder} // Set the placeholder text />
); diff --git a/app/styles/models.css b/app/styles/models.css index 258f71a..7b833ae 100644 --- a/app/styles/models.css +++ b/app/styles/models.css @@ -61,8 +61,8 @@ } .model-box.selected { - box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7); /* Glowing border */ - border-color: yellow; + box-shadow: 0 0 25px 5px var(--apply-button-hover-color); /* Glowing border */ + border-color: var(--apply-button-hover-color); } .overlay { From 799794e1231289bd23b3b4a37eaf6eac0f0ddd11 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Thu, 3 Oct 2024 17:30:16 +0200 Subject: [PATCH 09/11] Patrick you deleted a type while trying to fix it --- app/components/settings/Settings.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index da0c407..be45162 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -577,6 +577,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( label="New Name" value={newName} setValue={setNewName} + type="text" placeholder={localStorage.getItem("accountName") || "Current Name"} // Show current name or a default /> Date: Thu, 3 Oct 2024 17:36:09 +0200 Subject: [PATCH 10/11] Fixed the problems delete the branch revert ASAP --- app/components/Models.tsx | 103 ++++++++++---------- app/components/settings/PrivacySettings.tsx | 68 +++++++------ app/components/settings/Settings.tsx | 14 +-- 3 files changed, 89 insertions(+), 96 deletions(-) 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 }> = ( Date: Fri, 4 Oct 2024 08:20:21 +0200 Subject: [PATCH 11/11] added API keys --- app/components/settings/ButtonSettings.tsx | 4 ++-- app/components/settings/Settings.tsx | 20 ++++++++++++++++++++ 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/app/components/settings/ButtonSettings.tsx b/app/components/settings/ButtonSettings.tsx index 3352fbf..3724a15 100644 --- a/app/components/settings/ButtonSettings.tsx +++ b/app/components/settings/ButtonSettings.tsx @@ -9,9 +9,9 @@ interface ButtonSettingProps { const ButtonSetting: React.FC = ({ label, onClick, className }) => { return (
- diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index 530b3da..0d77b0b 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -618,6 +618,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( type="text" // Input type placeholder={localStorage.getItem('mistral') || "Enter the API key"} /> + void; accountName: string }> = ( type="text" // Input type placeholder={localStorage.getItem('openai') || "Enter the API key"} /> + void; accountName: string }> = ( type="text" // Input type placeholder={localStorage.getItem('anthropic') || "Enter the API key"} /> + void; accountName: string }> = ( type="text" // Input type placeholder={localStorage.getItem('google') || "Enter the API key"} /> +
);