moeru-ai · kwaa · Feb 1, 2025 · Jan 31, 2025
diff --git a/src/components/input-area.tsx b/src/components/input-area.tsx
@@ -10,14 +10,14 @@ import { type SubmitHandler, useForm } from 'react-hook-form'
 import type { charactersTable } from '../db/schema'
 
 import { useMessages, useSetMessages } from '../context/messages'
-import { useChatModel } from '../hooks/use-model'
+import { useChatProvider } from '../hooks/use-model'
 
 export interface Inputs {
   content: string
 }
 
 export const InputArea = ({ character }: { character?: typeof charactersTable.$inferSelect }) => {
-  const [chatModel] = useChatModel()
+  const chatProvider = useChatProvider()
   const messages = useMessages()
   const setMessages = useSetMessages()
 
@@ -39,7 +39,7 @@ export const InputArea = ({ character }: { character?: typeof charactersTable.$i
     setIsTyping(true)
 
     const { text } = await generateText({
-      ...ollama.chat(chatModel as string),
+      ...ollama.chat(chatProvider.chatModel ?? ''),
       messages: msg,
     })
 

diff --git a/src/components/settings/settings-chat.tsx b/src/components/settings/settings-chat.tsx
@@ -2,22 +2,20 @@ import { Icon } from '@iconify/react'
 import { Badge, Select, Separator, Text, TextField } from '@radix-ui/themes'
 import { useOnline } from '@uiw/react-use-online'
 
-import { useChatModel, useEmbedModel } from '../../hooks/use-model'
+import { useChatProvider } from '../../hooks/use-model'
 import { useListModels } from '../../hooks/xsai/use-list-models'
 import { DebouncedTextField } from '../debounced-textfield.tsx'
 import * as Sheet from '../ui/sheet'
 
 export const SettingsChat = () => {
-  const [chatModel, setChatModel] = useChatModel()
-  const [embedModel, setEmbedModel] = useEmbedModel()
+  const chatProvider = useChatProvider()
+
   const isOnline = useOnline()
 
   const badgeColor = isOnline ? 'green' : 'red'
   const badgeText = isOnline ? 'Online' : 'Offline'
 
-  const baseURL = 'http://localhost:11434/v1/'
-
-  const { models } = useListModels({ baseURL })
+  const { models } = useListModels({ baseURL: chatProvider.baseURL })
 
   return (
     <>
@@ -35,18 +33,21 @@ export const SettingsChat = () => {
             {badgeText}
           </Badge>
         </Text>
-        <Select.Root defaultValue="ollama">
+        <Select.Root
+          onValueChange={p => chatProvider.update({ provider: p as typeof chatProvider.provider })}
+          value={chatProvider.provider}
+        >
           <Select.Trigger style={{ width: '100%' }} />
           <Select.Content position="popper">
             <Select.Item value="ollama">
               <Icon icon="simple-icons:ollama" inline style={{ marginInlineEnd: '0.5rem' }} />
               Ollama (localhost)
             </Select.Item>
-            <Select.Item disabled value="openai">
+            <Select.Item value="openai">
               <Icon icon="simple-icons:openai" inline style={{ marginInlineEnd: '0.5rem' }} />
               OpenAI
             </Select.Item>
-            <Select.Item disabled value="openai-compatible">
+            <Select.Item value="openai-compatible">
               <Icon icon="simple-icons:openai" inline style={{ marginInlineEnd: '0.5rem' }} />
               OpenAI-compatible
             </Select.Item>
@@ -60,7 +61,11 @@ export const SettingsChat = () => {
         <Text as="div" mb="1" weight="bold">
           Base URL
         </Text>
-        <DebouncedTextField disabled placeholder="https://openai.com/v1/">
+        <DebouncedTextField
+          disabled={!chatProvider.isEditable('baseURL')}
+          onBlurValueChange={baseURL => chatProvider.update({ baseURL })}
+          value={chatProvider.baseURL}
+        >
           <TextField.Slot />
         </DebouncedTextField>
       </label>
@@ -69,7 +74,11 @@ export const SettingsChat = () => {
         <Text as="div" mb="1" weight="bold">
           API Key
         </Text>
-        <DebouncedTextField disabled placeholder="sk-abcdefghijklmnop123">
+        <DebouncedTextField
+          disabled={!chatProvider.isEditable('apiKey')}
+          onBlurValueChange={apiKey => chatProvider.update({ apiKey })}
+          value={chatProvider.apiKey}
+        >
           <TextField.Slot />
         </DebouncedTextField>
       </label>
@@ -80,12 +89,10 @@ export const SettingsChat = () => {
         <Text as="div" mb="1" weight="bold">
           Chat Model
         </Text>
-        <Select.Root defaultValue={chatModel ?? undefined} onValueChange={setChatModel}>
+        <Select.Root onValueChange={chatModel => chatProvider.update({ chatModel })} value={chatProvider.chatModel ?? undefined}>
           <Select.Trigger placeholder="Pick a model" style={{ width: '100%' }} />
           <Select.Content position="popper">
-            {models.map(model => (
-              <Select.Item key={model.id} value={model.id}>{model.id}</Select.Item>
-            ))}
+            {models.map(model => (<Select.Item key={model.id} value={model.id}>{model.id}</Select.Item>))}
           </Select.Content>
         </Select.Root>
       </label>
@@ -94,12 +101,10 @@ export const SettingsChat = () => {
         <Text as="div" mb="1" weight="bold">
           Embed Model
         </Text>
-        <Select.Root defaultValue={embedModel ?? undefined} onValueChange={setEmbedModel}>
+        <Select.Root onValueChange={embedModel => chatProvider.update({ embedModel })} value={chatProvider.embedModel ?? undefined}>
           <Select.Trigger placeholder="Pick a model" style={{ width: '100%' }} />
           <Select.Content position="popper">
-            {models.map(model => (
-              <Select.Item key={model.id} value={model.id}>{model.id}</Select.Item>
-            ))}
+            {models.map(model => (<Select.Item key={model.id} value={model.id}>{model.id}</Select.Item>))}
           </Select.Content>
         </Select.Root>
       </label>

diff --git a/src/hooks/use-model.ts b/src/hooks/use-model.ts
@@ -1,5 +1,97 @@
 import { useLocalStorage } from 'foxact/use-local-storage'
 
-export const useChatModel = () => useLocalStorage<string>('moetalk/xsai/providers/chat-model')
+export interface ChatOptions {
+  apiKey: string
+  baseURL: string
+  chatModel: null | string
+  embedModel: null | string
+  provider: 'ollama' | 'openai' | 'openai-compatible'
+}
 
-export const useEmbedModel = () => useLocalStorage<string>('moetalk/xsai/providers/embed-model')
+interface Configuration {
+  apiKey?: ConfigurationField<ChatOptions['apiKey']>
+  baseURL?: ConfigurationField<ChatOptions['baseURL']>
+  chatModel?: ConfigurationField<ChatOptions['chatModel']>
+  embedModel?: ConfigurationField<ChatOptions['embedModel']>
+}
+
+interface ConfigurationField<T> {
+  defaultValue: T
+  /**
+   * @default true
+   */
+  editable?: boolean
+}
+
+type UpdatableFields = Exclude<keyof ChatOptions, 'provider'>
+
+const fieldDefaultValue: ChatOptions = {
+  apiKey: '',
+  baseURL: '',
+  chatModel: null,
+  embedModel: null,
+  provider: 'ollama',
+}
+
+export type Providers = ChatOptions['provider']
+
+const configurations: Record<Providers, Configuration> = {
+  'ollama': {
+    baseURL: {
+      defaultValue: 'http://localhost:11434/v1/',
+    },
+  },
+  'openai': {
+    baseURL: {
+      defaultValue: 'https://api.openai.com/v1/',
+      editable: false,
+    },
+  },
+  'openai-compatible': {},
+}
+
+export interface ChatOptionsState extends ChatOptions {
+  isEditable: (field: UpdatableFields) => boolean
+
+  update: (params: Partial<ChatOptions>) => void
+}
+
+const fieldIsEditable = (provider: ChatOptionsState['provider'], field: UpdatableFields): boolean => {
+  const e = configurations[provider][field]?.editable
+  return e === undefined ? true : e
+}
+
+const mapValidConfiguration = (input: Partial<ChatOptions>): ChatOptions => {
+  const provider = input.provider ?? fieldDefaultValue.provider
+  const c = configurations[provider]
+
+  const forFieldValue = <K extends UpdatableFields>(field: K, value: ChatOptions[K] | undefined): ChatOptions[K] => {
+    let defaultValue = c[field]?.defaultValue as ChatOptions[K] | undefined
+    defaultValue = defaultValue === undefined ? fieldDefaultValue[field] : defaultValue
+    return value === undefined || !(c[field]?.editable ?? true) ? defaultValue : value
+  }
+
+  return {
+    apiKey: forFieldValue('apiKey', input.apiKey),
+    baseURL: forFieldValue('baseURL', input.baseURL),
+    chatModel: forFieldValue('chatModel', input.chatModel),
+    embedModel: forFieldValue('embedModel', input.embedModel),
+    provider,
+  }
+}
+
+export const useChatProvider = (): ChatOptionsState => {
+  const [_stored, setStored] = useLocalStorage<ChatOptions>('moetalk/xsai/providers/api-options')
+  const stored = mapValidConfiguration(_stored !== null ? _stored : { provider: 'ollama' })
+  const update: ChatOptionsState['update'] = (params) => {
+    // if the provider changes, reset all fields to default
+    if ((params.provider ?? stored.provider) !== stored.provider) {
+      setStored(mapValidConfiguration({ ...params }))
+    }
+    else {
+      setStored(mapValidConfiguration({ ...stored, ...params }))
+    }
+  }
+  const isEditable = (field: UpdatableFields) => fieldIsEditable(stored.provider, field)
+  return { isEditable, update, ...stored }
+}