@lobehub/chat 1.49.9 → 1.49.11

package/src/app/(main)/settings/provider/features/ProviderConfig/Checker.tsx

@@ -4,7 +4,7 @@ import { CheckCircleFilled } from '@ant-design/icons';
 import { Alert, Highlighter } from '@lobehub/ui';
 import { Button } from 'antd';
 import { useTheme } from 'antd-style';
-import { memo, useState } from 'react';
+import { ReactNode, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -38,86 +38,107 @@ const Error = memo<{ error: ChatMessageError }>(({ error }) => {
   );
 });
 
+export type CheckErrorRender = (props: {
+  defaultError: ReactNode;
+  error?: ChatMessageError;
+  setError: (error?: ChatMessageError) => void;
+}) => ReactNode;
+
 interface ConnectionCheckerProps {
+  checkErrorRender?: CheckErrorRender;
   model: string;
   provider: string;
 }
 
-const Checker = memo<ConnectionCheckerProps>(({ model, provider }) => {
-  const { t } = useTranslation('setting');
+const Checker = memo<ConnectionCheckerProps>(
+  ({ model, provider, checkErrorRender: CheckErrorRender }) => {
+    const { t } = useTranslation('setting');
 
-  const disabled = useAiInfraStore(aiProviderSelectors.isProviderConfigUpdating(provider));
+    const disabled = useAiInfraStore(aiProviderSelectors.isProviderConfigUpdating(provider));
 
-  const [loading, setLoading] = useState(false);
-  const [pass, setPass] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [pass, setPass] = useState(false);
 
-  const theme = useTheme();
-  const [error, setError] = useState<ChatMessageError | undefined>();
+    const theme = useTheme();
+    const [error, setError] = useState<ChatMessageError | undefined>();
 
-  const checkConnection = async () => {
-    let isError = false;
+    const checkConnection = async () => {
+      let isError = false;
 
-    await chatService.fetchPresetTaskResult({
-      onError: (_, rawError) => {
-        setError(rawError);
-        setPass(false);
-        isError = true;
-      },
-      onFinish: async (value) => {
-        if (!isError && value) {
-          setError(undefined);
-          setPass(true);
-        } else {
+      await chatService.fetchPresetTaskResult({
+        onError: (_, rawError) => {
+          setError(rawError);
           setPass(false);
-          setError({
-            body: value,
-            message: t('response.ConnectionCheckFailed', { ns: 'error' }),
-            type: 'ConnectionCheckFailed',
-          });
-        }
-      },
-      onLoadingChange: (loading) => {
-        setLoading(loading);
-      },
-      params: {
-        messages: [
-          {
-            content: '你好',
-            role: 'user',
-          },
-        ],
-        model,
-        provider,
-      },
-      trace: {
-        sessionId: `connection:${provider}`,
-        topicId: model,
-        traceName: TraceNameMap.ConnectivityChecker,
-      },
-    });
-  };
-  const isMobile = useIsMobile();
+          isError = true;
+        },
+        onFinish: async (value) => {
+          if (!isError && value) {
+            setError(undefined);
+            setPass(true);
+          } else {
+            setPass(false);
+            setError({
+              body: value,
+              message: t('response.ConnectionCheckFailed', { ns: 'error' }),
+              type: 'ConnectionCheckFailed',
+            });
+          }
+        },
+        onLoadingChange: (loading) => {
+          setLoading(loading);
+        },
+        params: {
+          messages: [
+            {
+              content: 'hello',
+              role: 'user',
+            },
+          ],
+          model,
+          provider,
+        },
+        trace: {
+          sessionId: `connection:${provider}`,
+          topicId: model,
+          traceName: TraceNameMap.ConnectivityChecker,
+        },
+      });
+    };
+    const isMobile = useIsMobile();
 
-  return (
-    <Flexbox align={isMobile ? 'flex-start' : 'flex-end'} gap={8}>
-      <Flexbox align={'center'} direction={isMobile ? 'horizontal-reverse' : 'horizontal'} gap={12}>
-        {pass && (
-          <Flexbox gap={4} horizontal>
-            <CheckCircleFilled
-              style={{
-                color: theme.colorSuccess,
-              }}
-            />
-            {t('llm.checker.pass')}
-          </Flexbox>
-        )}
-        <Button disabled={disabled} loading={loading} onClick={checkConnection}>
-          {t('llm.checker.button')}
-        </Button>
+    const defaultError = error ? <Error error={error as ChatMessageError} /> : null;
+
+    const errorContent = CheckErrorRender ? (
+      <CheckErrorRender defaultError={defaultError} error={error} setError={setError} />
+    ) : (
+      defaultError
+    );
+
+    return (
+      <Flexbox align={isMobile ? 'flex-start' : 'flex-end'} gap={8}>
+        <Flexbox
+          align={'center'}
+          direction={isMobile ? 'horizontal-reverse' : 'horizontal'}
+          gap={12}
+        >
+          {pass && (
+            <Flexbox gap={4} horizontal>
+              <CheckCircleFilled
+                style={{
+                  color: theme.colorSuccess,
+                }}
+              />
+              {t('llm.checker.pass')}
+            </Flexbox>
+          )}
+          <Button disabled={disabled} loading={loading} onClick={checkConnection}>
+            {t('llm.checker.button')}
+          </Button>
+        </Flexbox>
+        {error && errorContent}
       </Flexbox>
-      {error && <Error error={error} />}
-    </Flexbox>
-  );
-});
+    );
+  },
+);
 
 export default Checker;

