@lobehub/chat 1.94.3 → 1.94.4

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/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;

package/src/features/Conversation/components/ChatItem/index.tsx

@@ -12,6 +12,8 @@ import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
+import { useUserStore } from '@/store/user';
+import { userGeneralSettingsSelectors } from '@/store/user/selectors';
 import { ChatMessage } from '@/types/message';
 
 import ErrorMessageExtra, { useErrorContent } from '../../Error';
@@ -70,6 +72,7 @@ const Item = memo<ChatListItemProps>(
 
     const type = useAgentStore(agentChatConfigSelectors.displayMode);
     const item = useChatStore(chatSelectors.getMessageById(id), isEqual);
+    const transitionMode = useUserStore(userGeneralSettingsSelectors.transitionMode);
 
     const [
       isMessageLoading,
@@ -89,6 +92,7 @@ const Item = memo<ChatListItemProps>(
 
     // when the message is in RAG flow or the AI generating, it should be in loading state
     const isProcessing = isInRAGFlow || generating;
+    const animated = transitionMode === 'fadeIn' && generating;
 
     const onAvatarsClick = useAvatarsClick(item?.role);
 
@@ -168,7 +172,7 @@ const Item = memo<ChatListItemProps>(
 
     const markdownProps = useMemo(
       () => ({
-        animated: generating,
+        animated,
         citations: item?.role === 'user' ? undefined : item?.search?.citations,
         components,
         customRender: markdownCustomRender,
@@ -184,7 +188,7 @@ const Item = memo<ChatListItemProps>(
               // if the citations's url and title are all the same, we should not show the citations
               item?.search?.citations.every((item) => item.title !== item.url),
       }),
-      [generating, components, markdownCustomRender, item?.role, item?.search],
+      [animated, components, markdownCustomRender, item?.role, item?.search],
     );
 
     const onChange = useCallback((value: string) => updateMessageContent(id, value), [id]);

package/src/features/Conversation/components/MarkdownElements/LobeThinking/Render.tsx

@@ -4,6 +4,8 @@ import Thinking from '@/components/Thinking';
 import { ARTIFACT_THINKING_TAG } from '@/const/plugin';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
+import { useUserStore } from '@/store/user';
+import { userGeneralSettingsSelectors } from '@/store/user/selectors';
 
 import { MarkdownElementProps } from '../type';
 import { isTagClosed } from '../utils';
@@ -13,12 +15,14 @@ const Render = memo<MarkdownElementProps>(({ children, id }) => {
     const message = chatSelectors.getMessageById(id)(s);
     return [!isTagClosed(ARTIFACT_THINKING_TAG, message?.content)];
   });
+  const transitionMode = useUserStore(userGeneralSettingsSelectors.transitionMode);
 
   return (
     <Thinking
       content={children as string}
       style={{ width: isGenerating ? '100%' : undefined }}
       thinking={isGenerating}
+      thinkingAnimated={transitionMode === 'fadeIn' && isGenerating}
     />
   );
 });

package/src/features/Conversation/components/MarkdownElements/Thinking/Render.tsx

@@ -3,6 +3,8 @@ import { memo } from 'react';
 import Thinking from '@/components/Thinking';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
+import { useUserStore } from '@/store/user';
+import { userGeneralSettingsSelectors } from '@/store/user/selectors';
 
 import { MarkdownElementProps } from '../type';
 
@@ -23,9 +25,18 @@ const Render = memo<MarkdownElementProps>(({ children, id }) => {
     return message?.search?.citations;
   });
 
+  const transitionMode = useUserStore(userGeneralSettingsSelectors.transitionMode);
+
   if (!isGenerating && !children) return;
 
-  return <Thinking citations={citations} content={children as string} thinking={isGenerating} />;
+  return (
+    <Thinking
+      citations={citations}
+      content={children as string}
+      thinking={isGenerating}
+      thinkingAnimated={transitionMode === 'fadeIn' && isGenerating}
+    />
+  );
 });
 
 export default Render;

package/src/locales/default/setting.ts

@@ -245,6 +245,18 @@ export default {
       title: 'Mermaid 主题',
     },
     title: '聊天外观',
+    transitionMode: {
+      desc: '聊天消息的过渡动画',
+      options: {
+        fadeIn: '淡入',
+        none: {
+          desc: '这取决于模型的响应输出方式，请自行测试。',
+          value: '无',
+        },
+        smooth: '平滑',
+      },
+      title: '过渡动画',
+    },
   },
   settingCommon: {
     lang: {

package/src/services/chat.ts

@@ -29,6 +29,7 @@ import {
   modelConfigSelectors,
   modelProviderSelectors,
   preferenceSelectors,
+  userGeneralSettingsSelectors,
   userProfileSelectors,
 } from '@/store/user/selectors';
 import { WebBrowsingManifest } from '@/tools/web-browsing';
@@ -39,7 +40,12 @@ import type { ChatStreamPayload, OpenAIChatMessage } from '@/types/openai/chat';
 import { UserMessageContentPart } from '@/types/openai/chat';
 import { parsePlaceholderVariablesMessages } from '@/utils/client/parserPlaceholder';
 import { createErrorResponse } from '@/utils/errorResponse';
-import { FetchSSEOptions, fetchSSE, getMessageError } from '@/utils/fetch';
+import {
+  FetchSSEOptions,
+  fetchSSE,
+  getMessageError,
+  standardizeAnimationStyle,
+} from '@/utils/fetch';
 import { genToolCallingName } from '@/utils/toolCall';
 import { createTraceHeader, getTraceId } from '@/utils/trace';
 
@@ -295,7 +301,7 @@ class ChatService {
   };
 
   getChatCompletion = async (params: Partial<ChatStreamPayload>, options?: FetchOptions) => {
-    const { signal } = options ?? {};
+    const { signal, responseAnimation } = options ?? {};
 
     const { provider = ModelProvider.OpenAI, ...res } = params;
 
@@ -379,6 +385,9 @@ class ChatService {
       sdkType = providerConfig?.settings.sdkType || 'openai';
     }
 
+    const userPreferTransitionMode =
+      userGeneralSettingsSelectors.transitionMode(getUserStoreState());
+
     return fetchSSE(API_ENDPOINTS.chat(sdkType), {
       body: JSON.stringify(payload),
       fetcher: fetcher,
@@ -388,11 +397,11 @@ class ChatService {
       onErrorHandle: options?.onErrorHandle,
       onFinish: options?.onFinish,
       onMessageHandle: options?.onMessageHandle,
+      responseAnimation: [userPreferTransitionMode, responseAnimation].reduce(
+        (acc, cur) => merge(acc, standardizeAnimationStyle(cur)),
+        providerConfig?.settings?.responseAnimation ?? {},
+      ),
       signal,
-      smoothing:
-        providerConfig?.settings?.smoothing ||
-        // @deprecated in V2
-        providerConfig?.smoothing,
     });
   };
 

package/src/store/user/slices/settings/selectors/general.test.ts

@@ -19,6 +19,7 @@ describe('settingsSelectors', () => {
         fontSize: 12,
         highlighterTheme: 'lobe-theme',
         mermaidTheme: 'lobe-theme',
+        transitionMode: 'fadeIn',
       });
     });
   });

