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

Reviewed-on: https://interstellardevelopment.org/code/code/sageTheDm/interstellar_ai/pulls/37

app/components/Models.tsx

@@ -135,8 +135,36 @@ const modelList = {
     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 selectedAIFunction = [
+  'Code',
+  'Math',
+  'Language',
+  'Character',
+  'Finance',
+  'Weather',
+  'Time',
+  'Image',
+  'Custom1',
+  'Custom2'
+]
 
 const ModelSection: React.FC = () => {
   // Initialize state with value from localStorage or default to ''
@@ -144,6 +172,7 @@ const ModelSection: React.FC = () => {
   const [radioSelection, setRadioSelection] = useState<string | null>("");
   const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
   const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
+  const [isOpenSourceMode, setIsOpenSourceMode] = useState(localStorage.getItem('openSourceMode') || "false")
 
   useEffect(() => {
     // Load initial values from localStorage
@@ -189,9 +218,60 @@ const ModelSection: React.FC = () => {
     localStorage.setItem('type', modelType);
   };
 
-  const isOfflineModel = (model: string) => {
-    return modelList[model as ModelKeys].model_type === 'local';
-  };
+  // Determine the filtered models based on current radioSelection
+  const filteredModels = (() => {
+    let models = [];
+    switch (radioSelection) {
+      case 'Offline':
+        models = [
+          ...modelDropdown.onlineNonFoss,
+          ...modelDropdown.onlineFoss,
+        ];
+        if (isOpenSourceMode == "true") {
+          models = [
+            ...modelDropdown.onlineFoss,
+          ];
+        } // Show only offline models without FOSS
+        break;
+      case 'Online':
+        models = [
+          ...modelDropdown.offlineNonFoss,
+          ...modelDropdown.offlineFoss,
+        ];
+        if (isOpenSourceMode == "true") {
+          models = [
+            ...modelDropdown.offlineFoss,
+          ];
+        } // Show only online models without FOSS
+        break;
+      case 'None':
+        models = [
+          ...modelDropdown.offlineNonFoss,
+          ...modelDropdown.offlineFoss,
+          ...modelDropdown.onlineNonFoss,
+          ...modelDropdown.onlineFoss,
+        ];
+        if (isOpenSourceMode == "true") {
+          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
+  })();
+
+  const isOfflineModel = (model: string) =>
+    modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
 
   const modelClicked = (model: string) => {
     const selectedAIFunction = currentSelectedAIFunction as keyof typeof modelList;

app/components/settings/Settings.tsx

@@ -112,7 +112,6 @@ 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");
@@ -128,7 +127,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   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<boolean | any>(() => getItemFromLocalStorage('myBoolean'));
+  const [myBoolean, setMyBoolean] = useState<boolean | any>(() => getItemFromLocalStorage('myBoolean'));
 
   const settings = {
     userPreferences: {
@@ -224,7 +223,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 = [
@@ -338,15 +337,13 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   useEffect(() => {
     const savedOption = localStorage.getItem('radioSelection');
     if (savedOption) {
-      handleRadioChange(savedOption); // Set saved selection
+      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
   };
 
@@ -479,85 +476,85 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         );
 
 
-          case 'theme':
-            return (
-              <div className="settings-section">
-                <h2>Theme Settings</h2>
+      case 'theme':
+        return (
+          <div className="settings-section">
+            <h2>Theme Settings</h2>
 
-                <ThemeDropdown
-                  selectedTheme={selectedTheme}
-                  setSelectedTheme={setSelectedTheme}
+            <ThemeDropdown
+              selectedTheme={selectedTheme}
+              setSelectedTheme={setSelectedTheme}
+            />
+
+            {selectedTheme === 'BASIC-CUSTOM' && (
+              <>
+                <h3>Basic Colors</h3>
+                {/* Basic Color Inputs using ColorSetting Component */}
+                <ColorSetting
+                  name="Primary Color"
+                  value={primaryColor}
+                  setValue={setPrimaryColor}
+                  cssVariable=""
+                />
+                <ColorSetting
+                  name="Secondary Color"
+                  value={secondaryColor}
+                  setValue={setSecondaryColor}
+                  cssVariable=""
+                />
+                <ColorSetting
+                  name="Accent Color"
+                  value={accentColor}
+                  setValue={setAccentColor}
+                  cssVariable=""
+                />
+                <ColorSetting
+                  name="Background Color"
+                  value={basicBackgroundColor}
+                  setValue={setBasicBackgroundColor}
+                  cssVariable=""
+                />
+                <ColorSetting
+                  name="Text Color"
+                  value={basicTextColor}
+                  setValue={setBasicTextColor}
+                  cssVariable=""
+                />
+              </>
+            )}
+
+            {selectedTheme === 'CUSTOM' && (
+              <>
+                <h3>Additional Settings</h3>
+                {/* Additional Font Size Setting */}
+                <FontSizeSetting
+                  fontSize={fontSize}
+                  setFontSize={setFontSize}
                 />
 
-                {selectedTheme === 'BASIC-CUSTOM' && (
-                  <>
-                    <h3>Basic Colors</h3>
-                    {/* Basic Color Inputs using ColorSetting Component */}
-                    <ColorSetting
-                      name="Primary Color"
-                      value={primaryColor}
-                      setValue={setPrimaryColor}
-                      cssVariable=""
-                    />
-                    <ColorSetting
-                      name="Secondary Color"
-                      value={secondaryColor}
-                      setValue={setSecondaryColor}
-                      cssVariable=""
-                    />
-                    <ColorSetting
-                      name="Accent Color"
-                      value={accentColor}
-                      setValue={setAccentColor}
-                      cssVariable=""
-                    />
-                    <ColorSetting
-                      name="Background Color"
-                      value={basicBackgroundColor}
-                      setValue={setBasicBackgroundColor}
-                      cssVariable=""
-                    />
-                    <ColorSetting
-                      name="Text Color"
-                      value={basicTextColor}
-                      setValue={setBasicTextColor}
-                      cssVariable=""
-                    />
-                  </>
-                )}
+                {colorSettings.map((setting) => (
+                  <ColorSetting
+                    key={setting.cssVariable}
+                    name={setting.name}
+                    value={setting.value}
+                    setValue={setting.setValue}
+                    cssVariable={setting.cssVariable}
+                  />
+                ))}
 
-                {selectedTheme === 'CUSTOM' && (
-                  <>
-                    <h3>Additional Settings</h3>
-                    {/* Additional Font Size Setting */}
-                    <FontSizeSetting
-                      fontSize={fontSize}
-                      setFontSize={setFontSize}
-                    />
-          
-                    {colorSettings.map((setting) => (
-                      <ColorSetting
-                        key={setting.cssVariable}
-                        name={setting.name}
-                        value={setting.value}
-                        setValue={setting.setValue}
-                        cssVariable={setting.cssVariable}
-                      />
-                    ))}
-          
-                    <DropdownSetting
-                      label="Font Family"
-                      value={fontFamily}
-                      setValue={(newFont) => {
-                        setFontFamily(newFont);
-                        document.documentElement.style.setProperty('--font-family', newFont);
-                      }}
-                      options={fontOptions}
-                    />
-                  </>
-                )}
-              </div>
-            );       
+                <DropdownSetting
+                  label="Font Family"
+                  value={fontFamily}
+                  setValue={(newFont) => {
+                    setFontFamily(newFont);
+                    document.documentElement.style.setProperty('--font-family', newFont);
+                  }}
+                  options={fontOptions}
+                />
+              </>
+            )}
+          </div>
+        );
 
       case 'foss':
         return (
@@ -580,14 +577,13 @@ 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
             />
             <TextSettings
               label="New Email"
               value={newEmail}
               setValue={setNewEmail}
-              type="email"
+              type="email" // Input type is email
               placeholder={localStorage.getItem("accountEmail") || "Current Email"} // Show current email or a default
             />
             <TextSettings
@@ -652,24 +648,24 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
       case 'im/export':
         return (
           <div className="settings-section">
-          <h2>Import & Export</h2>
-          <div className="settings-option">
-            <h3>Export the settings</h3>
-            <button onClick={handleExport} className="export-button">
-              Export Settings
-            </button>
+            <h2>Import & Export</h2>
+            <div className="settings-option">
+              <h3>Export the settings</h3>
+              <button onClick={handleExport} className="export-button">
+                Export Settings
+              </button>
+            </div>
+            <div className="settings-option">
+              <h3>Import the settings</h3>
+              <input
+                type="file"
+                onChange={handleImport}
+                accept=".json"
+                className="import-file"
+              />
+            </div>
           </div>
-          <div className="settings-option">
-            <h3>Import the settings</h3>
-            <input
-              type="file"
-              onChange={handleImport}
-              accept=".json"
-              className="import-file"
-            />
-          </div>
-        </div>
-      );
+        );
       default:
         return null;
     }
@@ -703,36 +699,36 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   };
 
   return (
-      <div className="popup-overlay">
-        <div className="settings-content">
-          <div className="settings-container">
-            <div className="sidebar">
-              <ul>
-                <li onClick={() => setActiveSection('general')}>General</li>
-                <li onClick={() => setActiveSection('privacy')}>Privacy</li>
-                <li onClick={() => setActiveSection('theme')}>Theme</li>
-                <li onClick={() => setActiveSection('foss')}>FOSS</li>
-                <li onClick={() => setActiveSection('account')}>Account</li>
-                <li onClick={() => setActiveSection('api')}>API Keys</li>
-                <li onClick={() => setActiveSection('im/export')}>Import/Export</li>
-              </ul>
-            </div>
-            <div className="settings-main">
-              <h2>Settings for {accountName}</h2>
-              {renderSettingsContent()}
-              <button className="close-popup" onClick={closeSettings}>Close</button>
-              <button className="apply" onClick={async () => {
-                getAllLocalStorageItems();
-                closeSettings();
-                await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
-                window.location.reload();
-              }}>
-                Apply
-              </button>
-            </div>
+    <div className="popup-overlay">
+      <div className="settings-content">
+        <div className="settings-container">
+          <div className="sidebar">
+            <ul>
+              <li onClick={() => setActiveSection('general')}>General</li>
+              <li onClick={() => setActiveSection('privacy')}>Privacy</li>
+              <li onClick={() => setActiveSection('theme')}>Theme</li>
+              <li onClick={() => setActiveSection('foss')}>FOSS</li>
+              <li onClick={() => setActiveSection('account')}>Account</li>
+              <li onClick={() => setActiveSection('api')}>API Keys</li>
+              <li onClick={() => setActiveSection('im/export')}>Import/Export</li>
+            </ul>
+          </div>
+          <div className="settings-main">
+            <h2>Settings for {accountName}</h2>
+            {renderSettingsContent()}
+            <button className="close-popup" onClick={closeSettings}>Close</button>
+            <button className="apply" onClick={async () => {
+              getAllLocalStorageItems();
+              closeSettings();
+              await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
+              window.location.reload();
+            }}>
+              Apply
+            </button>
           </div>
         </div>
       </div>
+    </div>
   );
 };