auto play audio

src/app/components/chat/AudioPlayer.tsx

@@ -4,15 +4,18 @@ import { Play, Pause } from 'lucide-react';
 type AudioPlayerProps = {
   src: string;
   className?: string;
+  autoPlay?: boolean; // Whether to auto-play the audio when rendered
 };
 
-const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, className = '' }) => {
+const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, className = '', autoPlay = false }) => {
   const [isPlaying, setIsPlaying] = useState(false);
   const [duration, setDuration] = useState(0);
   const [currentTime, setCurrentTime] = useState(0);
   const audioRef = useRef<HTMLAudioElement>(null);
   const progressRef = useRef<HTMLDivElement>(null);
 
+  const hasAutoPlayedRef = useRef(false); // To track if auto-play has already happened
+
   useEffect(() => {
     const audio = audioRef.current;
     if (!audio) return;
@@ -32,11 +35,27 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, className = '' }) => {
     audio.addEventListener('loadeddata', setAudioData);
     audio.addEventListener('timeupdate', setAudioTime);
 
+    // Auto-play when the component mounts if autoPlay is true and hasn't played yet
+    if (autoPlay && !hasAutoPlayedRef.current) {
+      const playAudio = async () => {
+        try {
+          await audio.play();
+          setIsPlaying(true);
+          hasAutoPlayedRef.current = true; // Mark as auto-played to prevent re-triggering
+        } catch (error) {
+          // Handle browser auto-play restrictions gracefully
+          console.warn('Auto-play failed:', error);
+        }
+      };
+
+      playAudio();
+    }
+
     return () => {
       audio.removeEventListener('loadeddata', setAudioData);
       audio.removeEventListener('timeupdate', setAudioTime);
     };
-  }, [src]);
+  }, [src, autoPlay]); // Only re-run when src or autoPlay changes
 
   const togglePlayPause = () => {
     const audio = audioRef.current;

src/app/components/chat/MessageList.tsx

@@ -49,7 +49,7 @@ const MessageList = ({ messages, isLoading = false, error = null, onRetry }: Mes
         </div>
       )}
 
-      {messages.map((message) => (
+      {messages.map((message, index) => (
         <div
           key={message.id}
           className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
@@ -66,8 +66,9 @@ const MessageList = ({ messages, isLoading = false, error = null, onRetry }: Mes
               <div>
                 <AudioPlayer
                   src={message.audioUrl}
+                  autoPlay={message.role === 'assistant' && index === messages.length - 1} // Auto-play only the most recent AI response
                 />
-                <TranscriptToggle content={message.content} />
+                  <TranscriptToggle content={message.content} />
               </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: 'sent', // Placeholder text for audio message
+      content: 'extracted argument', // Placeholder text for audio message
       audioUrl: URL.createObjectURL(audioBlob), // Store the audio URL for playback in UI
     };
     addMessage(userMessage);

src/app/types/chat.types.ts

@@ -5,6 +5,7 @@ export type ChatMessage = {
   role: MessageRole;
   content: string;
   audioUrl?: string; // URL for audio messages
+  extractedArgument?: string; // Extracted transcription for user audio messages
   timestamp: Date;
 };