audio response

src/app/components/chat/MessageList.tsx

@@ -61,11 +61,15 @@ const MessageList = ({ messages, isLoading = false, error = null, onRetry }: Mes
             }`}
           >
             {message.audioUrl ? (
-              // Audio message display - only the player itself
+              // Audio message display - show both audio player and text
               <div>
                 <AudioPlayer
                   src={message.audioUrl}
                 />
+                {/* Display the text content under the audio player */}
+                <div className="mt-2 whitespace-pre-wrap break-words">
+                  {message.content}
+                </div>
               </div>
             ) : (
               // Regular text message

src/app/hooks/useChat.ts

@@ -57,7 +57,7 @@ Example output:
     // Add user audio message
     const userMessage: Omit<ChatMessage, 'id' | 'timestamp'> = {
       role: 'user',
-      content: 'Audio message sent', // Placeholder text for audio message
+      content: 'sent', // Placeholder text for audio message
       audioUrl: URL.createObjectURL(audioBlob), // Store the audio URL for playback in UI
     };
     addMessage(userMessage);
@@ -106,11 +106,27 @@ Example output:
       // Extract tts_text from response (based on your curl example)
       const ttsText = data?.tts_text || data?.final_argument || data?.result?.result?.[0]?.text || 'No response received';
 
-      // Add assistant response with the TTS text
+      // Extract audio_base64 from response if available
+      const audioBase64 = data?.audio_base64;
+
+      // Add assistant response with both text and audio if available
       const assistantMessage: Omit<ChatMessage, 'id' | 'timestamp'> = {
         role: 'assistant',
         content: ttsText,
       };
+
+      // Add audio URL to message if audio_base64 is present
+      if (audioBase64) {
+        // Convert base64 to audio blob and create object URL
+        const binaryString = atob(audioBase64);
+        const bytes = new Uint8Array(binaryString.length);
+        for (let i = 0; i < binaryString.length; i++) {
+          bytes[i] = binaryString.charCodeAt(i);
+        }
+        const audioBlob = new Blob([bytes], { type: 'audio/wav' });
+        assistantMessage.audioUrl = URL.createObjectURL(audioBlob);
+      }
+
       addMessage(assistantMessage);
 
       setState(prev => ({ ...prev, isLoading: false }));
@@ -192,6 +208,9 @@ Example output:
         // Extract final_argument from response
         const finalArgument = data?.final_argument || data?.result?.result?.[0]?.text || 'No response received';
 
+        // Extract audio_base64 from response if available
+        const audioBase64 = data?.audio_base64;
+
         // Parse if final_argument is a JSON string
         let finalContent = finalArgument;
         try {
@@ -203,11 +222,24 @@ Example output:
           // Not JSON, use as is
         }
 
-        // Add assistant response with the final argument
+        // Add assistant response with both text and audio if available
         const assistantMessage: Omit<ChatMessage, 'id' | 'timestamp'> = {
           role: 'assistant',
           content: finalContent,
         };
+
+        // Add audio URL to message if audio_base64 is present
+        if (audioBase64) {
+          // Convert base64 to audio blob and create object URL
+          const binaryString = atob(audioBase64);
+          const bytes = new Uint8Array(binaryString.length);
+          for (let i = 0; i < binaryString.length; i++) {
+            bytes[i] = binaryString.charCodeAt(i);
+          }
+          const audioBlob = new Blob([bytes], { type: 'audio/wav' });
+          assistantMessage.audioUrl = URL.createObjectURL(audioBlob);
+        }
+
         addMessage(assistantMessage);
       }