nitrostack 1.0.71 → 1.0.72

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

@@ -4,7 +4,34 @@ import { useEffect, useRef, useState } from 'react';
 import { useStudioStore } from '@/lib/store';
 import { api } from '@/lib/api';
 import { WidgetRenderer } from '@/components/WidgetRenderer';
-import type { ChatMessage, Tool, ToolCall } from '@/lib/types';
+import { MarkdownRenderer } from '@/components/MarkdownRenderer';
+import { VoiceOrbOverlay } from '@/components/VoiceOrbOverlay';
+import type { ChatMessage, Tool, ToolCall, Prompt } from '@/lib/types';
+import {
+  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 {
@@ -13,26 +40,154 @@ export default function ChatPage() {
     clearChat,
     currentProvider,
     setCurrentProvider,
-    currentImage,
-    setCurrentImage,
-    jwtToken,
+    currentFile,
+    setCurrentFile,
     tools,
     setTools,
+    elevenLabsApiKey,
+    setElevenLabsApiKey
   } = useStudioStore();
 
+  // ... (existing helper methods)
+  const getAuthTokens = () => {
+    const state = useStudioStore.getState();
+    const jwtToken = state.jwtToken || state.oauthState?.currentToken;
+    return {
+      jwtToken,
+      mcpApiKey: state.apiKey,
+    };
+  };
+
   const [inputValue, setInputValue] = useState('');
   const [loading, setLoading] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
+  const [prompts, setPrompts] = useState<Prompt[]>([]);
+  const [selectedPrompt, setSelectedPrompt] = useState<Prompt | null>(null);
+  const [promptArgs, setPromptArgs] = useState<Record<string, string>>({});
+  const [fullscreenWidget, setFullscreenWidget] = useState<{ uri: string, data: any } | null>(null);
+
+  // Voice Mode State
+  const [isRecording, setIsRecording] = useState(false);
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const [voiceModeEnabled, setVoiceModeEnabled] = useState(false);
+  const [voiceOverlayOpen, setVoiceOverlayOpen] = useState(false);
+  const [spokenText, setSpokenText] = useState('');
+  const recognitionRef = useRef<any>(null);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const initialToolExecuted = useRef(false);
+
+  // ... (existing useEffects)
 
+  // Initialize Speech Recognition
   useEffect(() => {
-    loadTools();
+    if (typeof window !== 'undefined' && window.webkitSpeechRecognition) {
+      const recognition = new window.webkitSpeechRecognition();
+      recognition.continuous = false;
+      recognition.interimResults = false;
+      recognition.lang = 'en-US';
+
+      recognition.onresult = (event: any) => {
+        const transcript = event.results[0][0].transcript;
+        setInputValue((prev) => prev + (prev ? ' ' : '') + transcript);
+        setIsRecording(false);
+        // Optional: Auto-send if desired, but letting user review is safer for code
+      };
+
+      recognition.onerror = (event: any) => {
+        console.error('Speech recognition error', event.error);
+        setIsRecording(false);
+      };
+
+      recognition.onend = () => {
+        setIsRecording(false);
+      };
+
+      recognitionRef.current = recognition;
+    }
   }, []);
 
+  // Text-to-Speech logic for new messages
   useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [chatMessages]);
+    if (!voiceModeEnabled || !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;
+      }
+      playTextToSpeech(lastMessage.content);
+    }
+  }, [chatMessages, voiceModeEnabled, elevenLabsApiKey]);
+
+
+  const toggleRecording = () => {
+    if (isRecording) {
+      recognitionRef.current?.stop();
+    } else {
+      if (!recognitionRef.current) {
+        alert('Speech recognition not supported in this browser.');
+        return;
+      }
+      setVoiceModeEnabled(true); // Enable voice mode if they use mic
+      recognitionRef.current.start();
+      setIsRecording(true);
+    }
+  };
+
+  const playTextToSpeech = async (text: string) => {
+    if (!elevenLabsApiKey) return;
+
+    try {
+      setIsSpeaking(true);
+      const voiceId = '21m00Tcm4TlvDq8ikWAM'; // Rachel - popular default
+      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: 'eleven_monolingual_v1',
+          voice_settings: {
+            stability: 0.5,
+            similarity_boost: 0.75,
+          },
+        }),
+      });
+
+      if (!response.ok) throw new Error('TTS failed');
+
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      const audio = new Audio(url);
+
+      audio.onended = () => {
+        setIsSpeaking(false);
+        URL.revokeObjectURL(url);
+      };
+
+      audioRef.current = audio;
+      audio.play();
+    } catch (error) {
+      console.error('TTS Error:', error);
+      setIsSpeaking(false);
+    }
+  };
+
+  const stopSpeaking = () => {
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current = null;
+    }
+    setIsSpeaking(false);
+  };
 
   const loadTools = async () => {
     try {
@@ -43,7 +198,146 @@ export default function ChatPage() {
     }
   };
 
-  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const loadPrompts = async () => {
+    try {
+      const data = await api.getPrompts();
+      setPrompts(data.prompts || []);
+    } catch (error) {
+      console.error('Failed to load prompts:', error);
+    }
+  };
+
+  const checkAndRunInitialTool = async () => {
+    // Find initial tool using specific metadata key
+    const initialTool = tools.find(t => t._meta?.['tool/initial'] === true);
+    if (!initialTool) return;
+
+    // Check for API keys (Gemini or OpenAI)
+    const geminiKey = localStorage.getItem('gemini_api_key');
+    const openaiKey = localStorage.getItem('openai_api_key');
+    const hasKey = (geminiKey && geminiKey !== '••••••••') || (openaiKey && openaiKey !== '••••••••');
+
+    if (!hasKey) return;
+
+    // Mark as executed immediately to prevent double run
+    initialToolExecuted.current = true;
+    console.log('🚀 Auto-executing initial tool:', initialTool.name);
+
+    // Initial message
+    const autoMsg: ChatMessage = {
+      role: 'user',
+      content: `(Auto) Executing initial tool: ${initialTool.name}`,
+    };
+    addChatMessage(autoMsg);
+    setLoading(true);
+
+    try {
+      const { jwtToken, mcpApiKey } = getAuthTokens();
+      const effectiveToken = jwtToken || useStudioStore.getState().oauthState?.currentToken;
+
+      // Call the tool
+      const result = await api.callTool(
+        initialTool.name,
+        {},
+        effectiveToken,
+        mcpApiKey || undefined
+      );
+
+      // Add assistant message with tool call info
+      const toolCallId = `call_${Date.now()}`;
+      const assistantMsg: ChatMessage = {
+        role: 'assistant',
+        content: `Invoking ${initialTool.name}...`,
+        toolCalls: [{
+          id: toolCallId,
+          name: initialTool.name,
+          arguments: {},
+          result // Attach result here for widget rendering
+        }]
+      };
+      addChatMessage(assistantMsg);
+
+      // Add tool result message
+      const toolResultMsg: ChatMessage = {
+        role: 'tool',
+        content: JSON.stringify(result),
+        toolCallId: toolCallId
+      };
+      addChatMessage(toolResultMsg);
+
+    } catch (error) {
+      console.error('Initial tool execution failed:', error);
+      addChatMessage({
+        role: 'assistant',
+        content: `Failed to execute initial tool ${initialTool.name}: ${error instanceof Error ? error.message : String(error)}`
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleExecutePrompt = async () => {
+    if (!selectedPrompt) return;
+
+    // Close modal
+    const prompt = selectedPrompt;
+    const args = { ...promptArgs };
+    setSelectedPrompt(null);
+    setPromptArgs({});
+
+    // Build user message showing what prompt was executed
+    let userMessageContent = `Execute prompt: ${prompt.name}`;
+    if (Object.keys(args).length > 0) {
+      userMessageContent += `\nArguments: ${JSON.stringify(args, null, 2)}`;
+    }
+
+    // Add user message to chat
+    addChatMessage({
+      role: 'user',
+      content: userMessageContent,
+    });
+
+    setLoading(true);
+
+    try {
+      // Execute the prompt directly via API
+      const result = await api.executePrompt(prompt.name, args);
+
+      // Add the prompt result as an assistant message
+      if (result.messages && result.messages.length > 0) {
+        // Combine all prompt messages into one assistant message
+        const combinedContent = result.messages
+          .map((msg: any) => {
+            const content = typeof msg.content === 'string'
+              ? msg.content
+              : msg.content?.text || JSON.stringify(msg.content);
+            return `[${msg.role.toUpperCase()}]\n${content}`;
+          })
+          .join('\n\n');
+
+        addChatMessage({
+          role: 'assistant',
+          content: combinedContent,
+        });
+      } else {
+        addChatMessage({
+          role: 'assistant',
+          content: 'Prompt executed successfully, but returned no messages.',
+        });
+      }
+    } catch (error) {
+      console.error('Failed to execute prompt:', error);
+      addChatMessage({
+        role: 'assistant',
+        content: `Error executing prompt: ${error instanceof Error ? error.message : 'Unknown error'}`,
+      });
+    } finally {
+      setLoading(false);
+      setTimeout(() => textareaRef.current?.focus(), 100);
+    }
+  };
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
 
@@ -54,7 +348,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,
@@ -64,7 +358,7 @@ export default function ChatPage() {
   };
 
   const handleSend = async () => {
-    if (!inputValue.trim() && !currentImage) return;
+    if (!inputValue.trim() && !currentFile) return;
 
     const apiKey = localStorage.getItem(`${currentProvider}_api_key`);
     if (!apiKey) {
@@ -78,72 +372,180 @@ export default function ChatPage() {
       content: inputValue,
     };
 
-    if (currentImage) {
-      userMessage.image = currentImage;
+    if (currentFile) {
+      userMessage.file = currentFile;
     }
 
     addChatMessage(userMessage);
     setInputValue('');
-    setCurrentImage(null);
+    setCurrentFile(null);
     setLoading(true);
 
     try {
+      const messagesToSend = [...chatMessages, userMessage];
+
+      // Clean messages to ensure they're serializable
+      const cleanedMessages = messagesToSend.map(msg => {
+        const cleaned: any = {
+          role: msg.role,
+          content: msg.content || '',
+        };
+
+        if (msg.toolCalls && msg.toolCalls.length > 0) {
+          cleaned.toolCalls = msg.toolCalls;
+        }
+
+        if (msg.toolCallId) {
+          cleaned.toolCallId = msg.toolCallId;
+        }
+
+        // Skip image property for now (not supported by OpenAI chat completions)
+        if (msg.file) {
+          cleaned.file = msg.file;
+        }
+
+        return cleaned;
+      });
+
+      // Get fresh auth tokens from store
+      const { jwtToken, mcpApiKey } = getAuthTokens();
+
+      console.log('Sending messages to API:', cleanedMessages);
+      console.log('Auth tokens:', { hasJwtToken: !!jwtToken, hasMcpApiKey: !!mcpApiKey });
+      console.log('Original messages:', messagesToSend);
+      console.log('Cleaned messages JSON:', JSON.stringify(cleanedMessages));
+
       const response = await api.chat({
         provider: currentProvider,
-        messages: [...chatMessages, userMessage],
-        apiKey,
+        messages: cleanedMessages,
+        apiKey, // LLM API key (OpenAI/Gemini)
         jwtToken: jwtToken || undefined,
+        mcpApiKey: mcpApiKey || undefined, // MCP server API key
       });
 
-      if (response.message) {
-        addChatMessage(response.message);
-      }
-
-      // Handle tool calls
+      // Handle tool calls FIRST (before adding the message)
       if (response.toolCalls && response.toolResults) {
-        // Check for login token
+        // Attach results to tool calls for widget rendering
+        const toolCallsWithResults = response.toolCalls.map((tc: ToolCall, i: number) => {
+          const toolResult = response.toolResults[i];
+
+          // Parse the result content
+          let parsedResult;
+          if (toolResult.content) {
+            try {
+              parsedResult = JSON.parse(toolResult.content);
+
+              // Unwrap if response was wrapped by TransformInterceptor
+              if (parsedResult.success !== undefined && parsedResult.data !== undefined) {
+                parsedResult = parsedResult.data;
+              }
+            } catch {
+              parsedResult = { content: toolResult.content };
+            }
+          }
+
+          return {
+            ...tc,
+            result: parsedResult,
+          };
+        });
+
+        // Add assistant message with tool calls
+        if (response.message) {
+          response.message.toolCalls = toolCallsWithResults;
+          addChatMessage(response.message);
+        }
+
+        // Extract JWT token from ANY tool response (not just 'login')
         for (let i = 0; i < response.toolCalls.length; i++) {
           const toolCall = response.toolCalls[i];
           const toolResult = response.toolResults[i];
 
-          if (toolCall.name === 'login' && toolResult.content) {
+          if (toolResult.content) {
             try {
               const parsed = JSON.parse(toolResult.content);
-              if (parsed.token) {
-                useStudioStore.getState().setJwtToken(parsed.token);
+              // Check for token in multiple possible locations
+              const token = parsed.token || parsed.access_token || parsed.jwt || parsed.data?.token;
+              if (token) {
+                console.log('🔐 Token received from tool in chat, saving to global state');
+                useStudioStore.getState().setJwtToken(token);
+                break; // Stop after first token found
               }
             } catch (e) {
-              // Ignore
+              // Ignore parsing errors
             }
           }
         }
 
-        // Add tool results
+        // Add tool results to messages
+        const toolResultMessages: ChatMessage[] = [];
         for (const result of response.toolResults) {
           addChatMessage(result);
+          toolResultMessages.push(result);
         }
 
-        // Continue conversation
-        await continueChatWithToolResults(apiKey);
+        // Continue conversation and WAIT for it to complete before allowing new messages
+        // Build the full message history to pass to continuation
+        const messagesForContinuation = [
+          ...chatMessages,
+          response.message!, // Assistant message with tool calls
+          ...toolResultMessages, // Tool result messages
+        ];
+        await continueChatWithToolResults(apiKey, messagesForContinuation);
+      } else {
+        // No tool calls, just add the message
+        if (response.message) {
+          addChatMessage(response.message);
+        }
       }
+
+      // Set loading to false AFTER all async operations complete
+      setLoading(false);
     } catch (error) {
       console.error('Chat error:', error);
       addChatMessage({
         role: 'assistant',
         content: 'Sorry, I encountered an error. Please try again.',
       });
-    } finally {
       setLoading(false);
     }
   };
 
-  const continueChatWithToolResults = async (apiKey: string) => {
+  const continueChatWithToolResults = async (apiKey: string, messages?: ChatMessage[]) => {
     try {
+      // Use provided messages or fall back to store (for recursive calls)
+      const messagesToUse = messages || chatMessages;
+
+      // Get fresh auth tokens from store (token may have been updated by login)
+      const { jwtToken, mcpApiKey } = getAuthTokens();
+
+      // Clean messages before sending
+      const cleanedMessages = messagesToUse.map(msg => {
+        const cleaned: any = {
+          role: msg.role,
+          content: msg.content || '',
+        };
+
+        if (msg.toolCalls && msg.toolCalls.length > 0) {
+          cleaned.toolCalls = msg.toolCalls;
+        }
+
+        if (msg.toolCallId) {
+          cleaned.toolCallId = msg.toolCallId;
+        }
+
+        return cleaned;
+      });
+
+      console.log('Continue with cleaned messages:', JSON.stringify(cleanedMessages));
+      console.log('Continue auth tokens:', { hasJwtToken: !!jwtToken, hasMcpApiKey: !!mcpApiKey });
+
       const response = await api.chat({
         provider: currentProvider,
-        messages: chatMessages,
-        apiKey,
+        messages: cleanedMessages,
+        apiKey, // LLM API key (OpenAI/Gemini)
         jwtToken: jwtToken || undefined,
+        mcpApiKey: mcpApiKey || undefined, // MCP server API key
       });
 
       if (response.message) {
@@ -152,10 +554,19 @@ export default function ChatPage() {
 
       // Recursive tool calls
       if (response.toolCalls && response.toolResults) {
+        const newToolResults: ChatMessage[] = [];
         for (const result of response.toolResults) {
           addChatMessage(result);
+          newToolResults.push(result);
         }
-        await continueChatWithToolResults(apiKey);
+
+        // Build messages for next iteration
+        const nextMessages = [
+          ...(messages || chatMessages),
+          response.message!,
+          ...newToolResults,
+        ];
+        await continueChatWithToolResults(apiKey, nextMessages);
       }
     } catch (error) {
       console.error('Continuation error:', error);
@@ -177,148 +588,599 @@ export default function ChatPage() {
   };
 
   return (
-    <div className="h-screen flex flex-col bg-dark-bg">
-      {/* Header */}
-      <div className="border-b border-dark-border p-4 flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold">🤖 AI Chat</h1>
-          <p className="text-text-secondary text-sm">Chat with tools integration</p>
-        </div>
+    <div className="fixed inset-0 flex flex-col" style={{ left: 'var(--sidebar-width, 15rem)', backgroundColor: '#0a0a0a' }}>
+      {/* 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">
+        <h1 className="text-lg font-semibold text-foreground flex items-center gap-2">
+          AI Chat
+          {voiceModeEnabled && <span className="text-xs bg-primary/20 text-primary px-2 py-0.5 rounded-full animate-pulse">Voice Active</span>}
+        </h1>
+
+        <div className="flex items-center gap-2 w-full sm:w-auto">
+          {/* Voice Output Toggle */}
+          {elevenLabsApiKey && (
+            <button
+              onClick={() => {
+                if (isSpeaking) 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"}
+            >
+              {isSpeaking ? <SpeakerWaveIcon className="h-4 w-4 animate-pulse" /> : <MicrophoneIcon className="h-4 w-4" />}
+            </button>
+          )}
 
-        <div className="flex items-center gap-2">
           <select
             value={currentProvider}
             onChange={(e) => setCurrentProvider(e.target.value as 'openai' | 'gemini')}
-            className="input w-32"
+            className="input text-sm px-3 py-1.5 w-full sm:w-28 flex-1 sm:flex-none"
           >
-            <option value="openai">OpenAI</option>
             <option value="gemini">Gemini</option>
+            <option value="openai">OpenAI</option>
           </select>
-          <button onClick={() => setShowSettings(!showSettings)} className="btn btn-secondary">
-            ⚙️
+          <button
+            onClick={() => setShowSettings(!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"
+          >
+            <Cog6ToothIcon className="h-4 w-4" />
           </button>
-          <button onClick={clearChat} className="btn btn-secondary">
-            🗑️
+          <button
+            onClick={clearChat}
+            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"
+          >
+            <TrashIcon className="h-4 w-4" />
           </button>
         </div>
       </div>
 
-      {/* Settings Panel */}
+      {/* Enhanced Settings Panel */}
       {showSettings && (
-        <div className="border-b border-dark-border p-4 bg-dark-surface">
-          <h3 className="font-medium mb-3">API Keys</h3>
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="text-sm mb-2 block">OpenAI API Key</label>
-              <div className="flex gap-2">
-                <input id="openai-api-key" type="password" className="input flex-1" placeholder="sk-..." />
-                <button onClick={() => saveApiKey('openai')} className="btn btn-primary">
-                  Save
-                </button>
+        <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">
+                  <Cog6ToothIcon className="h-4 w-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>
             </div>
-            <div>
-              <label className="text-sm mb-2 block">Gemini API Key</label>
-              <div className="flex gap-2">
-                <input id="gemini-api-key" type="password" className="input flex-1" placeholder="AIza..." />
-                <button onClick={() => saveApiKey('gemini')} className="btn btn-primary">
-                  Save
-                </button>
+
+            <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>
+                    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 <ArrowTopRightOnSquareIcon 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">
+                    <BookmarkIcon 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">
+                  <InformationCircleIcon 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>
+                    <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 <ArrowTopRightOnSquareIcon className="w-2.5 h-2.5" />
+                    </a>
+                  </div>
+                </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>
+                    </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 <ArrowTopRightOnSquareIcon 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">
+                    <BookmarkIcon 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">
+                  <InformationCircleIcon 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 <ArrowTopRightOnSquareIcon className="w-2.5 h-2.5" />
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Security Notice */}
+            <div className="mt-4 p-3 bg-status-info/5 rounded border border-status-info/10">
+              <div className="flex items-start gap-2">
+                <InformationCircleIcon className="h-4 w-4 text-status-info 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.
+                </div>
+              </div>
+            </div>
+
+            {/* ElevenLabs Voice Section */}
+            <div className="mt-4">
+              <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">Voice Integration</h3>
+              <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-purple-500/10 flex items-center justify-center">
+                      <MicrophoneIcon className="w-3.5 h-3.5 text-purple-600" />
+                    </div>
+                    ElevenLabs API Key
+                  </label>
+                  <a
+                    href="https://elevenlabs.io/api"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-xs text-primary hover:text-primary/80 flex items-center gap-1 transition-colors"
+                  >
+                    Get Key <ArrowTopRightOnSquareIcon className="w-3 h-3" />
+                  </a>
+                </div>
+                <div className="flex gap-2 mb-3">
+                  <input
+                    type="password"
+                    className="input flex-1 text-sm py-2"
+                    placeholder="sk_..."
+                    value={elevenLabsApiKey || ''}
+                    onChange={(e) => setElevenLabsApiKey(e.target.value || null)}
+                  />
+                  {elevenLabsApiKey && (
+                    <button
+                      onClick={() => setElevenLabsApiKey(null)}
+                      className="btn btn-ghost text-destructive text-xs px-3"
+                    >
+                      Clear
+                    </button>
+                  )}
+                </div>
+                <div className="flex items-start gap-2 p-2 bg-purple-500/5 rounded-lg border border-purple-500/10">
+                  <InformationCircleIcon className="w-3 h-3 text-purple-500 mt-0.5 flex-shrink-0" />
+                  <div className="text-xs text-muted-foreground">
+                    <p>
+                      <strong>Enables voice mode:</strong> When configured, a microphone button appears
+                      allowing you to speak your messages and hear AI responses read aloud.
+                    </p>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
       )}
 
-      {/* Messages */}
-      <div className="flex-1 overflow-y-auto p-4 space-y-4">
-        {chatMessages.map((msg, idx) => (
-          <ChatMessageComponent key={idx} message={msg} tools={tools} />
-        ))}
-        {loading && (
-          <div className="flex items-center gap-2 text-text-secondary">
-            <div className="animate-pulse">Thinking...</div>
-          </div>
-        )}
-        <div ref={messagesEndRef} />
+      {/* ChatGPT-style Messages Container - ONLY this scrolls */}
+      <div className="flex-1 overflow-y-auto overflow-x-hidden">
+        <div className="max-w-5xl mx-auto px-4 py-6 space-y-6 min-h-full">
+          {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 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">
+                    <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>
+
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                    {prompts.slice(0, 6).map((prompt) => (
+                      <button
+                        key={prompt.name}
+                        onClick={() => {
+                          setSelectedPrompt(prompt);
+                          setPromptArgs({});
+                        }}
+                        className="card card-hover p-4 text-left group transition-all hover:scale-[1.02]"
+                      >
+                        <div className="flex items-start gap-3">
+                          <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">
+                              {prompt.name}
+                            </h4>
+                            <p className="text-xs text-muted-foreground line-clamp-2">
+                              {prompt.description || 'No description'}
+                            </p>
+                            {prompt.arguments && prompt.arguments.length > 0 && (
+                              <span className="badge badge-secondary text-xs mt-2 inline-block">
+                                {prompt.arguments.length} arg{prompt.arguments.length !== 1 ? 's' : ''}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+
+                  {prompts.length > 6 && (
+                    <p className="text-xs text-muted-foreground text-center mt-4">
+                      ...and {prompts.length - 6} more. Visit the Prompts tab to see all.
+                    </p>
+                  )}
+                </div>
+              )}
+
+              {/* Suggestion Cards */}
+              <div className="w-full max-w-2xl mt-8">
+                <p className="text-sm text-muted-foreground mb-3">Or try asking:</p>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  {[
+                    'What tools are available?',
+                    'Show me the health status',
+                    'List all resources',
+                    'Help me get started'
+                  ].map((suggestion) => (
+                    <button
+                      key={suggestion}
+                      onClick={() => {
+                        setInputValue(suggestion);
+                        setTimeout(() => textareaRef.current?.focus(), 100);
+                      }}
+                      className="card card-hover p-3 text-left text-sm text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      "{suggestion}"
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ) : (
+            <>
+              {chatMessages.map((msg, idx) => (
+                <ChatMessageComponent key={idx} message={msg} tools={tools} />
+              ))}
+              {loading && (
+                <div className="flex gap-4 items-start animate-fade-in">
+                  <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 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>
+                        <span className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '0.15s' }}></span>
+                        <span className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '0.3s' }}></span>
+                      </div>
+                      <span className="text-sm text-muted-foreground font-medium">Thinking...</span>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+          <div ref={messagesEndRef} />
+        </div>
       </div>
 
-      {/* Input */}
-      <div className="border-t border-dark-border p-4">
-        {currentImage && (
-          <div className="mb-2 relative inline-block">
-            <img
-              src={currentImage.data}
-              alt="Upload preview"
-              className="h-20 rounded-lg border border-dark-border"
-            />
-            <button
-              onClick={() => setCurrentImage(null)}
-              className="absolute -top-2 -right-2 bg-error text-white rounded-full w-6 h-6 flex items-center justify-center text-xs"
-            >
-              ✕
-            </button>
+      {/* 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-4xl mx-auto px-4 pb-6">
+          <div className={`
+             rounded-xl border shadow-sm p-4 relative transition-all duration-300
+             ${isRecording
+              ? 'bg-primary/5 border-primary ring-1 ring-primary/50'
+              : 'bg-card border-border focus-within:ring-2 focus-within:ring-primary/20'
+            }
+          `}>
+            {isRecording && (
+              <div className="absolute -top-10 left-1/2 -translate-x-1/2 flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-full text-sm font-medium animate-bounce shadow-lg">
+                <MicrophoneIcon className="w-4 h-4" />
+                Listening...
+              </div>
+            )}
+
+            <div className="flex items-end gap-2">
+              <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 text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors"
+                title="Attach file (max 20MB)"
+              >
+                <PhotoIcon className="h-5 w-5" />
+              </button>
+
+              <textarea
+                ref={textareaRef}
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    handleSend();
+                  }
+                }}
+                placeholder={isRecording ? "Listening..." : "Message Nitro..."}
+                className="flex-1 bg-transparent border-0 focus:ring-0 resize-none p-2 min-h-[44px] max-h-[200px]"
+                rows={1}
+                disabled={loading || isRecording}
+              />
+
+              {/* Microphone button - only show if ElevenLabs API key is configured */}
+              {elevenLabsApiKey && (
+                <button
+                  onClick={() => setVoiceOverlayOpen(true)}
+                  className="p-2 text-muted-foreground hover:text-primary hover:bg-primary/10 rounded-lg transition-colors"
+                  title="Voice mode"
+                >
+                  <MicrophoneIcon className="h-5 w-5" />
+                </button>
+              )}
+
+              {/* Send button */}
+              <button
+                onClick={handleSend}
+                disabled={loading || (!inputValue.trim() && !currentFile)}
+                className="p-2 text-primary hover:bg-primary/10 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                title="Send message"
+              >
+                <PaperAirplaneIcon className="h-5 w-5" />
+              </button>
+            </div>
           </div>
-        )}
-        <div className="flex gap-2">
-          <input
-            type="file"
-            ref={fileInputRef}
-            onChange={handleImageUpload}
-            accept="image/*"
-            className="hidden"
-          />
-          <button
-            onClick={() => fileInputRef.current?.click()}
-            className="btn btn-secondary"
-          >
-            🖼️
-          </button>
-          <textarea
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            onKeyDown={(e) => {
-              if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
-                handleSend();
-              }
-            }}
-            placeholder="Type a message... (Cmd/Ctrl + Enter to send)"
-            className="input flex-1 resize-none"
-            rows={2}
-          />
-          <button onClick={handleSend} className="btn btn-primary px-6" disabled={loading}>
-            Send
-          </button>
+
+          {/* Prompt Executor Modal */}
+          {selectedPrompt && (
+            <div
+              className="fixed inset-0 z-50 flex items-center justify-center animate-fade-in"
+              style={{ backgroundColor: 'rgba(0, 0, 0, 0.85)' }}
+              onClick={() => setSelectedPrompt(null)}
+            >
+              <div
+                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="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>
+                  <button
+                    onClick={() => setSelectedPrompt(null)}
+                    className="btn btn-ghost w-10 h-10 p-0"
+                  >
+                    <XMarkIcon className="h-5 w-5" />
+                  </button>
+                </div>
+
+                <p className="text-sm text-muted-foreground mb-6">
+                  {selectedPrompt.description || 'No description'}
+                </p>
+
+                <div>
+                  {selectedPrompt.arguments && selectedPrompt.arguments.length > 0 ? (
+                    selectedPrompt.arguments.map((arg) => (
+                      <div key={arg.name} className="mb-4">
+                        <label className="block text-sm font-medium text-foreground mb-2">
+                          {arg.name}
+                          {arg.required && <span className="text-destructive ml-1">*</span>}
+                        </label>
+                        <input
+                          type="text"
+                          className="input"
+                          value={promptArgs[arg.name] || ''}
+                          onChange={(e) =>
+                            setPromptArgs({ ...promptArgs, [arg.name]: e.target.value })
+                          }
+                          required={arg.required}
+                          placeholder={arg.description || `Enter ${arg.name}`}
+                        />
+                        {arg.description && (
+                          <p className="text-xs text-muted-foreground mt-1">{arg.description}</p>
+                        )}
+                      </div>
+                    ))
+                  ) : (
+                    <div className="bg-muted/30 rounded-lg p-4 mb-4">
+                      <p className="text-sm text-muted-foreground">No arguments required</p>
+                    </div>
+                  )}
+
+                  <button
+                    onClick={handleExecutePrompt}
+                    className="btn btn-primary w-full gap-2"
+                  >
+                    <PlayIcon className="h-4 w-4" />
+                    Execute Prompt
+                  </button>
+                </div>
+
+              </div>
+            </div>
+          )}
+
+          {/* Fullscreen Widget Modal */}
+          {fullscreenWidget && (
+            <div
+              className="fixed inset-0 z-50 flex items-center justify-center"
+              style={{ backgroundColor: 'rgba(0, 0, 0, 0.9)' }}
+            >
+              {/* Close Button */}
+              <button
+                onClick={() => setFullscreenWidget(null)}
+                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"
+              >
+                <XMarkIcon className="w-6 h-6 text-white" />
+              </button>
+
+              {/* Widget Container */}
+              <div className="w-full h-full p-8">
+                <div className="w-full h-full rounded-xl overflow-hidden shadow-2xl">
+                  <WidgetRenderer uri={fullscreenWidget.uri} data={fullscreenWidget.data} className="widget-fullscreen" />
+                </div>
+              </div>
+            </div>
+          )}
         </div>
       </div>
+
+      {/* Voice Mode Overlay */}
+      <VoiceOrbOverlay
+        isOpen={voiceOverlayOpen}
+        onClose={() => {
+          setVoiceOverlayOpen(false);
+          setVoiceModeEnabled(false);
+        }}
+        onTranscript={(text) => setInputValue(text)}
+        onSendMessage={(text) => {
+          setInputValue(text);
+          setVoiceOverlayOpen(false);
+          // Trigger send after a short delay to let state update
+          setTimeout(() => handleSend(), 100);
+        }}
+        elevenLabsApiKey={elevenLabsApiKey || ''}
+        isSpeaking={isSpeaking}
+        spokenText={spokenText}
+      />
     </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 ${isUser ? 'justify-end' : 'justify-start'} animate-fade-in`}
-    >
-      <div className={`max-w-[70%] ${isUser ? 'bg-primary-600' : 'bg-dark-surface'} rounded-2xl p-4 border border-dark-border`}>
-        {message.image && (
-          <img
-            src={message.image.data}
-            alt={message.image.name}
-            className="rounded-lg mb-2 max-w-full"
-          />
+    <div className="flex gap-4 items-start animate-fade-in group">
+      {!isUser && (
+        <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="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>
+      )}
+      <div className="flex-1 min-w-0">
+        {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>
+        )}
+        {message.content && (
+          <div className="text-sm leading-relaxed mb-4">
+            {isUser ? (
+              <div className="whitespace-pre-wrap text-foreground/90">{message.content}</div>
+            ) : (
+              <MarkdownRenderer content={message.content} />
+            )}
+          </div>
         )}
-        <p className="text-sm whitespace-pre-wrap">{message.content}</p>
-
-        {/* Tool Calls */}
         {message.toolCalls && message.toolCalls.length > 0 && (
-          <div className="mt-3 space-y-2">
-            {message.toolCalls.map((toolCall) => (
-              <ToolCallComponent key={toolCall.id} toolCall={toolCall} tools={tools} />
+          <div className="space-y-3">
+            {message.toolCalls.map((tc: ToolCall) => (
+              <ToolCallComponent key={tc.id} toolCall={tc} tools={tools} />
             ))}
           </div>
         )}
@@ -328,63 +1190,60 @@ function ChatMessageComponent({ message, tools }: { message: ChatMessage; tools:
 }
 
 function ToolCallComponent({ toolCall, tools }: { toolCall: ToolCall; tools: Tool[] }) {
+  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'] || 
+
+  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
-  }
 
-  console.log('ToolCallComponent:', { 
-    toolName: toolCall.name, 
-    componentUri, 
-    hasData: !!widgetData,
-    tool 
-  });
+  if (widgetData && typeof widgetData === 'object' &&
+    widgetData.success !== undefined && widgetData.data !== undefined) {
+    widgetData = widgetData.data;
+  }
 
   return (
-    <div className="rounded-lg p-3 border" style={{
-      backgroundColor: 'hsl(var(--muted))',
-      borderColor: 'hsl(var(--border))'
-    }}>
-      <div className="flex items-center gap-2 mb-2">
-        <span>🔧</span>
-        <span className="font-medium text-sm">{toolCall.name}</span>
-      </div>
-
-      {/* Arguments */}
-      <details className="text-xs" style={{ color: 'hsl(var(--muted-foreground))' }}>
-        <summary className="cursor-pointer">Arguments</summary>
-        <pre className="mt-2 p-2 rounded overflow-auto" style={{
-          backgroundColor: 'hsl(var(--background))'
-        }}>
-          {JSON.stringify(toolCall.arguments, null, 2)}
-        </pre>
-      </details>
-
-      {/* Widget if available */}
+    <div className="relative group/widget">
       {componentUri && widgetData && (
-        <div className="mt-3 rounded-lg overflow-hidden border" style={{
-          height: '320px',
-          borderColor: 'hsl(var(--border))',
-          backgroundColor: 'hsl(var(--background))'
-        }}>
-          <WidgetRenderer uri={componentUri} data={widgetData} />
+        <div className="rounded-lg overflow-hidden max-w-5xl">
+          <WidgetRenderer uri={componentUri} data={widgetData} className="widget-in-chat" />
+        </div>
+      )}
+      <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"
+      >
+        <EllipsisVerticalIcon className="h-4 w-4 text-muted-foreground" />
+      </button>
+      {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">
+                <WrenchScrewdriverIcon className="w-3.5 h-3.5 text-primary" />
+              </div>
+              <span className="font-semibold text-sm text-foreground">{toolCall.name}</span>
+            </div>
+            <button
+              onClick={() => setShowArgs(false)}
+              className="w-6 h-6 rounded-md flex items-center justify-center hover:bg-muted transition-colors"
+            >
+              <XMarkIcon className="h-4 w-4 text-muted-foreground" />
+            </button>
+          </div>
+          <div>
+            <p className="text-xs font-medium text-muted-foreground mb-2">Arguments:</p>
+            <pre className="p-3 rounded-lg overflow-auto bg-background border border-border/30 font-mono text-xs text-foreground max-h-60">
+              {JSON.stringify(toolCall.arguments, null, 2)}
+            </pre>
+          </div>
         </div>
       )}
     </div>
   );
 }
-