nitrostack 1.0.16 → 1.0.17

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

@@ -4,6 +4,7 @@ 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, 
@@ -58,6 +59,17 @@ 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');
+      if (chatInput) {
+        setInputValue(chatInput);
+        window.localStorage.removeItem('chatInput');
+        // Focus after a short delay to ensure component is mounted
+        setTimeout(() => textareaRef.current?.focus(), 100);
+      }
+    }
   }, []);
 
   useEffect(() => {
@@ -101,23 +113,61 @@ export default function ChatPage() {
     if (!selectedPrompt) return;
     
     // Close modal
+    const prompt = selectedPrompt;
+    const args = { ...promptArgs };
     setSelectedPrompt(null);
+    setPromptArgs({});
     
-    // 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)}`;
+    // 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)}`;
     }
     
-    // Set input value so user can see what's being sent
-    setInputValue(messageContent);
-    setPromptArgs({});
+    // Add user message to chat
+    addChatMessage({
+      role: 'user',
+      content: userMessageContent,
+    });
+    
+    setLoading(true);
     
-    // Focus textarea and trigger send
-    setTimeout(() => {
-      textareaRef.current?.focus();
-      handleSend();
-    }, 100);
+    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>) => {
@@ -373,7 +423,7 @@ export default function ChatPage() {
   return (
     <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="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} />
@@ -383,18 +433,18 @@ export default function ChatPage() {
           </div>
         </div>
 
-        <div className="flex items-center gap-2">
+        <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-28"
+            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 ${
+            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'
@@ -405,7 +455,7 @@ export default function ChatPage() {
           </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"
+            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" />
@@ -415,7 +465,7 @@ export default function ChatPage() {
 
       {/* Enhanced Settings Panel */}
       {showSettings && (
-        <div className="border-b border-border/50 px-6 py-5 bg-muted/20 backdrop-blur-md shadow-sm">
+        <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>
@@ -427,7 +477,7 @@ export default function ChatPage() {
               </div>
             </div>
             
-            <div className="grid grid-cols-1 lg: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">
@@ -666,7 +716,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-4 py-4">
+        <div className="max-w-3xl 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
@@ -732,9 +782,7 @@ export default function ChatPage() {
               <Send className="w-5 h-5" strokeWidth={2.5} />
             </button>
           </div>
-          <p className="text-xs text-muted-foreground/60 text-center mt-2">
-            NitroStudio can make mistakes. Check important info.
-          </p>
+         
         </div>
       </div>
 
@@ -803,10 +851,11 @@ export default function ChatPage() {
               >
                 <Play className="w-4 h-4" />
                 Execute Prompt
-              </button>
-            </div>
+            </button>
           </div>
+          
         </div>
+      </div>
       )}
     </div>
   );
@@ -844,10 +893,14 @@ function ChatMessageComponent({ message, tools }: { message: ChatMessage; tools:
           </div>
         )}
         
-        {/* Text content */}
+        {/* Text content with markdown rendering */}
         {message.content && (
-          <div className="text-sm text-foreground/90 leading-relaxed whitespace-pre-wrap mb-4">
-            {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>
         )}
 
@@ -927,11 +980,13 @@ function ToolCallComponent({ toolCall, tools }: { toolCall: ToolCall; tools: Too
 
       {/* Widget - ChatGPT-style embedded card */}
       {componentUri && widgetData && (
-        <div className="border-t border-border/30">
+        <div className="border-t border-border/30 pt-3 flex justify-center">
           <div className="rounded-lg overflow-hidden bg-background" style={{
-            height: '400px'
+            width: 'fit-content',
+            maxWidth: '100%',
+            height: '450px',
           }}>
-            <WidgetRenderer uri={componentUri} data={widgetData} />
+            <WidgetRenderer uri={componentUri} data={widgetData} className="widget-in-chat" />
           </div>
         </div>
       )}

package/src/studio/app/layout.tsx

@@ -40,7 +40,7 @@ export default function RootLayout({
         <div className="flex min-h-screen bg-gradient-to-br from-background via-background to-muted/20">
           <Sidebar />
           <main className="flex-1 transition-all duration-300 ease-in-out" style={{ marginLeft: 'var(--sidebar-width, 15rem)' }}>
-            <div className="min-h-screen p-8">
+            <div className="min-h-screen p-3 sm:p-6 md:p-8">
               {children}
             </div>
           </main>

package/src/studio/components/EnlargeModal.tsx

@@ -26,13 +26,18 @@ export function EnlargeModal() {
     if (type !== 'tool') return;
     
     closeEnlargeModal();
-    setCurrentTab('chat');
-    router.push('/chat');
     
-    // Store the tool name so chat can suggest using it
+    // Build the tool execution message
+    const toolMessage = `Use the ${item.name} tool`;
+    
+    // Store both the tool name and the message
     if (typeof window !== 'undefined') {
       window.localStorage.setItem('suggestedTool', item.name);
+      window.localStorage.setItem('chatInput', toolMessage);
     }
+    
+    setCurrentTab('chat');
+    router.push('/chat');
   };
 
   return (
@@ -42,34 +47,35 @@ export function EnlargeModal() {
       onClick={closeEnlargeModal}
     >
       <div
-        className="relative w-[90vw] h-[90vh] bg-card border border-border rounded-2xl shadow-2xl overflow-hidden animate-scale-in"
+        className="relative w-[95vw] max-w-7xl h-[90vh] bg-card border border-border rounded-xl sm:rounded-2xl shadow-2xl overflow-hidden animate-scale-in"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-border bg-muted/30">
-          <div className="flex items-center gap-4">
-            <span className="text-3xl">{type === 'tool' ? '⚡' : '🎨'}</span>
-            <div>
-              <h2 className="text-xl font-bold text-foreground">{item.name}</h2>
-              <p className="text-sm text-muted-foreground mt-1">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-4 sm:p-6 border-b border-border bg-muted/30 gap-3 sm:gap-0">
+          <div className="flex items-start sm:items-center gap-3 sm:gap-4 flex-1 min-w-0">
+            <span className="text-2xl sm:text-3xl flex-shrink-0">{type === 'tool' ? '⚡' : '🎨'}</span>
+            <div className="min-w-0 flex-1">
+              <h2 className="text-lg sm:text-xl font-bold text-foreground truncate">{item.name}</h2>
+              <p className="text-xs sm:text-sm text-muted-foreground mt-1 line-clamp-2">
                 {item.description || 'No description available'}
               </p>
             </div>
           </div>
 
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 w-full sm:w-auto">
             {type === 'tool' && (
               <button
                 onClick={handleUseInChat}
-                className="btn btn-primary flex items-center gap-2"
+                className="btn btn-primary flex items-center gap-2 flex-1 sm:flex-none text-sm"
               >
                 <MessageSquare className="w-4 h-4" />
-                Use in Chat
+                <span className="hidden sm:inline">Use in Chat</span>
+                <span className="sm:hidden">Chat</span>
               </button>
             )}
             <button
               onClick={closeEnlargeModal}
-              className="btn btn-ghost w-10 h-10 p-0 flex items-center justify-center"
+              className="btn btn-ghost w-10 h-10 p-0 flex items-center justify-center flex-shrink-0"
               aria-label="Close"
             >
               <X className="w-5 h-5" />
@@ -78,7 +84,7 @@ export function EnlargeModal() {
         </div>
 
         {/* Widget Content */}
-        <div className="h-[calc(100%-88px)] p-6 overflow-auto bg-background">
+        <div className="h-[calc(100%-120px)] sm:h-[calc(100%-100px)] p-3 sm:p-6 overflow-auto bg-background">
           {componentUri && widgetData ? (
             <div className="w-full h-full rounded-xl overflow-hidden border border-border shadow-inner">
               <WidgetRenderer uri={componentUri} data={widgetData} className="w-full h-full" />

package/src/studio/components/LogMessage.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import { useState } from 'react';
+import { Copy, Check, ChevronDown, ChevronRight } from 'lucide-react';
+
+interface LogMessageProps {
+  message: string;
+}
+
+export function LogMessage({ message }: LogMessageProps) {
+  const [copied, setCopied] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const handleCopy = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (error) {
+      console.error('Failed to copy:', error);
+    }
+  };
+
+  // Try to parse and format JSON
+  const tryParseJSON = (text: string): { isJSON: boolean; formatted?: string; parsed?: any } => {
+    try {
+      const trimmed = text.trim();
+      if (!trimmed.startsWith('{') && !trimmed.startsWith('[')) {
+        return { isJSON: false };
+      }
+
+      const parsed = JSON.parse(trimmed);
+      
+      // Pretty print with proper indentation
+      const formatted = JSON.stringify(parsed, (key, value) => {
+        // If value is a string that looks like JSON, try to parse it
+        if (typeof value === 'string' && (value.trim().startsWith('{') || value.trim().startsWith('['))) {
+          try {
+            return JSON.parse(value);
+          } catch {
+            return value;
+          }
+        }
+        return value;
+      }, 2);
+
+      return { isJSON: true, formatted, parsed };
+    } catch {
+      return { isJSON: false };
+    }
+  };
+
+  // Syntax highlight JSON
+  const highlightJSON = (jsonString: string) => {
+    return jsonString
+      .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?)/g, (match) => {
+        let cls = 'json-string';
+        if (/:$/.test(match)) {
+          cls = 'json-key';
+        }
+        return `<span class="${cls}">${match}</span>`;
+      })
+      .replace(/\b(true|false|null)\b/g, '<span class="json-boolean">$1</span>')
+      .replace(/\b(-?\d+\.?\d*)\b/g, '<span class="json-number">$1</span>')
+      .replace(/([{}[\],])/g, '<span class="json-punctuation">$1</span>');
+  };
+
+  const result = tryParseJSON(message);
+
+  if (!result.isJSON) {
+    // Plain text message
+    return <span className="text-slate-300 break-all">{message}</span>;
+  }
+
+  // JSON message - collapsible with syntax highlighting
+  return (
+    <div className="flex-1 min-w-0">
+      <div className="flex items-center gap-2 mb-1">
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="text-slate-400 hover:text-slate-200 transition-colors"
+        >
+          {isExpanded ? (
+            <ChevronDown className="w-4 h-4" />
+          ) : (
+            <ChevronRight className="w-4 h-4" />
+          )}
+        </button>
+        <span className="text-slate-500 text-xs font-semibold">JSON Response</span>
+        <button
+          onClick={() => handleCopy(result.formatted || message)}
+          className="ml-auto text-slate-500 hover:text-slate-300 transition-colors p-1 rounded hover:bg-slate-800"
+          title={copied ? 'Copied!' : 'Copy JSON'}
+        >
+          {copied ? (
+            <Check className="w-3.5 h-3.5 text-green-400" />
+          ) : (
+            <Copy className="w-3.5 h-3.5" />
+          )}
+        </button>
+      </div>
+      
+      {isExpanded && (
+        <div className="json-container">
+          <pre
+            className="json-content"
+            dangerouslySetInnerHTML={{ __html: highlightJSON(result.formatted || message) }}
+          />
+        </div>
+      )}
+
+      <style jsx>{`
+        .json-container {
+          background: rgb(15, 23, 42);
+          border: 1px solid rgb(51, 65, 85);
+          border-radius: 0.5rem;
+          padding: 0.75rem;
+          overflow-x: auto;
+          margin-top: 0.5rem;
+        }
+
+        .json-content {
+          margin: 0;
+          font-family: 'JetBrains Mono', 'Courier New', monospace;
+          font-size: 0.75rem;
+          line-height: 1.5;
+          color: rgb(226, 232, 240);
+        }
+
+        :global(.json-key) {
+          color: rgb(96, 165, 250); /* Blue */
+        }
+
+        :global(.json-string) {
+          color: rgb(134, 239, 172); /* Green */
+        }
+
+        :global(.json-number) {
+          color: rgb(251, 146, 60); /* Orange */
+        }
+
+        :global(.json-boolean) {
+          color: rgb(167, 139, 250); /* Purple */
+        }
+
+        :global(.json-punctuation) {
+          color: rgb(148, 163, 184); /* Gray */
+        }
+      `}</style>
+    </div>
+  );
+}
+