@lobehub/chat 1.94.3 → 1.94.5

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/libs/model-runtime/openai/index.ts

@@ -2,21 +2,24 @@ import { ChatStreamPayload, ModelProvider } from '../types';
 import { processMultiProviderModelList } from '../utils/modelParse';
 import { createOpenAICompatibleRuntime } from '../utils/openaiCompatibleFactory';
 import { pruneReasoningPayload } from '../utils/openaiHelpers';
+import { responsesAPIModels } from '@/const/models';
 
 export interface OpenAIModelCard {
   id: string;
 }
 
-const prunePrefixes = ['o1', 'o3', 'o4'];
+const prunePrefixes = ['o1', 'o3', 'o4', 'codex', 'computer-use'];
+
+const oaiSearchContextSize = process.env.OPENAI_SEARCH_CONTEXT_SIZE; // low, medium, high
 
 export const LobeOpenAI = createOpenAICompatibleRuntime({
   baseURL: 'https://api.openai.com/v1',
   chatCompletion: {
     handlePayload: (payload) => {
-      const { model } = payload;
+      const { enabledSearch, model, ...rest } = payload;
 
-      if (model === 'o1-pro') {
-        return { ...payload, apiMode: 'responses' } as ChatStreamPayload;
+      if (responsesAPIModels.has(model) || enabledSearch) {
+        return { ...rest, apiMode: 'responses', enabledSearch, model } as ChatStreamPayload;
       }
 
       if (prunePrefixes.some((prefix) => model.startsWith(prefix))) {
@@ -24,11 +27,10 @@ export const LobeOpenAI = createOpenAICompatibleRuntime({
       }
 
       if (model.includes('-search-')) {
-        const oaiSearchContextSize = process.env.OPENAI_SEARCH_CONTEXT_SIZE; // low, medium, high
-
         return {
-          ...payload,
+          ...rest,
           frequency_penalty: undefined,
+          model,
           presence_penalty: undefined,
           stream: payload.stream ?? true,
           temperature: undefined,
@@ -41,7 +43,7 @@ export const LobeOpenAI = createOpenAICompatibleRuntime({
         } as any;
       }
 
-      return { ...payload, stream: payload.stream ?? true };
+      return { ...rest, model, stream: payload.stream ?? true };
     },
   },
   debug: {
@@ -57,17 +59,37 @@ export const LobeOpenAI = createOpenAICompatibleRuntime({
   },
   provider: ModelProvider.OpenAI,
   responses: {
-    handlePayload: (payload: ChatStreamPayload) => {
-      const { model } = payload;
+    handlePayload: (payload) => {
+      const { enabledSearch, model, tools, ...rest } = payload;
+
+      const openaiTools = enabledSearch
+        ? [
+            ...(tools || []),
+            {
+              type: 'web_search_preview',
+              ...(oaiSearchContextSize && {
+                search_context_size: oaiSearchContextSize,
+              }),
+            },
+          ]
+        : tools;
+
       if (prunePrefixes.some((prefix) => model.startsWith(prefix))) {
         if (!payload.reasoning) {
           payload.reasoning = { summary: 'auto' };
         } else {
           payload.reasoning.summary = 'auto';
         }
+
+        // computer-use series must set truncation as auto
+        if (model.startsWith('computer-use')) {
+          payload.truncation = 'auto';
+        }
+
+        return pruneReasoningPayload(payload) as any;
       }
 
-      return { ...payload, stream: payload.stream ?? true };
+      return { ...rest, model, stream: payload.stream ?? true, tools: openaiTools } as any;
     },
   },
 });

package/src/libs/model-runtime/types/chat.ts

@@ -107,6 +107,7 @@ export interface ChatStreamPayload {
     effort?: string;
     summary?: string;
   };
+  reasoning_effort?: 'low' | 'medium' | 'high';
   responseMode?: 'stream' | 'json';
   /**
    * @title 是否开启流式请求
@@ -132,6 +133,7 @@ export interface ChatStreamPayload {
    * @default 1
    */
   top_p?: number;
+  truncation?: 'auto' | 'disabled';
 }
 
 export interface ChatMethodOptions {

package/src/libs/model-runtime/utils/openaiCompatibleFactory/index.ts

@@ -209,14 +209,9 @@ export const createOpenAICompatibleRuntime = <T extends Record<string, any> = an
     }
 
     async chat(
-      { responseMode, apiMode, ...payload }: ChatStreamPayload,
+      { responseMode, ...payload }: ChatStreamPayload,
       options?: ChatMethodOptions,
     ) {
-      // new openai Response API
-      if (apiMode === 'responses') {
-        return this.handleResponseAPIMode(payload, options);
-      }
-
       try {
         const inputStartAt = Date.now();
         const postPayload = chatCompletion?.handlePayload
@@ -226,6 +221,11 @@ export const createOpenAICompatibleRuntime = <T extends Record<string, any> = an
               stream: payload.stream ?? true,
             } as OpenAI.ChatCompletionCreateParamsStreaming);
 
+        // new openai Response API
+        if ((postPayload as any).apiMode === 'responses') {
+          return this.handleResponseAPIMode(payload, options);
+        }
+
         const messages = await convertOpenAIMessages(postPayload.messages);
 
         let response: Stream<OpenAI.Chat.Completions.ChatCompletionChunk>;
@@ -478,11 +478,12 @@ export const createOpenAICompatibleRuntime = <T extends Record<string, any> = an
     ): Promise<Response> {
       const inputStartAt = Date.now();
 
-      const { messages, ...res } = responses?.handlePayload
+      const { messages, reasoning_effort, tools, ...res } = responses?.handlePayload
         ? (responses?.handlePayload(payload, this._options) as ChatStreamPayload)
         : payload;
 
       // remove penalty params
+      delete res.apiMode;
       delete res.frequency_penalty;
       delete res.presence_penalty;
 
@@ -490,9 +491,10 @@ export const createOpenAICompatibleRuntime = <T extends Record<string, any> = an
 
       const postPayload = {
         ...res,
+        ...(reasoning_effort ? { reasoning: { effort: reasoning_effort } } : {}),
         input,
         store: false,
-        tools: payload.tools?.map((tool) => this.convertChatCompletionToolToResponseTool(tool)),
+        tools: tools?.map((tool) => this.convertChatCompletionToolToResponseTool(tool)),
       } as OpenAI.Responses.ResponseCreateParamsStreaming;
 
       if (debug?.responses?.()) {

package/src/libs/model-runtime/utils/streams/openai/__snapshots__/responsesStream.test.ts.snap

@@ -86,11 +86,11 @@ exports[`OpenAIResponsesStream > Reasoning > summary 1`] = `
   "data: " analyzing"
 
 ",
-  "id: resp_684313b89200819087f27686e0c822260b502bf083132d0d
+  "id: rs_684313b9774481908ee856625f82fb8c0b502bf083132d0d
 ",
-  "event: data
+  "event: text
 ",
-  "data: {"type":"response.output_item.done","output_index":0,"item":{"id":"rs_684313b9774481908ee856625f82fb8c0b502bf083132d0d","type":"reasoning","summary":[{"type":"summary_text","text":"**Answering a numeric comparison**\\n\\nThe user is asking in Chinese which number is larger: 9.1 or 9.92. This is straightforward since 9.92 is clearly larger, as it's greater than 9.1. We can respond with \\"9.92大于9.1\\" without needing to search for more information. It's simple comparison, but I could also add a little explanation, noting that 9.92 is indeed 0.82 more than 9.1. However, keeping it simple with \\"9.92 > 9.1\\" is perfectly fine!"}]}}
+  "data: null
 
 ",
   "id: resp_684313b89200819087f27686e0c822260b502bf083132d0d
@@ -128,11 +128,11 @@ exports[`OpenAIResponsesStream > Reasoning > summary 1`] = `
   "data: {"type":"response.content_part.done","item_id":"msg_684313bee2c88190b0f4b09621ad7dc60b502bf083132d0d","output_index":1,"content_index":0,"part":{"type":"output_text","annotations":[],"text":"9.92 比 9.1 大。"}}
 
 ",
-  "id: resp_684313b89200819087f27686e0c822260b502bf083132d0d
+  "id: msg_684313bee2c88190b0f4b09621ad7dc60b502bf083132d0d
 ",
-  "event: data
+  "event: text
 ",
-  "data: {"type":"response.output_item.done","output_index":1,"item":{"id":"msg_684313bee2c88190b0f4b09621ad7dc60b502bf083132d0d","type":"message","status":"completed","content":[{"type":"output_text","annotations":[],"text":"9.92 比 9. 大。"}],"role":"assistant"}}
+  "data: null
 
 ",
   "id: resp_684313b89200819087f27686e0c822260b502bf083132d0d

package/src/libs/model-runtime/utils/streams/openai/responsesStream.ts

@@ -1,7 +1,7 @@
 import OpenAI from 'openai';
 import type { Stream } from 'openai/streaming';
 
-import { ChatMessageError } from '@/types/message';
+import { ChatMessageError, CitationItem } from '@/types/message';
 
 import { AgentRuntimeErrorType } from '../../../error';
 import { convertResponseUsage } from '../../usageConverter';
@@ -20,7 +20,17 @@ import {
 import { OpenAIStreamOptions } from './openai';
 
 const transformOpenAIStream = (
-  chunk: OpenAI.Responses.ResponseStreamEvent,
+  chunk: OpenAI.Responses.ResponseStreamEvent | {
+    annotation: {
+      end_index: number;
+      start_index: number;
+      title: string;
+      type: 'url_citation';
+      url: string;
+    };
+    item_id: string;
+    type: 'response.output_text.annotation.added';
+  },
   streamContext: StreamContext,
 ): StreamProtocolChunk | StreamProtocolChunk[] => {
   // handle the first chunk error
@@ -42,6 +52,7 @@ const transformOpenAIStream = (
     switch (chunk.type) {
       case 'response.created': {
         streamContext.id = chunk.response.id;
+        streamContext.returnedCitationArray = [];
 
         return { data: chunk.response.status, id: streamContext.id, type: 'data' };
       }
@@ -106,6 +117,31 @@ const transformOpenAIStream = (
         return { data: chunk.delta, id: chunk.item_id, type: 'reasoning' };
       }
 
+      case 'response.output_text.annotation.added': {
+        const citations = chunk.annotation;
+
+        if (streamContext.returnedCitationArray) {
+          streamContext.returnedCitationArray.push({
+            title: citations.title,
+            url: citations.url,
+          } as CitationItem);
+        }
+
+        return { data: null, id: chunk.item_id, type: 'text' };
+      }
+
+      case 'response.output_item.done': {
+        if (streamContext.returnedCitationArray?.length) {
+          return {
+            data: { citations: streamContext.returnedCitationArray },
+            id: chunk.item.id,
+            type: 'grounding',
+          }
+        }
+
+        return { data: null, id: chunk.item.id, type: 'text' };
+      }
+
       case 'response.completed': {
         if (chunk.response.usage) {
           return {

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,16 @@ class ChatService {
       sdkType = providerConfig?.settings.sdkType || 'openai';
     }
 
+    const userPreferTransitionMode =
+      userGeneralSettingsSelectors.transitionMode(getUserStoreState());
+
+    // The order of the array is very important.
+    const mergedResponseAnimation = [
+      providerConfig?.settings?.responseAnimation || {},
+      userPreferTransitionMode,
+      responseAnimation,
+    ].reduce((acc, cur) => merge(acc, standardizeAnimationStyle(cur)), {});
+
     return fetchSSE(API_ENDPOINTS.chat(sdkType), {
       body: JSON.stringify(payload),
       fetcher: fetcher,
@@ -388,11 +404,8 @@ class ChatService {
       onErrorHandle: options?.onErrorHandle,
       onFinish: options?.onFinish,
       onMessageHandle: options?.onMessageHandle,
+      responseAnimation: mergedResponseAnimation,
       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;
 }