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

package/src/components/InboxMessage/message-widgets/ModernMessageGroup.tsx

@@ -1,7 +1,10 @@
 import React, { useEffect } from 'react';
-import { format, formatDistanceToNow, differenceInMinutes } from 'date-fns';
-import { IAuthUser, IPost } from 'common';
+import { format, differenceInMinutes } from 'date-fns';
+import { IAuthUser, IPost, ISandboxError } from 'common';
 import { FilesList } from '../../inbox';
+import { ErrorFixCard } from './ErrorFixCard';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 // Enhanced CSS styles for HTML content rendering with prettification
 const htmlContentStyles = `
@@ -177,216 +180,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;
@@ -394,48 +364,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;
     }
-`;
 
-// Function to prettify HTML content
-const prettifyHtmlContent = (htmlContent: string): string => {
-    // 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;
-};
+    .hover\:bg-gray-100:hover {
+        background-color: transparent !important;
+    }
+`;
 
 // Hook to inject CSS styles
 const useInjectStyles = () => {
@@ -468,6 +405,10 @@ interface ModernMessageGroupProps {
     onMessageClick: (msg: IPost) => void;
     isDesktopView?: boolean;
     isSmallScreen?: boolean;
+    sandboxErrors?: ISandboxError[];
+    currentFiles?: Record<string, string>;
+    onFixError?: (errorMessage: string) => Promise<void>;
+    onRecreateSandbox?: (fragmentId: string) => void;
 }
 
 interface MessageGroupProps {
@@ -539,56 +480,6 @@ const isProbablyHTML = (value: string): boolean => {
     );
 };
 
-// Detect if a string looks like a code block
-const isCodeBlock = (text: string): boolean => {
-    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: string): string => {
     try {
@@ -638,6 +529,42 @@ const sanitizeHtml = (html: string): string => {
     }
 };
 
+// Function to prettify HTML content
+const prettifyHtmlContent = (htmlContent: string): string => {
+    // 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: React.FC<{ blocks?: any[] }> = ({ blocks }) => {
     if (!blocks || !Array.isArray(blocks) || blocks.length === 0) return null;
@@ -653,7 +580,7 @@ const BuilderLikeRenderer: React.FC<{ blocks?: any[] }> = ({ blocks }) => {
                     return (
                         <div
                             key={idx}
-                            className="prose prose-sm max-w-none text-gray-800"
+                            className="max-w-none text-gray-800"
                             dangerouslySetInnerHTML={{ __html: html }}
                         />
                     );
@@ -700,880 +627,147 @@ const BuilderLikeRenderer: React.FC<{ blocks?: any[] }> = ({ blocks }) => {
                 }
 
                 return (
-                    <pre key={idx} className="text-xs text-gray-600 bg-gray-50 p-2 rounded overflow-x-auto not-prose">
-                        {JSON.stringify(block, null, 2)}
-                    </pre>
+                    <div key={idx} className="message-container">
+                        <pre className="text-xs text-gray-600 overflow-x-auto">{JSON.stringify(block, null, 2)}</pre>
+                    </div>
                 );
             })}
         </div>
     );
 };
 
-// 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: string): React.ReactNode[] | null => {
-    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: React.ReactNode[] = [];
-    // Handle leading text before the first header
-    if (segments[0] && !segments[0].endsWith(':')) {
-        const leading = segments[0].trim();
-        if (leading) {
-            nodes.push(
-                <p key={`inline-leading`} className="text-gray-700 leading-relaxed">
-                    {leading}
-                </p>,
-            );
-        }
-    }
-
-    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(
-                <div key={`inline-group-${i}`} className="space-y-2">
-                    <p className="text-gray-900 font-semibold leading-relaxed">{header.replace(/:$/, '')}</p>
-                    <ul className="space-y-2">
-                        {items.map((it, idx) => (
-                            <li key={`inline-item-${i}-${idx}`} className="flex items-start space-x-3 items-center">
-                                <svg
-                                    className="w-5 h-5 text-black mt-0.5 flex-shrink-0"
-                                    fill="currentColor"
-                                    viewBox="0 0 20 20"
-                                >
-                                    <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"
-                                    />
-                                </svg>
-                                <span className="text-gray-700 leading-relaxed">{it.trim()}</span>
-                            </li>
-                        ))}
-                    </ul>
-                </div>,
-            );
-        } else {
-            // Not enough items; treat as plain text
-            const combined = `${header} ${rest}`.trim();
-            if (combined) {
-                nodes.push(
-                    <p key={`inline-fallback-${i}`} className="text-gray-700 leading-relaxed">
-                        {combined}
-                    </p>,
-                );
-            }
-        }
-    }
-
-    return nodes.length ? nodes : null;
-};
-
+// Enhanced markdown renderer using react-markdown with remark-gfm
 const FormattedMessageContent: React.FC<{ content: string }> = ({ 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 (
-            <div className="rounded-xl border border-gray-200 bg-gray-50 overflow-hidden">
-                <div className="px-4 py-2 text-sm font-bold text-gray-900">{language}</div>
-                <div className="px-4 pb-4 overflow-x-auto">
-                    <pre className="text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose">
-                        <code>{cleanCode}</code>
-                    </pre>
-                </div>
-            </div>
-        );
-    }
-
-    // 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: React.ReactNode[] = [];
-        const pushTextBlock = (text: string, key: string) => {
-            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.Fragment key={`${key}-mil-${idx}`}>{n}</React.Fragment>),
-                );
-                return;
-            }
-            if (t.startsWith('# ')) {
-                parts.push(
-                    <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)}
-                    </h1>,
-                );
-                return;
-            }
-            if (t.startsWith('## ')) {
-                parts.push(
-                    <h2 key={key} className="text-xl font-semibold text-gray-800 mb-3 border-b border-gray-200 pb-2">
-                        {t.substring(3)}
-                    </h2>,
-                );
-                return;
-            }
-            if (t.startsWith('### ')) {
-                parts.push(
-                    <h3 key={key} className="text-lg font-medium text-gray-700 mb-2">
-                        {t.substring(4)}
-                    </h3>,
-                );
-                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(
-                    <div key={`${key}-inline-list`} className="space-y-2">
-                        {intro.trim() ? <p className="text-gray-700 leading-relaxed">{intro.trim()}</p> : null}
-                        <ul className="space-y-2">
-                            {rawItems.map((item, itemIndex) => (
-                                <li
-                                    key={`${key}-inli-${itemIndex}`}
-                                    className="flex items-start space-x-3 items-center"
-                                >
-                                    <svg
-                                        className="w-5 h-5 text-black mt-0.5 flex-shrink-0"
-                                        fill="currentColor"
-                                        viewBox="0 0 20 20"
+            <div className="message-container">
+                <div className="markdown-content">
+                    <ReactMarkdown
+                        remarkPlugins={[remarkGfm]}
+                        components={{
+                            // Custom styling for code blocks
+                            code: ({ className, children, ...props }: any) => {
+                                const match = /language-(\w+)/.exec(className || '');
+                                const isInline = !className?.includes('language-');
+                                return !isInline ? (
+                                    <div className="code-block-container">
+                                        <div className="code-block-header">{match?.[1] || 'code'}</div>
+                                        <div className="code-block-content">
+                                            <pre className="text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap">
+                                                <code className={className} {...props}>
+                                                    {children}
+                                                </code>
+                                            </pre>
+                                        </div>
+                                    </div>
+                                ) : (
+                                    <code
+                                        className="bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono text-gray-800 border border-gray-200"
+                                        {...props}
                                     >
-                                        <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"
-                                        />
-                                    </svg>
-                                    <span className="text-gray-700 leading-relaxed">{item.trim()}</span>
+                                        {children}
+                                    </code>
+                                );
+                            },
+                            // Custom styling for headings
+                            h1: ({ children, ...props }) => (
+                                <h1 className="text-xl font-bold text-gray-900 mb-3" {...props}>
+                                    {children}
+                                </h1>
+                            ),
+                            h2: ({ children, ...props }) => (
+                                <h2 className="text-lg font-semibold text-gray-800 mb-2" {...props}>
+                                    {children}
+                                </h2>
+                            ),
+                            h3: ({ children, ...props }) => (
+                                <h3 className="text-base font-medium text-gray-700 mb-2" {...props}>
+                                    {children}
+                                </h3>
+                            ),
+                            // Custom styling for lists
+                            ul: ({ children, ...props }) => (
+                                <ul className="space-y-1" {...props}>
+                                    {children}
+                                </ul>
+                            ),
+                            ol: ({ children, ...props }) => (
+                                <ol className="space-y-1" {...props}>
+                                    {children}
+                                </ol>
+                            ),
+                            li: ({ children, ...props }) => (
+                                <li className="text-gray-700 leading-relaxed" {...props}>
+                                    {children}
                                 </li>
-                            ))}
-                        </ul>
-                    </div>,
-                );
-                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">
-                        <ul className="space-y-2">
-                            {items.map((item, itemIndex) => (
-                                <li key={`${key}-li-${itemIndex}`} className="flex items-start space-x-3 items-center">
-                                    <svg
-                                        className="w-5 h-5 text-black mt-0.5 flex-shrink-0"
-                                        fill="currentColor"
-                                        viewBox="0 0 20 20"
+                            ),
+                            // Custom styling for blockquotes
+                            blockquote: ({ children, ...props }) => (
+                                <blockquote
+                                    className="border-l-4 border-blue-400 pl-3 py-2 bg-blue-50 rounded-r-md my-3"
+                                    {...props}
+                                >
+                                    {children}
+                                </blockquote>
+                            ),
+                            // Custom styling for tables
+                            table: ({ children, ...props }) => (
+                                <div className="overflow-x-auto my-3">
+                                    <table
+                                        className="min-w-full border border-gray-200 rounded-md overflow-hidden"
+                                        {...props}
                                     >
-                                        <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"
-                                        />
-                                    </svg>
-                                    <span className="text-gray-700 leading-relaxed">
-                                        {item.replace(/^[\u2212\-•]\s*/, '')}
-                                    </span>
-                                </li>
-                            ))}
-                        </ul>
-                    </div>,
-                );
-                return;
-            }
-            if (isProbablyHTML(t)) {
-                parts.push(
-                    <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(
-                    <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(
-                    <div key={key} className="rounded-xl border border-gray-200 bg-gray-50 overflow-hidden">
-                        <div className="px-4 py-2 text-sm font-bold text-gray-900">typescript</div>
-                        <div className="px-4 pb-4 overflow-x-auto">
-                            <pre className="text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose">
-                                <code>{cleanCode}</code>
-                            </pre>
-                        </div>
-                    </div>,
-                );
-                return;
-            }
-            parts.push(
-                <p key={key} className="text-gray-700 leading-relaxed whitespace-pre-wrap">
-                    {t}
-                </p>,
-            );
-        };
-
-        // Improved regex to handle multiline code blocks better
-        const codeRegex = /```([\w-]*)\n?([\s\S]*?)```/g;
-        let lastIndex = 0;
-        let m: RegExpExecArray | null;
-
-        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(
-                <div
-                    key={`global-code-${m.index}`}
-                    className="rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
-                >
-                    <div className="px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200">
-                        {language}
-                    </div>
-                    <div className="px-4 py-4 overflow-x-auto bg-white">
-                        <pre className="text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose">
-                            <code>{cleanCode}</code>
-                        </pre>
-                    </div>
-                </div>,
-            );
-            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(
-                <div
-                    key={`global-fallback-code-${fenceIndex}`}
-                    className="rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
-                >
-                    <div className="px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200">
-                        {language}
-                    </div>
-                    <div className="px-4 py-4 overflow-x-auto bg-white">
-                        <pre className="text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose">
-                            <code>{codeBody}</code>
-                        </pre>
-                    </div>
-                </div>,
-            );
-        } 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(
-                    <div
-                        key={`global-after-fallback-code-${lastIndex}`}
-                        className="rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
+                                        {children}
+                                    </table>
+                                </div>
+                            ),
+                            th: ({ children, ...props }) => (
+                                <th
+                                    className="px-3 py-2 text-left font-medium text-gray-700 border border-gray-200"
+                                    {...props}
+                                >
+                                    {children}
+                                </th>
+                            ),
+                            td: ({ children, ...props }) => (
+                                <td className="px-3 py-2 border border-gray-200 text-gray-700" {...props}>
+                                    {children}
+                                </td>
+                            ),
+                            // Custom styling for task lists (from remark-gfm)
+                            input: ({ checked, ...props }: any) => (
+                                <input
+                                    type="checkbox"
+                                    checked={checked}
+                                    readOnly
+                                    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 }) => (
+                                <del className="text-gray-500 line-through" {...props}>
+                                    {children}
+                                </del>
+                            ),
+                        }}
                     >
-                        <div className="px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200">
-                            {languageTail}
-                        </div>
-                        <div className="px-4 py-4 overflow-x-auto bg-white">
-                            <pre className="text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose">
-                                <code>{cleanTail}</code>
-                            </pre>
-                        </div>
-                    </div>,
-                );
-            } else {
-                pushTextBlock(after, `global-after-${lastIndex}`);
-            }
-        }
-        return <div className="space-y-4">{parts}</div>;
+                        {content}
+                    </ReactMarkdown>
+                </div>
+            </div>
+        );
     }
 
-    // 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 (
-        <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: React.ReactNode[] = [];
-                    const pushTextBlock = (text: string, key: string) => {
-                        const t = (text || '').trim();
-                        if (!t) return;
-                        const multiInlineInner = tryRenderMultipleInlineLists(t);
-                        if (multiInlineInner) {
-                            multiInlineInner.forEach((n, idx) =>
-                                parts.push(<React.Fragment key={`${key}-mil-${idx}`}>{n}</React.Fragment>),
-                            );
-                            return;
-                        }
-                        if (t.startsWith('# ')) {
-                            parts.push(
-                                <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)}
-                                </h1>,
-                            );
-                            return;
-                        }
-                        if (t.startsWith('## ')) {
-                            parts.push(
-                                <h2
-                                    key={key}
-                                    className="text-xl font-semibold text-gray-800 mb-3 border-b border-gray-200 pb-2"
-                                >
-                                    {t.substring(3)}
-                                </h2>,
-                            );
-                            return;
-                        }
-                        if (t.startsWith('### ')) {
-                            parts.push(
-                                <h3 key={key} className="text-lg font-medium text-gray-700 mb-2">
-                                    {t.substring(4)}
-                                </h3>,
-                            );
-                            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(
-                                <div key={`${key}-inline-list`} className="space-y-2">
-                                    {intro.trim() ? (
-                                        <p className="text-gray-700 leading-relaxed">{intro.trim()}</p>
-                                    ) : null}
-                                    <ul className="space-y-2">
-                                        {rawItems.map((item, itemIndex) => (
-                                            <li
-                                                key={`${key}-inli-${itemIndex}`}
-                                                className="flex items-start space-x-3 items-center"
-                                            >
-                                                <svg
-                                                    className="w-5 h-5 text-black mt-0.5 flex-shrink-0"
-                                                    fill="currentColor"
-                                                    viewBox="0 0 20 20"
-                                                >
-                                                    <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"
-                                                    />
-                                                </svg>
-                                                <span className="text-gray-700 leading-relaxed">{item.trim()}</span>
-                                            </li>
-                                        ))}
-                                    </ul>
-                                </div>,
-                            );
-                            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">
-                                <div key={key} className=" p-4 rounded-r-lg">
-                                    <ul className="space-y-2">
-                                        {items.map((item, itemIndex) => (
-                                            <li
-                                                key={`${key}-li-${itemIndex}`}
-                                                className="flex items-start space-x-3 items-center"
-                                            >
-                                                <svg
-                                                    className="w-5 h-5 text-black mt-0.5 flex-shrink-0"
-                                                    fill="currentColor"
-                                                    viewBox="0 0 20 20"
-                                                >
-                                                    <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"
-                                                    />
-                                                </svg>
-                                                <span className="text-gray-700 leading-relaxed">
-                                                    {item.replace(/^[\u2212\-•]\s*/, '')}
-                                                </span>
-                                            </li>
-                                        ))}
-                                    </ul>
-                                </div>,
-                            );
-                            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(
-                                <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(
-                                <div key={key} className="rounded-xl border border-gray-200 bg-gray-50 overflow-hidden">
-                                    <div className="px-4 py-2 text-sm font-bold text-gray-900">typescript</div>
-                                    <div className="px-4 pb-4 overflow-x-auto">
-                                        <pre className="text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose">
-                                            <code>{cleanCode}</code>
-                                        </pre>
-                                    </div>
-                                </div>,
-                            );
-                            return;
-                        }
-
-                        parts.push(
-                            <p key={key} className="text-gray-700 leading-relaxed whitespace-pre-wrap">
-                                {t}
-                            </p>,
-                        );
-                    };
-                    const codeRegex = /```([\w-]*)\n?([\s\S]*?)```/g;
-                    let lastIndex = 0;
-                    let match: RegExpExecArray | null;
-
-                    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(
-                            <div
-                                key={`${index}-code-${match.index}`}
-                                className="rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
-                            >
-                                <div className="px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200">
-                                    {language}
-                                </div>
-                                <div className="px-4 py-4 overflow-x-auto bg-white">
-                                    <pre className="text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose">
-                                        <code>{cleanCode}</code>
-                                    </pre>
-                                </div>
-                            </div>,
-                        );
-                        lastIndex = match.index + full.length;
-                    }
-
-                    const after = trimmedBlock.slice(lastIndex).trim();
-                    pushTextBlock(after, `${index}-after`);
-
-                    return (
-                        <div key={index} className="space-y-3">
-                            {parts}
-                        </div>
-                    );
-                }
-
-                // Raw HTML support per block
-                if (isProbablyHTML(trimmedBlock)) {
-                    return (
-                        <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 (
-                        <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)}
-                        </h1>
-                    );
-                } else if (trimmedBlock.startsWith('## ')) {
-                    // Secondary heading
-                    return (
-                        <h2
-                            key={index}
-                            className="text-xl font-semibold text-gray-800 mb-3 border-b border-gray-200 pb-2"
-                        >
-                            {trimmedBlock.substring(3)}
-                        </h2>
-                    );
-                } else if (trimmedBlock.startsWith('### ')) {
-                    // Tertiary heading
-                    return (
-                        <h3 key={index} className="text-lg font-medium text-gray-700 mb-2">
-                            {trimmedBlock.substring(4)}
-                        </h3>
-                    );
-                } 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">
-                        <div key={index} className=" p-4 rounded-r-lg">
-                            <ul className="space-y-2">
-                                {items.map((item, itemIndex) => (
-                                    <li key={itemIndex} className="flex items-start space-x-3 items-center">
-                                        <svg
-                                            className="w-5 h-5 text-black mt-0.5 flex-shrink-0"
-                                            fill="currentColor"
-                                            viewBox="0 0 20 20"
-                                        >
-                                            <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"
-                                            />
-                                        </svg>
-                                        <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 (
-                                                            <strong
-                                                                key={partIndex}
-                                                                className="font-semibold text-gray-900"
-                                                            >
-                                                                {boldText}
-                                                            </strong>
-                                                        );
-                                                    }
-                                                    return part;
-                                                })}
-                                        </span>
-                                    </li>
-                                ))}
-                            </ul>
-                        </div>
-                    );
-                } 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 (
-                            <div
-                                key={index}
-                                className="rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
-                            >
-                                <div className="px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200">
-                                    {lang}
-                                </div>
-                                <div className="px-4 py-4 overflow-x-auto bg-white">
-                                    <pre className="text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose">
-                                        <code>{cleanCode}</code>
-                                    </pre>
-                                </div>
-                            </div>
-                        );
-                    }
-                    // 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 (
-                            <p key={index} className="text-gray-700 leading-relaxed whitespace-pre-wrap">
-                                {codeContent}
-                            </p>
-                        );
-                    }
-
-                    return (
-                        <div
-                            key={index}
-                            className="rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
-                        >
-                            <div className="px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200">
-                                code
-                            </div>
-                            <div className="px-4 py-4 overflow-x-auto bg-white">
-                                <pre className="text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose">
-                                    <code>{codeContent}</code>
-                                </pre>
-                            </div>
-                        </div>
-                    );
-                } else if (trimmedBlock.startsWith('🔧 ')) {
-                    // Tool status message - render as bordered container
-                    const toolText = trimmedBlock.substring(2); // Remove the 🔧 emoji
-                    return (
-                        <div key={index} className="mt-2">
-                            <div className="inline-block px-3 py-1 bg-gray-100 border border-gray-300 rounded-lg text-sm text-gray-700">
-                                <span className="text-green-500 mr-2">🔧</span>
-                                {toolText}
-                            </div>
-                        </div>
-                    );
-                } 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 (
-                        <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 (
-                            <p key={index} className="text-gray-700 leading-relaxed whitespace-pre-wrap">
-                                {trimmedBlock}
-                            </p>
-                        );
-                    }
-
-                    return (
-                        <div key={index} className="rounded-xl border border-gray-200 bg-gray-50 overflow-hidden">
-                            <div className="px-4 py-2 text-sm font-bold text-gray-900">typescript</div>
-                            <div className="px-4 pb-4 overflow-x-auto">
-                                <pre className="text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose">
-                                    <code>{cleanCode}</code>
-                                </pre>
-                            </div>
-                        </div>
-                    );
-                } 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 (
-                        <div
-                            key={index}
-                            className="rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
-                        >
-                            <div className="px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200">
-                                code
-                            </div>
-                            <div className="px-4 py-4 overflow-x-auto bg-white">
-                                <pre className="text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose">
-                                    <code>{cleanCode}</code>
-                                </pre>
-                            </div>
-                        </div>
-                    );
-                } else {
-                    // Regular paragraph
-                    return (
-                        <p key={index} className="text-gray-700 leading-relaxed whitespace-pre-wrap">
-                            {trimmedBlock}
-                        </p>
-                    );
-                }
-            })}
+        <div className="message-container">
+            <p className="text-gray-700 leading-relaxed whitespace-pre-wrap">{content}</p>
         </div>
     );
 };
@@ -1760,6 +954,8 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
         onMessageClick?.(message);
     };
 
+    const isAssistantRole = (message as any)?.propsConfiguration?.contents?.role === 'ASSISTANT';
+
     // For user messages, create a right-aligned layout with avatar and name
     if (isOwnMessage) {
         const authorName =
@@ -1768,22 +964,30 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
                 : message.author?.username || 'You';
 
         return (
-            <div className="py-1 hover:bg-gray-50 hover:bg-opacity-50 rounded px-1 sm:px-2 -mx-1 sm:-mx-2 group">
+            <div
+                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' : ''
+                }`}
+            >
                 <div className="flex items-start justify-end gap-2">
                     {/* Message content and timestamp on the left */}
                     <div className="flex flex-col items-end max-w-xs lg:max-w-md">
