a9881eac26
- 定义 11 种 Segment 类型(text, static_var, system_prompt, memory, skills, tool_overview, tool_call_request/result, document, long_text, media) - 每种 Segment 有独立的颜色编码和折叠交互 - 通用 CollapsiblePanel + SegmentRenderer 路由架构 - 4 个 Demo 场景覆盖全部 9 种上下文类型 - 导出为 OpenAI Chat Completions Format(model + messages + tools) - tool_overview -> 请求级 tools[](含 JSON Schema) - tool_call_request -> assistant.tool_calls[] - tool_call_result -> tool-role message(ID 配对) - 17 个单元测试全部通过 - React 18 + TypeScript + Vite + Tailwind CSS
25 lines
598 B
TypeScript
25 lines
598 B
TypeScript
import type { Message } from '../types/protocol'
|
|
import MessageBubble from './MessageBubble'
|
|
|
|
interface MessageListProps {
|
|
messages: Message[]
|
|
}
|
|
|
|
export default function MessageList({ messages }: MessageListProps) {
|
|
if (messages.length === 0) {
|
|
return (
|
|
<div className="flex-1 flex items-center justify-center text-gray-300 text-sm">
|
|
选择一个 Demo 场景开始
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex-1 overflow-y-auto px-4 py-4 space-y-1">
|
|
{messages.map((msg) => (
|
|
<MessageBubble key={msg.id} message={msg} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|