// ============================================================
// 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>
  );
}