nitrostack 1.0.15 → 1.0.16

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

@@ -4,7 +4,7 @@ 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 type { ChatMessage, Tool, ToolCall, Prompt } from '@/lib/types';
 import { 
   Bot, 
   Settings, 
@@ -13,7 +13,12 @@ import {
   Send, 
   Wrench, 
   Save,
-  X
+  X,
+  Sparkles,
+  FileText,
+  Play,
+  ExternalLink,
+  Info
 } from 'lucide-react';
 
 export default function ChatPage() {
@@ -25,26 +30,55 @@ export default function ChatPage() {
     setCurrentProvider,
     currentImage,
     setCurrentImage,
-    jwtToken,
-    apiKey: mcpApiKey, // Rename to avoid conflict with LLM apiKey
     tools,
     setTools,
   } = useStudioStore();
+  
+  // Get jwtToken and apiKey dynamically to ensure we always have the latest value
+  const getAuthTokens = () => {
+    const state = useStudioStore.getState();
+    // Check both jwtToken and OAuth token (from OAuth tab)
+    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 messagesEndRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
     loadTools();
+    loadPrompts();
   }, []);
 
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   }, [chatMessages]);
 
+  // Auto-focus textarea on mount and after sending
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, [chatMessages, loading]);
+
+  // 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]);
+
   const loadTools = async () => {
     try {
       const data = await api.getTools();
@@ -54,6 +88,38 @@ export default function ChatPage() {
     }
   };
 
+  const loadPrompts = async () => {
+    try {
+      const data = await api.getPrompts();
+      setPrompts(data.prompts || []);
+    } catch (error) {
+      console.error('Failed to load prompts:', error);
+    }
+  };
+
+  const handleExecutePrompt = async () => {
+    if (!selectedPrompt) return;
+    
+    // Close modal
+    setSelectedPrompt(null);
+    
+    // Build the user message from prompt
+    let messageContent = `Execute prompt: ${selectedPrompt.name}`;
+    if (Object.keys(promptArgs).length > 0) {
+      messageContent += `\nArguments: ${JSON.stringify(promptArgs, null, 2)}`;
+    }
+    
+    // Set input value so user can see what's being sent
+    setInputValue(messageContent);
+    setPromptArgs({});
+    
+    // Focus textarea and trigger send
+    setTimeout(() => {
+      textareaRef.current?.focus();
+      handleSend();
+    }, 100);
+  };
+
   const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
@@ -124,7 +190,11 @@ export default function ChatPage() {
         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));
       
@@ -229,6 +299,9 @@ export default function ChatPage() {
       // 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 = {
@@ -248,6 +321,7 @@ export default function ChatPage() {
       });
       
       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,
