Refactor chat settings model selection logic

Author: Royal-lobster

src/components/Settings/Sections/ChatSettings.tsx

@@ -126,18 +126,13 @@ const ChatSettings = () => {
         row={true}
       >
         <select
-          value={chatSettings.model?.id || ''}
+          value={chatSettings.model || ''}
           className="input cdx-w-44"
-          onChange={(e) => {
-            const selectedModel = models.find((m) => m.id === e.target.value)
-            if (selectedModel) {
-              setActiveChatModel(selectedModel)
-            }
-          }}
+          onChange={(e) => setActiveChatModel(e.target.value)}
         >
           {models.map((model) => (
             <option key={model.id} value={model.id}>
-              {model.name}
+              {model.id}
             </option>
           ))}
         </select>

src/components/Sidebar/auth/index.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react'
+import { useChatModels } from '../../../hooks/useChatModels'
 import { useSettings } from '../../../hooks/useSettings'
 import { validateApiKey } from '../../../lib/validApiKey'
-import { useChatModels } from '../../../hooks/useChatModels'
-import { ModelInfo } from '../../../config/settings'
 
 const Auth = () => {
   const [, setSettings] = useSettings()
@@ -13,9 +12,7 @@ const Auth = () => {
 
   useEffect(() => {
     if (error) {
-      setTimeout(() => {
-        setError(null)
-      }, 3000)
+      setTimeout(() => setError(null), 3000)
     }
   }, [error])
 
@@ -118,17 +115,12 @@ const Auth = () => {
           </label>
           <select
             id="model"
-            onChange={(e) => {
-              const selectedModel = models.find((m) => m.id === e.target.value)
-              if (selectedModel) {
-                setActiveChatModel(selectedModel)
-              }
-            }}
+            onChange={(e) => setActiveChatModel(e.target.value)}
             className="cdx-text-center cdx-p-2 cdx-w-full cdx-rounded-md cdx-border dark:cdx-border-neutral-600 cdx-border-neutral-200 dark:cdx-bg-neutral-800/90 cdx-bg-neutral-200/90 focus:cdx-outline-none focus:cdx-ring-2 focus:cdx-ring-blue-900 focus:cdx-ring-opacity-50"
           >
             {models.map((model) => (
               <option key={model.id} value={model.id}>
-                {model.name}
+                {model.id}
               </option>
             ))}
           </select>

src/components/Sidebar/chat/ChangeChatModel.tsx

@@ -7,18 +7,15 @@ const ChangeChatModel = () => {
     <div className="cdx-flex cdx-items-center cdx-gap-1 cdx-text-neutral-500 dark:cdx-bg-neutral-900 cdx-bg-neutral-200 cdx-border cdx-rounded-md cdx-border-neutral-400/30 dark:cdx-border-neutral-500/30 cdx-py-1 cdx-px-3">
       <BsRobot size={18} className="cdx-flex-shrink-0" />
       <select
-        value={activeChatModel?.id || ''}
+        value={activeChatModel || ''}
         className="cdx-bg-transparent !m-0 !p-0 cdx-box-border cdx-w-min focus:cdx-outline-none focus:cdx-ring-1"
         onChange={(e) => {
-          const selectedModel = models.find((m) => m.id === e.target.value)
-          if (selectedModel) {
-            setActiveChatModel(selectedModel)
-          }
+          setActiveChatModel(e.target.value)
         }}
       >
         {models.map((model) => (
           <option key={model.id} value={model.id}>
-            {model.name}
+            {model.id}
           </option>
         ))}
       </select>

src/components/Sidebar/chat/index.tsx

@@ -58,7 +58,7 @@ const Chat = ({ settings }: ChatProps) => {
         clearMessages={clearMessages}
         cancelRequest={cancelRequest}
         isWebpageContextOn={settings.general.webpageContext}
-        isVisionModel={settings.chat.model?.capabilities.vision || false}
+        isVisionModel={settings.chat.model?.includes('vision') || false}
       />
     </>
   )

src/components/Sidebar/index.tsx

@@ -10,7 +10,11 @@ function Sidebar() {
   return (
     <div className="cdx-flex cdx-backdrop-blur-sm cdx-flex-col cdx-min-h-screen cdx-shadow-md cdx-border-l dark:!cdx-text-white dark:cdx-border-neutral-800 cdx-border-neutral-200 cdx-top-0 cdx-right-0 cdx-w-[400px] cdx-h-full dark:cdx-bg-neutral-800/90 cdx-bg-neutral-100/90">
       <Header />
-      {settings.chat.openAIKey ? <Chat settings={settings} /> : <Auth />}
+      {settings.chat.openAIKey && settings.chat.model ? (
+        <Chat settings={settings} />
+      ) : (
+        <Auth />
+      )}
     </div>
   )
 }

src/config/settings/index.ts

@@ -13,23 +13,6 @@ export enum Mode {
   CREATIVE = 1.5,
 }
 
-export type ModelCapabilities = {
-  completion_chat: boolean
-  function_calling: boolean
-  vision: boolean
-  fine_tuning: boolean
-  completion_fim: boolean
-}
-
-export type ModelInfo = {
-  id: string
-  name: string
-  description: string
-  capabilities: ModelCapabilities
-  max_context_length: number
-  owned_by: string
-}
-
 export type Settings = {
   quickMenu: {
     enabled: boolean
@@ -38,7 +21,7 @@ export type Settings = {
   }
   chat: {
     openAIKey: string | null
-    model: ModelInfo | null
+    model: string | null
     mode: Mode
     openAiBaseUrl: string | null
   }

src/hooks/useChatCompletion.ts

@@ -6,13 +6,13 @@ import {
   SystemMessage,
 } from '@langchain/core/messages'
 import { useMemo, useState } from 'react'
-import type { Mode, ModelInfo } from '../config/settings'
+import type { Mode } from '../config/settings'
 import { getMatchedContent } from '../lib/getMatchedContent'
 import { ChatRole, useCurrentChat } from './useCurrentChat'
 import type { MessageDraft } from './useMessageDraft'
 
 interface UseChatCompletionProps {
-  model: ModelInfo
+  model: string
   apiKey: string
   mode: Mode
   systemPrompt: string
@@ -43,12 +43,11 @@ export const useChatCompletion = ({
     return new ChatOpenAI({
       streaming: true,
       openAIApiKey: apiKey,
-      modelName: model.id,
+      modelName: model,
       configuration: {
         baseURL: baseURL,
       },
       temperature: Number(mode),
-      maxTokens: model.max_context_length,
     })
   }, [apiKey, model, mode, baseURL])
 
@@ -99,7 +98,7 @@ export const useChatCompletion = ({
         ...previousMessages,
         new HumanMessage({
           content:
-            message.files.length > 0 && model.capabilities.vision
+            message.files.length > 0
               ? [
                   { type: 'text', text: expandedQuery },
                   ...(message.files.length > 0

src/hooks/useChatModels.ts

@@ -1,11 +1,17 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useSettings } from './useSettings'
 import axios from 'axios'
-import type { ModelInfo } from '../config/settings'
+
+type OpenAIModel = {
+  id: string
+  object: string
+  created: number
+  owned_by: string
+}
 
 export const useChatModels = () => {
   const [settings, setSettings] = useSettings()
-  const [models, setModels] = useState<ModelInfo[]>([])
+  const [models, setModels] = useState<OpenAIModel[]>([])
   const chatSettings = settings.chat
   const activeChatModel = chatSettings.model
 
@@ -20,12 +26,7 @@ export const useChatModels = () => {
           },
         })
 
-        // Filter for chat-capable models
-        const chatModels = data.data.filter(
-          (model: ModelInfo) => model.capabilities?.completion_chat === true,
-        )
-
-        setModels(chatModels)
+        setModels(data.data)
       } catch (error) {
         console.log('Failed to fetch models:', error)
         setModels([])
@@ -37,12 +38,12 @@ export const useChatModels = () => {
     fetchAvailableModels()
   }, [fetchAvailableModels])
 
-  const setActiveChatModel = (model: ModelInfo) => {
+  const setActiveChatModel = (modelId: string) => {
     setSettings({
       ...settings,
       chat: {
         ...chatSettings,
-        model,
+        model: modelId,
       },
     })
   }