nitrostack 1.0.71 → 1.0.73

package/src/studio/components/MarkdownRenderer.tsx

@@ -1,410 +1,307 @@
 'use client';
 
 import { useState } from 'react';
-import { Copy, Check } from 'lucide-react';
+import { ClipboardDocumentIcon, CheckIcon } from '@heroicons/react/24/outline';
 
 interface MarkdownRendererProps {
   content: string;
 }
 
 export function MarkdownRenderer({ content }: MarkdownRendererProps) {
-  const [copied, setCopied] = useState(false);
-  const [copiedCode, setCopiedCode] = useState<string | null>(null);
+  const [copiedBlock, setCopiedBlock] = 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);
-    }
-  };
+  // Guard against null/undefined content
+  if (!content || typeof content !== 'string') {
+    return null;
+  }
 
   const handleCopyCode = async (code: string, blockId: string) => {
     try {
       await navigator.clipboard.writeText(code);
-      setCopiedCode(blockId);
-      setTimeout(() => setCopiedCode(null), 2000);
+      setCopiedBlock(blockId);
+      setTimeout(() => setCopiedBlock(null), 2000);
     } catch (error) {
       console.error('Failed to copy code:', error);
     }
   };
 
-  // Simple syntax highlighting for common languages
+  const escapeHtml = (text: string) => {
+    return text
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+  };
+
+  // Simple syntax highlighting
   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'],
+      javascript: ['function', 'const', 'let', 'var', 'return', 'if', 'else', 'for', 'while', 'class', 'import', 'export', 'from', 'async', 'await', 'new', 'this', 'try', 'catch', 'throw', 'true', 'false', 'null', 'undefined'],
+      typescript: ['function', 'const', 'let', 'var', 'return', 'if', 'else', 'for', 'while', 'class', 'import', 'export', 'from', 'async', 'await', 'interface', 'type', 'enum', 'new', 'this', 'try', 'catch', 'throw', 'true', 'false', 'null', 'undefined'],
+      python: ['def', 'class', 'return', 'if', 'else', 'elif', 'for', 'while', 'import', 'from', 'try', 'except', 'with', 'as', 'pass', 'break', 'continue', 'lambda', 'yield', 'True', 'False', 'None'],
+      json: [],
     };
 
     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>');
