130 lines
3.5 KiB
TypeScript
130 lines
3.5 KiB
TypeScript
import React from 'react'
|
|
import type {
|
|
Attachment,
|
|
ImageAttachment,
|
|
McpContent,
|
|
PlanConfig,
|
|
TaskTodoConfig,
|
|
Operation,
|
|
BaseEvent,
|
|
HandleImageAttachmentClick,
|
|
} from '../../types'
|
|
import { AttachmentItem } from './AttachmentItem'
|
|
import { ImageAttachmentItem } from './ImageAttachmentItem'
|
|
import { TodoList } from './TodoList'
|
|
|
|
export interface SystemMessageProps {
|
|
attachment?: Attachment[]
|
|
imageAttachment?: ImageAttachment[]
|
|
operation?: Operation
|
|
mcpContent?: McpContent
|
|
planConfig?: PlanConfig
|
|
taskTodoConfig?: TaskTodoConfig
|
|
base?: BaseEvent
|
|
showSystemAttachments: boolean
|
|
showOperation: boolean
|
|
showMcpContent: boolean
|
|
showPlanConfig: boolean
|
|
showTaskTodoList: boolean
|
|
onAttachmentClick?: (attachment: Attachment) => void
|
|
onImageAttachmentClick?: HandleImageAttachmentClick
|
|
}
|
|
|
|
/**
|
|
* 系统消息组件 - 渲染系统附件、待办列表、MCP内容、计划配置、操作信息
|
|
* 对应 next-agent SystemMessage
|
|
*/
|
|
function InnerSystemMessage({
|
|
attachment,
|
|
imageAttachment,
|
|
operation,
|
|
mcpContent,
|
|
planConfig,
|
|
taskTodoConfig,
|
|
showSystemAttachments,
|
|
showOperation,
|
|
showMcpContent,
|
|
showPlanConfig,
|
|
showTaskTodoList,
|
|
onAttachmentClick,
|
|
onImageAttachmentClick,
|
|
}: SystemMessageProps) {
|
|
const hasContent =
|
|
showTaskTodoList ||
|
|
(imageAttachment?.length ?? 0) > 0 ||
|
|
(showSystemAttachments && (attachment?.length ?? 0) > 0) ||
|
|
(showMcpContent && !!mcpContent) ||
|
|
(showOperation && !!operation) ||
|
|
(showPlanConfig && !!planConfig)
|
|
|
|
if (!hasContent) return null
|
|
|
|
return (
|
|
<div className="w-full space-y-2 mt-1">
|
|
{/* Todo 列表 */}
|
|
{showTaskTodoList && taskTodoConfig?.list?.length && (
|
|
<TodoList items={taskTodoConfig.list} />
|
|
)}
|
|
|
|
{/* 图片附件（系统消息里的） */}
|
|
{(imageAttachment?.length ?? 0) > 0 && (
|
|
<div className="flex flex-wrap gap-2">
|
|
{imageAttachment!.map((img, i) => (
|
|
<ImageAttachmentItem
|
|
assetsType="assistant"
|
|
key={img.url || img.path || i}
|
|
image={img}
|
|
onClick={onImageAttachmentClick}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* 文件附件（系统消息里的） */}
|
|
{showSystemAttachments && (attachment?.length ?? 0) > 0 && (
|
|
<div className="flex flex-wrap gap-2">
|
|
{attachment!.map((att, i) => (
|
|
<AttachmentItem
|
|
key={att.file_id || att.file_url || i}
|
|
attachment={att}
|
|
onClick={onAttachmentClick}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* MCP 内容 */}
|
|
{showMcpContent && mcpContent && (
|
|
<div className="p-2 rounded-lg bg-muted border border-border/50">
|
|
<pre className="text-xs text-muted-foreground whitespace-pre-wrap break-all">
|
|
{JSON.stringify(mcpContent, null, 2)}
|
|
</pre>
|
|
</div>
|
|
)}
|
|
|
|
{/* 操作信息 */}
|
|
{showOperation && operation && (
|
|
<div className="p-2 rounded-lg bg-muted border border-border/50">
|
|
<pre className="text-xs text-muted-foreground whitespace-pre-wrap break-all">
|
|
{JSON.stringify(operation, null, 2)}
|
|
</pre>
|
|
</div>
|
|
)}
|
|
|
|
{/* 计划配置 */}
|
|
{showPlanConfig && planConfig?.steps && (
|
|
<TodoList
|
|
items={planConfig.steps.map(s => ({
|
|
id: s.id,
|
|
title: s.title,
|
|
status: s.status,
|
|
}))}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const SystemMessage = React.memo(InnerSystemMessage)
|
|
export default SystemMessage
|