audio

src/app/components/chat/AudioPlayer.tsx

@@ -0,0 +1,119 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Play, Pause } from 'lucide-react';
+
+type AudioPlayerProps = {
+  src: string;
+  className?: string;
+};
+
+const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, className = '' }) => {
+  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);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    const setAudioData = () => {
+      setDuration(audio.duration);
+      setCurrentTime(audio.currentTime);
+    };
+
+    const setAudioTime = () => setCurrentTime(audio.currentTime);
+
+    if (audio.readyState >= 1) {
+      // Metadata is loaded
+      setAudioData();
+    }
+
+    audio.addEventListener('loadeddata', setAudioData);
+    audio.addEventListener('timeupdate', setAudioTime);
+
+    return () => {
+      audio.removeEventListener('loadeddata', setAudioData);
+      audio.removeEventListener('timeupdate', setAudioTime);
+    };
+  }, [src]);
+
+  const togglePlayPause = () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    if (isPlaying) {
+      audio.pause();
+    } else {
+      audio.play();
+    }
+    setIsPlaying(!isPlaying);
+  };
+
+  const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    const audio = audioRef.current;
+    if (!audio || !progressRef.current) return;
+
+    const progressBar = progressRef.current;
+    const clickX = e.nativeEvent.offsetX;
+    const width = progressBar.clientWidth;
+    const newTime = (clickX / width) * duration;
+
+    audio.currentTime = newTime;
+    setCurrentTime(newTime);
+  };
+
+  const formatTime = (time: number) => {
+    if (isNaN(time)) return '0:00';
+
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+  };
+
+  const progress = duration ? (currentTime / duration) * 100 : 0;
+
+  return (
+    <div className={`bg-black/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl p-3 ${className}`}>
+      <audio
+        ref={audioRef}
+        src={src}
+        onEnded={() => setIsPlaying(false)}
+        onPlay={() => setIsPlaying(true)}
+        onPause={() => setIsPlaying(false)}
+      />
+
+      <div className="flex items-center gap-3">
+        <button
+          onClick={togglePlayPause}
+          className="flex items-center justify-center w-8 h-8 rounded-full bg-teal-500 hover:bg-teal-600 text-white transition-colors"
+        >
+          {isPlaying ? (
+            <Pause className="w-4 h-4" />
+          ) : (
+            <Play className="w-4 h-4 ml-0.5" />
+          )}
+        </button>
+
+        <div className="flex-1">
+          <div
+            ref={progressRef}
+            onClick={handleProgressClick}
+            className="h-1.5 bg-gray-300 dark:bg-gray-700 rounded-full cursor-pointer overflow-hidden"
+          >
+            <div
+              className="h-full bg-teal-500 rounded-full"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+          <div className="flex justify-between text-xs text-gray-500 dark:text-white mt-1">
+            <span>{formatTime(currentTime)}</span>
+            <span>{formatTime(duration)}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AudioPlayer;

src/app/components/chat/ChatInput.tsx

@@ -1,10 +1,11 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Plus, ArrowUp, Settings2, Mic, X, Check, Loader2, Search, Sparkles } from 'lucide-react';
+import { Plus, ArrowUp, Settings2, Mic, X, Check, Loader2, Search, Sparkles, Play, Pause } from 'lucide-react';
 import { useMCPTools } from '../../hooks/useMCPTools.ts';
 import type { MCPTool } from '../../types/index.ts';
 
 type ChatInputProps = {
   onSubmit?: (message: string, selectedTool?: string | null) => void;
+  onAudioSubmit?: (audioBlob: Blob, selectedTool?: string | null) => void;
   placeholder?: string;
 };
 
@@ -13,7 +14,7 @@ const isMCPTool = (value: any): value is MCPTool => {
   return value && typeof value === 'object' && typeof value.name === 'string';
 };
 
