nitrostack 1.0.65 → 1.0.66

package/src/studio/components/EnlargeModal.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import { useStudioStore } from '@/lib/store';
+import { WidgetRenderer } from './WidgetRenderer';
+import { X, MessageSquare } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+
+export function EnlargeModal() {
+  const { enlargeModal, closeEnlargeModal, setCurrentTab } = useStudioStore();
+  const router = useRouter();
+
+  if (!enlargeModal.open || !enlargeModal.item) return null;
+
+  const { type, item } = enlargeModal;
+  
+  // Get widget URI
+  const componentUri =
+    type === 'tool'
+      ? (item.widget?.route || item.outputTemplate || item._meta?.['openai/outputTemplate'] || item._meta?.['ui/template'])
+      : item.uri;
+
+  // Get data from item's examples or responseData - check both examples and _meta
+  const widgetData = 
+    item.examples?.response || 
+    item._meta?.['tool/examples']?.response || 
+    item.responseData || 
+    {};
+  
+  // Debug logging
+  console.log('EnlargeModal - Widget info:', {
+    type,
+    itemName: item.name,
+    componentUri,
+    hasWidgetData: !!widgetData && Object.keys(widgetData).length > 0,
+    widgetDataType: widgetData ? typeof widgetData : 'none',
+    itemExamples: item.examples,
+    itemMeta: item._meta,
+    metaExamples: item._meta?.['tool/examples'],
+  });
+
+  const handleUseInChat = () => {
+    if (type !== 'tool') return;
+    
+    closeEnlargeModal();
+    
+    // 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 (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center animate-fade-in"
+      style={{ backgroundColor: 'rgba(0, 0, 0, 0.85)' }}
+      onClick={closeEnlargeModal}
+    >
+      <div
+        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 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 w-full sm:w-auto">
+            {type === 'tool' && (
+              <button
+                onClick={handleUseInChat}
+                className="btn btn-primary flex items-center gap-2 flex-1 sm:flex-none text-sm"
+              >
+                <MessageSquare className="w-4 h-4" />
+                <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 flex-shrink-0"
+              aria-label="Close"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Widget Content */}
+        <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" />
+            </div>
+          ) : (
+            <div className="flex items-center justify-center h-full">
+              <div className="text-center">
+                <p className="text-muted-foreground mb-2">
+                  {!componentUri ? 'No widget URI available' : 'No example data available'}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {type === 'tool' ? 'This tool does not have a UI widget attached' : 'No preview data found'}
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Metadata Footer */}
+        {type === 'tool' && item.inputSchema && (
+          <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-border glass">
+            <details className="text-sm">
+              <summary className="cursor-pointer text-muted-foreground hover:text-foreground font-medium">
+                Input Schema
+              </summary>
+              <pre className="mt-2 p-3 bg-muted rounded-lg text-xs text-foreground overflow-auto max-h-40 font-mono">
+                {JSON.stringify(item.inputSchema, null, 2)}
+              </pre>
+            </details>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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