@huyooo/ai-chat-frontend-react 0.1.2

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@huyooo/ai-chat-frontend-react",
+  "version": "0.1.2",
+  "description": "AI Chat Frontend - React components with adapter pattern",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "development": "./src/index.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "lucide-react": "^0.460.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "ai",
+    "chat",
+    "react",
+    "frontend"
+  ],
+  "author": "huyooo",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/adapter.ts

@@ -0,0 +1,162 @@
+/**
+ * Chat Adapter 接口定义
+ * 解耦前端组件与后端通信方式
+ * 
+ * 与 Vue 版本保持一致
+ */
+
+import type { SessionRecord, MessageRecord, ChatMode, ThinkingMode, SearchResult } from './types'
+
+/** 聊天进度类型 */
+export type ChatProgressType =
+  | 'thinking'
+  | 'search_start'
+  | 'search_result'
+  | 'tool_call'
+  | 'tool_result'
+  | 'text_delta'
+  | 'text'
+  | 'done'
+  | 'error'
+
+/** 思考数据 */
+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 ChatProgress {
+  type: ChatProgressType
+  data: string | ThinkingData | ToolCallData | ToolResultData | { results: SearchResult[] }
+}
+
+/** 发送消息选项 */
+export interface SendMessageOptions {
+  mode: ChatMode
+  model: string
+  enableWebSearch: boolean
+  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
+  thinking?: string
+  toolCalls?: string
+  searchResults?: string
+}
+
+/**
+ * Chat Adapter 接口
+ * 所有后端通信实现都需要实现此接口
+ */
+export interface ChatAdapter {
+  /** 获取所有会话 */
+  getSessions(): Promise<SessionRecord[]>
+  
+  /** 创建新会话 */
+  createSession(options: CreateSessionOptions): Promise<SessionRecord>
+  
+  /** 更新会话 */
+  updateSession(sessionId: string, options: UpdateSessionOptions): Promise<void>
+  
+  /** 删除会话 */
+  deleteSession(sessionId: string): Promise<void>
+  
+  /** 获取会话消息 */
+  getMessages(sessionId: string): Promise<MessageRecord[]>
+  
+  /** 保存消息 */
+  saveMessage(options: SaveMessageOptions): Promise<MessageRecord>
+  
+  /** 发送消息并获取流式响应 */
+  sendMessage(
+    content: string,
+    options: SendMessageOptions,
+    images?: string[]
+  ): AsyncGenerator<ChatProgress, void, unknown>
+  
+  /** 取消当前请求 */
+  cancel(): void
+  
+  /** 设置工作目录 */
+  setWorkingDir?(dir: string): void
+}
+
+/**
+ * 创建空 Adapter（用于测试或无后端场景）
+ */
+export function createNullAdapter(): ChatAdapter {
+  return {
+    async getSessions() {
+      return []
+    },
+    async createSession(options) {
+      return {
+        id: Date.now().toString(),
+        title: options.title,
+        model: options.model,
+        mode: options.mode,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      }
+    },
+    async updateSession() {},
+    async deleteSession() {},
+    async getMessages() {
+      return []
+    },
+    async saveMessage(options) {
+      return {
+        id: Date.now().toString(),
+        sessionId: options.sessionId,
+        role: options.role,
+        content: options.content,
+        thinking: options.thinking,
+        toolCalls: options.toolCalls,
+        searchResults: options.searchResults,
+        timestamp: new Date(),
+      }
+    },
+    async *sendMessage() {
+      yield { type: 'text', data: '无可用的 Adapter' }
+      yield { type: 'done', data: '' }
+    },
+    cancel() {},
+  }
+}

package/src/components/ChatInput.tsx

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