@huyooo/ai-chat-frontend-vue 0.1.2

package/src/composables/useChat.ts

@@ -0,0 +1,423 @@
+/**
+ * useChat Composable
+ * 管理聊天状态和与后端的通信
+ * 使用 Adapter 模式解耦后端通信
+ */
+
+import { ref, computed, shallowRef } from 'vue'
+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
+}
+
+/**
+ * 聊天状态管理 Composable
+ */
+export function useChat(options: UseChatOptions = {}) {
+  const {
+    adapter = createNullAdapter(),
+    defaultModel = 'anthropic/claude-opus-4.5',
+    defaultMode = 'agent',
+  } = options
+
+  // 会话状态
+  const sessions = ref<SessionRecord[]>([])
+  const currentSessionId = ref<string | null>(null)
+  const messages = ref<ChatMessage[]>([])
+
+  // 配置状态
+  const mode = ref<ChatMode>(defaultMode)
+  const model = ref(defaultModel)
+  const webSearch = ref(true)
+  const thinking = ref(true)
+
+  // 加载状态
+  const isLoading = ref(false)
+
+  // 取消标记
+  const abortController = shallowRef<AbortController | null>(null)
+
+  /** 加载会话列表 */
+  async function loadSessions() {
+    try {
+      const list = await adapter.getSessions()
+      sessions.value = list
+      // 如果有会话且没有当前会话，选择最新的
+      if (list.length > 0 && !currentSessionId.value) {
+        await switchSession(list[0].id)
+      }
+    } catch (error) {
+      console.error('加载会话失败:', error)
+    }
+  }
+
+  /** 切换会话 */
+  async function switchSession(sessionId: string) {
+    if (currentSessionId.value === sessionId) return
+
+    currentSessionId.value = sessionId
+
+    try {
+      const savedMessages = await adapter.getMessages(sessionId)
+      messages.value = savedMessages.map(convertToMessage)
+
+      // 更新配置
+      const session = sessions.value.find((s) => s.id === sessionId)
+      if (session) {
+        mode.value = session.mode
+        model.value = session.model
+      }
+    } catch (error) {
+      console.error('加载消息失败:', error)
+      messages.value = []
+    }
+  }
+
+  /** 创建新会话 */
+  async function createNewSession() {
+    try {
+      const session = await adapter.createSession({
+        title: '新对话',
+        model: model.value,
+        mode: mode.value,
+      })
+      sessions.value = [session, ...sessions.value]
+      currentSessionId.value = session.id
+      messages.value = []
+    } catch (error) {
+      console.error('创建会话失败:', error)
+    }
+  }
+
+  /** 删除会话 */
+  async function deleteSession(sessionId: string) {
+    try {
+      await adapter.deleteSession(sessionId)
+      sessions.value = sessions.value.filter((s) => s.id !== sessionId)
+
+      // 如果删除的是当前会话，切换到下一个
+      if (currentSessionId.value === sessionId) {
+        if (sessions.value.length > 0) {
+          await switchSession(sessions.value[0].id)
+        } else {
+          currentSessionId.value = null
+          messages.value = []
+        }
+      }
+    } catch (error) {
+      console.error('删除会话失败:', error)
+    }
+  }
+
+  /** 删除当前会话 */
+  async function deleteCurrentSession() {
+    if (currentSessionId.value) {
+      await deleteSession(currentSessionId.value)
+    }
+  }
+
+  /** 更新消息 */
+  function updateMessage(index: number, progress: ChatProgress) {
+    const msg = messages.value[index]
+    if (!msg) return
+
+    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.push({
+          name: toolData.name,
+          args: toolData.args,
+          status: 'running',
+        })
+        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
+    }
+
+    // 触发响应式更新
+    messages.value = [...messages.value]
+  }
+
+  /** 发送消息 */
+  async function sendMessage(text: string, images?: string[]) {
+    if (!text.trim() || isLoading.value) return
+
+    // 如果没有当前会话，先创建
+    let sessionId = currentSessionId.value
+    if (!sessionId) {
+      try {
+        const session = await adapter.createSession({
+          title: '新对话',
+          model: model.value,
+          mode: mode.value,
+        })
+        sessions.value = [session, ...sessions.value]
+        currentSessionId.value = session.id
+        sessionId = session.id
+      } catch (error) {
+        console.error('创建会话失败:', error)
+        return
+      }
+    }
+
+    // 添加用户消息
+    const userMsg: ChatMessage = {
+      id: generateId(),
+      role: 'user',
+      content: text,
+      images,
+      timestamp: new Date(),
+    }
+    messages.value = [...messages.value, userMsg]
+
+    // 保存用户消息
+    try {
+      await adapter.saveMessage({
+        sessionId,
+        role: 'user',
+        content: text,
+      })
+
+      // 更新会话标题（如果是第一条消息）
+      if (messages.value.length === 1) {
+        const title = text.slice(0, 20) + (text.length > 20 ? '...' : '')
+        await adapter.updateSession(sessionId, { title })
+        sessions.value = sessions.value.map((s) =>
+          s.id === sessionId ? { ...s, title } : s
+        )
+      }
+    } catch (error) {
+      console.error('保存消息失败:', error)
+    }
+
+    // 创建助手消息
+    const assistantMsgIndex = messages.value.length
+    const assistantMsg: ChatMessage = {
+      id: generateId(),
+      role: 'assistant',
+      content: '',
+      toolCalls: [],
+      thinkingComplete: false,
+      searching: false,
+      loading: true,
+      timestamp: new Date(),
+    }
+    messages.value = [...messages.value, assistantMsg]
+
+    isLoading.value = true
+    abortController.value = new AbortController()
+
+    try {
+      // 使用异步迭代器接收消息流
+      for await (const progress of adapter.sendMessage(
+        text,
+        {
+          mode: mode.value,
+          model: model.value,
+          enableWebSearch: webSearch.value,
+          thinkingMode: thinking.value ? 'enabled' : 'disabled',
+        },
+        images
+      )) {
+        // 检查是否被取消
+        if (abortController.value?.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 {
+      isLoading.value = false
+
+      // 标记加载完成
+      const finalMsg = messages.value[assistantMsgIndex]
+      if (finalMsg) {
+        finalMsg.loading = false
+        messages.value = [...messages.value]
+
+        // 保存助手消息
+        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))
+        }
+      }
+
+      abortController.value = null
+    }
+  }
+
+  /** 取消请求 */
+  function cancelRequest() {
+    adapter.cancel()
+    abortController.value?.abort()
+    isLoading.value = false
+  }
+
+  /** 复制消息 */
+  async function copyMessage(messageId: string) {
+    const msg = messages.value.find((m) => m.id === messageId)
+    if (!msg) return
+
+    try {
+      await navigator.clipboard.writeText(msg.content)
+      messages.value = messages.value.map((m) =>
+        m.id === messageId ? { ...m, copied: true } : m
+      )
+      setTimeout(() => {
+        messages.value = messages.value.map((m) =>
+          m.id === messageId ? { ...m, copied: false } : m
+        )
+      }, 2000)
+    } catch (err) {
+      console.error('复制失败:', err)
+    }
+  }
+
+  /** 重新生成消息 */
+  function regenerateMessage(messageIndex: number) {
+    if (messageIndex > 0 && messages.value[messageIndex - 1]?.role === 'user') {
+      const userMsg = messages.value[messageIndex - 1]
+      messages.value = messages.value.slice(0, messageIndex - 1)
+      sendMessage(userMsg.content, userMsg.images)
+    }
+  }
+
+  /** 设置工作目录 */
+  function setWorkingDirectory(dir: string) {
+    if (adapter.setWorkingDir) {
+      adapter.setWorkingDir(dir)
+    }
+  }
+
+  return {
+    // 状态
+    sessions,
+    currentSessionId,
+    messages,
+    isLoading,
+    mode,
+    model,
+    webSearch,
+    thinking,
+
+    // 会话方法
+    loadSessions,
+    switchSession,
+    createNewSession,
+    deleteSession,
+    deleteCurrentSession,
+
+    // 消息方法
+    sendMessage,
+    cancelRequest,
+    copyMessage,
+    regenerateMessage,
+
+    // 配置方法
+    setMode: (value: ChatMode) => { mode.value = value },
+    setModel: (value: string) => { model.value = value },
+    setWebSearch: (value: boolean) => { webSearch.value = value },
+    setThinking: (value: boolean) => { thinking.value = value },
+
+    // 工具方法
+    setWorkingDirectory,
+  }
+}

