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

package/src/hooks/useImageUpload.ts

@@ -0,0 +1,253 @@
+/**
+ * 图片上传 hook
+ * 处理图片选择、粘贴、拖拽、预览等功能
+ * 与 Vue 版本 useImageUpload.ts 保持一致
+ */
+
+import { useState, useCallback, useMemo } from 'react';
+
+/** 内部图片数据结构（包含预览用的 dataUrl） */
+export interface ImageItem {
+  dataUrl: string;
+  base64: string;
+  mimeType: string;
+}
+
+/** 导出给外部使用的图片数据格式 */
+export interface ImageData {
+  base64: string;
+  mimeType: string;
+}
+
+/** useImageUpload 配置项 */
+interface UseImageUploadOptions {
+  /** 最大图片数量，默认 5 */
+  maxImages?: number;
+  /** 单张图片最大大小（字节），默认 10MB */
+  maxSize?: number;
+}
+
+/**
+ * 图片上传 hook
+ * @param options 配置项
+ */
+export function useImageUpload(options: UseImageUploadOptions = {}) {
+  const { maxImages = 5, maxSize = 10 * 1024 * 1024 } = options;
+
+  // 图片列表
+  const [images, setImages] = useState<ImageItem[]>([]);
+
+  // 拖拽状态
+  const [isDragOver, setIsDragOver] = useState(false);
+
+  // 预览状态
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewIndex, setPreviewIndex] = useState(0);
+
+  // 图片 URL 数组（用于预览组件）
+  const imageUrls = useMemo(() => images.map((img) => img.dataUrl), [images]);
+
+  // 导出格式的图片数据
+  const imageData = useMemo<ImageData[]>(
+    () =>
+      images.map((img) => ({
+        base64: img.base64,
+        mimeType: img.mimeType,
+      })),
+    [images]
+  );
+
+  // 是否有图片
+  const hasImages = images.length > 0;
+
+  /**
+   * 读取图片文件为 base64
+   */
+  const readImageFile = useCallback((file: File): Promise<ImageItem> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const dataUrl = reader.result as string;
+        // dataUrl 格式: data:image/png;base64,xxxxx
+        const base64 = dataUrl.split(',')[1];
+        resolve({
+          dataUrl,
+          base64,
+          mimeType: file.type,
+        });
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  }, []);
+
+  /**
+   * 处理文件列表
+   */
+  const processFiles = useCallback(
+    async (files: File[]) => {
+      const remaining = maxImages - images.length;
+      const toProcess = files.slice(0, remaining);
+
+      const newImages: ImageItem[] = [];
+      for (const file of toProcess) {
+        if (file.size > maxSize) {
+          console.warn(`图片 ${file.name} 超过大小限制 (${Math.round(maxSize / 1024 / 1024)}MB)`);
+          continue;
+        }
+        try {
+          const imageItem = await readImageFile(file);
+          newImages.push(imageItem);
+        } catch (err) {
+          console.error('读取图片失败:', err);
+        }
+      }
+
+      if (newImages.length > 0) {
+        setImages((prev) => [...prev, ...newImages]);
+      }
+    },
+    [images.length, maxImages, maxSize, readImageFile]
+  );
+
+  /**
+   * 处理文件选择事件
+   */
+  const handleImageSelect = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const files = event.target.files;
+      if (files) {
+        processFiles(Array.from(files));
+      }
+      // 清空 input 以便再次选择相同文件
+      event.target.value = '';
+    },
+    [processFiles]
+  );
+
+  /**
+   * 处理粘贴事件
+   */
+  const handlePaste = useCallback(
+    (event: React.ClipboardEvent) => {
+      const items = event.clipboardData?.items;
+      if (!items) return;
+
+      const imageFiles: File[] = [];
+      for (const item of Array.from(items)) {
+        if (item.type.startsWith('image/')) {
+          const file = item.getAsFile();
+          if (file) imageFiles.push(file);
+        }
+      }
+
+      if (imageFiles.length > 0) {
+        event.preventDefault();
+        processFiles(imageFiles);
+      }
+    },
+    [processFiles]
+  );
+
+  /**
+   * 处理拖拽悬停事件
+   */
+  const handleDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    if (event.dataTransfer?.types.includes('Files')) {
+      setIsDragOver(true);
+    }
+  }, []);
+
+  /**
+   * 处理拖拽离开事件
+   */
+  const handleDragLeave = useCallback(() => {
+    setIsDragOver(false);
+  }, []);
+
+  /**
+   * 处理拖拽放下事件
+   */
+  const handleDrop = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault();
+      setIsDragOver(false);
+      const files = event.dataTransfer?.files;
+      if (files) {
+        const imageFiles = Array.from(files).filter((f) => f.type.startsWith('image/'));
+        processFiles(imageFiles);
+      }
+    },
+    [processFiles]
+  );
+
+  /**
+   * 打开图片预览
+   */
+  const openPreview = useCallback((index: number) => {
+    setPreviewIndex(index);
+    setPreviewVisible(true);
+  }, []);
+
+  /**
+   * 关闭图片预览
+   */
+  const closePreview = useCallback(() => {
+    setPreviewVisible(false);
+  }, []);
+
+  /**
+   * 移除指定索引的图片
+   */
+  const removeImage = useCallback((index: number) => {
+    setImages((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+
+  /**
+   * 清空所有图片
+   */
+  const clearImages = useCallback(() => {
+    setImages([]);
+  }, []);
+
+  /**
+   * 添加图片文件
+   */
+  const addImages = useCallback(
+    (files: File[]) => {
+      processFiles(files);
+    },
+    [processFiles]
+  );
+
+  return {
+    // 状态
+    images,
+    isDragOver,
+    previewVisible,
+    previewIndex,
+    setPreviewIndex,
+
+    // 计算属性
+    imageUrls,
+    imageData,
+    hasImages,
+
+    // 事件处理
+    handleImageSelect,
+    handlePaste,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+
+    // 预览控制
+    openPreview,
+    closePreview,
+
+    // 图片操作
+    removeImage,
+    clearImages,
+    addImages,
+  };
+}

package/src/index.ts

@@ -3,26 +3,29 @@
  *
  * AI Chat 前端组件库 - React 版本
  *
- * 使用 adapter 模式，与后端通信方式解耦
- * 与 Vue 版本 (@huyooo/ai-chat-frontend-vue) 保持一致的 API
+ * 新架构：使用 ContentPart 数组渲染消息内容
+ * - 支持流式渲染
+ * - 支持自定义工具结果 UI
+ * - 支持思考、搜索、工具调用等多种内容类型
  */
 
-// 从 bridge-electron 重新导出核心类型，确保类型一致性
-// 注意：createElectronAdapter 需要从 @huyooo/ai-chat-bridge-electron/renderer 单独导入
+// ==================== 核心类型 ====================
+
+// 从 bridge-electron 重新导出通信相关类型
 export type {
   ChatAdapter,
-  ChatProgress,
-  ChatProgressType,
+  ChatEvent,
+  ChatEventType,
   ChatOptions,
   ChatMode,
-  ModelConfig,
-  ModelProvider,
   ThinkingMode,
   SessionRecord,
   MessageRecord,
+  ModelOption,
+  ProviderType,
 } from '@huyooo/ai-chat-bridge-electron/renderer'
 
-// 导出本地定义的辅助类型
+// 导出 adapter 辅助类型
 export type {
   ThinkingData,
   ToolCallData,
@@ -33,40 +36,91 @@ export type {
   UpdateSessionOptions,
   SaveMessageOptions,
 } from './adapter'
-export { createNullAdapter } from './adapter'
 
-// 导出 hooks
+// 导出消息和内容类型
+export type {
+  // 消息类型
+  ChatMessage,
+  // ContentPart 类型
+  ContentPart,
+  ContentPartType,
+  TextPart,
+  ThinkingPart,
+  SearchPart,
+  ToolCallPart,
+  ToolResultPart,
+  ImagePart,
+  ErrorPart,
+  // 搜索结果
+  SearchResult,
+  // 错误详情
+  ErrorDetails,
+  // 输入配置
+  ChatInputOptions,
+} from './types'
+
+// 导出工具函数
+export { getMessageText } from './types'
+
+// ==================== Hooks ====================
+
 export { useChat } from './hooks/useChat'
-export type { UseChatOptions } from './hooks/useChat'
+export type { UseChatOptions, ToolCompleteEvent, SideEffect } from './hooks/useChat'
+
+// ==================== Context ====================
+
+export { ChatInputProvider, useChatInputContext } from './context/ChatInputContext'
+export type { ChatInputContextValue } from './context/ChatInputContext'
+
+// 渲染器上下文
+export { RenderersProvider, BlockRenderersContext, ToolRenderersContext } from './context/RenderersContext'
+export type { BlockRenderers, ToolRenderers } from './context/RenderersContext'
+
+// ==================== 主组件 ====================
 
-// 导出主组件
 export { ChatPanel } from './components/ChatPanel'
+export type { ChatPanelHandle } from './components/ChatPanel'
 
-// 导出输入组件
-export { ChatInput } from './components/ChatInput'
+// ==================== 消息组件 ====================
 
-// 导出 Header 组件
-export { ChatHeader } from './components/chat/ui/ChatHeader'
+export { MessageBubble } from './components/message/MessageBubble'
 
-// 导出欢迎消息组件
-export { WelcomeMessage } from './components/chat/ui/WelcomeMessage'
+// 内容渲染组件（保留，兼容旧代码）
+export { ContentRenderer } from './components/message/ContentRenderer'
+export { TextBlock, CodeBlock } from './components/message/blocks'
+export { ToolResultRenderer } from './components/message/ToolResultRenderer'
+export { DefaultToolResult, WeatherCard, SearchResults } from './components/message/tool-results'
 
-// 导出消息组件
-export { MessageBubble } from './components/chat/messages/MessageBubble'
-export { ExecutionSteps } from './components/chat/messages/ExecutionSteps'
+// ==================== 其他组件 ====================
 
-// 导出前端特有类型（不与 bridge-electron 重复）
+// 输入组件
+export { ChatInput } from './components/input/ChatInput'
+
+// Header 组件
+export { ChatHeader } from './components/header/ChatHeader'
+
+// 欢迎消息组件
+export { WelcomeMessage } from './components/message/WelcomeMessage'
+export type { WelcomeConfig, WelcomeFeature, WelcomeTask } from './components/message/welcome-types'
+export { defaultWelcomeConfig } from './components/message/welcome-types'
+
+// 通用组件
+export { ConfirmDialog } from './components/common/ConfirmDialog'
+export { Toast } from './components/common/Toast'
+
+// ==================== 工具渲染器相关 ====================
+
+// 从 ai-chat-shared 重新导出（用于自定义工具渲染器）
 export type {
-  ChatMessage,
-  SearchResult,
-  ToolCall,
-  // 向后兼容
-  ChatSession,
-  MediaOperation,
-  AiModel,
-  DiffStat,
-} from './types'
-export { DEFAULT_MODELS, FileType } from './types'
+  ContentBlockType,
+  ContentBlock,
+  TextBlock as TextBlockType,
+  CodeBlock as CodeBlockType,
+  ToolRendererProps,
+  WeatherData,
+  SearchResultItem,
+} from '@huyooo/ai-chat-shared'
+export { parseContent, highlightCode, getLanguageDisplayName, renderMarkdown } from '@huyooo/ai-chat-shared'
 
 /**
  * 使用说明：
@@ -74,15 +128,18 @@ export { DEFAULT_MODELS, FileType } from './types'
  * 1. 导入样式：
  *    import '@huyooo/ai-chat-frontend-react/style.css'
  *
- * 2. 创建 adapter 和使用组件：
+ * 2. 基本使用：
  *    import { ChatPanel } from '@huyooo/ai-chat-frontend-react'
  *    import { createElectronAdapter } from '@huyooo/ai-chat-bridge-electron/renderer'
  *    const adapter = createElectronAdapter()
- *    <ChatPanel adapter={adapter} />
+ *    <ChatPanel adapter={adapter} cwd="/path/to/dir" />
+ *
+ * 3. 自定义工具渲染器：
+ *    import CustomWeatherCard from './CustomWeatherCard'
+ *    const toolRenderers = { get_weather: CustomWeatherCard }
+ *    <ChatPanel adapter={adapter} toolRenderers={toolRenderers} />
  *
- * 3. 或使用 useChat hook 自定义 UI：
+ * 4. 使用 useChat hook 自定义 UI：
  *    import { useChat } from '@huyooo/ai-chat-frontend-react'
- *    import { createElectronAdapter } from '@huyooo/ai-chat-bridge-electron/renderer'
- *    const adapter = createElectronAdapter()
- *    const chat = useChat({ adapter })
+ *    const { messages, sendMessage, ... } = useChat({ adapter })
  */