@messenger-box/tailwind-ui-inbox 10.0.3-alpha.72 → 10.0.3-alpha.74

package/lib/components/InboxMessage/message-widgets/ModernMessageGroup.js

@@ -1,4 +1,4 @@
-import React__default,{useEffect}from'react';import {format,differenceInMinutes}from'date-fns';import {FilesList}from'../../inbox/FilesList.js';import'../../inbox/MessageItem.js';import'../../inbox/ThreadItem.js';// Enhanced CSS styles for HTML content rendering with prettification
+import React__default,{useEffect}from'react';import {format,differenceInMinutes}from'date-fns';import {FilesList}from'../../inbox/FilesList.js';import'../../inbox/MessageItem.js';import'../../inbox/ThreadItem.js';import {ErrorFixCard}from'./ErrorFixCard.js';import ReactMarkdown from'react-markdown';import remarkGfm from'remark-gfm';// Enhanced CSS styles for HTML content rendering with prettification
 const htmlContentStyles = `
     .html-content {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -172,216 +172,183 @@ const htmlContentStyles = `
         box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     }
     
-    .html-content .highlight {
-        background-color: #fef3c7;
-        padding: 0.25rem 0.5rem;
-        border-radius: 0.25rem;
-        border: 1px solid #f59e0b;
-    }
-    
-    .html-content .info-box {
-        background-color: #dbeafe;
-        border: 1px solid #3b82f6;
-        border-radius: 0.5rem;
-        padding: 1rem;
-        margin: 1rem 0;
-    }
-    
-    .html-content .warning-box {
-        background-color: #fef3c7;
-        border: 1px solid #f59e0b;
-        border-radius: 0.5rem;
-        padding: 1rem;
-        margin: 1rem 0;
+    /* Enhanced message container styling */
+    .message-container {
+        background: #ffffff;
+        padding: 16px;
+        margin: 12px 0;
+        transition: all 0.2s ease-in-out;
     }
     
-    .html-content .success-box {
-        background-color: #d1fae5;
-        border: 1px solid #10b981;
-        border-radius: 0.5rem;
-        padding: 1rem;
-        margin: 1rem 0;
-    }
-    
-    .html-content .error-box {
-        background-color: #fee2e2;
-        border: 1px solid #ef4444;
-        border-radius: 0.5rem;
-        padding: 1rem;
-        margin: 1rem 0;
+    /* Markdown content styling */
+    .markdown-content {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        line-height: 1.6;
+        color: #374151;
     }
     
-    .html-content .html-heading {
-        margin-top: 2rem;
-        margin-bottom: 1rem;
+    .markdown-content h1 {
+        font-size: 1.5rem;
         font-weight: 700;
-        line-height: 1.2;
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
         color: #111827;
-    }
-    
-    .html-content .html-heading-1 {
-        font-size: 2rem;
-        border-bottom: 3px solid #3b82f6;
-        padding-bottom: 0.75rem;
-    }
-    
-    .html-content .html-heading-2 {
-        font-size: 1.5rem;
-        border-bottom: 2px solid #e5e7eb;
         padding-bottom: 0.5rem;
+        border-bottom: 2px solid #e5e7eb;
     }
     
-    .html-content .html-heading-3 {
+    .markdown-content h2 {
         font-size: 1.25rem;
-        color: #374151;
-    }
-    
-    .html-content .html-paragraph {
-        margin-bottom: 1.25rem;
-        line-height: 1.8;
-        color: #4b5563;
-    }
-    
-    .html-content .html-list {
-        margin: 1.5rem 0;
-        padding-left: 2rem;
-    }
-    
-    .html-content .html-list li {
+        font-weight: 600;
+        margin-top: 1.25rem;
         margin-bottom: 0.75rem;
-        line-height: 1.7;
-        position: relative;
+        color: #1f2937;
+        padding-bottom: 0.375rem;
+        border-bottom: 1px solid #e5e7eb;
     }
     
-    .html-content .html-list-unordered li::before {
-        content: "•";
-        color: #3b82f6;
-        font-weight: bold;
-        position: absolute;
-        left: -1.5rem;
+    .markdown-content h3 {
+        font-size: 1.125rem;
+        font-weight: 600;
+        margin-top: 1rem;
+        margin-bottom: 0.5rem;
+        color: #374151;
     }
     
-    .html-content .html-list-ordered {
-        counter-reset: list-counter;
+    .markdown-content p {
+        margin-bottom: 0.75rem;
+        line-height: 1.6;
+        color: #4b5563;
     }
     
-    .html-content .html-list-ordered li {
-        counter-increment: list-counter;
+    .markdown-content ul, .markdown-content ol {
+        margin: 1rem 0;
+        padding-left: 1.5rem;
     }
     
-    .html-content .html-list-ordered li::before {
-        content: counter(list-counter) ".";
-        color: #3b82f6;
-        font-weight: 600;
-        position: absolute;
-        left: -2rem;
+    .markdown-content li {
+        margin-bottom: 0.5rem;
+        line-height: 1.6;
     }
     
-    .html-content .html-inline-code {
+    .markdown-content code {
         background-color: #f3f4f6;
-        padding: 0.25rem 0.5rem;
-        border-radius: 0.375rem;
+        padding: 0.125rem 0.375rem;
+        border-radius: 0.25rem;
         font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
         font-size: 0.875rem;
         color: #dc2626;
         border: 1px solid #e5e7eb;
     }
     
-    .html-content .html-code-block {
-        background-color: #1f2937;
-        color: #f9fafb;
-        padding: 1.5rem;
-        border-radius: 0.75rem;
+    .markdown-content pre {
+        color: #1f2937;
+        border-radius: 8px;
         overflow-x: auto;
         font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
         font-size: 0.875rem;
-        line-height: 1.6;
-        border: 1px solid #374151;
-        margin: 2rem 0;
-        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        line-height: 1.5;
+        margin: 1rem 0;
+    }
+    
+    .markdown-content pre code {
+        background-color: transparent;
+        padding: 0;
+        border: none;
+        color: #1f2937;
+        font-size: inherit;
     }
     
-    .html-content .html-blockquote {
+    .markdown-content blockquote {
         border-left: 4px solid #3b82f6;
-        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-        padding: 1.5rem;
-        margin: 2rem 0;
-        border-radius: 0.5rem;
+        background-color: #f8fafc;
+        padding: 1rem;
+        margin: 1rem 0;
+        border-radius: 6px;
         font-style: italic;
         color: #475569;
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        border-top: 1px solid #e5e7eb;
+        border-right: 1px solid #e5e7eb;
+        border-bottom: 1px solid #e5e7eb;
     }
     
-    .html-content .html-table {
+    .markdown-content table {
         border-collapse: collapse;
-        border: 2px solid #e5e7eb;
+        border: 1px solid #e5e7eb;
         width: 100%;
-        margin: 2rem 0;
-        border-radius: 0.75rem;
+        margin: 1rem 0;
+        border-radius: 8px;
         overflow: hidden;
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
     }
     
-    .html-content .html-table-header {
-        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
-        color: white;
-        font-weight: 700;
-        padding: 1rem;
+    .markdown-content th {
+        background-color: #f9fafb;
+        color: #374151;
+        font-weight: 600;
+        padding: 0.75rem;
         text-align: left;
-        border-bottom: 2px solid #1d4ed8;
+        border-bottom: 1px solid #e5e7eb;
+        font-size: 0.875rem;
     }
     
-    .html-content .html-table-cell {
+    .markdown-content td {
         border: 1px solid #e5e7eb;
-        padding: 1rem;
+        padding: 0.75rem;
         text-align: left;
         vertical-align: top;
         background-color: white;
+        font-size: 0.875rem;
     }
     
-    .html-content .html-table tr:nth-child(even) .html-table-cell {
+    .markdown-content tr:nth-child(even) td {
         background-color: #f9fafb;
     }
     
-    .html-content .html-table tr:hover .html-table-cell {
+    .markdown-content tr:hover td {
         background-color: #f3f4f6;
     }
     
-    /* Enhanced code block styling */
-    .html-content pre {
-        background-color: #1f2937;
-        color: #f9fafb;
-        padding: 1.5rem;
-        border-radius: 0.75rem;
-        overflow-x: auto;
-        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-        font-size: 0.875rem;
-        line-height: 1.6;
-        border: 1px solid #374151;
-        margin: 1.5rem 0;
-        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    /* Enhanced list styling */
+    .markdown-content ul li {
+        position: relative;
+        padding-left: 0.5rem;
     }
     
-    .html-content pre code {
-        background-color: transparent;
-        padding: 0;
-        border: none;
-        color: #f9fafb;
-        font-size: inherit;
+    .markdown-content ul li::before {
+        content: "•";
+        color: #000;
+        font-weight: bold;
+        position: absolute;
+        left: -1rem;
+    }
+    
+    .markdown-content ol li {
+        position: relative;
+        padding-left: 0.5rem;
+    }
+    
+    .markdown-content ol li::before {
+        content: counter(list-item) ".";
+        font-weight: 600;
+        position: absolute;
+        left: -1.5rem;
     }
     
     /* Code block container styling */
-    .html-content .code-block-container {
-        border-radius: 0.75rem;
+    .code-block-container {
+        background: #ffffff;
+        border: 1px solid #e5e7eb;
+        border-radius: 8px;
         overflow: hidden;
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-        margin: 1.5rem 0;
+        margin: 1rem 0;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
     }
     
-    .html-content .code-block-header {
-        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
-        padding: 0.75rem 1rem;
-        border-bottom: 1px solid #d1d5db;
+    .code-block-header {
+        background: #f9fafb;
+        padding: 0.5rem 1rem;
+        border-bottom: 1px solid #e5e7eb;
         font-weight: 600;
         color: #374151;
         font-size: 0.875rem;
@@ -389,36 +356,15 @@ const htmlContentStyles = `
         letter-spacing: 0.05em;
     }
     
-    .html-content .code-block-content {
-        background-color: #1f2937;
-        padding: 1.5rem;
+    .code-block-content {
+        padding: 1rem;
         overflow-x: auto;
     }
+
+    .hover\:bg-gray-100:hover {
+        background-color: transparent !important;
+    }
 `;
-// Function to prettify HTML content
-const prettifyHtmlContent = htmlContent => {
-  // Add semantic classes for better styling
-  let prettified = htmlContent;
-  // Enhance headings with better styling
-  prettified = prettified.replace(/<h([1-6])>/g, '<h$1 class="html-heading html-heading-$1">');
-  // Enhance lists with better styling
-  prettified = prettified.replace(/<ul>/g, '<ul class="html-list html-list-unordered">');
-  prettified = prettified.replace(/<ol>/g, '<ol class="html-list html-list-ordered">');
-  // Enhance paragraphs with better spacing
-  prettified = prettified.replace(/<p>/g, '<p class="html-paragraph">');
-  // Enhance code blocks
-  prettified = prettified.replace(/<code>/g, '<code class="html-inline-code">');
-  prettified = prettified.replace(/<pre>/g, '<pre class="html-code-block">');
-  // Enhance blockquotes
-  prettified = prettified.replace(/<blockquote>/g, '<blockquote class="html-blockquote">');
-  // Enhance tables
-  prettified = prettified.replace(/<table>/g, '<table class="html-table">');
-  prettified = prettified.replace(/<th>/g, '<th class="html-table-header">');
-  prettified = prettified.replace(/<td>/g, '<td class="html-table-cell">');
-  // Add info boxes for certain content patterns
-  prettified = prettified.replace(/<p>(Note|Tip|Info|Warning|Error):\s*(.*?)<\/p>/gi, '<div class="html-info-box"><strong>$1:</strong> $2</div>');
-  return prettified;
-};
 // Hook to inject CSS styles
 const useInjectStyles = () => {
   useEffect(() => {
@@ -477,44 +423,6 @@ const isProbablyHTML = value => {
   const htmlStructurePattern = /<[^>]+>[^<]*<\/[^>]+>/i;
   return htmlTagPattern.test(value.trim()) || htmlEntityPattern.test(value.trim()) || htmlAttrPattern.test(value.trim()) || htmlStructurePattern.test(value.trim());
 };
-// Detect if a string looks like a code block
-const isCodeBlock = text => {
-  if (!text || text.length < 10) return false;
-  // Check for common programming patterns
-  const codePatterns = [/\b(if|else|for|while|switch|case|break|continue|return|function|class|import|export|const|let|var|default)\b/, /\b(public|private|protected|static|final|abstract|interface|extends|implements)\b/, /\b(try|catch|finally|throw|throws)\b/, /\b(new|this|super|null|undefined|true|false)\b/,
-  // Narrow punctuation: exclude parentheses, brackets, hyphen, question/colon to reduce false positives
-  /[{}<>;=+*/%&|^~]/, /\b(System\.out\.println|console\.log|print|printf)\b/, /\b(int|string|boolean|float|double|long|char|byte|short)\b/, /\b(void|int|main|args)\b/, /\/\/.*$/m,
-  // Single line comments
-  /\/\*[\s\S]*?\*\//m,
-  // Multi-line comments
-  /^\s*[a-zA-Z_$][a-zA-Z0-9_$]*\s*[=:]\s*/,
-  // Variable assignment
-  /^\s*[a-zA-Z_$][a-zA-Z0-9_$]*\s*\(.*\)\s*{/,
-  // Function definition
-  /\bexport\s+default\b/,
-  // Export default statements
-  /\breturn\s+\(/,
-  // Return with JSX
-  /\bJSX\.Element\b/ // JSX types
-  ];
-  // Count how many patterns match
-  let matchCount = 0;
-  codePatterns.forEach(pattern => {
-    if (pattern.test(text)) {
-      matchCount++;
-    }
-  });
-  // Debug logging
-  console.log('Code block detection for:', text.substring(0, 100) + '...');
-  console.log('Match count:', matchCount);
-  console.log('Contains export default:', /\bexport\s+default\b/.test(text));
-  console.log('Contains function:', /\bfunction\b/.test(text));
-  console.log('Contains braces:', /[{}<>;]/.test(text));
-  // If multiple patterns match or if it contains specific strong indicators, consider it code
-  const result = matchCount >= 2 || /\b(if|else|for|while|function|class|export)\b/.test(text) || /[{}<>;]/.test(text) || /\bexport\s+default\b/.test(text);
-  console.log('Is code block:', result);
-  return result;
-};
 // Enhanced sanitizer that allows most HTML tags while maintaining security
 const sanitizeHtml = html => {
   try {
@@ -550,6 +458,30 @@ const sanitizeHtml = html => {
     return html.replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, '');
   }
 };
+// Function to prettify HTML content
+const prettifyHtmlContent = htmlContent => {
+  // Add semantic classes for better styling
+  let prettified = htmlContent;
+  // Enhance headings with better styling
+  prettified = prettified.replace(/<h([1-6])>/g, '<h$1 class="html-heading html-heading-$1">');
+  // Enhance lists with better styling
+  prettified = prettified.replace(/<ul>/g, '<ul class="html-list html-list-unordered">');
+  prettified = prettified.replace(/<ol>/g, '<ol class="html-list html-list-ordered">');
+  // Enhance paragraphs with better spacing
+  prettified = prettified.replace(/<p>/g, '<p class="html-paragraph">');
+  // Enhance code blocks
+  prettified = prettified.replace(/<code>/g, '<code class="html-inline-code">');
+  prettified = prettified.replace(/<pre>/g, '<pre class="html-code-block">');
+  // Enhance blockquotes
+  prettified = prettified.replace(/<blockquote>/g, '<blockquote class="html-blockquote">');
+  // Enhance tables
+  prettified = prettified.replace(/<table>/g, '<table class="html-table">');
+  prettified = prettified.replace(/<th>/g, '<th class="html-table-header">');
+  prettified = prettified.replace(/<td>/g, '<td class="html-table-cell">');
+  // Add info boxes for certain content patterns
+  prettified = prettified.replace(/<p>(Note|Tip|Info|Warning|Error):\s*(.*?)<\/p>/gi, '<div class="html-info-box"><strong>$1:</strong> $2</div>');
+  return prettified;
+};
 // Minimal Builder-like blocks renderer (text/image/button/columns)
 const BuilderLikeRenderer = ({
   blocks
@@ -564,7 +496,7 @@ const BuilderLikeRenderer = ({
       const html = sanitizeHtml(block?.text || block?.data?.text || '');
       return React__default.createElement("div", {
         key: idx,
-        className: "prose prose-sm max-w-none text-gray-800",
+        className: "max-w-none text-gray-800",
         dangerouslySetInnerHTML: {
           __html: html
         }
@@ -606,651 +538,157 @@ const BuilderLikeRenderer = ({
         blocks: col?.blocks || col?.children
       }))));
     }
-    return React__default.createElement("pre", {
+    return React__default.createElement("div", {
       key: idx,
-      className: "text-xs text-gray-600 bg-gray-50 p-2 rounded overflow-x-auto not-prose"
-    }, JSON.stringify(block, null, 2));
+      className: "message-container"
+    }, React__default.createElement("pre", {
+      className: "text-xs text-gray-600 overflow-x-auto"
+    }, JSON.stringify(block, null, 2)));
   }));
 };
-// Enhanced markdown-like renderer for rich text content
-// Helper: render multiple inline lists from a single paragraph like
-// "Intro A: - item1 - item2  Intro B: - item3 - item4"
-const tryRenderMultipleInlineLists = text => {
-  if (!text || !text.includes(' - ') || !text.includes(':')) return null;
-  // Split while keeping the section headers (ending with ":")
-  const segments = text.split(/([^:]+:\s*)/).filter(s => s.length > 0);
-  if (segments.length < 3) return null; // need at least header + content
-  const nodes = [];
-  // Handle leading text before the first header
-  if (segments[0] && !segments[0].endsWith(':')) {
-    const leading = segments[0].trim();
-    if (leading) {
-      nodes.push(React__default.createElement("p", {
-        key: `inline-leading`,
-        className: "text-gray-700 leading-relaxed"
-      }, leading));
-    }
-  }
-  for (let i = 1; i < segments.length; i += 2) {
-    const header = (segments[i] || '').trim();
-    const rest = (segments[i + 1] || '').trim();
-    if (!header.endsWith(':')) continue;
-    const parts = rest.split(/\s-\s+/).filter(p => p.trim());
-    // When split on " - ", the first element is the tail right after header; ignore if empty
-    const items = parts.length && !rest.startsWith('- ') ? parts.slice(1) : parts;
-    if (items.length >= 2) {
-      nodes.push(React__default.createElement("div", {
-        key: `inline-group-${i}`,
-        className: "space-y-2"
-      }, React__default.createElement("p", {
-        className: "text-gray-900 font-semibold leading-relaxed"
-      }, header.replace(/:$/, '')), React__default.createElement("ul", {
-        className: "space-y-2"
-      }, items.map((it, idx) => React__default.createElement("li", {
-        key: `inline-item-${i}-${idx}`,
-        className: "flex items-start space-x-3 items-center"
-      }, React__default.createElement("svg", {
-        className: "w-5 h-5 text-black mt-0.5 flex-shrink-0",
-        fill: "currentColor",
-        viewBox: "0 0 20 20"
-      }, React__default.createElement("path", {
-        fillRule: "evenodd",
-        d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
-        clipRule: "evenodd"
-      })), React__default.createElement("span", {
-        className: "text-gray-700 leading-relaxed"
-      }, it.trim()))))));
-    } else {
-      // Not enough items; treat as plain text
-      const combined = `${header} ${rest}`.trim();
-      if (combined) {
-        nodes.push(React__default.createElement("p", {
-          key: `inline-fallback-${i}`,
-          className: "text-gray-700 leading-relaxed"
-        }, combined));
-      }
-    }
-  }
-  return nodes.length ? nodes : null;
-};
+// Enhanced markdown renderer using react-markdown with remark-gfm
 const FormattedMessageContent = ({
   content
 }) => {
   if (!content) return null;
-  // Debug logging for content
-  console.log('FormattedMessageContent received:', content.substring(0, 200) + '...');
-  // Direct check for a code-looking message (common for AI replies with fenced blocks)
-  if (content.includes('export default function Home()') || content.includes('export default') && content.includes('function') && content.includes('return')) {
-    console.log('Direct code pattern match detected!');
-    // If content has fenced code, extract language and code, removing the fences
-    const fenceMatch = content.match(/```([\w-]*)\n?([\s\S]*?)```/);
-    let language = 'typescript';
-    let codeBody = content;
-    if (fenceMatch) {
-      language = (fenceMatch[1] || 'code').trim() || 'code';
-      codeBody = fenceMatch[2];
-    }
-    // Clean up the code content for better display
-    const cleanCode = codeBody.replace(/^\s+/, '') // Remove leading whitespace
-    .replace(/\s+$/, '') // Remove trailing whitespace
-    .split('\n').map(line => line.trim()).filter(line => line.length > 0).join('\n');
+  // Check if content contains markdown patterns
+  const hasMarkdown = /[#*`>|]/.test(content) || content.includes('```');
+  if (hasMarkdown) {
     return React__default.createElement("div", {
-      className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden"
+      className: "message-container"
     }, React__default.createElement("div", {
-      className: "px-4 py-2 text-sm font-bold text-gray-900"
-    }, language), React__default.createElement("div", {
-      className: "px-4 pb-4 overflow-x-auto"
-    }, React__default.createElement("pre", {
-      className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
-    }, React__default.createElement("code", null, cleanCode))));
-  }
-  // Normalize escaped fences (\``` -> ```)
-  const normalizedContent = content.replace(/\\`{3}/g, '```');
-  // Global fenced-code parse as an early pass (handles cases where block splitting interferes)
-  if (normalizedContent.includes('```')) {
-    const parts = [];
-    const pushTextBlock = (text, key) => {
-      const t = (text || '').trim();
-      if (!t) return;
-      // Try to render multiple inline lists in one paragraph
-      const multiInline = tryRenderMultipleInlineLists(t);
-      if (multiInline) {
-        multiInline.forEach((n, idx) => parts.push(React__default.createElement(React__default.Fragment, {
-          key: `${key}-mil-${idx}`
-        }, n)));
-        return;
-      }
-      if (t.startsWith('# ')) {
-        parts.push(React__default.createElement("h1", {
-          key: key,
-          className: "text-2xl font-bold text-gray-900 mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
-        }, t.substring(2)));
-        return;
-      }
-      if (t.startsWith('## ')) {
-        parts.push(React__default.createElement("h2", {
-          key: key,
-          className: "text-xl font-semibold text-gray-800 mb-3 border-b border-gray-200 pb-2"
-        }, t.substring(3)));
-        return;
-      }
-      if (t.startsWith('### ')) {
-        parts.push(React__default.createElement("h3", {
-          key: key,
-          className: "text-lg font-medium text-gray-700 mb-2"
-        }, t.substring(4)));
-        return;
-      }
-      // Inline list heuristic: bullet items written on one line separated by " - "
-      if (!t.includes('\n') && t.includes(' - ') && t.split(' - ').length >= 3) {
-        const [intro, ...rawItems] = t.split(/\s-\s+/);
-        parts.push(React__default.createElement("div", {
-          key: `${key}-inline-list`,
-          className: "space-y-2"
-        }, intro.trim() ? React__default.createElement("p", {
-          className: "text-gray-700 leading-relaxed"
-        }, intro.trim()) : null, React__default.createElement("ul", {
-          className: "space-y-2"
-        }, rawItems.map((item, itemIndex) => React__default.createElement("li", {
-          key: `${key}-inli-${itemIndex}`,
-          className: "flex items-start space-x-3 items-center"
-        }, React__default.createElement("svg", {
-          className: "w-5 h-5 text-black mt-0.5 flex-shrink-0",
-          fill: "currentColor",
-          viewBox: "0 0 20 20"
-        }, React__default.createElement("path", {
-          fillRule: "evenodd",
-          d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
-          clipRule: "evenodd"
-        })), React__default.createElement("span", {
-          className: "text-gray-700 leading-relaxed"
-        }, item.trim()))))));
-        return;
-      }
-      if (t.startsWith('- ') || t.startsWith('• ')) {
-        const items = t.split('\n').filter(line => line.trim());
-        parts.push(React__default.createElement("div", {
-          key: key,
-          className: "bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg"
-        }, React__default.createElement("ul", {
-          className: "space-y-2"
-        }, items.map((item, itemIndex) => React__default.createElement("li", {
-          key: `${key}-li-${itemIndex}`,
-          className: "flex items-start space-x-3 items-center"
-        }, React__default.createElement("svg", {
-          className: "w-5 h-5 text-black mt-0.5 flex-shrink-0",
-          fill: "currentColor",
-          viewBox: "0 0 20 20"
-        }, React__default.createElement("path", {
-          fillRule: "evenodd",
-          d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
-          clipRule: "evenodd"
-        })), React__default.createElement("span", {
-          className: "text-gray-700 leading-relaxed"
-        }, item.replace(/^[\u2212\-•]\s*/, '')))))));
-        return;
-      }
-      if (isProbablyHTML(t)) {
-        parts.push(React__default.createElement("div", {
-          key: key,
-          className: "prose prose-sm max-w-none text-gray-800",
-          dangerouslySetInnerHTML: {
-            __html: sanitizeHtml(t)
-          }
-        }));
-        return;
-      }
-      if (t.includes('**') || t.includes('`')) {
-        const formatted = t.replace(/\*\*(.*?)\*\*/g, '<span class="font-semibold text-gray-900 bg-yellow-100 px-1 py-0.5 rounded">$1</span>').replace(/`([^`]+)`/g, '<code class="bg-gray-100 px-2 py-1 rounded text-sm font-mono text-gray-800">$1</code>');
-        parts.push(React__default.createElement("div", {
-          key: key,
+      className: "markdown-content"
+    }, React__default.createElement(ReactMarkdown, {
+      remarkPlugins: [remarkGfm],
+      components: {
+        // Custom styling for code blocks
+        code: ({
+          className,
+          children,
+          ...props
+        }) => {
+          const match = /language-(\w+)/.exec(className || '');
+          const isInline = !className?.includes('language-');
+          return !isInline ? React__default.createElement("div", {
+            className: "code-block-container"
+          }, React__default.createElement("div", {
+            className: "code-block-header"
+          }, match?.[1] || 'code'), React__default.createElement("div", {
+            className: "code-block-content"
+          }, React__default.createElement("pre", {
+            className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap"
+          }, React__default.createElement("code", {
+            className: className,
+            ...props
+          }, children)))) : React__default.createElement("code", {
+            className: "bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono text-gray-800 border border-gray-200",
+            ...props
+          }, children);
+        },
+        // Custom styling for headings
+        h1: ({
+          children,
+          ...props
+        }) => React__default.createElement("h1", {
+          className: "text-xl font-bold text-gray-900 mb-3",
+          ...props
+        }, children),
+        h2: ({
+          children,
+          ...props
+        }) => React__default.createElement("h2", {
+          className: "text-lg font-semibold text-gray-800 mb-2",
+          ...props
+        }, children),
+        h3: ({
+          children,
+          ...props
+        }) => React__default.createElement("h3", {
+          className: "text-base font-medium text-gray-700 mb-2",
+          ...props
+        }, children),
+        // Custom styling for lists
+        ul: ({
+          children,
+          ...props
+        }) => React__default.createElement("ul", {
+          className: "space-y-1",
+          ...props
+        }, children),
+        ol: ({
+          children,
+          ...props
+        }) => React__default.createElement("ol", {
+          className: "space-y-1",
+          ...props
+        }, children),
+        li: ({
+          children,
+          ...props
+        }) => React__default.createElement("li", {
           className: "text-gray-700 leading-relaxed",
-          dangerouslySetInnerHTML: {
-            __html: sanitizeHtml(formatted)
-          }
-        }));
-        return;
-      }
-      // Check if the text looks like a code block (contains programming keywords, syntax, etc.)
-      if (isCodeBlock(t)) {
-        // Clean up the code content for better display
-        const cleanCode = t.replace(/^\s+/, '') // Remove leading whitespace
-        .replace(/\s+$/, '') // Remove trailing whitespace
-        .split('\n').map(line => line.trim()).filter(line => line.length > 0).join('\n');
-        parts.push(React__default.createElement("div", {
-          key: key,
-          className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden"
-        }, React__default.createElement("div", {
-          className: "px-4 py-2 text-sm font-bold text-gray-900"
-        }, "typescript"), React__default.createElement("div", {
-          className: "px-4 pb-4 overflow-x-auto"
-        }, React__default.createElement("pre", {
-          className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
-        }, React__default.createElement("code", null, cleanCode)))));
-        return;
-      }
-      parts.push(React__default.createElement("p", {
-        key: key,
-        className: "text-gray-700 leading-relaxed whitespace-pre-wrap"
-      }, t));
-    };
-    // Improved regex to handle multiline code blocks better
-    const codeRegex = /```([\w-]*)\n?([\s\S]*?)```/g;
-    let lastIndex = 0;
-    let m;
-    let foundAnyFence = false;
-    while ((m = codeRegex.exec(normalizedContent)) !== null) {
-      foundAnyFence = true;
-      const [full, lang, code] = m;
-      const before = normalizedContent.slice(lastIndex, m.index);
-      pushTextBlock(before, `global-before-${lastIndex}`);
-      const language = (lang || '').trim() || 'code';
-      // Clean up the code content properly
-      const cleanCode = code.replace(/^\s+/, '') // Remove leading whitespace
-      .replace(/\s+$/, '') // Remove trailing whitespace
-      .split('\n').map(line => line.trim()).filter(line => line.length > 0).join('\n');
-      parts.push(React__default.createElement("div", {
-        key: `global-code-${m.index}`,
-        className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
-      }, React__default.createElement("div", {
-        className: "px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200"
-      }, language), React__default.createElement("div", {
-        className: "px-4 py-4 overflow-x-auto bg-white"
-      }, React__default.createElement("pre", {
-        className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
-      }, React__default.createElement("code", null, cleanCode)))));
-      lastIndex = m.index + full.length;
-    }
-    const after = normalizedContent.slice(lastIndex);
-    if (!foundAnyFence) {
-      // Fallback: opening fence exists but no closing fence found
-      const fenceIndex = normalizedContent.indexOf('```');
-      const before = normalizedContent.slice(0, fenceIndex);
-      const afterFence = normalizedContent.slice(fenceIndex + 3); // skip opening backticks
-      // Try to read language up to end of line. If none, treat whole remainder as code.
-      const firstNewline = afterFence.indexOf('\n');
-      const language = firstNewline >= 0 ? afterFence.slice(0, firstNewline).trim() || 'code' : 'code';
-      const rawCodeBody = firstNewline >= 0 ? afterFence.slice(firstNewline + 1) : afterFence;
-      const codeBody = rawCodeBody.replace(/^\s+/, '').replace(/\s+$/, '').split('\n').map(line => line.trimEnd()).join('\n');
-      pushTextBlock(before, `global-fallback-before-${fenceIndex}`);
-      parts.push(React__default.createElement("div", {
-        key: `global-fallback-code-${fenceIndex}`,
-        className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
-      }, React__default.createElement("div", {
-        className: "px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200"
-      }, language), React__default.createElement("div", {
-        className: "px-4 py-4 overflow-x-auto bg-white"
-      }, React__default.createElement("pre", {
-        className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
-      }, React__default.createElement("code", null, codeBody)))));
-    } else {
-      // If there's a dangling opening fence in the tail, render it as a fallback code block
-      if (after.includes('```')) {
-        const fenceIndexTail = after.indexOf('```');
-        const beforeTail = after.slice(0, fenceIndexTail);
-        const afterFenceTail = after.slice(fenceIndexTail + 3);
-        const firstNewlineTail = afterFenceTail.indexOf('\n');
-        const languageTail = firstNewlineTail >= 0 ? afterFenceTail.slice(0, firstNewlineTail).trim() || 'code' : 'code';
-        const rawCodeTail = firstNewlineTail >= 0 ? afterFenceTail.slice(firstNewlineTail + 1) : afterFenceTail;
-        const cleanTail = rawCodeTail.replace(/^\s+/, '').replace(/\s+$/, '').split('\n').map(line => line.trimEnd()).join('\n');
-        pushTextBlock(beforeTail, `global-after-text-${lastIndex}`);
-        parts.push(React__default.createElement("div", {
-          key: `global-after-fallback-code-${lastIndex}`,
-          className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
-        }, React__default.createElement("div", {
-          className: "px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200"
-        }, languageTail), React__default.createElement("div", {
-          className: "px-4 py-4 overflow-x-auto bg-white"
-        }, React__default.createElement("pre", {
-          className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
-        }, React__default.createElement("code", null, cleanTail)))));
-      } else {
-        pushTextBlock(after, `global-after-${lastIndex}`);
+          ...props
+        }, children),
+        // Custom styling for blockquotes
+        blockquote: ({
+          children,
+          ...props
+        }) => React__default.createElement("blockquote", {
+          className: "border-l-4 border-blue-400 pl-3 py-2 bg-blue-50 rounded-r-md my-3",
+          ...props
+        }, children),
+        // Custom styling for tables
+        table: ({
+          children,
+          ...props
+        }) => React__default.createElement("div", {
+          className: "overflow-x-auto my-3"
+        }, React__default.createElement("table", {
+          className: "min-w-full border border-gray-200 rounded-md overflow-hidden",
+          ...props
+        }, children)),
+        th: ({
+          children,
+          ...props
+        }) => React__default.createElement("th", {
+          className: "px-3 py-2 text-left font-medium text-gray-700 border border-gray-200",
+          ...props
+        }, children),
+        td: ({
+          children,
+          ...props
+        }) => React__default.createElement("td", {
+          className: "px-3 py-2 border border-gray-200 text-gray-700",
+          ...props
+        }, children),
+        // Custom styling for task lists (from remark-gfm)
+        input: ({
+          checked,
+          ...props
+        }) => React__default.createElement("input", {
+          type: "checkbox",
+          checked: checked,
+          readOnly: true,
+          className: "mr-2 mt-1 h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500",
+          ...props
+        }),
+        // Custom styling for strikethrough (from remark-gfm)
+        del: ({
+          children,
+          ...props
+        }) => React__default.createElement("del", {
+          className: "text-gray-500 line-through",
+          ...props
+        }, children)
       }
-    }
-    return React__default.createElement("div", {
-      className: "space-y-4"
-    }, parts);
+    }, content)));
   }
-  // Split content into blocks for better formatting
-  const blocks = normalizedContent.split('\n\n').filter(block => block.trim());
-  // Debug logging for blocks
-  console.log('Content blocks:', blocks.map(b => b.substring(0, 100) + '...'));
+  // For plain text content
   return React__default.createElement("div", {
-    className: "space-y-4"
-  }, blocks.map((block, index) => {
-    const trimmedBlock = block.trim();
-    // Debug logging for individual blocks
-    console.log(`Block ${index}:`, trimmedBlock.substring(0, 100) + '...');
-    console.log(`Block ${index} isCodeBlock:`, isCodeBlock(trimmedBlock));
-    // If the block contains fenced code anywhere, render text parts + code parts in order
-    if (trimmedBlock.includes('```')) {
-      const parts = [];
-      const pushTextBlock = (text, key) => {
-        const t = (text || '').trim();
-        if (!t) return;
-        const multiInlineInner = tryRenderMultipleInlineLists(t);
-        if (multiInlineInner) {
-          multiInlineInner.forEach((n, idx) => parts.push(React__default.createElement(React__default.Fragment, {
-            key: `${key}-mil-${idx}`
-          }, n)));
-          return;
-        }
-        if (t.startsWith('# ')) {
-          parts.push(React__default.createElement("h1", {
-            key: key,
-            className: "text-2xl font-bold text-gray-900 mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
-          }, t.substring(2)));
-          return;
-        }
-        if (t.startsWith('## ')) {
-          parts.push(React__default.createElement("h2", {
-            key: key,
-            className: "text-xl font-semibold text-gray-800 mb-3 border-b border-gray-200 pb-2"
-          }, t.substring(3)));
-          return;
-        }
-        if (t.startsWith('### ')) {
-          parts.push(React__default.createElement("h3", {
-            key: key,
-            className: "text-lg font-medium text-gray-700 mb-2"
-          }, t.substring(4)));
-          return;
-        }
-        // Inline list heuristic inside block
-        if (!t.includes('\n') && t.includes(' - ') && t.split(' - ').length >= 3) {
-          const [intro, ...rawItems] = t.split(/\s-\s+/);
-          parts.push(React__default.createElement("div", {
-            key: `${key}-inline-list`,
-            className: "space-y-2"
-          }, intro.trim() ? React__default.createElement("p", {
-            className: "text-gray-700 leading-relaxed"
-          }, intro.trim()) : null, React__default.createElement("ul", {
-            className: "space-y-2"
-          }, rawItems.map((item, itemIndex) => React__default.createElement("li", {
-            key: `${key}-inli-${itemIndex}`,
-            className: "flex items-start space-x-3 items-center"
-          }, React__default.createElement("svg", {
-            className: "w-5 h-5 text-black mt-0.5 flex-shrink-0",
-            fill: "currentColor",
-            viewBox: "0 0 20 20"
-          }, React__default.createElement("path", {
-            fillRule: "evenodd",
-            d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
-            clipRule: "evenodd"
-          })), React__default.createElement("span", {
-            className: "text-gray-700 leading-relaxed"
-          }, item.trim()))))));
-          return;
-        }
-        if (t.startsWith('- ') || t.startsWith('• ')) {
-          const items = t.split('\n').filter(line => line.trim());
-          parts.push(
-          // <div key={key} className="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
-          React__default.createElement("div", {
-            key: key,
-            className: " p-4 rounded-r-lg"
-          }, React__default.createElement("ul", {
-            className: "space-y-2"
-          }, items.map((item, itemIndex) => React__default.createElement("li", {
-            key: `${key}-li-${itemIndex}`,
-            className: "flex items-start space-x-3 items-center"
-          }, React__default.createElement("svg", {
-            className: "w-5 h-5 text-black mt-0.5 flex-shrink-0",
-            fill: "currentColor",
-            viewBox: "0 0 20 20"
-          }, React__default.createElement("path", {
-            fillRule: "evenodd",
-            d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
-            clipRule: "evenodd"
-          })), React__default.createElement("span", {
-            className: "text-gray-700 leading-relaxed"
-          }, item.replace(/^[\u2212\-•]\s*/, '')))))));
-          return;
-        }
-        if (t.includes('**') || t.includes('`')) {
-          const formatted = t.replace(/\*\*(.*?)\*\*/g, '<span class="font-semibold text-gray-900 bg-yellow-100 px-1 py-0.5 rounded">$1</span>').replace(/`([^`]+)`/g, '<code class="bg-gray-100 px-2 py-1 rounded text-sm font-mono text-gray-800">$1</code>');
-          parts.push(React__default.createElement("div", {
-            key: key,
-            className: "text-gray-700 leading-relaxed",
-            dangerouslySetInnerHTML: {
-              __html: sanitizeHtml(formatted)
-            }
-          }));
-          return;
-        }
-        // Check if the text looks like a code block (contains programming keywords, syntax, etc.)
-        if (isCodeBlock(t)) {
-          // Clean up the code content for better display
-          const cleanCode = t.replace(/^\s+/, '') // Remove leading whitespace
-          .replace(/\s+$/, '') // Remove trailing whitespace
-          .split('\n').map(line => line.trim()).filter(line => line.length > 0).join('\n');
-          parts.push(React__default.createElement("div", {
-            key: key,
-            className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden"
-          }, React__default.createElement("div", {
-            className: "px-4 py-2 text-sm font-bold text-gray-900"
-          }, "typescript"), React__default.createElement("div", {
-            className: "px-4 pb-4 overflow-x-auto"
-          }, React__default.createElement("pre", {
-            className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
-          }, React__default.createElement("code", null, cleanCode)))));
-          return;
-        }
-        parts.push(React__default.createElement("p", {
-          key: key,
-          className: "text-gray-700 leading-relaxed whitespace-pre-wrap"
-        }, t));
-      };
-      const codeRegex = /```([\w-]*)\n?([\s\S]*?)```/g;
-      let lastIndex = 0;
-      let match;
-      while ((match = codeRegex.exec(trimmedBlock)) !== null) {
-        const [full, lang, code] = match;
-        const before = trimmedBlock.slice(lastIndex, match.index).trim();
-        pushTextBlock(before, `${index}-before-${lastIndex}`);
-        const language = (lang || '').trim() || 'code';
-        // Clean up the code content properly
-        const cleanCode = code.replace(/^\s+/, '') // Remove leading whitespace
-        .replace(/\s+$/, '') // Remove trailing whitespace
-        .split('\n').map(line => line.trim()).filter(line => line.length > 0).join('\n');
-        parts.push(React__default.createElement("div", {
-          key: `${index}-code-${match.index}`,
-          className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
-        }, React__default.createElement("div", {
-          className: "px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200"
-        }, language), React__default.createElement("div", {
-          className: "px-4 py-4 overflow-x-auto bg-white"
-        }, React__default.createElement("pre", {
-          className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
-        }, React__default.createElement("code", null, cleanCode)))));
-        lastIndex = match.index + full.length;
-      }
-      const after = trimmedBlock.slice(lastIndex).trim();
-      pushTextBlock(after, `${index}-after`);
-      return React__default.createElement("div", {
-        key: index,
-        className: "space-y-3"
-      }, parts);
-    }
-    // Raw HTML support per block
-    if (isProbablyHTML(trimmedBlock)) {
-      return React__default.createElement("div", {
-        key: index,
-        className: "prose prose-sm max-w-none text-gray-800",
-        dangerouslySetInnerHTML: {
-          __html: sanitizeHtml(trimmedBlock)
-        }
-      });
-    }
-    // Check for different content types
-    if (trimmedBlock.startsWith('# ')) {
-      // Main heading
-      return React__default.createElement("h1", {
-        key: index,
-        className: "text-2xl font-bold text-gray-900 mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
-      }, trimmedBlock.substring(2));
-    } else if (trimmedBlock.startsWith('## ')) {
-      // Secondary heading
-      return React__default.createElement("h2", {
-        key: index,
-        className: "text-xl font-semibold text-gray-800 mb-3 border-b border-gray-200 pb-2"
-      }, trimmedBlock.substring(3));
-    } else if (trimmedBlock.startsWith('### ')) {
-      // Tertiary heading
-      return React__default.createElement("h3", {
-        key: index,
-        className: "text-lg font-medium text-gray-700 mb-2"
-      }, trimmedBlock.substring(4));
-    } else if (trimmedBlock.startsWith('- ') || trimmedBlock.startsWith('• ')) {
-      // Bullet points
-      const items = trimmedBlock.split('\n').filter(line => line.trim());
-      return (
-        // <div key={index} className="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
-        React__default.createElement("div", {
-          key: index,
-          className: " p-4 rounded-r-lg"
-        }, React__default.createElement("ul", {
-          className: "space-y-2"
-        }, items.map((item, itemIndex) => React__default.createElement("li", {
-          key: itemIndex,
-          className: "flex items-start space-x-3 items-center"
-        }, React__default.createElement("svg", {
-          className: "w-5 h-5 text-black mt-0.5 flex-shrink-0",
-          fill: "currentColor",
-          viewBox: "0 0 20 20"
-        }, React__default.createElement("path", {
-          fillRule: "evenodd",
-          d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
-          clipRule: "evenodd"
-        })), React__default.createElement("span", {
-          className: "text-gray-700 leading-relaxed"
-        }, item.replace(/^[-•]\s*/, '').split(/(\*\*.*?\*\*)/).map((part, partIndex) => {
-          if (part.match(/\*\*.*?\*\*/)) {
-            // Extract text between ** markers and make it bold
-            const boldText = part.replace(/\*\*/g, '');
-            return React__default.createElement("strong", {
-              key: partIndex,
-              className: "font-semibold text-gray-900"
-            }, boldText);
-          }
-          return part;
-        }))))))
-      );
-    } else if (trimmedBlock.startsWith('```')) {
-      // Code block
-      const codeMatch = trimmedBlock.match(/^```([\w-]*)\n?([\s\S]*?)```$/);
-      if (codeMatch) {
-        const [, language, codeContent] = codeMatch;
-        const lang = (language || '').trim() || 'code';
-        // Clean up the code content properly
-        const cleanCode = codeContent.replace(/^\s+/, '') // Remove leading whitespace
-        .replace(/\s+$/, '') // Remove trailing whitespace
-        .split('\n').map(line => line.trim()).filter(line => line.length > 0).join('\n');
-        return React__default.createElement("div", {
-          key: index,
-          className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
-        }, React__default.createElement("div", {
-          className: "px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200"
-        }, lang), React__default.createElement("div", {
-          className: "px-4 py-4 overflow-x-auto bg-white"
-        }, React__default.createElement("pre", {
-          className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
-        }, React__default.createElement("code", null, cleanCode))));
-      }
-      // Fallback for malformed code blocks
-      const codeContent = trimmedBlock.replace(/^```[\w]*\n?/, '').replace(/```$/, '');
-      // If the fenced code actually looks like plain bullet text, render as text instead of code
-      const hyphenLines = codeContent.split('\n').filter(l => /^[-•]/.test(l.trim())).length;
-      const hasCodeSymbols = /[{}<>;=]/.test(codeContent) || /\b(function|class|import|export)\b/.test(codeContent);
-      if (hyphenLines >= 2 && !hasCodeSymbols) {
-        return React__default.createElement("p", {
-          key: index,
-          className: "text-gray-700 leading-relaxed whitespace-pre-wrap"
-        }, codeContent);
-      }
-      return React__default.createElement("div", {
-        key: index,
-        className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
-      }, React__default.createElement("div", {
-        className: "px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200"
-      }, "code"), React__default.createElement("div", {
-        className: "px-4 py-4 overflow-x-auto bg-white"
-      }, React__default.createElement("pre", {
-        className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
-      }, React__default.createElement("code", null, codeContent))));
-    } else if (trimmedBlock.startsWith('🔧 ')) {
-      // Tool status message - render as bordered container
-      const toolText = trimmedBlock.substring(2); // Remove the 🔧 emoji
-      return React__default.createElement("div", {
-        key: index,
-        className: "mt-2"
-      }, React__default.createElement("div", {
-        className: "inline-block px-3 py-1 bg-gray-100 border border-gray-300 rounded-lg text-sm text-gray-700"
-      }, React__default.createElement("span", {
-        className: "text-green-500 mr-2"
-      }, "\uD83D\uDD27"), toolText));
-    } else if (trimmedBlock.includes('**') || trimmedBlock.includes('`')) {
-      // Inline formatting (bold, inline code, highlights)
-      const formattedContent = trimmedBlock.replace(/\*\*(.*?)\*\*/g, '<span class="font-semibold text-gray-900 bg-yellow-100 px-1 py-0.5 rounded">$1</span>').replace(/`([^`]+)`/g, '<code class="bg-gray-100 px-2 py-1 rounded text-sm font-mono text-gray-800">$1</code>');
-      return React__default.createElement("div", {
-        key: index,
-        className: "text-gray-700 leading-relaxed",
-        dangerouslySetInnerHTML: {
-          __html: sanitizeHtml(formattedContent)
-        }
-      });
-    } else if (isCodeBlock(trimmedBlock)) {
-      // Code block detection for content that looks like code
-      // Clean up the code content for better display
-      const cleanCode = trimmedBlock.replace(/^\s+/, '') // Remove leading whitespace
-      .replace(/\s+$/, '') // Remove trailing whitespace
-      .split('\n').map(line => line.trim()).filter(line => line.length > 0).join('\n');
-      // Heuristic: if the "code" contains many leading hyphen bullets and no typical code symbols, treat as text
-      const hyphenLines = cleanCode.split('\n').filter(l => /^[-•]/.test(l.trim())).length;
-      const hasCodeSymbols = /[{}<>;=]/.test(cleanCode) || /\b(function|class|import|export)\b/.test(cleanCode);
-      if (hyphenLines >= 2 && !hasCodeSymbols) {
-        return React__default.createElement("p", {
-          key: index,
-          className: "text-gray-700 leading-relaxed whitespace-pre-wrap"
-        }, trimmedBlock);
-      }
-      return React__default.createElement("div", {
-        key: index,
-        className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden"
-      }, React__default.createElement("div", {
-        className: "px-4 py-2 text-sm font-bold text-gray-900"
-      }, "typescript"), React__default.createElement("div", {
-        className: "px-4 pb-4 overflow-x-auto"
-      }, React__default.createElement("pre", {
-        className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
-      }, React__default.createElement("code", null, cleanCode))));
-    } else if (
-    // Fallback: More aggressive code detection for specific patterns
-    trimmedBlock.includes('export default') || trimmedBlock.includes('function') || trimmedBlock.includes('return (') || trimmedBlock.includes('className=') || trimmedBlock.includes('Route::') || trimmedBlock.includes('class Post') || trimmedBlock.includes('extends Model') || trimmedBlock.includes('extends Controller') || trimmedBlock.includes('{') && trimmedBlock.includes('}') && trimmedBlock.includes(';')) {
-      console.log('Fallback code detection triggered for block:', trimmedBlock.substring(0, 100) + '...');
-      // Clean up the code content for better display
-      const cleanCode = trimmedBlock.replace(/^\s+/, '') // Remove leading whitespace
-      .replace(/\s+$/, '') // Remove trailing whitespace
-      .split('\n').map(line => line.trim()).filter(line => line.length > 0).join('\n');
-      return React__default.createElement("div", {
-        key: index,
-        className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
-      }, React__default.createElement("div", {
-        className: "px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200"
-      }, "code"), React__default.createElement("div", {
-        className: "px-4 py-4 overflow-x-auto bg-white"
-      }, React__default.createElement("pre", {
-        className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
-      }, React__default.createElement("code", null, cleanCode))));
-    } else {
-      // Regular paragraph
-      return React__default.createElement("p", {
-        key: index,
-        className: "text-gray-700 leading-relaxed whitespace-pre-wrap"
-      }, trimmedBlock);
-    }
-  }));
+    className: "message-container"
+  }, React__default.createElement("p", {
+    className: "text-gray-700 leading-relaxed whitespace-pre-wrap"
+  }, content));
 };
 // Detect predominant text direction (RTL/LTR) for international content
 const detectTextDirection = text => {
@@ -1377,26 +815,27 @@ const ModernMessageBubble = ({
   const handleClick = () => {
     onMessageClick?.(message);
   };
+  const isAssistantRole = message?.propsConfiguration?.contents?.role === 'ASSISTANT';
   // For user messages, create a right-aligned layout with avatar and name
   if (isOwnMessage) {
     const authorName = message.author?.givenName && message.author?.familyName ? `${message.author.givenName} ${message.author.familyName}` : message.author?.username || 'You';
     return React__default.createElement("div", {
-      className: "py-1 hover:bg-gray-50 hover:bg-opacity-50 rounded px-1 sm:px-2 -mx-1 sm:-mx-2 group"
+      className: `py-1 hover:bg-gray-50 hover:bg-opacity-50 rounded px-1 sm:px-2 -mx-1 sm:-mx-2 group ${isAssistantRole ? 'border border-gray-200' : ''}`
     }, React__default.createElement("div", {
       className: "flex items-start justify-end gap-2"
     }, React__default.createElement("div", {
       className: "flex flex-col items-end max-w-xs lg:max-w-md"
-    }, React__default.createElement("div", {
+    }, !isAssistantRole && React__default.createElement("div", {
       className: "flex items-end space-x-2 mb-0.5"
     }, React__default.createElement("span", {
       className: "text-sm font-semibold text-gray-900"
     }, authorName)), React__default.createElement("div", {
-      className: "text-sm text-gray-900 cursor-pointer hover:bg-gray-100 px-1 sm:px-2 py-1 rounded",
-      onClick: handleClick,
+      className: `text-sm text-gray-900 ${isAssistantRole ? 'cursor-pointer' : ''}  px-1 sm:px-2 py-1 rounded`,
+      onClick: isAssistantRole ? handleClick : undefined,
       dir: detectTextDirection(message?.message || ''),
       lang: detectLanguageTag(message?.message || '')
     }, message.message && React__default.createElement("div", {
-      className: "prose prose-sm max-w-none"
+      className: "max-w-none"
     }, isProbablyHTML(message.message) ? React__default.createElement("div", {
       className: "text-gray-800 html-content",
       dangerouslySetInnerHTML: {
@@ -1417,13 +856,13 @@ const ModernMessageBubble = ({
     }, React__default.createElement(FilesList, {
       uploaded: true,
       files: message.files.data
-    })))), React__default.createElement("div", {
+    })))), !isAssistantRole && React__default.createElement("div", {
       className: "flex-shrink-0 mt-0.5"
     }, React__default.createElement("img", {
-      className: "w-8 h-8 sm:w-10 sm:h-10 rounded-lg cursor-pointer hover:opacity-80 transition-opacity object-cover",
+      className: `w-8 h-8 sm:w-10 sm:h-10 rounded-lg ${isAssistantRole ? '' : 'cursor-pointer hover:opacity-80'} transition-opacity object-cover`,
       src: message.author?.picture || '/default-avatar.svg',
       alt: authorName,
-      onClick: handleClick,
+      onClick: isAssistantRole ? undefined : handleClick,
       onError: e => {
         e.currentTarget.src = '/default-avatar.svg';
       }
@@ -1431,20 +870,20 @@ const ModernMessageBubble = ({
   }
   // For other messages (left-aligned with full formatting)
   return React__default.createElement("div", {
-    className: `group/message transition-all duration-200 hover:bg-gray-50 rounded-lg px-3 py-1 -mx-3 ${isSystemMessage ? '' : 'cursor-pointer'}`,
-    onClick: isSystemMessage ? undefined : handleClick
+    className: `group/message transition-all duration-200 hover:bg-gray-50 rounded-lg px-3 py-1 -mx-3 ${isSystemMessage || isAssistantRole ? '' : 'cursor-pointer'}`,
+    onClick: isSystemMessage || isAssistantRole ? undefined : handleClick
   }, React__default.createElement("div", {
     className: "flex items-start justify-between gap-3"
   }, React__default.createElement("div", {
     className: "flex-1 min-w-0"
   }, message.message && React__default.createElement("div", {
-    className: `prose prose-sm max-w-none ${isSystemMessage ? 'text-gray-800' : 'text-gray-900'}`,
+    className: `max-w-none ${isSystemMessage ? 'text-gray-800' : 'text-gray-900'}`,
     dir: detectTextDirection(message?.message || ''),
     lang: detectLanguageTag(message?.message || '')
   }, message.message.includes('```') ? React__default.createElement(FormattedMessageContent, {
     content: message.message
   }) : isProbablyHTML(message.message) ? React__default.createElement("div", {
-    className: "prose prose-sm max-w-none text-gray-800 html-content",
+    className: "max-w-none text-gray-800 html-content",
     dangerouslySetInnerHTML: {
       __html: prettifyHtmlContent(sanitizeHtml(message.message))
     }
@@ -1499,7 +938,11 @@ const ModernMessageGroupComponent = ({
   onOpen,
   onMessageClick,
   isDesktopView = false,
-  isSmallScreen = false
+  isSmallScreen = false,
+  sandboxErrors = [],
+  currentFiles = {},
+  onFixError,
+  onRecreateSandbox
 }) => {
   // Inject CSS styles for HTML content
   useInjectStyles();
@@ -1521,5 +964,13 @@ const ModernMessageGroupComponent = ({
       isDesktopView: isDesktopView,
       isSmallScreen: isSmallScreen
     });
-  }));
+  }), sandboxErrors?.map(error => React__default.createElement("div", {
+    key: error.id,
+    className: "px-2"
+  }, React__default.createElement(ErrorFixCard, {
+    error: error,
+    onFixError: onFixError || (() => Promise.resolve()),
+    currentFiles: currentFiles,
+    isFixing: false
+  }))));
 };export{ModernMessageGroupComponent,groupMessagesByUserAndTime};//# sourceMappingURL=ModernMessageGroup.js.map