package/src/app/(main)/settings/provider/features/ProviderConfig/index.tsx

@@ -25,7 +25,7 @@ import {
 } from '@/types/aiProvider';
 
 import { KeyVaultsConfigKey, LLMProviderApiTokenKey, LLMProviderBaseUrlKey } from '../../const';
-import Checker from './Checker';
+import Checker, { CheckErrorRender } from './Checker';
 import EnableSwitch from './EnableSwitch';
 import { SkeletonInput } from './SkeletonInput';
 import UpdateProviderInfo from './UpdateProviderInfo';
@@ -91,7 +91,7 @@ const useStyles = createStyles(({ css, prefixCls, responsive, token }) => ({
 export interface ProviderConfigProps extends Omit<AiProviderDetailItem, 'enabled' | 'source'> {
   apiKeyItems?: FormItemProps[];
   canDeactivate?: boolean;
-  checkerItem?: FormItemProps;
+  checkErrorRender?: CheckErrorRender;
   className?: string;
   enabled?: boolean;
   extra?: ReactNode;
@@ -113,9 +113,9 @@ const ProviderConfig = memo<ProviderConfigProps>(
     id,
     settings,
     checkModel,
-    checkerItem,
     logo,
     className,
+    checkErrorRender,
     name,
     showAceGcm = true,
     extra,
@@ -271,16 +271,16 @@ const ProviderConfig = memo<ProviderConfigProps>(
       endpointItem,
       clientFetchItem,
       showChecker
-        ? (checkerItem ?? {
+        ? {
             children: isLoading ? (
               <Skeleton.Button active />
             ) : (
-              <Checker model={checkModel!} provider={id} />
+              <Checker checkErrorRender={checkErrorRender} model={checkModel!} provider={id} />
             ),
             desc: t('providerModels.config.checker.desc'),
             label: t('providerModels.config.checker.title'),
             minWidth: undefined,
-          })
+          }
         : undefined,
       showAceGcm && isServerMode && aceGcmItem,
     ].filter(Boolean) as FormItemProps[];

package/src/components/FormAction/index.tsx

@@ -0,0 +1,66 @@
+import { Avatar } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ReactNode, memo } from 'react';
+import { Center, CenterProps, Flexbox } from 'react-layout-kit';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    border: 1px solid ${token.colorSplit};
+    border-radius: 8px;
+    color: ${token.colorText};
+    background: ${token.colorBgContainer};
+  `,
+  desc: css`
+    color: ${token.colorTextTertiary};
+    text-align: center;
+  `,
+  form: css`
+    width: 100%;
+    max-width: 300px;
+  `,
+}));
+
+const FormAction = memo<
+  {
+    animation?: boolean;
+    avatar: ReactNode;
+    background?: string;
+    description: string;
+    title: string;
+  } & CenterProps
+>(
+  ({
+    children,
+    background,
+    title,
+    description,
+    avatar,
+    animation,
+    className,
+    gap = 16,
+    ...rest
+  }) => {
+    const { cx, styles, theme } = useStyles();
+
+    return (
+      <Center className={cx(styles.form, className)} gap={gap} {...rest}>
+        <Avatar
+          animation={animation}
+          avatar={avatar}
+          background={background ?? theme.colorFillContent}
+          gap={12}
+          size={80}
+        />
+        <Flexbox gap={8} width={'100%'}>
+          <Flexbox style={{ fontSize: 18, fontWeight: 'bold', textAlign: 'center' }}>
+            {title}
+          </Flexbox>
+          <Flexbox className={styles.desc}>{description}</Flexbox>
+        </Flexbox>
+        {children}
+      </Center>
+    );
+  },
+);
+
+export default FormAction;

package/src/components/OllamaSetupGuide/index.tsx

@@ -0,0 +1,217 @@
+import { Highlighter, Snippet, TabsNav } from '@lobehub/ui';
+import { Steps } from 'antd';
+import { createStyles } from 'antd-style';
+import Link from 'next/link';
+import { readableColor } from 'polished';
+import { memo } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, prefixCls, token }) => ({
+  steps: css`
+    margin-block-start: 32px;
+    &.${prefixCls}-steps-small .${prefixCls}-steps-item-title {
+      margin-block-end: 16px;
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .${prefixCls}-steps-item-description {
+      margin-block-end: 24px;
+    }
+
+    .${prefixCls}-steps-icon {
+      color: ${readableColor(token.colorPrimary)} !important;
+    }
+  `,
+}));
+
+const SetupGuide = memo(() => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('components');
+  return (
+    <TabsNav
+      items={[
+        {
+          children: (
+            <Steps
+              className={styles.steps}
+              direction={'vertical'}
+              items={[
+                {
+                  description: (
+                    <Trans i18nKey={'OllamaSetupGuide.install.description'} ns={'components'}>
+                      请确认你已经开启 Ollama ，如果没有安装 Ollama ，请前往官网
+                      <Link href={'https://ollama.com/download'}>下载</Link>
+                    </Trans>
+                  ),
+                  status: 'process',
+                  title: t('OllamaSetupGuide.install.title'),
+                },
+                {
+                  description: (
+                    <Flexbox gap={8}>
+                      {t('OllamaSetupGuide.cors.description')}
+
+                      <Flexbox gap={8}>
+                        {t('OllamaSetupGuide.cors.macos')}
+                        <Snippet language={'bash'}>
+                          {/* eslint-disable-next-line react/no-unescaped-entities */}
+                          launchctl setenv OLLAMA_ORIGINS "*"
+                        </Snippet>
+                        {t('OllamaSetupGuide.cors.reboot')}
+                      </Flexbox>
+                    </Flexbox>
+                  ),
+                  status: 'process',
+                  title: t('OllamaSetupGuide.cors.title'),
+                },
+              ]}
+              size={'small'}
+            />
+          ),
+          key: 'macos',
+          label: 'macOS',
+        },
+        {
+          children: (
+            <Steps
+              className={styles.steps}
+              direction={'vertical'}
+              items={[
+                {
+                  description: (
+                    <Trans i18nKey={'OllamaSetupGuide.install.description'} ns={'components'}>
+                      请确认你已经开启 Ollama ，如果没有安装 Ollama ，请前往官网
+                      <Link href={'https://ollama.com/download'}>下载</Link>
+                    </Trans>
+                  ),
+                  status: 'process',
+                  title: t('OllamaSetupGuide.install.title'),
+                },
+                {
+                  description: (
+                    <Flexbox gap={8}>
+                      {t('OllamaSetupGuide.cors.description')}
+                      <div>{t('OllamaSetupGuide.cors.windows')}</div>
+                      <div>{t('OllamaSetupGuide.cors.reboot')}</div>
+                    </Flexbox>
+                  ),
+                  status: 'process',
+                  title: t('OllamaSetupGuide.cors.title'),
+                },
+              ]}
+              size={'small'}
+            />
+          ),
+          key: 'windows',
+          label: t('OllamaSetupGuide.install.windowsTab'),
+        },
+        {
+          children: (
+            <Steps
+              className={styles.steps}
+              direction={'vertical'}
+              items={[
+                {
+                  description: (
+                    <Flexbox gap={8}>
+                      {t('OllamaSetupGuide.install.linux.command')}
+                      <Snippet language={'bash'}>
+                        curl -fsSL https://ollama.com/install.sh | sh
+                      </Snippet>
+                      <div>
+                        <Trans i18nKey={'OllamaSetupGuide.install.linux.manual'} ns={'components'}>
+                          或者，你也可以参考
+                          <Link href={'https://github.com/ollama/ollama/blob/main/docs/linux.md'}>
+                            Linux 手动安装指南
+                          </Link>
+                          。
+                        </Trans>
+                      </div>
+                    </Flexbox>
+                  ),
+                  status: 'process',
+                  title: t('OllamaSetupGuide.install.title'),
+                },
+                {
+                  description: (
+                    <Flexbox gap={8}>
+                      <div>{t('OllamaSetupGuide.cors.description')}</div>
+
+                      <div>{t('OllamaSetupGuide.cors.linux.systemd')}</div>
+                      {/* eslint-disable-next-line react/no-unescaped-entities */}
+                      <Snippet language={'bash'}> sudo systemctl edit ollama.service</Snippet>
+                      {t('OllamaSetupGuide.cors.linux.env')}
+                      <Highlighter
+                        // eslint-disable-next-line react/no-children-prop
+                        children={`[Service]
+
+Environment="OLLAMA_ORIGINS=*"`}
+                        fileName={'ollama.service'}
+                        fullFeatured
+                        language={'bash'}
+                        showLanguage
+                      />
+                      {t('OllamaSetupGuide.cors.linux.reboot')}
+                    </Flexbox>
+                  ),
+                  status: 'process',
+                  title: t('OllamaSetupGuide.cors.title'),
+                },
+              ]}
+              size={'small'}
+            />
+          ),
+          key: 'linux',
+          label: 'Linux',
+        },
+        {
+          children: (
+            <Steps
+              className={styles.steps}
+              direction={'vertical'}
+              items={[
+                {
+                  description: (
+                    <Flexbox gap={8}>
+                      {t('OllamaSetupGuide.install.description')}
+                      <div>{t('OllamaSetupGuide.install.docker')}</div>
+                      <Snippet language={'bash'}>docker pull ollama/ollama</Snippet>
+                    </Flexbox>
+                  ),
+                  status: 'process',
+                  title: t('OllamaSetupGuide.install.title'),
+                },
+                {
+                  description: (
+                    <Flexbox gap={8}>
+                      {t('OllamaSetupGuide.cors.description')}
+                      <Highlighter
+                        fileName={'ollama.service'}
+                        fullFeatured
+                        language={'bash'}
+                        showLanguage
+                      >
+                        {/* eslint-disable-next-line react/no-unescaped-entities */}
+                        docker run -d --gpus=all -v ollama:/root/.ollama -e OLLAMA_ORIGINS="*" -p
+                        11434:11434 --name ollama ollama/ollama
+                      </Highlighter>
+                    </Flexbox>
+                  ),
+                  status: 'process',
+                  title: t('OllamaSetupGuide.cors.title'),
+                },
+              ]}
+              size={'small'}
+            />
+          ),
+          key: 'docker',
+          label: 'Docker',
+        },
+      ]}
+    />
+  );
+});
+
+export default SetupGuide;

package/src/config/aiModels/ollama.ts

@@ -1,6 +1,18 @@
 import { AIChatModelCard } from '@/types/aiModel';
 
 const ollamaChatModels: AIChatModelCard[] = [
+  {
+    abilities: {
+      reasoning: true,
+    },
+    contextWindowTokens: 65_536,
+    description:
+      'DeepSeek-R1 是一款强化学习（RL）驱动的推理模型，解决了模型中的重复性和可读性问题。在 RL 之前，DeepSeek-R1 引入了冷启动数据，进一步优化了推理性能。它在数学、代码和推理任务中与 OpenAI-o1 表现相当，并且通过精心设计的训练方法，提升了整体效果。',
+    displayName: 'DeepSeek R1',
+    enabled: true,
+    id: 'deepseek-r1',
+    type: 'chat',
+  },
   {
     abilities: {
       functionCall: true,
@@ -9,7 +21,6 @@ const ollamaChatModels: AIChatModelCard[] = [
     description:
       'Llama 3.1 是 Meta 推出的领先模型，支持高达 405B 参数，可应用于复杂对话、多语言翻译和数据分析领域。',
     displayName: 'Llama 3.1 8B',
-    enabled: true,
     id: 'llama3.1',
     type: 'chat',
   },
@@ -34,7 +45,6 @@ const ollamaChatModels: AIChatModelCard[] = [
     description:
       'Code Llama 是一款专注于代码生成和讨论的 LLM，结合广泛的编程语言支持，适用于开发者环境。',
     displayName: 'Code Llama 7B',
-    enabled: true,
     id: 'codellama',
     type: 'chat',
   },
@@ -69,7 +79,6 @@ const ollamaChatModels: AIChatModelCard[] = [
     contextWindowTokens: 128_000,
     description: 'QwQ 是一个实验研究模型，专注于提高 AI 推理能力。',
     displayName: 'QwQ 32B',
-    enabled: true,
     id: 'qwq',
     releasedAt: '2024-11-28',
     type: 'chat',
@@ -95,7 +104,6 @@ const ollamaChatModels: AIChatModelCard[] = [
     contextWindowTokens: 128_000,
     description: 'Qwen2.5 是阿里巴巴的新一代大规模语言模型，以优异的性能支持多元化的应用需求。',
     displayName: 'Qwen2.5 7B',
-    enabled: true,
     id: 'qwen2.5',
     type: 'chat',
   },
@@ -195,7 +203,6 @@ const ollamaChatModels: AIChatModelCard[] = [
     contextWindowTokens: 128_000,
     description: 'Phi-3 是微软推出的轻量级开放模型，适用于高效集成和大规模知识推理。',
     displayName: 'Phi-3 3.8B',
-    enabled: true,
     id: 'phi3',
     type: 'chat',
   },
@@ -211,7 +218,6 @@ const ollamaChatModels: AIChatModelCard[] = [
     description:
       'WizardLM 2 是微软AI提供的语言模型，在复杂对话、多语言、推理和智能助手领域表现尤为出色。',
     displayName: 'WizardLM 2 7B',
-    enabled: true,
     id: 'wizardlm2',
     type: 'chat',
   },
@@ -227,7 +233,6 @@ const ollamaChatModels: AIChatModelCard[] = [
     contextWindowTokens: 32_768,
     description: 'MathΣtral 专为科学研究和数学推理设计，提供有效的计算能力和结果解释。',
     displayName: 'MathΣtral 7B',
-    enabled: true,
     id: 'mathstral',
     type: 'chat',
   },
@@ -238,7 +243,6 @@ const ollamaChatModels: AIChatModelCard[] = [
     contextWindowTokens: 32_768,
     description: 'Mistral 是 Mistral AI 发布的 7B 模型，适合多变的语言处理需求。',
     displayName: 'Mistral 7B',
-    enabled: true,
     id: 'mistral',
     type: 'chat',
   },
@@ -250,7 +254,6 @@ const ollamaChatModels: AIChatModelCard[] = [
     description:
       'Mixtral 是 Mistral AI 的专家模型，具有开源权重，并在代码生成和语言理解方面提供支持。',
     displayName: 'Mixtral 8x7B',
-    enabled: true,
     id: 'mixtral',
     type: 'chat',
   },
@@ -270,7 +273,6 @@ const ollamaChatModels: AIChatModelCard[] = [
     description:
       'Mixtral Large 是 Mistral 的旗舰模型，结合代码生成、数学和推理的能力，支持 128k 上下文窗口。',
     displayName: 'Mixtral Large 123B',
-    enabled: true,
     id: 'mistral-large',
     type: 'chat',
   },
@@ -281,7 +283,6 @@ const ollamaChatModels: AIChatModelCard[] = [
     contextWindowTokens: 128_000,
     description: 'Mistral Nemo 由 Mistral AI 和 NVIDIA 合作推出，是高效性能的 12B 模型。',
     displayName: 'Mixtral Nemo 12B',
-    enabled: true,
     id: 'mistral-nemo',
     type: 'chat',
   },
@@ -289,7 +290,6 @@ const ollamaChatModels: AIChatModelCard[] = [
     contextWindowTokens: 32_768,
     description: 'Codestral 是 Mistral AI 的首款代码模型，为代码生成任务提供优异支持。',
     displayName: 'Codestral 22B',
-    enabled: true,
     id: 'codestral',
     type: 'chat',
   },
@@ -297,7 +297,6 @@ const ollamaChatModels: AIChatModelCard[] = [
     contextWindowTokens: 8192,
     description: 'Aya 23 是 Cohere 推出的多语言模型，支持 23 种语言，为多元化语言应用提供便利。',
     displayName: 'Aya 23 8B',
-    enabled: true,
     id: 'aya',
     type: 'chat',
   },
@@ -315,7 +314,6 @@ const ollamaChatModels: AIChatModelCard[] = [
     contextWindowTokens: 131_072,
     description: 'Command R 是优化用于对话和长上下文任务的LLM，特别适合动态交互与知识管理。',
     displayName: 'Command R 35B',
-    enabled: true,
     id: 'command-r',
     type: 'chat',
   },
@@ -326,7 +324,6 @@ const ollamaChatModels: AIChatModelCard[] = [
     contextWindowTokens: 131_072,
     description: 'Command R+ 是一款高性能的大型语言模型，专为真实企业场景和复杂应用而设计。',
     displayName: 'Command R+ 104B',
-    enabled: true,
     id: 'command-r-plus',
     type: 'chat',
   },
@@ -334,7 +331,6 @@ const ollamaChatModels: AIChatModelCard[] = [
     contextWindowTokens: 32_768,
     description: 'DeepSeek V2 是高效的 Mixture-of-Experts 语言模型，适用于经济高效的处理需求。',
     displayName: 'DeepSeek V2 16B',
-    enabled: true,
     id: 'deepseek-v2',
     type: 'chat',
   },
@@ -350,7 +346,6 @@ const ollamaChatModels: AIChatModelCard[] = [
     description:
       'DeepSeek Coder V2 是开源的混合专家代码模型，在代码任务方面表现优异，与 GPT4-Turbo 相媲美。',
     displayName: 'DeepSeek Coder V2 16B',
-    enabled: true,
     id: 'deepseek-coder-v2',
     type: 'chat',
   },
@@ -369,7 +364,6 @@ const ollamaChatModels: AIChatModelCard[] = [
     contextWindowTokens: 4096,
     description: 'LLaVA 是结合视觉编码器和 Vicuna 的多模态模型，用于强大的视觉和语言理解。',
     displayName: 'LLaVA 7B',
-    enabled: true,
     id: 'llava',
     type: 'chat',
   },
@@ -401,7 +395,6 @@ const ollamaChatModels: AIChatModelCard[] = [
     description:
       'MiniCPM-V 是 OpenBMB 推出的新一代多模态大模型，具备卓越的 OCR 识别和多模态理解能力，支持广泛的应用场景。',
     displayName: 'MiniCPM-V 8B',
-    enabled: true,
     id: 'minicpm-v',
     type: 'chat',
   },

package/src/config/modelProviders/ollama.ts

@@ -326,6 +326,7 @@ const Ollama: ModelProviderCard = {
       vision: true,
     },
   ],
+  checkModel: 'deepseek-r1',
   defaultShowBrowserRequest: true,
   description:
     'Ollama 提供的模型广泛涵盖代码生成、数学运算、多语种处理和对话互动等领域，支持企业级和本地化部署的多样化需求。',