frontend/src/App.tsx

// ============================================================
// CamTalk — 主应用组件（Web 端三栏布局：侧边栏 + 视频 + 聊天）
// ============================================================

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useVisionSession } from "./hooks/useVisionSession";
import { useSessionList } from "./hooks/useSessionList";
import { VideoPreview } from "./components/VideoPreview";
import { ChatPanel } from "./components/ChatPanel";
import { ConfigPanel } from "./components/ConfigPanel";
import { SessionSidebar } from "./components/SessionSidebar";
import { ToastContainer } from "./components/Toast";
import { loadConfig, loadTheme, saveTheme } from "./lib/storage";
import { I18nContext, parseLocale, t } from "./lib/i18n";
import type { Locale } from "./lib/i18n";
import type { Theme } from "./types";
import "./App.css";

/** 内部组件，确保在 I18nContext.Provider 内部使用 hooks */
function AppContent() {
  const [showConfig, setShowConfig] = useState(false);
  const [theme, setTheme] = useState<Theme>(loadTheme);
  const [elapsed, setElapsed] = useState(0);
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);

  // 切换主题时更新 <html> 的 data-theme 属性
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
  }, [theme]);

  const handleThemeChange = useCallback((t: Theme) => {
    setTheme(t);
    saveTheme(t);
  }, []);

  const formatTime = (s: number) => {
    const m = Math.floor(s / 60);
    const sec = s % 60;
    return `${m.toString().padStart(2, "0")}:${sec.toString().padStart(2, "0")}`;
  };

  // ---- 会话列表 ----
  const {
    sessions,
    activeSessionId,
    createSession,
    deleteSession,
    renameSession,
    persistSession,
    selectSession,
  } = useSessionList();

  // ---- 视觉会话 ----
  const {
    messages,
    setMessages,
    currentReply,
    isProcessing,
    isAudioPlaying,
    isSpeaking,
    isVADReady,
    vadError,
    connectionStatus,
    videoRef,
    stream,
    config,
    updateConfig,
    stats,
    mode,
    isObserving,
    startSession,
    stopSession,
    interrupt,
    isCameraOn,
    isMicOn,
    toggleCamera,
    toggleMic,
    sendTextMessage,
  } = useVisionSession();

  const isConnected = connectionStatus === "connected";

  // 连接计时器
  const elapsedRef = useRef(0);
  useEffect(() => {
    if (isConnected) {
      elapsedRef.current = 0;
      setElapsed(0); // eslint-disable-line react-hooks/set-state-in-effect -- 连接时重置计时器
    }
  }, [isConnected]);

  useEffect(() => {
    if (!isConnected) {
      if (timerRef.current) {
        clearInterval(timerRef.current);
        timerRef.current = null;
      }
      return;
    }
    const id = setInterval(() => {
      elapsedRef.current += 1;
      setElapsed(elapsedRef.current);
    }, 1000);
    timerRef.current = id;
    return () => clearInterval(id);
  }, [isConnected]);

  const { t: tr } = useMemo(() => ({ t: (key: string) => t(key, parseLocale(config.language)) }), [config.language]);

  // ---- 初始化：如果没有会话，创建一个 ----
  const initializedRef = useRef(false);
  useEffect(() => {
    if (!initializedRef.current) {
      initializedRef.current = true;
      if (sessions.length === 0) {
        createSession();
      }
    }
  }, [sessions.length, createSession]);

  // ---- 自动保存：messages 变化时持久化到当前会话 ----
  const messagesRef = useRef(messages);
  useEffect(() => { messagesRef.current = messages; }, [messages]);

  useEffect(() => {
    if (activeSessionId && messages.length > 0) {
      persistSession(activeSessionId, messages);
    }
  }, [messages, activeSessionId, persistSession]);

  // ---- 侧边栏操作 ----
  const handleNewSession = useCallback(() => {
    createSession();
    setMessages([]);
    // 如果已连接，断开
    if (connectionStatus === "connected") {
      stopSession();
    }
  }, [createSession, setMessages, connectionStatus, stopSession]);

  const handleSelectSession = useCallback((id: string) => {
    // 保存当前会话
    if (activeSessionId && messagesRef.current.length > 0) {
      persistSession(activeSessionId, messagesRef.current);
    }
    // 如果已连接，断开
    if (connectionStatus === "connected") {
      stopSession();
    }
    // 加载目标会话
    const loaded = selectSession(id);
    setMessages(loaded);
  }, [activeSessionId, persistSession, connectionStatus, stopSession, selectSession, setMessages]);

  const handleDeleteSession = useCallback((id: string) => {
    deleteSession(id);
    if (id === activeSessionId) {
      setMessages([]);
    }
  }, [deleteSession, activeSessionId, setMessages]);

  return (
    <div className="app">
      {/* ---- 顶部导航栏 ---- */}
      <header className="header">
        <div className="header__left">
          <h1 className="header__title">CamTalk</h1>
          <span className="header__subtitle">{tr("app.title")}</span>
        </div>
        <div className="header__right">
          {isConnected && stats.queryCount > 0 && (
            <span className="header__stats">
              {stats.queryCount} {tr("app.stats.requests")}
            </span>
          )}
          <span className={`badge badge--${connectionStatus}`}>
            {isConnected ? tr("status.connected") : connectionStatus === "connecting" ? tr("status.connecting") : tr("status.disconnected")}
          </span>
          <button
            className="btn-icon"
            onClick={() => setShowConfig((v) => !v)}
            title={tr("settings.title")}
            aria-label={tr("settings.title")}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="3" />
              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
            </svg>
          </button>
        </div>
      </header>

      {showConfig && (
        <ConfigPanel
          config={config}
          theme={theme}
          onUpdate={updateConfig}
          onThemeChange={handleThemeChange}
          onClose={() => setShowConfig(false)}
        />
      )}

      {/* ---- 主体：侧边栏 + 视频 + 聊天 ---- */}
      <div className="workspace">
        {/* 最左侧：会话历史侧边栏 */}
        <SessionSidebar
          sessions={sessions}
          activeSessionId={activeSessionId}
          collapsed={sidebarCollapsed}
          onToggleCollapse={() => setSidebarCollapsed((v) => !v)}
          onNewSession={handleNewSession}
          onSelectSession={handleSelectSession}
          onDeleteSession={handleDeleteSession}
          onRenameSession={renameSession}
        />

        {/* 中间：视频预览 + 控制栏 */}
        <div className="video-panel">
          <div className="video-container">
            <VideoPreview ref={videoRef} isStreaming={!!stream} />
            {isConnected && (
              <div className="live-badge">
                <span className="live-badge__dot" />
                LIVE {formatTime(elapsed)}
              </div>
            )}
            {config.detailLevel === "high" && (
              <div className="detail-badge">HD</div>
            )}
            {isObserving && (
              <div className="observation-badge">{tr("video.observing")}</div>
            )}
            {isSpeaking && (
              <div className="video-indicator">{tr("video.listening")}</div>
            )}
            {isAudioPlaying && config.ttsEnabled && (
              <div className="video-indicator video-indicator--audio">{tr("video.playing")}</div>
            )}
            {isConnected && !isVADReady && !vadError && (
              <div className="video-indicator video-indicator--loading">{tr("video.initVad")}</div>
            )}
            {vadError && (
              <div className="video-indicator video-indicator--error">⚠️ {vadError}</div>
            )}
            {isProcessing && (
              <div className="video-overlay">
                <div className="video-overlay__spinner" />
              </div>
            )}
            {!isConnected && !stream && (
              <div className="video-placeholder">
                <svg className="video-placeholder__icon" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
                  <circle cx="12" cy="13" r="4" />
                </svg>
                <span>{tr("video.placeholder")}</span>
              </div>
            )}
            {isConnected && !isCameraOn && (
              <div className="video-placeholder">
                <svg className="video-placeholder__icon" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
                  <circle cx="12" cy="13" r="4" />
                </svg>
                <span>{tr("video.cameraOff")}</span>
                <span className="video-placeholder__hint">{tr("video.cameraOff.hint")}</span>
              </div>
            )}
          </div>

          {/* 视频下方控制栏 */}
          <div className="video-controls">
            {!isConnected ? (
              <button className="btn btn--primary btn--lg" onClick={startSession}>
                {connectionStatus === "connecting" ? tr("controls.connecting") : tr("controls.startVideo")}
              </button>
            ) : (
              <div className="video-controls__row">
                <button
                  className={`btn btn--ctrl ${isCameraOn ? "btn--ctrl-on" : "btn--ctrl-off"}`}
                  onClick={toggleCamera}
                  title={isCameraOn ? tr("controls.cameraOff") : tr("controls.cameraOn")}
                >
                  📷
                </button>
                <button
                  className={`btn btn--ctrl ${isMicOn ? "btn--ctrl-on" : "btn--ctrl-off"} ${isSpeaking ? "btn--speaking" : ""}`}
                  onClick={toggleMic}
                  title={isMicOn ? tr("controls.micOff") : tr("controls.micOn")}
                >
                  🎤
                </button>
                {isProcessing && (
                  <button className="btn btn--warning" onClick={interrupt}>
                    {tr("controls.interrupt")}
                  </button>
                )}
                <button className="btn btn--danger" onClick={stopSession}>
                  {tr("controls.stop")}
                </button>
              </div>
            )}
          </div>
        </div>

        {/* 右侧：聊天面板 */}
        <div className="chat-panel-wrapper">
          <div className="chat-panel-header">
            <span>{tr("chat.title")}</span>
            {isConnected && mode === "observation" && (
              <span className="chat-panel-header__mode">{tr("chat.mode.observation")}</span>
            )}
          </div>
          <div className="chat-panel-body">
            {connectionStatus === "disconnected" && messages.length > 0 && (
              <div className="system-message system-message--warning">
                {tr("chat.reconnecting")}
              </div>
            )}
            <ChatPanel
              messages={messages}
              currentReply={currentReply}
              connectionStatus={connectionStatus}
              onSendText={sendTextMessage}
            />
          </div>
        </div>
      </div>

      <ToastContainer />
    </div>
  );
}

