Merge pull request 'main' (#31) from React-Group/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/YasinOnm08/interstellar_ai/pulls/31

app/backend/GetLocalStorage.ts

@@ -0,0 +1,15 @@
+// getLocalStorageData.ts
+
+export const getAllLocalStorageItems = (): Record<string, string | null> => {
+    const allData: Record<string, string | null> = {};
+    
+    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;
+  };
+  

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<HTMLSelectElement>) => {
     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 (
     <div className="model-background">
@@ -84,7 +106,7 @@ const Models: React.FC = () => {
         {/* Model Selection Dropdown */}
         <div className="model-dropdown">
           <label htmlFor="model-select">Select AI Model:</label>
-          <select id="model-select" value={radioSelection} onChange={handleModelChange}>
+          <select id="model-select" value={selectedModel} onChange={handleModelChange}>
             {filteredModels.map((model) => (
               <option key={model} value={model}>
                 {model}
@@ -93,16 +115,19 @@ const Models: React.FC = () => {
           </select>
         </div>
 
+
         {/* Model Grid with Cards */}
         <div className="grid">
-          {['Code', 'Math', 'Language', 'Character', 'Finance', 'Weather', 'Time', 'Image', 'Custom1', 'Custom2'].map((category) => (
-            <button key={category} className={`${category.toLowerCase()}-model model-box`}>
-              <div className="overlay">
-                <h3>{category}</h3>
-                {isOfflineModel(radioSelection) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-              </div>
-            </button>
-          ))}
+          {['Code', 'Math', 'Language', 'Character', 'Finance', 'Weather', 'Time', 'Image', 'Custom1', 'Custom2'].map(
+            (category) => (
+              <button key={category} className={`${category.toLowerCase()}-model model-box`}>
+                <div className="overlay">
+                  <h3>{category}</h3>
+                  {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+                </div>
+              </button>
+            )
+          )}
         </div>
       </div>
     </div>

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 */}
             <div className="settings-option">
               <p>Disable Options:</p>
-              <div className="slider">
-                <div
-                  className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''} ${openSourceMode ? 'disabled' : ''}`}
-                  onClick={() => !openSourceMode && handleRadioChange('Offline')} // Handle selection only if not in open source mode
-                >
-                  Offline tools
+                <div className="slider">
+                  {/* Offline */}
+                  <div
+                    className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`}
+                    onClick={() => handleRadioChange('Offline')} // Allow selection only if not in open-source mode
+                  >
+                    Offline tools{openSourceMode ? ' (FOSS)' : ''}
+                  </div>
+
+                  {/* Online */}
+                  <div
+                    className={`slider-option ${selectedOption === 'Online' ? 'active' : ''}`}
+                    onClick={() => handleRadioChange('Online')}
+                  >
+                    Online tools{openSourceMode ? ' (FOSS)' : ''}
+                  </div>
+
+                  {/* None */}
+                  <div
+                    className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`}
+                    onClick={() => handleRadioChange('None')}
+                  >
+                    None{openSourceMode ? ' (FOSS)' : ''}
+                  </div>
                 </div>        
-                <div
-                  className={`slider-option ${selectedOption === 'AI Online' ? 'active' : ''} ${openSourceMode ? 'disabled' : ''}`}
-                  onClick={() => !openSourceMode && handleRadioChange('AI Online')}
-                >
-                  Online tools
+                    <br />
+                    <p>
+                      After changing the preferred settings, please reload the website so it can update itself properly.
+                    </p>
                 </div>    
-                <div
-                  className={`slider-option ${selectedOption === 'None' ? 'active' : ''} ${openSourceMode ? 'disabled' : ''}`}
-                  onClick={() => !openSourceMode && handleRadioChange('None')}
-                >
-                  None
-                </div>
-              </div>
-              <br />
-              {openSourceMode && (
-                <p style={{ color: 'grey' }}>These options are deactivated because you are in FOSS mode.</p>
-              )}
-              <p>
-                After changing the preferred settings, please reload the website so it can update itself properly.
-              </p>
-            </div>
 
             {/* Disable Chat History Checkbox */}
             <div className="settings-option">
@@ -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 }> = (
             <h2>Settings for {accountName}</h2>
             {renderSettingsContent()}
             <button className="close-popup" onClick={closeSettings}>Close</button>
+            <button className="apply" onClick={() => { 
+                  applySettings; 
+                  getAllLocalStorageItems(); 
+                  closeSettings(); // This is invoked when the button is clicked
+              }}>
+                  Apply
+            </button>
           </div>
         </div>
       </div>

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 */
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "interstellar_ai",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "main": "main.js",
   "scripts": {