nitrostack 1.0.70 → 1.0.72

package/src/studio/app/chat/page.tsx

@@ -5,23 +5,33 @@ import { useStudioStore } from '@/lib/store';
 import { api } from '@/lib/api';
 import { WidgetRenderer } from '@/components/WidgetRenderer';
 import { MarkdownRenderer } from '@/components/MarkdownRenderer';
+import { VoiceOrbOverlay, MiniVoiceOrb } from '@/components/VoiceOrbOverlay';
 import type { ChatMessage, Tool, ToolCall, Prompt } from '@/lib/types';
 import {
-  Bot,
-  Settings,
-  Trash2,
-  Image as ImageIcon,
-  Send,
-  Wrench,
-  Save,
-  X,
-  Sparkles,
-  FileText,
-  Play,
-  ExternalLink,
-  Info,
-  MoreVertical
-} from 'lucide-react';
+  SparklesIcon,
+  Cog6ToothIcon,
+  TrashIcon,
+  PhotoIcon,
+  PaperAirplaneIcon,
+  WrenchScrewdriverIcon,
+  BookmarkIcon,
+  XMarkIcon,
+  DocumentTextIcon,
+  PlayIcon,
+  ArrowTopRightOnSquareIcon,
+  InformationCircleIcon,
+  EllipsisVerticalIcon,
+  MicrophoneIcon,
+  SpeakerWaveIcon,
+  StopIcon
+} from '@heroicons/react/24/outline';
+
+// Add type for webkitSpeechRecognition
+declare global {
+  interface Window {
+    webkitSpeechRecognition: any;
+  }
+}
 
 export default function ChatPage() {
   const {
@@ -30,16 +40,17 @@ export default function ChatPage() {
     clearChat,
     currentProvider,
     setCurrentProvider,
-    currentImage,
-    setCurrentImage,
+    currentFile,
+    setCurrentFile,
     tools,
     setTools,
+    elevenLabsApiKey,
+    setElevenLabsApiKey
   } = useStudioStore();
 
-  // Get jwtToken and apiKey dynamically to ensure we always have the latest value
+  // ... (existing helper methods)
   const getAuthTokens = () => {
     const state = useStudioStore.getState();
-    // Check both jwtToken and OAuth token (from OAuth tab)
     const jwtToken = state.jwtToken || state.oauthState?.currentToken;
     return {
       jwtToken,
@@ -54,165 +65,329 @@ export default function ChatPage() {
   const [selectedPrompt, setSelectedPrompt] = useState<Prompt | null>(null);
   const [promptArgs, setPromptArgs] = useState<Record<string, string>>({});
   const [fullscreenWidget, setFullscreenWidget] = useState<{ uri: string, data: any } | null>(null);
+
+  // Language presets for quick selection
+  const LANG_PRESETS: Record<string, { model: string; voice: string; input: string; name: string; greeting: string }> = {
+    'en': { model: 'eleven_flash_v2_5', voice: '21m00Tcm4TlvDq8ikWAM', input: 'en-US', name: 'English', greeting: 'Hi! How can I help you today?' },
+    'hi': { model: 'eleven_multilingual_v2', voice: 'C2S5J6WvmHnrQWjUu6Rg', input: 'hi-IN', name: 'Hindi', greeting: 'नमस्ते! मैं आज आपकी कैसे मदद कर सकता हूं?' },
+    'es': { model: 'eleven_multilingual_v2', voice: 'ErXwobaYiN019PkySvjV', input: 'es-ES', name: 'Spanish', greeting: '¡Hola! ¿Cómo puedo ayudarte hoy?' },
+    'fr': { model: 'eleven_multilingual_v2', voice: 'CwhRBWXzGAHq8TQ4Fs17', input: 'fr-FR', name: 'French', greeting: 'Bonjour! Comment puis-je vous aider aujourd\'hui?' },
+    'de': { model: 'eleven_multilingual_v2', voice: 'EXAVITQu4vr4xnSDxMaL', input: 'de-DE', name: 'German', greeting: 'Hallo! Wie kann ich Ihnen heute helfen?' },
+    'ja': { model: 'eleven_multilingual_v2', voice: 'MF3mGyEYCl7XYWbV9V6O', input: 'ja-JP', name: 'Japanese', greeting: 'こんにちは！今日はどのようにお手伝いできますか？' },
+    'zh': { model: 'eleven_multilingual_v2', voice: 'TxGEqnHWrfWFTfGW9XjX', input: 'zh-CN', name: 'Chinese', greeting: '你好！我今天能帮你什么？' },
+  };
+
+  // Voice Mode State
+  type LLMState = 'idle' | 'listening' | 'thinking' | 'speaking';
+  const [llmState, setLlmState] = useState<LLMState>('idle');
+  const [voiceModeEnabled, setVoiceModeEnabled] = useState(false);
+  const [voiceOverlayOpen, setVoiceOverlayOpen] = useState(false);
+  const [spokenText, setSpokenText] = useState('');
+  const [voiceDisplayMode, setVoiceDisplayMode] = useState<'voice-only' | 'voice-chat'>('voice-only');
+  const [showVoiceSettings, setShowVoiceSettings] = useState(false);
+
+  // Voice Configuration - load from localStorage
+  const [voiceModel, setVoiceModel] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('voice_model') || 'eleven_multilingual_v2';
+    }
+    return 'eleven_multilingual_v2';
+  });
+  const [outputLanguage, setOutputLanguage] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('output_language') || 'en';
+    }
+    return 'en';
+  });
+  const [inputLanguage, setInputLanguage] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('input_language') || 'en-US';
+    }
+    return 'en-US';
+  });
+  const [voiceId, setVoiceId] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('voice_id') || '21m00Tcm4TlvDq8ikWAM';
+    }
+    return '21m00Tcm4TlvDq8ikWAM';
+  });
+
+  // Dynamic API data
+  interface ElevenLabsModel {
+    model_id: string;
+    name: string;
+    languages?: { language_id: string; name: string }[];
+  }
+  interface ElevenLabsVoice {
+    voice_id: string;
+    name: string;
+    labels?: { accent?: string; language?: string;[key: string]: string | undefined };
+    category?: string;
+  }
+  const [availableModels, setAvailableModels] = useState<ElevenLabsModel[]>([]);
+  const [availableVoices, setAvailableVoices] = useState<ElevenLabsVoice[]>([]);
+  const [loadingVoiceData, setLoadingVoiceData] = useState(false);
+
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const hasSpokenGreeting = useRef(false); // Prevent double greeting
+
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const initialToolExecuted = useRef(false);
 
+  // Fetch ElevenLabs models when settings opens
   useEffect(() => {
-    loadTools();
-    loadPrompts();
+    if ((!showVoiceSettings && !showSettings) || !elevenLabsApiKey) return;
 
-    // Check if there's a suggested message from localStorage
-    if (typeof window !== 'undefined') {
-      const chatInput = window.localStorage.getItem('chatInput');
-      if (chatInput) {
-        setInputValue(chatInput);
-        window.localStorage.removeItem('chatInput');
-        // Focus after a short delay to ensure component is mounted
-        setTimeout(() => textareaRef.current?.focus(), 100);
+    const fetchModels = async () => {
+      try {
+        const modelsRes = await fetch('https://api.elevenlabs.io/v1/models', {
+          headers: { 'xi-api-key': elevenLabsApiKey }
+        });
+        if (modelsRes.ok) {
+          const modelsData = await modelsRes.json();
+          setAvailableModels(modelsData);
+        }
+      } catch (err) {
+        console.error('Failed to fetch ElevenLabs models:', err);
       }
-    }
-  }, []);
+    };
 
-  useEffect(() => {
-    if (tools.length > 0 && !initialToolExecuted.current) {
-      checkAndRunInitialTool();
-    }
-  }, [tools]);
+    fetchModels();
+  }, [showVoiceSettings, showSettings, elevenLabsApiKey]);
 
+  // Fetch voices when settings opens or output language changes
   useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [chatMessages]);
+    if ((!showVoiceSettings && !showSettings) || !elevenLabsApiKey) return;
 
