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

package/src/composables/useImageUpload.ts

@@ -0,0 +1,228 @@
+/**
+ * 图片上传 composable
+ * 处理图片选择、粘贴、拖拽、预览等功能
+ */
+
+import { ref, computed } from 'vue';
+
+/** 内部图片数据结构（包含预览用的 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;
+}
+
+/**
+ * 图片上传 composable
+ * @param options 配置项
+ */
+export function useImageUpload(options: UseImageUploadOptions = {}) {
+  const { maxImages = 5, maxSize = 10 * 1024 * 1024 } = options;
+
+  // 图片列表
+  const images = ref<ImageItem[]>([]);
+
+  // 拖拽状态
+  const isDragOver = ref(false);
+
+  // 预览状态
+  const previewVisible = ref(false);
+  const previewIndex = ref(0);
+
+  // 图片 URL 数组（用于预览组件）
+  const imageUrls = computed(() => images.value.map((img) => img.dataUrl));
+
+  // 导出格式的图片数据
+  const imageData = computed<ImageData[]>(() =>
+    images.value.map((img) => ({
+      base64: img.base64,
+      mimeType: img.mimeType,
+    }))
+  );
+
+  // 是否有图片
+  const hasImages = computed(() => images.value.length > 0);
+
+  /**
+   * 读取图片文件为 base64
+   */
+  function readImageFile(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);
+    });
+  }
+
+  /**
+   * 处理文件列表
+   */
+  async function processFiles(files: File[]) {
+    const remaining = maxImages - images.value.length;
+    const toProcess = files.slice(0, remaining);
+
+    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);
+        images.value.push(imageItem);
+      } catch (err) {
+        console.error('读取图片失败:', err);
+      }
+    }
+  }
+
+  /**
+   * 处理文件选择事件
+   */
+  function handleImageSelect(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const files = target.files;
+    if (files) {
+      processFiles(Array.from(files));
+    }
+    // 清空 input 以便再次选择相同文件
+    target.value = '';
+  }
+
+  /**
+   * 处理粘贴事件
+   */
+  function handlePaste(event: ClipboardEvent) {
+    const items = event.clipboardData?.items;
+    if (!items) return;
+
+    const imageFiles: File[] = [];
+    for (const item of items) {
+      if (item.type.startsWith('image/')) {
+        const file = item.getAsFile();
+        if (file) imageFiles.push(file);
+      }
+    }
+
+    if (imageFiles.length > 0) {
+      event.preventDefault();
+      processFiles(imageFiles);
+    }
+  }
+
+  /**
+   * 处理拖拽悬停事件
+   */
+  function handleDragOver(event: DragEvent) {
+    if (event.dataTransfer?.types.includes('Files')) {
+      isDragOver.value = true;
+    }
+  }
+
+  /**
+   * 处理拖拽离开事件
+   */
+  function handleDragLeave() {
+    isDragOver.value = false;
+  }
+
+  /**
+   * 处理拖拽放下事件
+   */
+  function handleDrop(event: DragEvent) {
+    isDragOver.value = false;
+    const files = event.dataTransfer?.files;
+    if (files) {
+      const imageFiles = Array.from(files).filter((f) => f.type.startsWith('image/'));
+      processFiles(imageFiles);
+    }
+  }
+
+  /**
+   * 打开图片预览
+   */
+  function openPreview(index: number) {
+    previewIndex.value = index;
+    previewVisible.value = true;
+  }
+
+  /**
+   * 关闭图片预览
+   */
+  function closePreview() {
+    previewVisible.value = false;
+  }
+
+  /**
+   * 移除指定索引的图片
+   */
+  function removeImage(index: number) {
+    images.value.splice(index, 1);
+  }
+
+  /**
+   * 清空所有图片
+   */
+  function clearImages() {
+    images.value = [];
+  }
+
+  /**
+   * 添加图片文件
+   */
+  function addImages(files: File[]) {
+    processFiles(files);
+  }
+
+  return {
+    // 状态
+    images,
+    isDragOver,
+    previewVisible,
+    previewIndex,
+
+    // 计算属性
+    imageUrls,
+    imageData,
+    hasImages,
+
+    // 事件处理
+    handleImageSelect,
+    handlePaste,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+
+    // 预览控制
+    openPreview,
+    closePreview,
+
+    // 图片操作
+    removeImage,
+    clearImages,
+    addImages,
+  };
+}

