588 lines
24 KiB
TypeScript
588 lines
24 KiB
TypeScript
import { useState } from 'react'
|
||
import { User, Bot, Wrench, CheckCircle, AlertCircle, Terminal, File, Image, FileText, Music, Video, Download, ChevronDown, ChevronRight, Copy, Check } from 'lucide-react'
|
||
import ReactMarkdown from 'react-markdown'
|
||
import remarkGfm from 'remark-gfm'
|
||
import type { ChatMessage, Attachment, TaskToolResult } from '../../types/protocol'
|
||
|
||
interface MessageBubbleProps {
|
||
message: ChatMessage
|
||
onNavigateToSubAgent?: (taskId: string, description: string) => void
|
||
}
|
||
|
||
function getAttachmentIcon(mediaType: string) {
|
||
switch (mediaType) {
|
||
case 'image': return <Image className="h-4 w-4" />
|
||
case 'audio': return <Music className="h-4 w-4" />
|
||
case 'video': return <Video className="h-4 w-4" />
|
||
case 'file': return <FileText className="h-4 w-4" />
|
||
default: return <File className="h-4 w-4" />
|
||
}
|
||
}
|
||
|
||
function getFileName(path: string): string {
|
||
const parts = path.replace(/\\/g, '/').split('/')
|
||
return parts[parts.length - 1] || path
|
||
}
|
||
|
||
function formatTime(timestamp: number) {
|
||
return new Date(timestamp).toLocaleTimeString('zh-CN', {
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
})
|
||
}
|
||
|
||
function formatDuration(ms: number): string {
|
||
if (ms < 1000) {
|
||
return `${ms}ms`
|
||
}
|
||
if (ms < 60000) {
|
||
return `${(ms / 1000).toFixed(1)}s`
|
||
}
|
||
const minutes = Math.floor(ms / 60000)
|
||
const seconds = Math.floor((ms % 60000) / 1000)
|
||
return `${minutes}m ${seconds}s`
|
||
}
|
||
|
||
function AttachmentCard({ attachment }: { attachment: Attachment }) {
|
||
const fileName = attachment.file_name || getFileName(attachment.path)
|
||
|
||
const handleDownload = (e: React.MouseEvent) => {
|
||
if (!attachment.content_base64) return
|
||
|
||
e.preventDefault()
|
||
const mimeType = attachment.mime_type || 'application/octet-stream'
|
||
const byteChars = atob(attachment.content_base64)
|
||
const byteNums = new Array(byteChars.length)
|
||
for (let i = 0; i < byteChars.length; i++) {
|
||
byteNums[i] = byteChars.charCodeAt(i)
|
||
}
|
||
const byteArr = new Uint8Array(byteNums)
|
||
const blob = new Blob([byteArr], { type: mimeType })
|
||
const url = URL.createObjectURL(blob)
|
||
|
||
const a = document.createElement('a')
|
||
a.href = url
|
||
a.download = fileName
|
||
document.body.appendChild(a)
|
||
a.click()
|
||
document.body.removeChild(a)
|
||
URL.revokeObjectURL(url)
|
||
}
|
||
|
||
const canDownload = !!attachment.content_base64
|
||
|
||
return (
|
||
<div
|
||
onClick={canDownload ? handleDownload : undefined}
|
||
className={`flex items-center gap-2 rounded-lg bg-white/5 border border-white/10 px-3 py-2 text-xs transition-colors group ${
|
||
canDownload ? 'hover:bg-white/10 hover:border-[#00f0ff]/30 cursor-pointer' : ''
|
||
}`}
|
||
title={canDownload ? `下载 ${fileName}` : attachment.path}
|
||
>
|
||
<span className={`text-zinc-400 transition-colors ${canDownload ? 'group-hover:text-[#00f0ff]' : ''}`}>
|
||
{getAttachmentIcon(attachment.media_type)}
|
||
</span>
|
||
<span className={`text-zinc-300 truncate max-w-[200px] transition-colors ${canDownload ? 'group-hover:text-white' : ''}`} title={attachment.path}>
|
||
{fileName}
|
||
</span>
|
||
<span className="text-zinc-600 ml-auto shrink-0">{attachment.media_type}</span>
|
||
{canDownload && (
|
||
<Download className="h-3 w-3 text-zinc-600 group-hover:text-[#00f0ff] transition-colors" />
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function CopyButton({ text, className = '' }: { text: string; className?: string }) {
|
||
const [copied, setCopied] = useState(false)
|
||
|
||
const handleCopy = (e: React.MouseEvent) => {
|
||
e.stopPropagation()
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
setCopied(true)
|
||
setTimeout(() => setCopied(false), 1500)
|
||
}).catch(() => {
|
||
// fallback silently
|
||
})
|
||
}
|
||
|
||
if (!text) return null
|
||
|
||
return (
|
||
<button
|
||
onClick={handleCopy}
|
||
className={`opacity-0 group-hover:opacity-100 transition-opacity p-0.5 rounded hover:bg-white/10 flex-shrink-0 ${className}`}
|
||
title="复制"
|
||
>
|
||
{copied ? (
|
||
<Check className="h-3 w-3 text-emerald-400" />
|
||
) : (
|
||
<Copy className="h-3 w-3 text-zinc-500" />
|
||
)}
|
||
</button>
|
||
)
|
||
}
|
||
|
||
function parseTaskResult(content: string): TaskToolResult | null {
|
||
if (!content) return null
|
||
try {
|
||
const parsed = JSON.parse(content)
|
||
if (
|
||
parsed &&
|
||
typeof parsed.status === 'string' &&
|
||
typeof parsed.output === 'string' &&
|
||
typeof parsed.summary === 'string' &&
|
||
typeof parsed.task_id === 'string'
|
||
) {
|
||
return parsed as TaskToolResult
|
||
}
|
||
return null
|
||
} catch {
|
||
return null
|
||
}
|
||
}
|
||
|
||
export function MessageBubble({ message, onNavigateToSubAgent }: MessageBubbleProps) {
|
||
const isUser = message.role === 'user'
|
||
const isTool = message.role === 'tool'
|
||
const isMergedTool = message.type === 'merged_tool'
|
||
const [toolExpanded, setToolExpanded] = useState(false)
|
||
|
||
if (isMergedTool) {
|
||
const status = message.status || 'calling'
|
||
const hasResult = !!(message.resultContent)
|
||
const hasArgs = message.arguments !== undefined && message.arguments !== null
|
||
|
||
const statusConfig = {
|
||
calling: {
|
||
dot: 'bg-amber-400 animate-pulse',
|
||
label: '执行中',
|
||
fullBorder: 'border-amber-500/30',
|
||
labelColor: 'text-amber-400',
|
||
avatarBg: 'bg-amber-500/20',
|
||
avatarIcon: 'text-amber-400',
|
||
},
|
||
result: {
|
||
dot: 'bg-emerald-400',
|
||
label: '已完成',
|
||
fullBorder: 'border-emerald-500/30',
|
||
labelColor: 'text-emerald-400',
|
||
avatarBg: 'bg-emerald-500/20',
|
||
avatarIcon: 'text-emerald-400',
|
||
},
|
||
pending: {
|
||
dot: 'bg-orange-400 animate-pulse',
|
||
label: '待确认',
|
||
fullBorder: 'border-orange-500/30',
|
||
labelColor: 'text-orange-400',
|
||
avatarBg: 'bg-orange-500/20',
|
||
avatarIcon: 'text-orange-400',
|
||
},
|
||
}[status]
|
||
|
||
const formatJSON = (text: string): string => {
|
||
try {
|
||
return JSON.stringify(JSON.parse(text), null, 2)
|
||
} catch {
|
||
return text
|
||
}
|
||
}
|
||
|
||
function stripToolResultPrefix(text: string): string {
|
||
const lines = text.split('\n')
|
||
if (lines[0]?.startsWith('工具结果')) {
|
||
let start = 1
|
||
while (start < lines.length && lines[start].trim() === '') {
|
||
start++
|
||
}
|
||
return lines.slice(start).join('\n')
|
||
}
|
||
return text
|
||
}
|
||
|
||
const argsPreview = hasArgs
|
||
? JSON.stringify(message.arguments).slice(0, 500)
|
||
: ''
|
||
|
||
const displayContent = hasResult ? stripToolResultPrefix(message.resultContent!) : ''
|
||
|
||
const isTaskTool = message.toolName === 'task'
|
||
const taskResult = isTaskTool && hasResult ? parseTaskResult(displayContent) : null
|
||
const isSubAgent = !!message.subagentTaskId
|
||
const subagentType = (message.arguments as Record<string, unknown> | null)?.subagent_type as string || 'general'
|
||
const taskDescription = (message.arguments as Record<string, unknown> | null)?.description as string || ''
|
||
const taskPrompt = (message.arguments as Record<string, unknown> | null)?.prompt as string || ''
|
||
|
||
// task tool 专用的状态配色
|
||
const taskStatusConfig = {
|
||
success: { dot: 'bg-emerald-400', label: '成功', borderColor: 'border-emerald-500/40', labelColor: 'text-emerald-400' },
|
||
failed: { dot: 'bg-red-400', label: '失败', borderColor: 'border-red-500/40', labelColor: 'text-red-400' },
|
||
timeout: { dot: 'bg-amber-400', label: '超时', borderColor: 'border-amber-500/40', labelColor: 'text-amber-400' },
|
||
} as const
|
||
|
||
return (
|
||
<div className="flex gap-3 animate-slide-in">
|
||
<div className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full mt-0.5 ${
|
||
isTaskTool ? 'bg-violet-500/20' : statusConfig.avatarBg
|
||
}`}>
|
||
{isTaskTool ? (
|
||
<Bot className="h-3.5 w-3.5 text-violet-400" />
|
||
) : (
|
||
<Terminal className={`h-3.5 w-3.5 ${statusConfig.avatarIcon}`} />
|
||
)}
|
||
</div>
|
||
<div className="max-w-[80%] min-w-0">
|
||
<div className="flex items-center gap-2 mb-1">
|
||
<span className="text-xs font-medium text-zinc-400">{message.toolName || 'Tool'}</span>
|
||
{isTaskTool && (
|
||
<span className="text-xs px-1.5 py-0.5 rounded bg-violet-500/10 text-violet-400">
|
||
子智能体·{subagentType}
|
||
</span>
|
||
)}
|
||
{!isTaskTool && isSubAgent && (
|
||
<span className="text-xs px-1.5 py-0.5 rounded bg-violet-500/10 text-violet-400">
|
||
子智能体
|
||
</span>
|
||
)}
|
||
<span className="text-xs text-zinc-600">{formatTime(message.timestamp)}</span>
|
||
</div>
|
||
<div
|
||
onClick={() => setToolExpanded(!toolExpanded)}
|
||
className={`cursor-pointer rounded-xl border bg-[#1a1a25]/60 w-full transition-all duration-500 hover:bg-[#1a1a25]/80 group ${
|
||
taskResult ? taskStatusConfig[taskResult.status].borderColor : statusConfig.fullBorder
|
||
}`}
|
||
>
|
||
{/* Header row */}
|
||
<div className="flex items-center gap-2 px-3 py-2">
|
||
<span className={`inline-block h-2 w-2 rounded-full flex-shrink-0 transition-colors duration-500 ${
|
||
taskResult ? taskStatusConfig[taskResult.status].dot : statusConfig.dot
|
||
}`} />
|
||
<span className="text-sm font-medium text-zinc-300 truncate">
|
||
{isTaskTool ? (taskDescription || '子智能体任务') : (message.toolName || 'Tool')}
|
||
</span>
|
||
<span className={`text-xs flex-shrink-0 transition-colors duration-500 ${
|
||
taskResult ? taskStatusConfig[taskResult.status].labelColor : statusConfig.labelColor
|
||
}`}>
|
||
{taskResult ? taskStatusConfig[taskResult.status].label : statusConfig.label}
|
||
</span>
|
||
{status === 'result' && message.durationMs != null && (
|
||
<span className="text-xs text-zinc-600 flex-shrink-0 tabular-nums ml-1">
|
||
⏱️ {formatDuration(message.durationMs)}
|
||
</span>
|
||
)}
|
||
{hasResult && <CopyButton text={taskResult ? taskResult.output : displayContent} />}
|
||
<span className="ml-auto flex-shrink-0">
|
||
{toolExpanded ? (
|
||
<ChevronDown className="h-3.5 w-3.5 text-zinc-500" />
|
||
) : (
|
||
<ChevronRight className="h-3.5 w-3.5 text-zinc-500" />
|
||
)}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Collapsed preview */}
|
||
{!toolExpanded && (
|
||
<>
|
||
{hasArgs && argsPreview && !taskResult && (
|
||
<div className="px-3 pb-1 text-xs text-zinc-500 font-mono line-clamp-3"
|
||
style={{
|
||
display: '-webkit-box',
|
||
WebkitLineClamp: 3,
|
||
WebkitBoxOrient: 'vertical',
|
||
overflow: 'hidden',
|
||
}}>
|
||
{argsPreview}
|
||
</div>
|
||
)}
|
||
{taskResult && taskResult.summary && (
|
||
<div className="px-3 pb-1 text-xs text-zinc-400 line-clamp-2">
|
||
{taskResult.summary}
|
||
</div>
|
||
)}
|
||
{taskResult ? (
|
||
<>
|
||
<div className="px-3 pb-1">
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
onNavigateToSubAgent?.(taskResult.task_id, taskDescription || '子智能体任务')
|
||
}}
|
||
className="text-xs text-[#00f0ff] hover:text-[#00f0ff]/80 hover:underline transition-colors flex items-center gap-1"
|
||
>
|
||
<span>查看完整会话</span>
|
||
<span>→</span>
|
||
</button>
|
||
</div>
|
||
<div className="px-3 pb-2 text-xs text-[#00f0ff]/50 flex items-center gap-1 select-none">
|
||
<span>点击查看子智能体输出</span>
|
||
</div>
|
||
</>
|
||
) : isTaskTool && message.subagentTaskId ? (
|
||
<div className="px-3 pb-1">
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
onNavigateToSubAgent?.(message.subagentTaskId!, taskDescription || '子智能体任务')
|
||
}}
|
||
className="text-xs text-[#00f0ff] hover:text-[#00f0ff]/80 hover:underline transition-colors flex items-center gap-1"
|
||
>
|
||
<span>查看实时进度</span>
|
||
<span>→</span>
|
||
</button>
|
||
</div>
|
||
) : hasResult ? (
|
||
<div className="px-3 pb-2 text-xs text-[#00f0ff]/50 flex items-center gap-1 select-none">
|
||
<span>点击查看工具结果</span>
|
||
</div>
|
||
) : (
|
||
<div className="px-3 pb-2 text-xs text-zinc-500">
|
||
{isTaskTool ? '子智能体正在执行...' : '等待工具执行...'}
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* Expanded */}
|
||
{toolExpanded && (
|
||
<div className="border-t border-white/8 px-3 py-2 space-y-2">
|
||
{taskResult ? (
|
||
<>
|
||
{taskPrompt && (
|
||
<div>
|
||
<div className="text-xs font-medium text-zinc-500 mb-1">任务指令</div>
|
||
<pre className="text-xs text-zinc-400 font-mono whitespace-pre-wrap bg-black/20 rounded-lg p-2 overflow-x-auto max-h-32 overflow-y-auto">
|
||
{taskPrompt}
|
||
</pre>
|
||
</div>
|
||
)}
|
||
{taskResult.summary && (
|
||
<div className={`rounded-lg px-3 py-2 ${
|
||
taskResult.status === 'success' ? 'bg-emerald-500/10 border border-emerald-500/30' :
|
||
taskResult.status === 'failed' ? 'bg-red-500/10 border border-red-500/30' :
|
||
'bg-amber-500/10 border border-amber-500/30'
|
||
}`}>
|
||
<div className="text-xs font-medium text-zinc-500 mb-0.5">摘要</div>
|
||
<div className="text-sm text-zinc-300">{taskResult.summary}</div>
|
||
</div>
|
||
)}
|
||
<div>
|
||
<div className="text-xs font-medium text-zinc-500 mb-1">输出</div>
|
||
<div className="markdown-content text-sm leading-relaxed bg-black/20 rounded-lg p-3 max-h-96 overflow-y-auto">
|
||
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
||
{taskResult.output}
|
||
</ReactMarkdown>
|
||
</div>
|
||
</div>
|
||
<div className="text-xs text-zinc-600 font-mono select-all">
|
||
task_id: {taskResult.task_id}
|
||
</div>
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
onNavigateToSubAgent?.(taskResult.task_id, taskDescription || '子智能体任务')
|
||
}}
|
||
className="text-xs text-[#00f0ff] hover:text-[#00f0ff]/80 hover:underline transition-colors flex items-center gap-1"
|
||
>
|
||
<span>查看完整会话</span>
|
||
<span>→</span>
|
||
</button>
|
||
</>
|
||
) : (
|
||
<>
|
||
{hasArgs && (
|
||
<div>
|
||
<div className="text-xs font-medium text-zinc-500 mb-1">参数</div>
|
||
<pre className="text-xs text-zinc-400 font-mono whitespace-pre-wrap bg-black/20 rounded-lg p-2 overflow-x-auto">
|
||
{JSON.stringify(message.arguments, null, 2)}
|
||
</pre>
|
||
</div>
|
||
)}
|
||
{hasResult && (
|
||
<div>
|
||
<div className="text-xs font-medium text-zinc-500 mb-1">结果</div>
|
||
<pre className="text-xs text-zinc-400 font-mono whitespace-pre-wrap bg-black/20 rounded-lg p-2 overflow-x-auto max-h-48 overflow-y-auto">
|
||
{formatJSON(displayContent)}
|
||
</pre>
|
||
</div>
|
||
)}
|
||
{!hasArgs && !hasResult && (
|
||
<div className="text-xs text-zinc-500">等待工具执行...</div>
|
||
)}
|
||
{isTaskTool && message.subagentTaskId && (
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
onNavigateToSubAgent?.(message.subagentTaskId!, taskDescription || '子智能体任务')
|
||
}}
|
||
className="text-xs text-[#00f0ff] hover:text-[#00f0ff]/80 hover:underline transition-colors flex items-center gap-1"
|
||
>
|
||
<span>查看实时进度</span>
|
||
<span>→</span>
|
||
</button>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const getIcon = () => {
|
||
if (isUser) return <User className="h-4 w-4" />
|
||
if (isTool) {
|
||
if (message.type === 'tool_call') return <Terminal className="h-4 w-4" />
|
||
if (message.type === 'tool_result') return <CheckCircle className="h-4 w-4" />
|
||
if (message.type === 'tool_pending') return <AlertCircle className="h-4 w-4" />
|
||
return <Wrench className="h-4 w-4" />
|
||
}
|
||
return <Bot className="h-4 w-4" />
|
||
}
|
||
|
||
const getContainerStyles = () => {
|
||
if (isUser) {
|
||
return 'bg-gradient-to-br from-[#00f0ff]/20 to-[#3b82f6]/20 border-[#00f0ff]/30 text-white'
|
||
}
|
||
if (isTool) {
|
||
if (message.type === 'tool_call') return 'bg-amber-500/10 border-amber-500/30 text-amber-100'
|
||
if (message.type === 'tool_result') return 'bg-emerald-500/10 border-emerald-500/30 text-emerald-100'
|
||
if (message.type === 'tool_pending') return 'bg-orange-500/10 border-orange-500/30 text-orange-100'
|
||
return 'bg-zinc-800/50 border-zinc-700 text-zinc-300'
|
||
}
|
||
return 'bg-[#1a1a25] border-white/10 text-white'
|
||
}
|
||
|
||
const getAvatarStyles = () => {
|
||
if (isUser) return 'bg-gradient-to-br from-[#00f0ff] to-[#3b82f6]'
|
||
if (isTool) {
|
||
if (message.type === 'tool_call') return 'bg-amber-500'
|
||
if (message.type === 'tool_result') return 'bg-emerald-500'
|
||
if (message.type === 'tool_pending') return 'bg-orange-500'
|
||
return 'bg-zinc-700'
|
||
}
|
||
return 'bg-gradient-to-br from-[#8b5cf6] to-[#ec4899]'
|
||
}
|
||
|
||
return (
|
||
<div className={`flex gap-4 ${isUser ? 'flex-row-reverse' : 'flex-row'} animate-slide-in group`}>
|
||
<div
|
||
className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full ${getAvatarStyles()} shadow-lg`}
|
||
>
|
||
{getIcon()}
|
||
</div>
|
||
<div className={`max-w-[80%] ${isUser ? 'text-right' : 'text-left'}`}>
|
||
<div className="flex items-center gap-2 mb-1">
|
||
<span className={`text-xs font-medium ${isUser ? 'text-[#00f0ff]' : 'text-zinc-400'}`}>
|
||
{isUser ? 'You' : isTool ? message.toolName || 'Tool' : 'Assistant'}
|
||
</span>
|
||
<span className="text-xs text-zinc-600">{formatTime(message.timestamp)}</span>
|
||
<CopyButton text={message.content} />
|
||
</div>
|
||
<div
|
||
className={`inline-block rounded-2xl border px-5 py-3 text-left shadow-lg ${getContainerStyles()}`}
|
||
>
|
||
{isTool && message.toolName && (
|
||
<div className="mb-2 text-xs font-semibold opacity-70 flex items-center gap-1">
|
||
<Terminal className="h-3 w-3" />
|
||
{message.toolName}
|
||
</div>
|
||
)}
|
||
{isUser ? (
|
||
// 用户消息保持纯文本
|
||
<div className="whitespace-pre-wrap text-sm leading-relaxed">{message.content}</div>
|
||
) : (
|
||
// AI 和工具消息使用 Markdown 渲染
|
||
<div className="markdown-content text-sm leading-relaxed">
|
||
<ReactMarkdown
|
||
remarkPlugins={[remarkGfm]}
|
||
components={{
|
||
// 自定义代码块渲染
|
||
code({ className, children, ...props }) {
|
||
const isInline = !className
|
||
if (isInline) {
|
||
return (
|
||
<code
|
||
className="bg-black/30 px-1.5 py-0.5 rounded text-[#00f0ff] font-mono text-xs"
|
||
{...props}
|
||
>
|
||
{children}
|
||
</code>
|
||
)
|
||
}
|
||
return (
|
||
<pre className="bg-black/40 rounded-lg p-3 overflow-x-auto my-2">
|
||
<code className={`${className} font-mono text-xs`} {...props}>
|
||
{children}
|
||
</code>
|
||
</pre>
|
||
)
|
||
},
|
||
// 标题样式
|
||
h1: ({ children }) => (
|
||
<h1 className="text-xl font-bold text-white mb-2 mt-4">{children}</h1>
|
||
),
|
||
h2: ({ children }) => (
|
||
<h2 className="text-lg font-bold text-white mb-2 mt-3">{children}</h2>
|
||
),
|
||
h3: ({ children }) => (
|
||
<h3 className="text-base font-bold text-white mb-1 mt-2">{children}</h3>
|
||
),
|
||
// 段落
|
||
p: ({ children }) => <p className="mb-2 last:mb-0">{children}</p>,
|
||
// 列表
|
||
ul: ({ children }) => <ul className="list-disc list-inside mb-2 space-y-1">{children}</ul>,
|
||
ol: ({ children }) => <ol className="list-decimal list-inside mb-2 space-y-1">{children}</ol>,
|
||
// 链接
|
||
a: ({ href, children }) => (
|
||
<a
|
||
href={href}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-[#00f0ff] hover:underline"
|
||
>
|
||
{children}
|
||
</a>
|
||
),
|
||
// 表格
|
||
table: ({ children }) => (
|
||
<table className="w-full border-collapse mb-2 text-xs">{children}</table>
|
||
),
|
||
thead: ({ children }) => <thead className="bg-white/10">{children}</thead>,
|
||
th: ({ children }) => (
|
||
<th className="border border-white/10 px-2 py-1 text-left font-semibold">{children}</th>
|
||
),
|
||
td: ({ children }) => (
|
||
<td className="border border-white/10 px-2 py-1">{children}</td>
|
||
),
|
||
// 引用块
|
||
blockquote: ({ children }) => (
|
||
<blockquote className="border-l-2 border-[#00f0ff]/50 pl-3 my-2 text-zinc-400">
|
||
{children}
|
||
</blockquote>
|
||
),
|
||
// 分隔线
|
||
hr: () => <hr className="border-white/10 my-3" />,
|
||
// 加粗和斜体
|
||
strong: ({ children }) => <strong className="font-bold text-white">{children}</strong>,
|
||
em: ({ children }) => <em className="italic text-zinc-300">{children}</em>,
|
||
}}
|
||
>
|
||
{message.content}
|
||
</ReactMarkdown>
|
||
</div>
|
||
)}
|
||
{message.attachments && message.attachments.length > 0 && (
|
||
<div className="mt-2 space-y-1">
|
||
{message.attachments.map((att: Attachment, idx: number) => (
|
||
<AttachmentCard key={idx} attachment={att} />
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|