-  // Auto-focus textarea on mount and after sending
-  useEffect(() => {
-    textareaRef.current?.focus();
-  }, [chatMessages, loading]);
+    const fetchVoices = async () => {
+      setLoadingVoiceData(true);
+      try {
+        // Map output language to ElevenLabs language code
+        const langMap: Record<string, string> = {
+          'en': 'en', 'hi': 'hi', 'es': 'es', 'fr': 'fr', 'de': 'de',
+          'ja': 'ja', 'ko': 'ko', 'zh': 'zh', 'pt': 'pt', 'it': 'it'
+        };
+        const langCode = langMap[outputLanguage] || 'en';
 
-  // Auto-resize textarea based on content
-  useEffect(() => {
-    const textarea = textareaRef.current;
-    if (textarea) {
-      textarea.style.height = '44px'; // Reset to min height
-      const scrollHeight = textarea.scrollHeight;
-      textarea.style.height = Math.min(scrollHeight, 200) + 'px'; // Max 200px
-    }
-  }, [inputValue]);
+        // Fetch user's own voices
+        const userVoicesRes = await fetch('https://api.elevenlabs.io/v1/voices', {
+          headers: { 'xi-api-key': elevenLabsApiKey }
+        });
+        let userVoices: ElevenLabsVoice[] = [];
+        if (userVoicesRes.ok) {
+          const data = await userVoicesRes.json();
+          userVoices = data.voices || [];
+        }
 
-  // Listen for widget fullscreen requests
-  useEffect(() => {
-    const handleFullscreenRequest = (event: CustomEvent) => {
-      const { uri, data } = event.detail;
-      setFullscreenWidget({ uri, data });
+        // Fetch shared voices filtered by language
+        const sharedVoicesRes = await fetch(
+          `https://api.elevenlabs.io/v1/shared-voices?language=${langCode}&page_size=50`,
+          { headers: { 'xi-api-key': elevenLabsApiKey } }
+        );
+        let sharedVoices: ElevenLabsVoice[] = [];
+        if (sharedVoicesRes.ok) {
+          const data = await sharedVoicesRes.json();
+          sharedVoices = (data.voices || []).map((v: any) => ({
+            voice_id: v.voice_id,
+            name: v.name,
+            labels: { accent: v.accent || v.language },
+            category: 'shared'
+          }));
+        }
+
+        // Combine: user voices first, then shared voices
+        setAvailableVoices([...userVoices, ...sharedVoices]);
+      } catch (err) {
+        console.error('Failed to fetch ElevenLabs voices:', err);
+      } finally {
+        setLoadingVoiceData(false);
+      }
     };
 
-    window.addEventListener('widget-fullscreen-request', handleFullscreenRequest as EventListener);
-    return () => window.removeEventListener('widget-fullscreen-request', handleFullscreenRequest as EventListener);
-  }, []);
+    fetchVoices();
+  }, [showVoiceSettings, elevenLabsApiKey, outputLanguage]);
 
-  // Listen for widget tool call requests
-  useEffect(() => {
-    let isProcessingToolCall = false;
+  // Note: Speech recognition is now handled by VoiceOrbOverlay component
 
-    const handleToolCall = async (event: any) => {
-      // Prevent multiple simultaneous calls
-      if (isProcessingToolCall) {
-        console.log('⏭️ Skipping duplicate tool call');
-        return;
+  // Text-to-Speech logic for new messages (when in voice mode or overlay is open)
+  useEffect(() => {
+    // Only trigger TTS if voice mode is enabled OR overlay is open
+    if ((!voiceModeEnabled && !voiceOverlayOpen) || !elevenLabsApiKey || chatMessages.length === 0) return;
+
+    const lastMessage = chatMessages[chatMessages.length - 1];
+    if (lastMessage.role === 'assistant' && lastMessage.content) {
+      // Stop any current audio
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current = null;
       }
+      // Set the text being spoken for overlay display
+      const voiceText = convertToVoiceFriendlyText(lastMessage.content);
+      setSpokenText(voiceText);
+      playTextToSpeech(voiceText);
+    }
+  }, [chatMessages, voiceModeEnabled, voiceOverlayOpen, elevenLabsApiKey]);
 
-      const { toolName, toolArgs } = event.detail;
-      console.log('📞 Chat received tool call from widget:', toolName, toolArgs);
+  // Convert markdown content to voice-friendly, conversational text
+  // Optimized for minimal TTS token usage
+  const convertToVoiceFriendlyText = (text: string): string => {
+    if (!text) return '';
 
-      isProcessingToolCall = true;
+    let result = text;
 
-      try {
-        // Get current state directly from store to avoid stale closure
-        const currentMessages = useStudioStore.getState().chatMessages;
-        const currentProv = useStudioStore.getState().currentProvider;
+    // Remove code blocks entirely (not suitable for voice)
+    result = result.replace(/```[\s\S]*?```/g, 'I\'ve included code in the chat.');
+    result = result.replace(/`[^`]+`/g, '');
 
-        // Directly send the tool call message without showing in input
-        const toolCallMessage = `Use the ${toolName} tool with these arguments: ${JSON.stringify(toolArgs)}`;
+    // Remove tables
+    result = result.replace(/\|[\s\S]*?\|/g, '');
+    if (text.includes('|')) {
+      result = result + ' Check the chat for table details.';
+    }
 
-        // Add user message
-        const userMessage: ChatMessage = {
-          role: 'user',
-          content: toolCallMessage,
-        };
-        addChatMessage(userMessage);
-
-        // Call LLM
-        setLoading(true);
-        try {
-          const { jwtToken, mcpApiKey } = getAuthTokens();
-          const apiKey = localStorage.getItem(`${currentProv}_api_key`);
-          const response = await api.chat({
-            provider: currentProv,
-            messages: [...currentMessages, userMessage],
-            apiKey: apiKey || '',
-            jwtToken: jwtToken || undefined,
-            mcpApiKey: mcpApiKey || undefined,
-          });
-
-          // Handle tool calls (same as handleSend)
-          if (response.toolCalls && response.toolResults) {
-            // Attach results to tool calls for widget rendering
-            const toolCallsWithResults = response.toolCalls.map((tc: any, i: any) => {
-              const toolResult = response.toolResults[i];
-              let parsedResult;
-              if (toolResult.content) {
-                try {
-                  parsedResult = JSON.parse(toolResult.content);
-                } catch (e) {
-                  parsedResult = { raw: toolResult.content };
-                }
-              }
-              return { ...tc, result: parsedResult };
-            });
+    // Remove markdown bold/italic
+    result = result.replace(/\*\*([^*]+)\*\*/g, '$1');
+    result = result.replace(/\*([^*]+)\*/g, '$1');
+    result = result.replace(/__([^_]+)__/g, '$1');
+    result = result.replace(/_([^_]+)_/g, '$1');
 
-            if (response.message) {
-              response.message.toolCalls = toolCallsWithResults;
-              addChatMessage(response.message);
-            }
+    // Remove markdown headers
+    result = result.replace(/^#{1,6}\s+/gm, '');
 
-            // Add tool results
-            const toolResultMessages: ChatMessage[] = [];
-            for (const result of response.toolResults) {
-              addChatMessage(result);
-              toolResultMessages.push(result);
-            }
+    // Remove markdown links, keep text
+    result = result.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1');
 
-            // Continue conversation
-            const messagesForContinuation = [
-              ...currentMessages,
-              userMessage,
-              response.message!,
-              ...toolResultMessages,
-            ];
-
-            // Call continueChatWithToolResults
-            await continueChatWithToolResults(apiKey || '', messagesForContinuation);
-          } else if (response.message) {
-            addChatMessage(response.message);
-          }
+    // Handle bullet lists - summarize aggressively
+    const bulletMatches = result.match(/^[-*]\s+.+$/gm);
+    if (bulletMatches && bulletMatches.length > 3) {
+      // Get first 2 clean items
+      const first2 = bulletMatches.slice(0, 2).map(item =>
+        item.replace(/^[-*]\s+/, '').replace(/\*\*/g, '').replace(/\s*\([A-Z]{2,4}\)\s*/g, '').trim()
+      );
+      const count = bulletMatches.length;
+
+      // Replace entire list with summary
+      const listPattern = /((?:^[-*]\s+.+$\n?)+)/gm;
+      result = result.replace(listPattern, `I found ${count} items, including ${first2[0]} and ${first2[1]}. `);
+    } else if (bulletMatches) {
+      // For short lists, just mention count and first item
+      const first = bulletMatches[0].replace(/^[-*]\s+/, '').replace(/\*\*/g, '').trim();
+      result = result.replace(/((?:^[-*]\s+.+$\n?)+)/gm, `${bulletMatches.length} options: ${first} and others. `);
+    }
 
-          setLoading(false);
-        } catch (error) {
-          console.error('Tool call failed:', error);
-          setLoading(false);
-        }
-      } finally {
-        // Reset flag after a short delay to allow next call
-        setTimeout(() => {
-          isProcessingToolCall = false;
-        }, 1000);
+    // Remove numbered lists, summarize
+    const numberedMatches = result.match(/^\d+\.\s+.+$/gm);
+    if (numberedMatches && numberedMatches.length > 3) {
+      const first = numberedMatches[0].replace(/^\d+\.\s+/, '').trim();
+      result = result.replace(/((?:^\d+\.\s+.+$\n?)+)/gm, `${numberedMatches.length} steps, starting with: ${first}. `);
+    } else {
+      result = result.replace(/^\d+\.\s+/gm, '');
+    }
+
+    // Remove parenthetical codes like (LON), (STN) for voice
+    result = result.replace(/\s*\([A-Z]{2,4}\)\s*/g, ' ');
+
+    // Clean up multiple newlines and spaces
+    result = result.replace(/\n{2,}/g, '. ');
+    result = result.replace(/\n/g, ', ');
+    result = result.replace(/\s{2,}/g, ' ');
+
+    // Hard limit: 80 words max for voice response
+    const words = result.split(/\s+/).filter(w => w.length > 0);
+    if (words.length > 80) {
+      result = words.slice(0, 80).join(' ') + '. Would you like more details?';
+    }
+
+    // Clean up any remaining artifacts
+    result = result.replace(/,\s*,/g, ',');
+    result = result.replace(/\.\s*\./g, '.');
+    result = result.replace(/,\s*\./g, '.');
+    result = result.trim();
+
+    return result;
+  };
+
+  // Note: toggleRecording removed - VoiceOrbOverlay handles speech recognition
+
+  const playTextToSpeech = async (text: string) => {
+    console.log('🔊 playTextToSpeech called with:', text?.substring(0, 50));
+    console.log('🎤 Using voiceId:', voiceId);
+    console.log('🎤 Using voiceModel:', voiceModel);
+
+    if (!elevenLabsApiKey) {
+      console.error('❌ No ElevenLabs API key configured');
+      return;
+    }
+
+    try {
+      setLlmState('speaking');
+
+      const response = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${voiceId}/stream`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'xi-api-key': elevenLabsApiKey,
+        },
+        body: JSON.stringify({
+          text,
+          model_id: voiceModel,
+          voice_settings: {
+            stability: 0.5,
+            similarity_boost: 0.75,
+          },
+        }),
+      });
+
+      console.log('📡 ElevenLabs response status:', response.status);
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        console.error('❌ ElevenLabs API error:', errorText);
+        throw new Error(`TTS failed: ${response.status} - ${errorText}`);
       }
-    };
 
