nitrostack 1.0.15 → 1.0.17

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>
+  );
+}
+

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>
+  );
+}
+