@huyooo/ai-chat-frontend-react 0.1.6 → 0.1.8

package/src/components/ChatPanel.tsx

@@ -3,48 +3,140 @@
  * 与 Vue 版本 ChatPanel.vue 保持一致
  */
 
-import { useEffect, useRef, useCallback, type FC, type ReactNode } from 'react'
-import { useChat } from '../hooks/useChat'
-import type { ChatAdapter, ModelConfig, ChatMode } from '@huyooo/ai-chat-bridge-electron/renderer'
-import { DEFAULT_MODELS } from '../types'
-import { ChatHeader } from './chat/ui/ChatHeader'
-import { WelcomeMessage } from './chat/ui/WelcomeMessage'
-import { MessageBubble } from './chat/messages/MessageBubble'
-import { ChatInput } from './ChatInput'
+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 { ChatAdapter, ModelOption, ChatMode } from '@huyooo/ai-chat-bridge-electron/renderer'
+import type { AutoRunConfig } from '@huyooo/ai-chat-bridge-electron/renderer'
+import type { ToolRendererProps } from '@huyooo/ai-chat-shared'
+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 { RenderersProvider } 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
-  /** 工作目录 */
-  workingDir?: string
+  adapter: ChatAdapter
   /** 默认模型 */
   defaultModel?: string
   /** 默认模式 */
   defaultMode?: ChatMode
   /** 可用模型列表 */
-  models?: ModelConfig[]
+  models?: ModelOption[]
   /** 隐藏标题栏 */
   hideHeader?: boolean
   /** 关闭回调（有此属性时显示关闭按钮） */
   onClose?: () => void
+  /** 工具执行完成回调 */
+  onToolComplete?: (event: ToolCompleteEvent) => void
   /** 自定义类名 */
   className?: string
-  /** 自定义 Markdown 渲染器 */
-  renderMarkdown?: (content: string) => ReactNode
+  /** 欢迎页配置 */
+  welcomeConfig?: Partial<WelcomeConfig>
+  /** 自定义工具结果渲染器 - 根据工具名称选择渲染组件 */
+  toolRenderers?: Record<string, ComponentType<ToolRendererProps>>
+  /** 
+   * 执行步骤折叠模式
+   * - 'open': 始终展开
+   * - 'close': 始终折叠
+   * - 'auto': 执行时展开，完成后折叠
+   */
+  stepsExpandedType?: 'open' | 'close' | 'auto'
 }
 
