add model name/select to provider header

twinnydotdev · Apr 21, 2024 · 90f5c44 · 90f5c44
1 parent 59faa50
commit 90f5c44
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 34 deletions.
diff --git a/src/extension/cache.ts b/src/extension/cache.ts
@@ -39,7 +39,7 @@ export class LRUCache<T = string> {
   }
 
   normalize(src: string): string {
-    return src.split('\n').join('').replace(/\s+/gm, '').replace(' ', '')
+    return src.split('\n').join('').replace(/\s+/g, '').replace(/\s/g, '')
   }
 
   getKey(prefixSuffix: PrefixSuffix): string {

diff --git a/src/webview/model-select.tsx b/src/webview/model-select.tsx
@@ -17,19 +17,14 @@ export const ModelSelect = ({ model, models, setModel }: Props) => {
   }
 
   return (
-    <div>
-      <div>
-        <label htmlFor="modelName">Model name*</label>
-      </div>
-      <VSCodeDropdown onChange={handleOnChange} value={model}>
-        {models?.map((model, index) => {
-          return (
-            <option value={model.name} key={`${index}`}>
-              {getModelShortName(model.name)}
-            </option>
-          )
-        })}
-      </VSCodeDropdown>
-    </div>
+    <VSCodeDropdown onChange={handleOnChange} value={model}>
+      {models?.map((model, index) => {
+        return (
+          <option value={model.name} key={`${index}`}>
+            {getModelShortName(model.name)}
+          </option>
+        )
+      })}
+    </VSCodeDropdown>
   )
 }
diff --git a/src/webview/provider-select.tsx b/src/webview/provider-select.tsx
@@ -43,7 +43,7 @@ export const ProviderSelect = () => {
             .sort((a, b) => a.modelName.localeCompare(b.modelName))
             .map((provider, index) => (
               <VSCodeOption key={index} value={provider.id}>
-                {`${provider.label} (${provider.provider})`}
+                {`${provider.label} (${provider.modelName})`}
               </VSCodeOption>
             ))}
         </VSCodeDropdown>
@@ -59,7 +59,7 @@ export const ProviderSelect = () => {
             .sort((a, b) => a.modelName.localeCompare(b.modelName))
             .map((provider, index) => (
               <VSCodeOption key={index} value={provider.id}>
-                {`${provider.label} (${provider.provider})`}
+                {`${provider.label} (${provider.modelName})`}
               </VSCodeOption>
             ))}
         </VSCodeDropdown>

diff --git a/src/webview/providers.module.css b/src/webview/providers.module.css
@@ -33,6 +33,10 @@
   flex-wrap: wrap;
 }
 
+.providerHeader, .providerForm vscode-dropdown {
+  flex-grow: 1;
+}
+
 .providerHeader h4 {
   margin: 0;
 }
