nitrostack 1.0.55 → 1.0.56

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

@@ -6,20 +6,21 @@ import { api } from '@/lib/api';
 import { WidgetRenderer } from '@/components/WidgetRenderer';
 import { MarkdownRenderer } from '@/components/MarkdownRenderer';
 import type { ChatMessage, Tool, ToolCall, Prompt } from '@/lib/types';
-import { 
-  Bot, 
-  Settings, 
-  Trash2, 
-  Image as ImageIcon, 
-  Send, 
-  Wrench, 
+import {
+  Bot,
+  Settings,
+  Trash2,
+  Image as ImageIcon,
+  Send,
+  Wrench,
   Save,
   X,
   Sparkles,
   FileText,
   Play,
   ExternalLink,
-  Info
+  Info,
+  MoreVertical
 } from 'lucide-react';
 
 export default function ChatPage() {
@@ -34,7 +35,7 @@ export default function ChatPage() {
     tools,
     setTools,
   } = useStudioStore();
-  
+
   // Get jwtToken and apiKey dynamically to ensure we always have the latest value
   const getAuthTokens = () => {
     const state = useStudioStore.getState();
@@ -52,6 +53,7 @@ export default function ChatPage() {
   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);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -59,7 +61,7 @@ export default function ChatPage() {
   useEffect(() => {
     loadTools();
     loadPrompts();
-    
+
     // Check if there's a suggested message from localStorage
     if (typeof window !== 'undefined') {
       const chatInput = window.localStorage.getItem('chatInput');
@@ -91,6 +93,120 @@ export default function ChatPage() {
     }
   }, [inputValue]);
 
+  // Listen for widget fullscreen requests
+  useEffect(() => {
+    const handleFullscreenRequest = (event: CustomEvent) => {
+      const { uri, data } = event.detail;
+      setFullscreenWidget({ uri, data });
+    };
+
+    window.addEventListener('widget-fullscreen-request', handleFullscreenRequest as EventListener);
+    return () => window.removeEventListener('widget-fullscreen-request', handleFullscreenRequest as EventListener);
+  }, []);
+
+  // Listen for widget tool call requests
+  useEffect(() => {
+    let isProcessingToolCall = false;
+
+    const handleToolCall = async (event: any) => {
+      // Prevent multiple simultaneous calls
+      if (isProcessingToolCall) {
+        console.log('⏭️ Skipping duplicate tool call');
+        return;
+      }
+
+      const { toolName, toolArgs } = event.detail;
+      console.log('📞 Chat received tool call from widget:', toolName, toolArgs);
+
+      isProcessingToolCall = true;
+
+      try {
+        // Get current state directly from store to avoid stale closure
+        const currentMessages = useStudioStore.getState().chatMessages;
+        const currentProv = useStudioStore.getState().currentProvider;
+
+        // Directly send the tool call message without showing in input
+        const toolCallMessage = `Use the ${toolName} tool with these arguments: ${JSON.stringify(toolArgs)}`;
+
+        // 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 };
+            });
+
+            if (response.message) {
+              response.message.toolCalls = toolCallsWithResults;
+              addChatMessage(response.message);
+            }
+
+            // Add tool results
+            const toolResultMessages: ChatMessage[] = [];
+            for (const result of response.toolResults) {
+              addChatMessage(result);
+              toolResultMessages.push(result);
+            }
+
+            // Continue conversation
+            const messagesForContinuation = [
+              ...currentMessages,
+              userMessage,
+              response.message!,
+              ...toolResultMessages,
+            ];
+
+            // Call continueChatWithToolResults
+            await continueChatWithToolResults(apiKey || '', messagesForContinuation);
+          } else if (response.message) {
+            addChatMessage(response.message);
+          }
+
+          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);
+      }
+    };
+
+    window.addEventListener('widget-tool-call', handleToolCall);
+    return () => window.removeEventListener('widget-tool-call', handleToolCall);
+  }, []); // Empty dependency array - only register once
+
   const loadTools = async () => {
     try {
       const data = await api.getTools();
@@ -111,43 +227,43 @@ export default function ChatPage() {
 
   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 
+            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,
@@ -216,38 +332,38 @@ export default function ChatPage() {
 
     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.image) {
         //   cleaned.image = msg.image;
         // }
-        
+
         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: cleanedMessages,
@@ -261,13 +377,13 @@ export default function ChatPage() {
         // Attach results to tool calls for widget rendering
         const toolCallsWithResults = response.toolCalls.map((tc, i) => {
           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;
@@ -276,19 +392,19 @@ export default function ChatPage() {
               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];
@@ -331,7 +447,7 @@ export default function ChatPage() {
           addChatMessage(response.message);
         }
       }
-      
+
       // Set loading to false AFTER all async operations complete
       setLoading(false);
     } catch (error) {
@@ -348,31 +464,31 @@ export default function ChatPage() {
     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: cleanedMessages,
@@ -392,7 +508,7 @@ export default function ChatPage() {
           addChatMessage(result);
           newToolResults.push(result);
         }
-        
+
         // Build messages for next iteration
         const nextMessages = [
           ...(messages || chatMessages),
@@ -421,7 +537,7 @@ export default function ChatPage() {
   };
 
   return (
-    <div className="fixed inset-0 flex flex-col bg-background" style={{ left: 'var(--sidebar-width, 15rem)' }}>
+    <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">
         <div className="flex items-center gap-3">
@@ -442,19 +558,18 @@ export default function ChatPage() {
             <option value="gemini">Gemini</option>
             <option value="openai">OpenAI</option>
           </select>
-          <button 
-            onClick={() => setShowSettings(!showSettings)} 
-            className={`w-8 h-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'
-            }`}
+          <button
+            onClick={() => setShowSettings(!showSettings)}
+            className={`w-8 h-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" />
           </button>
-          <button 
-            onClick={clearChat} 
+          <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"
             title="Clear chat"
           >
@@ -476,8 +591,8 @@ export default function ChatPage() {
                 <p className="text-xs text-muted-foreground mt-1">Configure your AI provider API keys to enable chat functionality</p>
               </div>
             </div>
-            
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+
+            <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">
@@ -487,9 +602,9 @@ export default function ChatPage() {
                     </div>
                     OpenAI API Key
                   </label>
-                  <a 
-                    href="https://platform.openai.com/api-keys" 
-                    target="_blank" 
+                  <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"
                   >
@@ -497,11 +612,11 @@ export default function ChatPage() {
                   </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-..." 
+                  <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" />
@@ -518,9 +633,9 @@ export default function ChatPage() {
                       </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" 
+                    <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"
                     >
@@ -539,9 +654,9 @@ export default function ChatPage() {
                     </div>
                     Gemini API Key
                   </label>
-                  <a 
-                    href="https://aistudio.google.com/app/apikey" 
-                    target="_blank" 
+                  <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"
                   >
@@ -549,11 +664,11 @@ export default function ChatPage() {
                   </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..." 
+                  <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" />
@@ -570,9 +685,9 @@ export default function ChatPage() {
                       </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" 
+                    <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"
                     >
@@ -588,7 +703,7 @@ export default function ChatPage() {
               <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. 
+                  <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>
@@ -599,14 +714,14 @@ export default function ChatPage() {
 
       {/* ChatGPT-style Messages Container - ONLY this scrolls */}
       <div className="flex-1 overflow-y-auto overflow-x-hidden">
-        <div className="max-w-3xl mx-auto px-4 py-6 space-y-6 min-h-full">
+        <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-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.
@@ -621,7 +736,7 @@ export default function ChatPage() {
                     <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
@@ -716,7 +831,7 @@ export default function ChatPage() {
 
       {/* 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-3xl mx-auto px-3 sm:px-4 py-3 sm:py-4">
+        <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
@@ -773,8 +888,8 @@ export default function ChatPage() {
                 }}
               />
             </div>
-            <button 
-              onClick={handleSend} 
+            <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)"
@@ -782,7 +897,7 @@ export default function ChatPage() {
               <Send className="w-5 h-5" strokeWidth={2.5} />
             </button>
           </div>
-         
+
         </div>
       </div>
 
@@ -845,17 +960,41 @@ export default function ChatPage() {
                 </div>
               )}
 
-              <button 
-                onClick={handleExecutePrompt} 
+              <button
+                onClick={handleExecutePrompt}
                 className="btn btn-primary w-full gap-2"
               >
                 <Play className="w-4 h-4" />
                 Execute Prompt
-            </button>
+              </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"
+          >
+            <X 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>
   );
@@ -892,7 +1031,7 @@ function ChatMessageComponent({ message, tools }: { message: ChatMessage; tools:
             />
           </div>
         )}
-        
+
         {/* Text content with markdown rendering */}
         {message.content && (
           <div className="text-sm leading-relaxed mb-4">
@@ -920,73 +1059,71 @@ 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) {
+  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, 
+  console.log('ToolCallComponent:', {
+    toolName: toolCall.name,
+    componentUri,
     hasData: !!widgetData,
-    tool 
+    tool
   });
 
   return (
-    <div className="rounded-2xl overflow-hidden border border-border/50 bg-card/50 backdrop-blur-sm shadow-sm hover:shadow-md transition-shadow">
-      {/* Tool Header - Collapsible */}
+    <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="w-full flex items-center justify-between px-4 py-3 hover:bg-muted/30 transition-colors group"
+        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"
       >
-        <div className="flex items-center gap-2">
-          <div className="w-6 h-6 rounded-md bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
-            <Wrench className="w-3.5 h-3.5 text-primary" />
-          </div>
-          <span className="font-semibold text-sm text-foreground">{toolCall.name}</span>
-        </div>
-        <svg 
-          className={`w-4 h-4 text-muted-foreground transition-transform ${showArgs ? 'rotate-180' : ''}`}
-          fill="none" 
-          viewBox="0 0 24 24" 
-          stroke="currentColor"
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-        </svg>
+        <MoreVertical className="w-4 h-4 text-muted-foreground" />
       </button>
 
-      {/* Arguments - Expandable */}
+      {/* Arguments Modal/Dropdown - appears when 3-dots clicked */}
       {showArgs && (
-        <div className="px-4 pb-3 border-t border-border/30 pt-3 animate-fade-in">
-          <p className="text-xs font-medium text-muted-foreground mb-2">Arguments:</p>
-          <pre className="p-3 rounded-lg overflow-auto bg-background/50 border border-border/30 font-mono text-xs text-foreground max-h-40">
-            {JSON.stringify(toolCall.arguments, null, 2)}
-          </pre>
-        </div>
-      )}
-
-      {/* Widget - ChatGPT-style embedded card */}
-      {componentUri && widgetData && (
-        <div className="border-t border-border/30 pt-3 flex justify-center">
-          <div className="rounded-lg overflow-hidden bg-background" style={{
-            width: 'fit-content',
-            maxWidth: '100%',
-            height: '450px',
-          }}>
-            <WidgetRenderer uri={componentUri} data={widgetData} className="widget-in-chat" />
+        <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" />
+              </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"
+            >
+              <X className="w-4 h-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>
       )}