@lobehub/chat 0.122.9 → 0.123.0

package/src/app/settings/llm/useSyncSettings.ts

@@ -0,0 +1,23 @@
+import { FormInstance } from 'antd/es/form/hooks/useForm';
+import { useEffect } from 'react';
+
+import { useGlobalStore } from '@/store/global';
+
+export const useSyncSettings = (form: FormInstance) => {
+  useEffect(() => {
+    // set the first time
+    form.setFieldsValue(useGlobalStore.getState().settings);
+
+    // sync with later updated settings
+    const unsubscribe = useGlobalStore.subscribe(
+      (s) => s.settings,
+      (settings) => {
+        form.setFieldsValue(settings);
+      },
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+};

package/src/chains/__tests__/langDetect.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { OpenAIChatStreamPayload } from '@/types/openai/chat';
+import { ChatStreamPayload } from '@/types/openai/chat';
 
 import { chainLangDetect } from '../langDetect';
 
@@ -12,7 +12,7 @@ describe('chainLangDetect', () => {
     const userContent = 'Hola';
 
     // 预期的返回值结构
-    const expectedPayload: Partial<OpenAIChatStreamPayload> = {
+    const expectedPayload: Partial<ChatStreamPayload> = {
       messages: [
         {
           content:

package/src/chains/__tests__/pickEmoji.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { OpenAIChatStreamPayload } from '@/types/openai/chat';
+import { ChatStreamPayload } from '@/types/openai/chat';
 
 import { chainPickEmoji } from '../pickEmoji';
 
@@ -12,7 +12,7 @@ describe('chainPickEmoji', () => {
     const userContent = '你是一名星际探索者';
 
     // 预期的返回值结构
-    const expectedPayload: Partial<OpenAIChatStreamPayload> = {
+    const expectedPayload: Partial<ChatStreamPayload> = {
       messages: [
         {
           content:

package/src/chains/langDetect.ts

@@ -1,6 +1,6 @@
-import { OpenAIChatStreamPayload } from '@/types/openai/chat';
+import { ChatStreamPayload } from '@/types/openai/chat';
 
-export const chainLangDetect = (content: string): Partial<OpenAIChatStreamPayload> => ({
+export const chainLangDetect = (content: string): Partial<ChatStreamPayload> => ({
   messages: [
     {
       content:

package/src/chains/pickEmoji.ts

@@ -1,10 +1,10 @@
-import { OpenAIChatStreamPayload } from '@/types/openai/chat';
+import { ChatStreamPayload } from '@/types/openai/chat';
 
 /**
  * pick emoji for user prompt
  * @param content
  */
-export const chainPickEmoji = (content: string): Partial<OpenAIChatStreamPayload> => ({
+export const chainPickEmoji = (content: string): Partial<ChatStreamPayload> => ({
   messages: [
     {
       content:

package/src/chains/summaryAgentName.ts

@@ -1,11 +1,11 @@
 import { globalHelpers } from '@/store/global/helpers';
-import { OpenAIChatStreamPayload } from '@/types/openai/chat';
+import { ChatStreamPayload } from '@/types/openai/chat';
 
 /**
  * summary agent name for user prompt
  * @param content
  */
-export const chainSummaryAgentName = (content: string): Partial<OpenAIChatStreamPayload> => ({
+export const chainSummaryAgentName = (content: string): Partial<ChatStreamPayload> => ({
   messages: [
     {
       content: `你是一名擅长起名的起名大师，名字需要有文学内涵，注重精炼和赋子意境，你需要将用户的描述总结为 10 个字以内的角色，并翻译为目标语言。格式要求如下：\n输入: {文本作为JSON引用字符串} [locale]\n输出: {角色名}`,

package/src/chains/summaryDescription.ts

@@ -1,7 +1,7 @@
 import { globalHelpers } from '@/store/global/helpers';
-import { OpenAIChatStreamPayload } from '@/types/openai/chat';
+import { ChatStreamPayload } from '@/types/openai/chat';
 
-export const chainSummaryDescription = (content: string): Partial<OpenAIChatStreamPayload> => ({
+export const chainSummaryDescription = (content: string): Partial<ChatStreamPayload> => ({
   messages: [
     {
       content: `你是一名擅长技能总结的助理，你需要将用户的输入的内容总结为一个角色技能简介，不超过 20 个字。内容需要确保信息清晰、逻辑清晰，并有效地传达角色的技能和经验，需要并翻译为目标语言:${globalHelpers.getCurrentLanguage()}。格式要求如下：\n输入: {文本作为JSON引用字符串} [locale]\n输出: {简介}`,

package/src/chains/summaryTags.ts

@@ -1,7 +1,7 @@
 import { globalHelpers } from '@/store/global/helpers';
-import { OpenAIChatStreamPayload } from '@/types/openai/chat';
+import { ChatStreamPayload } from '@/types/openai/chat';
 
-export const chainSummaryTags = (content: string): Partial<OpenAIChatStreamPayload> => ({
+export const chainSummaryTags = (content: string): Partial<ChatStreamPayload> => ({
   messages: [
     {
       content:

package/src/chains/summaryTitle.ts

@@ -1,11 +1,11 @@
 import { chatHelpers } from '@/store/chat/helpers';
 import { globalHelpers } from '@/store/global/helpers';
 import { LanguageModel } from '@/types/llm';
-import { OpenAIChatMessage, OpenAIChatStreamPayload } from '@/types/openai/chat';
+import { OpenAIChatMessage, ChatStreamPayload } from '@/types/openai/chat';
 
 export const chainSummaryTitle = async (
   messages: OpenAIChatMessage[],
-): Promise<Partial<OpenAIChatStreamPayload>> => {
+): Promise<Partial<ChatStreamPayload>> => {
   const lang = globalHelpers.getCurrentLanguage();
 
   const finalMessages: OpenAIChatMessage[] = [

package/src/chains/translate.ts

@@ -1,9 +1,9 @@
-import { OpenAIChatStreamPayload } from '@/types/openai/chat';
+import { ChatStreamPayload } from '@/types/openai/chat';
 
 export const chainTranslate = (
   content: string,
   targetLang: string,
-): Partial<OpenAIChatStreamPayload> => ({
+): Partial<ChatStreamPayload> => ({
   messages: [
     {
       content: '你是一名擅长翻译的助理，你需要将输入的语言翻译为目标语言',

package/src/components/ModelIcon/index.tsx

@@ -0,0 +1,37 @@
+import {
+  Anthropic,
+  Aws,
+  Baichuan,
+  ChatGLM,
+  Gemini,
+  Meta,
+  Minimax,
+  Mistral,
+  OpenAI,
+  Tongyi,
+} from '@lobehub/icons';
+import { memo } from 'react';
+
+interface ModelProviderIconProps {
+  model?: string;
+  size?: number;
+}
+
+const ModelIcon = memo<ModelProviderIconProps>(({ model, size = 12 }) => {
+  if (!model) return;
+
+  if (model.startsWith('gpt-3')) return <OpenAI.Avatar size={size} type={'gpt3'} />;
+  if (model.startsWith('gpt-4')) return <OpenAI.Avatar size={size} type={'gpt4'} />;
+  if (model.startsWith('glm')) return <ChatGLM.Avatar size={size} />;
+  if (model.includes('claude')) return <Anthropic.Avatar size={size} />;
+  if (model.includes('titan')) return <Aws.Avatar size={size} />;
+  if (model.includes('llama')) return <Meta.Avatar size={size} />;
+  if (model.includes('gemini')) return <Gemini.Avatar size={size} />;
+  if (model.includes('qwen')) return <Tongyi.Avatar background={Tongyi.colorPrimary} size={size} />;
+  if (model.includes('minmax')) return <Minimax.Avatar size={size} />;
+  if (model.includes('baichuan'))
+    return <Baichuan.Avatar background={Baichuan.colorPrimary} size={size} />;
+  if (model.includes('mistral')) return <Mistral.Avatar size={size} />;
+});
+
+export default ModelIcon;

package/src/components/ModelProviderIcon/index.tsx

@@ -0,0 +1,44 @@
+import { Azure, Bedrock, Google, OpenAI, Zhipu } from '@lobehub/icons';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+import { ModelProvider } from '@/libs/agent-runtime';
+
+interface ModelProviderIconProps {
+  provider?: string;
+}
+
+const ModelProviderIcon = memo<ModelProviderIconProps>(({ provider }) => {
+  switch (provider) {
+    case ModelProvider.ZhiPu: {
+      return <Zhipu size={20} />;
+    }
+
+    case ModelProvider.Bedrock: {
+      return <Bedrock size={20} />;
+    }
+
+    case ModelProvider.Google: {
+      return (
+        <Center height={20} width={20}>
+          <Google size={14} />
+        </Center>
+      );
+    }
+
+    case ModelProvider.Azure: {
+      return (
+        <Center height={20} width={20}>
+          <Azure size={14} />
+        </Center>
+      );
+    }
+
+    default:
+    case ModelProvider.OpenAI: {
+      return <OpenAI size={20} />;
+    }
+  }
+});
+
+export default ModelProviderIcon;

package/src/components/ModelSelect/index.tsx

@@ -0,0 +1,133 @@
+import { Icon, Tooltip } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { LucideEye, ToyBrick } from 'lucide-react';
+import numeral from 'numeral';
+import { rgba } from 'polished';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+import ModelIcon from 'src/components/ModelIcon';
+import ModelProviderIcon from 'src/components/ModelProviderIcon';
+
+import { ChatModelCard } from '@/types/llm';
+
+const useStyles = createStyles(({ css, token }) => ({
+  custom: css`
+    width: 36px;
+    height: 20px;
+
+    font-family: ${token.fontFamilyCode};
+    font-size: 12px;
+    color: ${rgba(token.colorWarning, 0.75)};
+
+    background: ${token.colorWarningBg};
+    border-radius: 4px;
+  `,
+  tag: css`
+    cursor: default;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 20px;
+    height: 20px;
+
+    border-radius: 4px;
+  `,
+  tagBlue: css`
+    color: ${token.geekblue};
+    background: ${token.geekblue1};
+  `,
+  tagGreen: css`
+    color: ${token.green};
+    background: ${token.green1};
+  `,
+  token: css`
+    width: 36px;
+    height: 20px;
+
+    font-family: ${token.fontFamilyCode};
+    font-size: 11px;
+    color: ${token.colorTextSecondary};
+
+    background: ${token.colorFillTertiary};
+    border-radius: 4px;
+  `,
+}));
+
+interface ModelItemRenderProps extends ChatModelCard {
+  showInfoTag?: boolean;
+}
+export const ModelItemRender = memo<ModelItemRenderProps>(({ showInfoTag = true, ...model }) => {
+  const { styles, cx } = useStyles();
+  const { t } = useTranslation('common');
+
+  return (
+    <Flexbox align={'center'} gap={32} horizontal justify={'space-between'}>
+      <Flexbox align={'center'} gap={8} horizontal>
+        <ModelIcon model={model.id} size={20} />
+        {model.displayName || model.id}
+      </Flexbox>
+
+      {showInfoTag && (
+        <Flexbox gap={4} horizontal>
+          {model.vision && (
+            <Tooltip placement={'right'} title={t('ModelSelect.featureTag.vision')}>
+              <div className={cx(styles.tag, styles.tagGreen)}>
+                <Icon icon={LucideEye} />
+              </div>
+            </Tooltip>
+          )}
+          {model.functionCall && (
+            <Tooltip
+              overlayStyle={{ maxWidth: 'unset' }}
+              placement={'right'}
+              title={t('ModelSelect.featureTag.functionCall')}
+            >
+              <div className={cx(styles.tag, styles.tagBlue)}>
+                <Icon icon={ToyBrick} />
+              </div>
+            </Tooltip>
+          )}
+
+          {model.tokens && (
+            <Tooltip
+              overlayStyle={{ maxWidth: 'unset' }}
+              placement={'right'}
+              title={t('ModelSelect.featureTag.tokens', {
+                tokens: numeral(model.tokens).format('0,0'),
+              })}
+            >
+              <Center className={styles.token}>{Math.floor(model.tokens / 1000)}K</Center>
+            </Tooltip>
+          )}
+          {model.isCustom && (
+            <Tooltip
+              overlayStyle={{ maxWidth: 300 }}
+              placement={'right'}
+              title={t('ModelSelect.featureTag.custom')}
+            >
+              <Center className={styles.custom}>DIY</Center>
+            </Tooltip>
+          )}
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});
+
+interface ProviderItemRenderProps {
+  provider: string;
+}
+
+export const ProviderItemRender = memo<ProviderItemRenderProps>(({ provider }) => {
+  const { t } = useTranslation('common');
+
+  return (
+    <Flexbox align={'center'} gap={4} horizontal>
+      <ModelProviderIcon provider={provider} />
+      {t(`modelProvider.${provider}` as any)}
+    </Flexbox>
+  );
+});

package/src/components/ModelTag/ModelIcon.tsx

@@ -0,0 +1,35 @@
+import {
+  Anthropic,
+  Aws,
+  Baichuan,
+  ChatGLM,
+  Gemini,
+  Meta,
+  Minimax,
+  Mistral,
+  OpenAI,
+  Tongyi,
+} from '@lobehub/icons';
+import { memo } from 'react';
+
+interface ModelIconProps {
+  model?: string;
+  size?: number;
+}
+
+const ModelIcon = memo<ModelIconProps>(({ model, size = 12 }) => {
+  if (!model) return;
+
+  if (model.startsWith('gpt')) return <OpenAI size={size} />;
+  if (model.startsWith('glm')) return <ChatGLM size={size} />;
+  if (model.includes('claude')) return <Anthropic size={size} />;
+  if (model.includes('titan')) return <Aws size={size} />;
+  if (model.includes('llama')) return <Meta size={size} />;
+  if (model.includes('gemini')) return <Gemini size={size} />;
+  if (model.includes('qwen')) return <Tongyi size={size} />;
+  if (model.includes('minmax')) return <Minimax size={size} />;
+  if (model.includes('baichuan')) return <Baichuan size={size} />;
+  if (model.includes('mistral')) return <Mistral size={size} />;
+});
+
+export default ModelIcon;

package/src/components/ModelTag/index.tsx

@@ -0,0 +1,13 @@
+import { Tag } from '@lobehub/ui';
+import { memo } from 'react';
+
+import ModelIcon from './ModelIcon';
+
+interface ModelTagProps {
+  model: string;
+}
+const ModelTag = memo<ModelTagProps>(({ model }) => (
+  <Tag icon={<ModelIcon model={model} />}>{model}</Tag>
+));
+
+export default ModelTag;

package/src/config/modelProviders/bedrock.ts

@@ -0,0 +1,43 @@
+import { ModelProviderCard } from '@/types/llm';
+
+const Bedrock: ModelProviderCard = {
+  chatModels: [
+    {
+      description:
+        'Amazon Titan Text G1 - Express v1，上下文长度可达 8000 个 token，适合广泛的用途。',
+      displayName: 'Titan Text G1 - Express',
+      hidden: true,
+      id: 'amazon.titan-text-express-v1:0:8k',
+      tokens: 8000,
+    },
+    {
+      description:
+        'Claude Instant 1.2 v1.2，上下文大小等于 100k，一个更快更便宜但仍然非常能干的模型，可以处理包括随意对话在内的多种任务。',
+      displayName: 'Claude Instant 1.2',
+      id: 'anthropic.claude-instant-v1',
+      tokens: 100_000,
+    },
+    {
+      description:
+        'Claude 2.1 v2.1，上下文大小等于 200k，Claude 2 的更新版本，特性包括双倍的上下文窗口，以及在可靠性等方面的提升。',
+      displayName: 'Claude 2.1',
+      id: 'anthropic.claude-v2:1',
+      tokens: 200_000,
+    },
+    {
+      description: 'Llama 2 Chat 13B v1，上下文大小为 4k，Llama 2 模型的对话用例优化变体。',
+      displayName: 'Llama 2 Chat 13B',
+      id: 'meta.llama2-13b-chat-v1',
+      tokens: 4000,
+    },
+    {
+      description: 'Llama 2 Chat 70B v1，上下文大小为 4k，Llama 2 模型的对话用例优化变体。',
+      displayName: 'Llama 2 Chat 70B',
+      id: 'meta.llama2-70b-chat-v1',
+      tokens: 4000,
+    },
+  ],
+  id: 'bedrock',
+};
+
+export default Bedrock;

package/src/config/modelProviders/google.ts

@@ -0,0 +1,20 @@
+import { ModelProviderCard } from '@/types/llm';
+
+const Google: ModelProviderCard = {
+  chatModels: [
+    {
+      displayName: 'Gemini Pro',
+      id: 'gemini-pro',
+      tokens: 32_768,
+    },
+    {
+      displayName: 'Gemini Pro Vision',
+      id: 'gemini-pro-vision',
+      tokens: 16_384,
+      vision: true,
+    },
+  ],
+  id: 'google',
+};
+
+export default Google;

package/src/config/modelProviders/index.ts

@@ -0,0 +1,18 @@
+import { ChatModelCard } from '@/types/llm';
+
+import BedrockProvider from './bedrock';
+import GoogleProvider from './google';
+import OpenAIProvider from './openai';
+import ZhiPuProvider from './zhipu';
+
+export const LOBE_DEFAULT_MODEL_LIST: ChatModelCard[] = [
+  OpenAIProvider.chatModels,
+  ZhiPuProvider.chatModels,
+  BedrockProvider.chatModels,
+  GoogleProvider.chatModels,
+].flat();
+
+export { default as BedrockProvider } from './bedrock';
+export { default as GoogleProvider } from './google';
+export { default as OpenAIProvider } from './openai';
+export { default as ZhiPuProvider } from './zhipu';

package/src/config/modelProviders/openai.ts

@@ -0,0 +1,102 @@
+import { ModelProviderCard } from '@/types/llm';
+
+// refs to: https://platform.openai.com/docs/models/gpt-4-and-gpt-4-turbo
+const OpenAI: ModelProviderCard = {
+  chatModels: [
+    {
+      description: 'GPT 3.5 Turbo，适用于各种文本生成和理解任务',
+      displayName: 'GPT-3.5 Turbo',
+      functionCall: true,
+      id: 'gpt-3.5-turbo',
+      tokens: 4096,
+    },
+    {
+      displayName: 'GPT-3.5 Turbo (0125)',
+      functionCall: true,
+      id: 'gpt-3.5-turbo-0125',
+      tokens: 16_385,
+    },
+    {
+      displayName: 'GPT-3.5 Turbo (1106)',
+      functionCall: true,
+      hidden: true,
+      id: 'gpt-3.5-turbo-1106',
+      tokens: 16_385,
+    },
+    {
+      hidden: true,
+      id: 'gpt-3.5-turbo-instruct',
+      tokens: 4096,
+    },
+    {
+      hidden: true,
+      id: 'gpt-3.5-turbo-16k',
+      tokens: 16_385,
+    },
+    {
+      hidden: true,
+      id: 'gpt-3.5-turbo-0613',
+      legacy: true,
+      tokens: 4096,
+    },
+    {
+      hidden: true,
+      id: 'gpt-3.5-turbo-16k-0613',
+      legacy: true,
+      tokens: 4096,
+    },
+    {
+      displayName: 'GPT-4 Turbo Preview',
+      functionCall: true,
+      id: 'gpt-4-turbo-preview',
+      tokens: 128_000,
+    },
+    {
+      displayName: 'GPT-4 Turbo Preview (0125)',
+      functionCall: true,
+      id: 'gpt-4-0125-preview',
+      tokens: 128_000,
+    },
+    {
+      description: 'GPT-4 视觉预览版，支持视觉任务',
+      displayName: 'GPT-4 Turbo Vision (Preview)',
+      id: 'gpt-4-vision-preview',
+      tokens: 128_000,
+      vision: true,
+    },
+    {
+      functionCall: true,
+      hidden: true,
+      id: 'gpt-4-1106-preview',
+      tokens: 128_000,
+    },
+    {
+      functionCall: true,
+      hidden: true,
+      id: 'gpt-4',
+      tokens: 8192,
+    },
+    {
+      functionCall: true,
+      hidden: true,
+      id: 'gpt-4-0613',
+      tokens: 8192,
+    },
+    {
+      functionCall: true,
+      hidden: true,
+      id: 'gpt-4-32k',
+      tokens: 32_768,
+    },
+    {
+      functionCall: true,
+      hidden: true,
+      id: 'gpt-4-32k-0613',
+      tokens: 32_768,
+    },
+  ],
+  enabled: true,
+  id: 'openai',
+};
+
+export default OpenAI;

package/src/config/modelProviders/zhipu.ts

@@ -0,0 +1,34 @@
+import { ModelProviderCard } from '@/types/llm';
+
+// TODO: 等待 ZhiPu 修复 API 问题后开启 functionCall
+// refs: https://github.com/lobehub/lobe-chat/discussions/737#discussioncomment-8315815
+// 暂时不透出 GLM 系列的 function_call 功能
+const ZhiPu: ModelProviderCard = {
+  chatModels: [
+    {
+      description: '最新的 GLM-4 、最大支持 128k 上下文、支持 Function Call 、Retreival',
+      displayName: 'GLM-4',
+      // functionCall: true,
+      id: 'glm-4',
+      tokens: 128_000,
+    },
+    {
+      description:
+        '实现了视觉语言特征的深度融合，支持视觉问答、图像字幕、视觉定位、复杂目标检测等各类多模态理解任务',
+      displayName: 'GLM-4 Vision',
+      id: 'glm-4v',
+      tokens: 128_000,
+      vision: true,
+    },
+    {
+      description: '最新的glm-3-turbo、最大支持 128k上下文、支持Function Call、Retreival',
+      displayName: 'GLM-3 Turbo',
+      // functionCall: true,
+      id: 'glm-3-turbo',
+      tokens: 128_000,
+    },
+  ],
+  id: 'zhipu',
+};
+
+export default ZhiPu;