feat(ui): 创建共享 UI 组件包

将 web 和 desktop 的重复代码抽取到 @ai-assistant/ui 包: - 添加可配置的 API 客户端 (configureApiClient) - 迁移共享组件: ChatMessage, ChatInput, Sidebar, FileBrowser, ConfigPanel - 迁移共享 hook: useChat - 添加 responsive prop 支持响应式布局 - 更新 web/desktop 依赖并删除重复代码
2025-12-12 15:52:53 +08:00
parent 563224fa73
commit 68ab6a2016
30 changed files with 711 additions and 1388 deletions
@@ -0,0 +1,219 @@
+/**
+ * Chat Hook
+ *
+ * 管理 WebSocket 连接和消息状态
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { createWebSocket, getMessages, type Message } from '../api/client.js';
+
+interface UseChatOptions {
+  sessionId: string;
+  onError?: (error: Error) => void;
+  onSessionNotFound?: () => void;
+}
+
+interface ChatState {
+  messages: Message[];
+  isConnected: boolean;
+  isLoading: boolean;
+  streamingContent: string;
+}
+
+export function useChat({ sessionId, onError, onSessionNotFound }: UseChatOptions) {
+  const [state, setState] = useState<ChatState>({
+    messages: [],
+    isConnected: false,
+    isLoading: false,
+    streamingContent: '',
+  });
+
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimeoutRef = useRef<NodeJS.Timeout>();
+  const reconnectAttemptsRef = useRef(0);
+  const maxReconnectAttempts = 5;
+  // 标记是否正在主动关闭连接（切换 session 时）
+  const isClosingRef = useRef(false);
+
+  // 用 ref 存储回调，避免依赖变化导致无限循环
+  const onErrorRef = useRef(onError);
+  const onSessionNotFoundRef = useRef(onSessionNotFound);
+  onErrorRef.current = onError;
+  onSessionNotFoundRef.current = onSessionNotFound;
+
+  // 加载历史消息
+  const loadMessages = useCallback(async () => {
+    try {
+      const { data } = await getMessages(sessionId);
+      setState((prev) => ({ ...prev, messages: data }));
+    } catch (error) {
+      // 会话不存在（404 或 "Session not found"），通知上层重新创建
+      const msg = error instanceof Error ? error.message : '';
+      if (msg.includes('404') || msg.toLowerCase().includes('not found')) {
+        onSessionNotFoundRef.current?.();
+        return;
+      }
+      onErrorRef.current?.(error instanceof Error ? error : new Error('Failed to load messages'));
+    }
+  }, [sessionId]);
+
+  // 连接 WebSocket
+  const connect = useCallback(() => {
+    // 如果正在关闭，不要连接
+    if (isClosingRef.current) return;
+    // 如果已经连接，不要重复连接
+    if (wsRef.current?.readyState === WebSocket.OPEN) return;
+    // 如果正在连接中，不要重复连接
+    if (wsRef.current?.readyState === WebSocket.CONNECTING) return;
+
+    const ws = createWebSocket(sessionId);
+
+    ws.onopen = () => {
+      reconnectAttemptsRef.current = 0; // 连接成功，重置重连次数
+      setState((prev) => ({ ...prev, isConnected: true }));
+    };
+
+    ws.onclose = () => {
+      setState((prev) => ({ ...prev, isConnected: false }));
+      // 主动关闭时不重连
+      if (isClosingRef.current) {
+        isClosingRef.current = false;
+        return;
+      }
+      // 限制重连次数
+      if (reconnectAttemptsRef.current < maxReconnectAttempts) {
+        reconnectAttemptsRef.current++;
+        reconnectTimeoutRef.current = setTimeout(connect, 3000);
+      }
+    };
+
+    ws.onerror = () => {
+      // 主动关闭时不报错
+      if (isClosingRef.current) return;
+      onErrorRef.current?.(new Error('WebSocket connection error'));
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const message = JSON.parse(event.data);
+
+        switch (message.type) {
+          case 'chunk':
+            setState((prev) => ({
+              ...prev,
+              streamingContent: prev.streamingContent + (message.payload?.content || ''),
+            }));
+            break;
+
+          case 'done':
+            setState((prev) => {
+              const newMessage: Message = message.payload || {
+                id: Date.now().toString(),
+                role: 'assistant',
+                content: prev.streamingContent,
+                timestamp: new Date().toISOString(),
+              };
+              return {
+                ...prev,
+                messages: [...prev.messages, newMessage],
+                streamingContent: '',
+                isLoading: false,
+              };
+            });
+            break;
+
+          case 'message_received':
+            // 用户消息已确认
+            setState((prev) => ({
+              ...prev,
+              messages: [...prev.messages, message.payload],
+            }));
+            break;
+
+          case 'error':
+            onErrorRef.current?.(new Error(message.payload?.message || 'Unknown error'));
+            setState((prev) => ({ ...prev, isLoading: false, streamingContent: '' }));
+            break;
+        }
+      } catch {
+        // 忽略解析错误
+      }
+    };
+
+    wsRef.current = ws;
+  }, [sessionId]);
+
+  // 发送消息
+  const sendMessage = useCallback(
+    (content: string) => {
+      if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+        onErrorRef.current?.(new Error('WebSocket not connected'));
+        return;
+      }
+
+      setState((prev) => ({ ...prev, isLoading: true }));
+
+      wsRef.current.send(
+        JSON.stringify({
+          type: 'message',
+          sessionId,
+          payload: { content },
+        })
+      );
+    },
+    [sessionId]
+  );
+
+  // 取消处理
+  const cancelProcessing = useCallback(() => {
+    if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) return;
+
+    wsRef.current.send(
+      JSON.stringify({
+        type: 'cancel',
+        sessionId,
+      })
+    );
+
+    setState((prev) => ({ ...prev, isLoading: false, streamingContent: '' }));
+  }, [sessionId]);
+
+  // 初始化
+  useEffect(() => {
+    // 重置状态
+    isClosingRef.current = false;
+    setState({
+      messages: [],
+      isConnected: false,
+      isLoading: false,
+      streamingContent: '',
+    });
+    reconnectAttemptsRef.current = 0;
+
+    loadMessages();
+    connect();
+
+    return () => {
+      clearTimeout(reconnectTimeoutRef.current);
+      // 标记为主动关闭，避免触发错误回调和重连
+      isClosingRef.current = true;
+      // 只关闭已建立的连接
+      if (wsRef.current) {
+        const ws = wsRef.current;
+        // 清除引用，防止后续操作
+        wsRef.current = null;
+        // 只有在 OPEN 或 CONNECTING 状态才关闭
+        if (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING) {
+          ws.close();
+        }
+      }
+    };
+  }, [loadMessages, connect]);
+
+  return {
+    ...state,
+    sendMessage,
+    cancelProcessing,
+    reload: loadMessages,
+  };
+}