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

// ============================================================
// ChatPanel — 消息展示面板
// 职责：渲染对话消息列表、流式光标、元数据、自动滚动、文本输入
// 增强：空状态情景选择卡片、语音输入按钮
// ============================================================

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

interface ChatPanelProps {
  messages: ChatMessage[];
  currentReply?: string;
  connectionStatus: ConnectionStatus;
  currentScenario?: string;
  isProcessing?: boolean;
  isVADReady?: boolean;
  vadError?: string | null;
  isCameraOn?: boolean;
  isMicOn?: boolean;
  isSpeaking?: boolean;
  onSendText?: (text: string) => void;
  onToggleMic?: () => void;
  onSceneCard?: (prompt: string) => void;
  onSelectScenario?: (scenarioId: string) => void;
}

/** 场景卡片数据（视觉分析快捷） */
function getSceneCards(t: (key: string) => string) {
  return [
    { icon: "👁", titleKey: "scene.describe", descKey: "scene.describe.desc", prompt: t("scene.describe") },
    { icon: "🔤", titleKey: "scene.text", descKey: "scene.text.desc", prompt: t("scene.text") },
    { icon: "📦", titleKey: "scene.object", descKey: "scene.object.desc", prompt: t("scene.object") },
    { icon: "💡", titleKey: "scene.suggest", descKey: "scene.suggest.desc", prompt: t("scene.suggest") },
  ];
}

export function ChatPanel({
  messages,
  currentReply,
  connectionStatus,
  currentScenario,
  isProcessing,
  isVADReady,
  vadError,
  isCameraOn,
  isMicOn,
  isSpeaking,
  onSendText,
  onToggleMic,
  onSceneCard,
  onSelectScenario,
}: ChatPanelProps) {
  const bottomRef = useRef<HTMLDivElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const isAutoScroll = useRef(true);
  const [inputText, setInputText] = useState("");
  const { t } = useI18n();

  const isConnected = connectionStatus === "connected";
  const isEmpty = messages.length === 0 && !currentReply;
  const sceneCards = getSceneCards(t);
  const activeScenario = currentScenario || "free_chat";
  const isFreeChat = activeScenario === "free_chat";

  // 用户上滚时暂停自动滚动，滚到底部时恢复
  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]);

  // 提交文本消息
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!inputText.trim() || !onSendText) return;
    onSendText(inputText);
    setInputText("");
  };

  // 点击场景卡片
  const handleSceneCard = (prompt: string) => {
    if (onSceneCard) {
      onSceneCard(prompt);
    } else if (onSendText) {
      onSendText(prompt);
    }
  };

  return (
    <div className="chat-panel">
      <div className="chat-panel__messages" ref={containerRef}>
        {/* 空状态：情景选择 + 场景卡片 */}
        {isEmpty && (
          <div className="chat-panel__welcome">
            <span className="chat-panel__welcome-icon">{scenarios.find(s => s.id === activeScenario)?.icon || "💬"}</span>
            <p>{isConnected ? t("chat.welcome.prompt") : t("chat.empty.prompt")}</p>
            <span className="chat-panel__welcome-hint">{isConnected ? t("chat.welcome.hint") : t("chat.empty.hint")}</span>

            {/* 情景选择卡片（非 free_chat 时隐藏，因为已通过 header 切换） */}
            {isFreeChat && onSelectScenario && (
              <div className="scenario-cards">
                <div className="scenario-cards__title">{t("scenario.choose")}</div>
                {scenarios.filter(s => s.id !== "free_chat").map((sc) => (
                  <button
                    key={sc.id}
                    className="scenario-card"
                    onClick={() => onSelectScenario(sc.id)}
                  >
                    <span className="scenario-card__icon">{sc.icon}</span>
                    <div className="scenario-card__text">
                      <span className="scenario-card__title">{t(sc.nameKey)}</span>
                      <span className="scenario-card__desc">{t(sc.descKey)}</span>
                    </div>
                  </button>
                ))}
              </div>
            )}

            {/* 视觉分析快捷卡片（仅 free_chat 模式） */}
            {isFreeChat && isConnected && (
              <div className="scene-cards">
                {sceneCards.map((card) => (
                  <button
                    key={card.titleKey}
                    className="scene-card"
                    onClick={() => handleSceneCard(card.prompt)}
                  >
                    <span className="scene-card__icon">{card.icon}</span>
                    <div className="scene-card__text">
                      <span className="scene-card__title">{t(card.titleKey)}</span>
                      <span className="scene-card__desc">{t(card.descKey)}</span>
                    </div>
                  </button>
                ))}
              </div>
            )}
          </div>
        )}

        {messages.map((msg) => (
          msg.role === "system" ? (
            <div key={msg.id} className="chat-message chat-message--system">
              <span className="chat-message--system__text">{msg.content}</span>
            </div>
          ) : (
            <div key={msg.id} className={`chat-message chat-message--${msg.role}`}>
              <div className="chat-message__role">
                {msg.role === "user" ? t("chat.userLabel") : "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>
        )}

        {/* 连接中状态 */}
        {connectionStatus === "connecting" && (
          <div className="system-message system-message--info">
            <span className="typing-indicator">
              <span className="typing-indicator__dot" />
              <span className="typing-indicator__dot" />
              <span className="typing-indicator__dot" />
            </span>
            <span>{t("chat.connecting")}</span>
          </div>
        )}

        {/* VAD 初始化中 */}
        {isConnected && isCameraOn && isVADReady === false && !vadError && (
          <div className="system-message system-message--info">
            <span className="typing-indicator">
              <span className="typing-indicator__dot" />
              <span className="typing-indicator__dot" />
              <span className="typing-indicator__dot" />
            </span>
            <span>{t("chat.vadInit")}</span>
          </div>
        )}

        {/* AI 处理中（尚未开始流式输出） */}
        {isProcessing && !currentReply && (
          <div className="chat-message chat-message--assistant">
            <div className="chat-message__role">AI</div>
            <div className="chat-message__content">
              <span className="typing-indicator">
                <span className="typing-indicator__dot" />
                <span className="typing-indicator__dot" />
                <span className="typing-indicator__dot" />
              </span>
            </div>
          </div>
        )}

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

      {/* 文本输入框 - 始终显示 */}
      {onSendText && (
        <form className="chat-input" onSubmit={handleSubmit}>
          <input
            type="text"
            className="chat-input__field"
            placeholder={t("chat.input.placeholder")}
            value={inputText}
            onChange={(e) => setInputText(e.target.value)}
            disabled={connectionStatus === "connecting"}
          />
          {/* 语音输入按钮 */}
          {onToggleMic && (
            <button
              type="button"
              className={`chat-input__voice ${isMicOn ? "chat-input__voice--active" : ""} ${isSpeaking ? "btn--speaking" : ""}`}
              onClick={onToggleMic}
              title={t("chat.input.voice")}
            >
              🎤
            </button>
          )}
          <button
            type="submit"
            className="chat-input__send"
            disabled={!inputText.trim() || connectionStatus === "connecting"}
            title={t("chat.send")}
          >
            ➤
          </button>
        </form>
      )}
    </div>
  );
}