feat add speech reply

packages/client/src/components/chat/AsChat/bubble.tsx

@@ -1,17 +1,30 @@
-import { memo, ReactNode } from 'react';
+import { memo, ReactNode, useMemo } from 'react';
 import { ContentType, Reply, TextBlock } from '@shared/types';
 import BubbleBlock, {
     CollapsibleBlockDiv,
 } from '@/components/chat/bubbles/BubbleBlock';
+import SpeechBar from '@/components/chat/bubbles/SpeechBar';
 import { CircleAlertIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { ReplySpeechState } from '@/context/RunRoomContext';
 
 interface Props {
+    /** The reply data to display */
     reply: Reply;
+    /** Avatar component to display */
     avatar: ReactNode;
+    /** Whether to render content as markdown */
     markdown: boolean;
+    /** Callback when bubble is clicked */
     onClick: (reply: Reply) => void;
+    /** Whether to display user avatar on the right side */
     userAvatarRight: boolean;
+    /** Speech state for this reply */
+    speechState?: ReplySpeechState;
+    /** Callback to play speech audio */
+    onPlaySpeech?: () => void;
+    /** Callback to pause speech audio */
+    onPauseSpeech?: () => void;
 }
 
 const AsBubble = ({
@@ -20,6 +33,9 @@ const AsBubble = ({
     markdown,
     onClick,
     userAvatarRight = false,
+    speechState,
+    onPlaySpeech,
+    onPauseSpeech,
 }: Props) => {
     const { t } = useTranslation();
 
@@ -45,6 +61,14 @@ const AsBubble = ({
         ));
     };
 
+    const showSpeechBar = useMemo(() => {
+        if (!speechState) return false;
+        return (
+            speechState.isStreaming ||
+            (speechState.fullAudioData?.length ?? 0) > 0
+        );
+    }, [speechState]);
+
     return (
         <div className="flex flex-col w-full max-w-full">
             <div
@@ -86,6 +110,15 @@ const AsBubble = ({
                     </div>
                 </div>
             </div>
+            {/* Speech bar - shown below the message content */}
+            {showSpeechBar && onPlaySpeech && onPauseSpeech && (
+                <SpeechBar
+                    isPlaying={speechState?.isPlaying || false}
+                    isStreaming={speechState?.isStreaming || false}
+                    onPlay={onPlaySpeech}
+                    onPause={onPauseSpeech}
+                />
+            )}
         </div>
     );
 };