-    window.addEventListener('widget-tool-call', handleToolCall);
-    return () => window.removeEventListener('widget-tool-call', handleToolCall);
-  }, []); // Empty dependency array - only register once
+      const blob = await response.blob();
+      console.log('🎵 Audio blob size:', blob.size, 'bytes');
+
+      const url = URL.createObjectURL(blob);
+      const audio = new Audio(url);
+
+      audio.onended = () => {
+        console.log('🔊 Audio playback ended');
+        setLlmState('listening'); // Resume listening after speaking
+        URL.revokeObjectURL(url);
+      };
+
+      audio.onerror = (e) => {
+        console.error('❌ Audio playback error:', e);
+        setLlmState('idle');
+        URL.revokeObjectURL(url);
+      };
+
+      audioRef.current = audio;
+
+      try {
+        await audio.play();
+        console.log('▶️ Audio playing');
+      } catch (playError) {
+        console.error('❌ Audio play failed (autoplay policy?):', playError);
+        setLlmState('idle');
+      }
+    } catch (error) {
+      console.error('❌ TTS Error:', error);
+      setLlmState('idle');
+    }
+  };
+
+  const stopSpeaking = () => {
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current = null;
+    }
+    setLlmState('idle');
+  };
 
   const loadTools = async () => {
     try {
@@ -362,7 +537,7 @@ export default function ChatPage() {
     }
   };
 
-  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
 
@@ -373,7 +548,7 @@ export default function ChatPage() {
 
     const reader = new FileReader();
     reader.onload = (event) => {
-      setCurrentImage({
+      setCurrentFile({
         data: event.target?.result as string,
         type: file.type,
         name: file.name,
@@ -382,8 +557,11 @@ export default function ChatPage() {
     reader.readAsDataURL(file);
   };
 
-  const handleSend = async () => {
-    if (!inputValue.trim() && !currentImage) return;
+  const handleSend = async (directMessage?: string) => {
+    // Use direct message if provided (from voice mode), otherwise use inputValue
+    const messageText = directMessage || inputValue;
+
+    if (!messageText.trim() && !currentFile) return;
 
     const apiKey = localStorage.getItem(`${currentProvider}_api_key`);
     if (!apiKey) {
@@ -394,16 +572,16 @@ export default function ChatPage() {
 
     const userMessage: ChatMessage = {
       role: 'user',
-      content: inputValue,
+      content: messageText,
     };
 
-    if (currentImage) {
-      userMessage.image = currentImage;
+    if (currentFile) {
+      userMessage.file = currentFile;
     }
 
     addChatMessage(userMessage);
     setInputValue('');
-    setCurrentImage(null);
+    setCurrentFile(null);
     setLoading(true);
 
     try {
@@ -425,9 +603,9 @@ export default function ChatPage() {
         }
 
         // Skip image property for now (not supported by OpenAI chat completions)
-        // if (msg.image) {
-        //   cleaned.image = msg.image;
-        // }
+        if (msg.file) {
+          cleaned.file = msg.file;
+        }
 
         return cleaned;
       });
@@ -435,14 +613,29 @@ export default function ChatPage() {
       // Get fresh auth tokens from store
       const { jwtToken, mcpApiKey } = getAuthTokens();
 
-      console.log('Sending messages to API:', cleanedMessages);
+      // Add language instruction for voice mode (if non-English)
+      let messagesForApi = cleanedMessages;
+      if (voiceModeEnabled && outputLanguage !== 'en') {
+        const langNames: Record<string, string> = {
+          'hi': 'Hindi', 'es': 'Spanish', 'fr': 'French', 'de': 'German',
+          'ja': 'Japanese', 'ko': 'Korean', 'zh': 'Chinese', 'pt': 'Portuguese', 'it': 'Italian'
+        };
+        const langName = langNames[outputLanguage] || outputLanguage;
+        const langInstruction = {
+          role: 'system',
+          content: `IMPORTANT: The user is using voice mode with ${langName} language. You MUST respond in ${langName}. Keep responses concise for voice output.`
+        };
+        messagesForApi = [langInstruction, ...cleanedMessages];
+      }
+
+      console.log('Sending messages to API:', messagesForApi);
       console.log('Auth tokens:', { hasJwtToken: !!jwtToken, hasMcpApiKey: !!mcpApiKey });
       console.log('Original messages:', messagesToSend);
-      console.log('Cleaned messages JSON:', JSON.stringify(cleanedMessages));
+      console.log('Voice mode:', voiceModeEnabled, 'Output language:', outputLanguage);
 
       const response = await api.chat({
         provider: currentProvider,
-        messages: cleanedMessages,
+        messages: messagesForApi,
         apiKey, // LLM API key (OpenAI/Gemini)
         jwtToken: jwtToken || undefined,
         mcpApiKey: mcpApiKey || undefined, // MCP server API key
@@ -451,7 +644,7 @@ export default function ChatPage() {
       // Handle tool calls FIRST (before adding the message)
       if (response.toolCalls && response.toolResults) {
         // Attach results to tool calls for widget rendering
-        const toolCallsWithResults = response.toolCalls.map((tc, i) => {
+        const toolCallsWithResults = response.toolCalls.map((tc: ToolCall, i: number) => {
           const toolResult = response.toolResults[i];
 
           // Parse the result content
@@ -536,7 +729,7 @@ export default function ChatPage() {
     }
   };
 
-  const continueChatWithToolResults = async (apiKey: string, messages?: Message[]) => {
+  const continueChatWithToolResults = async (apiKey: string, messages?: ChatMessage[]) => {
     try {
       // Use provided messages or fall back to store (for recursive calls)
       const messagesToUse = messages || chatMessages;
@@ -579,7 +772,7 @@ export default function ChatPage() {
 
       // Recursive tool calls
       if (response.toolCalls && response.toolResults) {
-        const newToolResults: Message[] = [];
+        const newToolResults: ChatMessage[] = [];
         for (const result of response.toolResults) {
           addChatMessage(result);
           newToolResults.push(result);
@@ -614,174 +807,369 @@ export default function ChatPage() {
 
   return (
     <div className="fixed inset-0 flex flex-col" style={{ left: 'var(--sidebar-width, 15rem)', backgroundColor: '#0a0a0a' }}>
-      {/* Sticky Header */}
-      <div className="sticky top-0 z-10 border-b border-border/50 px-3 sm:px-6 py-3 flex flex-col sm:flex-row items-start sm:items-center justify-between bg-card/80 backdrop-blur-md shadow-sm gap-3 sm:gap-0">
+      {/* Minimal Professional Header */}
+      <div className="sticky top-0 z-10 border-b border-border/50 px-3 sm:px-6 py-4 flex flex-col sm:flex-row items-start sm:items-center justify-between bg-card/50 backdrop-blur-sm gap-3 sm:gap-0">
         <div className="flex items-center gap-3">
-          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-amber-500 flex items-center justify-center shadow-md">
-            <Bot className="w-5 h-5 text-white" strokeWidth={2.5} />
-          </div>
-          <div>
-            <h1 className="text-lg font-bold text-foreground">AI Chat</h1>
-          </div>
+          <h1 className="text-lg font-semibold text-foreground">AI Chat</h1>
+
+          {/* Professional Voice Banner - shows when voice mode active */}
+          {voiceModeEnabled && (
+            <button
+              onClick={() => setVoiceOverlayOpen(true)}
+              className="flex items-center gap-3 bg-zinc-800/90 rounded-full px-4 py-2 hover:bg-zinc-700/90 transition-colors"
+            >
+              {/* Metallic Orb */}
+              <div
+                className="w-7 h-7 rounded-full flex-shrink-0"
+                style={{
+                  background: 'conic-gradient(from 0deg, #9ca3af, #374151, #9ca3af, #374151, #9ca3af)',
+                  boxShadow: 'inset 0 2px 4px rgba(255,255,255,0.1), 0 2px 8px rgba(0,0,0,0.3)'
+                }}
+              />
+              {/* State Text */}
+              <span className="text-sm text-zinc-300">
+                {llmState === 'listening' && 'Listening'}
+                {llmState === 'thinking' && 'Processing'}
+                {llmState === 'speaking' && 'Speaking'}
+                {llmState === 'idle' && 'Ready'}
+              </span>
+            </button>
+          )}
         </div>
 
         <div className="flex items-center gap-2 w-full sm:w-auto">
-          <select
-            value={currentProvider}
-            onChange={(e) => setCurrentProvider(e.target.value as 'openai' | 'gemini')}
-            className="input text-sm px-3 py-1.5 w-full sm:w-28 flex-1 sm:flex-none"
-          >
-            <option value="gemini">Gemini</option>
-            <option value="openai">OpenAI</option>
-          </select>
+          {/* Voice Output Toggle */}
+          {elevenLabsApiKey && (
+            <button
+              onClick={() => {
+                if (llmState === 'speaking') stopSpeaking();
+                setVoiceModeEnabled(!voiceModeEnabled);
+              }}
+              className={`h-8 w-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 ${voiceModeEnabled
+                ? 'bg-primary/20 text-primary ring-1 ring-primary/50'
+                : 'bg-muted/50 text-muted-foreground hover:text-foreground'
+                }`}
+              title={voiceModeEnabled ? "Disable Voice Output" : "Enable Voice Output"}
+            >
+              {llmState === 'speaking' ? <SpeakerWaveIcon className="h-4 w-4 animate-pulse" /> : <MicrophoneIcon className="h-4 w-4" />}
+            </button>
+          )}
+
+
           <button
             onClick={() => setShowSettings(!showSettings)}
-            className={`w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 ${showSettings
+            className={`h-8 w-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 ${showSettings
               ? 'bg-primary/10 text-primary ring-1 ring-primary/30'
               : 'bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground'
               }`}
             title="Settings"
           >
-            <Settings className="w-4 h-4" />
+            <Cog6ToothIcon className="h-4 w-4" />
           </button>
           <button
             onClick={clearChat}
-            className="w-8 h-8 rounded-lg flex items-center justify-center bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground transition-all flex-shrink-0"
+            className="h-8 w-8 rounded-lg flex items-center justify-center bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground transition-all flex-shrink-0"
             title="Clear chat"
           >
-            <Trash2 className="w-4 h-4" />
+            <TrashIcon className="h-4 w-4" />
           </button>
         </div>
       </div>
 
-      {/* Enhanced Settings Panel */}
+      {/* Enhanced Settings Side Drawer - Animated from Left */}
       {showSettings && (
-        <div className="border-b border-border/50 px-3 sm:px-6 py-4 sm:py-5 bg-muted/20 backdrop-blur-md shadow-sm">
-          <div className="max-w-4xl mx-auto">
-            <div className="flex items-start justify-between mb-4">
-              <div>
-                <h3 className="text-sm font-semibold text-foreground flex items-center gap-2">
-                  <Settings className="w-4 h-4" />
-                  API Configuration
-                </h3>
-                <p className="text-xs text-muted-foreground mt-1">Configure your AI provider API keys to enable chat functionality</p>
+        <div
+          className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-opacity"
+          onClick={() => setShowSettings(false)}
+        >
+          <div
+            className="absolute right-0 top-0 h-full w-[400px] bg-card/95 backdrop-blur-xl border-l border-border shadow-2xl animate-slide-in-right overflow-y-auto"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="p-6">
+              <div className="flex items-center justify-between mb-8">
+                <div>
+                  <h2 className="text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Settings</h2>
+                  <p className="text-sm text-muted-foreground mt-1">Configure your workspace</p>
+                </div>
+                <button
+                  onClick={() => setShowSettings(false)}
+                  className="p-2 rounded-full hover:bg-muted/50 transition-colors"
+                >
+                  <XMarkIcon className="w-5 h-5 text-muted-foreground" />
+                </button>
               </div>
-            </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {/* OpenAI Section */}
-              <div className="card p-4">
-                <div className="flex items-center justify-between mb-3">
-                  <label className="text-xs font-semibold text-foreground flex items-center gap-2">
-                    <div className="w-6 h-6 rounded bg-green-500/10 flex items-center justify-center">
-                      <span className="text-xs font-bold text-green-600">AI</span>
+              <div className="space-y-8">
+                {/* AI Provider Selection */}
+                <section>
+                  <h3 className="text-sm font-semibold text-foreground uppercase tracking-wider mb-4 flex items-center gap-2">
+                    <SparklesIcon className="w-4 h-4 text-primary" />
+                    AI Model
+                  </h3>
+                  <div className="card p-1">
+                    <div className="grid grid-cols-2 p-1 gap-1 bg-muted/30 rounded-lg">
+                      <button
+                        onClick={() => setCurrentProvider('gemini')}
+                        className={`flex items-center justify-center gap-2 py-2.5 rounded-md text-sm font-medium transition-all ${currentProvider === 'gemini'
+                          ? 'bg-background shadow-sm text-foreground ring-1 ring-border'
+                          : 'text-muted-foreground hover:text-foreground'
+                          }`}
+                      >
+                        <div className="w-4 h-4 rounded-sm bg-blue-500/20 flex items-center justify-center">
+                          <span className="text-[10px] font-bold text-blue-600">G</span>
+                        </div>
+                        Gemini
+                      </button>
+                      <button
+                        onClick={() => setCurrentProvider('openai')}
+                        className={`flex items-center justify-center gap-2 py-2.5 rounded-md text-sm font-medium transition-all ${currentProvider === 'openai'
+                          ? 'bg-background shadow-sm text-foreground ring-1 ring-border'
+                          : 'text-muted-foreground hover:text-foreground'
+                          }`}
+                      >
+                        <div className="w-4 h-4 rounded-sm bg-green-500/20 flex items-center justify-center">
+                          <span className="text-[10px] font-bold text-green-600">AI</span>
+                        </div>
+                        OpenAI
+                      </button>
                     </div>
-                    OpenAI API Key
-                  </label>
-                  <a
-                    href="https://platform.openai.com/api-keys"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-xs text-primary hover:text-primary/80 flex items-center gap-1 transition-colors"
-                  >
-                    Get Key <ExternalLink className="w-3 h-3" />
-                  </a>
-                </div>
-                <div className="flex gap-2 mb-3">
-                  <input
-                    id="openai-api-key"
-                    type="password"
-                    className="input flex-1 text-sm py-2"
-                    placeholder="sk-proj-..."
-                  />
-                  <button onClick={() => saveApiKey('openai')} className="btn btn-primary text-xs px-4 py-2">
-                    <Save className="w-3 h-3 mr-1" />
-                    Save
-                  </button>
-                </div>
-                <div className="flex items-start gap-2 p-2 bg-blue-500/5 rounded-lg border border-blue-500/10">
-                  <Info className="w-3 h-3 text-blue-500 mt-0.5 flex-shrink-0" />
-                  <div className="text-xs text-muted-foreground">
-                    <p className="mb-1">
-                      <strong>How to get:</strong> Sign up at{' '}
-                      <a href="https://platform.openai.com/signup" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
-                        OpenAI Platform
-                      </a>
-                      , navigate to API Keys, and create a new secret key.
+                    <p className="p-3 text-xs text-muted-foreground border-t border-border/50 mt-1">
+                      {currentProvider === 'gemini' ? 'Google Gemini Pro 1.5 - Great for general reasoning and large context.' : 'GPT-4o - Best in class reasoning and code generation.'}
                     </p>
-                    <a
-                      href="https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-primary hover:underline inline-flex items-center gap-1"
-                    >
-                      View Guide <ExternalLink className="w-2.5 h-2.5" />
-                    </a>
                   </div>
-                </div>
-              </div>
+                </section>
+
+                <hr className="border-border/50" />
+
+                {/* API Keys Configuration */}
+                <section>
+                  <h3 className="text-sm font-semibold text-foreground uppercase tracking-wider mb-4 flex items-center gap-2">
+                    <Cog6ToothIcon className="w-4 h-4 text-primary" />
+                    API Credentials
+                  </h3>
+
+                  <div className="space-y-4">
+                    {/* OpenAI Section */}
+                    <div className="card p-4 card-hover">
+                      <div className="flex items-center justify-between mb-3">
+                        <label className="text-sm font-medium text-foreground flex items-center gap-2">
+                          <div className="w-6 h-6 rounded bg-green-500/10 flex items-center justify-center">
+                            <span className="text-xs font-bold text-green-600">AI</span>
+                          </div>
+                          OpenAI
+                        </label>
+                        <a
+                          href="https://platform.openai.com/api-keys"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-xs text-primary hover:text-primary/80 flex items-center gap-1"
+                        >
+                          Get Key <ArrowTopRightOnSquareIcon className="w-3 h-3" />
+                        </a>
+                      </div>
+                      <div className="flex gap-2">
+                        <input
+                          id="openai-api-key"
+                          type="password"
+                          className="input flex-1 text-sm bg-background/50"
+                          placeholder="sk-proj-..."
+                          defaultValue={localStorage.getItem('openai_api_key') || ''}
+                        />
+                        <button onClick={() => saveApiKey('openai')} className="btn btn-primary btn-sm px-4">
+                          Save
+                        </button>
+                      </div>
+                    </div>
 
-              {/* Gemini Section */}
-              <div className="card p-4">
-                <div className="flex items-center justify-between mb-3">
-                  <label className="text-xs font-semibold text-foreground flex items-center gap-2">
-                    <div className="w-6 h-6 rounded bg-blue-500/10 flex items-center justify-center">
-                      <span className="text-xs font-bold text-blue-600">G</span>
+                    {/* Gemini Section */}
+                    <div className="card p-4 card-hover">
+                      <div className="flex items-center justify-between mb-3">
+                        <label className="text-sm font-medium text-foreground flex items-center gap-2">
+                          <div className="w-6 h-6 rounded bg-blue-500/10 flex items-center justify-center">
+                            <span className="text-xs font-bold text-blue-600">G</span>
+                          </div>
+                          Gemini
+                        </label>
+                        <a
+                          href="https://aistudio.google.com/app/apikey"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-xs text-primary hover:text-primary/80 flex items-center gap-1"
+                        >
+                          Get Key <ArrowTopRightOnSquareIcon className="w-3 h-3" />
+                        </a>
+                      </div>
+                      <div className="flex gap-2">
+                        <input
+                          id="gemini-api-key"
+                          type="password"
+                          className="input flex-1 text-sm bg-background/50"
+                          placeholder="AIza..."
+                          defaultValue={localStorage.getItem('gemini_api_key') || ''}
+                        />
+                        <button onClick={() => saveApiKey('gemini')} className="btn btn-primary btn-sm px-4">
+                          Save
+                        </button>
+                      </div>
                     </div>
-                    Gemini API Key
-                  </label>
-                  <a
-                    href="https://aistudio.google.com/app/apikey"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-xs text-primary hover:text-primary/80 flex items-center gap-1 transition-colors"
-                  >
-                    Get Key <ExternalLink className="w-3 h-3" />
-                  </a>
-                </div>
-                <div className="flex gap-2 mb-3">
-                  <input
-                    id="gemini-api-key"
-                    type="password"
-                    className="input flex-1 text-sm py-2"
-                    placeholder="AIza..."
-                  />
-                  <button onClick={() => saveApiKey('gemini')} className="btn btn-primary text-xs px-4 py-2">
-                    <Save className="w-3 h-3 mr-1" />
-                    Save
-                  </button>
-                </div>
-                <div className="flex items-start gap-2 p-2 bg-blue-500/5 rounded-lg border border-blue-500/10">
-                  <Info className="w-3 h-3 text-blue-500 mt-0.5 flex-shrink-0" />
-                  <div className="text-xs text-muted-foreground">
-                    <p className="mb-1">
-                      <strong>How to get:</strong> Visit{' '}
-                      <a href="https://aistudio.google.com" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
-                        Google AI Studio
-                      </a>
-                      , sign in with your Google account, and click "Get API key".
-                    </p>
-                    <a
-                      href="https://ai.google.dev/gemini-api/docs/api-key"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-primary hover:underline inline-flex items-center gap-1"
-                    >
-                      View Guide <ExternalLink className="w-2.5 h-2.5" />
-                    </a>
                   </div>
-                </div>
-              </div>
-            </div>
+                </section>
 
-            {/* Security Notice */}
-            <div className="mt-4 p-3 bg-amber-500/5 rounded-lg border border-amber-500/10">
-              <div className="flex items-start gap-2">
-                <Info className="w-4 h-4 text-amber-500 mt-0.5 flex-shrink-0" />
-                <div className="text-xs text-muted-foreground">
-                  <strong className="text-foreground">Security Note:</strong> Your API keys are stored locally in your browser and never sent to our servers.
-                  Keep them confidential and avoid sharing them publicly.
+                <hr className="border-border/50" />
+
+                {/* Voice Configuration - Inline (Matches Global Settings) */}
+                <section className="space-y-4 pt-4 border-t border-border">
+                  <div className="flex items-center justify-between">
+                    <label className="text-xs font-bold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
+                      <MicrophoneIcon className="w-3 h-3" /> Voice Integration
+                    </label>
+                    {elevenLabsApiKey && <span className="text-[10px] bg-purple-500/10 text-purple-600 px-2 py-0.5 rounded-full font-medium border border-purple-500/20">Enabled</span>}
+                  </div>
+
+                  <div className="bg-muted/10 rounded-xl border border-border p-4 space-y-4">
+                    {/* API Key Input */}
+                    <div>
+                      <label className="block text-xs font-medium text-foreground mb-1.5 flex items-center justify-between">
+                        <span>ElevenLabs API Key</span>
+                        <a
+                          href="https://elevenlabs.io/api"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-[10px] text-primary hover:underline flex items-center gap-1"
+                        >
+                          Get Key <ArrowTopRightOnSquareIcon className="w-2.5 h-2.5" />
+                        </a>
+                      </label>
+                      <div className="relative">
+                        <input
+                          type="password"
+                          value={elevenLabsApiKey || ''}
+                          onChange={(e) => setElevenLabsApiKey(e.target.value || null)}
+                          className="input w-full font-mono text-xs bg-background/50"
+                          placeholder={elevenLabsApiKey ? "••••••••••••••••" : "Paste your xi-api-key here"}
+                        />
+                        {elevenLabsApiKey && (
+                          <button
+                            onClick={() => setElevenLabsApiKey(null)}
+                            className="absolute right-2 top-1.5 text-[10px] text-destructive hover:underline"
+                          >
+                            Clear
+                          </button>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Inline Configuration (Only if Key is set) */}
+                    {elevenLabsApiKey ? (
+                      <div className="space-y-3 animate-fade-in pt-2 border-t border-border/50">
+                        {/* TTS Model */}
+                        <div>
+                          <label className="block text-xs font-medium text-foreground mb-1.5">Voice Model</label>
+                          <select
+                            value={voiceModel}
+                            onChange={(e) => {
+                              setVoiceModel(e.target.value);
+                              localStorage.setItem('voice_model', e.target.value);
+                            }}
+                            className="input w-full text-xs bg-background/50"
+                          >
+                            {availableModels.length > 0 ? (
+                              availableModels.filter(m => m.model_id.includes('eleven')).map(model => (
+                                <option key={model.model_id} value={model.model_id}>
+                                  {model.name}
+                                </option>
+                              ))
+                            ) : (
+                              <>
+                                <option value="eleven_multilingual_v2">Multilingual v2</option>
+                                <option value="eleven_flash_v2_5">Flash v2.5</option>
+                                <option value="eleven_turbo_v2_5">Turbo v2.5</option>
+                              </>
+                            )}
+                          </select>
+                        </div>
+
+                        {/* Voice Selection */}
+                        <div>
+                          <label className="block text-xs font-medium text-foreground mb-1.5">Voice Character</label>
+                          <select
+                            value={voiceId}
+                            onChange={(e) => {
+                              setVoiceId(e.target.value);
+                              localStorage.setItem('voice_id', e.target.value);
+                            }}
+                            className="input w-full text-xs bg-background/50"
+                          >
+                            {availableVoices.length > 0 ? (
+                              availableVoices.map(voice => (
+                                <option key={voice.voice_id} value={voice.voice_id}>
+                                  {voice.name} {voice.labels?.accent ? `(${voice.labels.accent})` : ''}
+                                </option>
+                              ))
+                            ) : (
+                              <>
+                                <option value="21m00Tcm4TlvDq8ikWAM">Rachel (English)</option>
+                                <option value="EXAVITQu4vr4xnSDxMaL">Bella (English)</option>
+                              </>
+                            )}
+                          </select>
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-2">
+                          {/* Output Language */}
+                          <div>
+                            <label className="block text-xs font-medium text-foreground mb-1.5">Output Lang</label>
+                            <select
+                              value={outputLanguage}
+                              onChange={(e) => {
+                                setOutputLanguage(e.target.value);
+                                localStorage.setItem('output_language', e.target.value);
+                              }}
+                              className="input w-full text-xs bg-background/50"
+                            >
+                              {Object.entries(LANG_PRESETS).map(([code, preset]) => (
+                                <option key={code} value={code}>{preset.name}</option>
+                              ))}
+                            </select>
+                          </div>
+
+                          {/* Input Language */}
+                          <div>
+                            <label className="block text-xs font-medium text-foreground mb-1.5">Input Lang</label>
+                            <select
+                              value={inputLanguage}
+                              onChange={(e) => {
+                                setInputLanguage(e.target.value);
+                                localStorage.setItem('input_language', e.target.value);
+                              }}
+                              className="input w-full text-xs bg-background/50"
+                            >
+                              <option value="en-US">English (US)</option>
+                              <option value="en-GB">English (UK)</option>
+                              <option value="hi-IN">Hindi</option>
+                              <option value="es-ES">Spanish</option>
+                              <option value="fr-FR">French</option>
+                              <option value="de-DE">German</option>
+                              <option value="ja-JP">Japanese</option>
+                            </select>
+                          </div>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="p-3 bg-muted/30 rounded-lg border border-dashed border-border text-center">
+                        <p className="text-xs text-muted-foreground">Add API key to unlock premium voice capabilities.</p>
+                      </div>
+                    )}
+                  </div>
+                </section>
+
+                <div className="pt-4">
+                  <p className="text-[10px] text-muted-foreground/50 text-center">
+                    NitroStudio v1.0.0 • Local Environment
+                  </p>
                 </div>
+
               </div>
             </div>
           </div>
@@ -794,21 +1182,104 @@ export default function ChatPage() {
           {chatMessages.length === 0 && !loading ? (
             /* Welcome Screen */
             <div className="flex flex-col items-center justify-center min-h-[calc(100vh-300px)] animate-fade-in">
-              <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary to-amber-500 flex items-center justify-center shadow-xl mb-6">
-                <Bot className="w-10 h-10 text-white" strokeWidth={2.5} />
-              </div>
 
-              <h2 className="text-3xl font-bold text-foreground mb-3">Welcome to NitroStudio</h2>
-              <p className="text-muted-foreground text-center max-w-md mb-8">
-                Your AI-powered development environment for Model Context Protocol (MCP) servers.
-                Start a conversation or try a prompt below.
-              </p>
+              {/* Voice Mode UI - Only when ElevenLabs key is set */}
+              {elevenLabsApiKey ? (
+                <div className="flex flex-col items-center">
+                  {/* Custom Voice Orb - Same as VoiceOrbOverlay */}
+                  <button
+                    onClick={() => {
+                      // Apply language preset
+                      const preset = LANG_PRESETS[outputLanguage] || LANG_PRESETS['en'];
+                      setVoiceModel(preset.model);
+                      setVoiceId(preset.voice);
+                      setInputLanguage(preset.input);
+                      // Start voice mode
+                      setVoiceOverlayOpen(true);
+                      setVoiceModeEnabled(true);
+                    }}
+                    className="group relative w-44 h-44 rounded-full mb-6 cursor-pointer transition-transform duration-500 hover:scale-105"
+                  >
+                    {/* Rotating gradient ring - EXACT from VoiceOrbOverlay idle state */}
+                    <div
+                      className="absolute inset-0 rounded-full"
+                      style={{
+                        background: 'conic-gradient(from 0deg, #475569, #64748b, #475569)',
+                        padding: '3px',
+                        borderRadius: '50%'
+                      }}
+                    >
+                      {/* Inner orb */}
+                      <div
+                        className="w-full h-full rounded-full bg-[#0a0a0a] flex items-center justify-center"
+                        style={{
+                          boxShadow: '0 0 30px 5px rgba(71, 85, 105, 0.15)'
+                        }}
+                      >
+                        {/* Center gradient - EXACT from VoiceOrbOverlay idle state */}
+                        <div
+                          className="w-32 h-32 rounded-full flex items-center justify-center"
+                          style={{
+                            background: 'radial-gradient(circle, #64748b 0%, #0a0a0a 60%)'
+                          }}
+                        >
+                          {/* Small Mic Icon */}
+                          <svg className="w-10 h-10 text-slate-400/70 group-hover:text-slate-300 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z" />
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 10v2a7 7 0 01-14 0v-2M12 19v4M8 23h8" />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                  </button>
+
+                  {/* Language Dropdown */}
+                  <select
+                    value={outputLanguage}
+                    onChange={(e) => {
+                      const lang = e.target.value;
+                      const preset = LANG_PRESETS[lang];
+                      if (preset) {
+                        setOutputLanguage(lang);
+                        setInputLanguage(preset.input);
+                        setVoiceModel(preset.model);
+                        setVoiceId(preset.voice);
+                        // Save to localStorage
+                        localStorage.setItem('output_language', lang);
+                        localStorage.setItem('input_language', preset.input);
+                        localStorage.setItem('voice_model', preset.model);
+                        localStorage.setItem('voice_id', preset.voice);
+                      }
+                    }}
+                    className="bg-muted/50 border border-border rounded-xl px-6 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 mb-4"
+                  >
+                    {Object.entries(LANG_PRESETS).map(([code, preset]) => (
+                      <option key={code} value={code}>{preset.name}</option>
+                    ))}
+                  </select>
+
+                  <p className="text-sm text-muted-foreground/80 mb-8">Click to start voice conversation</p>
+                </div>
+              ) : (
+                /* Traditional Welcome - Only when no ElevenLabs key */
+                <>
+                  <div className="w-16 h-16 rounded bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-xl mb-6">
+                    <SparklesIcon className="h-10 w-10 text-white" />
+                  </div>
+
+                  <h2 className="text-3xl font-bold text-foreground mb-3">Welcome to NitroStudio</h2>
+                  <p className="text-muted-foreground text-center max-w-md mb-8">
+                    Your AI-powered development environment for Model Context Protocol (MCP) servers.
+                    Start a conversation or try a prompt below.
+                  </p>
+                </>
+              )}
 
               {/* Prompts Overview */}
               {prompts.length > 0 && (
                 <div className="w-full max-w-2xl">
                   <div className="flex items-center gap-2 mb-4">
-                    <Sparkles className="w-5 h-5 text-primary" />
+                    <SparklesIcon className="h-5 w-5 text-primary" />
                     <h3 className="text-lg font-semibold text-foreground">Available Prompts</h3>
                     <span className="text-sm text-muted-foreground">({prompts.length})</span>
                   </div>
@@ -824,8 +1295,8 @@ export default function ChatPage() {
                         className="card card-hover p-4 text-left group transition-all hover:scale-[1.02]"
                       >
                         <div className="flex items-start gap-3">
-                          <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors flex-shrink-0">
-                            <FileText className="w-4 h-4 text-primary" />
+                          <div className="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors flex-shrink-0">
+                            <DocumentTextIcon className="h-4 w-4 text-primary" />
                           </div>
                           <div className="flex-1 min-w-0">
                             <h4 className="font-semibold text-foreground text-sm mb-1 truncate">
@@ -884,10 +1355,10 @@ export default function ChatPage() {
               ))}
               {loading && (
                 <div className="flex gap-4 items-start animate-fade-in">
-                  <div className="w-8 h-8 rounded-full bg-gradient-to-br from-primary to-amber-500 flex items-center justify-center flex-shrink-0 shadow-md">
-                    <Bot className="w-5 h-5 text-white" strokeWidth={2.5} />
+                  <div className="h-8 w-8 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0 shadow-md">
+                    <SparklesIcon className="h-5 w-5 text-white" />
                   </div>
-                  <div className="flex-1 bg-card/50 backdrop-blur-sm rounded-2xl px-5 py-4 border border-border/50">
+                  <div className="flex-1 bg-card/50 backdrop-blur-sm rounded px-5 py-4 border border-border/50">
                     <div className="flex items-center gap-2">
                       <div className="flex gap-1">
                         <span className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '0s' }}></span>
@@ -905,77 +1376,273 @@ export default function ChatPage() {
         </div>
       </div>
 
-      {/* ChatGPT-style Input Area - Fixed at bottom */}
-      <div className="sticky bottom-0 border-t border-border/50 bg-background/95 backdrop-blur-md shadow-[0_-2px_10px_rgba(0,0,0,0.1)]">
-        <div className="max-w-5xl mx-auto px-3 sm:px-4 py-3 sm:py-4">
-          {currentImage && (
-            <div className="mb-3 p-3 bg-card rounded-xl flex items-start gap-3 border border-border/50 animate-fade-in">
-              <img
-                src={currentImage.data}
-                alt={currentImage.name}
-                className="w-20 h-20 object-cover rounded-lg border border-border"
-              />
-              <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium text-foreground truncate">{currentImage.name}</p>
-                <p className="text-xs text-muted-foreground">{currentImage.type}</p>
-              </div>
-              <button
-                onClick={() => setCurrentImage(null)}
-                className="w-7 h-7 rounded-lg flex items-center justify-center bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground transition-all flex-shrink-0"
-              >
-                <X className="w-4 h-4" />
+      {/* Sleek Professional Input Area */}
+      <div className="sticky bottom-0 bg-gradient-to-t from-background via-background to-transparent pt-6 pb-4">
+        <div className="max-w-3xl mx-auto px-4">
+          {/* Current file preview */}
+          {currentFile && (
+            <div className="mb-2 flex items-center gap-2 text-xs text-muted-foreground bg-muted/50 rounded-lg px-3 py-2">
+              <PhotoIcon className="w-4 h-4" />
+              <span className="truncate">{currentFile.name}</span>
+              <button onClick={() => setCurrentFile(null)} className="ml-auto hover:text-foreground">
+                <XMarkIcon className="w-4 h-4" />
               </button>
             </div>
           )}
-          <div className="flex items-center gap-2">
-            <input
-              type="file"
-              ref={fileInputRef}
-              onChange={handleImageUpload}
-              accept="image/*"
-              className="hidden"
-            />
-            <button
-              onClick={() => fileInputRef.current?.click()}
-              className="h-11 w-11 rounded-xl flex items-center justify-center bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground transition-all flex-shrink-0"
-              title="Upload image"
-            >
-              <ImageIcon className="w-5 h-5" />
-            </button>
-            <div className="flex-1 relative flex items-center">
+
+          {/* Main Input Container */}
+          <div className={`
+            relative rounded-2xl border transition-all duration-300
+            ${loading ? 'opacity-60' : ''}
+            ${llmState !== 'idle' ? 'border-primary/50 shadow-lg shadow-primary/5' : 'border-border/60 hover:border-border focus-within:border-primary/30'}
+            bg-card/80 backdrop-blur-sm
+          `}>
+            <div className="flex items-end gap-1 p-2">
+              {/* File attachment dropdown */}
+              <div className="relative group">
+                <input
+                  type="file"
+                  ref={fileInputRef}
+                  onChange={handleFileUpload}
+                  accept="image/*,.pdf,.txt,.md,.json,.csv,.docx"
+                  className="hidden"
+                />
+                <button
+                  onClick={() => fileInputRef.current?.click()}
+                  className="p-2 rounded-xl text-muted-foreground hover:text-foreground hover:bg-muted/80 transition-all"
+                  title="Attach file"
+                >
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 4v16m8-8H4" />
+                  </svg>
+                </button>
+              </div>
+
+              {/* Text Input */}
               <textarea
                 ref={textareaRef}
                 value={inputValue}
                 onChange={(e) => setInputValue(e.target.value)}
                 onKeyDown={(e) => {
-                  // Send on Enter, new line on Shift+Enter
                   if (e.key === 'Enter' && !e.shiftKey) {
                     e.preventDefault();
                     handleSend();
                   }
                 }}
-                placeholder="Message NitroStudio... (Shift + Enter for new line)"
-                className="w-full px-4 py-3 rounded-xl bg-card border border-border/50 focus:border-primary/50 focus:ring-2 focus:ring-primary/20 resize-none text-sm text-foreground placeholder:text-muted-foreground transition-all outline-none"
+                placeholder="Message..."
+                className="flex-1 bg-transparent border-0 focus:ring-0 resize-none py-2 px-1 text-sm min-h-[40px] max-h-[120px] placeholder:text-muted-foreground/50"
                 rows={1}
-                style={{
-                  minHeight: '44px',
-                  maxHeight: '200px',
-                  overflow: 'hidden',
-                }}
+                disabled={loading}
               />
+
+              {/* Right side buttons */}
+              <div className="flex items-center gap-1">
+                {/* Voice mode button */}
+                {elevenLabsApiKey && (
+                  <button
+                    onClick={() => {
+                      setVoiceModeEnabled(true);
+                      setVoiceOverlayOpen(true);
+                    }}
+                    className={`p-2 rounded-xl transition-all ${voiceModeEnabled
+                      ? 'text-primary bg-primary/10'
+                      : 'text-muted-foreground hover:text-foreground hover:bg-muted/80'
+                      }`}
+                    title="Voice mode"
+                  >
+                    <MicrophoneIcon className="w-5 h-5" />
+                  </button>
+                )}
+
+                {/* Send button */}
+                <button
+                  onClick={() => handleSend()}
+                  disabled={loading || (!inputValue.trim() && !currentFile)}
+                  className={`p-2 rounded-xl transition-all ${inputValue.trim() || currentFile
+                    ? 'bg-primary text-primary-foreground hover:bg-primary/90'
+                    : 'text-muted-foreground/50 cursor-not-allowed'
+                    }`}
+                  title="Send"
+                >
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M12 5l7 7-7 7" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Minimal footer hint */}
+          <p className="text-[10px] text-muted-foreground/40 text-center mt-2">
+            Press Enter to send, Shift+Enter for new line
+          </p>
+        </div>
+      </div>
+
+      {/* Voice Settings Modal - z-60 to be above voice overlay (z-50) */}
+      {showVoiceSettings && (
+        <div
+          className="fixed inset-0 z-[60] flex items-center justify-center bg-black/80 backdrop-blur-sm"
+          onClick={() => setShowVoiceSettings(false)}
+        >
+          <div
+            className="bg-card border border-border rounded-2xl p-6 w-[450px] max-h-[85vh] overflow-auto shadow-2xl"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between mb-6">
+              <h2 className="text-lg font-semibold">Voice Settings</h2>
+              <button
+                onClick={() => setShowVoiceSettings(false)}
+                className="p-1 rounded-lg hover:bg-muted transition-colors"
+              >
+                <XMarkIcon className="w-5 h-5" />
+              </button>
             </div>
+
+            {loadingVoiceData ? (
+              <div className="flex items-center justify-center py-8">
+                <div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+                <span className="ml-3 text-muted-foreground">Loading voice options...</span>
+              </div>
+            ) : (
+              <div className="space-y-5">
+                {/* Model Selection */}
+                <div>
+                  <label className="block text-sm font-medium text-muted-foreground mb-2">
+                    TTS Model
+                  </label>
+                  <select
+                    value={voiceModel}
+                    onChange={(e) => setVoiceModel(e.target.value)}
+                    className="w-full bg-muted/50 border border-border rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
+                  >
+                    {availableModels.length > 0 ? (
+                      availableModels.filter(m => m.model_id.includes('eleven')).map(model => (
+                        <option key={model.model_id} value={model.model_id}>
+                          {model.name}
+                        </option>
+                      ))
+                    ) : (
+                      <>
+                        <option value="eleven_multilingual_v2">Multilingual v2</option>
+                        <option value="eleven_flash_v2_5">Flash v2.5</option>
+                        <option value="eleven_turbo_v2_5">Turbo v2.5</option>
+                      </>
+                    )}
+                  </select>
+                </div>
+
+                {/* Output Language */}
+                <div>
+                  <label className="block text-sm font-medium text-muted-foreground mb-2">
+                    Output Language (TTS)
+                  </label>
+                  <select
+                    value={outputLanguage}
+                    onChange={(e) => setOutputLanguage(e.target.value)}
+                    className="w-full bg-muted/50 border border-border rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
+                  >
+                    {/* Get languages from selected model if available */}
+                    {(() => {
+                      const selectedModel = availableModels.find(m => m.model_id === voiceModel);
+                      if (selectedModel?.languages && selectedModel.languages.length > 0) {
+                        return selectedModel.languages.map(lang => (
+                          <option key={lang.language_id} value={lang.language_id}>
+                            {lang.name}
+                          </option>
+                        ));
+                      }
+                      return (
+                        <>
+                          <option value="en">English</option>
+                          <option value="hi">Hindi</option>
+                          <option value="es">Spanish</option>
+                          <option value="fr">French</option>
+                          <option value="de">German</option>
+                          <option value="ja">Japanese</option>
+                          <option value="ko">Korean</option>
+                          <option value="zh">Chinese</option>
+                          <option value="pt">Portuguese</option>
+                          <option value="it">Italian</option>
+                        </>
+                      );
+                    })()}
+                  </select>
+                </div>
+
+                {/* Voice Character - pre-filtered by language from API */}
+                <div>
+                  <label className="block text-sm font-medium text-muted-foreground mb-2">
+                    Voice Character
+                  </label>
+                  <select
+                    value={voiceId}
+                    onChange={(e) => setVoiceId(e.target.value)}
+                    className="w-full bg-muted/50 border border-border rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
+                  >
+                    {availableVoices.length > 0 ? (
+                      availableVoices.map(voice => (
+                        <option key={voice.voice_id} value={voice.voice_id}>
+                          {voice.name} {voice.labels?.accent ? `(${voice.labels.accent})` : voice.category === 'shared' ? '(Shared)' : ''}
+                        </option>
+                      ))
+                    ) : (
+                      <>
+                        <option value="21m00Tcm4TlvDq8ikWAM">Rachel (English)</option>
+                        <option value="EXAVITQu4vr4xnSDxMaL">Bella (English)</option>
+                      </>
+                    )}
+                  </select>
+                  <p className="text-xs text-muted-foreground/60 mt-1">
+                    {loadingVoiceData ? 'Loading voices...' : `${availableVoices.length} voices for ${outputLanguage.toUpperCase()}`}
+                  </p>
+                </div>
+
+                {/* Input Language (Speech Recognition) */}
+                <div>
+                  <label className="block text-sm font-medium text-muted-foreground mb-2">
+                    Input Language (Speech Recognition)
+                  </label>
+                  <select
+                    value={inputLanguage}
+                    onChange={(e) => setInputLanguage(e.target.value)}
+                    className="w-full bg-muted/50 border border-border rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
+                  >
+                    <option value="en-US">English (US)</option>
+                    <option value="en-GB">English (UK)</option>
+                    <option value="hi-IN">Hindi</option>
+                    <option value="es-ES">Spanish</option>
+                    <option value="fr-FR">French</option>
+                    <option value="de-DE">German</option>
+                    <option value="ja-JP">Japanese</option>
+                    <option value="ko-KR">Korean</option>
+                    <option value="zh-CN">Chinese (Mandarin)</option>
+                    <option value="pt-BR">Portuguese (Brazil)</option>
+                    <option value="it-IT">Italian</option>
+                  </select>
+                  <p className="text-xs text-muted-foreground/60 mt-1">
+                    Language for voice input (what you speak)
+                  </p>
+                </div>
+              </div>
+            )}
+
             <button
-              onClick={handleSend}
-              disabled={loading || (!inputValue.trim() && !currentImage)}
-              className="h-11 w-11 rounded-xl flex items-center justify-center bg-gradient-to-br from-primary to-amber-500 text-white shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed transition-all flex-shrink-0 hover:scale-105 active:scale-95"
-              title="Send message (Enter)"
+              onClick={() => {
+                // Save to localStorage
+                localStorage.setItem('voice_model', voiceModel);
+                localStorage.setItem('output_language', outputLanguage);
+                localStorage.setItem('input_language', inputLanguage);
+                localStorage.setItem('voice_id', voiceId);
+                setShowVoiceSettings(false);
+              }}
+              className="w-full mt-6 bg-primary text-primary-foreground rounded-xl py-2.5 text-sm font-medium hover:bg-primary/90 transition-colors"
             >
-              <Send className="w-5 h-5" strokeWidth={2.5} />
+              Save Settings
             </button>
           </div>
-
         </div>
-      </div>
+      )}
 
       {/* Prompt Executor Modal */}
       {selectedPrompt && (
@@ -985,13 +1652,13 @@ export default function ChatPage() {
           onClick={() => setSelectedPrompt(null)}
         >
           <div
-            className="bg-card rounded-2xl p-6 w-[600px] max-h-[80vh] overflow-auto border border-border shadow-2xl animate-scale-in"
+            className="bg-card rounded p-6 w-[600px] max-h-[80vh] overflow-auto border border-border shadow-2xl animate-scale-in"
             onClick={(e) => e.stopPropagation()}
           >
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
-                  <FileText className="w-5 h-5 text-primary" />
+                <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                  <DocumentTextIcon className="h-5 w-5 text-primary" />
                 </div>
                 <h2 className="text-xl font-bold text-foreground">{selectedPrompt.name}</h2>
               </div>
@@ -999,7 +1666,7 @@ export default function ChatPage() {
                 onClick={() => setSelectedPrompt(null)}
                 className="btn btn-ghost w-10 h-10 p-0"
               >
-                <X className="w-5 h-5" />
+                <XMarkIcon className="h-5 w-5" />
               </button>
             </div>
 
@@ -1040,7 +1707,7 @@ export default function ChatPage() {
                 onClick={handleExecutePrompt}
                 className="btn btn-primary w-full gap-2"
               >
-                <Play className="w-4 h-4" />
+                <PlayIcon className="h-4 w-4" />
                 Execute Prompt
               </button>
             </div>
@@ -1061,7 +1728,7 @@ export default function ChatPage() {
             className="absolute top-4 right-4 z-60 p-3 rounded-lg bg-white/10 hover:bg-white/20 backdrop-blur-sm border border-white/20 transition-all"
             title="Exit fullscreen"
           >
-            <X className="w-6 h-6 text-white" />
+            <XMarkIcon className="w-6 h-6 text-white" />
           </button>
 
           {/* Widget Container */}
@@ -1072,43 +1739,104 @@ export default function ChatPage() {
           </div>
         </div>
       )}
+
+      {/* Voice Mode Overlay */}
+      <VoiceOrbOverlay
+        isOpen={voiceOverlayOpen}
+        onClose={() => {
+          setVoiceOverlayOpen(false);
+          setVoiceModeEnabled(false);
+          setSpokenText('');
+          // Stop any playing audio
+          if (audioRef.current) {
+            audioRef.current.pause();
+            audioRef.current = null;
+          }
+          setLlmState('idle');
+          // Reset greeting flag so greeting plays on next open
+          hasSpokenGreeting.current = false;
+        }}
+        onSendMessage={(text) => {
+          console.log('📤 onSendMessage called with:', text);
+          setLlmState('thinking');
+          handleSend(text);
+        }}
+        onGreet={() => {
+          // Only greet once per session to prevent overlap
+          if (hasSpokenGreeting.current) {
+            setLlmState('listening');
+            return;
+          }
+          hasSpokenGreeting.current = true;
+          // Use localized greeting based on output language
+          const preset = LANG_PRESETS[outputLanguage] || LANG_PRESETS['en'];
+          const greeting = preset.greeting;
+          console.log('👋 onGreet called - playing welcome message in', preset.name);
+          setSpokenText(greeting);
+          setVoiceModeEnabled(true);
+          playTextToSpeech(greeting);
+        }}
+        elevenLabsApiKey={elevenLabsApiKey || ''}
+        llmState={llmState}
+        spokenText={spokenText}
+        displayMode={voiceDisplayMode}
+        onDisplayModeChange={(mode) => {
+          setVoiceDisplayMode(mode);
+          if (mode === 'voice-chat') {
+            setVoiceOverlayOpen(false);
+          }
+        }}
+        onSettingsClick={() => setShowVoiceSettings(true)}
+        inputLanguage={inputLanguage}
+        voiceModeActive={voiceModeEnabled}
+        onInterrupt={() => {
+          // Talk-to-interrupt: stop TTS and switch to listening
+          if (audioRef.current) {
+            audioRef.current.pause();
+            audioRef.current = null;
+          }
+          setSpokenText('');
+          setLlmState('listening');
+        }}
+      />
     </div>
   );
 }
 
 function ChatMessageComponent({ message, tools }: { message: ChatMessage; tools: Tool[] }) {
-  if (message.role === 'tool') return null; // Don't render tool messages directly
-
+  if (message.role === 'tool') return null;
   const isUser = message.role === 'user';
 
   return (
     <div className="flex gap-4 items-start animate-fade-in group">
-      {/* Avatar */}
       {!isUser && (
-        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-primary to-amber-500 flex items-center justify-center flex-shrink-0 shadow-md group-hover:shadow-lg transition-shadow">
-          <Bot className="w-5 h-5 text-white" strokeWidth={2.5} />
+        <div className="h-8 w-8 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0 shadow-md group-hover:shadow-lg transition-shadow">
+          <SparklesIcon className="h-5 w-5 text-white" />
         </div>
       )}
       {isUser && (
-        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-slate-600 to-slate-700 flex items-center justify-center flex-shrink-0 shadow-md group-hover:shadow-lg transition-shadow">
+        <div className="h-8 w-8 rounded-full bg-gradient-to-br from-slate-600 to-slate-700 flex items-center justify-center flex-shrink-0 shadow-md group-hover:shadow-lg transition-shadow">
           <span className="text-white text-sm font-bold">You</span>
         </div>
       )}
-
-      {/* Message Content */}
       <div className="flex-1 min-w-0">
-        {/* Image if present */}
-        {message.image && (
-          <div className="mb-3 rounded-xl overflow-hidden border border-border/50 shadow-sm">
-            <img
-              src={message.image.data}
-              alt={message.image.name}
-              className="max-w-full"
-            />
+        {message.file && (
+          <div className="mb-3 rounded-xl overflow-hidden border border-border/50 shadow-sm max-w-sm">
+            {message.file.type.startsWith('image/') ? (
+              <img src={message.file.data} alt={message.file.name} className="max-w-full" />
+            ) : (
+              <div className="p-4 bg-muted/30 flex items-center gap-3">
+                <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                  <DocumentTextIcon className="h-5 w-5 text-primary" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-foreground truncate">{message.file.name}</p>
+                  <p className="text-xs text-muted-foreground">{message.file.type}</p>
+                </div>
+              </div>
+            )}
           </div>
         )}
-
-        {/* Text content with markdown rendering */}
         {message.content && (
           <div className="text-sm leading-relaxed mb-4">
             {isUser ? (
@@ -1118,12 +1846,10 @@ function ChatMessageComponent({ message, tools }: { message: ChatMessage; tools:
             )}
           </div>
         )}
-
-        {/* Tool Calls - ChatGPT-style cards */}
         {message.toolCalls && message.toolCalls.length > 0 && (
           <div className="space-y-3">
-            {message.toolCalls.map((toolCall) => (
-              <ToolCallComponent key={toolCall.id} toolCall={toolCall} tools={tools} />
+            {message.toolCalls.map((tc: ToolCall) => (
+              <ToolCallComponent key={tc.id} toolCall={tc} tools={tools} />
             ))}
           </div>
         )}
@@ -1136,55 +1862,39 @@ function ToolCallComponent({ toolCall, tools }: { toolCall: ToolCall; tools: Too
   const [showArgs, setShowArgs] = useState(false);
   const tool = tools.find((t) => t.name === toolCall.name);
 
-  // Get widget URI from multiple possible sources
   const componentUri =
     tool?.widget?.route ||
     tool?.outputTemplate ||
     tool?._meta?.['openai/outputTemplate'] ||
     tool?._meta?.['ui/template'];
 
-  // Get result data from toolCall and unwrap if needed
   let widgetData = toolCall.result || toolCall.arguments;
 
-  // Unwrap if response was wrapped by TransformInterceptor
-  // Check if it has the interceptor's structure: { success, data, metadata }
   if (widgetData && typeof widgetData === 'object' &&
     widgetData.success !== undefined && widgetData.data !== undefined) {
-    widgetData = widgetData.data; // Return the unwrapped data
+    widgetData = widgetData.data;
   }
 
-  console.log('ToolCallComponent:', {
-    toolName: toolCall.name,
-    componentUri,
-    hasData: !!widgetData,
-    tool
-  });
-
   return (
     <div className="relative group/widget">
-      {/* Widget - No frame, just the widget */}
       {componentUri && widgetData && (
         <div className="rounded-lg overflow-hidden max-w-5xl">
           <WidgetRenderer uri={componentUri} data={widgetData} className="widget-in-chat" />
         </div>
       )}
-
-      {/* 3-dots menu button - positioned absolutely in top-right */}
       <button
         onClick={() => setShowArgs(!showArgs)}
         className="absolute top-2 right-2 w-8 h-8 rounded-lg flex items-center justify-center bg-background/80 backdrop-blur-sm border border-border/50 hover:bg-background hover:border-border transition-all opacity-0 group-hover/widget:opacity-100 shadow-sm z-10"
         title="View tool details"
       >
-        <MoreVertical className="w-4 h-4 text-muted-foreground" />
+        <EllipsisVerticalIcon className="h-4 w-4 text-muted-foreground" />
       </button>
-
-      {/* Arguments Modal/Dropdown - appears when 3-dots clicked */}
       {showArgs && (
         <div className="absolute top-12 right-2 w-96 max-w-[calc(100%-1rem)] bg-card rounded-xl border border-border shadow-2xl p-4 animate-fade-in z-20">
           <div className="flex items-center justify-between mb-3">
             <div className="flex items-center gap-2">
               <div className="w-6 h-6 rounded-md bg-primary/10 flex items-center justify-center">
-                <Wrench className="w-3.5 h-3.5 text-primary" />
+                <WrenchScrewdriverIcon className="w-3.5 h-3.5 text-primary" />
               </div>
               <span className="font-semibold text-sm text-foreground">{toolCall.name}</span>
             </div>
@@ -1192,7 +1902,7 @@ function ToolCallComponent({ toolCall, tools }: { toolCall: ToolCall; tools: Too
               onClick={() => setShowArgs(false)}
               className="w-6 h-6 rounded-md flex items-center justify-center hover:bg-muted transition-colors"
             >
-              <X className="w-4 h-4 text-muted-foreground" />
+              <XMarkIcon className="h-4 w-4 text-muted-foreground" />
             </button>
           </div>
           <div>
@@ -1206,4 +1916,3 @@ function ToolCallComponent({ toolCall, tools }: { toolCall: ToolCall; tools: Too
     </div>
   );
 }
-