From 9396734dea1cac65fb111d436cddfe8047e6c37f Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Wed, 13 Nov 2024 22:22:25 +0200
Subject: [PATCH] Various bug fixes around model/provider selection

---
 app/components/chat/BaseChat.tsx    | 15 ++++++++++++---
 app/components/chat/Chat.client.tsx | 12 ++++++------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index cfa2afd..9a34f5b 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -7,7 +7,7 @@ import { Menu } from '~/components/sidebar/Menu.client';
 import { IconButton } from '~/components/ui/IconButton';
 import { Workbench } from '~/components/workbench/Workbench.client';
 import { classNames } from '~/utils/classNames';
-import { MODEL_LIST, DEFAULT_PROVIDER, PROVIDER_LIST, ProviderInfo } from '~/utils/constants';
+import { MODEL_LIST, DEFAULT_PROVIDER, PROVIDER_LIST, ProviderInfo, initializeModelList } from '~/utils/constants';
 import { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';
 import { useState } from 'react';
@@ -45,8 +45,10 @@ const ModelSelector = ({ model, setModel, provider, setProvider, modelList, prov
         ))}
       </select>
       <select
+        key={provider?.name}
         value={model}
         onChange={(e) => setModel(e.target.value)}
+        style={{maxWidth: "70%"}}
         className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all"
       >
         {[...modelList]
@@ -111,6 +113,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     console.log(provider);
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
     const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
+    const [modelList, setModelList] = useState(MODEL_LIST);
+
 
     useEffect(() => {
       // Load API keys from cookies on component mount
@@ -127,6 +131,10 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
         // Clear invalid cookie data
         Cookies.remove('apiKeys');
       }
+
+      initializeModelList().then(modelList => {
+        setModelList(modelList);
+      });
     }, []);
 
     const updateApiKey = (provider: string, key: string) => {
@@ -190,12 +198,13 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                 })}
               >
                 <ModelSelector
+                  key={provider?.name + ':' + modelList.length}
                   model={model}
                   setModel={setModel}
-                  modelList={MODEL_LIST}
+                  modelList={modelList}
                   provider={provider}
                   setProvider={setProvider}
-                  providerList={providerList}
+                  providerList={PROVIDER_LIST}
                 />
                 {provider &&
                   <APIKeyManager
diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx
index d593cde..2407e86 100644
--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -11,7 +11,7 @@ import { useChatHistory } from '~/lib/persistence';
 import { chatStore } from '~/lib/stores/chat';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { fileModificationsToHTML } from '~/utils/diff';
-import { DEFAULT_MODEL, DEFAULT_PROVIDER } from '~/utils/constants';
+import { DEFAULT_MODEL, DEFAULT_PROVIDER, PROVIDER_LIST, ProviderInfo } from '~/utils/constants';
 import { cubicEasingFn } from '~/utils/easings';
 import { createScopedLogger, renderLogger } from '~/utils/logger';
 import { BaseChat } from './BaseChat';
@@ -80,7 +80,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
   });
   const [provider, setProvider] = useState(() => {
     const savedProvider = Cookies.get('selectedProvider');
-    return savedProvider || DEFAULT_PROVIDER;
+    return PROVIDER_LIST.find(p => p.name === savedProvider) || DEFAULT_PROVIDER;
   });
 
   const { showChat } = useStore(chatStore);
@@ -96,7 +96,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
     },
     onError: (error) => {
       logger.error('Request failed\n\n', error);
-      toast.error('There was an error processing your request');
+      toast.error('There was an error processing your request: ' + (error.message ? error.message : "No details were returned"));
     },
     onFinish: () => {
       logger.debug('Finished streaming');
@@ -227,9 +227,9 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
     Cookies.set('selectedModel', newModel, { expires: 30 });
   };
 
-  const handleProviderChange = (newProvider: string) => {
+  const handleProviderChange = (newProvider: ProviderInfo) => {
     setProvider(newProvider);
-    Cookies.set('selectedProvider', newProvider, { expires: 30 });
+    Cookies.set('selectedProvider', newProvider.name, { expires: 30 });
   };
 
   return (
@@ -263,7 +263,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
       })}
       enhancePrompt={() => {
         enhancePrompt(
-          input, 
+          input,
           (input) => {
             setInput(input);
             scrollTextArea();