34 lines
962 B
TypeScript
34 lines
962 B
TypeScript
|
// ============================================================
|
|||
|
|
// ChatPanel — 消息展示面板
|
|||
|
|
// 职责：渲染对话消息列表（用户提问 + AI 回复）
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
import type { ChatMessage } from "../../types";
|
|||
|
|
|
|||
|
|
interface ChatPanelProps {
|
|||
|
|
messages: ChatMessage[];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function ChatPanel({ messages }: ChatPanelProps) {
|
|||
|
|
if (messages.length === 0) {
|
|||
|
|
return (
|
|||
|
|
<div className="chat-panel chat-panel--empty">
|
|||
|
|
<p>开始对话：对着摄像头说话即可</p>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="chat-panel">
|
|||
|
|
{messages.map((msg, index) => (
|
|||
|
|
<div key={index} className={`chat-message chat-message--${msg.role}`}>
|
|||
|
|
<div className="chat-message__role">
|
|||
|
|
{msg.role === "user" ? "你" : "AI"}
|
|||
|
|
</div>
|
|||
|
|
<div className="chat-message__content">{msg.content}</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|