-const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputProps) => {
+const ChatInput = ({ onSubmit, onAudioSubmit, placeholder = 'Ask a follow-up...' }: ChatInputProps) => {
   const [input, setInput] = useState('');
   const [isRecording, setIsRecording] = useState(false);
   const [showToolsDropdown, setShowToolsDropdown] = useState(false);
@@ -22,9 +23,17 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const [dropdownPosition, setDropdownPosition] = useState<'below' | 'above'>('below');
   const [dropdownMaxHeight, setDropdownMaxHeight] = useState(320);
+  const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
+  const [audioUrl, setAudioUrl] = useState<string | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [recordingTime, setRecordingTime] = useState(0);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const dropdownContentRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const audioChunksRef = useRef<Blob[]>([]);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const recordingTimerRef = useRef<NodeJS.Timeout | null>(null);
   const { tools, loading, error, refetch } = useMCPTools();
 
   const handleSubmit = (e: any) => {
@@ -38,23 +47,234 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
     }
   };
 
-  const handleMicClick = () => {
-    setIsRecording(true);
-    setTimeout(() => {
-      setIsRecording(false);
-      setInput('speech to text feature');
-    }, 5000);
+  const handleMicClick = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      
+      // Try to use a supported mime type
+      let options: MediaRecorderOptions = {};
+      if (MediaRecorder.isTypeSupported('audio/webm;codecs=opus')) {
+        options = { mimeType: 'audio/webm;codecs=opus' };
+      } else if (MediaRecorder.isTypeSupported('audio/webm')) {
+        options = { mimeType: 'audio/webm' };
+      } else if (MediaRecorder.isTypeSupported('audio/mp4')) {
+        options = { mimeType: 'audio/mp4' };
+      }
+      
+      const mediaRecorder = new MediaRecorder(stream, options);
+      mediaRecorderRef.current = mediaRecorder;
+      audioChunksRef.current = [];
+
+      mediaRecorder.ondataavailable = (event) => {
+        if (event.data.size > 0) {
+          audioChunksRef.current.push(event.data);
+        }
+      };
+
+      mediaRecorder.onstop = () => {
+        const mimeType = mediaRecorder.mimeType || 'audio/webm';
+        const blob = new Blob(audioChunksRef.current, { type: mimeType });
+        setAudioBlob(blob);
+        const url = URL.createObjectURL(blob);
+        setAudioUrl(url);
+        // Clean up old audio element
+        if (audioRef.current) {
+          audioRef.current.pause();
+          audioRef.current = null;
+        }
+        // Stop all tracks to release microphone
+        stream.getTracks().forEach(track => track.stop());
+      };
+
+      mediaRecorder.start();
+      setIsRecording(true);
+      setRecordingTime(0);
+
+      // Start recording timer
+      recordingTimerRef.current = setInterval(() => {
+        setRecordingTime(prev => prev + 1);
+      }, 1000);
+    } catch (error) {
+      console.error('Error accessing microphone:', error);
+      alert('Could not access microphone. Please check your permissions.');
+    }
   };
 
   const handleCancelRecording = () => {
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
+      mediaRecorderRef.current.stop();
+    }
+    if (recordingTimerRef.current) {
+      clearInterval(recordingTimerRef.current);
+      recordingTimerRef.current = null;
+    }
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current = null;
+    }
     setIsRecording(false);
+    setIsPlaying(false);
+    setRecordingTime(0);
+    setAudioBlob(null);
+    if (audioUrl) {
+      URL.revokeObjectURL(audioUrl);
+      setAudioUrl(null);
+    }
+    audioChunksRef.current = [];
   };
 
   const handleConfirmRecording = () => {
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
+      // Set up a temporary onstop handler specifically for submission
+      const originalOnStop = mediaRecorderRef.current.onstop;
+      mediaRecorderRef.current.onstop = () => {
+        // Call the original onStop to ensure all state is properly set
+        if (originalOnStop) {
+          originalOnStop.call(mediaRecorderRef.current, new Event('stop'));
+        }
+
+        // Create the blob directly from audioChunksRef to ensure we have the data
+        const mimeType = mediaRecorderRef.current?.mimeType || 'audio/webm';
+        const blob = new Blob(audioChunksRef.current, { type: mimeType });
+
+        // Submit the audio immediately
+        if (blob && onAudioSubmit) {
+          onAudioSubmit(blob, selectedTool);
+        } else {
+          console.error('Audio blob not available for submission', { blob: blob.size > 0, onAudioSubmit });
+        }
+      };
+
+      mediaRecorderRef.current.stop();
+    }
+    if (recordingTimerRef.current) {
+      clearInterval(recordingTimerRef.current);
+      recordingTimerRef.current = null;
+    }
+
     setIsRecording(false);