+    highlighted = highlighted.replace(/(\/\/.*$|\/\*[\s\S]*?\*\/)/gm, '<span style="color: #6b7280; font-style: italic;">$1</span>');
+    highlighted = highlighted.replace(/(#.*$)/gm, '<span style="color: #6b7280; font-style: italic;">$1</span>');
 
     // Strings
-    highlighted = highlighted.replace(/("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)/g, '<span class="syntax-string">$1</span>');
+    highlighted = highlighted.replace(/("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)/g, '<span style="color: #22c55e;">$1</span>');
 
     // Numbers
-    highlighted = highlighted.replace(/\b(\d+\.?\d*)\b/g, '<span class="syntax-number">$1</span>');
+    highlighted = highlighted.replace(/\b(\d+\.?\d*)\b/g, '<span style="color: #f97316;">$1</span>');
 
     // Keywords
     langKeywords.forEach(keyword => {
       const regex = new RegExp(`\\b${keyword}\\b`, 'g');
-      highlighted = highlighted.replace(regex, `<span class="syntax-keyword">${keyword}</span>`);
+      highlighted = highlighted.replace(regex, `<span style="color: #3b82f6; font-weight: 500;">${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)
+  // Parse and render markdown
   const renderMarkdown = (text: string) => {
-    let html = text;
+    const elements: React.ReactNode[] = [];
     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>`;
+    // Split by code blocks first
+    const parts = text.split(/(```[\s\S]*?```)/g);
+
+    parts.forEach((part, partIndex) => {
+      if (part.startsWith('```')) {
+        // Code block
+        const match = part.match(/```(\w+)?\n?([\s\S]*?)```/);
+        if (match) {
+          const language = match[1] || 'text';
+          const code = match[2].trim();
+          const blockId = `code-${partIndex}-${codeBlockCounter++}`;
+          const isCopied = copiedBlock === blockId;
+
+          elements.push(
+            <div key={blockId} className="my-3 rounded-lg overflow-hidden border border-border/50 bg-zinc-900/50">
+              <div className="flex items-center justify-between px-3 py-1.5 bg-zinc-800/50 border-b border-border/30">
+                <span className="text-xs text-muted-foreground font-medium">{language}</span>
+                <button
+                  onClick={() => handleCopyCode(code, blockId)}
+                  className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {isCopied ? (
+                    <>
+                      <CheckIcon className="w-3.5 h-3.5 text-green-500" />
+                      <span className="text-green-500">Copied!</span>
+                    </>
+                  ) : (
+                    <>
+                      <ClipboardDocumentIcon className="w-3.5 h-3.5" />
+                      <span>Copy</span>
+                    </>
+                  )}
+                </button>
+              </div>
+              <pre className="p-3 overflow-x-auto text-sm font-mono leading-relaxed">
+                <code dangerouslySetInnerHTML={{ __html: highlightCode(code, language) }} />
+              </pre>
+            </div>
+          );
+        }
+      } else {
+        // Regular text - process inline markdown
+        const lines = part.split('\n');
+        const textElements: React.ReactNode[] = [];
+
+        lines.forEach((line, lineIndex) => {
+          let processedLine: React.ReactNode = line;
+
+          // Headers
+          if (line.startsWith('### ')) {
+            textElements.push(
+              <h3 key={`h3-${partIndex}-${lineIndex}`} className="text-base font-semibold text-foreground mt-4 mb-2">
+                {line.slice(4)}
+              </h3>
+            );
+            return;
+          }
+          if (line.startsWith('## ')) {
+            textElements.push(
+              <h2 key={`h2-${partIndex}-${lineIndex}`} className="text-lg font-semibold text-foreground mt-4 mb-2">
+                {line.slice(3)}
+              </h2>
+            );
+            return;
+          }
+          if (line.startsWith('# ')) {
+            textElements.push(
+              <h1 key={`h1-${partIndex}-${lineIndex}`} className="text-xl font-bold text-foreground mt-4 mb-2">
+                {line.slice(2)}
+              </h1>
+            );
+            return;
+          }
+
+          // Blockquotes
+          if (line.startsWith('> ')) {
+            textElements.push(
+              <blockquote key={`quote-${partIndex}-${lineIndex}`} className="border-l-2 border-primary/50 pl-3 my-2 text-muted-foreground italic">
+                {line.slice(2)}
+              </blockquote>
+            );
+            return;
+          }
+
+          // Horizontal rule
+          if (line.trim() === '---' || line.trim() === '***') {
+            textElements.push(
+              <hr key={`hr-${partIndex}-${lineIndex}`} className="my-4 border-border/50" />
+            );
+            return;
+          }
+
+          // Lists
+          const unorderedMatch = line.match(/^(\s*)[*-]\s+(.+)$/);
+          if (unorderedMatch) {
+            const indent = unorderedMatch[1].length;
+            textElements.push(
+              <div key={`li-${partIndex}-${lineIndex}`} className="flex items-start gap-2 my-0.5" style={{ marginLeft: `${indent * 8}px` }}>
+                <span className="text-muted-foreground mt-1.5">•</span>
+                <span>{renderInlineMarkdown(unorderedMatch[2])}</span>
+              </div>
+            );
+            return;
+          }
+
+          const orderedMatch = line.match(/^(\s*)(\d+)\.\s+(.+)$/);
+          if (orderedMatch) {
+            const indent = orderedMatch[1].length;
+            textElements.push(
+              <div key={`oli-${partIndex}-${lineIndex}`} className="flex items-start gap-2 my-0.5" style={{ marginLeft: `${indent * 8}px` }}>
+                <span className="text-muted-foreground min-w-[1.5rem]">{orderedMatch[2]}.</span>
+                <span>{renderInlineMarkdown(orderedMatch[3])}</span>
+              </div>
+            );
+            return;
+          }
+
+          // Empty lines
+          if (line.trim() === '') {
+            textElements.push(<div key={`empty-${partIndex}-${lineIndex}`} className="h-2" />);
+            return;
+          }
+
+          // Regular paragraph with inline formatting
+          textElements.push(
+            <p key={`p-${partIndex}-${lineIndex}`} className="my-0.5">
+              {renderInlineMarkdown(line)}
+            </p>
+          );
+        });
+
+        if (textElements.length > 0) {
+          elements.push(<div key={`text-${partIndex}`}>{textElements}</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));
+    return elements;
   };
 
-  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);
+  // Render inline markdown (bold, italic, code, links)
+  const renderInlineMarkdown = (text: string): React.ReactNode => {
+    const parts: React.ReactNode[] = [];
+    let remaining = text;
+    let keyCounter = 0;
+
+    while (remaining.length > 0) {
+      // Inline code
+      const codeMatch = remaining.match(/^`([^`]+)`/);
+      if (codeMatch) {
+        parts.push(
+          <code key={keyCounter++} className="px-1.5 py-0.5 rounded bg-zinc-800/50 text-orange-400 text-sm font-mono">
+            {codeMatch[1]}
+          </code>
+        );
+        remaining = remaining.slice(codeMatch[0].length);
+        continue;
       }
-    };
-  }
-
-  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);
-        }
+      // Bold
+      const boldMatch = remaining.match(/^\*\*(.+?)\*\*/);
+      if (boldMatch) {
+        parts.push(<strong key={keyCounter++} className="font-semibold">{boldMatch[1]}</strong>);
+        remaining = remaining.slice(boldMatch[0].length);
+        continue;
+      }
 
-        :global(.markdown-content .md-link) {
-          color: rgb(96, 165, 250);
-          text-decoration: underline;
-          text-decoration-color: transparent;
-          transition: text-decoration-color 0.2s;
-        }
+      // Bold with underscores
+      const boldUnderMatch = remaining.match(/^__(.+?)__/);
+      if (boldUnderMatch) {
+        parts.push(<strong key={keyCounter++} className="font-semibold">{boldUnderMatch[1]}</strong>);
+        remaining = remaining.slice(boldUnderMatch[0].length);
+        continue;
+      }
 
-        :global(.markdown-content .md-link:hover) {
-          text-decoration-color: rgb(96, 165, 250);
-        }
+      // Italic
+      const italicMatch = remaining.match(/^\*([^*]+)\*/);
+      if (italicMatch) {
+        parts.push(<em key={keyCounter++} className="italic">{italicMatch[1]}</em>);
+        remaining = remaining.slice(italicMatch[0].length);
+        continue;
+      }
 
-        :global(.markdown-content .md-ul) {
-          list-style-type: disc;
-          margin-left: 1.5rem;
-          margin-top: 0.5rem;
-          margin-bottom: 0.5rem;
-        }
+      // Italic with underscores
+      const italicUnderMatch = remaining.match(/^_([^_]+)_/);
+      if (italicUnderMatch) {
+        parts.push(<em key={keyCounter++} className="italic">{italicUnderMatch[1]}</em>);
+        remaining = remaining.slice(italicUnderMatch[0].length);
+        continue;
+      }
 
-        :global(.markdown-content .md-li) {
-          margin-top: 0.25rem;
-          margin-bottom: 0.25rem;
-        }
+      // Links
+      const linkMatch = remaining.match(/^\[([^\]]+)\]\(([^)]+)\)/);
+      if (linkMatch) {
+        parts.push(
+          <a
+            key={keyCounter++}
+            href={linkMatch[2]}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary hover:underline"
+          >
+            {linkMatch[1]}
+          </a>
+        );
+        remaining = remaining.slice(linkMatch[0].length);
+        continue;
+      }
 
-        :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;
-        }
+      // Regular text - take one character at a time until we hit a special character
+      const nextSpecial = remaining.search(/[`*_\[]/);
+      if (nextSpecial === -1) {
+        parts.push(remaining);
+        break;
+      } else if (nextSpecial === 0) {
+        // Special char that didn't match any pattern - just add it
+        parts.push(remaining[0]);
+        remaining = remaining.slice(1);
+      } else {
+        parts.push(remaining.slice(0, nextSpecial));
+        remaining = remaining.slice(nextSpecial);
+      }
+    }
 
-        :global(.markdown-content .md-hr) {
-          border: none;
-          border-top: 1px solid rgb(51, 65, 85);
-          margin: 1.5rem 0;
-        }
+    return parts.length === 1 ? parts[0] : <>{parts}</>;
+  };
 
-        :global(.markdown-content br) {
-          display: block;
-          content: "";
-          margin-top: 0.5rem;
-        }
-      `}</style>
+  return (
+    <div className="text-foreground/90 leading-relaxed">
+      {renderMarkdown(content)}
     </div>
   );
 }
-