-export const ChatPanel: FC<ChatPanelProps> = ({
+export const ChatPanel = forwardRef<ChatPanelHandle, ChatPanelProps>(({
   adapter,
-  workingDir,
   defaultModel = 'anthropic/claude-opus-4.5',
   defaultMode = 'agent',
-  models = DEFAULT_MODELS,
+  models: propModels,
   hideHeader = false,
   onClose,
+  onToolComplete,
   className = '',
-  renderMarkdown,
-}) => {
+  welcomeConfig,
+  toolRenderers = {},
+  stepsExpandedType = 'auto',
+}, ref) => {
   const messagesRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<ChatInputHandle>(null)
+
+  // 是否应该自动滚动（用户在底部附近时才自动滚动）
+  const [shouldAutoScroll, setShouldAutoScroll] = useState(true)
+  const SCROLL_THRESHOLD = 100
+
+  // 设置面板状态
+  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,
@@ -59,6 +151,10 @@ export const ChatPanel: FC<ChatPanelProps> = ({
     switchSession,
     createNewSession,
     deleteSession,
+    hideSession,
+    clearAllSessions,
+    hideOtherSessions,
+    exportCurrentSession,
     sendMessage,
     cancelRequest,
     copyMessage,
@@ -68,46 +164,93 @@ export const ChatPanel: FC<ChatPanelProps> = ({
     setWebSearch,
     setThinking,
     setWorkingDirectory,
+    autoRunConfig,
+    saveAutoRunConfig,
   } = useChat({
     adapter,
     defaultModel,
     defaultMode,
+    onToolComplete,
   })
 
-  // 选中的图片
-  // const [selectedImages, setSelectedImages] = useState<string[]>([])
+  // 暴露给外部的方法
+  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(() => {
-    if (workingDir) {
-      setWorkingDirectory(workingDir)
-    }
-  }, [workingDir, setWorkingDirectory])
+    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(() => {
+    setShouldAutoScroll(isNearBottom())
+  }, [isNearBottom])
 
   // 滚动到底部
-  const scrollToBottom = useCallback(() => {
-    if (messagesRef.current) {
+  const scrollToBottom = useCallback((force = false) => {
+    if (messagesRef.current && (force || shouldAutoScroll)) {
       messagesRef.current.scrollTop = messagesRef.current.scrollHeight
+      setShouldAutoScroll(true)
     }
-  }, [])
+  }, [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) => {
-      sendMessage(text)
-    },
-    [sendMessage]
-  )
+  const handleSend = useCallback((text: string) => {
+    sendMessage(text)
+  }, [sendMessage])
+
+  // @ 上下文
+  const handleAtContext = useCallback(() => {
+    // TODO: 实现 @ 上下文
+    console.log('@ 上下文')
+  }, [])
 
   // 快捷操作
   const handleQuickAction = useCallback(
@@ -119,7 +262,7 @@ export const ChatPanel: FC<ChatPanelProps> = ({
 
   // 重新发送（编辑后）
   const handleResend = useCallback(
-    (index: number, text: string) => {
+    (_index: number, text: string) => {
       // 删除当前消息及后续消息，然后重新发送
       // 这里简化处理，实际需要更完善的逻辑
       sendMessage(text)
@@ -132,103 +275,216 @@ export const ChatPanel: FC<ChatPanelProps> = ({
     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])
+
+  // 模式变更现在在 ToolCallPart 中处理，不再需要此函数
+
   // 清空所有对话
   const handleClearAll = useCallback(() => {
-    console.log('清空所有对话')
-  }, [])
+    showConfirm({
+      title: '清空所有对话',
+      message: '确定要清空所有对话吗？此操作不可恢复。',
+      type: 'danger',
+      confirmText: '清空',
+      onConfirm: () => clearAllSessions(),
+    })
+  }, [showConfirm, clearAllSessions])
 
   // 关闭其他对话
-  const handleCloseOthers = useCallback(() => {
-    console.log('关闭其他对话')
-  }, [])
+  const handleCloseOthers = useCallback(async () => {
+    await hideOtherSessions()
+  }, [hideOtherSessions])
 
   // 导出对话
   const handleExport = useCallback(() => {
-    console.log('导出对话')
-  }, [])
+    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(() => {
-    if (currentSessionId) {
-      navigator.clipboard.writeText(currentSessionId)
-      console.log('已复制请求 ID:', currentSessionId)
+  // 复制会话 ID
+  const handleCopyId = useCallback(async () => {
+    if (!currentSessionId) return
+    try {
+      await navigator.clipboard.writeText(currentSessionId)
+      showToast('已复制会话 ID', 'success')
+    } catch (error) {
+      console.error('复制失败:', error)
     }
-  }, [currentSessionId])
+  }, [currentSessionId, showToast])
 
   // 反馈
   const handleFeedback = useCallback(() => {
     console.log('反馈')
   }, [])
 
-  // 设置
-  const handleSettings = useCallback(() => {
-    console.log('Agent 设置')
-  }, [])
+  // 全局 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 (
-    <div className={`chat-panel ${className}`.trim()}>
-      {/* 顶部标题栏 */}
-      {!hideHeader && (
-        <ChatHeader
-          sessions={sessions}
-          currentSessionId={currentSessionId}
-          showClose={!!onClose}
-          onNewSession={createNewSession}
-          onSwitchSession={switchSession}
-          onDeleteSession={deleteSession}
-          onClose={handleClose}
-          onClearAll={handleClearAll}
-          onCloseOthers={handleCloseOthers}
-          onExport={handleExport}
-          onCopyId={handleCopyId}
-          onFeedback={handleFeedback}
-          onSettings={handleSettings}
+    <ChatInputProvider value={inputContextValue}>
+      <RenderersProvider blockRenderers={{}} toolRenderers={toolRenderers}>
+        <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 }))}
         />
-      )}
-
-      {/* 消息列表 */}
-      <div ref={messagesRef} className="messages-container">
-        {messages.length === 0 ? (
-          <WelcomeMessage onQuickAction={handleQuickAction} />
-        ) : (
-          messages.map((msg, index) => (
-            <MessageBubble
-              key={msg.id}
-              role={msg.role}
-              content={msg.content}
-              images={msg.images}
-              thinking={msg.thinking}
-              thinkingComplete={msg.thinkingComplete}
-              searchResults={msg.searchResults}
-              searching={msg.searching}
-              toolCalls={msg.toolCalls}
-              copied={msg.copied}
-              loading={msg.loading}
-              onCopy={() => copyMessage(msg.id)}
-              onRegenerate={() => regenerateMessage(index)}
-              onSend={(text) => handleResend(index, text)}
-              renderMarkdown={renderMarkdown}
-            />
-          ))
+
+        {/* Toast 消息 */}
+        <Toast
+          visible={toast.visible}
+          message={toast.message}
+          type={toast.type}
+          onClose={() => setToast((prev) => ({ ...prev, visible: false }))}
+        />
+
+        {/* 工具批准现在内嵌在 ToolCallPart 中，不再需要全局对话框 */}
+
+        {/* 设置面板 */}
+        <SettingsPanel
+          visible={settingsPanelVisible}
+          config={autoRunConfig}
+          onChange={handleSaveSettings}
+          onClose={() => setSettingsPanelVisible(false)}
+        />
+
+        {/* 顶部标题栏 */}
+        {!hideHeader && (
+          <ChatHeader
+            sessions={sessions}
+            currentSessionId={currentSessionId}
+            showClose={!!onClose}
+            onNewSession={createNewSession}
+            onSwitchSession={switchSession}
+            onDeleteSession={deleteSession}
+            onHideSession={hideSession}
+            onClose={handleClose}
+            onClearAll={handleClearAll}
+            onCloseOthers={handleCloseOthers}
+            onExport={handleExport}
+            onCopyId={handleCopyId}
+            onFeedback={handleFeedback}
+            onSettings={handleSettings}
+          />
         )}
-      </div>
-
-      {/* 输入区域 */}
-      <ChatInput
-        selectedImages={[]}
-        isLoading={isLoading}
-        mode={mode}
-        model={model}
-        models={models}
-        webSearchEnabled={webSearch}
-        thinkingEnabled={thinking}
-        onSend={handleSend}
-        onCancel={cancelRequest}
-        onModeChange={setMode}
-        onModelChange={setModel}
-        onWebSearchChange={setWebSearch}
-        onThinkingChange={setThinking}
-      />
-    </div>
+
+        {/* 消息列表容器 */}
+        <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}
+                  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>
+      </RenderersProvider>
+    </ChatInputProvider>
   )
-}
+})
+
+// 添加 displayName 以便于调试
+ChatPanel.displayName = 'ChatPanel'