@@ -52,6 +56,8 @@
 
 .providerForm {
   width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .providerForm div {
@@ -68,6 +74,11 @@
   gap: 5px;
 }
 
+.providerHeader vscode-dropdown {
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
 .providerHeader svg {
   width: 20px;
 }
diff --git a/src/webview/providers.tsx b/src/webview/providers.tsx
@@ -14,13 +14,16 @@ import styles from './providers.module.css'
 import { TwinnyProvider } from '../extension/provider-manager'
 import {
   DEFAULT_PROVIDER_FORM_VALUES,
-  FIM_TEMPLATE_FORMAT,
+  FIM_TEMPLATE_FORMAT
 } from '../common/constants'
 import { ModelSelect } from './model-select'
 
 export const Providers = () => {
   const [showForm, setShowForm] = React.useState(false)
   const [provider, setProvider] = React.useState<TwinnyProvider | undefined>()
+  const { models } = useOllamaModels()
+  const hasOllamaModels = !!models?.length
+  const { updateProvider } = useProviders()
   const { providers, removeProvider, copyProvider, resetProviders } =
     useProviders()
 
@@ -50,6 +53,19 @@ export const Providers = () => {
     resetProviders()
   }
 
+  const handleSetModel = (provider: TwinnyProvider, model: string) => {
+    updateProvider({
+      ...provider,
+      modelName: model
+    })
+  }
+
+  const handleChange = (provider: TwinnyProvider, e: unknown) => {
+    const event = e as unknown as React.ChangeEvent<HTMLInputElement>
+    const { value } = event.target
+    handleSetModel(provider, value)
+  }
+
   return (
     <div>
       <h3>Providers</h3>
@@ -69,7 +85,27 @@ export const Providers = () => {
               {Object.values(providers).map((provider, index) => (
                 <div className={styles.provider} key={index}>
                   <div className={styles.providerHeader}>
-                    <h4>{provider.label}</h4>
+                    {provider.provider === ApiProviders.Ollama &&
+                      hasOllamaModels && (
+                        <ModelSelect
+                          models={models}
+                          model={provider.modelName}
+                          setModel={(model: string) =>
+                            handleSetModel(provider, model)
+                          }
+                        />
+                      )}
+                    {provider.provider !== ApiProviders.Ollama && (
+                      <VSCodeTextField
+                        required
+                        name="modelName"
+                        onChange={(e) => {
+                          handleChange(provider, e)
+                        }}
+                        value={provider.modelName}
+                        placeholder='Applicable for some providers like "Ollama"'
+                      ></VSCodeTextField>
+                    )}
                     <div className={styles.providerActions}>
                       <VSCodeButton
                         appearance="icon"
@@ -99,6 +135,9 @@ export const Providers = () => {
                   </div>
                   <VSCodeDivider />
                   <div className={styles.providerDetails}>
+                    <div>
+                      <b>Label:</b> {provider.label}
+                    </div>
                     <div>
                       <b>Provider:</b> {provider.provider}
                     </div>
@@ -110,9 +149,6 @@ export const Providers = () => {
                         <b>Fim Template:</b> {provider.fimTemplate}
                       </div>
                     )}
-                    <div>
-                      <b>Model:</b> {provider.modelName}
-                    </div>
                     <div>
                       <b>Hostname:</b> {provider.apiHostname}
                     </div>
@@ -271,13 +307,18 @@ function ProviderForm({ onClose, provider }: ProviderFormProps) {
         </div>
 
         {formState.provider === ApiProviders.Ollama && hasOllamaModels && (
-          <ModelSelect
-            models={models}
-            model={formState.modelName}
-            setModel={(model: string) => {
-              setFormState({ ...formState, modelName: model })
-            }}
-          />
+          <div>
+            <div>
+              <label htmlFor="apiHostname">Model name*</label>
+            </div>
+            <ModelSelect
+              models={models}
+              model={formState.modelName}
+              setModel={(model: string) => {
+                setFormState({ ...formState, modelName: model })
+              }}
+            />
+          </div>
         )}
 
         {formState.provider !== ApiProviders.Ollama && (

diff --git a/src/webview/utils.ts b/src/webview/utils.ts
@@ -1,6 +1,4 @@
-import {
-  EMPTY_MESAGE,
-} from '../common/constants'
+import { EMPTY_MESAGE } from '../common/constants'
 import { CodeLanguage, supportedLanguages } from '../common/languages'
 import { LanguageType, ServerMessage } from '../common/types'
 
@@ -57,8 +55,8 @@ export const kebabToSentence = (kebabStr: string) => {
 export const getLineBreakCount = (str: string) => str.split('\n').length
 
 export const getModelShortName = (name: string) => {
-  if (name.length > 32) {
-    return `${name.substring(0, 15)}...${name.substring(name.length - 16)}`
+  if (name.length > 25) {
+    return `${name.substring(0, 10)}...${name.substring(name.length - 10)}`
   }
   return name
 }