@alicloud/appflow-chat 0.0.4-alpha.1 → 0.0.4-alpha.3

package/dist/types/index.d.ts

@@ -1,73 +1,5 @@
-import { A2UIViewerProps } from '@a2ui/react';
-import { ComponentRegistry } from '@a2ui/react';
 import { default as default_2 } from 'react';
-import { OnActionCallback } from '@a2ui/react';
 import { Provider } from 'react';
-import { ServerToClientMessage } from '@a2ui/react';
-
-/** A2UI 协议消息（v0.8 格式，透传给 @a2ui/react 处理） */
-export declare type A2UIMessage = ServerToClientMessage;
-
-/**
- * A2UIStaticViewer - A2UI 静态 JSON 渲染组件
- *
- * 用于直接从静态的组件定义和数据渲染 UI，无需流式消息。
- * 适用于已有完整 A2UI 组件树的场景。
- *
- * @example
- * ```tsx
- * const components = [
- *   { id: 'root', component: { Card: { child: 'text' } } },
- *   { id: 'text', component: { Text: { text: { path: '/message' } } } },
- * ];
- *
- * <A2UIStaticViewer
- *   root="root"
- *   components={components}
- *   data={{ message: 'Hello World!' }}
- *   onAction={(action) => console.log('Action:', action)}
- * />
- * ```
- */
-export declare const A2UIStaticViewer: default_2.FC<A2UIStaticViewerProps>;
-
-/** A2UIViewer 的 Props，用于静态 JSON 渲染场景 */
-export declare type A2UIStaticViewerProps = A2UIViewerProps;
-
-/**
- * A2UISurface - A2UI 声明式 UI 渲染组件（流式消息场景）
- *
- * 接收 Agent 发送的 A2UI 协议消息数组，增量处理并渲染对应的 Surface。
- * 内部封装了 A2UIProvider，可直接作为 BubbleContent 的 children 使用。
- *
- * @example
- * ```tsx
- * // 作为 BubbleContent 的 children 使用
- * <BubbleContent content={content} status={status}>
- *   <A2UISurface
- *     messages={a2uiMessages}
- *     surfaceId="main"
- *     onAction={(msg) => console.log('用户操作:', msg)}
- *   />
- * </BubbleContent>
- * ```
- */
-export declare const A2UISurface: default_2.FC<A2UISurfaceProps>;
-
-export declare interface A2UISurfaceProps {
-    /** A2UI JSON 消息数组（来自 Agent 的响应） */
-    messages: A2UIMessage[];
-    /** 渲染的 Surface ID（默认 'main'） */
-    surfaceId?: string;
-    /** 用户在 A2UI 组件上的交互回调 */
-    onAction?: OnActionCallback;
-    /** 自定义组件注册表（可选，默认使用内置组件） */
-    registry?: ComponentRegistry;
-    /** 自定义类名 */
-    className?: string;
-    /** 自定义样式 */
-    style?: default_2.CSSProperties;
-}
 
 /**
  * AssociationPropertyMetadata 类型定义
@@ -119,6 +51,24 @@ export declare interface BubbleContentProps {
     waitingMessage?: string;
 }
 
+/** 附件信息（上传完成后携带下载URL） */
+export declare interface ChatAttachment {
+    /** 文件唯一标识 */
+    uid: string;
+    /** 文件名 */
+    name: string;
+    /** 上传状态 */
+    status: 'uploading' | 'done' | 'error';
+    /** 文件类型：image 或 file */
+    type: 'image' | 'file';
+    /** 上传后的下载URL */
+    url?: string;
+    /** 本地预览URL（图片） */
+    thumbUrl?: string;
+    /** 原始文件对象 */
+    originFile?: File;
+}
+
 export declare interface ChatConfig {
     welcome: string;
     questions: string[];
@@ -142,6 +92,82 @@ export declare interface ChatMessage {
     webSearch?: boolean;
 }
 
+/**
+ * ChatSender - 聊天输入框组件
+ *
+ * 集成了文本输入、文件/图片上传、语音输入、联网搜索、模型选择等功能。
+ * 根据模型能力自动控制功能按钮的显隐。
+ *
+ * @example
+ * ```tsx
+ * <ChatSender
+ *   loading={isLoading}
+ *   models={config.models}
+ *   capabilities={chatService.getModelCapabilities(modelId)}
+ *   onSubmit={({ text, images, files, modelId, webSearch }) => {
+ *     chatService.chat({ text, images, files, modelId, webSearch });
+ *   }}
+ *   onCancel={() => chatService.cancel()}
+ *   onClear={() => chatService.clear()}
+ *   onUpload={(file) => chatService.upload(file)}
+ * />
+ * ```
+ */
+export declare const ChatSender: default_2.FC<ChatSenderProps>;
+
+export declare interface ChatSenderProps {
+    /** 是否处于加载状态（AI正在回复） */
+    loading?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 输入框占位文本 */
+    placeholder?: string;
+    /** 提交方式：'enter' 回车发送 | 'shiftEnter' Shift+回车发送 */
+    submitType?: 'enter' | 'shiftEnter';
+    /** 可用模型列表，传入且长度>1时显示模型选择下拉框 */
+    models?: ModelInfo[];
+    /** 当前选中的模型ID */
+    modelId?: string;
+    /** 默认选中的模型ID（非受控） */
+    defaultModelId?: string;
+    /** 模型切换回调 */
+    onModelChange?: (modelId: string) => void;
+    /**
+     * 模型能力配置，控制功能按钮的显隐
+     * 不传时默认所有功能关闭
+     */
+    capabilities?: ModelCapabilities;
+    /** 提交消息回调 */
+    onSubmit?: (data: ChatSenderSubmitData) => void;
+    /** 取消当前请求 */
+    onCancel?: () => void;
+    /** 文件上传方法，返回下载URL */
+    onUpload?: (file: File) => Promise<string>;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: default_2.CSSProperties;
+}
+
+/** 提交时的消息数据 */
+export declare interface ChatSenderSubmitData {
+    /** 文本内容 */
+    text: string;
+    /** 图片URL列表 */
+    images: string[];
+    /** 文件列表（包含文件名和URL） */
+    files: {
+        name: string;
+        url: string;
+    }[];
+    /** 语音文件URL（录音上传后的下载地址） */
+    audio?: string;
+    /** 选中的模型ID */
+    modelId?: string;
+    /** 是否启用联网搜索 */
+    webSearch: boolean;
+}
+
 export declare class ChatService {
     private config;
     private setupConfig;
@@ -590,6 +616,13 @@ export declare interface MessageBubbleProps {
     status?: 'Running' | 'Success' | 'Error';
     /** 参考资料列表 */
     references?: DocReferenceItem[];
+    /** 图片URL列表（用户消息中上传的图片） */
+    images?: string[];
+    /** 文件列表（用户消息中上传的文件） */
+    files?: {
+        name: string;
+        url: string;
+    }[];
     /** 自定义类名 */
     className?: string;
     /** 自定义样式 */
@@ -598,18 +631,14 @@ export declare interface MessageBubbleProps {
     onReferenceClick?: (item: DocReferenceItem) => void;
     /** 点击网页搜索结果回调（不传则使用默认实现） */
     onWebSearchClick?: (items: DocReferenceItem[]) => void;
-    /** 事件类型（用于特殊消息如 humanVerify、historyCard、a2ui） */
-    eventType?: 'humanVerify' | 'historyCard' | 'a2ui';
+    /** 事件类型（用于特殊消息如 humanVerify、historyCard） */
+    eventType?: 'humanVerify' | 'historyCard';
     /** HumanVerify 相关数据 */
     humanVerifyData?: HumanVerifyData;
     /** HistoryCard 相关数据（历史对话中的审核卡片） */
     historyCardData?: HistoryCardData;
     /** HumanVerify 提交回调 */
     onHumanVerifySubmit?: (data: HumanVerifySubmitData) => void;
-    /** A2UI 消息数组（Agent 生成的声明式 UI 描述） */
-    a2uiMessages?: A2UIMessage[];
-    /** A2UI 用户交互回调 */
-    onA2UIAction?: (action: any) => void;
 }
 
 export declare interface ModelCapabilities {
@@ -630,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.1",
+  "version": "0.0.4-alpha.3",
   "description": "Appflow-Chat AI聊天机器人组件库，提供聊天服务和UI组件",
   "type": "module",
   "main": "./dist/appflow-chat.cjs.js",
@@ -40,6 +40,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0"
   },
   "devDependencies": {
+    "@ant-design/x": "^1.6.1",
     "@eslint/js": "^9.13.0",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash-es": "^4.17.12",
@@ -58,8 +59,6 @@
     "vite-plugin-dts": "^4.3.0"
   },
   "peerDependencies": {
-    "@a2ui/react": "^0.8.0",
-    "@a2ui/web_core": "^0.8.0",
     "antd": "^5.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

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;