@huyooo/ai-chat-frontend-react 0.2.14 → 0.2.16

package/src/adapter.ts

@@ -1,68 +0,0 @@
-/**
- * Chat Adapter 辅助类型和工具
- * 核心 ChatAdapter 接口从 bridge-electron 导入
- */
-
-import type { ChatAdapter, ChatMode, ThinkingMode, FileInfo } from '@huyooo/ai-chat-bridge-electron/renderer'
-
-/**
- * 重新导出 ChatAdapter 类型供内部组件使用
- */
-export type { ChatAdapter, FileInfo }
-
-/** 思考数据 */
-export interface ThinkingData {
-  content: string
-  isComplete: boolean
-}
-
-/** 工具调用数据 */
-export interface ToolCallData {
-  name: string
-  args: Record<string, unknown>
-}
-
-/** 工具结果数据 */
-export interface ToolResultData {
-  name: string
-  result: string
-}
-
-/** 图片数据 */
-export interface ImageData {
-  base64: string
-  mimeType: string
-}
-
-/** 发送消息选项 */
-export interface SendMessageOptions {
-  mode: ChatMode
-  model: string
-  enableWebSearch: boolean
-  /** 深度思考开关（每个 provider 内部使用最优参数） */
-  thinkingMode: ThinkingMode
-}
-
-/** 创建会话选项 */
-export interface CreateSessionOptions {
-  title: string
-  model: string
-  mode: ChatMode
-}
-
-/** 更新会话选项 */
-export interface UpdateSessionOptions {
-  title?: string
-  model?: string
-  mode?: ChatMode
-}
-
-/** 保存消息选项 */
-export interface SaveMessageOptions {
-  sessionId: string
-  role: 'user' | 'assistant'
-  content: string
-  /** 执行步骤列表 JSON */
-  steps?: string
-  operationIds?: string
-}

package/src/components/ChatPanel.tsx

