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

package/dist/types/index.d.ts

@@ -51,6 +51,26 @@ 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;
+    /** 文件ID（仅文件类型有） */
+    fileId?: string;
+}
+
 export declare interface ChatConfig {
     welcome: string;
     questions: string[];
@@ -68,12 +88,96 @@ 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;
 }
 
+/**
+ * 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和可选的fileId */
+    onUpload?: (file: File) => Promise<{
+        downloadUrl: string;
+        fileId?: string;
+    }>;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: default_2.CSSProperties;
+}
+
+/** 提交时的消息数据 */
+export declare interface ChatSenderSubmitData {
+    /** 文本内容 */
+    text: string;
+    /** 图片URL列表 */
+    images: string[];
+    /** 文件列表（包含文件名、URL和可选的fileId） */
+    files: {
+        name: string;
+        url: string;
+        fileId?: string;
+    }[];
+    /** 语音文件URL（录音上传后的下载地址） */
+    audio?: string;
+    /** 选中的模型ID */
+    modelId?: string;
+    /** 是否启用联网搜索 */
+    webSearch: boolean;
+}
+
 export declare class ChatService {
     private config;
     private setupConfig;
@@ -104,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>;
     /**
      * 清除会话
      */
@@ -397,6 +511,7 @@ export declare interface HistoryMessage {
         name: string;
         url: string;
     }[];
+    audio?: string;
 }
 
 /**
@@ -522,6 +637,15 @@ export declare interface MessageBubbleProps {
     status?: 'Running' | 'Success' | 'Error';
     /** 参考资料列表 */
     references?: DocReferenceItem[];
+    /** 图片URL列表（用户消息中上传的图片） */
+    images?: string[];
+    /** 文件列表（用户消息中上传的文件） */
+    files?: {
+        name: string;
+        url: string;
+    }[];
+    /** 语音消息URL */
+    audio?: string;
     /** 自定义类名 */
     className?: string;
     /** 自定义样式 */
@@ -558,6 +682,7 @@ export declare interface ModelInfo {
     config?: {
         image?: boolean;
         file?: boolean;
+        audio?: boolean;
         webSearch?: boolean;
         fileConfig?: string;
     };
@@ -766,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.3",
+  "version": "0.0.4-alpha.10",
   "description": "Appflow-Chat AI聊天机器人组件库，提供聊天服务和UI组件",
   "type": "module",
   "main": "./dist/appflow-chat.cjs.js",
@@ -60,7 +60,8 @@
   "peerDependencies": {
     "antd": "^5.0.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "@ant-design/x": "1.6.1"
   },
   "files": [
     "dist",

package/src/App.tsx

@@ -0,0 +1,193 @@
+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<{ downloadUrl: string; fileId?: string }> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      // 音频文件返回 blob URL，以便本地测试播放
+      if (file.type.startsWith('audio/')) {
+        resolve({ downloadUrl: URL.createObjectURL(file) });
+      } else if (file.type.startsWith('image/')) {
+        resolve({ downloadUrl: `https://example.com/files/${file.name}` });
+      } else {
+        // 非图片文件模拟返回 fileId
+        resolve({ downloadUrl: `https://example.com/files/${file.name}`, fileId: `mock_fid_${Date.now()}` });
+      }
+    }, 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 }[];
+    audio?: 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.audio ? '' : 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 占位消息
+    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}
+                audio={msg.audio}
+              />
+            ))}
+          </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;

package/src/components/AudioPlayer.tsx