function App() {
  const [locale, setLocale] = useState<Locale>(() => parseLocale(loadConfig().language));

  const i18nValue = useMemo(() => ({
    locale,
    t: (key: string) => t(key, locale),
  }), [locale]);

  // 监听配置变化以更新 locale
  useEffect(() => {
    const handler = () => {
      const cfg = loadConfig();
      setLocale(parseLocale(cfg.language));
    };
    // 自定义事件，由 saveConfig 触发
    window.addEventListener("camtalk-config-changed", handler);
    return () => window.removeEventListener("camtalk-config-changed", handler);
  }, []);

  return (
    <I18nContext.Provider value={i18nValue}>
      <AppContent />
    </I18nContext.Provider>
  );
}

export default App;
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								// ============================================================
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								// CamTalk — 主应用组件（Web 端三栏布局：侧边栏 + 视频 + 聊天）
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								// ============================================================
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								import { useVisionSession } from "./hooks/useVisionSession";
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								import { useSessionList } from "./hooks/useSessionList";
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								import { VideoPreview } from "./components/VideoPreview";
 								import { ChatPanel } from "./components/ChatPanel";
-												feat: 实现会话配置与多轮上下文

- 新增 ConfigPanel 组件：TTS 开关、detail level、语言选择
- 新增 storage.ts：配置持久化到 localStorage
- useVisionSession：连接后自动发送 config，维护最近 10 轮对话历史
- App：齿轮按钮展开配置面板，HD 角标，TTS 播放联动 ttsEnabled

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:19:47 +08:00
+								import { ConfigPanel } from "./components/ConfigPanel";
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								import { SessionSidebar } from "./components/SessionSidebar";
-												feat: 完善端到端对话闭环，增强消息渲染与错误处理

