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

package/dist/types/index.d.ts

@@ -491,6 +491,7 @@ export declare interface HistoryMessage {
         name: string;
         url: string;
     }[];
+    audio?: string;
 }
 
 /**

package/package.json

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

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/MessageAttachments.tsx

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

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';
@@ -343,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 
@@ -350,9 +354,12 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
         className={`appflow-sdk-message-bubble ${className || ''}`} 
         style={style}
       >
-        <StyledBubble $role={role}>
-          {/* 使用核心组件渲染内容（语音消息且无文本时跳过，避免显示加载动画） */}
-          {!(audio && !content) && (
+        {isAudioOnly ? (
+          /* 纯语音消息：直接渲染播放器，无气泡包裹 */
+          <AudioPlayer src={audio} role={role} />
+        ) : (
+          <StyledBubble $role={role}>
+            {/* 使用核心组件渲染内容 */}
             <BubbleContent 
               content={content} 
               status={status} 
@@ -385,18 +392,17 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
                 </ReferencesContainer>
               )}
             </BubbleContent>
-          )}
 
-          {/* 附件展示区域：语音、图片和文件 */}
-          <MessageAttachments 
-            role={role} 
-            images={images} 
-            files={files}
-            audio={audio}
-          />
+            {/* 附件展示区域：图片和文件 */}
+            <MessageAttachments 
+              role={role} 
+              images={images} 
+              files={files}
+            />
 
-          {contextHolder}
-        </StyledBubble>
+            {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 {
@@ -695,6 +696,23 @@ class ChatService {
         // 处理消息列表
         if (Array.isArray(data)) {
           for (const item of data) {
+            // 注意：接口返回数据是倒序的（最新在前），最终会 reverse()
+            // 因此这里先推入 AI 回复，再推入用户消息，reverse() 后顺序变为 user → assistant
+
+            // AI回复 - 在 assistant 数组中
+            if (item.assistant && Array.isArray(item.assistant) && item.assistant.length > 0) {
+              // 取第一个assistant回复
+              const assistantMsg = item.assistant[0];
+              messages.push({
+                id: assistantMsg.messageId || `assistant_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+                role: 'assistant',
+                content: assistantMsg.content || '',
+                messageType: assistantMsg.messageType || 'text',
+                gmtCreate: item.gmtCreate,
+                sessionId: assistantMsg.sessionId || item.sessionId,
+              });
+            }
+
             // 用户消息 - 在 message 字段中
             if (item.message !== undefined && item.message !== null) {
               const messageType = item.messageType || 'text';
@@ -729,29 +747,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,
-              });
-            }
-
-            // AI回复 - 在 assistant 数组中
-            if (item.assistant && Array.isArray(item.assistant) && item.assistant.length > 0) {
-              // 取第一个assistant回复
-              const assistantMsg = item.assistant[0];
-              messages.push({
-                id: assistantMsg.messageId || `assistant_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
-                role: 'assistant',
-                content: assistantMsg.content || '',
-                messageType: assistantMsg.messageType || 'text',
-                gmtCreate: item.gmtCreate,
-                sessionId: assistantMsg.sessionId || item.sessionId,
+                audio: isAudioMessage ? content : undefined,
               });
             }
           }