@alicloud/appflow-chat 0.0.4-alpha.10 → 0.0.4-alpha.12

package/dist/types/index.d.ts

@@ -148,7 +148,7 @@ export declare interface ChatSenderProps {
     /** 取消当前请求 */
     onCancel?: () => void;
     /** 文件上传方法，返回下载URL和可选的fileId */
-    onUpload?: (file: File) => Promise<{
+    onUpload?: (file: File, modelId?: string) => Promise<{
         downloadUrl: string;
         fileId?: string;
     }>;
@@ -221,7 +221,7 @@ export declare class ChatService {
      * 非图片文件会额外获取 fileId（用于服务端文件关联）
      * @returns 上传结果，包含 downloadUrl 和可选的 fileId
      */
-    upload(file: File): Promise<UploadResult>;
+    upload(file: File, modelId?: string): Promise<UploadResult>;
     /**
      * 清除会话
      */

package/package.json

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

package/src/App.tsx

@@ -13,7 +13,7 @@ const mockModels: ModelInfo[] = [
 ];
 
 // 模拟上传
-const mockUpload = async (file: File): Promise<{ downloadUrl: string; fileId?: string }> => {
+const mockUpload = async (file: File, _modelId?: string): Promise<{ downloadUrl: string; fileId?: string }> => {
   return new Promise((resolve) => {
     setTimeout(() => {
       // 音频文件返回 blob URL，以便本地测试播放
@@ -55,7 +55,6 @@ function App() {
     status: 'Running' | 'Success' | 'Error';
     images?: string[];
     files?: { name: string; url: string }[];
-    audio?: string;
   }
 
   const [messages, setMessages] = useState<Message[]>([]);
@@ -63,15 +62,14 @@ function App() {
   const handleSubmit = (data: ChatSenderSubmitData) => {
     addLog(`发送消息: text="${data.text}", model=${data.modelId}, images=${data.images.length}, files=${data.files.length}, audio=${data.audio || 'none'}, webSearch=${data.webSearch}`);
 
-    // 构建用户消息（包含图片、文件和语音）
+    // 构建用户消息（包含图片和文件）
     const userMsg: Message = {
       id: `msg-${Date.now()}`,
       role: 'user',
-      content: data.audio ? '' : data.text,
+      content: data.text,
       status: 'Success',
       images: data.images.length > 0 ? data.images : undefined,
       files: data.files.length > 0 ? data.files : undefined,
-      audio: data.audio || undefined,
     };
 
     // 构建 bot 占位消息
@@ -154,7 +152,6 @@ function App() {
                 status={msg.status}
                 images={msg.images}
                 files={msg.files}
-                audio={msg.audio}
               />
             ))}
           </div>

package/src/components/ChatSender.tsx

@@ -5,7 +5,7 @@
 import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import { Sender, Attachments } from '@ant-design/x';
 import type { AttachmentsProps } from '@ant-design/x';
-import { Select, Switch, Button, Tooltip } from 'antd';
+import { Select, Switch, Button, Tooltip, Spin } from 'antd';
 import {
   PaperClipOutlined,
   PictureOutlined,
@@ -105,7 +105,7 @@ export interface ChatSenderProps {
   /** 取消当前请求 */
   onCancel?: () => void;
   /** 文件上传方法，返回下载URL和可选的fileId */
-  onUpload?: (file: File) => Promise<{ downloadUrl: string; fileId?: string }>;
+  onUpload?: (file: File, modelId?: string) => Promise<{ downloadUrl: string; fileId?: string }>;
 
   // ==================== 样式 ====================
 
@@ -332,7 +332,7 @@ export const ChatSender: React.FC<ChatSenderProps> = ({
     setHeaderOpen(true);
 
     try {
-      const result = await onUpload(file);
+      const result = await onUpload(file, currentModelId);
       setAttachments(prev =>
         prev.map(a => a.uid === uid ? { ...a, status: 'done' as const, url: result.downloadUrl, fileId: result.fileId } : a)
       );
@@ -341,7 +341,7 @@ export const ChatSender: React.FC<ChatSenderProps> = ({
         prev.map(a => a.uid === uid ? { ...a, status: 'error' as const } : a)
       );
     }
-  }, [onUpload, hasImageCapability, hasFileCapability]);
+  }, [onUpload, hasImageCapability, hasFileCapability, currentModelId]);
 
   // ==================== 提交处理 ====================
 
@@ -429,34 +429,36 @@ export const ChatSender: React.FC<ChatSenderProps> = ({
           content: { padding: 4 },
         }}
       >
-        <Attachments
-          ref={attachmentsRef as any}
-          items={attachmentItems as AttachmentsProps['items']}
-          accept={acceptTypes}
-          multiple
-          customRequest={({ file }) => {
-            if (file instanceof File) {
-              handleFileUpload(file);
-            }
-          }}
-          onRemove={(file) => {
-            setAttachments(prev => {
-              const updated = prev.filter(a => a.uid !== file.uid);
-              if (updated.length === 0) {
-                setHeaderOpen(false);
+        <Spin spinning={isUploading} tip="文件上传中，请稍候...">
+          <Attachments
+            ref={attachmentsRef as any}
+            items={attachmentItems as AttachmentsProps['items']}
+            accept={acceptTypes}
+            multiple
+            customRequest={({ file }) => {
+              if (file instanceof File) {
+                handleFileUpload(file);
               }
-              return updated;
-            });
-          }}
-          placeholder={{
-            icon: <CloudUploadOutlined />,
-            title: '拖拽文件到此处',
-            description: '支持图片和文件',
-          }}
-        />
+            }}
+            onRemove={(file) => {
+              setAttachments(prev => {
+                const updated = prev.filter(a => a.uid !== file.uid);
+                if (updated.length === 0) {
+                  setHeaderOpen(false);
+                }
+                return updated;
+              });
+            }}
+            placeholder={{
+              icon: <CloudUploadOutlined />,
+              title: '拖拽文件到此处',
+              description: '支持图片和文件',
+            }}
+          />
+        </Spin>
       </Sender.Header>
     );
-  }, [hasUploadCapability, headerOpen, attachmentItems]);
+  }, [hasUploadCapability, headerOpen, attachmentItems, isUploading]);
 
   // ==================== 触发文件选择 ====================
 
@@ -520,7 +522,7 @@ export const ChatSender: React.FC<ChatSenderProps> = ({
 
           try {
             // 上传音频文件
-            const result = await onUpload(audioFile);
+            const result = await onUpload(audioFile, currentModelId);
 
             // 发送语音消息（audio 优先级最高，服务端会忽略 text/images/files）
             onSubmit?.({

package/src/services/ChatService.ts

@@ -474,7 +474,8 @@ class ChatService {
   private async sendUploadEvent(
     eventType: 'uploadToken' | 'uploadFile',
     fileName: string,
-    extraData?: Record<string, any>
+    extraData?: Record<string, any>,
+    modelId?: string
   ): Promise<any> {
     const domain = this.setupConfig?.domain || '';
     const integrateId = this.config?.integrateId || '';
@@ -494,12 +495,13 @@ class ChatService {
       }
     };
 
-    // 携带 sessionId 和 chatbotModelId
+    // 携带 sessionId 和 chatbotModelId（优先使用传入的 modelId，否则使用第一个模型）
     if (this.sessionId) {
       requestBody.sessionId = this.sessionId;
     }
-    if (this.config?.models?.length) {
-      requestBody.chatbotModelId = this.config.models[0]?.id || '';
+    const resolvedModelId = modelId || this.config?.models[0]?.id;
+    if (resolvedModelId) {
+      requestBody.chatbotModelId = resolvedModelId;
     }
 
     const response = await fetch(`${domain}/webhook/chatbot/chat/${integrateId}`, {
@@ -578,14 +580,14 @@ class ChatService {
    * 非图片文件会额外获取 fileId（用于服务端文件关联）
    * @returns 上传结果，包含 downloadUrl 和可选的 fileId
    */
-  async upload(file: File): Promise<UploadResult> {
+  async upload(file: File, modelId?: string): Promise<UploadResult> {
     if (!this.isInitialized) {
       throw new Error('请先调用 setup() 初始化SDK');
     }
 
     try {
       // 1. 获取上传预签名URL
-      const uploadInfo = await this.sendUploadEvent('uploadToken', file.name);
+      const uploadInfo = await this.sendUploadEvent('uploadToken', file.name, undefined, modelId);
 
       if (!uploadInfo?.uploadUrl) {
         console.error('获取上传URL失败，uploadInfo:', uploadInfo);
@@ -609,7 +611,7 @@ class ChatService {
         try {
           const fileIdResult = await this.sendUploadEvent('uploadFile', file.name, {
             fileUrl: uploadInfo.downloadUrl,
-          });
+          }, modelId);
           fileId = fileIdResult?.fileId;
         } catch (e) {
           console.warn('获取fileId失败，将继续使用downloadUrl:', e);