@lobehub/chat 1.135.3 → 1.135.4

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 # Changelog
 
+### [Version 1.135.4](https://github.com/lobehub/lobe-chat/compare/v1.135.3...v1.135.4)
+
+<sup>Released on **2025-10-07**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor chat item.
+
+#### 💄 Styles
+
+- **misc**: Add GPT-5 pro model.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor chat item, closes [#9599](https://github.com/lobehub/lobe-chat/issues/9599) ([1f36158](https://github.com/lobehub/lobe-chat/commit/1f36158))
+
+#### Styles
+
+- **misc**: Add GPT-5 pro model, closes [#9594](https://github.com/lobehub/lobe-chat/issues/9594) ([775f30b](https://github.com/lobehub/lobe-chat/commit/775f30b))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.135.3](https://github.com/lobehub/lobe-chat/compare/v1.135.2...v1.135.3)
 
 <sup>Released on **2025-10-07**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Add GPT-5 pro model."
+      ]
+    },
+    "date": "2025-10-07",
+    "version": "1.135.4"
+  },
   {
     "children": {
       "improvements": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.135.3",
+  "version": "1.135.4",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -301,7 +301,7 @@
     "@peculiar/webcrypto": "^1.5.0",
     "@prettier/sync": "^0.6.1",
     "@semantic-release/exec": "^6.0.3",
-    "@testing-library/jest-dom": "~6.9.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/chroma-js": "^3.1.1",

package/packages/const/src/index.ts

@@ -5,6 +5,7 @@ export * from './desktop';
 export * from './guide';
 export * from './layoutTokens';
 export * from './message';
+export * from './meta';
 export * from './session';
 export * from './settings';
 export * from './trace';

package/packages/const/src/settings/index.ts

@@ -9,6 +9,7 @@ import { DEFAULT_TOOL_CONFIG } from './tool';
 import { DEFAULT_TTS_CONFIG } from './tts';
 
 export * from './agent';
+export * from './common';
 export * from './group';
 export * from './hotkey';
 export * from './llm';

package/packages/model-bank/src/aiModels/aihubmix.ts

@@ -1,6 +1,31 @@
 import { AIChatModelCard } from '../types/aiModel';
 
 const aihubmixModels: AIChatModelCard[] = [
+  {
+    abilities: {
+      functionCall: true,
+      reasoning: true,
+      search: true,
+      vision: true,
+    },
+    contextWindowTokens: 400_000,
+    description: 'GPT-5 pro 使用更多计算来更深入地思考，并持续提供更好的答案。',
+    displayName: 'GPT-5 pro',
+    id: 'gpt-5-pro',
+    maxOutput: 272_000,
+    pricing: {
+      units: [
+        { name: 'textInput', rate: 15, strategy: 'fixed', unit: 'millionTokens' },
+        { name: 'textOutput', rate: 120, strategy: 'fixed', unit: 'millionTokens' },
+      ],
+    },
+    releasedAt: '2025-10-06',
+    settings: {
+      extendParams: ['textVerbosity'],
+      searchImpl: 'params',
+    },
+    type: 'chat',
+  },
   {
     abilities: {
       functionCall: true,

package/packages/model-bank/src/aiModels/nvidia.ts

@@ -9,8 +9,24 @@ const nvidiaChatModels: AIChatModelCard[] = [
     contextWindowTokens: 131_072,
     description:
       'DeepSeek V3.1：下一代推理模型，提升了复杂推理与链路思考能力，适合需要深入分析的任务。',
-    displayName: 'DeepSeek V3.1',
+    displayName: 'DeepSeek V3.1 Terminus',
     enabled: true,
+    id: 'deepseek-ai/deepseek-v3.1-terminus',
+    maxOutput: 16_384,
+    settings: {
+      extendParams: ['enableReasoning'],
+    },
+    type: 'chat',
+  },
+  {
+    abilities: {
+      functionCall: true,
+      reasoning: true,
+    },
+    contextWindowTokens: 131_072,
+    description:
+      'DeepSeek V3.1：下一代推理模型，提升了复杂推理与链路思考能力，适合需要深入分析的任务。',
+    displayName: 'DeepSeek V3.1',
     id: 'deepseek-ai/deepseek-v3.1',
     maxOutput: 16_384,
     settings: {

package/packages/model-bank/src/aiModels/openai.ts

@@ -18,6 +18,31 @@ export const gptImage1ParamsSchema: ModelParamsSchema = {
 };
 
 export const openaiChatModels: AIChatModelCard[] = [
+  {
+    abilities: {
+      functionCall: true,
+      reasoning: true,
+      search: true,
+      vision: true,
+    },
+    contextWindowTokens: 400_000,
+    description: 'GPT-5 pro 使用更多计算来更深入地思考，并持续提供更好的答案。',
+    displayName: 'GPT-5 pro',
+    id: 'gpt-5-pro',
+    maxOutput: 272_000,
+    pricing: {
+      units: [
+        { name: 'textInput', rate: 15, strategy: 'fixed', unit: 'millionTokens' },
+        { name: 'textOutput', rate: 120, strategy: 'fixed', unit: 'millionTokens' },
+      ],
+    },
+    releasedAt: '2025-10-06',
+    settings: {
+      extendParams: ['textVerbosity'],
+      searchImpl: 'params',
+    },
+    type: 'chat',
+  },
   {
     abilities: {
       functionCall: true,
@@ -614,7 +639,7 @@ export const openaiChatModels: AIChatModelCard[] = [
     contextWindowTokens: 128_000,
     description: 'GPT-4o Audio Preview 模型，支持音频输入输出',
     displayName: 'GPT-4o Audio Preview',
-    id: 'gpt-4o-audio-preview', // deprecated on 2025-10-10
+    id: 'gpt-4o-audio-preview',
     maxOutput: 16_384,
     pricing: {
       units: [
@@ -1046,9 +1071,63 @@ export const openaiImageModels: AIImageModelCard[] = [
         { name: 'imageInput', rate: 10, strategy: 'fixed', unit: 'millionTokens' },
         { name: 'imageInput_cacheRead', rate: 2.5, strategy: 'fixed', unit: 'millionTokens' },
         { name: 'imageOutput', rate: 40, strategy: 'fixed', unit: 'millionTokens' },
+        {
+          lookup: {
+            prices: {
+              'low_1024x1024': 0.011,
+              'low_1024x1536': 0.016,
+              'low_1536x1024': 0.016,
+              'medium_1024x1024': 0.042,
+              'medium_1024x1536': 0.063,
+              'medium_1536x1024': 0.063,
+              'high_1024x1024': 0.167,
+              'high_1024x1536': 0.25,
+              'high_1536x1024': 0.25,
+            },
+            pricingParams: ['quality', 'size'],
+          },
+          name: 'imageGeneration',
+          strategy: 'lookup',
+          unit: 'image',
+        },
+      ],
+    },
+    resolutions: ['1024x1024', '1024x1536', '1536x1024'],
+    type: 'image',
+  },
+  {
+    description: '成本更低的 GPT Image 1 版本，原生支持文本与图像输入并生成图像输出。',
+    displayName: 'GPT Image 1 Mini',
+    enabled: true,
+    id: 'gpt-image-1-mini',
+    parameters: gptImage1ParamsSchema,
+    pricing: {
+      units: [
+        { name: 'textInput', rate: 2, strategy: 'fixed', unit: 'millionTokens' },
+        { name: 'textInput_cacheRead', rate: 0.2, strategy: 'fixed', unit: 'millionTokens' },
+        { name: 'imageInput', rate: 2.5, strategy: 'fixed', unit: 'millionTokens' },
+        { name: 'imageInput_cacheRead', rate: 0.25, strategy: 'fixed', unit: 'millionTokens' },
+        { name: 'imageOutput', rate: 8, strategy: 'fixed', unit: 'millionTokens' },
+        {
+          lookup: {
+            prices: {
+              'low_1024x1024': 0.005,
+              'low_1024x1536': 0.006,
+              'low_1536x1024': 0.006,
+              'medium_1024x1024': 0.011,
+              'medium_1024x1536': 0.015,
+              'medium_1536x1024': 0.015,
+            },
+            pricingParams: ['quality', 'size'],
+          },
+          name: 'imageGeneration',
+          strategy: 'lookup',
+          unit: 'image',
+        },
       ],
     },
     resolutions: ['1024x1024', '1024x1536', '1536x1024'],
+    releasedAt: '2025-10-06',
     type: 'image',
   },
   {

package/packages/model-runtime/src/const/models.ts

@@ -36,6 +36,8 @@ export const responsesAPIModels = new Set([
   'computer-use-preview',
   'computer-use-preview-2025-03-11',
   'gpt-5-codex',
+  'gpt-5-pro',
+  'gpt-5-pro-2025-10-06',
 ]);
 
 /**

package/packages/model-runtime/src/providers/openai/index.ts

@@ -81,23 +81,27 @@ export const LobeOpenAI = createOpenAICompatibleRuntime({
 
       const openaiTools = enabledSearch
         ? [
-            ...(tools || []),
-            {
-              type: 'web_search',
-              ...(oaiSearchContextSize && {
-                search_context_size: oaiSearchContextSize,
-              }),
-            },
-          ]
+          ...(tools || []),
+          {
+            type: 'web_search',
+            ...(oaiSearchContextSize && {
+              search_context_size: oaiSearchContextSize,
+            }),
+          },
+        ]
         : tools;
 
       if (prunePrefixes.some((prefix) => model.startsWith(prefix))) {
+        const reasoning = payload.reasoning
+          ? { ...payload.reasoning, summary: 'auto' }
+          : { summary: 'auto' };
+        if (model.startsWith('gpt-5-pro')) {
+          reasoning.effort = 'high';
+        }
         return pruneReasoningPayload({
           ...rest,
           model,
-          reasoning: payload.reasoning
-            ? { ...payload.reasoning, summary: 'auto' }
-            : { summary: 'auto' },
+          reasoning,
           ...(enableServiceTierFlex && supportsFlexTier(model) && { service_tier: 'flex' }),
           stream: payload.stream ?? true,
           tools: openaiTools as any,

package/packages/model-runtime/src/providers/openrouter/index.ts

@@ -4,8 +4,8 @@ import { createOpenAICompatibleRuntime } from '../../core/openaiCompatibleFactor
 import { processMultiProviderModelList } from '../../utils/modelParse';
 import { OpenRouterModelCard, OpenRouterReasoning } from './type';
 
-const formatPrice = (price: string) => {
-  if (price === '-1') return undefined;
+const formatPrice = (price?: string) => {
+  if (price === undefined || price === '-1') return undefined;
   return Number((Number(price) * 1e6).toPrecision(5));
 };
 
@@ -81,6 +81,9 @@ export const LobeOpenRouterAI = createOpenAICompatibleRuntime({
 
       const inputPrice = formatPrice(endpoint?.pricing?.prompt);
       const outputPrice = formatPrice(endpoint?.pricing?.completion);
+      const cachedInputPrice = formatPrice(endpoint?.pricing?.input_cache_read);
+      const writeCacheInputPrice = formatPrice(endpoint?.pricing?.input_cache_write);
+
       const isFree = (inputPrice === 0 || outputPrice === 0) && !displayName.endsWith('(free)');
       if (isFree) {
         displayName += ' (free)';
@@ -98,6 +101,8 @@ export const LobeOpenRouterAI = createOpenAICompatibleRuntime({
             : undefined,
         pricing: {
           input: inputPrice,
+          cachedInput: cachedInputPrice,
+          writeCacheInput: writeCacheInputPrice,
           output: outputPrice,
         },
         reasoning: endpoint?.supports_reasoning || false,

package/packages/model-runtime/src/providers/openrouter/type.ts

@@ -1,8 +1,10 @@
 interface ModelPricing {
   completion: string;
-  image: string;
+  image?: string;
+  input_cache_read?: string;
+  input_cache_write?: string;
   prompt: string;
-  request: string;
+  request?: string;
 }
 
 export interface OpenRouterModelCard {

package/packages/model-runtime/src/providers/vercelaigateway/index.ts

@@ -13,6 +13,8 @@ export interface VercelAIGatewayModelCard {
   pricing?: {
     input?: string | number;
     output?: string | number;
+    input_cache_read?: string | number;
+    input_cache_write?: string | number;
   };
   tags?: string[];
   type?: string;
@@ -68,6 +70,9 @@ export const LobeVercelAIGatewayAI = createOpenAICompatibleRuntime({
 
       const inputPrice = formatPrice(m.pricing?.input);
       const outputPrice = formatPrice(m.pricing?.output);
+      const cachedInputPrice = formatPrice(m.pricing?.input_cache_read);
+      const writeCacheInputPrice = formatPrice(m.pricing?.input_cache_write);
+
       let displayName = m.name ?? m.id;
       if (inputPrice === 0 && outputPrice === 0) {
         displayName += ' (free)';
@@ -82,8 +87,10 @@ export const LobeVercelAIGatewayAI = createOpenAICompatibleRuntime({
         id: m.id,
         maxOutput: typeof m.max_tokens === 'number' ? m.max_tokens : undefined,
         pricing: {
+          cachedInput: cachedInputPrice,
           input: inputPrice,
           output: outputPrice,
+          writeCacheInput: writeCacheInputPrice,
         },
         reasoning: tags.includes('reasoning') || false,
         type: m.type === 'embedding' ? 'embedding' : 'chat',

package/packages/model-runtime/src/utils/modelParse.ts

@@ -326,13 +326,25 @@ const processModelCard = (
     return undefined;
   }
 
-  const formatPricing = (pricing?: { input?: number; output?: number; units?: any[] }) => {
+  const formatPricing = (pricing?: {
+    cachedInput?: number;
+    input?: number;
+    output?: number;
+    units?: any[];
+    writeCacheInput?: number;
+  }) => {
     if (!pricing || typeof pricing !== 'object') return undefined;
     if (Array.isArray(pricing.units)) {
       return { units: pricing.units };
     }
-    const { input, output } = pricing;
-    if (typeof input !== 'number' && typeof output !== 'number') return undefined;
+    const { input, output, cachedInput, writeCacheInput } = pricing;
+    if (
+      typeof input !== 'number' &&
+      typeof output !== 'number' &&
+      typeof cachedInput !== 'number' &&
+      typeof writeCacheInput !== 'number'
+    )
+      return undefined;
 
     const units = [];
     if (typeof input === 'number') {
@@ -351,6 +363,22 @@ const processModelCard = (
         unit: 'millionTokens' as const,
       });
     }
+    if (typeof cachedInput === 'number') {
+      units.push({
+        name: 'textInput_cacheRead' as const,
+        rate: cachedInput,
+        strategy: 'fixed' as const,
+        unit: 'millionTokens' as const,
+      });
+    }
+    if (typeof writeCacheInput === 'number') {
+      units.push({
+        name: 'textInput_cacheWrite' as const,
+        rate: writeCacheInput,
+        strategy: 'fixed' as const,
+        unit: 'millionTokens' as const,
+      });
+    }
     return { units };
   };
 

package/packages/types/src/aiProvider.ts

@@ -1,7 +1,6 @@
+import { AiModelForSelect, EnabledAiModel, ModelSearchImplementType } from 'model-bank';
 import { z } from 'zod';
 
-import { AiModelForSelect, EnabledAiModel, ModelSearchImplementType } from '../../model-bank/src/types/aiModel';
-
 export type ResponseAnimationStyle = 'smooth' | 'fadeIn' | 'none';
 export type ResponseAnimation =
   | {

package/packages/types/src/discover/models.ts

@@ -1,5 +1,6 @@
-import { LobeDefaultAiModelListItem } from '../../../model-bank/src/types/aiModel';
-import { ModelProviderCard } from '@/types/llm';
+import { LobeDefaultAiModelListItem } from 'model-bank';
+
+import { ModelProviderCard } from '../llm';
 
 export enum ModelSorts {
   ContextWindowTokens = 'contextWindowTokens',

package/packages/types/src/discover/providers.ts

@@ -1,5 +1,6 @@
-import { LobeDefaultAiModelListItem } from '../../../model-bank/src/types/aiModel';
-import { ModelProviderCard } from '@/types/llm';
+import { LobeDefaultAiModelListItem } from 'model-bank';
+
+import { ModelProviderCard } from '../llm';
 
 export enum ProviderSorts {
   Default = 'default',

package/packages/types/src/message/chat.ts

@@ -46,9 +46,22 @@ export interface ChatMessageExtra {
   tts?: ChatTTS;
 }
 
+export interface AssistantContentBlock {
+  content: string;
+  fileList?: ChatFileItem[];
+  id: string;
+  imageList?: ChatImageItem[];
+  tools?: ChatToolPayload[];
+}
+
 export interface ChatMessage {
   // Group chat fields (alphabetically before other fields)
   agentId?: string | 'supervisor';
+  /**
+   * children messages for grouped display
+   * Used to group tool messages under their parent assistant message
+   */
+  children?: AssistantContentBlock[];
   chunksList?: ChatFileChunk[];
   content: string;
   createdAt: number;

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatList/ChatItem/index.tsx

@@ -1,8 +1,7 @@
 import { createStyles } from 'antd-style';
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 
 import { ChatItem } from '@/features/Conversation';
-import ActionsBar from '@/features/Conversation/components/ChatItem/ActionsBar';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
@@ -64,11 +63,8 @@ const MainChatItem = memo<ThreadChatItemProps>(({ id, index }) => {
 
   const placement = displayMode === 'chat' && userRole === 'user' ? 'end' : 'start';
 
-  const actionBar = useMemo(() => <ActionsBar id={id} index={index} />, [id]);
-
   return (
     <ChatItem
-      actionBar={actionBar}
       className={showThread ? cx(styles.line, styles[placement]) : ''}
       enableHistoryDivider={enableHistoryDivider}
       endRender={

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatList/WelcomeChatItem/WelcomeMessage.tsx

@@ -4,7 +4,7 @@ import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import ChatItem from '@/features/ChatItem';
+import { ChatItem } from '@/features/ChatItem';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors, agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';

package/src/app/[variants]/(main)/settings/provider/features/ModelList/CreateNewModelModal/Form.tsx

@@ -1,5 +1,6 @@
 import { Input } from '@lobehub/ui';
 import { Checkbox, Form, FormInstance, Select } from 'antd';
+import { AiModelType } from 'model-bank';
 import { memo, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -7,8 +8,6 @@ import MaxTokenSlider from '@/components/MaxTokenSlider';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { ChatModelCard } from '@/types/llm';
 
-import { AiModelType } from '../../../../../../../../../packages/model-bank/src/types/aiModel';
-
 interface ModelConfigFormProps {
   idEditable?: boolean;
   initialValues?: ChatModelCard;

package/src/app/[variants]/(main)/settings/provider/features/ModelList/ModelItem.tsx

@@ -3,6 +3,7 @@ import { ActionIcon, Tag, Text, copyToClipboard } from '@lobehub/ui';
 import { App, Switch } from 'antd';
 import { createStyles, useTheme } from 'antd-style';
 import { LucidePencil, TrashIcon } from 'lucide-react';
+import { AiModelSourceEnum, AiProviderModelListItem } from 'model-bank';
 import { memo, use, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -17,10 +18,6 @@ import {
   getTextOutputUnitRate,
 } from '@/utils/pricing';
 
-import {
-  AiModelSourceEnum,
-  AiProviderModelListItem,
-} from '../../../../../../../../packages/model-bank/src/types/aiModel';
 import ModelConfigModal from './ModelConfigModal';
 import { ProviderSettingsContext } from './ProviderSettingsContext';
 

package/src/app/[variants]/(main)/settings/provider/features/ModelList/SortModelModal/ListItem.tsx

@@ -1,10 +1,9 @@
 import { ModelIcon } from '@lobehub/icons';
 import { SortableList } from '@lobehub/ui';
+import { AiProviderModelListItem } from 'model-bank';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { AiProviderModelListItem } from '../../../../../../../../../packages/model-bank/src/types/aiModel';
-
 const ListItem = memo<AiProviderModelListItem>(({ id, displayName }) => {
   return (
     <>

package/src/app/[variants]/(main)/settings/provider/features/ModelList/SortModelModal/index.tsx

@@ -1,13 +1,13 @@
 import { Button, Modal, SortableList } from '@lobehub/ui';
 import { App } from 'antd';
 import { createStyles } from 'antd-style';
+import { AiProviderModelListItem } from 'model-bank';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { useAiInfraStore } from '@/store/aiInfra';
 
-import { AiProviderModelListItem } from '../../../../../../../../../packages/model-bank/src/types/aiModel';
 import ListItem from './ListItem';
 
 const useStyles = createStyles(({ css, token }) => ({

package/src/{components → features}/ChatItem/ChatItem.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useResponsive } from 'antd-style';
-import { memo, useEffect, useRef, useState } from 'react';
+import { memo, useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import Actions from './components/Actions';
@@ -37,14 +37,12 @@ const ChatItem = memo<ChatItemProps>(
     onEditingChange,
     messageExtra,
     renderMessage,
-    text,
     errorMessage,
     onDoubleClick,
-    fontSize,
     aboveMessage,
     belowMessage,
     markdownProps,
-    actionsWrapWidth = 54,
+    id,
     ...rest
   }) => {
     const { mobile } = useResponsive();
@@ -61,37 +59,10 @@ const ChatItem = memo<ChatItemProps>(
     // 在 ChatItem 组件中添加
     const contentRef = useRef<HTMLDivElement>(null);
     const containerRef = useRef<HTMLDivElement>(null);
-    const [layoutMode, setLayoutMode] = useState<'horizontal' | 'vertical'>(
-      variant === 'bubble' ? 'horizontal' : 'vertical',
+    const [layoutMode] = useState<'horizontal' | 'vertical'>(
+      placement === 'right' ? 'horizontal' : 'vertical',
     );
 
-    // 使用 ResizeObserver 监控内容和容器尺寸
-    useEffect(() => {
-      if (variant === 'docs') {
-        setLayoutMode('vertical');
-        return;
-      }
-
-      if (!contentRef.current || !containerRef.current) return;
-
-      const observer = new ResizeObserver(() => {
-        if (!contentRef.current || !containerRef.current) return;
-
-        const containerWidth = containerRef.current.clientWidth;
-        const contentWidth = contentRef.current.scrollWidth; // 使用scrollWidth获取实际内容宽度
-
-        // 预留给Actions的最小空间 (根据实际Actions大小调整)
-
-        // 只有当内容宽度 + Actions最小宽度 > 容器宽度时才切换布局
-        setLayoutMode(contentWidth + actionsWrapWidth > containerWidth ? 'vertical' : 'horizontal');
-      });
-
-      observer.observe(contentRef.current);
-      observer.observe(containerRef.current);
-
-      return () => observer.disconnect();
-    }, [variant, actionsWrapWidth]);
-
     return (
       <Flexbox
         className={cx(styles.container, className)}
@@ -139,7 +110,7 @@ const ChatItem = memo<ChatItemProps>(
               ) : (
                 <MessageContent
                   editing={editing}
-                  fontSize={fontSize}
+                  id={id!}
                   markdownProps={markdownProps}
                   message={message}
                   messageExtra={
@@ -156,7 +127,6 @@ const ChatItem = memo<ChatItemProps>(
                   placement={placement}
                   primary={primary}
                   renderMessage={renderMessage}
-                  text={text}
                   variant={variant}
                 />
               )}