@@ -297,16 +371,15 @@ export default function ChatPage() {
   };
 
   return (
-    <div className="h-screen flex flex-col bg-background">
-      {/* Header */}
-      <div className="border-b border-border p-6 flex items-center justify-between bg-card">
+    <div className="fixed inset-0 flex flex-col bg-background" style={{ left: 'var(--sidebar-width, 15rem)' }}>
+      {/* Sticky Header */}
+      <div className="sticky top-0 z-10 border-b border-border/50 px-6 py-3 flex items-center justify-between bg-card/80 backdrop-blur-md shadow-sm">
         <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-amber-500 flex items-center justify-center">
-            <Bot className="w-6 h-6 text-black" />
+          <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-2xl font-bold text-foreground">AI Chat</h1>
-            <p className="text-muted-foreground text-sm">Chat with tools integration</p>
+            <h1 className="text-lg font-bold text-foreground">AI Chat</h1>
           </div>
         </div>
 
@@ -314,128 +387,427 @@ export default function ChatPage() {
           <select
             value={currentProvider}
             onChange={(e) => setCurrentProvider(e.target.value as 'openai' | 'gemini')}
-            className="input w-36"
+            className="input text-sm px-3 py-1.5 w-28"
           >
             <option value="gemini">Gemini</option>
             <option value="openai">OpenAI</option>
           </select>
           <button 
             onClick={() => setShowSettings(!showSettings)} 
-            className={`btn ${showSettings ? 'btn-primary' : 'btn-secondary'}`}
+            className={`w-8 h-8 rounded-lg flex items-center justify-center transition-all ${
+              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} className="btn btn-secondary">
+          <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"
+            title="Clear chat"
+          >
             <Trash2 className="w-4 h-4" />
           </button>
         </div>
       </div>
 
-      {/* Settings Panel */}
+      {/* Enhanced Settings Panel */}
       {showSettings && (
-        <div className="border-b border-border p-6 bg-muted/30">
-          <h3 className="font-semibold mb-4 text-foreground flex items-center gap-2">
-            <Settings className="w-5 h-5" />
-            API Keys
-          </h3>
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="text-sm mb-2 block text-foreground font-medium">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 className="w-4 h-4 mr-2" />
-                  Save
-                </button>
+        <div className="border-b border-border/50 px-6 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>
             </div>
-            <div>
-              <label className="text-sm mb-2 block text-foreground font-medium">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 className="w-4 h-4 mr-2" />
-                  Save
-                </button>
+            
+            <div className="grid grid-cols-1 lg: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 <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>
+                    <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>
+
+              {/* 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 <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>
+
+            {/* 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.
+                </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-3xl 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.
+                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" />
+                    <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="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>
+                          <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="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>
+                  <div className="flex-1 bg-card/50 backdrop-blur-sm rounded-2xl 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-border p-6 bg-card">
-        {currentImage && (
-          <div className="mb-3 relative inline-block">
-            <img
-              src={currentImage.data}
-              alt="Upload preview"
-              className="h-24 rounded-lg border border-border shadow-sm"
+      {/* 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-4 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" />
+              </button>
+            </div>
+          )}
+          <div className="flex items-center gap-2">
+            <input
+              type="file"
+              ref={fileInputRef}
+              onChange={handleImageUpload}
+              accept="image/*"
+              className="hidden"
             />
             <button
-              onClick={() => setCurrentImage(null)}
-              className="absolute -top-2 -right-2 bg-destructive text-white rounded-full w-7 h-7 flex items-center justify-center hover:bg-destructive/90 transition-colors shadow-md"
+              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"
             >
-              <X className="w-4 h-4" />
+              <ImageIcon className="w-5 h-5" />
+            </button>
+            <div className="flex-1 relative flex items-center">
+              <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"
+                rows={1}
+                style={{
+                  minHeight: '44px',
+                  maxHeight: '200px',
+                  overflow: 'hidden',
+                }}
+              />
+            </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)"
+            >
+              <Send className="w-5 h-5" strokeWidth={2.5} />
             </button>
           </div>
-        )}
-        <div className="flex gap-3">
-          <input
-            type="file"
-            ref={fileInputRef}
-            onChange={handleImageUpload}
-            accept="image/*"
-            className="hidden"
-          />
-          <button
-            onClick={() => fileInputRef.current?.click()}
-            className="btn btn-secondary"
-            title="Upload image"
-          >
-            <ImageIcon className="w-5 h-5" />
-          </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 gap-2" disabled={loading}>
-            <Send className="w-4 h-4" />
-            Send
-          </button>
+          <p className="text-xs text-muted-foreground/60 text-center mt-2">
+            NitroStudio can make mistakes. Check important info.
+          </p>
         </div>
       </div>
+
+      {/* 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-2xl 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>
+                <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"
+              >
+                <X className="w-5 h-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"
+              >
+                <Play className="w-4 h-4" />
+                Execute Prompt
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
@@ -446,22 +818,42 @@ function ChatMessageComponent({ message, tools }: { message: ChatMessage; tools:
   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/10 border-primary/30' : 'bg-card'} rounded-2xl p-5 border border-border shadow-sm`}>
+    <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>
+      )}
+      {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">
+          <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 && (
-          <img
-            src={message.image.data}
-            alt={message.image.name}
-            className="rounded-lg mb-3 max-w-full border border-border"
-          />
+          <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"
+            />
+          </div>
+        )}
+        
+        {/* Text content */}
+        {message.content && (
+          <div className="text-sm text-foreground/90 leading-relaxed whitespace-pre-wrap mb-4">
+            {message.content}
+          </div>
         )}
-        <p className="text-sm whitespace-pre-wrap text-foreground">{message.content}</p>
 
-        {/* Tool Calls */}
+        {/* Tool Calls - ChatGPT-style cards */}
         {message.toolCalls && message.toolCalls.length > 0 && (
-          <div className="mt-4 space-y-3">
+          <div className="space-y-3">
             {message.toolCalls.map((toolCall) => (
               <ToolCallComponent key={toolCall.id} toolCall={toolCall} tools={tools} />
             ))}
@@ -473,6 +865,7 @@ 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
@@ -500,28 +893,46 @@ function ToolCallComponent({ toolCall, tools }: { toolCall: ToolCall; tools: Too
   });
 
   return (
-    <div className="rounded-lg p-4 border border-border bg-muted/30">
-      <div className="flex items-center gap-2 mb-3">
-        <Wrench className="w-4 h-4 text-primary" />
-        <span className="font-semibold text-sm text-foreground">{toolCall.name}</span>
-      </div>
+    <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 */}
+      <button
+        onClick={() => setShowArgs(!showArgs)}
+        className="w-full flex items-center justify-between px-4 py-3 hover:bg-muted/30 transition-colors group"
+      >
+        <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>
+      </button>
+
+      {/* Arguments - Expandable */}
+      {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>
+      )}
 
-      {/* Arguments */}
-      <details className="text-xs text-muted-foreground">
-        <summary className="cursor-pointer hover:text-foreground transition-colors font-medium">
-          Arguments
-        </summary>
-        <pre className="mt-2 p-3 rounded-lg overflow-auto bg-background border border-border font-mono text-foreground">
-          {JSON.stringify(toolCall.arguments, null, 2)}
-        </pre>
-      </details>
-
-      {/* Widget if available */}
+      {/* Widget - ChatGPT-style embedded card */}
       {componentUri && widgetData && (
-        <div className="mt-3 rounded-lg overflow-hidden border border-border bg-background shadow-inner" style={{
-          height: '320px'
-        }}>
-          <WidgetRenderer uri={componentUri} data={widgetData} />
+        <div className="border-t border-border/30">
+          <div className="rounded-lg overflow-hidden bg-background" style={{
+            height: '400px'
+          }}>
+            <WidgetRenderer uri={componentUri} data={widgetData} />
+          </div>
         </div>
       )}
     </div>