@alicloud/appflow-chat 0.0.4-alpha.8 → 0.0.4-alpha.9

package/dist/types/index.d.ts

@@ -67,6 +67,8 @@ export declare interface ChatAttachment {
     thumbUrl?: string;
     /** 原始文件对象 */
     originFile?: File;
+    /** 文件ID（仅文件类型有） */
+    fileId?: string;
 }
 
 export declare interface ChatConfig {
@@ -86,7 +88,11 @@ export declare interface ChatConfig {
 export declare interface ChatMessage {
     text?: string;
     images?: string[];
-    files?: string[];
+    files?: Array<{
+        url: string;
+        name: string;
+        fileId?: string;
+    }>;
     audio?: string;
     modelId?: string;
     webSearch?: boolean;
@@ -141,8 +147,11 @@ export declare interface ChatSenderProps {
     onSubmit?: (data: ChatSenderSubmitData) => void;
     /** 取消当前请求 */
     onCancel?: () => void;
-    /** 文件上传方法，返回下载URL */
-    onUpload?: (file: File) => Promise<string>;
+    /** 文件上传方法，返回下载URL和可选的fileId */
+    onUpload?: (file: File) => Promise<{
+        downloadUrl: string;
+        fileId?: string;
+    }>;
     /** 自定义类名 */
     className?: string;
     /** 自定义样式 */
@@ -155,10 +164,11 @@ export declare interface ChatSenderSubmitData {
     text: string;
     /** 图片URL列表 */
     images: string[];
-    /** 文件列表（包含文件名和URL） */
+    /** 文件列表（包含文件名、URL和可选的fileId） */
     files: {
         name: string;
         url: string;
+        fileId?: string;
     }[];
     /** 语音文件URL（录音上传后的下载地址） */
     audio?: string;
@@ -198,10 +208,20 @@ export declare class ChatService {
      * 发送消息的内部实现
      */
     private sendMessage;
+    /**
+     * 发送上传事件（通用方法）
+     * 封装向服务端发送上传相关事件的SSE请求逻辑，支持 uploadToken 和 uploadFile 两种事件类型
+     * @param eventType 事件类型：'uploadToken' 获取预签名URL | 'uploadFile' 获取文件ID
+     * @param fileName 文件名
+     * @param extraData 额外数据（如 uploadFile 时需要传 content: downloadUrl）
+     */
+    private sendUploadEvent;
     /**
      * 上传文件
+     * 非图片文件会额外获取 fileId（用于服务端文件关联）
+     * @returns 上传结果，包含 downloadUrl 和可选的 fileId
      */
-    upload(file: File): Promise<string>;
+    upload(file: File): Promise<UploadResult>;
     /**
      * 清除会话
      */
@@ -871,6 +891,14 @@ declare interface UploadRequestParams {
     content?: string;
 }
 
+/** 上传结果 */
+export declare interface UploadResult {
+    /** 文件下载URL */
+    downloadUrl: string;
+    /** 文件ID（仅文件类型有，图片无） */
+    fileId?: string;
+}
+
 /**
  * 上传发送方法类型
  * 用于发送上传相关的事件请求

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/appflow-chat",
-  "version": "0.0.4-alpha.8",
+  "version": "0.0.4-alpha.9",
   "description": "Appflow-Chat AI聊天机器人组件库，提供聊天服务和UI组件",
   "type": "module",
   "main": "./dist/appflow-chat.cjs.js",

package/src/App.tsx

@@ -13,14 +13,17 @@ const mockModels: ModelInfo[] = [
 ];
 
 // 模拟上传
-const mockUpload = async (file: File): Promise<string> => {
+const mockUpload = async (file: File): Promise<{ downloadUrl: string; fileId?: string }> => {
   return new Promise((resolve) => {
     setTimeout(() => {
       // 音频文件返回 blob URL，以便本地测试播放
       if (file.type.startsWith('audio/')) {
-        resolve(URL.createObjectURL(file));
+        resolve({ downloadUrl: URL.createObjectURL(file) });
+      } else if (file.type.startsWith('image/')) {
+        resolve({ downloadUrl: `https://example.com/files/${file.name}` });
       } else {
-        resolve(`https://example.com/files/${file.name}`);
+        // 非图片文件模拟返回 fileId
+        resolve({ downloadUrl: `https://example.com/files/${file.name}`, fileId: `mock_fid_${Date.now()}` });
       }
     }, 1500);
   });

package/src/components/ChatSender.tsx

@@ -49,6 +49,8 @@ export interface ChatAttachment {
   thumbUrl?: string;
   /** 原始文件对象 */
   originFile?: File;
+  /** 文件ID（仅文件类型有） */
+  fileId?: string;
 }
 
 /** 提交时的消息数据 */
@@ -57,8 +59,8 @@ export interface ChatSenderSubmitData {
   text: string;
   /** 图片URL列表 */
   images: string[];
-  /** 文件列表（包含文件名和URL） */
-  files: { name: string; url: string }[];
+  /** 文件列表（包含文件名、URL和可选的fileId） */
+  files: { name: string; url: string; fileId?: string }[];
   /** 语音文件URL（录音上传后的下载地址） */
   audio?: string;
   /** 选中的模型ID */
@@ -102,8 +104,8 @@ export interface ChatSenderProps {
   onSubmit?: (data: ChatSenderSubmitData) => void;
   /** 取消当前请求 */
   onCancel?: () => void;
-  /** 文件上传方法，返回下载URL */
-  onUpload?: (file: File) => Promise<string>;
+  /** 文件上传方法，返回下载URL和可选的fileId */
+  onUpload?: (file: File) => Promise<{ downloadUrl: string; fileId?: string }>;
 
   // ==================== 样式 ====================
 
@@ -330,9 +332,9 @@ export const ChatSender: React.FC<ChatSenderProps> = ({
     setHeaderOpen(true);
 
     try {
-      const downloadUrl = await onUpload(file);
+      const result = await onUpload(file);
       setAttachments(prev =>
-        prev.map(a => a.uid === uid ? { ...a, status: 'done' as const, url: downloadUrl } : a)
+        prev.map(a => a.uid === uid ? { ...a, status: 'done' as const, url: result.downloadUrl, fileId: result.fileId } : a)
       );
     } catch {
       setAttachments(prev =>
@@ -353,7 +355,7 @@ export const ChatSender: React.FC<ChatSenderProps> = ({
 
     const files = attachments
       .filter(a => a.type === 'file' && a.status === 'done' && a.url)
-      .map(a => ({ name: a.name, url: a.url! }));
+      .map(a => ({ name: a.name, url: a.url!, fileId: a.fileId }));
 
     onSubmit?.({
       text: text.trim(),
@@ -518,14 +520,14 @@ export const ChatSender: React.FC<ChatSenderProps> = ({
 
           try {
             // 上传音频文件
-            const audioUrl = await onUpload(audioFile);
+            const result = await onUpload(audioFile);
 
             // 发送语音消息（audio 优先级最高，服务端会忽略 text/images/files）
             onSubmit?.({
               text: '',
               images: [],
               files: [],
-              audio: audioUrl,
+              audio: result.downloadUrl,
               modelId: currentModelId,
               webSearch: false,
             });

package/src/index.ts

@@ -20,6 +20,7 @@ export type {
   ChatStream,
   HistoryMessage,
   ChatSession,
+  UploadResult,
 } from './services/ChatService';
 
 // ==================== UI 组件导出（简化接口，包含默认交互） ====================

package/src/services/ChatService.ts

@@ -53,10 +53,18 @@ export interface ModelCapabilities {
   };
 }
 
+/** 上传结果 */
+export interface UploadResult {
+  /** 文件下载URL */
+  downloadUrl: string;
+  /** 文件ID（仅文件类型有，图片无） */
+  fileId?: string;
+}
+
 export interface ChatMessage {
   text?: string;
   images?: string[];
-  files?: string[];
+  files?: Array<{ url: string; name: string; fileId?: string }>;
   audio?: string;
   modelId?: string;
   webSearch?: boolean;
@@ -330,8 +338,12 @@ class ChatService {
           richText.push({ type: 'image', mediaUrl: url });
         });
 
-        message.files?.forEach(url => {
-          richText.push({ type: 'file', mediaUrl: url });
+        message.files?.forEach(fileItem => {
+          const entry: any = { type: 'file', mediaUrl: fileItem.url };
+          if (fileItem.fileId) {
+            entry.mediaId = fileItem.fileId;
+          }
+          richText.push(entry);
         });
 
         requestBody.richText = richText;
@@ -453,105 +465,120 @@ class ChatService {
   }
 
   /**
-   * 上传文件
+   * 发送上传事件（通用方法）
+   * 封装向服务端发送上传相关事件的SSE请求逻辑，支持 uploadToken 和 uploadFile 两种事件类型
+   * @param eventType 事件类型：'uploadToken' 获取预签名URL | 'uploadFile' 获取文件ID
+   * @param fileName 文件名
+   * @param extraData 额外数据（如 uploadFile 时需要传 content: downloadUrl）
    */
-  async upload(file: File): Promise<string> {
-    if (!this.isInitialized) {
-      throw new Error('请先调用 setup() 初始化SDK');
-    }
-
+  private async sendUploadEvent(
+    eventType: 'uploadToken' | 'uploadFile',
+    fileName: string,
+    extraData?: Record<string, any>
+  ): Promise<any> {
     const domain = this.setupConfig?.domain || '';
     const integrateId = this.config?.integrateId || '';
+    const { token, ticket } = await this.getRequestToken();
 
-    try {
-      const { token, ticket } = await this.getRequestToken();
+    const eventContent: any = { fileName, ...extraData };
 
-      // 获取上传预签名URL
-      const uploadTokenResponse = await fetch(`${domain}/webhook/chatbot/chat/${integrateId}`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-Request-Token': token,
-          'X-Account-Session-Ticket': ticket,
-        },
-        body: JSON.stringify({
-          messageType: 'event',
-          event: {
-            eventType: 'uploadToken',
-            content: JSON.stringify({ fileName: file.name })
-          }
-        })
-      });
-
-      // 解析SSE响应获取上传URL
-      const reader = uploadTokenResponse.body?.getReader();
-      if (!reader) throw new Error('无法读取响应');
-
-      let uploadInfo: any = null;
-      const decoder = new TextDecoder();
-      let buffer = '';
-
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-
-        buffer += decoder.decode(value, { stream: true });
-        const lines = buffer.split('\n');
-
-        // 保留最后一行（可能不完整）
-        buffer = lines.pop() || '';
+    const response = await fetch(`${domain}/webhook/chatbot/chat/${integrateId}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Request-Token': token,
+        'X-Account-Session-Ticket': ticket,
+      },
+      body: JSON.stringify({
+        messageType: 'event',
+        event: {
+          eventType,
+          content: JSON.stringify(eventContent)
+        }
+      })
+    });
 
-        for (const line of lines) {
-          const trimmedLine = line.trim();
-          if (trimmedLine.startsWith('data:')) {
-            try {
-              const jsonStr = trimmedLine.slice(5).trim();
-              if (jsonStr) {
-                const data = JSON.parse(jsonStr);
-                if (data.content) {
-                  // content 可能是字符串或对象
-                  const contentData = typeof data.content === 'string'
-                    ? JSON.parse(data.content)
-                    : data.content;
-                  if (contentData.uploadUrl) {
-                    uploadInfo = contentData;
-                  }
-                }
+    // 解析SSE响应
+    const reader = response.body?.getReader();
+    if (!reader) throw new Error('无法读取响应');
+
+    let result: any = null;
+    const decoder = new TextDecoder();
+    let buffer = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\n');
+
+      // 保留最后一行（可能不完整）
+      buffer = lines.pop() || '';
+
+      for (const line of lines) {
+        const trimmedLine = line.trim();
+        if (trimmedLine.startsWith('data:')) {
+          try {
+            const jsonStr = trimmedLine.slice(5).trim();
+            if (jsonStr) {
+              const data = JSON.parse(jsonStr);
+              if (data.content) {
+                // content 可能是字符串或对象
+                const contentData = typeof data.content === 'string'
+                  ? JSON.parse(data.content)
+                  : data.content;
+                result = contentData;
               }
-            } catch (e) {
-              // 忽略解析错误，继续处理下一行
-              console.debug('解析SSE行失败:', line, e);
             }
+          } catch (e) {
+            console.debug(`解析SSE行失败(${eventType}):`, line, e);
           }
         }
       }
+    }
 
-      // 处理buffer中剩余的数据
-      if (buffer.trim().startsWith('data:')) {
-        try {
-          const jsonStr = buffer.trim().slice(5).trim();
-          if (jsonStr) {
-            const data = JSON.parse(jsonStr);
-            if (data.content) {
-              const contentData = typeof data.content === 'string'
-                ? JSON.parse(data.content)
-                : data.content;
-              if (contentData.uploadUrl) {
-                uploadInfo = contentData;
-              }
-            }
+    // 处理buffer中剩余的数据
+    if (buffer.trim().startsWith('data:')) {
+      try {
+        const jsonStr = buffer.trim().slice(5).trim();
+        if (jsonStr) {
+          const data = JSON.parse(jsonStr);
+          if (data.content) {
+            const contentData = typeof data.content === 'string'
+              ? JSON.parse(data.content)
+              : data.content;
+            result = contentData;
           }
-        } catch (e) {
-          console.debug('解析SSE剩余数据失败:', buffer, e);
         }
+      } catch (e) {
+        console.debug(`解析SSE剩余数据失败(${eventType}):`, buffer, e);
       }
+    }
+
+    return result;
+  }
+
+  /**
+   * 上传文件
+   * 非图片文件会额外获取 fileId（用于服务端文件关联）
+   * @returns 上传结果，包含 downloadUrl 和可选的 fileId
+   */
+  async upload(file: File): Promise<UploadResult> {
+    if (!this.isInitialized) {
+      throw new Error('请先调用 setup() 初始化SDK');
+    }
+
+    try {
+      // 1. 获取上传预签名URL
+      const uploadInfo = await this.sendUploadEvent('uploadToken', file.name);
 
       if (!uploadInfo?.uploadUrl) {
         console.error('获取上传URL失败，uploadInfo:', uploadInfo);
         throw new Error('获取上传URL失败');
       }
 
-      // 上传文件
+      // 2. 上传文件到OSS
       const blob = new Blob([file], { type: file.type || 'application/octet-stream' });
       await fetchUploadApi(blob, uploadInfo.uploadUrl);
 
@@ -561,7 +588,21 @@ class ChatService {
         throw new Error('获取下载URL失败');
       }
 
-      return uploadInfo.downloadUrl;
+      // 3. 非图片文件，额外获取 fileId
+      let fileId: string | undefined;
+      const isImage = file.type.startsWith('image/');
+      if (!isImage) {
+        try {
+          const fileIdResult = await this.sendUploadEvent('uploadFile', file.name, {
+            content: uploadInfo.downloadUrl,
+          });
+          fileId = fileIdResult?.fileId;
+        } catch (e) {
+          console.warn('获取fileId失败，将继续使用downloadUrl:', e);
+        }
+      }
+
+      return { downloadUrl: uploadInfo.downloadUrl, fileId };
     } catch (error) {
       console.error('上传文件失败:', error);
       throw error;