@@ -1,553 +0,0 @@
-/**
- * ChatPanel Component
- * 与 Vue 版本 ChatPanel.vue 保持一致
- */
-
-import { useEffect, useRef, useCallback, useMemo, useState, forwardRef, useImperativeHandle, type ComponentType } from 'react'
-import { Icon } from '@iconify/react'
-import { useChat, type ToolCompleteEvent } from '../hooks/useChat'
-import type { ImageData } from '../adapter'
-import type { ChatAdapter, ModelOption, ChatMode } from '@huyooo/ai-chat-bridge-electron/renderer'
-import type { AutoRunConfig } from '@huyooo/ai-chat-bridge-electron/renderer'
-import { ChatHeader } from './header/ChatHeader'
-import { WelcomeMessage } from './message/WelcomeMessage'
-import type { WelcomeConfig } from './message/welcome-types'
-import { MessageBubble } from './message/MessageBubble'
-import { ChatInput, type ChatInputHandle } from './input/ChatInput'
-import { ChatInputProvider } from '../context/ChatInputContext'
-import { PartRenderersProvider, type PartRenderers } from '../context/RenderersContext'
-import { ConfirmDialog } from './common/ConfirmDialog'
-import { Toast } from './common/Toast'
-// ToolApprovalDialog 已移除，工具批准现在内嵌在 ToolCallPart 中
-import { SettingsPanel } from './common/SettingsPanel'
-
-/** ChatPanel 暴露给外部的方法 */
-export interface ChatPanelHandle {
-  /** 设置输入框内容 */
-  setInputText: (text: string) => void
-  /** 在光标位置插入文本（用于 @ 上下文） */
-  insertInputText: (text: string) => void
-  /** 聚焦输入框 */
-  focusInput: () => void
-  /** 发送消息 */
-  sendMessage: (text: string) => void
-  /** 设置当前工作目录 */
-  setCwd: (dir: string) => void
-}
-
-interface ChatPanelProps {
-  /** Adapter 实例 */
-  adapter: ChatAdapter
-  /** 默认模型 */
-  defaultModel?: string
-  /** 默认模式 */
-  defaultMode?: ChatMode
-  /** 可用模型列表 */
-  models?: ModelOption[]
-  /** 隐藏标题栏 */
-  hideHeader?: boolean
-  /** 关闭回调（有此属性时显示关闭按钮） */
-  onClose?: () => void
-  /** 工具执行完成回调 */
-  onToolComplete?: (event: ToolCompleteEvent) => void
-  /** 自定义类名 */
-  className?: string
-  /** 欢迎页配置 */
-  welcomeConfig?: Partial<WelcomeConfig>
-  /** 自定义 Part 渲染器 - 根据 part.type 选择渲染组件（如 weather, stock 等） */
-  partRenderers?: PartRenderers
-  /** 
-   * 执行步骤折叠模式
-   * - 'open': 始终展开
-   * - 'close': 始终折叠
-   * - 'auto': 执行时展开，完成后折叠
-   */
-  stepsExpandedType?: 'open' | 'close' | 'auto'
-}
-
-export const ChatPanel = forwardRef<ChatPanelHandle, ChatPanelProps>(({
-  adapter,
-  defaultModel = 'anthropic/claude-opus-4.5',
-  defaultMode = 'agent',
-  models: propModels,
-  hideHeader = false,
-  onClose,
-  onToolComplete,
-  className = '',
-  welcomeConfig,
-  partRenderers = {},
-  stepsExpandedType = 'auto',
-}, ref) => {
-  const messagesRef = useRef<HTMLDivElement>(null)
-  const inputRef = useRef<ChatInputHandle>(null)
-
-  // 是否应该自动滚动（用户在底部附近时才自动滚动）
-  const [shouldAutoScroll, setShouldAutoScroll] = useState(true)
-  // 距离底部多少像素内算"在底部"
-  const SCROLL_THRESHOLD = 25
-  // 上次滚动位置（用于检测滚动方向）
-  const lastScrollTopRef = useRef(0)
-  // 是否正在程序化滚动（用于区分用户手动滚动）
-  const isProgrammaticScrollRef = useRef(false)
-
-  // 设置面板状态
-  const [settingsPanelVisible, setSettingsPanelVisible] = useState(false)
-
-  // 从后端获取模型列表，如果传入了 models 则使用传入的
-  const [models, setModels] = useState<ModelOption[]>(propModels || [])
-
-  // 确认弹窗状态
-  const [confirmDialog, setConfirmDialog] = useState<{
-    visible: boolean
-    title: string
-    message: string
-    type: 'info' | 'warning' | 'danger'
-    confirmText: string
-    onConfirm: () => void
-  }>({
-    visible: false,
-    title: '确认',
-    message: '',
-    type: 'warning',
-    confirmText: '确定',
-    onConfirm: () => {},
-  })
-
-  /** 显示确认弹窗 */
-  const showConfirm = useCallback((options: {
-    title?: string
-    message: string
-    type?: 'info' | 'warning' | 'danger'
-    confirmText?: string
-    onConfirm: () => void
-  }) => {
-    setConfirmDialog({
-      visible: true,
-      title: options.title || '确认',
-      message: options.message,
-      type: options.type || 'warning',
-      confirmText: options.confirmText || '确定',
-      onConfirm: options.onConfirm,
-    })
-  }, [])
-
-  // Toast 消息状态
-  const [toast, setToast] = useState<{
-    visible: boolean
-    message: string
-    type: 'info' | 'success' | 'warning' | 'error'
-  }>({ visible: false, message: '', type: 'info' })
-
-  /** 显示 Toast 消息 */
-  const showToast = useCallback((message: string, type: 'info' | 'success' | 'warning' | 'error' = 'info') => {
-    setToast({ visible: true, message, type })
-  }, [])
-
-  const {
-    sessions,
-    currentSessionId,
-    messages,
-    isLoading,
-    mode,
-    model,
-    webSearch,
-    thinking,
-    loadSessions,
-    switchSession,
-    createNewSession,
-    deleteSession,
-    hideSession,
-    clearAllSessions,
-    hideOtherSessions,
-    exportCurrentSession,
-    sendMessage,
-    cancelRequest,
-    copyMessage,
-    regenerateMessage,
-    resendFromIndex,
-    setMode,
-    setModel,
-    setWebSearch,
-    setThinking,
-    setWorkingDirectory,
-    autoRunConfig,
-    saveAutoRunConfig,
-    // 工具管理
-    allTools,
-    enabledTools,
-    saveEnabledTools,
-  } = useChat({
-    adapter,
-    defaultModel,
-    defaultMode,
-    onToolComplete,
-  })
-
-  const handleCancelToolCall = useCallback((_toolCallId: string) => {
-    cancelRequest()
-  }, [cancelRequest])
-
-  // 暴露给外部的方法
-  useImperativeHandle(ref, () => ({
-    setInputText: (text: string) => {
-      inputRef.current?.setText(text)
-    },
-    insertInputText: (text: string) => {
-      inputRef.current?.insertText(text)
-    },
-    focusInput: () => {
-      inputRef.current?.focus()
-    },
-    sendMessage: (text: string) => {
-      sendMessage(text)
-    },
-    setCwd: setWorkingDirectory,
-  }), [sendMessage, setWorkingDirectory])
-
-  // 初始化
-  useEffect(() => {
-    loadSessions()
-  }, [loadSessions])
-
-  // 从后端获取模型列表
-  useEffect(() => {
-    adapter.getModels()
-      .then(setModels)
-      .catch((err) => console.warn('获取模型列表失败:', err))
-  }, [adapter])
-
-  // 注意：cwd 已解耦，不再通过 prop 传递
-  // FileBrowser 会直接通过 adapter.setCwd() 同步到 Agent
-  // getCwdTool 会自动从 Agent 的 context.cwd 读取最新值
-
-  // 检查是否在底部附近
-  const isNearBottom = useCallback((): boolean => {
-    if (!messagesRef.current) return true
-    const { scrollTop, scrollHeight, clientHeight } = messagesRef.current
-    return scrollHeight - scrollTop - clientHeight < SCROLL_THRESHOLD
-  }, [])
-
-  // 处理滚动事件（优化：检测滚动方向，区分程序化滚动）
-  const handleScroll = useCallback(() => {
-    if (!messagesRef.current) return
-    
-    // 忽略程序化滚动触发的事件
-    if (isProgrammaticScrollRef.current) return
-    
-    const { scrollTop } = messagesRef.current
-    const isScrollingUp = scrollTop < lastScrollTopRef.current
-    lastScrollTopRef.current = scrollTop
-    
-    // 用户向上滚动时，立即停止自动滚动
-    if (isScrollingUp) {
-      setShouldAutoScroll(false)
-      return
-    }
-    
-    // 用户向下滚动到底部附近时，恢复自动滚动
-    if (isNearBottom()) {
-      setShouldAutoScroll(true)
-    }
-  }, [isNearBottom])
-
-  // 滚动到底部
-  const scrollToBottom = useCallback((force = false) => {
-    if (messagesRef.current && (force || shouldAutoScroll)) {
-      // 标记为程序化滚动，避免触发 handleScroll 逻辑
-      isProgrammaticScrollRef.current = true
-      messagesRef.current.scrollTop = messagesRef.current.scrollHeight
-      lastScrollTopRef.current = messagesRef.current.scrollTop
-      // 强制滚动时才恢复自动滚动
-      if (force) {
-        setShouldAutoScroll(true)
-      }
-      // 延迟重置标志，确保 scroll 事件已处理
-      requestAnimationFrame(() => {
-        isProgrammaticScrollRef.current = false
-      })
-    }
-  }, [shouldAutoScroll])
-
-  // 消息变化时滚动（只在用户在底部时）
-  useEffect(() => {
-    scrollToBottom()
-  }, [messages, scrollToBottom])
-
-  // 发送新消息时强制滚动到底部
-  const prevIsLoadingRef = useRef(isLoading)
-  useEffect(() => {
-    // 开始加载时（发送消息时）强制滚动到底部
-    if (isLoading && !prevIsLoadingRef.current) {
-      scrollToBottom(true)
-    }
-    prevIsLoadingRef.current = isLoading
-  }, [isLoading, scrollToBottom])
-
-  // 发送消息
-  const handleSend = useCallback((text: string, images?: ImageData[]) => {
-    // 将 ImageData[] 转换为 string[] (data URL)
-    const imageUrls = images?.map(img => `data:${img.mimeType};base64,${img.base64}`)
-    sendMessage(text, imageUrls)
-  }, [sendMessage])
-
-  // @ 上下文
-  const handleAtContext = useCallback(() => {
-    // TODO: 实现 @ 上下文
-    console.log('@ 上下文')
-  }, [])
-
-  // 快捷操作
-  const handleQuickAction = useCallback(
-    (text: string) => {
-      sendMessage(text)
-    },
-    [sendMessage]
-  )
-
-  // 重新发送（编辑后）
-  const handleResend = useCallback(
-    (index: number, text: string) => {
-      // 与 Vue 版一致：使用分叉重发（以当前索引为锚点，删除后续并继续生成）
-      resendFromIndex(index, text)
-    },
-    [resendFromIndex]
-  )
-
-  // 创建新会话（重置输入框状态）
-  const handleNewSession = useCallback(async () => {
-    await createNewSession()
-    // 重置输入框状态
-    inputRef.current?.clear()
-  }, [createNewSession])
-
-  // 关闭
-  const handleClose = useCallback(() => {
-    onClose?.()
-  }, [onClose])
-
-  // 设置
-  const handleSettings = useCallback(() => {
-    setSettingsPanelVisible(true)
-  }, [])
-
-  // 保存设置（静默保存）
-  const handleSaveSettings = useCallback(async (config: AutoRunConfig) => {
-    try {
-      await saveAutoRunConfig(config)
-    } catch (error) {
-      console.error('保存设置失败:', error)
-      showToast('保存设置失败', 'error')
-    }
-  }, [saveAutoRunConfig, showToast])
-
-  const handleUpdateEnabledTools = useCallback(async (tools: string[] | undefined) => {
-    try {
-      await saveEnabledTools(tools)
-    } catch (error) {
-      console.error('保存工具开关失败:', error)
-      showToast('保存工具开关失败', 'error')
-    }
-  }, [saveEnabledTools, showToast])
-
-  // 模式变更现在在 ToolCallPart 中处理，不再需要此函数
-
-  // 清空所有对话
-  const handleClearAll = useCallback(() => {
-    showConfirm({
-      title: '清空所有对话',
-      message: '确定要清空所有对话吗？此操作不可恢复。',
-      type: 'danger',
-      confirmText: '清空',
-      onConfirm: () => clearAllSessions(),
-    })
-  }, [showConfirm, clearAllSessions])
-
-  // 关闭其他对话
-  const handleCloseOthers = useCallback(async () => {
-    await hideOtherSessions()
-  }, [hideOtherSessions])
-
-  // 导出对话
-  const handleExport = useCallback(() => {
-    const data = exportCurrentSession()
-    if (!data) {
-      showToast('当前会话没有内容可导出', 'warning')
-      return
-    }
-
-    // 创建下载链接
-    const blob = new Blob([data], { type: 'application/json' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    const session = sessions.find((s) => s.id === currentSessionId)
-    const filename = `chat-${session?.title || 'export'}-${new Date().toISOString().slice(0, 10)}.json`
-    a.href = url
-    a.download = filename
-    document.body.appendChild(a)
-    a.click()
-    document.body.removeChild(a)
-    URL.revokeObjectURL(url)
-  }, [exportCurrentSession, sessions, currentSessionId, showToast])
-
-  // 复制会话 ID
-  const handleCopyId = useCallback(async () => {
-    if (!currentSessionId) return
-    try {
-      await navigator.clipboard.writeText(currentSessionId)
-      showToast('已复制会话 ID', 'success')
-    } catch (error) {
-      console.error('复制失败:', error)
-    }
-  }, [currentSessionId, showToast])
-
-  // 反馈
-  const handleFeedback = useCallback(() => {
-    console.log('反馈')
-  }, [])
-
-  // 全局 input 状态 context value
-  const inputContextValue = useMemo(
-    () => ({
-      mode,
-      model,
-      models,
-      webSearch,
-      thinking,
-      isLoading,
-      adapter,
-      // cwd 已解耦，不再通过 prop 传递
-      // FileBrowser 会直接通过 adapter.setCwd() 同步到 Agent
-      // getCwdTool 会自动从 Agent 的 context.cwd 读取最新值
-      setMode,
-      setModel,
-      setWebSearch,
-      setThinking,
-    }),
-    [mode, model, models, webSearch, thinking, isLoading, adapter, setMode, setModel, setWebSearch, setThinking]
-  )
-
-  return (
-    <ChatInputProvider value={inputContextValue}>
-      <PartRenderersProvider partRenderers={partRenderers}>
-        <div className={`chat-panel ${className}`.trim()}>
-          {/* 确认弹窗 */}
-          <ConfirmDialog
-          visible={confirmDialog.visible}
-          title={confirmDialog.title}
-          message={confirmDialog.message}
-          type={confirmDialog.type}
-          confirmText={confirmDialog.confirmText}
-          onConfirm={() => {
-            setConfirmDialog((prev) => ({ ...prev, visible: false }))
-            confirmDialog.onConfirm()
-          }}
-          onCancel={() => setConfirmDialog((prev) => ({ ...prev, visible: false }))}
-        />
-
-        {/* Toast 消息 */}
-        <Toast
-          visible={toast.visible}
-          message={toast.message}
-          type={toast.type}
-          onClose={() => setToast((prev) => ({ ...prev, visible: false }))}
-        />
-
-        {/* 工具批准现在内嵌在 ToolCallPart 中，不再需要全局对话框 */}
-
-        {/* 设置面板 */}
-        <SettingsPanel
-          visible={settingsPanelVisible}
-          config={autoRunConfig}
-          allTools={allTools}
-          enabledTools={enabledTools}
-          onUpdateEnabledTools={handleUpdateEnabledTools}
-          onChange={handleSaveSettings}
-          onClose={() => setSettingsPanelVisible(false)}
-        />
-
-        {/* 顶部标题栏 */}
-        {!hideHeader && (
-          <ChatHeader
-            sessions={sessions}
-            currentSessionId={currentSessionId}
-            showClose={!!onClose}
-            onNewSession={handleNewSession}
-            onSwitchSession={switchSession}
-            onDeleteSession={deleteSession}
-            onHideSession={hideSession}
-            onClose={handleClose}
-            onClearAll={handleClearAll}
-            onCloseOthers={handleCloseOthers}
-            onExport={handleExport}
-            onCopyId={handleCopyId}
-            onFeedback={handleFeedback}
-            onSettings={handleSettings}
-          />
-        )}
-
-        {/* 消息列表容器 */}
-        <div className="messages-wrapper">
-          <div ref={messagesRef} className="messages-container chat-scrollbar" onScroll={handleScroll}>
-            {messages.length === 0 ? (
-              <WelcomeMessage config={welcomeConfig} onQuickAction={handleQuickAction} />
-            ) : (
-              messages.map((msg, index) => (
-                <MessageBubble
-                  key={msg.id}
-                  role={msg.role}
-                  parts={msg.parts}
-                  model={msg.model}
-                  mode={msg.mode}
-                  images={msg.images}
-                  copied={msg.copied}
-                  loading={msg.loading}
-                  timestamp={msg.timestamp}
-                  stepsExpandedType={stepsExpandedType}
-                  adapter={adapter}
-                  onCancelToolCall={handleCancelToolCall}
-                  autoRunConfig={autoRunConfig}
-                  onSaveConfig={saveAutoRunConfig}
-                  onCopy={() => copyMessage(msg.id)}
-                  onRegenerate={() => regenerateMessage(index)}
-                  onSend={(text) => handleResend(index, text)}
-                />
-              ))
-            )}
-          </div>
-          {/* 滚动到底部按钮 */}
-          {!shouldAutoScroll && messages.length > 0 && (
-            <button
-              className="scroll-to-bottom-btn"
-              onClick={() => scrollToBottom(true)}
-              title="滚动到底部"
-            >
-              <Icon icon="lucide:arrow-down" width={16} />
-            </button>
-          )}
-        </div>
-
-        {/* 输入区域 */}
-        <ChatInput
-          ref={inputRef}
-          isLoading={isLoading}
-          mode={mode}
-          model={model}
-          models={models}
-          webSearchEnabled={webSearch}
-          thinkingEnabled={thinking}
-          onSend={handleSend}
-          onCancel={cancelRequest}
-          onModeChange={setMode}
-          onModelChange={setModel}
-          onWebSearchChange={setWebSearch}
-          onThinkingChange={setThinking}
-          onAtContext={handleAtContext}
-        />
-        </div>
-      </PartRenderersProvider>
-    </ChatInputProvider>
-  )
-})
-
-// 添加 displayName 以便于调试
-ChatPanel.displayName = 'ChatPanel'