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

package/dist/types/index.d.ts

@@ -491,6 +491,7 @@ export declare interface HistoryMessage {
         name: string;
         url: string;
     }[];
+    audio?: string;
 }
 
 /**
@@ -623,6 +624,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.7",
   "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/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;

package/src/components/MessageBubble.tsx

@@ -8,6 +8,7 @@ import React, { useEffect, useState, useCallback } from 'react';
 import styled from 'styled-components';
 import { Modal, Image, Space } from 'antd';
 import { MessageAttachments } from './MessageAttachments';
+import { AudioPlayer } from './AudioPlayer';
 import { loadEchartsScript } from '@/utils/loadEcharts';
 import { DocReferences, DocReferenceItem } from './DocReferences';
 import { WebSearchPanel } from './WebSearchPanel';
@@ -52,6 +53,8 @@ export interface MessageBubbleProps {
   images?: string[];
   /** 文件列表（用户消息中上传的文件） */
   files?: { name: string; url: string }[];
+  /** 语音消息URL */
+  audio?: string;
   /** 自定义类名 */
   className?: string;
   /** 自定义样式 */
@@ -267,6 +270,7 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
   references = [],
   images,
   files,
+  audio,
   className,
   style,
   onReferenceClick,
@@ -340,6 +344,9 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
   const handleReferenceClick = onReferenceClick || defaultReferenceClick;
   const handleWebSearchClick = onWebSearchClick || defaultWebSearchClick;
 
+  // 纯语音消息：跳过 StyledBubble 包裹，直接渲染 AudioPlayer
+  const isAudioOnly = !!(audio && !content);
+
   return (
     <>
       <StyledContainer 
@@ -347,50 +354,55 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
         className={`appflow-sdk-message-bubble ${className || ''}`} 
         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}
+        {isAudioOnly ? (
+          /* 纯语音消息：直接渲染播放器，无气泡包裹 */
+          <AudioPlayer src={audio} role={role} />
+        ) : (
+          <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}
                 />
-              </ReferencesContainer>
-            )}
-          </BubbleContent>
-
-          {/* 附件展示区域：图片和文件 */}
-          <MessageAttachments 
-            role={role} 
-            images={images} 
-            files={files} 
-          />
-
-          {contextHolder}
-        </StyledBubble>
+              )}
+              
+              {/* 参考资料 */}
+              {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}
+            />
+
+            {contextHolder}
+          </StyledBubble>
+        )}
       </StyledContainer>
 
       {/* 默认的网页搜索抽屉（仅在用户未传入onWebSearchClick时使用） */}

package/src/services/ChatService.ts

@@ -81,6 +81,7 @@ export interface HistoryMessage {
   sessionId?: string;
   images?: string[];
   files?: { name: string; url: string }[];
+  audio?: string;
 }
 
 export interface ChatSession {
@@ -729,15 +730,19 @@ class ChatService {
                 content = item.message;
               }
 
+              // 语音消息：messageType === 'audio' 时，message 是音频文件 URL
+              const isAudioMessage = messageType === 'audio';
+
               messages.push({
                 id: item.id || `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
                 role: 'user',
-                content,
+                content: isAudioMessage ? '' : content,
                 messageType,
                 gmtCreate: item.gmtCreate,
                 sessionId: item.sessionId,
                 images,
                 files,
+                audio: isAudioMessage ? content : undefined,
               });
             }
 
@@ -757,7 +762,8 @@ class ChatService {
           }
         }
 
-        return messages;
+        // 接口返回的数据是倒序的（最新的在前），需要反转为正序（最早的在前）
+        return messages.reverse();
       }
 
       return [];