@alicloud/appflow-chat 0.0.4-alpha.5 → 0.0.4-alpha.6

package/dist/types/index.d.ts

@@ -623,6 +623,8 @@ export declare interface MessageBubbleProps {
         name: string;
         url: string;
     }[];
+    /** 语音消息URL */
+    audio?: string;
     /** 自定义类名 */
     className?: string;
     /** 自定义样式 */

package/package.json

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

package/src/App.tsx

@@ -16,7 +16,12 @@ const mockModels: ModelInfo[] = [
 const mockUpload = async (file: File): Promise<string> => {
   return new Promise((resolve) => {
     setTimeout(() => {
-      resolve(`https://example.com/files/${file.name}`);
+      // 音频文件返回 blob URL，以便本地测试播放
+      if (file.type.startsWith('audio/')) {
+        resolve(URL.createObjectURL(file));
+      } else {
+        resolve(`https://example.com/files/${file.name}`);
+      }
     }, 1500);
   });
 };
@@ -47,6 +52,7 @@ function App() {
     status: 'Running' | 'Success' | 'Error';
     images?: string[];
     files?: { name: string; url: string }[];
+    audio?: string;
   }
 
   const [messages, setMessages] = useState<Message[]>([]);
@@ -54,14 +60,15 @@ 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.text,
+      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 占位消息
@@ -144,6 +151,7 @@ function App() {
                 status={msg.status}
                 images={msg.images}
                 files={msg.files}
+                audio={msg.audio}
               />
             ))}
           </div>

package/src/components/MessageAttachments.tsx

@@ -1,10 +1,10 @@
 /**
  * MessageAttachments - 消息附件展示组件
- * 用于在消息气泡中展示上传的图片和文件
+ * 用于在消息气泡中展示上传的图片、文件和语音消息
  */
 
-import React from 'react';
-import styled from 'styled-components';
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import styled, { keyframes, css } from 'styled-components';
 import { Image } from 'antd';
 import {
   FileWordOutlined,
@@ -12,6 +12,8 @@ import {
   FileExcelOutlined,
   FileTextOutlined,
   FileOutlined,
+  PlayCircleOutlined,
+  PauseCircleOutlined,
 } from '@ant-design/icons';
 
 // ==================== 类型定义 ====================
@@ -23,6 +25,8 @@ export interface MessageAttachmentsProps {
   images?: string[];
   /** 文件列表 */
   files?: { name: string; url: string }[];
+  /** 语音消息URL */
+  audio?: string;
 }
 
 // ==================== 样式组件 ====================
@@ -123,6 +127,217 @@ const FileCard = styled.a<{ $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' ? '#eef0ff' : '#e8f4fd'};
+  border-radius: 8px;
+  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)));
+});
+
+const AudioPlayer: React.FC<{ src: string; role: 'user' | 'bot' }> = ({ src, role }) => {
+  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>
+  );
+};
+
 // ==================== 工具函数 ====================
 
 /** 根据文件名获取文件扩展名 */
@@ -172,14 +387,19 @@ export const MessageAttachments: React.FC<MessageAttachmentsProps> = ({
   role = 'user',
   images,
   files,
+  audio,
 }) => {
   const hasImages = images && images.length > 0;
   const hasFiles = files && files.length > 0;
+  const hasAudio = !!audio;
 
-  if (!hasImages && !hasFiles) return null;
+  if (!hasImages && !hasFiles && !hasAudio) return null;
 
   return (
     <AttachmentsArea>
+      {/* 语音播放器 */}
+      {hasAudio && <AudioPlayer src={audio} role={role} />}
+
       {/* 图片列表 */}
       {hasImages && (
         <ImagesRow>

package/src/components/MessageBubble.tsx

@@ -52,6 +52,8 @@ export interface MessageBubbleProps {
   images?: string[];
   /** 文件列表（用户消息中上传的文件） */
   files?: { name: string; url: string }[];
+  /** 语音消息URL */
+  audio?: string;
   /** 自定义类名 */
   className?: string;
   /** 自定义样式 */
@@ -267,6 +269,7 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
   references = [],
   images,
   files,
+  audio,
   className,
   style,
   onReferenceClick,
@@ -348,45 +351,48 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
         style={style}
       >
         <StyledBubble $role={role}>
-          {/* 使用核心组件渲染内容 */}
-          <BubbleContent 
-            content={content} 
-            status={status} 
-            role={role}
-          >
-            {/* HumanVerify事件 - 人工审核表单 */}
-            {eventType === 'humanVerify' && humanVerifyData && (
-              <HumanVerify 
-                data={humanVerifyData}
-                onSubmit={onHumanVerifySubmit}
-              />
-            )}
-            
-            {/* HistoryCard 事件 - 历史对话中的审核卡片 */}
-            {eventType === 'historyCard' && historyCardData && (
-              <HistoryCard 
-                data={historyCardData}
-              />
-            )}
-            
-            {/* 参考资料 */}
-            {references && references.length > 0 && status === 'Success' && (
-              <ReferencesContainer>
-                <DocReferences
-                  items={references}
-                  status={status}
-                  onItemClick={handleReferenceClick}
-                  onWebSearchClick={handleWebSearchClick}
+          {/* 使用核心组件渲染内容（语音消息且无文本时跳过，避免显示加载动画） */}
+          {!(audio && !content) && (
+            <BubbleContent 
+              content={content} 
+              status={status} 
+              role={role}
+            >
+              {/* HumanVerify事件 - 人工审核表单 */}
+              {eventType === 'humanVerify' && humanVerifyData && (
+                <HumanVerify 
+                  data={humanVerifyData}
+                  onSubmit={onHumanVerifySubmit}
                 />
-              </ReferencesContainer>
-            )}
-          </BubbleContent>
+              )}
+              
+              {/* HistoryCard 事件 - 历史对话中的审核卡片 */}
+              {eventType === 'historyCard' && historyCardData && (
+                <HistoryCard 
+                  data={historyCardData}
+                />
+              )}
+              
+              {/* 参考资料 */}
+              {references && references.length > 0 && status === 'Success' && (
+                <ReferencesContainer>
+                  <DocReferences
+                    items={references}
+                    status={status}
+                    onItemClick={handleReferenceClick}
+                    onWebSearchClick={handleWebSearchClick}
+                  />
+                </ReferencesContainer>
+              )}
+            </BubbleContent>
+          )}
 
-          {/* 附件展示区域：图片和文件 */}
+          {/* 附件展示区域：语音、图片和文件 */}
           <MessageAttachments 
             role={role} 
             images={images} 
-            files={files} 
+            files={files}
+            audio={audio}
           />
 
           {contextHolder}

package/src/services/ChatService.ts

@@ -757,7 +757,8 @@ class ChatService {
           }
         }
 
-        return messages;
+        // 接口返回的数据是倒序的（最新的在前），需要反转为正序（最早的在前）
+        return messages.reverse();
       }
 
       return [];