-    setInput('speech to text feature');
   };
 
+  const handlePlayPause = async () => {
+    if (!audioUrl) {
+      console.error('Audio URL not available');
+      return;
+    }
+
+    // Ensure audio element exists
+    if (!audioRef.current) {
+      console.error('Audio element not initialized');
+      return;
+    }
+
+    try {
+      if (isPlaying) {
+        audioRef.current.pause();
+        setIsPlaying(false);
+      } else {
+        // Reset to beginning if needed
+        if (audioRef.current.ended) {
+          audioRef.current.currentTime = 0;
+        }
+        
+        // Play the audio
+        const playPromise = audioRef.current.play();
+        if (playPromise !== undefined) {
+          await playPromise;
+          setIsPlaying(true);
+        } else {
+          setIsPlaying(true);
+        }
+      }
+    } catch (error) {
+      console.error('Error playing audio:', error);
+      setIsPlaying(false);
+      // Check if it's an autoplay policy issue
+      if (error instanceof Error && error.name === 'NotAllowedError') {
+        alert('Please interact with the page first, then try playing again.');
+      } else {
+        alert('Could not play audio. Please try again.');
+      }
+    }
+  };
+
+  const handleSendRecording = () => {
+    // Stop audio playback if playing
+    if (audioRef.current && isPlaying) {
+      audioRef.current.pause();
+      setIsPlaying(false);
+    }
+
+    // Submit the recorded audio if available
+    if (audioBlob && onAudioSubmit) {
+      onAudioSubmit(audioBlob, selectedTool);
+    }
+
+    // Clean up and return to normal chat mode
+    handleCancelRecording();
+
+    // Focus back to text input
+    setTimeout(() => {
+      const textarea = document.querySelector('textarea');
+      if (textarea) textarea.focus();
+    }, 100);
+  };
+
+  // Initialize audio element when audioUrl is available
+  useEffect(() => {
+    if (audioUrl) {
+      // Clean up old audio element if URL changed
+      if (audioRef.current && audioRef.current.src !== audioUrl) {
+        audioRef.current.pause();
+        audioRef.current = null;
+      }
+
+      // Create new audio element if it doesn't exist
+      if (!audioRef.current) {
+        const audio = new Audio(audioUrl);
+        audioRef.current = audio;
+        audio.volume = 1.0;
+        
+        audio.onended = () => {
+          setIsPlaying(false);
+        };
+        
+        audio.onerror = (error) => {
+          console.error('Audio initialization error:', error);
+          setIsPlaying(false);
+        };
+        
+        audio.onloadeddata = () => {
+          console.log('Audio loaded and ready');
+        };
+
+        audio.oncanplay = () => {
+          console.log('Audio can play');
+        };
+      }
+    }
+
+    return () => {
+      // Don't clean up audio element here - let it persist for playback
+    };
+  }, [audioUrl]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (recordingTimerRef.current) {
+        clearInterval(recordingTimerRef.current);
+      }
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current = null;
+      }
+      if (audioUrl) {
+        URL.revokeObjectURL(audioUrl);
+      }
+    };
+  }, [audioUrl]);
+
   const WaveAnimation = () => {
     const [animationKey, setAnimationKey] = useState(0);
 
@@ -230,7 +450,12 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
         >
           {isRecording ? (
             <div className="flex items-center justify-between h-12 animate-fade-in w-full">
-              <WaveAnimation />
+              <div className="flex items-center gap-3 flex-1">
+                <WaveAnimation />
+                <span className="text-sm text-zinc-600 dark:text-zinc-400 whitespace-nowrap">
+                  {Math.floor(recordingTime / 60)}:{(recordingTime % 60).toString().padStart(2, '0')}
+                </span>
+              </div>
               <div className="flex items-center gap-2 ml-4">
                 <button
                   type="button"
@@ -248,6 +473,41 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
                 </button>
               </div>
             </div>
+          ) : audioBlob && audioUrl ? (
+            <div className="flex items-center justify-between h-12 animate-fade-in w-full">
+              <div className="flex items-center gap-3 flex-1">
+                <button
+                  type="button"
+                  onClick={handlePlayPause}
+                  className="h-8 w-8 p-0 text-zinc-800 dark:text-white hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-lg transition-all duration-200 hover:scale-110 flex items-center justify-center"
+                >
+                  {isPlaying ? (
+                    <Pause className="h-5 w-5" />
+                  ) : (
+                    <Play className="h-5 w-5" />
+                  )}
+                </button>
+                <span className="text-sm text-zinc-600 dark:text-zinc-400">
+                  {isPlaying ? 'Playing...' : 'Tap to replay'}
+                </span>
+              </div>
+              <div className="flex items-center gap-2 ml-4">
+                <button
+                  type="button"
+                  onClick={handleCancelRecording}
+                  className="h-8 w-8 p-0 text-zinc-800 dark:text-white hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-lg transition-all duration-200 hover:scale-110 flex items-center justify-center"
+                >
+                  <X className="h-5 w-5" />
+                </button>
+                <button
+                  type="button"
+                  onClick={handleSendRecording}
+                  className="h-8 w-8 p-0 rounded-lg transition-all duration-200 hover:scale-110 flex items-center justify-center bg-teal-400 dark:bg-[#2DD4BF] text-teal-900 dark:text-[#032827]"
+                >
+                  <ArrowUp className="h-5 w-5" />
+                </button>
+              </div>
+            </div>
           ) : (
             <div className="animate-fade-in">
               <textarea
@@ -453,23 +713,22 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
 
                   <button
                     type="button"
-                    onClick={() => {
-                      if (input.trim()) {
-                        if (onSubmit) {
-                          onSubmit(input, selectedTool);
-                        }
-                        setInput('');
-                      }
-                    }}
-                    disabled={!input.trim()}
                     className="h-8 px-3 rounded-lg text-sm font-medium hover:opacity-90 transition-all duration-200 hover:scale-105 flex items-center justify-center bg-teal-900 dark:bg-[#032827] text-teal-300 dark:text-[#2DD4BF] disabled:opacity-50 disabled:cursor-not-allowed"
                   >
-                    Send
+                    LLama 4
                   </button>
                 </div>
 
                 <button
                   type="submit"
+                  onClick={() => {
+                    if (input.trim()) {
+                      if (onSubmit) {
+                        onSubmit(input, selectedTool);
+                      }
+                      setInput('');
+                    }
+                  }}
                   disabled={!input.trim()}
                   className="h-8 w-8 p-0 bg-zinc-300 dark:bg-zinc-700 hover:bg-zinc-400 dark:hover:bg-zinc-600 disabled:bg-zinc-200 dark:disabled:bg-zinc-800 disabled:text-zinc-400 dark:disabled:text-zinc-500 text-zinc-800 dark:text-white rounded-lg transition-all duration-200 hover:scale-110 disabled:hover:scale-100 flex items-center justify-center disabled:cursor-not-allowed"
                 >

src/app/components/chat/MessageList.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import type { ChatMessage } from '../../types/chat.types.ts';
 import { Loader2, AlertCircle, RotateCcw } from 'lucide-react';
+import AudioPlayer from './AudioPlayer.tsx';
 
 type MessageListProps = {
   messages: ChatMessage[];
@@ -59,7 +60,19 @@ const MessageList = ({ messages, isLoading = false, error = null, onRetry }: Mes
                 : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 mr-12'
             }`}
           >
-            <div className="whitespace-pre-wrap break-words">{message.content}</div>
+            {message.audioUrl ? (
+              // Audio message display - only the player itself
+              <div>
+                <AudioPlayer
+                  src={message.audioUrl}
+                />
+              </div>
+            ) : (
+              // Regular text message
+              <div>
+                <div className="whitespace-pre-wrap break-words">{message.content}</div>
+              </div>
+            )}
             <div
               className={`text-xs mt-1 ${
                 message.role === 'user'

src/app/hooks/useChat.ts

@@ -1,6 +1,7 @@
 import { useState, useCallback } from 'react';
 import { sendChatMessageStream } from '../services/groq.service.ts';
 import { generateEnhancedArgument } from '../services/argument.service.ts';
+import { getUserId } from '../utils/index.ts';
 import type { ChatMessage, ChatState } from '../types/chat.types.ts';
 
 const generateId = () => Math.random().toString(36).substring(2, 15);
@@ -50,6 +51,76 @@ Example output:
     }
   }, []);
 
+  const sendAudioMessage = useCallback(async (audioBlob: Blob, selectedTool?: string | null) => {
+    console.log('sendAudioMessage called with:', { size: audioBlob.size, type: audioBlob.type });
+
+    // Add user audio message
+    const userMessage: Omit<ChatMessage, 'id' | 'timestamp'> = {
+      role: 'user',
+      content: 'Audio message sent', // Placeholder text for audio message
+      audioUrl: URL.createObjectURL(audioBlob), // Store the audio URL for playback in UI
+    };
+    addMessage(userMessage);
+
+    // Set loading state
+    setState(prev => ({ ...prev, isLoading: true, error: null }));
+
+    try {
+      // Get user ID
+      const userId = getUserId();
+      if (!userId) {
+        throw new Error('User ID not found. Please register or log in.');
+      }
+
+      // Get webhook URL
+      const webhookUrl = process.env.REACT_APP_N8N_WEBHOOK_URL;
+      if (!webhookUrl) {
+        throw new Error('REACT_APP_N8N_WEBHOOK_URL environment variable is not set');
+      }
+
+      console.log('Sending audio to webhook:', { userId, webhookUrl });
+
+      // Create form data for audio file upload
+      const formData = new FormData();
+      const file = new File([audioBlob], 'recording.webm', { type: audioBlob.type });
+      formData.append('file', file);
+      formData.append('user_id', userId);
+
+      console.log('FormData created with', formData.get('file') ? 'file' : 'no file');
+
+      // Call the debate-assistant endpoint with audio file
+      const response = await fetch(`${webhookUrl}/debate-assistant`, {
+        method: 'POST',
+        body: formData,
+      });
+
+      console.log('Response received:', response.status);
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      console.log('Response data:', data);
+
+      // 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
+      const assistantMessage: Omit<ChatMessage, 'id' | 'timestamp'> = {
+        role: 'assistant',
+        content: ttsText,
+      };
+      addMessage(assistantMessage);
+
+      setState(prev => ({ ...prev, isLoading: false }));
+    } catch (error) {
+      console.error('Error in sendAudioMessage:', error);
+      const errorMessage = error instanceof Error ? error.message : 'Failed to send audio message';
+      setState(prev => ({ ...prev, isLoading: false, error: errorMessage }));
+    }
+  }, [addMessage]);
+
   const sendMessage = useCallback(async (content: string, selectedTool?: string | null) => {
     // Add user message
     const userMessage: Omit<ChatMessage, 'id' | 'timestamp'> = {
@@ -62,12 +133,9 @@ Example output:
     setState(prev => ({ ...prev, isLoading: true, error: null }));
 
     try {
-      // Get all messages including the new user message
-      const updatedMessages = [...state.messages, { ...userMessage, id: generateId(), timestamp: new Date() }];
-
       // Check if generate argument tool is selected (check for multiple possible names)
       const isGenerateArgumentTool = selectedTool && (
-        selectedTool.toLowerCase().includes('generate') && 
+        selectedTool.toLowerCase().includes('generate') &&
         selectedTool.toLowerCase().includes('argument')
       );
 
@@ -75,10 +143,10 @@ Example output:
         console.log('Generate argument tool detected:', selectedTool);
         // Extract topic and position using LLM
         const { topic, position } = await extractTopicAndPosition(content);
-        
+
         // Call the external API
         const argumentResponse = await generateEnhancedArgument({ topic, position });
-        
+
         // Add assistant response with the enhanced argument
         const assistantMessage: Omit<ChatMessage, 'id' | 'timestamp'> = {
           role: 'assistant',
@@ -86,30 +154,61 @@ Example output:
         };
         addMessage(assistantMessage);
       } else {
-        // Regular chat with streaming
-        // Create an empty assistant message that will be updated with streaming content
-        const assistantId = generateId();
-        const assistantMessage: ChatMessage = {
-          id: assistantId,
+        // Regular chat - use n8n webhook /debate-assistant endpoint
+        // Extract topic and position from user input
+        const { position } = await extractTopicAndPosition(content);
+
+        // Get user ID
+        const userId = getUserId();
+        if (!userId) {
+          throw new Error('User ID not found. Please register or log in.');
+        }
+
+        // Get webhook URL
+        const webhookUrl = process.env.REACT_APP_N8N_WEBHOOK_URL;
+        if (!webhookUrl) {
+          throw new Error('REACT_APP_N8N_WEBHOOK_URL environment variable is not set');
+        }
+
+        // Call the debate-assistant endpoint
+        const response = await fetch(`${webhookUrl}/debate-assistant`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            text: content,
+            position: position,
+            user_id: userId,
+          }),
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+
+        // Extract final_argument from response
+        const finalArgument = data?.final_argument || data?.result?.result?.[0]?.text || 'No response received';
+
+        // Parse if final_argument is a JSON string
+        let finalContent = finalArgument;
+        try {
+          const parsed = JSON.parse(finalArgument);
+          if (parsed.argument) {
+            finalContent = parsed.argument;
+          }
+        } catch {
+          // Not JSON, use as is
+        }
+
+        // Add assistant response with the final argument
+        const assistantMessage: Omit<ChatMessage, 'id' | 'timestamp'> = {
           role: 'assistant',
-          content: '',
-          timestamp: new Date(),
+          content: finalContent,
         };
-        
-        setState(prev => ({
-          ...prev,
-          messages: [...prev.messages, assistantMessage],
-        }));
-
-        // Send to Groq API with streaming
-        await sendChatMessageStream(updatedMessages, (chunk) => {
-          setState(prev => ({
-            ...prev,
-            messages: prev.messages.map(msg => 
-              msg.id === assistantId ? { ...msg, content: msg.content + chunk } : msg
-            ),
-          }));
-        });
+        addMessage(assistantMessage);
       }
 
       setState(prev => ({ ...prev, isLoading: false }));
@@ -117,7 +216,7 @@ Example output:
       const errorMessage = error instanceof Error ? error.message : 'Failed to send message';
       setState(prev => ({ ...prev, isLoading: false, error: errorMessage }));
     }
-  }, [state.messages, addMessage, extractTopicAndPosition]);
+  }, [addMessage, extractTopicAndPosition]);
 
   const clearMessages = useCallback(() => {
     setState(initialState);
@@ -154,6 +253,7 @@ Example output:
     isLoading: state.isLoading,
     error: state.error,
     sendMessage,
+    sendAudioMessage,
     clearMessages,
     retryLastMessage,
   };

src/app/pages/ChatPage.tsx

@@ -4,12 +4,16 @@ import MessageList from '../components/chat/MessageList.tsx';
 import { useChat } from '../hooks/useChat.ts';
 
 const ChatPage = () => {
-  const { messages, isLoading, error, sendMessage, retryLastMessage } = useChat();
+  const { messages, isLoading, error, sendMessage, sendAudioMessage, retryLastMessage } = useChat();
 
   const handleMessageSubmit = (message: string, selectedTool?: string | null) => {
     sendMessage(message, selectedTool);
   };
 
+  const handleAudioSubmit = (audioBlob: Blob, selectedTool?: string | null) => {
+    sendAudioMessage(audioBlob, selectedTool);
+  };
+
   const hasConversation = messages.length > 0;
 
   return (
@@ -29,7 +33,7 @@ const ChatPage = () => {
           {/* Input */}
           <div className="px-4 py-4">
             <div className="max-w-4xl mx-auto">
-              <ChatInput onSubmit={handleMessageSubmit} placeholder="Type your message..." />
+              <ChatInput onSubmit={handleMessageSubmit} onAudioSubmit={handleAudioSubmit} placeholder="Type your message..." />
             </div>
           </div>
         </>
@@ -37,7 +41,7 @@ const ChatPage = () => {
         /* Centered input when no conversation */
         <div className="flex items-center justify-center px-4 pt-20 pb-10 w-full">
           <div className="w-full max-w-4xl">
-            <ChatInput onSubmit={handleMessageSubmit} placeholder="Ask me anything..." />
+            <ChatInput onSubmit={handleMessageSubmit} onAudioSubmit={handleAudioSubmit} placeholder="Ask me anything..." />
           </div>
         </div>
       )}

src/app/types/chat.types.ts

@@ -4,6 +4,7 @@ export type ChatMessage = {
   id: string;
   role: MessageRole;
   content: string;
+  audioUrl?: string; // URL for audio messages
   timestamp: Date;
 };