Merge pull request #645 from wonderwhy-er/pr-620

refactor: refactored Setting component, added useSettings Hook to get settings details from one single place

Author: wonderwhy-er

app/components/chat/BaseChat.tsx

@@ -17,7 +17,6 @@ import Cookies from 'js-cookie';
 import * as Tooltip from '@radix-ui/react-tooltip';
 
 import styles from './BaseChat.module.scss';
-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';
@@ -26,6 +25,7 @@ import GitCloneButton from './GitCloneButton';
 import FilePreview from './FilePreview';
 import { ModelSelector } from '~/components/chat/ModelSelector';
 import { SpeechRecognitionButton } from '~/components/chat/SpeechRecognition';
+import type { IProviderSetting, ProviderInfo } from '~/types/model';
 
 const TEXTAREA_MIN_HEIGHT = 76;
 
@@ -45,6 +45,7 @@ interface BaseChatProps {
   setModel?: (model: string) => void;
   provider?: ProviderInfo;
   setProvider?: (provider: ProviderInfo) => void;
+  providerList?: ProviderInfo[];
   handleStop?: () => void;
   sendMessage?: (event: React.UIEvent, messageInput?: string) => void;
   handleInputChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
@@ -70,6 +71,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       setModel,
       provider,
       setProvider,
+      providerList,
       input = '',
       enhancingPrompt,
       handleInputChange,
@@ -108,48 +110,10 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     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]);
-
     useEffect(() => {
       console.log(transcript);
     }, [transcript]);
+
     useEffect(() => {
       // Load API keys from cookies on component mount
       try {
@@ -169,7 +133,26 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
         Cookies.remove('apiKeys');
       }
 
-      initializeModelList().then((modelList) => {
+      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');
+      }
+
+      initializeModelList(providerSettings).then((modelList) => {
         setModelList(modelList);
       });
 
@@ -369,10 +352,10 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                       modelList={modelList}
                       provider={provider}
                       setProvider={setProvider}
-                      providerList={PROVIDER_LIST}
+                      providerList={providerList || PROVIDER_LIST}
                       apiKeys={apiKeys}
                     />
-                    {enabledProviders.length > 0 && provider && (
+                    {(providerList || []).length > 0 && provider && (
                       <APIKeyManager
                         provider={provider}
                         apiKey={apiKeys[provider.name] || ''}
@@ -468,7 +451,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                       <SendButton
                         show={input.length > 0 || isStreaming || uploadedFiles.length > 0}
                         isStreaming={isStreaming}
-                        disabled={enabledProviders.length === 0}
+                        disabled={!providerList || providerList.length === 0}
                         onClick={(event) => {
                           if (isStreaming) {
                             handleStop?.();
@@ -528,7 +511,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                             !isModelSettingsCollapsed,
                         })}
                         onClick={() => setIsModelSettingsCollapsed(!isModelSettingsCollapsed)}
-                        disabled={enabledProviders.length === 0}
+                        disabled={!providerList || providerList.length === 0}
                       >
                         <div className={`i-ph:caret-${isModelSettingsCollapsed ? 'right' : 'down'} text-lg`} />
                         {isModelSettingsCollapsed ? <span className="text-xs">{model}</span> : <span />}

app/components/chat/Chat.client.tsx

@@ -17,8 +17,9 @@ import { cubicEasingFn } from '~/utils/easings';
 import { createScopedLogger, renderLogger } from '~/utils/logger';
 import { BaseChat } from './BaseChat';
 import Cookies from 'js-cookie';
-import type { ProviderInfo } from '~/utils/types';
 import { debounce } from '~/utils/debounce';
+import { useSettings } from '~/lib/hooks/useSettings';
+import type { ProviderInfo } from '~/types/model';
 
 const toastAnimation = cssTransition({
   enter: 'animated fadeInRight',
@@ -91,6 +92,7 @@ export const ChatImpl = memo(
     const [chatStarted, setChatStarted] = useState(initialMessages.length > 0);
     const [uploadedFiles, setUploadedFiles] = useState<File[]>([]); // Move here
     const [imageDataList, setImageDataList] = useState<string[]>([]); // Move here
+    const { activeProviders } = useSettings();
 
     const [model, setModel] = useState(() => {
       const savedModel = Cookies.get('selectedModel');
@@ -316,6 +318,7 @@ export const ChatImpl = memo(
         setModel={handleModelChange}
         provider={provider}
         setProvider={handleProviderChange}
+        providerList={activeProviders}
         messageRef={messageRef}
         scrollRef={scrollRef}
         handleInputChange={(e) => {

app/components/settings/Settings.module.scss

@@ -46,7 +46,7 @@
   padding: 1rem;
   margin-bottom: 1rem;
   border-style: solid;
-  border-color: var(--bolt-elements-button-danger-backgroundHover) ; 
+  border-color: var(--bolt-elements-button-danger-backgroundHover);
   border-width: thin;
 
   button {
@@ -60,4 +60,4 @@
       background-color: var(--bolt-elements-button-danger-backgroundHover);
     }
   }
-} 
+}