Merge pull request #628 from thecodacus/console-error-fox-due-to-duplicate-keys-in-model-selector

chore: console error fix due to duplicate keys and logs cleanup

Author: thecodacus

app/components/chat/BaseChat.tsx

@@ -147,7 +147,9 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       return () => clearInterval(interval);
     }, [PROVIDER_LIST]);
 
-    console.log(transcript);
+    useEffect(() => {
+      console.log(transcript);
+    }, [transcript]);
     useEffect(() => {
       // Load API keys from cookies on component mount
       try {

app/components/chat/ModelSelector.tsx

@@ -121,8 +121,8 @@ export const ModelSelector = ({
       >
         {[...modelList]
           .filter((e) => e.provider == provider?.name && e.name)
-          .map((modelOption) => (
-            <option key={modelOption.name} value={modelOption.name}>
+          .map((modelOption, index) => (
+            <option key={index} value={modelOption.name}>
               {modelOption.label}
             </option>
           ))}

app/utils/constants.ts

@@ -1,6 +1,7 @@
 import Cookies from 'js-cookie';
 import type { ModelInfo, OllamaApiResponse, OllamaModel } from './types';
 import type { ProviderInfo } from '~/types/model';
+import { createScopedLogger } from './logger';
 
 export const WORK_DIR_NAME = 'project';
 export const WORK_DIR = `/home/${WORK_DIR_NAME}`;
@@ -10,6 +11,8 @@ export const PROVIDER_REGEX = /\[Provider: (.*?)\]\n\n/;
 export const DEFAULT_MODEL = 'claude-3-5-sonnet-latest';
 export const PROMPT_COOKIE_KEY = 'cachedPrompt';
 
+const logger = createScopedLogger('Constants');
+
 const PROVIDER_LIST: ProviderInfo[] = [
   {
     name: 'Anthropic',
@@ -383,8 +386,8 @@ async function getOllamaModels(): Promise<ModelInfo[]> {
       provider: 'Ollama',
       maxTokenAllowed: 8000,
     }));
-  } catch (e) {
-    console.error('Error getting Ollama models:', e);
+  } catch (e: any) {
+    logger.warn('Failed to get Ollama models: ', e.message || '');
     return [];
   }
 }
@@ -471,8 +474,8 @@ async function getLMStudioModels(): Promise<ModelInfo[]> {
       label: model.id,
       provider: 'LMStudio',
     }));
-  } catch (e) {
-    console.error('Error getting LMStudio models:', e);
+  } catch (e: any) {
+    logger.warn('Failed to get LMStudio models: ', e.message || '');
     return [];
   }
 }
@@ -491,7 +494,7 @@ async function initializeModelList(): Promise<ModelInfo[]> {
       }
     }
   } catch (error: any) {
-    console.warn(`Failed to fetch apikeys from cookies:${error?.message}`);
+    logger.warn(`Failed to fetch apikeys from cookies: ${error?.message}`);
   }
   MODEL_LIST = [
     ...(