Merge branch 'coleam00:main' into ui/model-dropdown

app/components/chat/BaseChat.tsx

@@ -21,6 +21,7 @@ import type { ProviderInfo } from '~/utils/types';
 import { ExportChatButton } from '~/components/chat/chatExportAndImport/ExportChatButton';
 import { ImportButtons } from '~/components/chat/chatExportAndImport/ImportButtons';
 import { ExamplePrompts } from '~/components/chat/ExamplePrompts';
+import GitCloneButton from './GitCloneButton';
 
 import FilePreview from './FilePreview';
 import { ModelSelector } from '~/components/chat/ModelSelector';
@@ -87,13 +88,65 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     ref,
   ) => {
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
-    const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
+    const [apiKeys, setApiKeys] = useState<Record<string, string>>(() => {
+      const savedKeys = Cookies.get('apiKeys');
+
+      if (savedKeys) {
+        try {
+          return JSON.parse(savedKeys);
+        } catch (error) {
+          console.error('Failed to parse API keys from cookies:', error);
+          return {};
+        }
+      }
+
+      return {};
+    });
     const [modelList, setModelList] = useState(MODEL_LIST);
     const [isModelSettingsCollapsed, setIsModelSettingsCollapsed] = useState(false);
     const [isListening, setIsListening] = useState(false);
     const [recognition, setRecognition] = useState<SpeechRecognition | null>(null);
     const [transcript, setTranscript] = useState('');
 
+    // Load enabled providers from cookies
+    const [enabledProviders, setEnabledProviders] = useState(() => {
+      const savedProviders = Cookies.get('providers');
+
+      if (savedProviders) {
+        try {
+          const parsedProviders = JSON.parse(savedProviders);
+          return PROVIDER_LIST.filter((p) => parsedProviders[p.name]);
+        } catch (error) {
+          console.error('Failed to parse providers from cookies:', error);
+          return PROVIDER_LIST;
+        }
+      }
+
+      return PROVIDER_LIST;
+    });
+
+    // Update enabled providers when cookies change
+    useEffect(() => {
+      const updateProvidersFromCookies = () => {
+        const savedProviders = Cookies.get('providers');
+
+        if (savedProviders) {
+          try {
+            const parsedProviders = JSON.parse(savedProviders);
+            setEnabledProviders(PROVIDER_LIST.filter((p) => parsedProviders[p.name]));
+          } catch (error) {
+            console.error('Failed to parse providers from cookies:', error);
+          }
+        }
+      };
+
+      updateProvidersFromCookies();
+
+      const interval = setInterval(updateProvidersFromCookies, 1000);
+
+      return () => clearInterval(interval);
+    }, [PROVIDER_LIST]);
+
     console.log(transcript);
     useEffect(() => {
       // Load API keys from cookies on component mount
@@ -183,23 +236,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       }
     };
 
-    const updateApiKey = (provider: string, key: string) => {
-      try {
-        const updatedApiKeys = { ...apiKeys, [provider]: key };
-        setApiKeys(updatedApiKeys);
-
-        // Save updated API keys to cookies with 30 day expiry and secure settings
-        Cookies.set('apiKeys', JSON.stringify(updatedApiKeys), {
-          expires: 30, // 30 days
-          secure: true, // Only send over HTTPS
-          sameSite: 'strict', // Protect against CSRF
-          path: '/', // Accessible across the site
-        });
-      } catch (error) {
-        console.error('Error saving API keys to cookies:', error);
-      }
-    };
-
     const handleFileUpload = () => {
       const input = document.createElement('input');
       input.type = 'file';
@@ -344,11 +380,15 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                       providerList={PROVIDER_LIST}
                       apiKeys={apiKeys}
                     />
-                    {provider && (
+                    {enabledProviders.length > 0 && provider && (
                       <APIKeyManager
                         provider={provider}
                         apiKey={apiKeys[provider.name] || ''}
-                        setApiKey={(key) => updateApiKey(provider.name, key)}
+                        setApiKey={(key) => {
+                          const newApiKeys = { ...apiKeys, [provider.name]: key };
+                          setApiKeys(newApiKeys);
+                          Cookies.set('apiKeys', JSON.stringify(newApiKeys));
+                        }}
                       />
                     )}
                   </div>
@@ -511,7 +551,12 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                 </div>
               </div>
             </div>
-            {!chatStarted && ImportButtons(importChat)}
+            {!chatStarted && (
+              <div className="flex justify-center gap-2">
+                {ImportButtons(importChat)}
+                <GitCloneButton importChat={importChat} />
+              </div>
+            )}
             {!chatStarted &&
               ExamplePrompts((event, messageInput) => {
                 if (isStreaming) {