fix: better model loading ui feedback and model list update (#954)

* fix: better model loading feedback and model list update

* added load on providersettings  update

app/components/chat/BaseChat.tsx

@@ -3,7 +3,7 @@
  * Preventing TS checks with files presented in the video for a better presentation.
  */
 import type { Message } from 'ai';
-import React, { type RefCallback, useEffect, useState } from 'react';
+import React, { type RefCallback, useCallback, useEffect, useState } from 'react';
 import { ClientOnly } from 'remix-utils/client-only';
 import { Menu } from '~/components/sidebar/Menu.client';
 import { IconButton } from '~/components/ui/IconButton';
@@ -31,6 +31,7 @@ import { toast } from 'react-toastify';
 import StarterTemplates from './StarterTemplates';
 import type { ActionAlert } from '~/types/actions';
 import ChatAlert from './ChatAlert';
+import { LLMManager } from '~/lib/modules/llm/manager';
 
 const TEXTAREA_MIN_HEIGHT = 76;
 
@@ -100,26 +101,36 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     ref,
   ) => {
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
-    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 [apiKeys, setApiKeys] = useState<Record<string, string>>(getApiKeysFromCookies());
     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('');
+    const [isModelLoading, setIsModelLoading] = useState<string | undefined>('all');
 
+    const getProviderSettings = useCallback(() => {
+      let providerSettings: Record<string, IProviderSetting> | undefined = undefined;
+
+      try {
+        const savedProviderSettings = Cookies.get('providers');
+
+        if (savedProviderSettings) {
+          const parsedProviderSettings = JSON.parse(savedProviderSettings);
+
+          if (typeof parsedProviderSettings === 'object' && parsedProviderSettings !== null) {
+            providerSettings = parsedProviderSettings;
+          }
+        }
+      } catch (error) {
+        console.error('Error loading Provider Settings from cookies:', error);
+
+        // Clear invalid cookie data
+        Cookies.remove('providers');
+      }
+
+      return providerSettings;
+    }, []);
     useEffect(() => {
       console.log(transcript);
     }, [transcript]);
@@ -157,25 +168,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     }, []);
 
     useEffect(() => {
-      let providerSettings: Record<string, IProviderSetting> | undefined = undefined;
-
-      try {
-        const savedProviderSettings = Cookies.get('providers');
-
-        if (savedProviderSettings) {
-          const parsedProviderSettings = JSON.parse(savedProviderSettings);
-
-          if (typeof parsedProviderSettings === 'object' && parsedProviderSettings !== null) {
-            providerSettings = parsedProviderSettings;
-          }
-        }
-      } catch (error) {
-        console.error('Error loading Provider Settings from cookies:', error);
-
-        // Clear invalid cookie data
-        Cookies.remove('providers');
-      }
-
+      const providerSettings = getProviderSettings();
       let parsedApiKeys: Record<string, string> | undefined = {};
 
       try {
@@ -187,12 +180,49 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
         // Clear invalid cookie data
         Cookies.remove('apiKeys');
       }
+      setIsModelLoading('all');
+      initializeModelList({ apiKeys: parsedApiKeys, providerSettings })
+        .then((modelList) => {
+          console.log('Model List: ', modelList);
+          setModelList(modelList);
+        })
+        .catch((error) => {
+          console.error('Error initializing model list:', error);
+        })
+        .finally(() => {
+          setIsModelLoading(undefined);
+        });
+    }, [providerList]);
 
-      initializeModelList({ apiKeys: parsedApiKeys, providerSettings }).then((modelList) => {
-        console.log('Model List: ', modelList);
-        setModelList(modelList);
-      });
-    }, [apiKeys]);
+    const onApiKeysChange = async (providerName: string, apiKey: string) => {
+      const newApiKeys = { ...apiKeys, [providerName]: apiKey };
+      setApiKeys(newApiKeys);
+      Cookies.set('apiKeys', JSON.stringify(newApiKeys));
+
+      const provider = LLMManager.getInstance(import.meta.env || process.env || {}).getProvider(providerName);
+
+      if (provider && provider.getDynamicModels) {
+        setIsModelLoading(providerName);
+
+        try {
+          const providerSettings = getProviderSettings();
+          const staticModels = provider.staticModels;
+          const dynamicModels = await provider.getDynamicModels(
+            newApiKeys,
+            providerSettings,
+            import.meta.env || process.env || {},
+          );
+
+          setModelList((preModels) => {
+            const filteredOutPreModels = preModels.filter((x) => x.provider !== providerName);
+            return [...filteredOutPreModels, ...staticModels, ...dynamicModels];
+          });
+        } catch (error) {
+          console.error('Error loading dynamic models:', error);
+        }
+        setIsModelLoading(undefined);
+      }
+    };
 
     const startListening = () => {
       if (recognition) {
@@ -381,15 +411,14 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                         setProvider={setProvider}
                         providerList={providerList || (PROVIDER_LIST as ProviderInfo[])}
                         apiKeys={apiKeys}
+                        modelLoading={isModelLoading}
                       />
                       {(providerList || []).length > 0 && provider && (
                         <APIKeyManager
                           provider={provider}
                           apiKey={apiKeys[provider.name] || ''}
                           setApiKey={(key) => {
-                            const newApiKeys = { ...apiKeys, [provider.name]: key };
-                            setApiKeys(newApiKeys);
-                            Cookies.set('apiKeys', JSON.stringify(newApiKeys));
+                            onApiKeysChange(provider.name, key);
                           }}
                         />
                       )}

app/components/chat/ModelSelector.tsx

@@ -10,6 +10,7 @@ interface ModelSelectorProps {
   modelList: ModelInfo[];
   providerList: ProviderInfo[];
   apiKeys: Record<string, string>;
+  modelLoading?: string;
 }
 
 export const ModelSelector = ({
@@ -19,6 +20,7 @@ export const ModelSelector = ({
   setProvider,
   modelList,
   providerList,
+  modelLoading,
 }: ModelSelectorProps) => {
   // Load enabled providers from cookies
 
@@ -83,14 +85,21 @@ export const ModelSelector = ({
         value={model}
         onChange={(e) => setModel?.(e.target.value)}
         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 lg:max-w-[70%]"
+        disabled={modelLoading === 'all' || modelLoading === provider?.name}
       >
-        {[...modelList]
-          .filter((e) => e.provider == provider?.name && e.name)
-          .map((modelOption, index) => (
-            <option key={index} value={modelOption.name}>
-              {modelOption.label}
-            </option>
-          ))}
+        {modelLoading == 'all' || modelLoading == provider?.name ? (
+          <option key={0} value="">
+            Loading...
+          </option>
+        ) : (
+          [...modelList]
+            .filter((e) => e.provider == provider?.name && e.name)
+            .map((modelOption, index) => (
+              <option key={index} value={modelOption.name}>
+                {modelOption.label}
+              </option>
+            ))
+        )}
       </select>
     </div>
   );