package/src/index.ts

@@ -2,26 +2,33 @@
  * @huyooo/ai-chat-frontend-vue
  *
  * AI Chat 前端组件库 - Vue 版本
- *
- * 使用 adapter 模式，与后端通信方式解耦
+ * 
+ * 新架构：使用 ContentPart 数组渲染消息内容
+ * - 支持流式渲染
+ * - 支持自定义工具结果 UI
+ * - 支持思考、搜索、工具调用等多种内容类型
  */
 
-// 从 bridge-electron 重新导出核心类型，确保类型一致性
-// 注意：createElectronAdapter 需要从 @huyooo/ai-chat-bridge-electron/renderer 单独导入
+// CSS 变量默认值
+import './styles.css'
+
+// ==================== 核心类型 ====================
+
+// 从 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,
@@ -31,46 +38,82 @@ export type {
   CreateSessionOptions,
   UpdateSessionOptions,
   SaveMessageOptions,
-} from './adapter';
-export { createNullAdapter } from './adapter';
+} from './adapter'
+
+// 导出消息和内容类型
+export type {
+  // 消息类型
+  ChatMessage,
+  // ContentPart 类型
+  ContentPart,
+  ContentPartType,
+  TextPart,
+  ThinkingPart,
+  SearchPart,
+  ToolCallPart,
+  ToolResultPart,
+  ImagePart,
+  ErrorPart,
+  // 搜索结果
+  SearchResult,
+  // 错误详情
+  ErrorDetails,
+  // 输入配置
+  ChatInputOptions,
+} from './types'
+
+// 导出工具函数
+export { getMessageText } from './types'
+
+// ==================== Composables ====================
+
+export { useChat } from './composables/useChat'
+export type { UseChatOptions, ToolCompleteEvent, SideEffect } from './composables/useChat'
 
-// 导出 composables
-export { useChat } from './composables/useChat';
-export type { UseChatOptions } from './composables/useChat';
+// ==================== 主组件 ====================
 
-// 导出主组件
-export { default as ChatPanel } from './components/ChatPanel.vue';
+export { default as ChatPanel } from './components/ChatPanel.vue'
 
-// 导出输入组件
-export { default as ChatInput } from './components/ChatInput.vue';
+// ==================== 消息组件 ====================
 
-// 导出 Header 组件
-export { default as ChatHeader } from './components/chat/ui/ChatHeader.vue';
+export { default as MessageBubble } from './components/message/MessageBubble.vue'
+export { default as PartsRenderer } from './components/message/PartsRenderer.vue'
 
-// 导出欢迎消息组件
-export { default as WelcomeMessage } from './components/chat/ui/WelcomeMessage.vue';
+// Part 渲染组件
+export {
+  TextPart as TextPartComponent,
+  ThinkingPart as ThinkingPartComponent,
+  SearchPart as SearchPartComponent,
+  ToolCallPart as ToolCallPartComponent,
+  ToolResultPart as ToolResultPartComponent,
+  ErrorPart as ErrorPartComponent,
+} from './components/message/parts'
 
-// 导出消息组件
-export { default as MessageBubble } from './components/chat/messages/MessageBubble.vue';
-export { default as ExecutionSteps } from './components/chat/messages/ExecutionSteps.vue';
+// ==================== 其他组件 ====================
 
-// 导出聊天块组件
-export { default as ThinkingBlock } from './components/chat/ThinkingBlock.vue';
-export { default as ToolCallBlock } from './components/chat/ToolCallBlock.vue';
-export { default as SearchResultBlock } from './components/chat/SearchResultBlock.vue';
+// 输入组件
+export { default as ChatInput } from './components/input/ChatInput.vue'
 
