Merge branch 'main' of interstellardevelopment.org:React-Group/interstellar_ai

app/components/Settings.tsx

@@ -15,6 +15,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   const [newName, setNewName] = useState('');
   const [newEmail, setNewEmail] = useState('');
   const [newPassword, setNewPassword] = useState('');
+  const [preferredMessurement, setPreferredMessurement] = useState('Metric');
 
   // Theme settings state
   const [backgroundColor, setBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
@@ -40,6 +41,12 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   // Theme selection
   const [selectedTheme, setSelectedTheme] = useState<string>('default');
 
+  // API Keys
+  const [laPlateforme, setLaPlateforme] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
+  const [openAI, setOpenAI] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim());
+  const [anthropic, setAnthropic] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim());
+  const [google, setGoogle] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim());
+  
   // Apply imported settings to the CSS variables
   const applySettings = (settings: any) => {
     if (settings.backgroundColor) {
@@ -148,6 +155,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         return (
           <div className="settings-section">
           <h2>General Settings</h2>
+    
           <div className="settings-option">
             <label>Preferred Language</label>
             <select
@@ -166,6 +174,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               <option value="ar">Arabic</option>
             </select>
           </div>
+    
           <div className="settings-option">
             <label>Preferred Currency</label>
             <select
@@ -183,6 +192,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               <option value="inr">INR</option>
             </select>
           </div>
+    
           <div className="settings-option">
             <label>Date Format</label>
             <select
@@ -196,6 +206,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               <option value="dd-mm-yyyy">DD-MM-YYYY</option>
             </select>
           </div>
+    
           <div className="settings-option">
             <label>Time Format</label>
             <select
@@ -206,6 +217,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               <option value="24-hour">24 Hour</option>
             </select>
           </div>
+    
           <div className="settings-option">
             <label>Time Zone</label>
             <select
@@ -224,6 +236,18 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               <option value="JST">JST</option>
             </select>
           </div>
+    
+          {/* New Preferred Measurement Option */}
+          <div className="settings-option">
+            <label>Preferred Measurement</label>
+            <select
+              value={preferredMessurement}
+              onChange={(e) => setPreferredMessurement(e.target.value)}
+            >
+              <option value="Metric">Metric</option>
+              <option value="Imperial">Imperial</option>
+            </select>
+          </div>
         </div>
       );
 
@@ -697,17 +721,55 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           </div>
         );
 
+        case 'api':
+          return (
+            <div className="settings-section">
+              <div className="settings-option">
+                <label>La Plateforme</label>
+                <input
+                  type="text"
+                  value={laPlateforme}
+                  onChange={(e) => setLaPlateforme(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <label>OpenAI</label>
+                <input
+                  type="text"
+                  value={openAI}
+                  onChange={(e) => setOpenAI(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <label>Anthropic</label>
+                <input
+                  type="text"
+                  value={anthropic}
+                  onChange={(e) => setAnthropic(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <label>Google</label>
+                <input
+                  type="text"
+                  value={google}
+                  onChange={(e) => setGoogle(e.target.value)}
+                />
+              </div>
+            </div>
+          );
+
         case 'im/export':
           return (
             <div className="settings-section">
               <h2>Import & Export</h2>
               <div className="settings-option">
                 <h3>Export the settings</h3>  
-                <button onClick={() => exportSettings(currentSettings)}>Export Settings</button>
+                <button onClick={() => exportSettings(currentSettings)} className='export-button'>Export Settings</button>
               </div>
               <div className="settings-option">
                 <h3>Import the settings</h3>  
-                <input type="file" onChange={handleImport} accept=".json" />
+                <input type="file" onChange={handleImport} accept=".json" className='import-file'/>
               </div>
               </div>
           );
@@ -748,6 +810,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     fontSize,
     preferredLanguage,
     preferredCurrency,
+    preferredMessurement, 
     dateFormat,
     timeFormat,
     timeZone,
@@ -755,8 +818,15 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     disableChatHistory,
     disableAIMemory,
     openSourceMode,
+
+    // API Keys
+   laPlateforme,
+   openAI,
+   anthropic,
+   google
 };
 
+
   return (
     <div className="popup-overlay">
       <div className="settings-content">
@@ -768,6 +838,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               <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>

app/components/json/black.json

@@ -0,0 +1 @@
+{"backgroundColor":"#8B9635","textColor":"#474D22","inputBackgroundColor":"#ffffff","inputButtonColor":"#8B9635","inputButtonHoverColor":"#6b7c2b","userMessageBackgroundColor":"#8B9635","userMessageTextColor":"#000","aiMessageBackgroundColor":"#FCFCEB","aiMessageTextColor":"#000","buttonBackgroundColor":"#8B9635","buttonHoverBackgroundColor":"#6b7c2b","modelsBackgroundColor":"#ffffff","historyBackgroundColor":"#f9f9f9","leftPanelBackgroundColor":"#79832e","conversationBackgroundColor":"#79832e","popUpTextColor":"#000","inputBorderColor":"#8B9635","fontFamily":"'Poppins', 'sans-serif'","fontSize":"16px","preferredLanguage":"en","preferredCurrency":"usd","dateFormat":"mm/dd/yyyy","timeFormat":"12-hour","timeZone":"GMT","disableOnlineAI":false,"disableChatHistory":false,"disableAIMemory":false,"openSourceMode":false,"laPlateforme":"","openAI":"","anthropic":"","google":""}

app/components/json/iomarket.json

@@ -0,0 +1 @@
+{"backgroundColor":"#8B9635","textColor":"#474D22","inputBackgroundColor":"#ffffff","inputButtonColor":"#8B9635","inputButtonHoverColor":"#6b7c2b","userMessageBackgroundColor":"#8B9635","userMessageTextColor":"#000","aiMessageBackgroundColor":"#FCFCEB","aiMessageTextColor":"#000","buttonBackgroundColor":"#8B9635","buttonHoverBackgroundColor":"#6b7c2b","modelsBackgroundColor":"#ffffff","historyBackgroundColor":"#f9f9f9","leftPanelBackgroundColor":"#79832e","conversationBackgroundColor":"#79832e","popUpTextColor":"#000","inputBorderColor":"#8B9635","fontFamily":"'Poppins', 'sans-serif'","fontSize":"16px","preferredLanguage":"en","preferredCurrency":"usd","dateFormat":"mm/dd/yyyy","timeFormat":"12-hour","timeZone":"GMT","disableOnlineAI":false,"disableChatHistory":false,"disableAIMemory":false,"openSourceMode":false,"laPlateforme":"","openAI":"","anthropic":"","google":""}

app/components/json/white.json

@@ -0,0 +1 @@
+{"backgroundColor":"#8B9635","textColor":"#474D22","inputBackgroundColor":"#ffffff","inputButtonColor":"#8B9635","inputButtonHoverColor":"#6b7c2b","userMessageBackgroundColor":"#8B9635","userMessageTextColor":"#000","aiMessageBackgroundColor":"#FCFCEB","aiMessageTextColor":"#000","buttonBackgroundColor":"#8B9635","buttonHoverBackgroundColor":"#6b7c2b","modelsBackgroundColor":"#ffffff","historyBackgroundColor":"#f9f9f9","leftPanelBackgroundColor":"#79832e","conversationBackgroundColor":"#79832e","popUpTextColor":"#000","inputBorderColor":"#8B9635","fontFamily":"'Poppins', 'sans-serif'","fontSize":"16px","preferredLanguage":"en","preferredCurrency":"usd","dateFormat":"mm/dd/yyyy","timeFormat":"12-hour","timeZone":"GMT","disableOnlineAI":false,"disableChatHistory":false,"disableAIMemory":false,"openSourceMode":false,"laPlateforme":"","openAI":"","anthropic":"","google":""}

app/styles/Settings.css

@@ -147,3 +147,16 @@
     display: block;
     font-weight: bold;
 }
+
+.export-button{
+    background-color: var(--button-hover-background-color);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 10px;
+}
+
+.import-file{
+    background-color: var(--button-hover-background-color);
+    padding: 10px;
+    margin: 10px;
+}