- ChatPanel：流式光标动画、token/延迟元数据、自动滚动、三种空状态
- Toast 组件：错误码映射为中文友好文案，3 秒自动消失
- useVisionSession：stt_result 流式更新、防重复发送、打断保存未完成内容、结束清理全部状态
- App：断线提示、视频 loading 遮罩、按钮连接中状态
- ChatMessage 增加 latencyMs、model 字段

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 11:43:16 +08:00
+								import { ToastContainer } from "./components/Toast";
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								import { loadConfig, loadTheme, saveTheme } from "./lib/storage";
 								import { I18nContext, parseLocale, t } from "./lib/i18n";
 								import type { Locale } from "./lib/i18n";
-												feat: 增加深色/浅色主题切换功能

- types 新增 Theme 类型（dark/light）
- storage 新增 loadTheme/saveTheme 持久化主题偏好
- ConfigPanel 新增外观分组，主题下拉选择
- App.tsx 通过 data-theme 属性挂载到 html 元素
- App.css 新增 [data-theme=light] 亮色变量覆盖

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 17:08:56 +08:00
+								import type { Theme } from "./types";
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								import "./App.css";
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								/** 内部组件，确保在 I18nContext.Provider 内部使用 hooks */
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								function AppContent() {
-												feat: 实现会话配置与多轮上下文

- 新增 ConfigPanel 组件：TTS 开关、detail level、语言选择
- 新增 storage.ts：配置持久化到 localStorage
- useVisionSession：连接后自动发送 config，维护最近 10 轮对话历史
- App：齿轮按钮展开配置面板，HD 角标，TTS 播放联动 ttsEnabled

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:19:47 +08:00
+								  const [showConfig, setShowConfig] = useState(false);
-												feat: 增加深色/浅色主题切换功能

- types 新增 Theme 类型（dark/light）
- storage 新增 loadTheme/saveTheme 持久化主题偏好
- ConfigPanel 新增外观分组，主题下拉选择
- App.tsx 通过 data-theme 属性挂载到 html 元素
- App.css 新增 [data-theme=light] 亮色变量覆盖

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 17:08:56 +08:00
+								  const [theme, setTheme] = useState<Theme>(loadTheme);
-												feat: 添加 LIVE 计时器和语言按钮组（P0 优化）

- 视频区左上角显示 LIVE 绿色圆点 + 连接时长计时器
- Header 添加中文/EN/日 语言按钮组，一键切换语言
- live-badge、lang-group 样式

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 19:01:33 +08:00
+								  const [elapsed, setElapsed] = useState(0);
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-												feat: 添加 LIVE 计时器和语言按钮组（P0 优化）

- 视频区左上角显示 LIVE 绿色圆点 + 连接时长计时器
- Header 添加中文/EN/日 语言按钮组，一键切换语言
- live-badge、lang-group 样式

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 19:01:33 +08:00
+								  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
-												feat: 增加深色/浅色主题切换功能

- types 新增 Theme 类型（dark/light）
- storage 新增 loadTheme/saveTheme 持久化主题偏好
- ConfigPanel 新增外观分组，主题下拉选择
- App.tsx 通过 data-theme 属性挂载到 html 元素
- App.css 新增 [data-theme=light] 亮色变量覆盖

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 17:08:56 +08:00
 								  // 切换主题时更新 <html> 的 data-theme 属性
 								  useEffect(() => {
 								    document.documentElement.setAttribute("data-theme", theme);
 								  }, [theme]);
 								  const handleThemeChange = useCallback((t: Theme) => {
 								    setTheme(t);
 								    saveTheme(t);
 								  }, []);
-												feat: 实现会话配置与多轮上下文

- 新增 ConfigPanel 组件：TTS 开关、detail level、语言选择
- 新增 storage.ts：配置持久化到 localStorage
- useVisionSession：连接后自动发送 config，维护最近 10 轮对话历史
- App：齿轮按钮展开配置面板，HD 角标，TTS 播放联动 ttsEnabled

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:19:47 +08:00
-												feat: 添加 LIVE 计时器和语言按钮组（P0 优化）

- 视频区左上角显示 LIVE 绿色圆点 + 连接时长计时器
- Header 添加中文/EN/日 语言按钮组，一键切换语言
- live-badge、lang-group 样式

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 19:01:33 +08:00
+								  const formatTime = (s: number) => {
 								    const m = Math.floor(s / 60);
 								    const sec = s % 60;
 								    return `${m.toString().padStart(2, "0")}:${sec.toString().padStart(2, "0")}`;
 								  };
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								  // ---- 会话列表 ----
 								  const {
 								    sessions,
 								    activeSessionId,
 								    createSession,
 								    deleteSession,
 								    renameSession,
 								    persistSession,
 								    selectSession,
 								  } = useSessionList();
 								  // ---- 视觉会话 ----
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								  const {
 								    messages,
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								    setMessages,
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								    currentReply,
 								    isProcessing,
-												feat: 实现 TTS 语音播放，完成 MVP P0 全部用户故事

- 新增 TTSPlayer：收集流式 tts_audio 片段，is_last 时拼接解码播放
- useVisionSession 接入 TTS 播放器，interrupt/stopSession 时停止播放
- App 显示 '🔊 正在播放...' 指示器
- MVP P0 四个用户故事前端全部实现（US-01 ~ US-04）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 13:57:36 +08:00
+								    isAudioPlaying,
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								    isSpeaking,
-												feat: 集成 VAD 语音活动检测，打通核心交互链路

- 重写 useVAD Hook，接入 @ricky0123/vad-web 的 MicVAD
- 支持 onSpeechStart/onSpeechEnd/onVADMisfire 回调
- useVisionSession 中串联摄像头→麦克风→WebSocket→VAD 完整流程
- App.tsx 新增 VAD 加载中和错误状态的 UI 指示
- VAD 参数对齐设计文档：positiveSpeechThreshold=0.5, minSpeechMs=250

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 11:10:29 +08:00
+								    isVADReady,
 								    vadError,
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								    connectionStatus,
 								    videoRef,
 								    stream,
-												feat: 实现会话配置与多轮上下文

- 新增 ConfigPanel 组件：TTS 开关、detail level、语言选择
- 新增 storage.ts：配置持久化到 localStorage
- useVisionSession：连接后自动发送 config，维护最近 10 轮对话历史
- App：齿轮按钮展开配置面板，HD 角标，TTS 播放联动 ttsEnabled

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:19:47 +08:00
+								    config,
 								    updateConfig,
-												feat: 实现关键帧检测与成本控制

- EdgeProcessor：sampleFrame 降采样 160x120 + compareFrames 像素差异对比
- 重复画面跳过：similarity > 0.9 时不发送 query
- 混合采样策略：静默 5s / 用户说话 1s（docs/08-成本控制.md）
- 请求统计：queryCount + totalTokens 实时显示
- App 状态栏显示成本统计

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:38:15 +08:00
+								    stats,
-												feat: 实现观察模式，支持持续场景监控（US-05/US-10）

- 新增 useObservationMode Hook：定时 5s 采帧，similarity < 0.85 触发变化回调
- useVisionSession 新增 dialogue/observation 模式切换
- App Footer 加观察模式切换按钮（激活时蓝色脉冲）
- 视频区左上角显示'👁️ 观察中'绿色角标
- 观察模式下画面变化自动发送 query

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:46:42 +08:00
+								    mode,
 								    isObserving,
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								    startSession,
 								    stopSession,
 								    interrupt,
-												feat: 底部控制栏添加摄像头/麦克风开关，说话时麦克风脉冲动画

- useVisionSession 新增 isCameraOn/isMicOn 状态 + toggleCamera/toggleMic
- 底部控制栏添加 📷🎤 图标按钮，开启绿色/关闭红色
- 说话时麦克风按钮绿色脉冲缩放动画（micPulse）
- 按钮样式优化：nowrap 防换行，flex-wrap 自适应

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 20:01:37 +08:00
+								    isCameraOn,
 								    isMicOn,
 								    toggleCamera,
 								    toggleMic,
-												feat: 添加文字输入对话功能

- 后端 WsQuery 添加 text 字段，支持文本输入模式
- Pipeline 支持文本查询时跳过 STT 直接使用输入文本
- 前端 ChatPanel 添加文字输入框，连接状态下可用
- useVisionSession 添加 sendTextMessage 方法
- 更新接口文档，添加文本输入模式说明

											
										
										
											2026-06-14 12:52:39 +08:00
+								    sendTextMessage,
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								  } = useVisionSession();
-												feat: 集成 VAD 语音活动检测，打通核心交互链路

- 重写 useVAD Hook，接入 @ricky0123/vad-web 的 MicVAD
- 支持 onSpeechStart/onSpeechEnd/onVADMisfire 回调
- useVisionSession 中串联摄像头→麦克风→WebSocket→VAD 完整流程
- App.tsx 新增 VAD 加载中和错误状态的 UI 指示
- VAD 参数对齐设计文档：positiveSpeechThreshold=0.5, minSpeechMs=250

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 11:10:29 +08:00
+								  const isConnected = connectionStatus === "connected";
-												feat: 添加 LIVE 计时器和语言按钮组（P0 优化）

- 视频区左上角显示 LIVE 绿色圆点 + 连接时长计时器
- Header 添加中文/EN/日 语言按钮组，一键切换语言
- live-badge、lang-group 样式

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 19:01:33 +08:00
+								  // 连接计时器
 								  const elapsedRef = useRef(0);
 								  useEffect(() => {
 								    if (isConnected) {
 								      elapsedRef.current = 0;
 								      setElapsed(0); // eslint-disable-line react-hooks/set-state-in-effect -- 连接时重置计时器
 								    }
 								  }, [isConnected]);
 								  useEffect(() => {
 								    if (!isConnected) {
 								      if (timerRef.current) {
 								        clearInterval(timerRef.current);
 								        timerRef.current = null;
 								      }
 								      return;
 								    }
 								    const id = setInterval(() => {
 								      elapsedRef.current += 1;
 								      setElapsed(elapsedRef.current);
 								    }, 1000);
 								    timerRef.current = id;
 								    return () => clearInterval(id);
 								  }, [isConnected]);
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								  const { t: tr } = useMemo(() => ({ t: (key: string) => t(key, parseLocale(config.language)) }), [config.language]);
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								  // ---- 初始化：如果没有会话，创建一个 ----
 								  const initializedRef = useRef(false);
 								  useEffect(() => {
 								    if (!initializedRef.current) {
 								      initializedRef.current = true;
 								      if (sessions.length === 0) {
 								        createSession();
 								      }
 								    }
 								  }, [sessions.length, createSession]);
 								  // ---- 自动保存：messages 变化时持久化到当前会话 ----
 								  const messagesRef = useRef(messages);
 								  useEffect(() => { messagesRef.current = messages; }, [messages]);
 								  useEffect(() => {
 								    if (activeSessionId && messages.length > 0) {
 								      persistSession(activeSessionId, messages);
 								    }
 								  }, [messages, activeSessionId, persistSession]);
 								  // ---- 侧边栏操作 ----
 								  const handleNewSession = useCallback(() => {
 								    createSession();
 								    setMessages([]);
 								    // 如果已连接，断开
 								    if (connectionStatus === "connected") {
 								      stopSession();
 								    }
 								  }, [createSession, setMessages, connectionStatus, stopSession]);
 								  const handleSelectSession = useCallback((id: string) => {
 								    // 保存当前会话
 								    if (activeSessionId && messagesRef.current.length > 0) {
 								      persistSession(activeSessionId, messagesRef.current);
 								    }
 								    // 如果已连接，断开
 								    if (connectionStatus === "connected") {
 								      stopSession();
 								    }
 								    // 加载目标会话
 								    const loaded = selectSession(id);
 								    setMessages(loaded);
 								  }, [activeSessionId, persistSession, connectionStatus, stopSession, selectSession, setMessages]);
 								  const handleDeleteSession = useCallback((id: string) => {
 								    deleteSession(id);
 								    if (id === activeSessionId) {
 								      setMessages([]);
 								    }
 								  }, [deleteSession, activeSessionId, setMessages]);
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								  return (
 								    <div className="app">
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								      {/* ---- 顶部导航栏 ---- */}
 								      <header className="header">
 								        <div className="header__left">
 								          <h1 className="header__title">CamTalk</h1>
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								          <span className="header__subtitle">{tr("app.title")}</span>
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								        </div>
 								        <div className="header__right">
-												fix: 隐藏顶部状态栏的 token 数显示

											
										
										
											2026-06-14 15:10:43 +08:00
+								          {isConnected && stats.queryCount > 0 && (
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								            <span className="header__stats">
-												fix: 隐藏顶部状态栏的 token 数显示

											
										
										
											2026-06-14 15:10:43 +08:00
+								              {stats.queryCount} {tr("app.stats.requests")}
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								            </span>
 								          )}
 								          <span className={`badge badge--${connectionStatus}`}>
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								            {isConnected ? tr("status.connected") : connectionStatus === "connecting" ? tr("status.connecting") : tr("status.disconnected")}
-												feat: 实现会话配置与多轮上下文

- 新增 ConfigPanel 组件：TTS 开关、detail level、语言选择
- 新增 storage.ts：配置持久化到 localStorage
- useVisionSession：连接后自动发送 config，维护最近 10 轮对话历史
- App：齿轮按钮展开配置面板，HD 角标，TTS 播放联动 ttsEnabled

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:19:47 +08:00
+								          </span>
-												refactor: 设置面板改为右侧抽屉，修复布局跳动问题

- ConfigPanel 重写为 Drawer：右侧 320px 滑入面板 + 半透明遮罩
- 设置按钮始终可见，不依赖连接状态
- 抽屉不推挤主布局，点击遮罩或✕关闭
- 设置项分组显示，带功能描述文案

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:54:57 +08:00
+								          <button
 								            className="btn-icon"
 								            onClick={() => setShowConfig((v) => !v)}
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								            title={tr("settings.title")}
 								            aria-label={tr("settings.title")}
-												refactor: 设置面板改为右侧抽屉，修复布局跳动问题

- ConfigPanel 重写为 Drawer：右侧 320px 滑入面板 + 半透明遮罩
- 设置按钮始终可见，不依赖连接状态
- 抽屉不推挤主布局，点击遮罩或✕关闭
- 设置项分组显示，带功能描述文案

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:54:57 +08:00
+								          >
-												feat：样式美化

											
										
										
											2026-06-14 10:18:36 +08:00
+								            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
 								              <circle cx="12" cy="12" r="3" />
 								              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
 								            </svg>
-												refactor: 设置面板改为右侧抽屉，修复布局跳动问题

- ConfigPanel 重写为 Drawer：右侧 320px 滑入面板 + 半透明遮罩
- 设置按钮始终可见，不依赖连接状态
- 抽屉不推挤主布局，点击遮罩或✕关闭
- 设置项分组显示，带功能描述文案

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:54:57 +08:00
+								          </button>
-												feat: 实现会话配置与多轮上下文

- 新增 ConfigPanel 组件：TTS 开关、detail level、语言选择
- 新增 storage.ts：配置持久化到 localStorage
- useVisionSession：连接后自动发送 config，维护最近 10 轮对话历史
- App：齿轮按钮展开配置面板，HD 角标，TTS 播放联动 ttsEnabled

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:19:47 +08:00
+								        </div>
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								      </header>
-												feat: 实现会话配置与多轮上下文

- 新增 ConfigPanel 组件：TTS 开关、detail level、语言选择
- 新增 storage.ts：配置持久化到 localStorage
- useVisionSession：连接后自动发送 config，维护最近 10 轮对话历史
- App：齿轮按钮展开配置面板，HD 角标，TTS 播放联动 ttsEnabled

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:19:47 +08:00
+								      {showConfig && (
 								        <ConfigPanel
 								          config={config}
-												feat: 增加深色/浅色主题切换功能

- types 新增 Theme 类型（dark/light）
- storage 新增 loadTheme/saveTheme 持久化主题偏好
- ConfigPanel 新增外观分组，主题下拉选择
- App.tsx 通过 data-theme 属性挂载到 html 元素
- App.css 新增 [data-theme=light] 亮色变量覆盖

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 17:08:56 +08:00
+								          theme={theme}
-												feat: 实现会话配置与多轮上下文

- 新增 ConfigPanel 组件：TTS 开关、detail level、语言选择
- 新增 storage.ts：配置持久化到 localStorage
- useVisionSession：连接后自动发送 config，维护最近 10 轮对话历史
- App：齿轮按钮展开配置面板，HD 角标，TTS 播放联动 ttsEnabled

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:19:47 +08:00
+								          onUpdate={updateConfig}
-												feat: 增加深色/浅色主题切换功能

- types 新增 Theme 类型（dark/light）
- storage 新增 loadTheme/saveTheme 持久化主题偏好
- ConfigPanel 新增外观分组，主题下拉选择
- App.tsx 通过 data-theme 属性挂载到 html 元素
- App.css 新增 [data-theme=light] 亮色变量覆盖

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 17:08:56 +08:00
+								          onThemeChange={handleThemeChange}
-												feat: 实现会话配置与多轮上下文

- 新增 ConfigPanel 组件：TTS 开关、detail level、语言选择
- 新增 storage.ts：配置持久化到 localStorage
- useVisionSession：连接后自动发送 config，维护最近 10 轮对话历史
- App：齿轮按钮展开配置面板，HD 角标，TTS 播放联动 ttsEnabled

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:19:47 +08:00
+								          onClose={() => setShowConfig(false)}
 								        />
 								      )}
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								      {/* ---- 主体：侧边栏 + 视频 + 聊天 ---- */}
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								      <div className="workspace">
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								        {/* 最左侧：会话历史侧边栏 */}
 								        <SessionSidebar
 								          sessions={sessions}
 								          activeSessionId={activeSessionId}
 								          collapsed={sidebarCollapsed}
 								          onToggleCollapse={() => setSidebarCollapsed((v) => !v)}
 								          onNewSession={handleNewSession}
 								          onSelectSession={handleSelectSession}
 								          onDeleteSession={handleDeleteSession}
 								          onRenameSession={renameSession}
 								        />
 								        {/* 中间：视频预览 + 控制栏 */}
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								        <div className="video-panel">
 								          <div className="video-container">
 								            <VideoPreview ref={videoRef} isStreaming={!!stream} />
-												feat: 添加 LIVE 计时器和语言按钮组（P0 优化）

- 视频区左上角显示 LIVE 绿色圆点 + 连接时长计时器
- Header 添加中文/EN/日 语言按钮组，一键切换语言
- live-badge、lang-group 样式

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 19:01:33 +08:00
+								            {isConnected && (
 								              <div className="live-badge">
 								                <span className="live-badge__dot" />
 								                LIVE {formatTime(elapsed)}
 								              </div>
 								            )}
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								            {config.detailLevel === "high" && (
 								              <div className="detail-badge">HD</div>
 								            )}
 								            {isObserving && (
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								              <div className="observation-badge">{tr("video.observing")}</div>
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								            )}
 								            {isSpeaking && (
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								              <div className="video-indicator">{tr("video.listening")}</div>
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								            )}
 								            {isAudioPlaying && config.ttsEnabled && (
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								              <div className="video-indicator video-indicator--audio">{tr("video.playing")}</div>
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								            )}
 								            {isConnected && !isVADReady && !vadError && (
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								              <div className="video-indicator video-indicator--loading">{tr("video.initVad")}</div>
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								            )}
 								            {vadError && (
 								              <div className="video-indicator video-indicator--error">⚠️ {vadError}</div>
 								            )}
 								            {isProcessing && (
 								              <div className="video-overlay">
 								                <div className="video-overlay__spinner" />
 								              </div>
 								            )}
 								            {!isConnected && !stream && (
 								              <div className="video-placeholder">
-												feat：样式美化

											
										
										
											2026-06-14 10:18:36 +08:00
+								                <svg className="video-placeholder__icon" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
 								                  <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
 								                  <circle cx="12" cy="13" r="4" />
 								                </svg>
-												feat: 聊天框与视频功能解耦，输入文字即可开始对话

之前必须点击「开始对话」连接 WebSocket 后才能使用聊天框。
现在聊天输入框始终可用，输入文字自动连接 WebSocket 并发送消息；
左侧按钮改为「开始视频通话」，单独控制摄像头/麦克风。

- ChatPanel 移除 !isConnected early return，始终显示输入框
- useVisionSession 新增待发消息队列，sendTextMessage 支持自动连接
- startSession 改为仅负责视频（摄像头 + 麦克风 + VAD）
- 修复 statusRef 在 useWebSocketManager 之前声明导致的 TDZ 错误
- 更新 i18n 翻译（新增 controls.startVideo、video.placeholder）

											
										
										
											2026-06-14 15:07:39 +08:00
+								                <span>{tr("video.placeholder")}</span>
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								              </div>
 								            )}
-												feat: 支持无摄像头/麦克风模式打字聊天

- 修改 startSession 逻辑，摄像头和麦克风为可选
- 连接成功后始终显示聊天输入框
- 更新 UI 提示文字，引导用户打字对话

											
										
										
											2026-06-14 13:13:29 +08:00
+								            {isConnected && !isCameraOn && (
 								              <div className="video-placeholder">
 								                <svg className="video-placeholder__icon" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
 								                  <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
 								                  <circle cx="12" cy="13" r="4" />
 								                </svg>
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								                <span>{tr("video.cameraOff")}</span>
 								                <span className="video-placeholder__hint">{tr("video.cameraOff.hint")}</span>
-												feat: 支持无摄像头/麦克风模式打字聊天

- 修改 startSession 逻辑，摄像头和麦克风为可选
- 连接成功后始终显示聊天输入框
- 更新 UI 提示文字，引导用户打字对话

											
										
										
											2026-06-14 13:13:29 +08:00
+								              </div>
 								            )}
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								          </div>
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								          {/* 视频下方控制栏 */}
 								          <div className="video-controls">
 								            {!isConnected ? (
 								              <button className="btn btn--primary btn--lg" onClick={startSession}>
-												feat: 聊天框与视频功能解耦，输入文字即可开始对话

之前必须点击「开始对话」连接 WebSocket 后才能使用聊天框。
现在聊天输入框始终可用，输入文字自动连接 WebSocket 并发送消息；
左侧按钮改为「开始视频通话」，单独控制摄像头/麦克风。

- ChatPanel 移除 !isConnected early return，始终显示输入框
- useVisionSession 新增待发消息队列，sendTextMessage 支持自动连接
- startSession 改为仅负责视频（摄像头 + 麦克风 + VAD）
- 修复 statusRef 在 useWebSocketManager 之前声明导致的 TDZ 错误
- 更新 i18n 翻译（新增 controls.startVideo、video.placeholder）

											
										
										
											2026-06-14 15:07:39 +08:00
+								                {connectionStatus === "connecting" ? tr("controls.connecting") : tr("controls.startVideo")}
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								              </button>
 								            ) : (
 								              <div className="video-controls__row">
-												feat: 底部控制栏添加摄像头/麦克风开关，说话时麦克风脉冲动画

- useVisionSession 新增 isCameraOn/isMicOn 状态 + toggleCamera/toggleMic
- 底部控制栏添加 📷🎤 图标按钮，开启绿色/关闭红色
- 说话时麦克风按钮绿色脉冲缩放动画（micPulse）
- 按钮样式优化：nowrap 防换行，flex-wrap 自适应

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 20:01:37 +08:00
+								                <button
 								                  className={`btn btn--ctrl ${isCameraOn ? "btn--ctrl-on" : "btn--ctrl-off"}`}
 								                  onClick={toggleCamera}
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								                  title={isCameraOn ? tr("controls.cameraOff") : tr("controls.cameraOn")}
-												feat: 底部控制栏添加摄像头/麦克风开关，说话时麦克风脉冲动画

- useVisionSession 新增 isCameraOn/isMicOn 状态 + toggleCamera/toggleMic
- 底部控制栏添加 📷🎤 图标按钮，开启绿色/关闭红色
- 说话时麦克风按钮绿色脉冲缩放动画（micPulse）
- 按钮样式优化：nowrap 防换行，flex-wrap 自适应

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 20:01:37 +08:00
+								                >
 								                  📷
 								                </button>
 								                <button
 								                  className={`btn btn--ctrl ${isMicOn ? "btn--ctrl-on" : "btn--ctrl-off"} ${isSpeaking ? "btn--speaking" : ""}`}
 								                  onClick={toggleMic}
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								                  title={isMicOn ? tr("controls.micOff") : tr("controls.micOn")}
-												feat: 底部控制栏添加摄像头/麦克风开关，说话时麦克风脉冲动画

- useVisionSession 新增 isCameraOn/isMicOn 状态 + toggleCamera/toggleMic
- 底部控制栏添加 📷🎤 图标按钮，开启绿色/关闭红色
- 说话时麦克风按钮绿色脉冲缩放动画（micPulse）
- 按钮样式优化：nowrap 防换行，flex-wrap 自适应

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 20:01:37 +08:00
+								                >
 								                  🎤
 								                </button>
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								                {isProcessing && (
 								                  <button className="btn btn--warning" onClick={interrupt}>
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								                    {tr("controls.interrupt")}
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								                  </button>
 								                )}
 								                <button className="btn btn--danger" onClick={stopSession}>
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								                  {tr("controls.stop")}
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								                </button>
 								              </div>
 								            )}
 								          </div>
-												feat: 实现关键帧检测与成本控制

- EdgeProcessor：sampleFrame 降采样 160x120 + compareFrames 像素差异对比
- 重复画面跳过：similarity > 0.9 时不发送 query
- 混合采样策略：静默 5s / 用户说话 1s（docs/08-成本控制.md）
- 请求统计：queryCount + totalTokens 实时显示
- App 状态栏显示成本统计

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:38:15 +08:00
+								        </div>
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								        {/* 右侧：聊天面板 */}
 								        <div className="chat-panel-wrapper">
 								          <div className="chat-panel-header">
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								            <span>{tr("chat.title")}</span>
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								            {isConnected && mode === "observation" && (
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								              <span className="chat-panel-header__mode">{tr("chat.mode.observation")}</span>
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								            )}
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								          </div>
 								          <div className="chat-panel-body">
 								            {connectionStatus === "disconnected" && messages.length > 0 && (
 								              <div className="system-message system-message--warning">
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								                {tr("chat.reconnecting")}
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								              </div>
 								            )}
 								            <ChatPanel
 								              messages={messages}
 								              currentReply={currentReply}
 								              connectionStatus={connectionStatus}
-												feat: 添加文字输入对话功能

- 后端 WsQuery 添加 text 字段，支持文本输入模式
- Pipeline 支持文本查询时跳过 STT 直接使用输入文本
- 前端 ChatPanel 添加文字输入框，连接状态下可用
- useVisionSession 添加 sendTextMessage 方法
- 更新接口文档，添加文本输入模式说明

											
										
										
											2026-06-14 12:52:39 +08:00
+								              onSendText={sendTextMessage}
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								            />
 								          </div>
 								        </div>
 								      </div>
-												feat: 完善端到端对话闭环，增强消息渲染与错误处理

- ChatPanel：流式光标动画、token/延迟元数据、自动滚动、三种空状态
- Toast 组件：错误码映射为中文友好文案，3 秒自动消失
- useVisionSession：stt_result 流式更新、防重复发送、打断保存未完成内容、结束清理全部状态
- App：断线提示、视频 loading 遮罩、按钮连接中状态
- ChatMessage 增加 latencyMs、model 字段

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 11:43:16 +08:00
 								      <ToastContainer />
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								    </div>
 								  );
 								}
-												feat: 前端 UI 国际化，支持中/英/日三语切换

之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。
新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。

- 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key）
- App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context
- 所有组件通过 useI18n().t() 获取翻译文本
- errors.ts 改为接受翻译函数参数
- storage.ts saveConfig 时派发事件通知 locale 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								function App() {
 								  const [locale, setLocale] = useState<Locale>(() => parseLocale(loadConfig().language));
 								  const i18nValue = useMemo(() => ({
 								    locale,
 								    t: (key: string) => t(key, locale),
 								  }), [locale]);
 								  // 监听配置变化以更新 locale
 								  useEffect(() => {
 								    const handler = () => {
 								      const cfg = loadConfig();
 								      setLocale(parseLocale(cfg.language));
 								    };
 								    // 自定义事件，由 saveConfig 触发
 								    window.addEventListener("camtalk-config-changed", handler);
 								    return () => window.removeEventListener("camtalk-config-changed", handler);
 								  }, []);
 								  return (
 								    <I18nContext.Provider value={i18nValue}>
 								      <AppContent />
 								    </I18nContext.Provider>
 								  );
 								}
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								export default App;