-// 导出前端特有类型（不与 bridge-electron 重复）
+// Header 组件
+export { default as ChatHeader } from './components/header/ChatHeader.vue'
+
+// 欢迎消息组件
+export { default as WelcomeMessage } from './components/message/WelcomeMessage.vue'
+export type { WelcomeConfig, WelcomeFeature, WelcomeTask } from './components/message/welcome-types'
+export { defaultWelcomeConfig } from './components/message/welcome-types'
+
+// 通用组件
+export { default as ConfirmDialog } from './components/common/ConfirmDialog.vue'
+export { default as Toast } from './components/common/Toast.vue'
+
+// ==================== 工具渲染器相关 ====================
+
+// 从 ai-chat-shared 重新导出（用于自定义工具渲染器）
 export type {
-  ChatMessage,
-  SearchResult,
-  ToolCall,
-  // 向后兼容
-  ChatSession,
-  MediaOperation,
-  AiModel,
-  DiffStat,
-} from './types';
-export { DEFAULT_MODELS, FileType } from './types';
+  ToolRendererProps,
+  WeatherData,
+  SearchResultItem,
+} from '@huyooo/ai-chat-shared'
 
 /**
  * 使用说明：
@@ -78,15 +121,19 @@ export { DEFAULT_MODELS, FileType } from './types';
  * 1. 导入样式：
  *    import '@huyooo/ai-chat-frontend-vue/style.css'
  *
- * 2. 创建 adapter 和使用组件：
+ * 2. 基本使用：
  *    import { ChatPanel } from '@huyooo/ai-chat-frontend-vue'
  *    import { createElectronAdapter } from '@huyooo/ai-chat-bridge-electron/renderer'
  *    const adapter = createElectronAdapter()
- *    <ChatPanel :adapter="adapter" />
+ *    <ChatPanel :adapter="adapter" :working-dir="'/path/to/dir'" />
+ *
+ * 3. 自定义工具渲染器：
+ *    import { markRaw } from 'vue'
+ *    import CustomWeatherCard from './CustomWeatherCard.vue'
+ *    const toolRenderers = { get_weather: markRaw(CustomWeatherCard) }
+ *    <ChatPanel :adapter="adapter" :tool-renderers="toolRenderers" />
  *
- * 3. 或使用 useChat composable 自定义 UI：
+ * 4. 使用 useChat 自定义 UI：
  *    import { useChat } from '@huyooo/ai-chat-frontend-vue'
- *    import { createElectronAdapter } from '@huyooo/ai-chat-bridge-electron/renderer'
- *    const adapter = createElectronAdapter()
- *    const chat = useChat({ adapter })
+ *    const { messages, sendMessage, ... } = useChat({ adapter })
  */

package/src/styles.css

@@ -0,0 +1,47 @@
+/**
+ * AI Chat 全局样式
+ * 仅包含 CSS 变量（组件样式使用 Vue scoped CSS）
+ */
+
+/* 导入 Markdown 渲染样式 */
+@import '@huyooo/ai-chat-shared/styles';
+
+/* CSS 变量默认值 */
+:root {
+  --chat-bg: #1e1e1e;
+  --chat-header-bg: #1e1e1e;
+  --chat-input-bg: #2d2d2d;
+  --chat-dropdown-bg: #252526;
+  --chat-muted: #2d2d2d;
+  --chat-muted-hover: #3c3c3c;
+  --chat-border: #333;
+  --chat-text: #ccc;
+  --chat-text-muted: #888;
+  --chat-primary: #2563eb;
+  --chat-primary-hover: #1d4ed8;
+  --chat-destructive: #ef4444;
+  --chat-destructive-hover: #dc2626;
+  --chat-success: #22c55e;
+  --chat-code-bg: #1f2937;
+  --chat-code-text: #e5e7eb;
+  --chat-scrollbar: rgba(255, 255, 255, 0.2);
+  --chat-scrollbar-hover: rgba(255, 255, 255, 0.3);
+}
+
+/* 统一滚动条样式 - 任何需要自定义滚动条的元素添加此类 */
+.chat-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chat-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
+  border-radius: 3px;
+}
+
+.chat-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
+}