feat: support ollama

blinko-space · Nov 28, 2024 · d70d42e · d70d42e
1 parent 2b8848e
commit d70d42e
Show file tree

Hide file tree

Showing 10 changed files with 232 additions and 97 deletions.
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "db-seed": "prisma db seed",
     "build-seed": "tsc -p tsconfig.seed.json",
     "db-reset": "prisma migrate dev reset",
-    "dev": "next dev -p 1111",
+    "dev": "next dev -p 1112",
     "dev:https": "ngrok http 1111",
     "build": "set NODE_ENV=production & next build",
     "vercel-build": "prisma generate && prisma migrate deploy && prisma db seed && next build",
@@ -37,6 +37,7 @@
     "@iconify/react": "^5.0.2",
     "@langchain/community": "^0.3.6",
     "@langchain/core": "^0.3.13",
+    "@langchain/ollama": "^0.1.2",
     "@langchain/openai": "^0.3.10",
     "@langchain/pinecone": "^0.1.1",
     "@langchain/textsplitters": "^0.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/BlinkoSettings/AiSetting.tsx b/src/components/BlinkoSettings/AiSetting.tsx
@@ -1,5 +1,5 @@
 import { observer } from "mobx-react-lite";
-import { Button, Card, Code, Input, Select, SelectItem, Switch, Tooltip } from "@nextui-org/react";
+import { Autocomplete, AutocompleteItem, Button, Card, Code, Input, Select, SelectItem, Switch, Tooltip } from "@nextui-org/react";
 import { RootStore } from "@/store";
 import { BlinkoStore } from "@/store/blinkoStore";
 import { PromiseCall } from "@/store/standard/PromiseState";
@@ -54,20 +54,21 @@ export const AiSetting = observer(() => {
         <Select
           radius="lg"
           selectedKeys={[blinko.config.value?.aiModelProvider!]}
-          onChange={e => {
-            blinko.config.value!.aiModelProvider = e.target.value as any
+          onSelectionChange={key => {
+            const value = Array.from(key)[0] as string
+            blinko.config.value!.aiModelProvider = value as any
             PromiseCall(api.config.update.mutate({
               key: 'aiModelProvider',
-              value: e.target.value
+              value: value
             }))
           }}
           size="sm"
           className="w-[200px]"
           label="Select Model Provider"
         >
           {ai.modelProviderSelect.map((item) => (
-            <SelectItem key={item.value ?? ''}>
-              {item.label}
+            <SelectItem key={item.value ?? ''} value={item.value} startContent={item.icon}>
+                {item.label}
             </SelectItem>
           ))}
         </Select>} />
@@ -76,26 +77,28 @@ export const AiSetting = observer(() => {
       ai.modelSelect[blinko.config.value?.aiModelProvider!] && <Item
         leftContent={<>{t('ai-model')}</>}
         rightContent={
-          <Select
+          <Autocomplete
             radius="lg"
-            selectedKeys={[blinko.config.value?.aiModel!]}
-            onChange={e => {
-              blinko.config.value!.aiModel = e.target.value
+            allowsCustomValue={true}
+            defaultSelectedKey={blinko.config.value?.aiModel!}
+            onSelectionChange={(key) => {
+              blinko.config.value!.aiModel = key as string
               PromiseCall(api.config.update.mutate({
                 key: 'aiModel',
-                value: e.target.value
+                value: key
               }))
             }}
             size="sm"
             className="w-[200px]"
             label="Select Model"
           >
             {ai.modelSelect[blinko.config.value?.aiModelProvider!]!.map((item) => (
-              <SelectItem key={item.value}>
+              <AutocompleteItem key={item.value} value={item.value}>
                 {item.label}
-              </SelectItem>
+              </AutocompleteItem>
             ))}
-          </Select>} />
+          </Autocomplete>
+        } />
     }
 
     {ai.embeddingSelect[blinko.config.value?.aiModelProvider!] && (
@@ -107,63 +110,68 @@ export const AiSetting = observer(() => {
           </div>} />}
         rightContent={
           <div className="flex w-full ml-auto justify-start">
-            <Select
+            <Autocomplete
               radius="lg"
-              selectedKeys={[blinko.config.value?.embeddingModel!]}
-              onChange={e => {
-                blinko.config.value!.embeddingModel = e.target.value
+              allowsCustomValue={true}
+              defaultSelectedKey={blinko.config.value?.embeddingModel!}
+              onSelectionChange={(key) => {
+                blinko.config.value!.embeddingModel = key as string
                 PromiseCall(api.config.update.mutate({
                   key: 'embeddingModel',
-                  value: e.target.value
+                  value: key
                 }))
               }}
               size="sm"
               className={`${isPc ? 'w-[250px]' : 'w-full'}`}
               label="Embedding Model"
             >
               {ai.embeddingSelect[blinko.config.value?.aiModelProvider!]!.map((item) => (
-                <SelectItem key={item.value}>
+                <AutocompleteItem key={item.value} value={item.value}>
                   {item.label}
-                </SelectItem>
+                </AutocompleteItem>
               ))}
-            </Select>
+            </Autocomplete>
           </div>
         } />
     )}
 
-    <Item
-      type={isPc ? 'row' : 'col'}
-      leftContent={<div className="flex flex-col ga-1">
-        <div>API Key</div>
-        <div className="text-desc text-xs">{t('user-custom-openai-api-key')}</div>
-      </div>}
-      rightContent={
-        <Input
-          size='sm'
-          label="API key"
-          variant="bordered"
-          className="w-full md:w-[300px]"
-          placeholder="Enter your api key"
-          value={store.apiKey}
-          onChange={e => { store.apiKey = e.target.value }}
-          onBlur={e => {
-            PromiseCall(api.config.update.mutate({
-              key: 'aiApiKey',
-              value: store.apiKey
-            }))
-          }}
-          endContent={
-            <button className="focus:outline-none" type="button" onClick={e => store.isVisible = !store.isVisible} aria-label="toggle password visibility">
-              {store.isVisible ? (
-                <Icon icon="mdi:eye-off" width="20" height="20" />
-              ) : (
-                <Icon icon="mdi:eye" width="20" height="20" />
-              )}
-            </button>
-          }
-          type={store.isVisible ? "text" : "password"}
-        />
-      } />
+    {
+      blinko.config.value?.aiModelProvider != 'Ollama' &&
+      <Item
+        type={isPc ? 'row' : 'col'}
+        leftContent={<div className="flex flex-col ga-1">
+          <div>API Key</div>
+          <div className="text-desc text-xs">{t('user-custom-openai-api-key')}</div>
+        </div>}
+        rightContent={
+          <Input
+            size='sm'
+            label="API key"
+            variant="bordered"
+            className="w-full md:w-[300px]"
+            placeholder="Enter your api key"
+            value={store.apiKey}
+            onChange={e => { store.apiKey = e.target.value }}
+            onBlur={e => {
+              PromiseCall(api.config.update.mutate({
+                key: 'aiApiKey',
+                value: store.apiKey
+              }))
+            }}
+            endContent={
+              <button className="focus:outline-none" type="button" onClick={e => store.isVisible = !store.isVisible} aria-label="toggle password visibility">
+                {store.isVisible ? (
+                  <Icon icon="mdi:eye-off" width="20" height="20" />
+                ) : (
+                  <Icon icon="mdi:eye" width="20" height="20" />
+                )}
+              </button>
+            }
+            type={store.isVisible ? "text" : "password"}
+          />
+        } />
+    }
+
     <Item
       type={isPc ? 'row' : 'col'}
       leftContent={<div className="flex flex-col gap-1">