@lobehub/chat 1.94.3 → 1.94.5

package/src/app/[variants]/(main)/settings/common/features/ChatAppearance/index.tsx

@@ -4,14 +4,16 @@ import {
   Form,
   type FormGroupItemType,
   Icon,
+  Segmented,
   Select,
   SliderWithInput,
   highlighterThemes,
   mermaidThemes,
 } from '@lobehub/ui';
 import { Skeleton } from 'antd';
+import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { Loader2Icon } from 'lucide-react';
+import { Loader2Icon, TriangleAlert } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -20,19 +22,64 @@ import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 
 import ChatPreview from './ChatPreview';
+import ChatTransitionPreview from './ChatTransitionPreview';
 import HighlighterPreview from './HighlighterPreview';
 import MermaidPreview from './MermaidPreview';
 
 const ChatAppearance = memo(() => {
   const { t } = useTranslation('setting');
   const { general } = useUserStore(settingsSelectors.currentSettings, isEqual);
+  const theme = useTheme();
   const [setSettings, isUserStateInit] = useUserStore((s) => [s.setSettings, s.isUserStateInit]);
   const [loading, setLoading] = useState(false);
 
   if (!isUserStateInit) return <Skeleton active paragraph={{ rows: 5 }} title={false} />;
 
-  const theme: FormGroupItemType = {
+  const themeItems: FormGroupItemType = {
     children: [
+      {
+        children: (
+          <ChatTransitionPreview key={general.transitionMode} mode={general.transitionMode} />
+        ),
+        noStyle: true,
+      },
+      {
+        children: (
+          <Segmented
+            block
+            options={[
+              {
+                label: t('settingChatAppearance.transitionMode.options.none.value'),
+                value: 'none',
+              },
+              {
+                label: t('settingChatAppearance.transitionMode.options.fadeIn'),
+                value: 'fadeIn',
+              },
+              {
+                label: t('settingChatAppearance.transitionMode.options.smooth'),
+                value: 'smooth',
+              },
+            ]}
+          />
+        ),
+        desc: t('settingChatAppearance.transitionMode.desc'),
+        label: t('settingChatAppearance.transitionMode.title'),
+        name: 'transitionMode',
+        tooltip:
+          general.transitionMode === 'none'
+            ? {
+                icon: (
+                  <TriangleAlert
+                    color={theme.colorWarning}
+                    size={14}
+                    style={{ alignSelf: 'flex-end', marginBlockEnd: 2, marginInlineStart: 8 }}
+                  />
+                ),
+                title: t('settingChatAppearance.transitionMode.options.none.desc'),
+              }
+            : undefined,
+      },
       {
         children: <ChatPreview fontSize={general.fontSize} />,
         noStyle: true,
@@ -112,7 +159,7 @@ const ChatAppearance = memo(() => {
   return (
     <Form
       initialValues={general}
-      items={[theme]}
+      items={[themeItems]}
       itemsType={'group'}
       onValuesChange={async (value) => {
         setLoading(true);

package/src/components/Thinking/index.tsx

@@ -77,9 +77,11 @@ interface ThinkingProps {
   duration?: number;
   style?: CSSProperties;
   thinking?: boolean;
+  thinkingAnimated?: boolean;
 }
 
-const Thinking = memo<ThinkingProps>(({ content, duration, thinking, style, citations }) => {
+const Thinking = memo<ThinkingProps>((props) => {
+  const { content, duration, thinking, style, citations, thinkingAnimated } = props;
   const { t } = useTranslation(['components', 'common']);
   const { styles, cx, theme } = useStyles();
 
@@ -154,7 +156,7 @@ const Thinking = memo<ThinkingProps>(({ content, duration, thinking, style, cita
             }}
           >
             {typeof content === 'string' ? (
-              <Markdown animated={thinking} citations={citations} variant={'chat'}>
+              <Markdown animated={thinkingAnimated} citations={citations} variant={'chat'}>
                 {content}
               </Markdown>
             ) : (

package/src/config/aiModels/openai.ts

@@ -59,6 +59,7 @@ export const openaiChatModels: AIChatModelCard[] = [
   {
     abilities: {
       functionCall: true,
+      search: true,
       vision: true,
     },
     contextWindowTokens: 1_047_576,
@@ -73,11 +74,15 @@ export const openaiChatModels: AIChatModelCard[] = [
       output: 8,
     },
     releasedAt: '2025-04-14',
+    settings: {
+      searchImpl: 'params',
+    },
     type: 'chat',
   },
   {
     abilities: {
       functionCall: true,
+      search: true,
       vision: true,
     },
     contextWindowTokens: 1_047_576,
@@ -93,6 +98,9 @@ export const openaiChatModels: AIChatModelCard[] = [
       output: 1.6,
     },
     releasedAt: '2025-04-14',
+    settings: {
+      searchImpl: 'params',
+    },
     type: 'chat',
   },
   {
@@ -135,6 +143,28 @@ export const openaiChatModels: AIChatModelCard[] = [
     },
     type: 'chat',
   },
+  {
+    abilities: {
+      functionCall: true,
+      reasoning: true,
+      vision: true,
+    },
+    contextWindowTokens: 200_000,
+    description:
+      'o1 系列模型经过强化学习训练，能够在回答前进行思考，并执行复杂的推理任务。o1-pro 模型使用了更多计算资源，以进行更深入的思考，从而持续提供更优质的回答。',
+    displayName: 'o1-pro',
+    id: 'o1-pro',
+    maxOutput: 100_000,
+    pricing: {
+      input: 150,
+      output: 600,
+    },
+    releasedAt: '2025-03-19',
+    settings: {
+      extendParams: ['reasoningEffort'],
+    },
+    type: 'chat',
+  },
   {
     abilities: {
       reasoning: true,
@@ -158,6 +188,7 @@ export const openaiChatModels: AIChatModelCard[] = [
   },
   {
     abilities: {
+      functionCall: true,
       reasoning: true,
       vision: true,
     },
@@ -220,6 +251,7 @@ export const openaiChatModels: AIChatModelCard[] = [
   {
     abilities: {
       functionCall: true,
+      search: true,
       vision: true,
     },
     contextWindowTokens: 128_000,
@@ -234,6 +266,9 @@ export const openaiChatModels: AIChatModelCard[] = [
       output: 0.6,
     },
     releasedAt: '2024-07-18',
+    settings: {
+      searchImpl: 'params',
+    },
     type: 'chat',
   },
   {
@@ -259,6 +294,29 @@ export const openaiChatModels: AIChatModelCard[] = [
   {
     abilities: {
       functionCall: true,
+      //search: true,
+    },
+    contextWindowTokens: 128_000,
+    description: 'GPT-4o mini Audio 模型，支持音频输入输出',
+    displayName: 'GPT-4o mini Audio',
+    id: 'gpt-4o-mini-audio-preview',
+    maxOutput: 16_384,
+    pricing: {
+      input: 0.15,
+      output: 0.6,
+    },
+    releasedAt: '2024-12-17',
+    /*
+    settings: {
+      searchImpl: 'params',
+    },
+    */
+    type: 'chat',
+  },
+  {
+    abilities: {
+      functionCall: true,
+      search: true,
       vision: true,
     },
     contextWindowTokens: 128_000,
@@ -272,6 +330,9 @@ export const openaiChatModels: AIChatModelCard[] = [
       output: 10,
     },
     releasedAt: '2024-05-13',
+    settings: {
+      searchImpl: 'params',
+    },
     type: 'chat',
   },
   {
@@ -297,6 +358,7 @@ export const openaiChatModels: AIChatModelCard[] = [
   {
     abilities: {
       functionCall: true,
+      search: true,
       vision: true,
     },
     contextWindowTokens: 128_000,
@@ -310,11 +372,15 @@ export const openaiChatModels: AIChatModelCard[] = [
       output: 10,
     },
     releasedAt: '2024-11-20',
+    settings: {
+      searchImpl: 'params',
+    },
     type: 'chat',
   },
   {
     abilities: {
       functionCall: true,
+      search: true,
       vision: true,
     },
     contextWindowTokens: 128_000,
@@ -327,9 +393,16 @@ export const openaiChatModels: AIChatModelCard[] = [
       output: 15,
     },
     releasedAt: '2024-05-13',
+    settings: {
+      searchImpl: 'params',
+    },
     type: 'chat',
   },
   {
+    abilities: {
+      functionCall: true,
+      //search: true,
+    },
     contextWindowTokens: 128_000,
     description: 'GPT-4o Audio 模型，支持音频输入输出',
     displayName: 'GPT-4o Audio',
@@ -340,6 +413,11 @@ export const openaiChatModels: AIChatModelCard[] = [
       output: 10,
     },
     releasedAt: '2024-10-01',
+    /*
+    settings: {
+      searchImpl: 'params',
+    },
+    */
     type: 'chat',
   },
   {
@@ -545,6 +623,48 @@ export const openaiChatModels: AIChatModelCard[] = [
     },
     type: 'chat',
   },
+  {
+    abilities: {
+      functionCall: true,
+      reasoning: true,
+      vision: true,
+    },
+    contextWindowTokens: 200_000,
+    description: 'codex-mini-latest 是 o4-mini 的微调版本，专门用于 Codex CLI。对于直接通过 API 使用，我们推荐从 gpt-4.1 开始。',
+    displayName: 'Codex mini',
+    id: 'codex-mini-latest',
+    maxOutput: 100_000,
+    pricing: {
+      input: 1.5,
+      output: 6,
+    },
+    releasedAt: '2025-06-01',
+    settings: {
+      extendParams: ['reasoningEffort'],
+    },
+    type: 'chat',
+  },
+  {
+    abilities: {
+      functionCall: true,
+      reasoning: true,
+      vision: true,
+    },
+    contextWindowTokens: 8192,
+    description: 'computer-use-preview 模型是专为“计算机使用工具”设计的专用模型，经过训练以理解并执行计算机相关任务。',
+    displayName: 'Computer Use Preview',
+    id: 'computer-use-preview',
+    maxOutput: 1024,
+    pricing: {
+      input: 3,
+      output: 12,
+    },
+    releasedAt: '2025-03-11',
+    settings: {
+      extendParams: ['reasoningEffort'],
+    },
+    type: 'chat',
+  },
 ];
 
 export const openaiEmbeddingModels: AIEmbeddingModelCard[] = [

package/src/config/modelProviders/anthropic.ts

@@ -196,14 +196,9 @@ const Anthropic: ModelProviderCard = {
     proxyUrl: {
       placeholder: 'https://api.anthropic.com',
     },
+    responseAnimation: 'smooth',
     sdkType: 'anthropic',
     showModelFetcher: true,
-    smoothing: {
-      text: true,
-    },
-  },
-  smoothing: {
-    text: true,
   },
   url: 'https://anthropic.com',
 };

package/src/config/modelProviders/baichuan.ts

@@ -100,16 +100,12 @@ const Baichuan: ModelProviderCard = {
     proxyUrl: {
       placeholder: 'https://api.baichuan-ai.com/v1',
     },
-    sdkType: 'openai',
-    showModelFetcher: true,
-    smoothing: {
+    responseAnimation: {
       speed: 2,
-      text: true,
+      text: 'smooth',
     },
-  },
-  smoothing: {
-    speed: 2,
-    text: true,
+    sdkType: 'openai',
+    showModelFetcher: true,
   },
   url: 'https://platform.baichuan-ai.com',
 };

package/src/config/modelProviders/google.ts

@@ -206,12 +206,12 @@ const Google: ModelProviderCard = {
     proxyUrl: {
       placeholder: 'https://generativelanguage.googleapis.com',
     },
-    sdkType: 'google',
-    showModelFetcher: true,
-    smoothing: {
+    responseAnimation: {
       speed: 50,
-      text: true,
+      text: 'smooth',
     },
+    sdkType: 'google',
+    showModelFetcher: true,
   },
   url: 'https://ai.google.dev',
 };

package/src/config/modelProviders/lmstudio.ts

@@ -12,12 +12,12 @@ const LMStudio: ModelProviderCard = {
     proxyUrl: {
       placeholder: 'http://127.0.0.1:1234/v1',
     },
-    showApiKey: false,
-    showModelFetcher: true,
-    smoothing: {
+    responseAnimation: {
       speed: 2,
-      text: true,
+      text: 'smooth',
     },
+    showApiKey: false,
+    showModelFetcher: true,
   },
   url: 'https://lmstudio.ai',
 };

package/src/config/modelProviders/minimax.ts

@@ -50,11 +50,11 @@ const Minimax: ModelProviderCard = {
     proxyUrl: {
       placeholder: 'https://api.minimax.chat/v1',
     },
-    sdkType: 'openai',
-    smoothing: {
+    responseAnimation: {
       speed: 2,
-      text: true,
+      text: 'smooth',
     },
+    sdkType: 'openai',
   },
   url: 'https://www.minimaxi.com',
 };

package/src/config/modelProviders/moonshot.ts

@@ -42,12 +42,12 @@ const Moonshot: ModelProviderCard = {
     proxyUrl: {
       placeholder: 'https://api.moonshot.cn/v1',
     },
-    sdkType: 'openai',
-    showModelFetcher: true,
-    smoothing: {
+    responseAnimation: {
       speed: 2,
-      text: true,
+      text: 'smooth',
     },
+    sdkType: 'openai',
+    showModelFetcher: true,
   },
   url: 'https://www.moonshot.cn',
 };

package/src/config/modelProviders/openai.ts

@@ -332,10 +332,8 @@ const OpenAI: ModelProviderCard = {
   modelsUrl: 'https://platform.openai.com/docs/models',
   name: 'OpenAI',
   settings: {
+    responseAnimation: 'smooth',
     showModelFetcher: true,
-    smoothing: {
-      text: true,
-    },
     supportResponsesApi: true,
   },
   url: 'https://openai.com',

package/src/config/modelProviders/perplexity.ts

@@ -59,11 +59,11 @@ const Perplexity: ModelProviderCard = {
     proxyUrl: {
       placeholder: 'https://api.perplexity.ai',
     },
-    sdkType: 'openai',
-    smoothing: {
+    responseAnimation: {
       speed: 2,
-      text: true,
+      text: 'smooth',
     },
+    sdkType: 'openai',
   },
   url: 'https://www.perplexity.ai',
 };

package/src/config/modelProviders/qwen.ts

@@ -425,13 +425,13 @@ const Qwen: ModelProviderCard = {
     proxyUrl: {
       placeholder: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
     },
+    responseAnimation: {
+      speed: 2,
+      text: 'smooth',
+    },
     sdkType: 'openai',
     showDeployName: true,
     showModelFetcher: true,
-    smoothing: {
-      speed: 2,
-      text: true,
-    },
   },
   url: 'https://www.aliyun.com/product/bailian',
 };

package/src/config/modelProviders/search1api.ts

@@ -45,12 +45,12 @@ const Search1API: ModelProviderCard = {
     proxyUrl: {
       placeholder: 'https://api.search1api.com/v1',
     },
-    sdkType: 'openai',
-    showModelFetcher: true,
-    smoothing: {
+    responseAnimation: {
       speed: 2,
-      text: true,
+      text: 'smooth',
     },
+    sdkType: 'openai',
+    showModelFetcher: true,
   },
   url: 'https://www.search1api.com',
 };

package/src/config/modelProviders/spark.ts

@@ -73,12 +73,12 @@ const Spark: ModelProviderCard = {
     proxyUrl: {
       placeholder: 'https://spark-api-open.xf-yun.com/v1',
     },
-    sdkType: 'openai',
-    showModelFetcher: false,
-    smoothing: {
+    responseAnimation: {
       speed: 2,
-      text: true,
+      text: 'smooth',
     },
+    sdkType: 'openai',
+    showModelFetcher: false,
   },
   url: 'https://www.xfyun.cn',
 };

package/src/config/modelProviders/stepfun.ts

@@ -176,12 +176,12 @@ const Stepfun: ModelProviderCard = {
     proxyUrl: {
       placeholder: 'https://api.stepfun.com/v1',
     },
-    sdkType: 'openai',
-    showModelFetcher: true,
-    smoothing: {
+    responseAnimation: {
       speed: 2,
-      text: true,
+      text: 'smooth',
     },
+    sdkType: 'openai',
+    showModelFetcher: true,
   },
   url: 'https://stepfun.com',
 };

package/src/config/modelProviders/vertexai.ts

@@ -11,10 +11,8 @@ const VertexAI: ModelProviderCard = {
   name: 'Vertex AI',
   settings: {
     disableBrowserRequest: true,
+    responseAnimation: 'smooth',
     showModelFetcher: false,
-    smoothing: {
-      text: true,
-    },
   },
   url: 'https://cloud.google.com/vertex-ai',
 };

package/src/config/modelProviders/volcengine.ts

@@ -13,12 +13,12 @@ const Doubao: ModelProviderCard = {
     proxyUrl: {
       placeholder: 'https://ark.cn-beijing.volces.com/api/v3',
     },
-    sdkType: 'openai',
-    showDeployName: true,
-    smoothing: {
+    responseAnimation: {
       speed: 2,
-      text: true,
+      text: 'smooth',
     },
+    sdkType: 'openai',
+    showDeployName: true,
   },
   url: 'https://www.volcengine.com/product/ark',
 };

package/src/config/modelProviders/wenxin.ts

@@ -242,11 +242,11 @@ const BaiduWenxin: ModelProviderCard = {
     proxyUrl: {
       placeholder: 'https://qianfan.baidubce.com/v2',
     },
-    sdkType: 'openai',
-    smoothing: {
+    responseAnimation: {
       speed: 2,
-      text: true,
+      text: 'smooth',
     },
+    sdkType: 'openai',
   },
   url: 'https://cloud.baidu.com/wenxin.html',
 };

package/src/const/models.ts

@@ -6,7 +6,32 @@ export const systemToUserModels = new Set([
 ]);
 
 // TODO: 临时写法，后续要重构成 model card 展示配置
-export const disableStreamModels = new Set(['o1', 'o1-2024-12-17']);
+export const disableStreamModels = new Set([
+  'o1',
+  'o1-2024-12-17',
+  'o1-pro',
+  'o1-pro-2025-03-19',
+  /*
+  官网显示不支持，但是实际试下来支持 Streaming，暂时注释掉
+  'o3-pro',
+  'o3-pro-2025-06-10',
+  */
+  'computer-use-preview',
+  'computer-use-preview-2025-03-11',
+]);
+
+/**
+ * models use Responses API only
+ */
+export const responsesAPIModels = new Set([
+  'o1-pro',
+  'o1-pro-2025-03-19',
+  'o3-pro',
+  'o3-pro-2025-06-10',
+  'codex-mini-latest',
+  'computer-use-preview',
+  'computer-use-preview-2025-03-11',
+]);
 
 /**
  * models support context caching

package/src/const/settings/common.ts

@@ -4,4 +4,5 @@ export const DEFAULT_COMMON_SETTINGS: UserGeneralConfig = {
   fontSize: 14,
   highlighterTheme: 'lobe-theme',
   mermaidTheme: 'lobe-theme',
+  transitionMode: 'fadeIn',
 };

package/src/features/Conversation/Messages/Assistant/Reasoning/index.tsx

@@ -3,6 +3,8 @@ import { memo } from 'react';
 import Thinking from '@/components/Thinking';
 import { useChatStore } from '@/store/chat';
 import { aiChatSelectors } from '@/store/chat/selectors';
+import { useUserStore } from '@/store/user';
+import { userGeneralSettingsSelectors } from '@/store/user/selectors';
 
 interface ReasoningProps {
   content?: string;
@@ -12,8 +14,16 @@ interface ReasoningProps {
 
 const Reasoning = memo<ReasoningProps>(({ content = '', duration, id }) => {
   const isReasoning = useChatStore(aiChatSelectors.isMessageInReasoning(id));
+  const transitionMode = useUserStore(userGeneralSettingsSelectors.transitionMode);
 
-  return <Thinking content={content} duration={duration} thinking={isReasoning} />;
+  return (
+    <Thinking
+      content={content}
+      duration={duration}
+      thinking={isReasoning}
+      thinkingAnimated={transitionMode === 'fadeIn' && isReasoning}
+    />
+  );
 });
 
 export default Reasoning;