@huyooo/ai-chat-frontend-react 0.1.2

package/src/components/ChatPanel.tsx

@@ -0,0 +1,235 @@
+/**
+ * ChatPanel Component
+ * 与 Vue 版本 ChatPanel.vue 保持一致
+ */
+
+import { useEffect, useRef, useCallback, type FC, type ReactNode } from 'react'
+import { useChat } from '../hooks/useChat'
+import type { ChatAdapter } from '../adapter'
+import type { ModelConfig, ChatMode } from '../types'
+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'
+
+interface ChatPanelProps {
+  /** Adapter 实例 */
+  adapter?: ChatAdapter
+  /** 工作目录 */
+  workingDir?: string
+  /** 默认模型 */
+  defaultModel?: string
+  /** 默认模式 */
+  defaultMode?: ChatMode
+  /** 可用模型列表 */
+  models?: ModelConfig[]
+  /** 隐藏标题栏 */
+  hideHeader?: boolean
+  /** 关闭回调（有此属性时显示关闭按钮） */
+  onClose?: () => void
+  /** 自定义类名 */
+  className?: string
+  /** 自定义 Markdown 渲染器 */
+  renderMarkdown?: (content: string) => ReactNode
+}
+
+export const ChatPanel: FC<ChatPanelProps> = ({
+  adapter,
+  workingDir,
+  defaultModel = 'anthropic/claude-opus-4.5',
+  defaultMode = 'agent',
+  models = DEFAULT_MODELS,
+  hideHeader = false,
+  onClose,
+  className = '',
+  renderMarkdown,
+}) => {
+  const messagesRef = useRef<HTMLDivElement>(null)
+
+  const {
+    sessions,
+    currentSessionId,
+    messages,
+    isLoading,
+    mode,
+    model,
+    webSearch,
+    thinking,
+    loadSessions,
+    switchSession,
+    createNewSession,
+    deleteSession,
+    sendMessage,
+    cancelRequest,
+    copyMessage,
+    regenerateMessage,
+    setMode,
+    setModel,
+    setWebSearch,
+    setThinking,
+    setWorkingDirectory,
+  } = useChat({
+    adapter,
+    defaultModel,
+    defaultMode,
+  })
+
+  // 选中的图片
+  // const [selectedImages, setSelectedImages] = useState<string[]>([])
+
+  // 初始化
+  useEffect(() => {
+    loadSessions()
+  }, [loadSessions])
+
+  // 工作目录变化时更新
+  useEffect(() => {
+    if (workingDir) {
+      setWorkingDirectory(workingDir)
+    }
+  }, [workingDir, setWorkingDirectory])
+
+  // 滚动到底部
+  const scrollToBottom = useCallback(() => {
+    if (messagesRef.current) {
+      messagesRef.current.scrollTop = messagesRef.current.scrollHeight
+    }
+  }, [])
+
+  // 消息变化时滚动
+  useEffect(() => {
+    scrollToBottom()
+  }, [messages, scrollToBottom])
+
+  // 发送消息
+  const handleSend = useCallback(
+    (text: string) => {
+      sendMessage(text)
+    },
+    [sendMessage]
+  )
+
+  // 快捷操作
+  const handleQuickAction = useCallback(
+    (text: string) => {
+      sendMessage(text)
+    },
+    [sendMessage]
+  )
+
+  // 重新发送（编辑后）
+  const handleResend = useCallback(
+    (index: number, text: string) => {
+      // 删除当前消息及后续消息，然后重新发送
+      // 这里简化处理，实际需要更完善的逻辑
+      sendMessage(text)
+    },
+    [sendMessage]
+  )
+
+  // 关闭
+  const handleClose = useCallback(() => {
+    onClose?.()
+  }, [onClose])
+
+  // 清空所有对话
+  const handleClearAll = useCallback(() => {
+    console.log('清空所有对话')
+  }, [])
+
+  // 关闭其他对话
+  const handleCloseOthers = useCallback(() => {
+    console.log('关闭其他对话')
+  }, [])
+
+  // 导出对话
+  const handleExport = useCallback(() => {
+    console.log('导出对话')
+  }, [])
+
+  // 复制请求 ID
+  const handleCopyId = useCallback(() => {
+    if (currentSessionId) {
+      navigator.clipboard.writeText(currentSessionId)
+      console.log('已复制请求 ID:', currentSessionId)
+    }
+  }, [currentSessionId])
+
+  // 反馈
+  const handleFeedback = useCallback(() => {
+    console.log('反馈')
+  }, [])
+
+  // 设置
+  const handleSettings = useCallback(() => {
+    console.log('Agent 设置')
+  }, [])
+
+  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}
+        />
+      )}
+
+      {/* 消息列表 */}
+      <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}
+            />
+          ))
+        )}
+      </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>
+  )
+}

