From 5dd5b939df75bcf8a5eea9ab4321ad6df3656c15 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Fri, 27 Sep 2024 14:56:46 +0200 Subject: [PATCH] MY brain is fried and fired || Patrick helped me on the drpodown issues --> none left for the moment --- app/backend/GetLocalStorage.ts | 15 ++++++ app/components/Models.tsx | 95 +++++++++++++++++++++------------- app/components/Settings.tsx | 71 ++++++++++++++----------- app/styles/Settings.css | 14 +++++ 4 files changed, 130 insertions(+), 65 deletions(-) create mode 100644 app/backend/GetLocalStorage.ts diff --git a/app/backend/GetLocalStorage.ts b/app/backend/GetLocalStorage.ts new file mode 100644 index 0000000..529d444 --- /dev/null +++ b/app/backend/GetLocalStorage.ts @@ -0,0 +1,15 @@ +// getLocalStorageData.ts + +export const getAllLocalStorageItems = (): Record => { + const allData: Record = {}; + + for (let i = 0; i < localStorage.length; i++) { + const key = localStorage.key(i); + if (key) { + const value = localStorage.getItem(key); + allData[key] = value; + } + } + return allData; + }; + \ No newline at end of file diff --git a/app/components/Models.tsx b/app/components/Models.tsx index cf84932..17f7f46 100644 --- a/app/components/Models.tsx +++ b/app/components/Models.tsx @@ -2,16 +2,9 @@ import React, { useState, useEffect } from 'react'; // Define the available model options const modelDropdown = { - offlineModels: [ - 'Offline Fast', - 'Offline Fast (FOSS)', - 'Offline Slow', - 'Offline Slow (FOSS)', - ], - - onlineModels: [ - 'Online (La Plateforme)', - 'Online (FOSS) (La Plateforme)', + offlineWithoutFoss: ['Offline Fast', 'Offline Slow'], + offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'], + onlineWithoutFoss: [ 'Online Cheap (OpenAI)', 'Online Expensive (OpenAI)', 'Online Cheap (Anthropic)', @@ -19,21 +12,17 @@ const modelDropdown = { 'Online Cheap (Google)', 'Online Expensive (Google)', ], - - fossModels: [ - 'Offline Fast (FOSS)', - 'Offline Slow (FOSS)', - 'Online (FOSS) (La Plateforme)', - ], + onlineFoss: ['Online (FOSS) (La Plateforme)'], }; const Models: React.FC = () => { // Initialize state with value from localStorage or default to '' - const [radioSelection, setRadioSelection] = useState(''); + const [selectedModel, setSelectedModel] = useState(''); + const radioSelection = localStorage.getItem('radioSelection') useEffect(() => { const handleStorageChange = () => { - setRadioSelection(localStorage.getItem('radioSelection') || ''); + setSelectedModel(localStorage.getItem('selectedModel') || ''); }; handleStorageChange(); @@ -48,7 +37,7 @@ const Models: React.FC = () => { const handleModelChange = (event: React.ChangeEvent) => { const newModel = event.target.value; - setRadioSelection(newModel); + setSelectedModel(newModel); localStorage.setItem('radioSelection', newModel); // Update localStorage directly }; @@ -57,22 +46,55 @@ const Models: React.FC = () => { let models = []; switch (radioSelection) { case 'Offline': - models = modelDropdown.offlineModels; // Show only offline models + models = [ + ...modelDropdown.onlineWithoutFoss, + ...modelDropdown.onlineFoss, + ]; // Show only offline models without FOSS break; - case 'AI Online': - models = modelDropdown.onlineModels; // Show only online models + case 'Offline (FOSS)': + models = [ + ...modelDropdown.onlineFoss, + ]; // Show only offline models with FOSS break; - case 'FOSS': - models = modelDropdown.fossModels; // Show only FOSS models + case 'Online': + models = [ + ...modelDropdown.offlineWithoutFoss, + ...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.offlineWithoutFoss, + ...modelDropdown.offlineFoss, + ...modelDropdown.onlineWithoutFoss, + ...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.offlineModels, ...modelDropdown.onlineModels, ...modelDropdown.fossModels]; // Show all models if nothing matches + models = [ + ...modelDropdown.offlineWithoutFoss, + ...modelDropdown.offlineFoss, + ...modelDropdown.onlineWithoutFoss, + ...modelDropdown.onlineFoss, + ]; // Show all models if nothing matches break; } return Array.from(new Set(models)); // Remove duplicates using Set })(); - const isOfflineModel = (model: string) => modelDropdown.offlineModels.includes(model); + const isOfflineModel = (model: string) => + modelDropdown.offlineWithoutFoss.includes(model) || modelDropdown.offlineFoss.includes(model); return (
@@ -84,7 +106,7 @@ const Models: React.FC = () => { {/* Model Selection Dropdown */}
- {filteredModels.map((model) => (
+ {/* Model Grid with Cards */}
- {['Code', 'Math', 'Language', 'Character', 'Finance', 'Weather', 'Time', 'Image', 'Custom1', 'Custom2'].map((category) => ( - - ))} + {['Code', 'Math', 'Language', 'Character', 'Finance', 'Weather', 'Time', 'Image', 'Custom1', 'Custom2'].map( + (category) => ( + + ) + )}
diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx index 9291f01..34560de 100644 --- a/app/components/Settings.tsx +++ b/app/components/Settings.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './theme'; import { exportSettings, importSettings } from './settingUtils'; // Import utility functions +import { getAllLocalStorageItems } from '../backend/GetLocalStorage'; const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => { @@ -196,6 +197,9 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( 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 }; @@ -415,34 +419,36 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( {/* AI Mode Radio Options */}

Disable Options:

-
-
!openSourceMode && handleRadioChange('Offline')} // Handle selection only if not in open source mode - > - Offline tools -
-
!openSourceMode && handleRadioChange('AI Online')} - > - Online tools -
-
!openSourceMode && handleRadioChange('None')} - > - None -
-
-
- {openSourceMode && ( -

These options are deactivated because you are in FOSS mode.

- )} -

- After changing the preferred settings, please reload the website so it can update itself properly. -

-
+
+ {/* 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)' : ''} +
+
+
+

+ After changing the preferred settings, please reload the website so it can update itself properly. +

+ {/* Disable Chat History Checkbox */}
@@ -814,10 +820,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( // Update radio selection based on the new openSourceMode value if (newValue) { setSelectedOption('FOSS'); // Set to FOSS if enabling open source mode - localStorage.setItem('radioSelection', 'FOSS'); // Update localStorage } else { setSelectedOption('None'); // Or any other default value when disabling - localStorage.setItem('radioSelection', 'None'); // Update localStorage } }} /> @@ -995,6 +999,13 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (

Settings for {accountName}

{renderSettingsContent()} +
diff --git a/app/styles/Settings.css b/app/styles/Settings.css index 89c9ea7..ece5047 100644 --- a/app/styles/Settings.css +++ b/app/styles/Settings.css @@ -109,6 +109,20 @@ transition: background 0.3s; } +/* Close button positioning */ +.apply { + background: var(--close-button-color); /* Use variable for close button color */ + color: white; /* Use white for text color */ + border: none; + border-radius: 5px; + padding: 5px 10px; + cursor: pointer; + position: absolute; /* Position the button absolutely */ + top: 50px; /* Distance from the top */ + right: 10px; /* Distance from the right */ + transition: background 0.3s; +} + .close-popup:hover { background: darkred; /* Optional hover effect */ }