@huyooo/ai-chat-frontend-react 0.1.2

package/src/hooks/useChat.ts

@@ -0,0 +1,464 @@
+/**
+ * useChat Hook
+ * 管理聊天状态和与后端的通信
+ * 使用 Adapter 模式解耦后端通信
+ * 
+ * 与 Vue 版本 useChat composable 保持一致
+ */
+
+import { useState, useCallback, useRef } from 'react'
+import type { ChatAdapter, ChatProgress } from '../adapter'
+import { createNullAdapter } from '../adapter'
+import type {
+  ChatMessage,
+  ChatMode,
+  SessionRecord,
+  MessageRecord,
+  SearchResult,
+  ToolCall,
+} from '../types'
+
+/** 生成唯一 ID */
+function generateId(): string {
+  return Date.now().toString(36) + Math.random().toString(36).substr(2)
+}
+
+/** 转换存储的消息为显示格式 */
+function convertToMessage(record: MessageRecord): ChatMessage {
+  return {
+    id: record.id,
+    role: record.role,
+    content: record.content,
+    thinking: record.thinking || undefined,
+    thinkingComplete: true,
+    toolCalls: record.toolCalls ? JSON.parse(record.toolCalls) : undefined,
+    searchResults: record.searchResults ? JSON.parse(record.searchResults) : undefined,
+    searching: false,
+    timestamp: record.timestamp,
+  }
+}
+
+export interface UseChatOptions {
+  /** Adapter 实例 */
+  adapter?: ChatAdapter
+  /** 默认模型 */
+  defaultModel?: string
+  /** 默认模式 */
+  defaultMode?: ChatMode
+}
+
+/**
+ * 聊天状态管理 Hook
+ */
+export function useChat(options: UseChatOptions = {}) {
+  const {
+    adapter = createNullAdapter(),
+    defaultModel = 'anthropic/claude-opus-4.5',
+    defaultMode = 'agent',
+  } = options
+
+  // 会话状态
+  const [sessions, setSessions] = useState<SessionRecord[]>([])
+  const [currentSessionId, setCurrentSessionId] = useState<string | null>(null)
+  const [messages, setMessages] = useState<ChatMessage[]>([])
+
+  // 配置状态
+  const [mode, setModeState] = useState<ChatMode>(defaultMode)
+  const [model, setModelState] = useState(defaultModel)
+  const [webSearch, setWebSearchState] = useState(true)
+  const [thinking, setThinkingState] = useState(true)
+
+  // 加载状态
+  const [isLoading, setIsLoading] = useState(false)
+
+  // 取消控制器
+  const abortControllerRef = useRef<AbortController | null>(null)
+
+  // 用于在回调中访问最新状态
+  const sessionsRef = useRef(sessions)
+  const messagesRef = useRef(messages)
+  const currentSessionIdRef = useRef(currentSessionId)
+  const modeRef = useRef(mode)
+  const modelRef = useRef(model)
+  const webSearchRef = useRef(webSearch)
+  const thinkingRef = useRef(thinking)
+
+  // 同步 ref
+  sessionsRef.current = sessions
+  messagesRef.current = messages
+  currentSessionIdRef.current = currentSessionId
+  modeRef.current = mode
+  modelRef.current = model
+  webSearchRef.current = webSearch
+  thinkingRef.current = thinking
+
+  /** 加载会话列表 */
+  const loadSessions = useCallback(async () => {
+    try {
+      const list = await adapter.getSessions()
+      setSessions(list)
+      // 如果有会话且没有当前会话，选择最新的
+      if (list.length > 0 && !currentSessionIdRef.current) {
+        const firstSession = list[0]
+        setCurrentSessionId(firstSession.id)
+        const savedMessages = await adapter.getMessages(firstSession.id)
+        setMessages(savedMessages.map(convertToMessage))
+        setModeState(firstSession.mode)
+        setModelState(firstSession.model)
+      }
+    } catch (error) {
+      console.error('加载会话失败:', error)
+    }
+  }, [adapter])
+
+  /** 切换会话 */
+  const switchSession = useCallback(async (sessionId: string) => {
+    if (currentSessionIdRef.current === sessionId) return
+
+    setCurrentSessionId(sessionId)
+
+    try {
+      const savedMessages = await adapter.getMessages(sessionId)
+      setMessages(savedMessages.map(convertToMessage))
+
+      // 更新配置
+      const session = sessionsRef.current.find((s) => s.id === sessionId)
+      if (session) {
+        setModeState(session.mode)
+        setModelState(session.model)
+      }
+    } catch (error) {
+      console.error('加载消息失败:', error)
+      setMessages([])
+    }
+  }, [adapter])
+
+  /** 创建新会话 */
+  const createNewSession = useCallback(async () => {
+    try {
+      const session = await adapter.createSession({
+        title: '新对话',
+        model: modelRef.current,
+        mode: modeRef.current,
+      })
+      setSessions(prev => [session, ...prev])
+      setCurrentSessionId(session.id)
+      setMessages([])
+    } catch (error) {
+      console.error('创建会话失败:', error)
+    }
+  }, [adapter])
+
+  /** 删除会话 */
+  const deleteSession = useCallback(async (sessionId: string) => {
+    try {
+      await adapter.deleteSession(sessionId)
+      setSessions(prev => prev.filter((s) => s.id !== sessionId))
+
+      // 如果删除的是当前会话，切换到下一个
+      if (currentSessionIdRef.current === sessionId) {
+        const remaining = sessionsRef.current.filter((s) => s.id !== sessionId)
+        if (remaining.length > 0) {
+          await switchSession(remaining[0].id)
+        } else {
+          setCurrentSessionId(null)
+          setMessages([])
+        }
+      }
+    } catch (error) {
+      console.error('删除会话失败:', error)
+    }
+  }, [adapter, switchSession])
+
+  /** 删除当前会话 */
+  const deleteCurrentSession = useCallback(async () => {
+    if (currentSessionIdRef.current) {
+      await deleteSession(currentSessionIdRef.current)
+    }
+  }, [deleteSession])
+
+  /** 更新消息 */
+  const updateMessage = useCallback((index: number, progress: ChatProgress) => {
+    setMessages(prev => {
+      const newMessages = [...prev]
+      const msg = { ...newMessages[index] }
+      if (!msg) return prev
+
+      switch (progress.type) {
+        case 'thinking': {
+          const thinkingData = progress.data as { content: string; isComplete: boolean }
+          if (thinkingData.content) {
+            msg.thinking = (msg.thinking || '') + thinkingData.content
+          }
+          msg.thinkingComplete = thinkingData.isComplete
+          break
+        }
+
+        case 'search_start':
+          msg.searching = true
+          break
+
+        case 'search_result': {
+          msg.searching = false
+          const searchData = progress.data as { results: SearchResult[] }
+          msg.searchResults = searchData.results || []
+          break
+        }
+
+        case 'tool_call': {
+          const toolData = progress.data as { name: string; args: Record<string, unknown> }
+          if (!msg.toolCalls) msg.toolCalls = []
+          msg.toolCalls = [...msg.toolCalls, {
+            name: toolData.name,
+            args: toolData.args,
+            status: 'running' as const,
+          }]
+          break
+        }
+
+        case 'tool_result': {
+          const resultData = progress.data as { name: string; result: string }
+          if (msg.toolCalls) {
+            msg.toolCalls = msg.toolCalls.map((t: ToolCall) => {
+              if (t.name === resultData.name && t.status === 'running') {
+                return { ...t, result: resultData.result, status: 'success' as const }
+              }
+              return t
+            })
+          }
+          break
+        }
+
+        case 'text_delta':
+          msg.content = (msg.content || '') + (progress.data as string)
+          break
+
+        case 'text':
+          if (!msg.content) {
+            msg.content = progress.data as string
+          }
+          break
+
+        case 'error':
+          msg.content = (msg.content || '') + `\n\n❌ 错误: ${progress.data}`
+          break
+      }
+
+      newMessages[index] = msg
+      return newMessages
+    })
+  }, [])
+
+  /** 发送消息 */
+  const sendMessage = useCallback(async (text: string, images?: string[]) => {
+    if (!text.trim() || isLoading) return
+
+    // 如果没有当前会话，先创建
+    let sessionId = currentSessionIdRef.current
+    if (!sessionId) {
+      try {
+        const session = await adapter.createSession({
+          title: '新对话',
+          model: modelRef.current,
+          mode: modeRef.current,
+        })
+        setSessions(prev => [session, ...prev])
+        setCurrentSessionId(session.id)
+        sessionId = session.id
+      } catch (error) {
+        console.error('创建会话失败:', error)
+        return
+      }
+    }
+
+    // 添加用户消息
+    const userMsg: ChatMessage = {
+      id: generateId(),
+      role: 'user',
+      content: text,
+      images,
+      timestamp: new Date(),
+    }
+    
+    const currentMessages = messagesRef.current
+    setMessages([...currentMessages, userMsg])
+
+    // 保存用户消息
+    try {
+      await adapter.saveMessage({
+        sessionId,
+        role: 'user',
+        content: text,
+      })
+
+      // 更新会话标题（如果是第一条消息）
+      if (currentMessages.length === 0) {
+        const title = text.slice(0, 20) + (text.length > 20 ? '...' : '')
+        await adapter.updateSession(sessionId, { title })
+        setSessions(prev => prev.map((s) =>
+          s.id === sessionId ? { ...s, title } : s
+        ))
+      }
+    } catch (error) {
+      console.error('保存消息失败:', error)
+    }
+
+    // 创建助手消息
+    const assistantMsgIndex = currentMessages.length + 1
+    const assistantMsg: ChatMessage = {
+      id: generateId(),
+      role: 'assistant',
+      content: '',
+      toolCalls: [],
+      thinkingComplete: false,
+      searching: false,
+      loading: true,
+      timestamp: new Date(),
+    }
+    setMessages(prev => [...prev, assistantMsg])
+
+    setIsLoading(true)
+    abortControllerRef.current = new AbortController()
+
+    try {
+      // 使用异步迭代器接收消息流
+      for await (const progress of adapter.sendMessage(
+        text,
+        {
+          mode: modeRef.current,
+          model: modelRef.current,
+          enableWebSearch: webSearchRef.current,
+          thinkingMode: thinkingRef.current ? 'enabled' : 'disabled',
+        },
+        images
+      )) {
+        // 检查是否被取消
+        if (abortControllerRef.current?.signal.aborted) break
+
+        updateMessage(assistantMsgIndex, progress)
+
+        if (progress.type === 'done' || progress.type === 'error') {
+          break
+        }
+      }
+    } catch (error) {
+      console.error('发送消息失败:', error)
+      updateMessage(assistantMsgIndex, {
+        type: 'error',
+        data: error instanceof Error ? error.message : String(error),
+      })
+    } finally {
+      setIsLoading(false)
+
+      // 标记加载完成并保存
+      setMessages(prev => {
+        const newMessages = [...prev]
+        const finalMsg = newMessages[assistantMsgIndex]
+        if (finalMsg) {
+          newMessages[assistantMsgIndex] = { ...finalMsg, loading: false }
+
+          // 保存助手消息
+          if (sessionId) {
+            adapter.saveMessage({
+              sessionId,
+              role: 'assistant',
+              content: finalMsg.content,
+              thinking: finalMsg.thinking,
+              toolCalls: finalMsg.toolCalls ? JSON.stringify(finalMsg.toolCalls) : undefined,
+              searchResults: finalMsg.searchResults
+                ? JSON.stringify(finalMsg.searchResults)
+                : undefined,
+            }).catch((e: Error) => console.error('保存助手消息失败:', e))
+          }
+        }
+        return newMessages
+      })
+
+      abortControllerRef.current = null
+    }
+  }, [adapter, isLoading, updateMessage])
+
+  /** 取消请求 */
+  const cancelRequest = useCallback(() => {
+    adapter.cancel()
+    abortControllerRef.current?.abort()
+    setIsLoading(false)
+  }, [adapter])
+
+  /** 复制消息 */
+  const copyMessage = useCallback(async (messageId: string) => {
+    const msg = messagesRef.current.find((m) => m.id === messageId)
+    if (!msg) return
+
+    try {
+      await navigator.clipboard.writeText(msg.content)
+      setMessages(prev => prev.map((m) =>
+        m.id === messageId ? { ...m, copied: true } : m
+      ))
+      setTimeout(() => {
+        setMessages(prev => prev.map((m) =>
+          m.id === messageId ? { ...m, copied: false } : m
+        ))
+      }, 2000)
+    } catch (err) {
+      console.error('复制失败:', err)
+    }
+  }, [])
+
+  /** 重新生成消息 */
+  const regenerateMessage = useCallback((messageIndex: number) => {
+    const currentMsgs = messagesRef.current
+    if (messageIndex > 0 && currentMsgs[messageIndex - 1]?.role === 'user') {
+      const userMsg = currentMsgs[messageIndex - 1]
+      setMessages(prev => prev.slice(0, messageIndex - 1))
+      sendMessage(userMsg.content, userMsg.images)
+    }
+  }, [sendMessage])
+
+  /** 设置工作目录 */
+  const setWorkingDirectory = useCallback((dir: string) => {
+    if (adapter.setWorkingDir) {
+      adapter.setWorkingDir(dir)
+    }
+  }, [adapter])
+
+  // 配置方法
+  const setMode = useCallback((value: ChatMode) => setModeState(value), [])
+  const setModel = useCallback((value: string) => setModelState(value), [])
+  const setWebSearch = useCallback((value: boolean) => setWebSearchState(value), [])
+  const setThinking = useCallback((value: boolean) => setThinkingState(value), [])
+
+  return {
+    // 状态
+    sessions,
+    currentSessionId,
+    messages,
+    isLoading,
+    mode,
+    model,
+    webSearch,
+    thinking,
+
+    // 会话方法
+    loadSessions,
+    switchSession,
+    createNewSession,
+    deleteSession,
+    deleteCurrentSession,
+
+    // 消息方法
+    sendMessage,
+    cancelRequest,
+    copyMessage,
+    regenerateMessage,
+
+    // 配置方法
+    setMode,
+    setModel,
+    setWebSearch,
+    setThinking,
+
+    // 工具方法
+    setWorkingDirectory,
+  }
+}