package/src/components/chat/messages/ExecutionSteps.tsx

@@ -0,0 +1,234 @@
+/**
+ * ExecutionSteps Component
+ * 与 Vue 版本 ExecutionSteps.vue 保持一致
+ */
+
+import { useState, type FC, type ReactNode } from 'react'
+import {
+  ChevronDown,
+  ChevronUp,
+  Sparkles,
+  Globe,
+  FileText,
+  FileEdit,
+  Terminal,
+  Search,
+  Folder,
+  FolderPlus,
+  Trash2,
+  Image,
+  Video,
+  Wrench,
+  ExternalLink,
+} from 'lucide-react'
+import type { SearchResult, ToolCall } from '../../../types'
+
+interface ExecutionStepsProps {
+  /** 是否正在加载 */
+  loading?: boolean
+  /** 是否有消息内容 */
+  hasContent?: boolean
+  /** 思考内容 */
+  thinking?: string
+  /** 思考是否完成 */
+  thinkingComplete?: boolean
+  /** 思考耗时 */
+  thinkingDuration?: number
+  /** 是否正在搜索 */
+  searching?: boolean
+  /** 搜索结果 */
+  searchResults?: SearchResult[]
+  /** 工具调用列表 */
+  toolCalls?: ToolCall[]
+}
+
+/** 步骤项组件 */
+interface StepItemProps {
+  icon: ReactNode
+  title: string
+  status: 'running' | 'completed' | 'error'
+  extra?: string
+  detail?: ReactNode
+  defaultExpanded?: boolean
+}
+
+const StepItem: FC<StepItemProps> = ({
+  icon,
+  title,
+  status,
+  extra,
+  detail,
+  defaultExpanded = false,
+}) => {
+  const [expanded, setExpanded] = useState(defaultExpanded)
+  const isRunning = status === 'running'
+  const hasDetail = !!detail
+
+  return (
+    <div className="step-item">
+      <button
+        className={`step-header${isRunning ? ' running' : ''}`}
+        onClick={() => hasDetail && setExpanded(!expanded)}
+        disabled={!hasDetail}
+        style={{ cursor: hasDetail ? 'pointer' : 'default' }}
+      >
+        <span className={`step-icon${isRunning ? ' pulse' : ''}`}>{icon}</span>
+        <span className="step-title">{title}</span>
+        {hasDetail && (
+          expanded ? <ChevronUp className="step-chevron" size={12} /> : <ChevronDown className="step-chevron" size={12} />
+        )}
+        {extra && <span className="step-extra">{extra}</span>}
+      </button>
+
+      {expanded && detail && (
+        <div className="step-detail">
+          {typeof detail === 'string' ? <pre>{detail}</pre> : detail}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/** 获取工具调用的显示名称 */
+function getToolDisplayName(name: string): string {
+  const nameMap: Record<string, string> = {
+    read_file: '读取文件',
+    write_file: '写入文件',
+    execute_command: '执行命令',
+    search_files: '搜索文件',
+    list_directory: '列出目录',
+    create_directory: '创建目录',
+    delete_file: '删除文件',
+    web_search: '网页搜索',
+    generate_image: '生成图片',
+    image_to_video: '图片转视频',
+  }
+  return nameMap[name] || name
+}
+
+/** 获取工具调用的图标 */
+function getToolIcon(name: string) {
+  switch (name) {
+    case 'read_file': return <FileText size={14} />
+    case 'write_file': return <FileEdit size={14} />
+    case 'execute_command': return <Terminal size={14} />
+    case 'search_files': return <Search size={14} />
+    case 'list_directory': return <Folder size={14} />
+    case 'create_directory': return <FolderPlus size={14} />
+    case 'delete_file': return <Trash2 size={14} />
+    case 'web_search': return <Globe size={14} />
+    case 'generate_image': return <Image size={14} />
+    case 'image_to_video': return <Video size={14} />
+    default: return <Wrench size={14} />
+  }
+}
+
+/** 格式化工具调用参数 */
+function formatToolArgs(args?: Record<string, unknown>): string {
+  if (!args) return ''
+  return Object.entries(args)
+    .map(([key, value]) => `${key}: ${JSON.stringify(value)}`)
+    .join('\n')
+}
+
+export const ExecutionSteps: FC<ExecutionStepsProps> = ({
+  loading,
+  hasContent,
+  thinking,
+  thinkingComplete = true,
+  thinkingDuration,
+  searching,
+  searchResults,
+  toolCalls,
+}) => {
+  // 判断是否有任何执行步骤
+  const hasSteps =
+    thinking ||
+    searching ||
+    (searchResults && searchResults.length > 0) ||
+    (toolCalls && toolCalls.length > 0) ||
+    (loading && !hasContent)
+
+  if (!hasSteps) return null
+
+  return (
+    <div className="execution-steps">
+      {/* 正在规划 */}
+      {loading && !hasContent && !thinking && !searching && (!toolCalls || toolCalls.length === 0) && (
+        <StepItem
+          icon={<Sparkles size={14} />}
+          title="正在规划下一步..."
+          status="running"
+        />
+      )}
+
+      {/* 思考过程 */}
+      {thinking && (
+        <StepItem
+          icon={<Sparkles size={14} />}
+          title={thinkingComplete ? '思考完成' : '思考中...'}
+          status={thinkingComplete ? 'completed' : 'running'}
+          extra={thinkingDuration ? `${thinkingDuration}s` : undefined}
+          detail={thinking}
+        />
+      )}
+
+      {/* 搜索 */}
+      {(searching || (searchResults && searchResults.length > 0)) && (
+        <StepItem
+          icon={<Globe size={14} />}
+          title={searching ? '搜索中...' : `搜索完成 ${searchResults?.length || 0} 条结果`}
+          status={searching ? 'running' : 'completed'}
+          detail={
+            searchResults && searchResults.length > 0 ? (
+              <div>
+                {searchResults.map((result, i) => (
+                  <a
+                    key={i}
+                    href={result.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="search-result-item"
+                  >
+                    <div className="search-result-title">
+                      <span>{result.title}</span>
+                      <ExternalLink size={12} style={{ opacity: 0.5 }} />
+                    </div>
+                    <div className="search-result-snippet">{result.snippet}</div>
+                  </a>
+                ))}
+              </div>
+            ) : undefined
+          }
+        />
+      )}
+
+      {/* 工具调用 */}
+      {toolCalls &&
+        toolCalls.map((call, index) => (
+          <StepItem
+            key={`tool-${index}`}
+            icon={getToolIcon(call.name)}
+            title={`${getToolDisplayName(call.name)}${call.status === 'running' ? '...' : ''}`}
+            status={call.status === 'running' ? 'running' : call.status === 'error' ? 'error' : 'completed'}
+            detail={
+              <div>
+                {call.args && (
+                  <div style={{ marginBottom: call.result ? 8 : 0 }}>
+                    <div style={{ fontSize: 10, color: 'var(--chat-text-muted)', marginBottom: 4 }}>参数</div>
+                    <pre style={{ margin: 0 }}>{formatToolArgs(call.args)}</pre>
+                  </div>
+                )}
+                {call.result && (
+                  <div>
+                    <div style={{ fontSize: 10, color: 'var(--chat-text-muted)', marginBottom: 4 }}>结果</div>
+                    <pre style={{ margin: 0, maxHeight: 160, overflow: 'auto' }}>{call.result}</pre>
+                  </div>
+                )}
+              </div>
+            }
+          />
+        ))}
+    </div>
+  )
+}

package/src/components/chat/messages/MessageBubble.tsx

@@ -0,0 +1,130 @@
+/**
+ * MessageBubble Component
+ * 与 Vue 版本 MessageBubble.vue 保持一致
+ */
+
+import { type FC, type ReactNode } from 'react'
+import { Copy, Check, RefreshCw } from 'lucide-react'
+import { ExecutionSteps } from './ExecutionSteps'
+import { ChatInput } from '../../ChatInput'
+import type { SearchResult, ToolCall } from '../../../types'
+
+interface MessageBubbleProps {
+  role: 'user' | 'assistant'
+  content: string
+  images?: string[]
+  thinking?: string
+  thinkingComplete?: boolean
+  thinkingDuration?: number
+  searchResults?: SearchResult[]
+  searching?: boolean
+  toolCalls?: ToolCall[]
+  copied?: boolean
+  loading?: boolean
+  onCopy?: () => void
+  onRegenerate?: () => void
+  /** 编辑用户消息后重新发送 */
+  onSend?: (text: string) => void
+  /** 自定义 Markdown 渲染器 */
+  renderMarkdown?: (content: string) => ReactNode
+}
+
+/** 默认 Markdown 渲染（简单处理） */
+function defaultRenderMarkdown(content: string): ReactNode {
+  // 简单的 Markdown 处理：代码块
+  const parts = content.split(/(```[\s\S]*?```)/g)
+  
+  return parts.map((part, i) => {
+    if (part.startsWith('```') && part.endsWith('```')) {
+      const code = part.slice(3, -3)
+      const firstLine = code.indexOf('\n')
+      const lang = firstLine > 0 ? code.slice(0, firstLine).trim() : ''
+      const codeContent = firstLine > 0 ? code.slice(firstLine + 1) : code
+      return (
+        <pre key={i}>
+          <code>{codeContent}</code>
+        </pre>
+      )
+    }
+    // 处理行内代码
+    const inlineParts = part.split(/(`[^`]+`)/g)
+    return (
+      <span key={i}>
+        {inlineParts.map((p, j) => {
+          if (p.startsWith('`') && p.endsWith('`')) {
+            return <code key={j}>{p.slice(1, -1)}</code>
+          }
+          return p
+        })}
+      </span>
+    )
+  })
+}
+
+export const MessageBubble: FC<MessageBubbleProps> = ({
+  role,
+  content,
+  images,
+  thinking,
+  thinkingComplete = true,
+  thinkingDuration,
+  searchResults,
+  searching,
+  toolCalls,
+  copied,
+  loading,
+  onCopy,
+  onRegenerate,
+  onSend,
+  renderMarkdown = defaultRenderMarkdown,
+}) => {
+  const isUser = role === 'user'
+
+  return (
+    <div className="message-bubble">
+      {/* 用户消息 - 复用 ChatInput 组件 */}
+      {isUser ? (
+        <ChatInput
+          variant="message"
+          value={content}
+          selectedImages={images}
+          onSend={onSend}
+        />
+      ) : (
+        /* AI 消息 */
+        <div className="assistant-message">
+          {/* 执行步骤列表 */}
+          <ExecutionSteps
+            loading={loading}
+            hasContent={!!content}
+            thinking={thinking}
+            thinkingComplete={thinkingComplete}
+            thinkingDuration={thinkingDuration}
+            searching={searching}
+            searchResults={searchResults}
+            toolCalls={toolCalls}
+          />
+
+          {/* 消息内容 */}
+          {content && (
+            <div className="message-content">
+              {renderMarkdown(content)}
+            </div>
+          )}
+
+          {/* 操作按钮 */}
+          {content && !loading && (
+            <div className="message-actions">
+              <button className={`action-btn${copied ? ' copied' : ''}`} onClick={onCopy} title="复制">
+                {copied ? <Check size={14} /> : <Copy size={14} />}
+              </button>
+              <button className="action-btn" onClick={onRegenerate} title="重新生成">
+                <RefreshCw size={14} />
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}