@lobehub/lobehub 2.0.0-next.115 → 2.0.0-next.117

package/packages/model-runtime/src/core/streams/protocol.ts

@@ -77,6 +77,10 @@ export interface StreamProtocolChunk {
     | 'reasoning_signature'
     // flagged reasoning signature
     | 'flagged_reasoning_signature'
+    // multimodal content part in reasoning
+    | 'reasoning_part'
+    // multimodal content part in content
+    | 'content_part'
     // Search or Grounding
     | 'grounding'
     // stop signal
@@ -91,6 +95,21 @@ export interface StreamProtocolChunk {
     | 'data';
 }
 
+/**
+ * Stream content part chunk data for multimodal support
+ */
+export interface StreamPartChunkData {
+  content: string;
+  // whether this part is in reasoning or regular content
+  inReasoning: boolean;
+  // image MIME type
+  mimeType?: string;
+  // text content or base64 image data
+  partType: 'text' | 'image';
+  // Optional signature for reasoning verification (Google Gemini feature)
+  thoughtSignature?: string;
+}
+
 export interface StreamToolCallChunkData {
   function?: {
     arguments?: string;

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

@@ -1,3 +1,4 @@
+export * from './const/models';
 export * from './core/BaseAI';
 export { pruneReasoningPayload } from './core/contextBuilders/openai';
 export { ModelRuntime } from './core/ModelRuntime';

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

@@ -1,9 +1,14 @@
 import Anthropic, { ClientOptions } from '@anthropic-ai/sdk';
 import { ModelProvider } from 'model-bank';
 
+import { hasTemperatureTopPConflict } from '../../const/models';
 import { LobeRuntimeAI } from '../../core/BaseAI';
-import { buildAnthropicMessages, buildAnthropicTools } from '../../core/contextBuilders/anthropic';
-import { MODEL_PARAMETER_CONFLICTS, resolveParameters } from '../../core/parameterResolver';
+import {
+  buildAnthropicMessages,
+  buildAnthropicTools,
+  buildSearchTool,
+} from '../../core/contextBuilders/anthropic';
+import { resolveParameters } from '../../core/parameterResolver';
 import { AnthropicStream } from '../../core/streams';
 import {
   type ChatCompletionErrorPayload,
@@ -22,6 +27,7 @@ import { StreamingResponse } from '../../utils/response';
 import { createAnthropicGenerateObject } from './generateObject';
 import { handleAnthropicError } from './handleAnthropicError';
 import { resolveCacheTTL } from './resolveCacheTTL';
+import { resolveMaxTokens } from './resolveMaxTokens';
 
 export interface AnthropicModelCard {
   created_at: string;
@@ -31,8 +37,6 @@ export interface AnthropicModelCard {
 
 type anthropicTools = Anthropic.Tool | Anthropic.WebSearchTool20250305;
 
-const modelsWithSmallContextWindow = new Set(['claude-3-opus-20240229', 'claude-3-haiku-20240307']);
-
 const DEFAULT_BASE_URL = 'https://api.anthropic.com';
 
 interface AnthropicAIParams extends ClientOptions {
@@ -140,15 +144,13 @@ export class LobeAnthropicAI implements LobeRuntimeAI {
     } = payload;
 
     const { anthropic: anthropicModels } = await import('model-bank');
-    const modelConfig = anthropicModels.find((m) => m.id === model);
-    const defaultMaxOutput = modelConfig?.maxOutput;
 
-    // 配置优先级：用户设置 > 模型配置 > 硬编码默认值
-    const getMaxTokens = () => {
-      if (max_tokens) return max_tokens;
-      if (defaultMaxOutput) return defaultMaxOutput;
-      return undefined;
-    };
+    const resolvedMaxTokens = await resolveMaxTokens({
+      max_tokens,
+      model,
+      providerModels: anthropicModels,
+      thinking,
+    });
 
     const system_message = messages.find((m) => m.role === 'system');
     const user_messages = messages.filter((m) => m.role !== 'system');
@@ -170,20 +172,8 @@ export class LobeAnthropicAI implements LobeRuntimeAI {
     });
 
     if (enabledSearch) {
-      // Limit the number of searches per request
-      const maxUses = process.env.ANTHROPIC_MAX_USES;
-
-      const webSearchTool: Anthropic.WebSearchTool20250305 = {
-        name: 'web_search',
-        type: 'web_search_20250305',
-        ...(maxUses &&
-          Number.isInteger(Number(maxUses)) &&
-          Number(maxUses) > 0 && {
-            max_uses: Number(maxUses),
-          }),
-      };
-
-      // 如果已有工具，则添加到现有工具列表中；否则创建新的工具列表
+      const webSearchTool = buildSearchTool();
+
       if (postTools && postTools.length > 0) {
         postTools = [...postTools, webSearchTool];
       } else {
@@ -192,19 +182,17 @@ export class LobeAnthropicAI implements LobeRuntimeAI {
     }
 
     if (!!thinking && thinking.type === 'enabled') {
-      const maxTokens = getMaxTokens() || 32_000; // Claude Opus 4 has minimum maxOutput
-
       // `temperature` may only be set to 1 when thinking is enabled.
       // `top_p` must be unset when thinking is enabled.
       return {
-        max_tokens: maxTokens,
+        max_tokens: resolvedMaxTokens,
         messages: postMessages,
         model,
         system: systemPrompts,
         thinking: {
           ...thinking,
           budget_tokens: thinking?.budget_tokens
-            ? Math.min(thinking.budget_tokens, maxTokens - 1) // `max_tokens` must be greater than `thinking.budget_tokens`.
+            ? Math.min(thinking.budget_tokens, resolvedMaxTokens - 1) // `max_tokens` must be greater than `thinking.budget_tokens`.
             : 1024,
         },
         tools: postTools,
@@ -212,7 +200,7 @@ export class LobeAnthropicAI implements LobeRuntimeAI {
     }
 
     // Resolve temperature and top_p parameters based on model constraints
-    const hasConflict = MODEL_PARAMETER_CONFLICTS.ANTHROPIC_CLAUDE_4_PLUS.has(model);
+    const hasConflict = hasTemperatureTopPConflict(model);
     const resolvedParams = resolveParameters(
       { temperature, top_p },
       { hasConflict, normalizeTemperature: true, preferTemperature: true },
@@ -221,7 +209,7 @@ export class LobeAnthropicAI implements LobeRuntimeAI {
     return {
       // claude 3 series model hax max output token of 4096, 3.x series has 8192
       // https://docs.anthropic.com/en/docs/about-claude/models/all-models#:~:text=200K-,Max%20output,-Normal%3A
-      max_tokens: getMaxTokens() || (modelsWithSmallContextWindow.has(model) ? 4096 : 8192),
+      max_tokens: resolvedMaxTokens,
       messages: postMessages,
       model,
       system: systemPrompts,

package/packages/model-runtime/src/providers/anthropic/resolveMaxTokens.ts

@@ -0,0 +1,35 @@
+import type { ChatStreamPayload } from '../../types';
+
+const smallContextWindowPatterns = [
+  /claude-3-opus-20240229/,
+  /claude-3-haiku-20240307/,
+  /claude-v2(:1)?$/,
+];
+
+/**
+ * Resolve the max_tokens value to align Anthropic and Bedrock behavior.
+ * Priority: user input > model-bank default maxOutput > hardcoded fallback (context-window aware).
+ */
+export const resolveMaxTokens = async ({
+  max_tokens,
+  model,
+  thinking,
+  providerModels,
+}: {
+  max_tokens?: number;
+  model: string;
+  providerModels: { id: string; maxOutput?: number }[];
+  thinking?: ChatStreamPayload['thinking'];
+}) => {
+  const defaultMaxOutput = providerModels.find((m) => m.id === model)?.maxOutput;
+
+  const preferredMaxTokens = max_tokens ?? defaultMaxOutput;
+
+  if (preferredMaxTokens) return preferredMaxTokens;
+
+  if (thinking?.type === 'enabled') return 32_000;
+
+  const hasSmallContextWindow = smallContextWindowPatterns.some((pattern) => pattern.test(model));
+
+  return hasSmallContextWindow ? 4096 : 8192;
+};

package/packages/model-runtime/src/providers/bedrock/index.test.ts

@@ -10,8 +10,6 @@ import { AgentRuntimeErrorType } from '../../types/error';
 import * as debugStreamModule from '../../utils/debugStream';
 import { LobeBedrockAI, experimental_buildLlama2Prompt } from './index';
 
-const provider = 'bedrock';
-
 // Mock the console.error to avoid polluting test output
 vi.spyOn(console, 'error').mockImplementation(() => {});
 
@@ -478,7 +476,7 @@ describe('LobeBedrockAI', () => {
             accept: 'application/json',
             body: JSON.stringify({
               anthropic_version: 'bedrock-2023-05-31',
-              max_tokens: 4096,
+              max_tokens: 8192,
               messages: [
                 {
                   content: [
@@ -521,7 +519,7 @@ describe('LobeBedrockAI', () => {
             accept: 'application/json',
             body: JSON.stringify({
               anthropic_version: 'bedrock-2023-05-31',
-              max_tokens: 4096,
+              max_tokens: 8192,
               messages: [
                 {
                   content: [
@@ -565,7 +563,7 @@ describe('LobeBedrockAI', () => {
             accept: 'application/json',
             body: JSON.stringify({
               anthropic_version: 'bedrock-2023-05-31',
-              max_tokens: 4096,
+              max_tokens: 8192,
               messages: [
                 {
                   content: [
@@ -610,7 +608,7 @@ describe('LobeBedrockAI', () => {
             accept: 'application/json',
             body: JSON.stringify({
               anthropic_version: 'bedrock-2023-05-31',
-              max_tokens: 4096,
+              max_tokens: 64_000,
               messages: [
                 {
                   content: [
@@ -654,7 +652,7 @@ describe('LobeBedrockAI', () => {
             accept: 'application/json',
             body: JSON.stringify({
               anthropic_version: 'bedrock-2023-05-31',
-              max_tokens: 4096,
+              max_tokens: 8192,
               messages: [
                 {
                   content: [

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

@@ -1,3 +1,4 @@
+import type Anthropic from '@anthropic-ai/sdk';
 import {
   BedrockRuntimeClient,
   InvokeModelCommand,
@@ -5,9 +6,10 @@ import {
 } from '@aws-sdk/client-bedrock-runtime';
 import { ModelProvider } from 'model-bank';
 
+import { hasTemperatureTopPConflict } from '../../const/models';
 import { LobeRuntimeAI } from '../../core/BaseAI';
 import { buildAnthropicMessages, buildAnthropicTools } from '../../core/contextBuilders/anthropic';
-import { MODEL_PARAMETER_CONFLICTS, resolveParameters } from '../../core/parameterResolver';
+import { resolveParameters } from '../../core/parameterResolver';
 import {
   AWSBedrockClaudeStream,
   AWSBedrockLlamaStream,
@@ -26,6 +28,7 @@ import { debugStream } from '../../utils/debugStream';
 import { getModelPricing } from '../../utils/getModelPricing';
 import { StreamingResponse } from '../../utils/response';
 import { resolveCacheTTL } from '../anthropic/resolveCacheTTL';
+import { resolveMaxTokens } from '../anthropic/resolveMaxTokens';
 
 /**
  * A prompt constructor for HuggingFace LLama 2 chat models.
@@ -62,19 +65,24 @@ export function experimental_buildLlama2Prompt(messages: { content: string; role
 export interface LobeBedrockAIParams {
   accessKeyId?: string;
   accessKeySecret?: string;
+  id?: string;
   region?: string;
   sessionToken?: string;
 }
 
 export class LobeBedrockAI implements LobeRuntimeAI {
   private client: BedrockRuntimeClient;
+  private id: string;
 
   region: string;
 
-  constructor({ region, accessKeyId, accessKeySecret, sessionToken }: LobeBedrockAIParams = {}) {
+  constructor(options: LobeBedrockAIParams = {}) {
+    const { id, region, accessKeyId, accessKeySecret, sessionToken } = options;
+
     if (!(accessKeyId && accessKeySecret))
       throw AgentRuntimeError.createError(AgentRuntimeErrorType.InvalidBedrockCredentials);
     this.region = region ?? 'us-east-1';
+    this.id = id ?? ModelProvider.Bedrock;
     this.client = new BedrockRuntimeClient({
       credentials: {
         accessKeyId: accessKeyId,
@@ -158,18 +166,28 @@ export class LobeBedrockAI implements LobeRuntimeAI {
       temperature,
       top_p,
       tools,
+      thinking,
     } = payload;
     const inputStartAt = Date.now();
     const system_message = messages.find((m) => m.role === 'system');
     const user_messages = messages.filter((m) => m.role !== 'system');
 
     // Resolve temperature and top_p parameters based on model constraints
-    const hasConflict = MODEL_PARAMETER_CONFLICTS.BEDROCK_CLAUDE_4_PLUS.has(model);
+    const hasConflict = hasTemperatureTopPConflict(model);
     const resolvedParams = resolveParameters(
       { temperature, top_p },
       { hasConflict, normalizeTemperature: true, preferTemperature: true },
     );
 
+    const { bedrock: bedrockModels } = await import('model-bank');
+
+    const resolvedMaxTokens = await resolveMaxTokens({
+      max_tokens,
+      model,
+      providerModels: bedrockModels,
+      thinking,
+    });
+
     const systemPrompts = !!system_message?.content
       ? ([
           {
@@ -177,19 +195,40 @@ export class LobeBedrockAI implements LobeRuntimeAI {
             text: system_message.content as string,
             type: 'text',
           },
-        ] as any)
+        ] as Anthropic.TextBlockParam[])
       : undefined;
 
-    const anthropicPayload = {
+    const postTools = buildAnthropicTools(tools, {
+      enabledContextCaching,
+    });
+
+    const anthropicBase = {
       anthropic_version: 'bedrock-2023-05-31',
-      max_tokens: max_tokens || 4096,
+      max_tokens: resolvedMaxTokens,
       messages: await buildAnthropicMessages(user_messages, { enabledContextCaching }),
       system: systemPrompts,
-      temperature: resolvedParams.temperature,
-      tools: buildAnthropicTools(tools, { enabledContextCaching }),
-      top_p: resolvedParams.top_p,
+      tools: postTools,
     };
 
+    const anthropicPayload =
+      thinking?.type === 'enabled'
+        ? {
+            ...anthropicBase,
+            thinking: {
+              ...thinking,
+              // `max_tokens` must be greater than `budget_tokens`
+              budget_tokens: Math.max(
+                1,
+                Math.min(thinking.budget_tokens || 1024, resolvedMaxTokens - 1),
+              ),
+            },
+          }
+        : {
+            ...anthropicBase,
+            temperature: resolvedParams.temperature,
+            top_p: resolvedParams.top_p,
+          };
+
     const command = new InvokeModelWithResponseStreamCommand({
       accept: 'application/json',
       body: JSON.stringify(anthropicPayload),
@@ -209,7 +248,7 @@ export class LobeBedrockAI implements LobeRuntimeAI {
         debugStream(debug).catch(console.error);
       }
 
-      const pricing = await getModelPricing(payload.model, ModelProvider.Bedrock);
+      const pricing = await getModelPricing(payload.model, this.id);
       const cacheTTL = resolveCacheTTL({ ...payload, enabledContextCaching }, anthropicPayload);
       const pricingOptions = cacheTTL ? { lookupParams: { ttl: cacheTTL } } : undefined;
 
@@ -218,7 +257,7 @@ export class LobeBedrockAI implements LobeRuntimeAI {
         AWSBedrockClaudeStream(prod, {
           callbacks: options?.callback,
           inputStartAt,
-          payload: { model, pricing, pricingOptions, provider: ModelProvider.Bedrock },
+          payload: { model, pricing, pricingOptions, provider: this.id },
         }),
         {
           headers: options?.headers,

package/packages/types/src/message/common/base.ts

@@ -26,14 +26,40 @@ export interface ChatCitationItem {
   url: string;
 }
 
+/**
+ * Message content part types for multimodal content support
+ */
+export interface MessageContentPartText {
+  text: string;
+  thoughtSignature?: string;
+  type: 'text';
+}
+
+export interface MessageContentPartImage {
+  image: string;
+  thoughtSignature?: string;
+  type: 'image';
+}
+
+export type MessageContentPart = MessageContentPartText | MessageContentPartImage;
+
 export interface ModelReasoning {
+  /**
+   * Reasoning content, can be plain string or serialized JSON array of MessageContentPart[]
+   */
   content?: string;
   duration?: number;
+  /**
+   * Flag indicating if content is multimodal (serialized MessageContentPart[])
+   */
+  isMultimodal?: boolean;
   signature?: string;
+  tempDisplayContent?: MessageContentPart[];
 }
 
 export const ModelReasoningSchema = z.object({
   content: z.string().optional(),
   duration: z.number().optional(),
+  isMultimodal: z.boolean().optional(),
   signature: z.string().optional(),
 });

package/packages/types/src/message/common/metadata.ts

@@ -78,6 +78,7 @@ export const ModelPerformanceSchema = z.object({
 export const MessageMetadataSchema = ModelUsageSchema.merge(ModelPerformanceSchema).extend({
   collapsed: z.boolean().optional(),
   inspectExpanded: z.boolean().optional(),
+  isMultimodal: z.boolean().optional(),
 });
 
 export interface ModelUsage extends ModelTokensUsage {
@@ -123,4 +124,10 @@ export interface MessageMetadata extends ModelUsage, ModelPerformance {
   compare?: boolean;
   usage?: ModelUsage;
   performance?: ModelPerformance;
+  /**
+   * Flag indicating if message content is multimodal (serialized MessageContentPart[])
+   */
+  isMultimodal?: boolean;
+  // message content is multimodal, display content in the streaming, won't save to db
+  tempDisplayContent?: string;
 }

package/packages/utils/src/index.ts

@@ -5,6 +5,7 @@ export * from './format';
 export * from './imageToBase64';
 export * from './keyboard';
 export * from './merge';
+export * from './multimodalContent';
 export * from './number';
 export * from './object';
 export * from './pricing';

package/packages/utils/src/multimodalContent.ts

@@ -0,0 +1,25 @@
+import { MessageContentPart } from '@lobechat/types';
+
+/**
+ * Serialize message content parts to JSON string for storage
+ */
+export function serializePartsForStorage(parts: MessageContentPart[]): string {
+  return JSON.stringify(parts);
+}
+
+/**
+ * Deserialize content string to message content parts
+ * Returns null if content is not valid JSON array of parts
+ */
+export function deserializeParts(content: string): MessageContentPart[] | null {
+  try {
+    const parsed = JSON.parse(content);
+    // Validate it's an array with valid part structure
+    if (Array.isArray(parsed) && parsed.length > 0 && parsed[0]?.type) {
+      return parsed as MessageContentPart[];
+    }
+  } catch {
+    // Not JSON, treat as plain text
+  }
+  return null;
+}

package/src/components/Thinking/index.tsx

@@ -4,7 +4,7 @@ import { createStyles } from 'antd-style';
 import { AnimatePresence, motion } from 'framer-motion';
 import { AtomIcon } from 'lucide-react';
 import { rgba } from 'polished';
-import { CSSProperties, RefObject, memo, useEffect, useRef, useState } from 'react';
+import { CSSProperties, ReactNode, RefObject, memo, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -76,7 +76,7 @@ const useStyles = createStyles(({ css, token }) => ({
 
 interface ThinkingProps {
   citations?: ChatCitationItem[];
-  content?: string;
+  content?: string | ReactNode;
   duration?: number;
   style?: CSSProperties;
   thinking?: boolean;
@@ -158,7 +158,7 @@ const Thinking = memo<ThinkingProps>((props) => {
           </Flexbox>
         )}
         <Flexbox gap={4} horizontal>
-          {showDetail && content && (
+          {showDetail && content && typeof content === 'string' && (
             <div
               onClick={(event) => {
                 event.stopPropagation();

package/src/features/ChatList/Messages/Assistant/DisplayContent.tsx

@@ -0,0 +1,44 @@
+import { deserializeParts } from '@lobechat/utils';
+import { Markdown, MarkdownProps } from '@lobehub/ui';
+import { memo } from 'react';
+
+import BubblesLoading from '@/components/BubblesLoading';
+import { LOADING_FLAT } from '@/const/message';
+import { RichContentRenderer } from '@/features/ChatList/components/RichContentRenderer';
+import { normalizeThinkTags, processWithArtifact } from '@/features/ChatList/utils/markdown';
+
+const MessageContent = memo<{
+  addIdOnDOM?: boolean;
+  content: string;
+  hasImages?: boolean;
+  isMultimodal?: boolean;
+  isToolCallGenerating?: boolean;
+  markdownProps?: Omit<MarkdownProps, 'className' | 'style' | 'children'>;
+  tempDisplayContent?: string;
+}>(
+  ({
+    markdownProps,
+    content,
+    isToolCallGenerating,
+    hasImages,
+    isMultimodal,
+    tempDisplayContent,
+  }) => {
+    const message = normalizeThinkTags(processWithArtifact(content));
+    if (isToolCallGenerating) return;
+
+    if ((!content && !hasImages) || content === LOADING_FLAT) return <BubblesLoading />;
+
+    const contentParts = isMultimodal ? deserializeParts(tempDisplayContent || content) : null;
+
+    return contentParts ? (
+      <RichContentRenderer parts={contentParts} />
+    ) : (
+      <Markdown {...markdownProps} variant={'chat'}>
+        {message}
+      </Markdown>
+    );
+  },
+);
+
+export default MessageContent;

package/src/features/ChatList/Messages/Assistant/MessageBody.tsx

@@ -0,0 +1,96 @@
+import { LOADING_FLAT } from '@lobechat/const';
+import { UIChatMessage } from '@lobechat/types';
+import { MarkdownProps } from '@lobehub/ui';
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { aiChatSelectors, messageStateSelectors } from '@/store/chat/selectors';
+
+import { DefaultMessage } from '../Default';
+import ImageFileListViewer from '../User/ImageFileListViewer';
+import { CollapsedMessage } from './CollapsedMessage';
+import MessageContent from './DisplayContent';
+import FileChunks from './FileChunks';
+import IntentUnderstanding from './IntentUnderstanding';
+import Reasoning from './Reasoning';
+import SearchGrounding from './SearchGrounding';
+
+export const AssistantMessageBody = memo<
+  UIChatMessage & {
+    editableContent: ReactNode;
+    markdownProps?: Omit<MarkdownProps, 'className' | 'style' | 'children'>;
+  }
+>(
+  ({
+    id,
+    tools,
+    content,
+    chunksList,
+    search,
+    imageList,
+    metadata,
+    editableContent,
+    markdownProps,
+    ...props
+  }) => {
+    const [editing, generating, isCollapsed] = useChatStore((s) => [
+      messageStateSelectors.isMessageEditing(id)(s),
+      messageStateSelectors.isMessageGenerating(id)(s),
+      messageStateSelectors.isMessageCollapsed(id)(s),
+    ]);
+
+    const isToolCallGenerating = generating && (content === LOADING_FLAT || !content) && !!tools;
+
+    const isReasoning = useChatStore(aiChatSelectors.isMessageInReasoning(id));
+
+    const isIntentUnderstanding = useChatStore(aiChatSelectors.isIntentUnderstanding(id));
+
+    const showSearch = !!search && !!search.citations?.length;
+    const showImageItems = !!imageList && imageList.length > 0;
+
+    // remove \n to avoid empty content
+    // refs: https://github.com/lobehub/lobe-chat/pull/6153
+    const showReasoning =
+      (!!props.reasoning && props.reasoning.content?.trim() !== '') ||
+      (!props.reasoning && isReasoning);
+
+    const showFileChunks = !!chunksList && chunksList.length > 0;
+
+    if (editing)
+      return (
+        <DefaultMessage
+          content={content}
+          editableContent={editableContent}
+          id={id}
+          isToolCallGenerating={isToolCallGenerating}
+          {...props}
+        />
+      );
+
+    if (isCollapsed) return <CollapsedMessage content={content} id={id} />;
+
+    return (
+      <Flexbox gap={8} id={id}>
+        {showSearch && (
+          <SearchGrounding citations={search?.citations} searchQueries={search?.searchQueries} />
+        )}
+        {showFileChunks && <FileChunks data={chunksList} />}
+        {showReasoning && <Reasoning {...props.reasoning} id={id} />}
+        {isIntentUnderstanding ? (
+          <IntentUnderstanding />
+        ) : (
+          <MessageContent
+            content={content}
+            hasImages={showImageItems}
+            isMultimodal={metadata?.isMultimodal}
+            isToolCallGenerating={isToolCallGenerating}
+            markdownProps={markdownProps}
+            tempDisplayContent={metadata?.tempDisplayContent}
+          />
+        )}
+        {showImageItems && <ImageFileListViewer items={imageList} />}
+      </Flexbox>
+    );
+  },
+);