CamTalk/frontend/src/components/ChatPanel/index.tsx

// ============================================================
// ChatPanel — 消息展示面板
// 职责：渲染对话消息列表、流式光标、元数据、自动滚动
// ============================================================

import { useEffect, useRef } from "react";
import type { ChatMessage } from "../../types";
import type { ConnectionStatus } from "../../lib/websocket";

interface ChatPanelProps {
  messages: ChatMessage[];
  currentReply?: string;
  connectionStatus: ConnectionStatus;
}

export function ChatPanel({ messages, currentReply, connectionStatus }: ChatPanelProps) {
  const bottomRef = useRef<HTMLDivElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const isAutoScroll = useRef(true);

  // 用户上滚时暂停自动滚动，滚到底部时恢复
  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const handleScroll = () => {
      const { scrollTop, scrollHeight, clientHeight } = container;
      isAutoScroll.current = scrollHeight - scrollTop - clientHeight < 60;
    };

    container.addEventListener("scroll", handleScroll);
    return () => container.removeEventListener("scroll", handleScroll);
  }, []);

  // 新消息或流式更新时自动滚动
  useEffect(() => {
    if (isAutoScroll.current) {
      bottomRef.current?.scrollIntoView({ behavior: "smooth" });
    }
  }, [messages, currentReply]);

  // 空状态
  if (messages.length === 0 && !currentReply) {
    if (connectionStatus !== "connected") {
      return (
        <div className="chat-panel chat-panel--empty">
          <p>点击下方按钮开始对话</p>
        </div>
      );
    }
    return (
      <div className="chat-panel chat-panel--empty">
        <p>对着摄像头说话即可</p>
      </div>
    );
  }

  return (
    <div className="chat-panel" ref={containerRef}>
      {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>
          {msg.role === "assistant" && msg.tokensUsed !== undefined && (
            <div className="chat-message__meta">
              {msg.tokensUsed} tokens
              {msg.latencyMs !== undefined && ` · ${(msg.latencyMs / 1000).toFixed(1)}s`}
              {msg.model && ` · ${msg.model}`}
            </div>
          )}
        </div>
      ))}

      {/* 流式回复（尚未完成） */}
      {currentReply && (
        <div className="chat-message chat-message--assistant chat-message--streaming">
          <div className="chat-message__role">AI</div>
          <div className="chat-message__content">
            {currentReply}
            <span className="cursor">▌</span>
          </div>
        </div>
      )}

      <div ref={bottomRef} />
    </div>
  );
}