@lobehub/chat 0.135.4 → 0.137.0

package/src/components/ModelIcon/index.tsx

@@ -5,6 +5,7 @@ import {
   Claude,
   Gemini,
   Gemma,
+  LLaVA,
   Meta,
   Minimax,
   Mistral,
@@ -29,6 +30,7 @@ const ModelIcon = memo<ModelProviderIconProps>(({ model, size = 12 }) => {
   if (model.includes('claude')) return <Claude.Avatar size={size} />;
   if (model.includes('titan')) return <Aws.Avatar size={size} />;
   if (model.includes('llama')) return <Meta.Avatar size={size} />;
+  if (model.includes('llava')) return <LLaVA.Avatar size={size} />;
   if (model.includes('gemini')) return <Gemini.Avatar size={size} />;
   if (model.includes('gemma')) return <Gemma.Avatar size={size} />;
   if (model.includes('qwen')) return <Tongyi.Avatar background={Tongyi.colorPrimary} size={size} />;

package/src/components/ModelTag/ModelIcon.tsx

@@ -5,6 +5,7 @@ import {
   Claude,
   Gemini,
   Gemma,
+  LLaVA,
   Meta,
   Minimax,
   Mistral,
@@ -28,6 +29,7 @@ const ModelIcon = memo<ModelIconProps>(({ model, size = 12 }) => {
   if (model.includes('claude')) return <Claude size={size} />;
   if (model.includes('titan')) return <Aws size={size} />;
   if (model.includes('llama')) return <Meta size={size} />;
+  if (model.includes('llava')) return <LLaVA size={size} />;
   if (model.includes('gemini')) return <Gemini size={size} />;
   if (model.includes('gemma')) return <Gemma.Simple size={size} />;
   if (model.includes('moonshot')) return <Moonshot size={size} />;

package/src/config/modelProviders/ollama.ts

@@ -92,6 +92,20 @@ const Ollama: ModelProviderCard = {
       tokens: 4800,
       vision: false,
     },
+    {
+      displayName: 'Mixtral 8x7B',
+      functionCall: false,
+      id: 'mixtral',
+      tokens: 32_000,
+      vision: false,
+    },
+    {
+      displayName: 'Qwen Chat 4B',
+      functionCall: false,
+      id: 'qwen',
+      tokens: 32_768,
+      vision: false,
+    },
     {
       displayName: 'Qwen Chat 7B',
       functionCall: false,

package/src/config/server/app.ts

@@ -58,9 +58,13 @@ export const getAppConfig = () => {
     PLUGIN_SETTINGS: process.env.PLUGIN_SETTINGS,
 
     ENABLE_OAUTH_SSO: !!process.env.ENABLE_OAUTH_SSO,
+    SSO_PROVIDERS: process.env.SSO_PROVIDERS || 'auth0',
     AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID || '',
     AUTH0_CLIENT_SECRET: process.env.AUTH0_CLIENT_SECRET || '',
     AUTH0_ISSUER: process.env.AUTH0_ISSUER || '',
+    AZURE_AD_CLIENT_ID: process.env.AZURE_AD_CLIENT_ID || '',
+    AZURE_AD_CLIENT_SECRET: process.env.AZURE_AD_CLIENT_SECRET || '',
+    AZURE_AD_TENANT_ID: process.env.AZURE_AD_TENANT_ID || '',
     NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET || '',
 
     ENABLE_LANGFUSE: process.env.ENABLE_LANGFUSE === '1',

package/src/config/server/provider.ts

@@ -47,6 +47,7 @@ declare global {
 
       // Ollama Provider;
       OLLAMA_PROXY_URL?: string;
+      OLLAMA_CUSTOM_MODELS?: string;
     }
   }
 }
@@ -116,5 +117,6 @@ export const getProviderConfig = () => {
 
     ENABLE_OLLAMA: !!process.env.OLLAMA_PROXY_URL,
     OLLAMA_PROXY_URL: process.env.OLLAMA_PROXY_URL || '',
+    OLLAMA_CUSTOM_MODELS: process.env.OLLAMA_CUSTOM_MODELS,
   };
 };

package/src/features/Conversation/Error/InvalidOllamaModel/index.tsx

@@ -0,0 +1,138 @@
+import { Ollama } from '@lobehub/icons';
+import { Button, Input, Progress } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+import useSWR from 'swr';
+
+import { ollamaService } from '@/services/ollama';
+import { useChatStore } from '@/store/chat';
+
+import { ErrorActionContainer, FormAction } from '../style';
+import { useDownloadMonitor } from './useDownloadMonitor';
+
+interface OllamaModelFormProps {
+  id: string;
+  model: string;
+}
+
+const OllamaModelForm = memo<OllamaModelFormProps>(({ id, model }) => {
+  const { t } = useTranslation('error');
+  const { t: settingT } = useTranslation('setting');
+
+  const [modelToPull, setModelToPull] = useState(model);
+  const [completed, setCompleted] = useState(0);
+  const [total, setTotal] = useState(0);
+  const { remainingTime, downloadSpeed } = useDownloadMonitor(total, completed);
+  const percent = useMemo(() => {
+    return total ? Number(((completed / total) * 100).toFixed(0)) : 0;
+  }, [completed, total]);
+
+  const [delAndRegenerateMessage, deleteMessage] = useChatStore((s) => [
+    s.delAndRegenerateMessage,
+    s.deleteMessage,
+  ]);
+  const theme = useTheme();
+
+  const { mutate, isLoading: isDownloading } = useSWR(
+    [id, modelToPull],
+    async ([, model]) => {
+      const generator = await ollamaService.pullModel(model);
+      for await (const progress of generator) {
+        if (progress.completed) {
+          setCompleted(progress.completed);
+          setTotal(progress.total);
+        }
+      }
+      return null;
+    },
+    {
+      onSuccess: () => {
+        delAndRegenerateMessage(id);
+      },
+      revalidateOnFocus: false,
+      revalidateOnMount: false,
+    },
+  );
+
+  return (
+    <Center gap={16} style={{ maxWidth: 300, width: '100%' }}>
+      <FormAction
+        avatar={<Ollama color={theme.colorPrimary} size={64} />}
+        description={
+          isDownloading ? settingT('ollama.download.desc') : t('unlock.model.Ollama.description')
+        }
+        title={
+          isDownloading
+            ? settingT('ollama.download.title', { model: modelToPull })
+            : t('unlock.model.Ollama.title')
+        }
+      >
+        {!isDownloading && (
+          <Input
+            onChange={(e) => {
+              setModelToPull(e.target.value);
+            }}
+            value={modelToPull}
+          />
+        )}
+      </FormAction>
+      {isDownloading && (
+        <Flexbox flex={1} gap={8} width={'100%'}>
+          <Progress
+            percent={percent}
+            showInfo
+            strokeColor={theme.colorSuccess}
+            trailColor={theme.colorSuccessBg}
+          />
+          <Flexbox
+            distribution={'space-between'}
+            horizontal
+            style={{ color: theme.colorTextDescription, fontSize: 12 }}
+          >
+            <span>
+              {settingT('ollama.download.remainingTime')}: {remainingTime}
+            </span>
+            <span>
+              {settingT('ollama.download.speed')}: {downloadSpeed}
+            </span>
+          </Flexbox>
+        </Flexbox>
+      )}
+      <Flexbox gap={12} width={'100%'}>
+        <Button
+          block
+          loading={isDownloading}
+          onClick={() => {
+            mutate();
+          }}
+          style={{ marginTop: 8 }}
+          type={'primary'}
+        >
+          {t('unlock.model.Ollama.confirm')}
+        </Button>
+        <Button
+          onClick={() => {
+            deleteMessage(id);
+          }}
+        >
+          {t('unlock.closeMessage')}
+        </Button>
+      </Flexbox>
+    </Center>
+  );
+});
+
+interface InvalidOllamaModelProps {
+  id: string;
+  model: string;
+}
+
+const InvalidOllamaModel = memo<InvalidOllamaModelProps>(({ id, model }) => (
+  <ErrorActionContainer>
+    <OllamaModelForm id={id} model={model} />
+  </ErrorActionContainer>
+));
+
+export default InvalidOllamaModel;

package/src/features/Conversation/Error/InvalidOllamaModel/useDownloadMonitor.ts

@@ -0,0 +1,48 @@
+import { useEffect, useMemo, useState } from 'react';
+
+const formatSpeed = (speed: number): string => {
+  const kbPerSecond = speed / 1024;
+  if (kbPerSecond < 1024) {
+    return `${kbPerSecond.toFixed(1)} KB/s`;
+  } else {
+    const mbPerSecond = kbPerSecond / 1024;
+    return `${mbPerSecond.toFixed(1)} MB/s`;
+  }
+};
+
+const formatTime = (timeInSeconds: number): string => {
+  if (timeInSeconds < 60) {
+    return `${timeInSeconds.toFixed(1)} s`;
+  } else if (timeInSeconds < 3600) {
+    return `${(timeInSeconds / 60).toFixed(1)} min`;
+  } else {
+    return `${(timeInSeconds / 3600).toFixed(2)} h`;
+  }
+};
+
+export const useDownloadMonitor = (totalSize: number, completedSize: number) => {
+  const [startTime, setStartTime] = useState<number>(Date.now());
+  const [downloadSpeed, setDownloadSpeed] = useState<string>('0 KB/s');
+  const [remainingTime, setRemainingTime] = useState<string>('-');
+
+  const isReady = useMemo(() => completedSize > 0, [completedSize]);
+
+  useEffect(() => {
+    const currentTime = Date.now();
+    // mark as start download
+    if (isReady) {
+      const elapsedTime = (currentTime - startTime) / 1000; // in seconds
+      const speed = completedSize / elapsedTime; // in bytes per second
+
+      const remainingSize = totalSize - completedSize;
+      const time = remainingSize / speed; // in seconds
+
+      setDownloadSpeed(formatSpeed(speed));
+      setRemainingTime(formatTime(time));
+    } else {
+      setStartTime(currentTime);
+    }
+  }, [isReady, completedSize]);
+
+  return { downloadSpeed, remainingTime };
+};

package/src/features/Conversation/Error/OAuthForm.tsx

@@ -57,7 +57,7 @@ const OAuthForm = memo<{ id: string }>(({ id }) => {
             block
             icon={<Icon icon={ScanFace} />}
             loading={status === 'loading'}
-            onClick={() => signIn('auth0')}
+            onClick={() => signIn()}
             style={{ marginTop: 8 }}
             type={'primary'}
           >

package/src/features/Conversation/Error/OllamaBizError.tsx

@@ -0,0 +1,34 @@
+import { memo } from 'react';
+
+import { ChatMessage } from '@/types/message';
+
+import ErrorJsonViewer from './ErrorJsonViewer';
+import InvalidModel from './InvalidOllamaModel';
+
+interface OllamaError {
+  code: string | null;
+  message: string;
+  param?: any;
+  type: string;
+}
+
+interface OllamaErrorResponse {
+  error: OllamaError;
+}
+
+const UNRESOLVED_MODEL_REGEXP = /model '([\w+,-_]+)' not found/;
+
+const OllamaBizError = memo<ChatMessage>(({ error, id }) => {
+  const errorBody: OllamaErrorResponse = (error as any)?.body;
+
+  const errorMessage = errorBody.error?.message;
+
+  const unresolvedModel = errorMessage?.match(UNRESOLVED_MODEL_REGEXP)?.[1];
+  if (unresolvedModel) {
+    return <InvalidModel id={id} model={unresolvedModel} />;
+  }
+
+  return <ErrorJsonViewer error={error} id={id} />;
+});
+
+export default OllamaBizError;

package/src/features/Conversation/Error/index.tsx

@@ -9,6 +9,7 @@ import { ChatMessage, ChatMessageError } from '@/types/message';
 import ErrorJsonViewer from './ErrorJsonViewer';
 import InvalidAPIKey from './InvalidAPIKey';
 import InvalidAccessCode from './InvalidAccessCode';
+import OllamaBizError from './OllamaBizError';
 import OpenAiBizError from './OpenAiBizError';
 import PluginSettings from './PluginSettings';
 
@@ -58,6 +59,10 @@ const ErrorMessageExtra = memo<{ data: ChatMessage }>(({ data }) => {
       return <OpenAiBizError {...data} />;
     }
 
+    case AgentRuntimeErrorType.OllamaBizError: {
+      return <OllamaBizError {...data} />;
+    }
+
     case ChatErrorType.InvalidAccessCode: {
       return <InvalidAccessCode id={data.id} provider={data.error?.body?.provider} />;
     }

package/src/features/Conversation/Error/style.tsx

@@ -36,14 +36,14 @@ export const FormAction = memo<{
   const { styles, theme } = useStyles();
 
   return (
-    <Center gap={16} style={{ maxWidth: 300 }}>
+    <Center gap={16} style={{ maxWidth: 300, width: '100%' }}>
       <Avatar
         avatar={avatar}
         background={background ?? theme.colorFillContent}
         gap={12}
         size={80}
       />
-      <Flexbox style={{ fontSize: 20 }}>{title}</Flexbox>
+      <Flexbox style={{ fontSize: 20, textAlign: 'center' }}>{title}</Flexbox>
       <Flexbox className={styles.desc}>{description}</Flexbox>
       {children}
     </Center>

package/src/locales/default/error.ts

@@ -84,6 +84,7 @@ export default {
 
     InvalidOllamaArgs: 'Ollama 配置不正确，请检查 Ollama 配置后重试',
     OllamaBizError: '请求 Ollama 服务出错，请根据以下信息排查或重试',
+    OllamaServiceUnavailable: '未检测到 Ollama 服务，请检查是否正常启动',
 
     AgentRuntimeError: 'Lobe 语言模型运行时执行出错，请根据以下信息排查或重试',
     /* eslint-enable */
@@ -134,6 +135,13 @@ export default {
     },
     closeMessage: '关闭提示',
     confirm: '确认并重试',
+    model: {
+      Ollama: {
+        confirm: '下载',
+        description: '输入你的 Ollama 模型标签，完成即可继续会话',
+        title: '下载指定的 Ollama 模型',
+      },
+    },
     oauth: {
       description: '管理员已开启统一登录认证，点击下方按钮登录，即可解锁应用',
       success: '登录成功',

package/src/locales/default/setting.ts

@@ -195,6 +195,14 @@ export default {
     },
     waitingForMore: '更多模型正在 <1>计划接入</1> 中，敬请期待 ✨',
   },
+  ollama: {
+    download: {
+      desc: 'Ollama 正在下载该模型，请尽量不要关闭本页面。重新下载时将会中断处继续',
+      remainingTime: '剩余时间',
+      speed: '下载速度',
+      title: '正在下载模型 {{model}} ',
+    },
+  },
   plugin: {
     addTooltip: '自定义插件',
     clearDeprecated: '移除无效插件',
@@ -410,6 +418,7 @@ export default {
     placeholder: '请输入助手的标识符，需要是唯一的，比如 web-development',
     tooltips: '分享到助手市场',
   },
+
   tab: {
     about: '关于',
     agent: '默认助手',
@@ -417,7 +426,6 @@ export default {
     llm: '语言模型',
     tts: '语音服务',
   },
-
   tools: {
     builtins: {
       groupName: '内置插件',

package/src/services/__tests__/ollama.test.ts

@@ -0,0 +1,26 @@
+import { Mock, describe, expect, it, vi } from 'vitest';
+
+import { ollamaService } from '../ollama';
+
+vi.stubGlobal('fetch', vi.fn());
+
+describe('OllamaService', () => {
+  describe('list models', async () => {
+    it('should make a GET request with the correct payload', async () => {
+      (fetch as Mock).mockResolvedValueOnce(new Response(JSON.stringify({ models: [] })));
+
+      expect(await ollamaService.getModels()).toEqual({ models: [] });
+
+      expect(global.fetch).toHaveBeenCalled();
+    });
+
+    it('should make a GET request with the error', async () => {
+      const mockResponse = new Response(null, { status: 503 });
+      (fetch as Mock).mockResolvedValueOnce(mockResponse);
+
+      await expect(ollamaService.getModels()).rejects.toThrow();
+
+      expect(global.fetch).toHaveBeenCalled();
+    });
+  });
+});

package/src/services/ollama.ts

@@ -0,0 +1,64 @@
+import { ListResponse, Ollama as OllamaBrowser, ProgressResponse } from 'ollama/browser';
+
+import { createErrorResponse } from '@/app/api/errorResponse';
+import { ModelProvider } from '@/libs/agent-runtime';
+import { useGlobalStore } from '@/store/global';
+import { modelProviderSelectors } from '@/store/global/selectors';
+import { ChatErrorType } from '@/types/fetch';
+import { getMessageError } from '@/utils/fetch';
+
+const DEFAULT_BASE_URL = 'http://127.0.0.1:11434/v1';
+
+class OllamaService {
+  getHost = (): string => {
+    const endpoint = modelProviderSelectors.ollamaProxyUrl(useGlobalStore.getState());
+    const url = new URL(endpoint || DEFAULT_BASE_URL);
+    return url.host;
+  };
+
+  getOllamaClient = () => {
+    return new OllamaBrowser({ host: this.getHost() });
+  };
+
+  pullModel = async (model: string): Promise<AsyncGenerator<ProgressResponse>> => {
+    let response: Response | AsyncGenerator<ProgressResponse>;
+    try {
+      response = await this.getOllamaClient().pull({ insecure: true, model, stream: true });
+      return response;
+    } catch {
+      response = createErrorResponse(ChatErrorType.OllamaServiceUnavailable, {
+        host: this.getHost(),
+        message: 'please check whether your ollama service is available',
+        provider: ModelProvider.Ollama,
+      });
+    }
+
+    if (!response.ok) {
+      const messageError = await getMessageError(response);
+      throw messageError;
+    }
+    return response.json();
+  };
+
+  getModels = async (): Promise<ListResponse> => {
+    let response: Response | ListResponse;
+    try {
+      const response = await this.getOllamaClient().list();
+      return response;
+    } catch {
+      response = createErrorResponse(ChatErrorType.OllamaServiceUnavailable, {
+        host: this.getHost(),
+        message: 'please check whether your ollama service is available',
+        provider: ModelProvider.Ollama,
+      });
+    }
+
+    if (!response.ok) {
+      const messageError = await getMessageError(response);
+      throw messageError;
+    }
+    return response.json();
+  };
+}
+
+export const ollamaService = new OllamaService();

package/src/store/global/slices/settings/selectors/modelProvider.ts

@@ -48,9 +48,6 @@ const mistralAPIKey = (s: GlobalStore) => modelProvider(s).mistral.apiKey;
 const enableMoonshot = (s: GlobalStore) => modelProvider(s).moonshot.enabled;
 const moonshotAPIKey = (s: GlobalStore) => modelProvider(s).moonshot.apiKey;
 
-const enableOllamaConfigInSettings = (s: GlobalStore) =>
-  s.serverConfig.languageModel?.ollama?.enabled || false;
-
 const enableOllama = (s: GlobalStore) => modelProvider(s).ollama.enabled;
 const ollamaProxyUrl = (s: GlobalStore) => modelProvider(s).ollama.endpoint;
 
@@ -118,27 +115,32 @@ const processChatModels = (
 };
 
 const modelSelectList = (s: GlobalStore): ModelProviderCard[] => {
-  const string = [
+  const openaiModelString = [
     s.serverConfig.customModelName,
     currentSettings(s).languageModel.openAI.customModelName,
   ]
     .filter(Boolean)
     .join(',');
 
-  const modelConfig = parseModelString(string);
+  const openaiModelConfig = parseModelString(openaiModelString);
 
-  const chatModels = processChatModels(modelConfig);
+  const openaiChatModels = processChatModels(openaiModelConfig);
 
-  const ollamaModelConfig = parseModelString(
+  const ollamaModelString = [
+    s.serverConfig.languageModel?.ollama?.customModelName,
     currentSettings(s).languageModel.ollama.customModelName,
-  );
+  ]
+    .filter(Boolean)
+    .join(',');
+
+  const ollamaModelConfig = parseModelString(ollamaModelString);
 
   const ollamaChatModels = processChatModels(ollamaModelConfig, OllamaProvider.chatModels);
 
   return [
     {
       ...OpenAIProvider,
-      chatModels,
+      chatModels: openaiChatModels,
     },
     // { ...azureModelList(s), enabled: enableAzure(s) },
     { ...ZhiPuProvider, enabled: enableZhipu(s) },
@@ -216,7 +218,6 @@ export const modelProviderSelectors = {
   moonshotAPIKey,
 
   // Ollama
-  enableOllamaConfigInSettings,
   enableOllama,
   ollamaProxyUrl,
 

package/src/store/middleware/createHyperStorage/index.ts

@@ -1,5 +1,4 @@
-import { PersistStorage } from 'zustand/middleware';
-import { StorageValue } from 'zustand/middleware/persist';
+import { PersistStorage, StorageValue } from 'zustand/middleware';
 
 import { createIndexedDB } from './indexedDB';
 import { createKeyMapper } from './keyMapper';

package/src/store/middleware/createHyperStorage/indexedDB.ts

@@ -1,5 +1,5 @@
 import { createStore, delMany, getMany, setMany } from 'idb-keyval';
-import { StorageValue } from 'zustand/middleware/persist';
+import { StorageValue } from 'zustand/middleware';
 
 export const createIndexedDB = <State extends any>(dbName: string = 'indexedDB') => ({
   getItem: async <T extends State>(name: string): Promise<StorageValue<T> | undefined> => {

package/src/store/middleware/createHyperStorage/localStorage.ts

@@ -1,4 +1,4 @@
-import { StorageValue } from 'zustand/middleware/persist';
+import { StorageValue } from 'zustand/middleware';
 
 export const createLocalStorage = <State extends any>() => ({
   getItem: <T extends State>(name: string): StorageValue<T> | undefined => {

package/src/store/middleware/createHyperStorage/urlStorage.ts

@@ -1,5 +1,5 @@
 import { isEmpty } from 'lodash-es';
-import { StorageValue } from 'zustand/middleware/persist';
+import { StorageValue } from 'zustand/middleware';
 
 interface UrlSearchHelper {
   getUrlSearch: () => string;

package/src/types/fetch.ts

@@ -7,6 +7,7 @@ export const ChatErrorType = {
   InvalidAccessCode: 'InvalidAccessCode', // 密码无效
   OpenAIBizError: 'OpenAIBizError', // OpenAI 返回的业务错误
   NoOpenAIAPIKey: 'NoOpenAIAPIKey',
+  OllamaServiceUnavailable: 'OllamaServiceUnavailable', // 未启动/检测到 Ollama 服务
 
   // ******* 客户端错误 ******* //
   BadRequest: 400,

package/tsconfig.json

@@ -10,7 +10,7 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",