@alicloud/appflow-chat 0.0.4-alpha.2 → 0.0.4-alpha.4

package/dist/types/index.d.ts

@@ -124,7 +124,7 @@ export declare interface ChatSenderProps {
     placeholder?: string;
     /** 提交方式：'enter' 回车发送 | 'shiftEnter' Shift+回车发送 */
     submitType?: 'enter' | 'shiftEnter';
-    /** 可用模型列表 */
+    /** 可用模型列表，传入且长度>1时显示模型选择下拉框 */
     models?: ModelInfo[];
     /** 当前选中的模型ID */
     modelId?: string;
@@ -134,15 +134,13 @@ export declare interface ChatSenderProps {
     onModelChange?: (modelId: string) => void;
     /**
      * 模型能力配置，控制功能按钮的显隐
-     * 如果不传，所有功能按钮都显示
+     * 不传时默认所有功能关闭
      */
     capabilities?: ModelCapabilities;
     /** 提交消息回调 */
     onSubmit?: (data: ChatSenderSubmitData) => void;
     /** 取消当前请求 */
     onCancel?: () => void;
-    /** 清除会话回调 */
-    onClear?: () => void;
     /** 文件上传方法，返回下载URL */
     onUpload?: (file: File) => Promise<string>;
     /** 自定义类名 */
@@ -157,8 +155,13 @@ export declare interface ChatSenderSubmitData {
     text: string;
     /** 图片URL列表 */
     images: string[];
-    /** 文件URL列表 */
-    files: string[];
+    /** 文件列表（包含文件名和URL） */
+    files: {
+        name: string;
+        url: string;
+    }[];
+    /** 语音文件URL（录音上传后的下载地址） */
+    audio?: string;
     /** 选中的模型ID */
     modelId?: string;
     /** 是否启用联网搜索 */
@@ -613,6 +616,13 @@ export declare interface MessageBubbleProps {
     status?: 'Running' | 'Success' | 'Error';
     /** 参考资料列表 */
     references?: DocReferenceItem[];
+    /** 图片URL列表（用户消息中上传的图片） */
+    images?: string[];
+    /** 文件列表（用户消息中上传的文件） */
+    files?: {
+        name: string;
+        url: string;
+    }[];
     /** 自定义类名 */
     className?: string;
     /** 自定义样式 */
@@ -649,6 +659,7 @@ export declare interface ModelInfo {
     config?: {
         image?: boolean;
         file?: boolean;
+        audio?: boolean;
         webSearch?: boolean;
         fileConfig?: string;
     };

package/package.json

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

package/src/App.tsx

@@ -0,0 +1,182 @@
+import { useState } from 'react';
+import { ConfigProvider } from 'antd';
+import { ChatSender } from './components/ChatSender';
+import { MessageBubble } from './components/MessageBubble';
+import type { ChatSenderSubmitData } from './components/ChatSender';
+import type { ModelInfo, ModelCapabilities } from './services/ChatService';
+
+// 模拟模型列表
+const mockModels: ModelInfo[] = [
+  { id: 'model-1', name: '通义千问-VL', config: { image: true, file: true, webSearch: true , audio: true } },
+  { id: 'model-2', name: '通义千问-Max', config: { image: false, file: false, webSearch: true } },
+  { id: 'model-3', name: 'DeepSeek-R1', config: { image: false, file: false, webSearch: false } },
+];
+
+// 模拟上传
+const mockUpload = async (file: File): Promise<string> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(`https://example.com/files/${file.name}`);
+    }, 1500);
+  });
+};
+
+function App() {
+  const [loading, setLoading] = useState(false);
+  const [selectedModelId, setSelectedModelId] = useState(mockModels[0].id);
+  const [logs, setLogs] = useState<string[]>([]);
+
+  // 根据选中模型计算能力
+  const currentModel = mockModels.find(m => m.id === selectedModelId) || mockModels[0];
+  const capabilities: ModelCapabilities = {
+    image: currentModel.config?.image ?? false,
+    file: currentModel.config?.file ?? false,
+    audio: currentModel.config?.audio ?? false,
+    webSearch: currentModel.config?.webSearch ?? false,
+  };
+
+  const addLog = (message: string) => {
+    setLogs(prev => [`[${new Date().toLocaleTimeString()}] ${message}`, ...prev].slice(0, 50));
+  };
+
+  // 消息列表
+  interface Message {
+    id: string;
+    role: 'user' | 'bot';
+    content: string;
+    status: 'Running' | 'Success' | 'Error';
+    images?: string[];
+    files?: { name: string; url: string }[];
+  }
+
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  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.text,
+      status: 'Success',
+      images: data.images.length > 0 ? data.images : undefined,
+      files: data.files.length > 0 ? data.files : undefined,
+    };
+
+    // 构建 bot 占位消息
+    const botMsg: Message = {
+      id: `msg-${Date.now() + 1}`,
+      role: 'bot',
+      content: '',
+      status: 'Running',
+    };
+
+    setMessages(prev => [...prev, userMsg, botMsg]);
+    setLoading(true);
+
+    // 模拟 AI 回复
+    setTimeout(() => {
+      setMessages(prev => prev.map(m =>
+        m.id === botMsg.id
+          ? { ...m, content: '收到你的消息！这是一条模拟的 AI 回复。', status: 'Success' as const }
+          : m
+      ));
+      setLoading(false);
+      addLog('AI 回复完成');
+    }, 2000);
+  };
+
+  const handleCancel = () => {
+    setLoading(false);
+    addLog('取消请求');
+  };
+
+  // 切换能力的控制面板
+  const [showUpload, setShowUpload] = useState(true);
+  const [showAudio, setShowAudio] = useState(false);
+
+  const adjustedCapabilities: ModelCapabilities = {
+    ...capabilities,
+    image: showUpload && capabilities.image,
+    file: showUpload && capabilities.file,
+    audio: showAudio,
+  };
+
+  return (
+    <ConfigProvider>
+      <div style={{ maxWidth: 800, margin: '40px auto', padding: '0 20px', fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif' }}>
+        <h2 style={{ marginBottom: 24, color: '#333' }}>ChatSender 组件预览</h2>
+
+        {/* 控制面板 */}
+        <div style={{ marginBottom: 24, padding: 16, background: '#f5f5f5', borderRadius: 8 }}>
+          <h4 style={{ margin: '0 0 12px 0', color: '#666' }}>功能开关（模拟 capabilities 控制）</h4>
+          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+            <label style={{ display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer' }}>
+              <input type="checkbox" checked={showUpload} onChange={e => setShowUpload(e.target.checked)} />
+              文件/图片上传
+            </label>
+            <label style={{ display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer' }}>
+              <input type="checkbox" checked={showAudio} onChange={e => setShowAudio(e.target.checked)} />
+              语音输入
+            </label>
+            <span style={{ color: '#999', fontSize: 13 }}>
+              当前模型: <strong>{currentModel.name}</strong>
+              {capabilities.image && ' | 支持图片'}
+              {capabilities.file && ' | 支持文件'}
+            </span>
+          </div>
+        </div>
+
+        {/* 消息列表 */}
+        <div style={{ marginBottom: 24, padding: 16, background: '#fff', borderRadius: 8, minHeight: 200, maxHeight: 500, overflow: 'auto', border: '1px solid #f0f0f0' }}>
+          {messages.length === 0 && (
+            <div style={{ color: '#999', textAlign: 'center', padding: 40 }}>
+              发送消息后，消息气泡将在此展示（支持图片和文件）
+            </div>
+          )}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+            {messages.map(msg => (
+              <MessageBubble
+                key={msg.id}
+                content={msg.content}
+                role={msg.role}
+                status={msg.status}
+                images={msg.images}
+                files={msg.files}
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* ChatSender 组件 */}
+        <div style={{ marginBottom: 24 }}>
+          <ChatSender
+            loading={loading}
+            models={mockModels}
+            modelId={selectedModelId}
+            onModelChange={setSelectedModelId}
+            capabilities={adjustedCapabilities}
+            placeholder="输入消息，按 Enter 发送..."
+            onSubmit={handleSubmit}
+            onCancel={handleCancel}
+            onUpload={mockUpload}
+          />
+        </div>
+
+        {/* 日志区域 */}
+        <div style={{ padding: 16, background: '#1e1e1e', borderRadius: 8, maxHeight: 300, overflow: 'auto' }}>
+          <h4 style={{ margin: '0 0 8px 0', color: '#888', fontSize: 13 }}>事件日志</h4>
+          {logs.length === 0 && <div style={{ color: '#666', fontSize: 13 }}>暂无日志，尝试发送消息或上传文件...</div>}
+          {logs.map((log, index) => (
+            <div key={index} style={{ color: '#4ec9b0', fontSize: 13, lineHeight: 1.6, fontFamily: 'monospace' }}>
+              {log}
+            </div>
+          ))}
+        </div>
+      </div>
+    </ConfigProvider>
+  );
+}
+
+export default App;