-                        <div className="flex items-end space-x-2 mb-0.5">
-                            <span className="text-sm font-semibold text-gray-900">{authorName}</span>
-                        </div>
+                        {!isAssistantRole && (
+                            <div className="flex items-end space-x-2 mb-0.5">
+                                <span className="text-sm font-semibold text-gray-900">{authorName}</span>
+                            </div>
+                        )}
 
                         <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 as any)?.message || '')}
                             lang={detectLanguageTag((message as any)?.message || '')}
                         >
                             {message.message && (
-                                <div className="prose prose-sm max-w-none">
+                                <div className="max-w-none">
                                     {isProbablyHTML(message.message) ? (
                                         <div
                                             className="text-gray-800 html-content"
@@ -1818,17 +1022,21 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
                     </div>
 
                     {/* User avatar on the right */}
-                    <div className="flex-shrink-0 mt-0.5">
-                        <img
-                            className="w-8 h-8 sm:w-10 sm:h-10 rounded-lg cursor-pointer hover:opacity-80 transition-opacity object-cover"
-                            src={message.author?.picture || '/default-avatar.svg'}
-                            alt={authorName}
-                            onClick={handleClick}
-                            onError={(e) => {
-                                e.currentTarget.src = '/default-avatar.svg';
-                            }}
-                        />
-                    </div>
+                    {!isAssistantRole && (
+                        <div className="flex-shrink-0 mt-0.5">
+                            <img
+                                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={isAssistantRole ? undefined : handleClick}
+                                onError={(e) => {
+                                    e.currentTarget.src = '/default-avatar.svg';
+                                }}
+                            />
+                        </div>
+                    )}
                 </div>
             </div>
         );
@@ -1838,17 +1046,15 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
     return (
         <div
             className={`group/message transition-all duration-200 hover:bg-gray-50 rounded-lg px-3 py-1 -mx-3 ${
-                isSystemMessage ? '' : 'cursor-pointer'
+                isSystemMessage || isAssistantRole ? '' : 'cursor-pointer'
             }`}
-            onClick={isSystemMessage ? undefined : handleClick}
+            onClick={isSystemMessage || isAssistantRole ? undefined : handleClick}
         >
             <div className="flex items-start justify-between gap-3">
                 <div className="flex-1 min-w-0">
                     {message.message && (
                         <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 as any)?.message || '')}
                             lang={detectLanguageTag((message as any)?.message || '')}
                         >
@@ -1857,7 +1063,7 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
                                 <FormattedMessageContent content={message.message} />
                             ) : isProbablyHTML(message.message) ? (
                                 <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)),
                                     }}
@@ -1936,6 +1142,10 @@ export const ModernMessageGroupComponent: React.FC<ModernMessageGroupProps> = ({
     onMessageClick,
     isDesktopView = false,
     isSmallScreen = false,
+    sandboxErrors = [],
+    currentFiles = {},
+    onFixError,
+    onRecreateSandbox,
 }) => {
     // Inject CSS styles for HTML content
     useInjectStyles();
@@ -1963,6 +1173,17 @@ export const ModernMessageGroupComponent: React.FC<ModernMessageGroupProps> = ({
                     />
                 );
             })}
+
+            {sandboxErrors?.map((error) => (
+                <div key={error.id} className="px-2">
+                    <ErrorFixCard
+                        error={error}
+                        onFixError={onFixError || (() => Promise.resolve())}
+                        currentFiles={currentFiles}
+                        isFixing={false}
+                    />
+                </div>
+            ))}
         </div>
     );
 };