package/src/index.ts

@@ -0,0 +1,81 @@
+/**
+ * @huyooo/ai-chat-frontend-react
+ *
+ * AI Chat 前端组件库 - React 版本
+ *
+ * 使用 adapter 模式，与后端通信方式解耦
+ * 与 Vue 版本 (@huyooo/ai-chat-frontend-vue) 保持一致的 API
+ */
+
+// 导出 Adapter 接口和类型
+export type {
+  ChatAdapter,
+  ChatProgress,
+  ChatProgressType,
+  ThinkingData,
+  ToolCallData,
+  ToolResultData,
+  ImageData,
+  SendMessageOptions,
+  CreateSessionOptions,
+  UpdateSessionOptions,
+  SaveMessageOptions,
+} from './adapter'
+export { createNullAdapter } from './adapter'
+
+// 导出 hooks
+export { useChat } from './hooks/useChat'
+export type { UseChatOptions } from './hooks/useChat'
+
+// 导出主组件
+export { ChatPanel } from './components/ChatPanel'
+
+// 导出输入组件
+export { ChatInput } from './components/ChatInput'
+
+// 导出 Header 组件
+export { ChatHeader } from './components/chat/ui/ChatHeader'
+
+// 导出欢迎消息组件
+export { WelcomeMessage } from './components/chat/ui/WelcomeMessage'
+
+// 导出消息组件
+export { MessageBubble } from './components/chat/messages/MessageBubble'
+export { ExecutionSteps } from './components/chat/messages/ExecutionSteps'
+
+// 导出类型
+export type {
+  ChatMessage,
+  ChatMode,
+  ModelConfig,
+  ModelProvider,
+  ThinkingMode,
+  SessionRecord,
+  MessageRecord,
+  SearchResult,
+  ToolCall,
+  // 向后兼容
+  ChatSession,
+  MediaOperation,
+  AiModel,
+  DiffStat,
+} from './types'
+export { DEFAULT_MODELS, FileType } from './types'
+
+/**
+ * 使用说明：
+ *
+ * 1. 导入样式：
+ *    import '@huyooo/ai-chat-frontend-react/style.css'
+ *
+ * 2. 创建 adapter（使用桥接包）：
+ *    import { createElectronAdapter } from '@huyooo/ai-chat-bridge-electron/renderer'
+ *    const adapter = createElectronAdapter()
+ *
+ * 3. 在 React 组件中使用：
+ *    <ChatPanel adapter={adapter} />
+ *
+ * 4. 或使用 useChat hook：
+ *    const chat = useChat({ adapter })
+ *    // 然后自定义 UI
+ */