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

package/src/components/ChatInput.tsx

@@ -1,368 +0,0 @@
-/**
- * ChatInput Component
- * 与 Vue 版本 ChatInput.vue 保持一致
- */
-
-import { useState, useRef, useCallback, useEffect, type FC } from 'react'
-import {
-  X,
-  ChevronDown,
-  Check,
-  Globe,
-  Sparkles,
-  ImageIcon,
-  Square,
-  ArrowUp,
-  Zap,
-  MessageCircle,
-  AtSign,
-  Mic,
-} from 'lucide-react'
-import type { ChatMode, ModelConfig } from '../types'
-import { DEFAULT_MODELS } from '../types'
-
-interface ChatInputProps {
-  /** 变体模式：input-底部输入框，message-历史消息 */
-  variant?: 'input' | 'message'
-  /** 受控值（用于历史消息编辑） */
-  value?: string
-  selectedImages?: string[]
-  isLoading?: boolean
-  mode?: ChatMode
-  model?: string
-  models?: ModelConfig[]
-  webSearchEnabled?: boolean
-  thinkingEnabled?: boolean
-  onSend?: (text: string) => void
-  onRemoveImage?: (index: number) => void
-  onCancel?: () => void
-  onUploadImage?: () => void
-  onAtContext?: () => void
-  onModeChange?: (mode: ChatMode) => void
-  onModelChange?: (model: string) => void
-  onWebSearchChange?: (enabled: boolean) => void
-  onThinkingChange?: (enabled: boolean) => void
-}
-
-/** 模式配置 */
-const MODES = [
-  { value: 'agent' as const, label: 'Agent', Icon: Zap },
-  { value: 'ask' as const, label: 'Ask', Icon: MessageCircle },
-]
-
-export const ChatInput: FC<ChatInputProps> = ({
-  variant = 'input',
-  value = '',
-  selectedImages = [],
-  isLoading = false,
-  mode = 'agent',
-  model = '',
-  models = DEFAULT_MODELS,
-  webSearchEnabled = false,
-  thinkingEnabled = false,
-  onSend,
-  onRemoveImage,
-  onCancel,
-  onUploadImage,
-  onAtContext,
-  onModeChange,
-  onModelChange,
-  onWebSearchChange,
-  onThinkingChange,
-}) => {
-  const isMessageVariant = variant === 'message'
-
-  const [inputText, setInputText] = useState(value)
-  const [isFocused, setIsFocused] = useState(false)
-  const [modeMenuOpen, setModeMenuOpen] = useState(false)
-  const [modelMenuOpen, setModelMenuOpen] = useState(false)
-
-  const inputRef = useRef<HTMLTextAreaElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
-
-  // 同步外部 value
-  useEffect(() => {
-    setInputText(value)
-  }, [value])
-
-  const currentMode = MODES.find((m) => m.value === mode) || MODES[0]
-  const currentModel = models.find((m) => m.model === model)
-
-  // 是否显示工具栏
-  const showToolbar = !isMessageVariant || isFocused
-
-  // 预览
-  const selectedPreview = selectedImages.slice(0, 3)
-
-  // 占位符
-  const placeholder = selectedImages.length > 0
-    ? '描述你想要的效果...'
-    : mode === 'ask'
-      ? '有什么问题想问我？'
-      : '描述任务，@ 添加上下文'
-
-  // 自动调整高度
-  const adjustTextareaHeight = useCallback(() => {
-    if (inputRef.current) {
-      inputRef.current.style.height = 'auto'
-      const scrollHeight = inputRef.current.scrollHeight
-      inputRef.current.style.height = `${Math.min(scrollHeight, 150)}px`
-    }
-  }, [])
-
-  // 发送或取消
-  const handleSendOrCancel = useCallback(() => {
-    if (isLoading) {
-      onCancel?.()
-      return
-    }
-
-    const text = inputText.trim()
-    if (!text) return
-
-    onSend?.(text)
-
-    if (!isMessageVariant) {
-      setInputText('')
-      if (inputRef.current) {
-        inputRef.current.style.height = 'auto'
-      }
-      inputRef.current?.focus()
-    } else {
-      setIsFocused(false)
-    }
-  }, [isLoading, inputText, onSend, onCancel, isMessageVariant])
-
-  // 键盘事件
-  const handleKeydown = useCallback(
-    (event: React.KeyboardEvent) => {
-      if (event.key === 'Enter' && !event.shiftKey) {
-        event.preventDefault()
-        handleSendOrCancel()
-      } else {
-        setTimeout(adjustTextareaHeight, 0)
-      }
-    },
-    [handleSendOrCancel, adjustTextareaHeight]
-  )
-
-  // 选择模式
-  const selectMode = useCallback(
-    (value: ChatMode) => {
-      onModeChange?.(value)
-      setModeMenuOpen(false)
-    },
-    [onModeChange]
-  )
-
-  // 选择模型
-  const selectModel = useCallback(
-    (m: ModelConfig) => {
-      onModelChange?.(m.model)
-      setModelMenuOpen(false)
-    },
-    [onModelChange]
-  )
-
-  // 图片 URL 处理
-  const getImageUrl = (path: string): string => {
-    if (
-      path.startsWith('app://') ||
-      path.startsWith('file://') ||
-      path.startsWith('data:') ||
-      path.startsWith('http')
-    ) {
-      return path
-    }
-    if (path.match(/^[A-Z]:\\/i)) {
-      return `app://file${encodeURIComponent(path.replace(/\\/g, '/'))}`
-    }
-    return `app://file${encodeURIComponent(path)}`
-  }
-
-  // 点击外部关闭菜单
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as HTMLElement
-      if (!target.closest('.selector')) {
-        setModeMenuOpen(false)
-        setModelMenuOpen(false)
-      }
-      if (
-        isMessageVariant &&
-        containerRef.current &&
-        !containerRef.current.contains(target)
-      ) {
-        setIsFocused(false)
-      }
-    }
-
-    document.addEventListener('click', handleClickOutside)
-    return () => document.removeEventListener('click', handleClickOutside)
-  }, [isMessageVariant])
-
-  const CurrentModeIcon = currentMode.Icon
-
-  return (
-    <div className={`chat-input${isMessageVariant ? ' message-variant' : ''}`}>
-      <div
-        ref={containerRef}
-        className={`input-container${isFocused ? ' focused' : ''}`}
-      >
-        {/* 附件预览 */}
-        {selectedImages.length > 0 && (
-          <div className="attachment-preview">
-            <div className="preview-images">
-              {selectedPreview.map((img, index) => (
-                <div key={`${img}-${index}`} className="preview-item">
-                  <img
-                    src={getImageUrl(img)}
-                    className="preview-thumb"
-                    alt={`附件 ${index + 1}`}
-                    onError={(e) => {
-                      (e.target as HTMLImageElement).style.display = 'none'
-                    }}
-                  />
-                  {!isMessageVariant && (
-                    <button
-                      className="remove-btn"
-                      title={`移除图片 ${index + 1}`}
-                      onClick={() => onRemoveImage?.(index)}
-                    >
-                      <X size={10} />
-                    </button>
-                  )}
-                </div>
-              ))}
-              {selectedImages.length > 3 && (
-                <div className="preview-more">+{selectedImages.length - 3}</div>
-              )}
-            </div>
-          </div>
-        )}
-
-        {/* 输入框 */}
-        <div className="input-field-wrapper">
-          <textarea
-            ref={inputRef}
-            value={inputText}
-            onChange={(e) => setInputText(e.target.value)}
-            onKeyDown={handleKeydown}
-            onInput={adjustTextareaHeight}
-            onFocus={() => setIsFocused(true)}
-            placeholder={placeholder}
-            rows={1}
-            className="input-field"
-          />
-        </div>
-
-        {/* 底部控制栏 */}
-        {showToolbar && (
-          <div className="input-controls">
-            {/* 左侧：模式和模型选择 */}
-            <div className="input-left">
-              {/* 模式选择 */}
-              <div
-                className="selector mode-selector"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  setModeMenuOpen(!modeMenuOpen)
-                  setModelMenuOpen(false)
-                }}
-              >
-                <CurrentModeIcon size={12} />
-                <span>{currentMode.label}</span>
-                <ChevronDown size={10} className="chevron" />
-
-                {modeMenuOpen && (
-                  <div className="dropdown-menu" onClick={(e) => e.stopPropagation()}>
-                    {MODES.map((m) => (
-                      <button
-                        key={m.value}
-                        className={`dropdown-item${mode === m.value ? ' active' : ''}`}
-                        onClick={() => selectMode(m.value)}
-                      >
-                        <m.Icon size={14} />
-                        <span>{m.label}</span>
-                        {mode === m.value && <Check size={14} className="check-icon" />}
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-
-              {/* 模型选择 */}
-              <div
-                className="selector model-selector"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  setModelMenuOpen(!modelMenuOpen)
-                  setModeMenuOpen(false)
-                }}
-              >
-                <span>{currentModel?.displayName || 'Auto'}</span>
-                <ChevronDown size={10} className="chevron" />
-
-                {modelMenuOpen && (
-                  <div className="dropdown-menu" onClick={(e) => e.stopPropagation()}>
-                    {models.map((m) => (
-                      <button
-                        key={m.model}
-                        className={`dropdown-item${model === m.model ? ' active' : ''}`}
-                        onClick={() => selectModel(m)}
-                      >
-                        <span>{m.displayName}</span>
-                        {model === m.model && <Check size={14} className="check-icon" />}
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* 右侧：功能按钮 */}
-            <div className="input-right">
-              <button className="icon-btn" title="提及上下文 (@)" onClick={onAtContext}>
-                <AtSign size={14} />
-              </button>
-
-              <button
-                className={`toggle-btn${thinkingEnabled ? ' active' : ''}`}
-                title="深度思考"
-                onClick={() => onThinkingChange?.(!thinkingEnabled)}
-              >
-                <Sparkles size={14} />
-              </button>
-
-              <button
-                className={`toggle-btn${webSearchEnabled ? ' active' : ''}`}
-                title="联网搜索"
-                onClick={() => onWebSearchChange?.(!webSearchEnabled)}
-              >
-                <Globe size={14} />
-              </button>
-
-              <button className="icon-btn" title="上传图片" onClick={onUploadImage}>
-                <ImageIcon size={14} />
-              </button>
-
-              {inputText.trim() || isLoading ? (
-                <button
-                  className={`send-btn${isLoading ? ' loading' : ''}`}
-                  title={isLoading ? '停止' : isMessageVariant ? '重新发送' : '发送'}
-                  onClick={handleSendOrCancel}
-                >
-                  {isLoading ? <Square size={14} /> : <ArrowUp size={14} />}
-                </button>
-              ) : (
-                <button className="icon-btn" title="语音输入">
-                  <Mic size={14} />
-                </button>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

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

@@ -1,234 +0,0 @@
-/**
- * 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>
-  )
-}