nitrostack 1.0.16 → 1.0.17

package/src/studio/components/MarkdownRenderer.tsx

@@ -0,0 +1,410 @@
+'use client';
+
+import { useState } from 'react';
+import { Copy, Check } from 'lucide-react';
+
+interface MarkdownRendererProps {
+  content: string;
+}
+
+export function MarkdownRenderer({ content }: MarkdownRendererProps) {
+  const [copied, setCopied] = useState(false);
+  const [copiedCode, setCopiedCode] = useState<string | null>(null);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (error) {
+      console.error('Failed to copy:', error);
+    }
+  };
+
+  const handleCopyCode = async (code: string, blockId: string) => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopiedCode(blockId);
+      setTimeout(() => setCopiedCode(null), 2000);
+    } catch (error) {
+      console.error('Failed to copy code:', error);
+    }
+  };
+
+  // Simple syntax highlighting for common languages
+  const highlightCode = (code: string, language: string) => {
+    let highlighted = escapeHtml(code);
+
+    // Keywords for different languages
+    const keywords: Record<string, string[]> = {
+      javascript: ['function', 'const', 'let', 'var', 'return', 'if', 'else', 'for', 'while', 'class', 'import', 'export', 'from', 'async', 'await', 'new', 'this', 'try', 'catch'],
+      typescript: ['function', 'const', 'let', 'var', 'return', 'if', 'else', 'for', 'while', 'class', 'import', 'export', 'from', 'async', 'await', 'interface', 'type', 'enum', 'new', 'this', 'try', 'catch'],
+      python: ['def', 'class', 'return', 'if', 'else', 'elif', 'for', 'while', 'import', 'from', 'try', 'except', 'with', 'as', 'pass', 'break', 'continue', 'lambda', 'yield'],
+      java: ['public', 'private', 'protected', 'class', 'interface', 'void', 'return', 'if', 'else', 'for', 'while', 'new', 'this', 'static', 'final', 'try', 'catch'],
+      go: ['func', 'var', 'const', 'return', 'if', 'else', 'for', 'range', 'struct', 'interface', 'type', 'package', 'import', 'go', 'defer', 'chan'],
+    };
+
+    const lang = language.toLowerCase();
+    const langKeywords = keywords[lang] || keywords['javascript'];
+
+    // Comments
+    highlighted = highlighted.replace(/(\/\/.*$|\/\*[\s\S]*?\*\/)/gm, '<span class="syntax-comment">$1</span>');
+    highlighted = highlighted.replace(/(#.*$)/gm, '<span class="syntax-comment">$1</span>');
+
+    // Strings
+    highlighted = highlighted.replace(/("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)/g, '<span class="syntax-string">$1</span>');
+
+    // Numbers
+    highlighted = highlighted.replace(/\b(\d+\.?\d*)\b/g, '<span class="syntax-number">$1</span>');
+
+    // Keywords
+    langKeywords.forEach(keyword => {
+      const regex = new RegExp(`\\b${keyword}\\b`, 'g');
+      highlighted = highlighted.replace(regex, `<span class="syntax-keyword">${keyword}</span>`);
+    });
+
+    // Function calls
+    highlighted = highlighted.replace(/\b([a-zA-Z_][a-zA-Z0-9_]*)\s*\(/g, '<span class="syntax-function">$1</span>(');
+
+    return highlighted;
+  };
+
+  // Simple markdown rendering using regex (basic implementation)
+  const renderMarkdown = (text: string) => {
+    let html = text;
+    let codeBlockCounter = 0;
+
+    // Code blocks (```language\ncode\n```)
+    html = html.replace(/```(\w+)?\n([\s\S]*?)```/g, (_, lang, code) => {
+      const blockId = `code-block-${codeBlockCounter++}`;
+      const language = lang || 'text';
+      const trimmedCode = code.trim();
+      const highlightedCode = language !== 'text' ? highlightCode(trimmedCode, language) : escapeHtml(trimmedCode);
+      
+      return `<div class="code-block-wrapper">
+        <div class="code-block-header">
+          <span class="code-language">${language}</span>
+          <button class="copy-code-btn" data-code="${escapeHtml(trimmedCode)}" data-block-id="${blockId}" onclick="window.copyCodeBlock('${blockId}', \`${escapeHtml(trimmedCode).replace(/`/g, '\\`')}\`)">
+            <svg class="copy-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+            </svg>
+            <span class="copy-text">Copy code</span>
+          </button>
+        </div>
+        <pre class="code-block"><code class="language-${language}">${highlightedCode}</code></pre>
+      </div>`;
+    });
+
+    // Inline code (`code`)
+    html = html.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
+
+    // Bold (**text** or __text__)
+    html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+    html = html.replace(/__(.+?)__/g, '<strong>$1</strong>');
+
+    // Italic (*text* or _text_)
+    html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
+    html = html.replace(/_(.+?)_/g, '<em>$1</em>');
+
+    // Headers (# text)
+    html = html.replace(/^### (.+)$/gm, '<h3 class="md-h3">$1</h3>');
+    html = html.replace(/^## (.+)$/gm, '<h2 class="md-h2">$1</h2>');
+    html = html.replace(/^# (.+)$/gm, '<h1 class="md-h1">$1</h1>');
+
+    // Links ([text](url))
+    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="md-link" target="_blank" rel="noopener noreferrer">$1</a>');
+
+    // Unordered lists (- item or * item)
+    html = html.replace(/^[\*\-] (.+)$/gm, '<li class="md-li">$1</li>');
+    html = html.replace(/(<li class="md-li">.*<\/li>\n?)+/g, '<ul class="md-ul">$&</ul>');
+
+    // Ordered lists (1. item)
+    html = html.replace(/^\d+\. (.+)$/gm, '<li class="md-li">$1</li>');
+
+    // Blockquotes (> text)
+    html = html.replace(/^> (.+)$/gm, '<blockquote class="md-blockquote">$1</blockquote>');
+
+    // Horizontal rule (---)
+    html = html.replace(/^---$/gm, '<hr class="md-hr" />');
+
+    // Line breaks
+    html = html.replace(/\n/g, '<br />');
+
+    return html;
+  };
+
+  const escapeHtml = (text: string) => {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  };
+
+  // Check if content has markdown syntax
+  const hasMarkdown = (text: string) => {
+    const markdownPatterns = [
+      /```[\s\S]*?```/,           // Code blocks
+      /`[^`]+`/,                  // Inline code
+      /\*\*[^*]+\*\*/,            // Bold
+      /__[^_]+__/,                // Bold
+      /\*[^*]+\*/,                // Italic
+      /_[^_]+_/,                  // Italic
+      /^#{1,6} .+$/m,             // Headers
+      /\[.+\]\(.+\)/,             // Links
+      /^[\*\-] .+$/m,             // Unordered lists
+      /^\d+\. .+$/m,              // Ordered lists
+      /^> .+$/m,                  // Blockquotes
+    ];
+
+    return markdownPatterns.some(pattern => pattern.test(text));
+  };
+
+  const isMarkdown = hasMarkdown(content);
+
+  if (!isMarkdown) {
+    // No markdown detected, render as plain text
+    return <div className="whitespace-pre-wrap">{content}</div>;
+  }
+
+  // Set up global copy function for code blocks
+  if (typeof window !== 'undefined') {
+    (window as any).copyCodeBlock = async (blockId: string, code: string) => {
+      try {
+        await navigator.clipboard.writeText(code);
+        setCopiedCode(blockId);
+        setTimeout(() => setCopiedCode(null), 2000);
+      } catch (error) {
+        console.error('Failed to copy code:', error);
+      }
+    };
+  }
+
+  return (
+    <div className="relative markdown-container">
+      {/* Copy All Button */}
+      <button
+        onClick={handleCopy}
+        className="absolute top-3 right-3 z-10 px-3 py-1.5 rounded-lg bg-slate-700/80 hover:bg-slate-700 border border-slate-600/50 transition-all text-xs font-medium flex items-center gap-2"
+        title={copied ? 'Copied!' : 'Copy all content'}
+      >
+        {copied ? (
+          <>
+            <Check className="w-3.5 h-3.5 text-green-400" />
+            <span className="text-green-400">Copied!</span>
+          </>
+        ) : (
+          <>
+            <Copy className="w-3.5 h-3.5 text-slate-300" />
+            <span className="text-slate-300">Copy all</span>
+          </>
+        )}
+      </button>
+
+      {/* Markdown Content */}
+      <div
+        className="markdown-content"
+        dangerouslySetInnerHTML={{ __html: renderMarkdown(content) }}
+      />
+
+      <style jsx>{`
+        .markdown-container {
+          position: relative;
+          padding: 1.25rem;
+          background: linear-gradient(to bottom, rgb(30, 41, 59), rgb(15, 23, 42));
+          border: 1px solid rgb(51, 65, 85);
+          border-radius: 0.75rem;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+        }
+
+        :global(.markdown-content) {
+          font-size: 0.875rem;
+          line-height: 1.625;
+          color: rgb(226, 232, 240);
+        }
+
+        :global(.code-block-wrapper) {
+          position: relative;
+          margin: 1.5rem 0;
+          border-radius: 0.5rem;
+          overflow: hidden;
+          background: rgb(15, 23, 42);
+          border: 1px solid rgb(51, 65, 85);
+        }
+
+        :global(.code-block-header) {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0.5rem 1rem;
+          background: rgb(30, 41, 59);
+          border-bottom: 1px solid rgb(51, 65, 85);
+        }
+
+        :global(.code-language) {
+          font-size: 0.75rem;
+          font-weight: 500;
+          color: rgb(148, 163, 184);
+          text-transform: lowercase;
+        }
+
+        :global(.copy-code-btn) {
+          display: flex;
+          align-items: center;
+          gap: 0.375rem;
+          padding: 0.25rem 0.625rem;
+          font-size: 0.75rem;
+          color: rgb(203, 213, 225);
+          background: transparent;
+          border: none;
+          border-radius: 0.375rem;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+
+        :global(.copy-code-btn:hover) {
+          background: rgb(51, 65, 85);
+          color: rgb(226, 232, 240);
+        }
+
+        :global(.copy-icon) {
+          width: 14px;
+          height: 14px;
+        }
+
+        :global(.markdown-content .md-h1) {
+          font-size: 1.5rem;
+          font-weight: 700;
+          margin-top: 1.5rem;
+          margin-bottom: 0.75rem;
+          color: rgb(241, 245, 249);
+          border-bottom: 1px solid rgb(51, 65, 85);
+          padding-bottom: 0.5rem;
+        }
+
+        :global(.markdown-content .md-h2) {
+          font-size: 1.25rem;
+          font-weight: 700;
+          margin-top: 1.25rem;
+          margin-bottom: 0.5rem;
+          color: rgb(226, 232, 240);
+        }
+
+        :global(.markdown-content .md-h3) {
+          font-size: 1.125rem;
+          font-weight: 600;
+          margin-top: 1rem;
+          margin-bottom: 0.5rem;
+          color: rgb(203, 213, 225);
+        }
+
+        :global(.markdown-content .code-block) {
+          background: rgb(15, 23, 42);
+          padding: 1rem;
+          margin: 0;
+          overflow-x: auto;
+          font-family: 'JetBrains Mono', 'Courier New', monospace;
+          font-size: 0.8125rem;
+          line-height: 1.6;
+        }
+
+        :global(.markdown-content .code-block code) {
+          background: transparent;
+          padding: 0;
+          border: none;
+          color: rgb(226, 232, 240);
+        }
+
+        /* Syntax highlighting colors */
+        :global(.syntax-keyword) {
+          color: rgb(96, 165, 250); /* Blue */
+          font-weight: 500;
+        }
+
+        :global(.syntax-string) {
+          color: rgb(134, 239, 172); /* Green */
+        }
+
+        :global(.syntax-number) {
+          color: rgb(251, 146, 60); /* Orange */
+        }
+
+        :global(.syntax-comment) {
+          color: rgb(100, 116, 139); /* Gray */
+          font-style: italic;
+        }
+
+        :global(.syntax-function) {
+          color: rgb(253, 224, 71); /* Yellow */
+        }
+
+        :global(.markdown-content .inline-code) {
+          background: rgb(30, 41, 59);
+          color: rgb(251, 146, 60);
+          padding: 0.125rem 0.5rem;
+          border-radius: 0.25rem;
+          font-family: 'JetBrains Mono', 'Courier New', monospace;
+          font-size: 0.875em;
+          border: 1px solid rgb(51, 65, 85);
+        }
+
+        :global(.markdown-content strong) {
+          font-weight: 600;
+          color: rgb(241, 245, 249);
+        }
+
+        :global(.markdown-content em) {
+          font-style: italic;
+          color: rgb(203, 213, 225);
+        }
+
+        :global(.markdown-content .md-link) {
+          color: rgb(96, 165, 250);
+          text-decoration: underline;
+          text-decoration-color: transparent;
+          transition: text-decoration-color 0.2s;
+        }
+
+        :global(.markdown-content .md-link:hover) {
+          text-decoration-color: rgb(96, 165, 250);
+        }
+
+        :global(.markdown-content .md-ul) {
+          list-style-type: disc;
+          margin-left: 1.5rem;
+          margin-top: 0.5rem;
+          margin-bottom: 0.5rem;
+        }
+
+        :global(.markdown-content .md-li) {
+          margin-top: 0.25rem;
+          margin-bottom: 0.25rem;
+        }
+
+        :global(.markdown-content .md-blockquote) {
+          border-left: 3px solid rgb(96, 165, 250);
+          padding-left: 1rem;
+          padding-top: 0.5rem;
+          padding-bottom: 0.5rem;
+          margin: 1rem 0;
+          background: rgb(30, 41, 59);
+          color: rgb(148, 163, 184);
+          font-style: italic;
+          border-radius: 0 0.25rem 0.25rem 0;
+        }
+
+        :global(.markdown-content .md-hr) {
+          border: none;
+          border-top: 1px solid rgb(51, 65, 85);
+          margin: 1.5rem 0;
+        }
+
+        :global(.markdown-content br) {
+          display: block;
+          content: "";
+          margin-top: 0.5rem;
+        }
+      `}</style>
+    </div>
+  );
+}
+

package/src/studio/components/Sidebar.tsx

@@ -68,8 +68,8 @@ export function Sidebar() {
 
   return (
     <nav className={`fixed left-0 top-0 h-screen glass flex flex-col z-50 border-r border-border/50 transition-all duration-300 ease-in-out ${
-      isCollapsed ? 'w-16' : 'w-60'
-    }`}>
+      isCollapsed ? 'w-16' : 'w-60 md:w-60'
+    } ${isCollapsed ? '' : 'max-md:w-16'}`}>
       {/* Compact Professional Header */}
       <div className="relative p-3 border-b border-border/50 bg-gradient-to-b from-card/80 to-transparent">
         <div className="flex items-center justify-between mb-2">
@@ -272,7 +272,7 @@ export function Sidebar() {
             {/* Copyright */}
             <div className="text-center">
               <p className="text-[8px] text-muted-foreground/50 font-medium">
-                © 2025 NitroStudio
+                © 2025 NitroCloud
               </p>
             </div>
           </div>

package/src/studio/components/ToolCard.tsx

@@ -4,7 +4,7 @@ import type { Tool } from '@/lib/types';
 import { useStudioStore } from '@/lib/store';
 import { WidgetRenderer } from './WidgetRenderer';
 import { useRouter } from 'next/navigation';
-import { Zap, Palette, Maximize2, Play, Sparkles } from 'lucide-react';
+import { Zap, Palette, Maximize2, Play, Sparkles, MessageSquare } from 'lucide-react';
 
 interface ToolCardProps {
   tool: Tool;
@@ -28,7 +28,17 @@ export function ToolCard({ tool, onExecute }: ToolCardProps) {
 
   const handleUseInChat = (e: React.MouseEvent) => {
     e.stopPropagation();
-    router.push(`/chat?tool=${tool.name}`);
+    
+    // Build the tool execution message
+    const toolMessage = `Use the ${tool.name} tool`;
+    
+    // Store the message in localStorage
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem('chatInput', toolMessage);
+      window.localStorage.setItem('suggestedTool', tool.name);
+    }
+    
+    router.push('/chat');
   };
 
   const handleEnlarge = (e: React.MouseEvent) => {
@@ -85,22 +95,30 @@ export function ToolCard({ tool, onExecute }: ToolCardProps) {
       )}
 
       {/* Action Buttons */}
-      <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
+      <div className="flex flex-wrap items-center gap-2" onClick={(e) => e.stopPropagation()}>
         {hasWidget && exampleData && (
           <button
             onClick={handleEnlarge}
-            className="btn btn-secondary flex-1 text-sm gap-2"
+            className="btn btn-secondary flex-1 min-w-[90px] text-xs sm:text-sm gap-1.5 px-2.5 py-1.5 sm:px-4 sm:py-2"
           >
-            <Maximize2 className="w-4 h-4" />
-            <span>Enlarge</span>
+            <Maximize2 className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+            <span className="truncate">Enlarge</span>
           </button>
         )}
         <button 
           onClick={() => onExecute(tool)} 
-          className="btn btn-primary flex-1 text-sm gap-2"
+          className="btn btn-primary flex-1 min-w-[90px] text-xs sm:text-sm gap-1.5 px-2.5 py-1.5 sm:px-4 sm:py-2"
         >
-          <Play className="w-4 h-4" />
-          <span>Execute</span>
+          <Play className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+          <span className="truncate">Execute</span>
+        </button>
+        <button
+          onClick={handleUseInChat}
+          className="btn btn-secondary flex-1 min-w-[90px] text-xs sm:text-sm gap-1.5 px-2.5 py-1.5 sm:px-4 sm:py-2"
+          title="Use in Chat"
+        >
+          <MessageSquare className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
+          <span className="truncate">Chat</span>
         </button>
       </div>
     </div>

package/src/studio/components/WidgetRenderer.tsx

@@ -82,14 +82,16 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
     }
   }, [uri, data, isDevMode]);
 
+  const isInChat = className?.includes('widget-in-chat');
+  
   return (
     <iframe
       ref={iframeRef}
       className={className}
       sandbox="allow-scripts allow-same-origin"
       style={{
-        width: '100%',
-        height: '100%',
+        width: isInChat ? '650px' : '100%',
+        height: isInChat ? '450px' : '100%',
         border: 'none',
         background: 'transparent',
       }}

package/src/studio/lib/llm-service.ts

@@ -101,10 +101,32 @@ User: "what's in my cart" → Call view_cart directly (don't ask for login)
 
 Only if tool returns auth error → THEN suggest: "Please login with your credentials"
 
+**PRESENTING TOOL RESULTS:**
+
+When you call a tool and receive results, you MUST present the information to the user in a clear, formatted way:
+
+- For **list_resources**: Show each resource's URI, name, description, and mime type in a formatted list
+- For **list_prompts**: Show each prompt's name, description, and required arguments
+- For **read_resource**: Display the resource content in an appropriate format
+- For **execute_prompt**: Show the prompt result clearly
+- For ANY tool result: Extract and format the key information for the user to understand
+
+**Example:**
+User: "list all resources"
+1. Call list_resources tool
+2. Receive JSON array of resources
+3. Format and present: "Here are the available resources:
+   - **Resource Name** (uri) - Description
+   - **Another Resource** (uri) - Description"
+
+**NEVER** just say "I have the results" without showing them!
+**ALWAYS** format and display the actual data you receive from tools!
+
 **REMEMBER:** 
 
 - You have access to real, functional tools - use them!
-- Call tools directly - don't ask for permission or credentials first
+- Call tools directly - don't ask for permission or credentials first  
+- **After calling a tool, ALWAYS present the results to the user clearly**
 - Your goal is to be helpful, efficient, and reduce user friction
 - Think through multi-step workflows and execute them seamlessly
 - Use your intelligence to fill gaps rather than always asking questions`;