@@ -0,0 +1,246 @@
+/**
+ * AudioPlayer - 语音消息播放器组件
+ * 用于在消息气泡中展示语音消息，支持播放/暂停、进度条、波形动画、时长显示
+ */
+
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import styled, { keyframes, css } from 'styled-components';
+import {
+  PlayCircleOutlined,
+  PauseCircleOutlined,
+} from '@ant-design/icons';
+
+// ==================== 类型定义 ====================
+
+export interface AudioPlayerProps {
+  /** 音频文件URL */
+  src: string;
+  /** 消息角色，影响配色 */
+  role?: 'user' | 'bot';
+}
+
+// ==================== 样式组件 ====================
+
+const waveAnimation = keyframes`
+  0%, 100% { height: 4px; }
+  50% { height: 16px; }
+`;
+
+const AudioCard = styled.div<{ $role: 'user' | 'bot' }>`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: ${props => props.$role === 'user' ? '#e5effe' : '#e8f4fd'};
+  border-radius: 12px;
+  padding: 10px 14px;
+  max-width: 100%;
+  box-sizing: border-box;
+  min-width: 200px;
+`;
+
+const PlayButton = styled.span<{ $role: 'user' | 'bot' }>`
+  font-size: 28px;
+  cursor: pointer;
+  flex-shrink: 0;
+  color: ${props => props.$role === 'user' ? '#667eea' : '#1677ff'};
+  display: flex;
+  align-items: center;
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+
+const AudioBody = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+`;
+
+const WaveformContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: 20px;
+`;
+
+const WaveBar = styled.div<{ $active: boolean; $playing: boolean; $delay: number }>`
+  width: 3px;
+  border-radius: 2px;
+  background: ${props => props.$active ? '#667eea' : '#c0c8d8'};
+  transition: background 0.15s;
+
+  ${props => props.$playing && props.$active ? css`
+    animation: ${waveAnimation} 0.6s ease-in-out infinite;
+    animation-delay: ${props.$delay}s;
+  ` : css`
+    height: ${props.$active ? '12px' : `${4 + Math.random() * 10}px`};
+  `}
+`;
+
+const ProgressBar = styled.div`
+  position: relative;
+  height: 3px;
+  background: rgba(0, 0, 0, 0.08);
+  border-radius: 2px;
+  cursor: pointer;
+  overflow: visible;
+`;
+
+const ProgressFill = styled.div<{ $progress: number }>`
+  height: 100%;
+  background: #667eea;
+  border-radius: 2px;
+  width: ${props => props.$progress}%;
+  transition: width 0.1s linear;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: -4px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #667eea;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  ${ProgressBar}:hover &::after {
+    opacity: 1;
+  }
+`;
+
+const AudioDuration = styled.span`
+  font-size: 12px;
+  color: #888;
+  flex-shrink: 0;
+  min-width: 32px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+`;
+
+// ==================== 工具函数 ====================
+
+/** 格式化秒数为 m:ss */
+function formatDuration(seconds: number): string {
+  if (!seconds || !isFinite(seconds)) return '0:00';
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+/** 生成固定的波形条高度 */
+const WAVE_BARS = Array.from({ length: 20 }, (_, i) => {
+  // 用正弦函数生成自然的波形高度
+  const base = Math.sin((i / 20) * Math.PI) * 12 + 4;
+  return Math.max(4, Math.min(18, base + (Math.random() * 4 - 2)));
+});
+
+// ==================== 组件实现 ====================
+
+/**
+ * AudioPlayer - 语音消息播放器
+ *
+ * 紧凑的播放器组件，包含播放/暂停按钮 + 波形条 + 进度条 + 时长显示。
+ * 风格类似钉钉/微信的聊天语音消息，可独立使用无需外层气泡包裹。
+ *
+ * @example
+ * ```tsx
+ * <AudioPlayer src="https://example.com/audio.webm" role="user" />
+ * ```
+ */
+export const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, role = 'user' }) => {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const progressRef = useRef<HTMLDivElement>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+
+  const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    const onLoadedMetadata = () => setDuration(audio.duration);
+    const onTimeUpdate = () => setCurrentTime(audio.currentTime);
+    const onEnded = () => {
+      setIsPlaying(false);
+      setCurrentTime(0);
+    };
+
+    audio.addEventListener('loadedmetadata', onLoadedMetadata);
+    audio.addEventListener('timeupdate', onTimeUpdate);
+    audio.addEventListener('ended', onEnded);
+
+    return () => {
+      audio.removeEventListener('loadedmetadata', onLoadedMetadata);
+      audio.removeEventListener('timeupdate', onTimeUpdate);
+      audio.removeEventListener('ended', onEnded);
+    };
+  }, []);
+
+  const togglePlay = useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    if (isPlaying) {
+      audio.pause();
+      setIsPlaying(false);
+    } else {
+      audio.play().then(() => setIsPlaying(true)).catch(() => {});
+    }
+  }, [isPlaying]);
+
+  const handleProgressClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    const audio = audioRef.current;
+    const bar = progressRef.current;
+    if (!audio || !bar || !duration) return;
+
+    const rect = bar.getBoundingClientRect();
+    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    audio.currentTime = ratio * duration;
+    setCurrentTime(audio.currentTime);
+  }, [duration]);
+
+  return (
+    <AudioCard $role={role}>
+      <audio ref={audioRef} src={src} preload="metadata" />
+      <PlayButton $role={role} onClick={togglePlay}>
+        {isPlaying ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
+      </PlayButton>
+      <AudioBody>
+        <WaveformContainer>
+          {WAVE_BARS.map((h, i) => {
+            const barProgress = (i / WAVE_BARS.length) * 100;
+            const isActive = barProgress <= progress;
+            return (
+              <WaveBar
+                key={i}
+                $active={isActive}
+                $playing={isPlaying}
+                $delay={i * 0.05}
+                style={!isPlaying || !isActive ? { height: `${h}px` } : undefined}
+              />
+            );
+          })}
+        </WaveformContainer>
+        <ProgressBar ref={progressRef} onClick={handleProgressClick}>
+          <ProgressFill $progress={progress} />
+        </ProgressBar>
+      </AudioBody>
+      <AudioDuration>
+        {isPlaying || currentTime > 0 ? formatDuration(currentTime) : formatDuration(duration)}
+      </AudioDuration>
+    </AudioCard>
+  );
+};
+
+export default AudioPlayer;