package/src/store/user/slices/settings/selectors/general.ts

@@ -8,6 +8,7 @@ const primaryColor = (s: UserStore) => generalConfig(s).primaryColor;
 const fontSize = (s: UserStore) => generalConfig(s).fontSize;
 const highlighterTheme = (s: UserStore) => generalConfig(s).highlighterTheme;
 const mermaidTheme = (s: UserStore) => generalConfig(s).mermaidTheme;
+const transitionMode = (s: UserStore) => generalConfig(s).transitionMode;
 
 export const userGeneralSettingsSelectors = {
   config: generalConfig,
@@ -16,4 +17,5 @@ export const userGeneralSettingsSelectors = {
   mermaidTheme,
   neutralColor,
   primaryColor,
+  transitionMode,
 };

package/src/types/aiProvider.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 
 import { AiModelForSelect, EnabledAiModel, ModelSearchImplementType } from '@/types/aiModel';
-import { SmoothingParams } from '@/types/llm';
+import { ResponseAnimation } from '@/types/llm';
 
 export const AiProviderSourceEnum = {
   Builtin: 'builtin',
@@ -58,6 +58,7 @@ export interface AiProviderSettings {
       }
     | false;
 
+  responseAnimation?: ResponseAnimation;
   /**
    * default openai
    */
@@ -75,13 +76,11 @@ export interface AiProviderSettings {
   showChecker?: boolean;
   showDeployName?: boolean;
   showModelFetcher?: boolean;
-  /**
-   * whether to smoothing the output
-   */
-  smoothing?: SmoothingParams;
   supportResponsesApi?: boolean;
 }
 
+const ResponseAnimationType = z.enum(['smooth', 'fadeIn', 'none']);
+
 const AiProviderSettingsSchema = z.object({
   defaultShowBrowserRequest: z.boolean().optional(),
   disableBrowserRequest: z.boolean().optional(),
@@ -94,6 +93,13 @@ const AiProviderSettingsSchema = z.object({
     })
     .or(z.literal(false))
     .optional(),
+  responseAnimation: z
+    .object({
+      text: ResponseAnimationType.optional(),
+      toolsCalling: ResponseAnimationType.optional(),
+    })
+    .or(ResponseAnimationType)
+    .optional(),
   sdkType: z.enum(['anthropic', 'openai', 'ollama']).optional(),
   searchMode: z.enum(['params', 'internal']).optional(),
   showAddNewModel: z.boolean().optional(),
@@ -101,12 +107,6 @@ const AiProviderSettingsSchema = z.object({
   showChecker: z.boolean().optional(),
   showDeployName: z.boolean().optional(),
   showModelFetcher: z.boolean().optional(),
-  smoothing: z
-    .object({
-      text: z.boolean().optional(),
-      toolsCalling: z.boolean().optional(),
-    })
-    .optional(),
   supportResponsesApi: z.boolean().optional(),
 });
 

package/src/types/llm.ts

@@ -59,11 +59,14 @@ export interface ChatModelCard {
   vision?: boolean;
 }
 
-export interface SmoothingParams {
-  speed?: number;
-  text?: boolean;
-  toolsCalling?: boolean;
-}
+export type ResponseAnimationStyle = 'smooth' | 'fadeIn' | 'none';
+export type ResponseAnimation =
+  | {
+      speed?: number;
+      text?: ResponseAnimationStyle;
+      toolsCalling?: ResponseAnimationStyle;
+    }
+  | ResponseAnimationStyle;
 
 export interface ModelProviderCard {
   /**
@@ -137,11 +140,6 @@ export interface ModelProviderCard {
    * whether to show the provider config
    */
   showConfig?: boolean;
-  /**
-   * whether to smoothing the output
-   * @deprecated
-   */
-  smoothing?: SmoothingParams;
   /**
    * provider's website url
    */

package/src/types/user/settings/general.ts

@@ -1,9 +1,12 @@
 import type { HighlighterProps, MermaidProps, NeutralColors, PrimaryColors } from '@lobehub/ui';
 
+import { ResponseAnimationStyle } from '@/types/llm';
+
 export interface UserGeneralConfig {
   fontSize: number;
   highlighterTheme?: HighlighterProps['theme'];
   mermaidTheme?: MermaidProps['theme'];
   neutralColor?: NeutralColors;
   primaryColor?: PrimaryColors;
+  transitionMode?: ResponseAnimationStyle;
 }