fix model select seprate fim chat urls

package.json

@@ -2,7 +2,7 @@
   "name": "twinny",
   "displayName": "twinny - AI Code Completion and Chat",
   "description": "Locally hosted AI code completion plugin for vscode",
-  "version": "3.10.6",
+  "version": "3.10.7",
   "icon": "assets/icon.png",
   "keywords": [
     "code-inference",

src/common/constants.ts

@@ -65,7 +65,8 @@ export const MESSAGE_KEY = {
 export const SETTING_KEY = {
   fimModelName: 'fimModelName',
   chatModelName: 'chatModelName',
-  apiProvider: 'apiProvider'
+  apiProvider: 'apiProvider',
+  apiProviderFim: 'apiProviderFim'
 }
 
 export const CONTEXT_NAME = {

src/extension/ollama-service.ts

@@ -1,30 +1,40 @@
 import { workspace } from 'vscode'
 import { Logger } from '../common/logger'
-import { ApiModels } from '../common/types'
 
 export class OllamaService {
-  private logger : Logger
+  private logger: Logger
   private _config = workspace.getConfiguration('twinny')
   private _apiHostname = this._config.get('apiHostname') as string
   private _chatApiPort = this._config.get('chatApiPort') as string
   private _fimApiPort = this._config.get('fimApiPort') as string
   private _useTls = this._config.get('useTls') as boolean
-  private _baseUrl: string
+  private _baseUrlChat: string
+  private _baseUrlFim: string
 
-  constructor () {
+  constructor() {
     this.logger = new Logger()
-    const useTls = this._useTls;
-    const port = this._chatApiPort || this._fimApiPort
-    const protocol = useTls ? 'https' : 'http';
-    this._baseUrl = `${protocol}://${this._apiHostname}:${port}`
+    const useTls = this._useTls
+    const protocol = useTls ? 'https' : 'http'
+    this._baseUrlChat = `${protocol}://${this._apiHostname}:${this._chatApiPort}`
+    this._baseUrlFim = `${protocol}://${this._apiHostname}:${this._fimApiPort}`
   }
 
-  public fetchModels = async (resource = '/api/tags'): Promise<ApiModels> => {
-    const res = await fetch(this._baseUrl + resource)
-    if (!res.ok) {
-      this.logger.error(new Error(`${res.status}`))
-      throw Error('Failed to get ollama models')
+  public fetchModels = async (resource = '/api/tags') => {
+    const chatModelsRes = (await fetch(this._baseUrlChat + resource)) || []
+    const fimModelsRes = await fetch(this._baseUrlFim + resource)
+    const { models: chatModels } = await chatModelsRes.json()
+    const { models: fimModels } = await fimModelsRes.json()
+    const models = new Set()
+    if (Array.isArray(chatModels)) {
+      for (const model of chatModels) {
+        models.add(model)
+      }
     }
-    return await res.json()
+    if (Array.isArray(fimModels)) {
+      for (const model of fimModels) {
+        models.add(model)
+      }
+    }
+    return Array.from(models)
   }
 }

src/extension/providers/sidebar.ts

@@ -123,7 +123,7 @@ export class SidebarProvider implements vscode.WebviewViewProvider {
       this.view?.webview.postMessage({
         type: MESSAGE_NAME.twinnyFetchOllamaModels,
         value: {
-          data: models.models
+          data: models
         }
       } as ServerMessage<ApiModel[]>)
     } catch (e) {

src/webview/chat.tsx

@@ -13,12 +13,10 @@ import {
   ASSISTANT,
   MESSAGE_KEY,
   MESSAGE_NAME,
-  SETTING_KEY,
   USER
 } from '../common/constants'
 
 import {
-  useConfigurationSetting,
   useLanguage,
   useSelection,
   useTheme,
@@ -56,9 +54,7 @@ export const Chat = () => {
   const [messages, setMessages] = useState<MessageType[] | undefined>()
   const [completion, setCompletion] = useState<MessageType | null>()
   const [showModelSelect, setShowModelSelect] = useState<boolean>(false)
-  const { configurationSetting: apiProvider } = useConfigurationSetting(
-    SETTING_KEY.apiProvider
-  )
+
 
   const markdownRef = useRef<HTMLDivElement>(null)
   const autoScrollContext = useWorkSpaceContext<boolean>(MESSAGE_KEY.autoScroll)
@@ -291,7 +287,7 @@ export const Chat = () => {
           onSelect={scrollBottom}
           language={language}
         />
-        {showModelSelect && <ModelSelect apiProvider={apiProvider as string} />}
+        {showModelSelect && <ModelSelect />}
         <div className={styles.chatOptions}>
           <div>
             <VSCodeButton

src/webview/model-select.tsx

@@ -4,19 +4,21 @@ import {
   VSCodeTextField
 } from '@vscode/webview-ui-toolkit/react'
 
-import { useModels } from './hooks'
+import { useConfigurationSetting, useModels } from './hooks'
 import { getModelShortName } from './utils'
 import { SETTING_KEY } from '../common/constants'
 
 import styles from './index.module.css'
 import { ApiProviders } from '../common/types'
 
-interface ModelSelectProps {
-  apiProvider: string | undefined
-}
-
-export const ModelSelect = ({ apiProvider }: ModelSelectProps) => {
+export const ModelSelect = () => {
   const { models, saveModel, fimModelName, chatModelName } = useModels()
+  const { configurationSetting: apiProvider } = useConfigurationSetting(
+    SETTING_KEY.apiProvider
+  )
+  const { configurationSetting: apiProviderFim } = useConfigurationSetting(
+    SETTING_KEY.apiProviderFim
+  )
 
   const handleOnChangeChat = (e: unknown): void => {
     const event = e as React.ChangeEvent<HTMLSelectElement>
@@ -30,57 +32,62 @@ export const ModelSelect = ({ apiProvider }: ModelSelectProps) => {
     saveModel(selectedValue)(SETTING_KEY.fimModelName)
   }
 
-  // TODO: Refactor to map
-  if (apiProvider !== ApiProviders.Ollama) {
-    return (
-      <form className={styles.modelSelect}>
+  const isOllamaChat = apiProvider === ApiProviders.Ollama
+  const isOllamaFim = apiProviderFim === ApiProviders.Ollama
+
+  return (
+    <div className={styles.modelSelect}>
+      {!isOllamaChat ? (
+        <form className={styles.modelSelect}>
+          <div>
+            <label>Chat</label>
+            <VSCodeTextField
+              type="text"
+              value={chatModelName || ''}
+              onChange={handleOnChangeChat}
+            />
+          </div>
+        </form>
+      ) : (
         <div>
           <label>Chat</label>
-          <VSCodeTextField
-            type="text"
-            value={chatModelName || ''}
-            onChange={handleOnChangeChat}
-          />
+          <VSCodeDropdown onChange={handleOnChangeChat} value={chatModelName}>
+            {models?.map((model, index) => {
+              return (
+                <option value={model.name} key={`${index}`}>
+                  {getModelShortName(model.name)}
+                </option>
+              )
+            })}
+          </VSCodeDropdown>
         </div>
+      )}
+      {!isOllamaFim ? (
+        <form className={styles.modelSelect}>
+          <div>
+            <label>Fill-in-middle</label>
+            <VSCodeTextField
+              type="text"
+              value={fimModelName || ''}
+              onChange={handleOnChangeFim}
+            />
+          </div>
+        </form>
+      ) : (
         <div>
           <label>Fill-in-middle</label>
-          <VSCodeTextField
-            type="text"
-            value={fimModelName || ''}
-            onChange={handleOnChangeFim}
-          />
+          <VSCodeDropdown onChange={handleOnChangeFim} value={fimModelName}>
+            {models?.map((model, index) => {
+              return (
+                <option value={model.name} key={`${index}`}>
+                  {getModelShortName(model.name)}
+                </option>
+              )
+            })}
+          </VSCodeDropdown>
+          <VSCodeDivider />
         </div>
-      </form>
-    )
-  }
-
-  return (
-    <div className={styles.modelSelect}>
-      <div>
-        <label>Chat</label>
-        <VSCodeDropdown onChange={handleOnChangeChat} value={chatModelName}>
-          {models?.map((model, index) => {
-            return (
-              <option value={model.name} key={`${index}`}>
-                {getModelShortName(model.name)}
-              </option>
-            )
-          })}
-        </VSCodeDropdown>
-      </div>
-      <div>
-        <label>Fill-in-middle</label>
-        <VSCodeDropdown onChange={handleOnChangeFim} value={fimModelName}>
-          {models?.map((model, index) => {
-            return (
-              <option value={model.name} key={`${index}`}>
-                {getModelShortName(model.name)}
-              </option>
-            )
-          })}
-        </VSCodeDropdown>
-        <VSCodeDivider />
-      </div>
+      )}
     </div>
   )
 }