package/src/index.ts

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

package/src/preload/preload.ts

@@ -0,0 +1,79 @@
+/**
+ * AI Chat 模块的 Preload 脚本（完全独立实现）
+ */
+
+import { contextBridge, ipcRenderer } from 'electron';
+
+// 暴露受保护的方法给渲染进程
+contextBridge.exposeInMainWorld('aiChatAPI', {
+  // AI 图片保存
+  saveGeneratedImage: (base64Data: string, targetDir: string) =>
+    ipcRenderer.invoke('aiChat:saveGeneratedImage', base64Data, targetDir),
+  
+  // 视频生成
+  generateVideo: (options: { prompt: string; imagePaths?: string[]; targetDir: string; apiKey?: string }) =>
+    ipcRenderer.invoke('aiChat:generateVideo', options),
+  
+  // 视频生成进度监听
+  onVideoProgress: (callback: (data: { taskId: string; status: string; message: string; progress?: number }) => void) => {
+    const handler = (_event: Electron.IpcRendererEvent, data: { taskId: string; status: string; message: string; progress?: number }) => callback(data);
+    ipcRenderer.on('video:progress', handler);
+    return () => ipcRenderer.removeListener('video:progress', handler);
+  },
+  
+  // Gemini API 请求（非流式）
+  streamChat: (options: {
+    contents: Array<{ role: string; parts: unknown[] }>;
+    tools?: Array<{ functionDeclarations: unknown[] }>;
+    generationConfig?: { maxOutputTokens?: number };
+  }) => ipcRenderer.invoke('aiChat:streamChat', options),
+  
+  // Gemini API 非流式请求（用于图片分析等）
+  chat: (options: {
+    contents: Array<{ role: string; parts: unknown[] }>;
+    generationConfig?: { maxOutputTokens?: number };
+  }) => ipcRenderer.invoke('aiChat:chat', options),
+  
+  // 文件系统操作（独立实现，不依赖主系统）
+  fs: {
+    readDirectory: (dirPath: string) => ipcRenderer.invoke('aiChat:fs:readDirectory', dirPath),
+    readFileContent: (filePath: string) => ipcRenderer.invoke('aiChat:fs:readFileContent', filePath),
+    getSystemPath: (pathId: string) => ipcRenderer.invoke('aiChat:fs:getSystemPath', pathId),
+    writeFileContent: (filePath: string, content: string) => ipcRenderer.invoke('aiChat:fs:writeFileContent', filePath, content),
+    deleteFiles: (paths: string[]) => ipcRenderer.invoke('aiChat:fs:deleteFiles', paths),
+    renameFile: (oldPath: string, newPath: string) => ipcRenderer.invoke('aiChat:fs:renameFile', oldPath, newPath),
+    createFolder: (parentDir: string, folderName: string) => ipcRenderer.invoke('aiChat:fs:createFolder', parentDir, folderName),
+    createFile: (parentDir: string, fileName: string, content?: string) => ipcRenderer.invoke('aiChat:fs:createFile', parentDir, fileName, content),
+    copyFilesToClipboard: (filePaths: string[]) => ipcRenderer.invoke('aiChat:fs:copyFilesToClipboard', filePaths),
+    getClipboardFiles: () => ipcRenderer.invoke('aiChat:fs:getClipboardFiles'),
+    pasteFiles: (targetDir: string, sourcePaths: string[]) => ipcRenderer.invoke('aiChat:fs:pasteFiles', targetDir, sourcePaths),
+    getFileInfo: (filePath: string) => ipcRenderer.invoke('aiChat:fs:getFileInfo', filePath),
+    readImageAsBase64: (imagePath: string) => ipcRenderer.invoke('aiChat:fs:readImageAsBase64', imagePath),
+  },
+  
+  // 操作历史（独立实现）
+  getHistory: () => ipcRenderer.invoke('aiChat:history:getList'),
+  undo: (operationId?: string) => ipcRenderer.invoke('aiChat:history:undo', operationId),
+  
+  // 工具操作（独立实现）
+  tools: {
+    deleteFiles: (paths: string[]) => ipcRenderer.invoke('aiChat:tool:deleteFiles', paths),
+    renameFile: (oldPath: string, newName: string) => ipcRenderer.invoke('aiChat:tool:renameFile', oldPath, newName),
+    moveFiles: (paths: string[], targetDir: string) => ipcRenderer.invoke('aiChat:tool:moveFiles', paths, targetDir),
+    copyFiles: (paths: string[], targetDir: string) => ipcRenderer.invoke('aiChat:tool:copyFiles', paths, targetDir),
+    analyzeImages: (imagePaths: string[], question?: string) => ipcRenderer.invoke('aiChat:tool:analyzeImages', imagePaths, question),
+    generateImage: (prompt: string, referenceImagePaths?: string[], targetDir?: string) => ipcRenderer.invoke('aiChat:tool:generateImage', prompt, referenceImagePaths, targetDir),
+    generateVideo: (prompt: string, referenceImagePaths?: string[], targetDir?: string) => ipcRenderer.invoke('aiChat:tool:generateVideo', prompt, referenceImagePaths, targetDir),
+    clipVideo: (videoPath: string, startTime: number, endTime: number, outputPath?: string) => ipcRenderer.invoke('aiChat:tool:clipVideo', videoPath, startTime, endTime, outputPath),
+    transcodeVideo: (videoPath: string, outputFormat: string, resolution?: string, bitrate?: string, outputPath?: string) => ipcRenderer.invoke('aiChat:tool:transcodeVideo', videoPath, outputFormat, resolution, bitrate, outputPath),
+    mergeVideos: (videoPaths: string[], outputPath?: string) => ipcRenderer.invoke('aiChat:tool:mergeVideos', videoPaths, outputPath),
+    extractAudio: (videoPath: string, outputPath?: string) => ipcRenderer.invoke('aiChat:tool:extractAudio', videoPath, outputPath),
+    executeCommand: (command: string, workingDir?: string) => ipcRenderer.invoke('aiChat:tool:executeCommand', command, workingDir),
+  },
+});
+
+// 默认导出（用于 index.ts）
+export default {
+  // 如果需要，可以在这里添加一些配置或方法
+};
+