nitrostack 1.0.65 → 1.0.66

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

@@ -0,0 +1,1133 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { useStudioStore } from '@/lib/store';
+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,
+  Save,
+  X,
+  Sparkles,
+  FileText,
+  Play,
+  ExternalLink,
+  Info,
+  MoreVertical
+} from 'lucide-react';
+
+export default function ChatPage() {
+  const {
+    chatMessages,
+    addChatMessage,
+    clearChat,
+    currentProvider,
+    setCurrentProvider,
+    currentImage,
+    setCurrentImage,
+    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 [fullscreenWidget, setFullscreenWidget] = useState<{ uri: string, data: any } | null>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    loadTools();
+    loadPrompts();
+
+    // Check if there's a suggested message from localStorage
+    if (typeof window !== 'undefined') {
+      const chatInput = window.localStorage.getItem('chatInput');
+      if (chatInput) {
+        setInputValue(chatInput);
+        window.localStorage.removeItem('chatInput');
+        // Focus after a short delay to ensure component is mounted
+        setTimeout(() => textareaRef.current?.focus(), 100);
+      }
+    }
+  }, []);
+
+  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]);
+
+  // 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();
+      setTools(data.tools || []);
+    } catch (error) {
+      console.error('Failed to load tools:', error);
+    }
+  };
+
+  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
+    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 handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (file.size > 20 * 1024 * 1024) {
+      alert('Image too large (max 20MB)');
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      setCurrentImage({
+        data: event.target?.result as string,
+        type: file.type,
+        name: file.name,
+      });
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleSend = async () => {
+    if (!inputValue.trim() && !currentImage) return;
+
+    const apiKey = localStorage.getItem(`${currentProvider}_api_key`);
+    if (!apiKey) {
+      setShowSettings(true);
+      alert('Please set your API key first');
+      return;
+    }
+
+    const userMessage: ChatMessage = {
+      role: 'user',
+      content: inputValue,
+    };
+
+    if (currentImage) {
+      userMessage.image = currentImage;
+    }
+
+    addChatMessage(userMessage);
+    setInputValue('');
+    setCurrentImage(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.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,
+        apiKey, // LLM API key (OpenAI/Gemini)
+        jwtToken: jwtToken || undefined,
+        mcpApiKey: mcpApiKey || undefined, // MCP server API key
+      });
+
+      // Handle tool calls FIRST (before adding the message)
+      if (response.toolCalls && response.toolResults) {
+        // Attach results to tool calls for widget rendering
+        const toolCallsWithResults = response.toolCalls.map((tc, i) => {
+          const 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 (toolResult.content) {
+            try {
+              const parsed = JSON.parse(toolResult.content);
+              // 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 parsing errors
+            }
+          }
+        }
+
+        // Add tool results to messages
+        const toolResultMessages: ChatMessage[] = [];
+        for (const result of response.toolResults) {
+          addChatMessage(result);
+          toolResultMessages.push(result);
+        }
+
+        // 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.',
+      });
+      setLoading(false);
+    }
+  };
+
+  const continueChatWithToolResults = async (apiKey: string, messages?: Message[]) => {
+    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,
+        apiKey, // LLM API key (OpenAI/Gemini)
+        jwtToken: jwtToken || undefined,
+        mcpApiKey: mcpApiKey || undefined, // MCP server API key
+      });
+
+      if (response.message) {
+        addChatMessage(response.message);
+      }
+
+      // Recursive tool calls
+      if (response.toolCalls && response.toolResults) {
+        const newToolResults: Message[] = [];
+        for (const result of response.toolResults) {
+          addChatMessage(result);
+          newToolResults.push(result);
+        }
+
+        // Build messages for next iteration
+        const nextMessages = [
+          ...(messages || chatMessages),
+          response.message!,
+          ...newToolResults,
+        ];
+        await continueChatWithToolResults(apiKey, nextMessages);
+      }
+    } catch (error) {
+      console.error('Continuation error:', error);
+    }
+  };
+
+  const saveApiKey = (provider: 'openai' | 'gemini') => {
+    const input = document.getElementById(`${provider}-api-key`) as HTMLInputElement;
+    const key = input?.value.trim();
+
+    if (!key || key === '••••••••') {
+      alert('Please enter a valid API key');
+      return;
+    }
+
+    localStorage.setItem(`${provider}_api_key`, key);
+    input.value = '••••••••';
+    alert(`${provider === 'openai' ? 'OpenAI' : 'Gemini'} API key saved`);
+  };
+
+  return (
+    <div className="fixed inset-0 flex flex-col" style={{ left: 'var(--sidebar-width, 15rem)', backgroundColor: '#0a0a0a' }}>
+      {/* Sticky Header */}
+      <div className="sticky top-0 z-10 border-b border-border/50 px-3 sm:px-6 py-3 flex flex-col sm:flex-row items-start sm:items-center justify-between bg-card/80 backdrop-blur-md shadow-sm gap-3 sm:gap-0">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-amber-500 flex items-center justify-center shadow-md">
+            <Bot className="w-5 h-5 text-white" strokeWidth={2.5} />
+          </div>
+          <div>
+            <h1 className="text-lg font-bold text-foreground">AI Chat</h1>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 w-full sm:w-auto">
+          <select
+            value={currentProvider}
+            onChange={(e) => setCurrentProvider(e.target.value as 'openai' | 'gemini')}
+            className="input text-sm px-3 py-1.5 w-full sm:w-28 flex-1 sm:flex-none"
+          >
+            <option value="gemini">Gemini</option>
+            <option value="openai">OpenAI</option>
+          </select>
+          <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}
+            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"
+          >
+            <Trash2 className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      {/* Enhanced Settings Panel */}
+      {showSettings && (
+        <div className="border-b border-border/50 px-3 sm:px-6 py-4 sm:py-5 bg-muted/20 backdrop-blur-md shadow-sm">
+          <div className="max-w-4xl mx-auto">
+            <div className="flex items-start justify-between mb-4">
+              <div>
+                <h3 className="text-sm font-semibold text-foreground flex items-center gap-2">
+                  <Settings className="w-4 h-4" />
+                  API Configuration
+                </h3>
+                <p className="text-xs text-muted-foreground mt-1">Configure your AI provider API keys to enable chat functionality</p>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {/* OpenAI Section */}
+              <div className="card p-4">
+                <div className="flex items-center justify-between mb-3">
+                  <label className="text-xs font-semibold text-foreground flex items-center gap-2">
+                    <div className="w-6 h-6 rounded bg-green-500/10 flex items-center justify-center">
+                      <span className="text-xs font-bold text-green-600">AI</span>
+                    </div>
+                    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>
+      )}
+
+      {/* 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-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>
+
+      {/* ChatGPT-style Input Area - Fixed at bottom */}
+      <div className="sticky bottom-0 border-t border-border/50 bg-background/95 backdrop-blur-md shadow-[0_-2px_10px_rgba(0,0,0,0.1)]">
+        <div className="max-w-5xl mx-auto px-3 sm:px-4 py-3 sm:py-4">
+          {currentImage && (
+            <div className="mb-3 p-3 bg-card rounded-xl flex items-start gap-3 border border-border/50 animate-fade-in">
+              <img
+                src={currentImage.data}
+                alt={currentImage.name}
+                className="w-20 h-20 object-cover rounded-lg border border-border"
+              />
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-foreground truncate">{currentImage.name}</p>
+                <p className="text-xs text-muted-foreground">{currentImage.type}</p>
+              </div>
+              <button
+                onClick={() => setCurrentImage(null)}
+                className="w-7 h-7 rounded-lg flex items-center justify-center bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground transition-all flex-shrink-0"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+          )}
+          <div className="flex items-center gap-2">
+            <input
+              type="file"
+              ref={fileInputRef}
+              onChange={handleImageUpload}
+              accept="image/*"
+              className="hidden"
+            />
+            <button
+              onClick={() => fileInputRef.current?.click()}
+              className="h-11 w-11 rounded-xl flex items-center justify-center bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground transition-all flex-shrink-0"
+              title="Upload image"
+            >
+              <ImageIcon className="w-5 h-5" />
+            </button>
+            <div className="flex-1 relative flex items-center">
+              <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>
+      </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>
+      )}
+
+      {/* 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>
+  );
+}
+
+function ChatMessageComponent({ message, tools }: { message: ChatMessage; tools: Tool[] }) {
+  if (message.role === 'tool') return null; // Don't render tool messages directly
+
+  const isUser = message.role === 'user';
+
+  return (
+    <div className="flex gap-4 items-start animate-fade-in group">
+      {/* Avatar */}
+      {!isUser && (
+        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-primary to-amber-500 flex items-center justify-center flex-shrink-0 shadow-md group-hover:shadow-lg transition-shadow">
+          <Bot className="w-5 h-5 text-white" strokeWidth={2.5} />
+        </div>
+      )}
+      {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 && (
+          <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 with markdown rendering */}
+        {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>
+        )}
+
+        {/* Tool Calls - ChatGPT-style cards */}
+        {message.toolCalls && message.toolCalls.length > 0 && (
+          <div className="space-y-3">
+            {message.toolCalls.map((toolCall) => (
+              <ToolCallComponent key={toolCall.id} toolCall={toolCall} tools={tools} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+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'] ||
+    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
+  });
+
+  return (
+    <div className="relative group/widget">
+      {/* Widget - No frame, just the widget */}
+      {componentUri && widgetData && (
+        <div className="rounded-lg overflow-hidden max-w-5xl">
+          <WidgetRenderer uri={componentUri} data={widgetData} className="widget-in-chat" />
+        </div>
+      )}
+
+      {/* 3-dots menu button - positioned absolutely in top-right */}
+      <button
+        onClick={() => setShowArgs(!showArgs)}
+        className="absolute top-2 right-2 w-8 h-8 rounded-lg flex items-center justify-center bg-background/80 backdrop-blur-sm border border-border/50 hover:bg-background hover:border-border transition-all opacity-0 group-hover/widget:opacity-100 shadow-sm z-10"
+        title="View tool details"
+      >
+        <MoreVertical className="w-4 h-4 text-muted-foreground" />
+      </button>
+
+      {/* Arguments Modal/Dropdown - appears when 3-dots clicked */}
+      {showArgs && (
+        <div className="absolute top-12 right-2 w-96 max-w-[calc(100%-1rem)] bg-card rounded-xl border border-border shadow-2xl p-4 animate-fade-in z-20">
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center gap-2">
+              <div className="w-6 h-6 rounded-md bg-primary/10 flex items-center justify-center">
+                <Wrench className="w-3.5 h-3.5 text-primary" />
+              </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>
+      )}
+    </div>
+  );
+}
+