@messenger-box/tailwind-ui-inbox 10.0.3-alpha.100

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

@@ -0,0 +1,1295 @@
+import React, { useEffect } from 'react';
+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 = `
+    .html-content {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        line-height: 1.6;
+        color: #374151;
+    }
+    
+    .html-content h1, .html-content h2, .html-content h3, .html-content h4, .html-content h5, .html-content h6 {
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+        font-weight: 600;
+        line-height: 1.25;
+        color: #111827;
+    }
+    
+    .html-content h1 {
+        font-size: 1.875rem;
+        border-bottom: 2px solid #e5e7eb;
+        padding-bottom: 0.5rem;
+    }
+    
+    .html-content h2 {
+        font-size: 1.5rem;
+        border-bottom: 1px solid #e5e7eb;
+        padding-bottom: 0.375rem;
+    }
+    
+    .html-content h3 {
+        font-size: 1.25rem;
+    }
+    
+    .html-content p {
+        margin-bottom: 1rem;
+        line-height: 1.7;
+    }
+    
+    .html-content ul, .html-content ol {
+        margin-bottom: 1rem;
+        padding-left: 1.5rem;
+    }
+    
+    .html-content ul {
+        list-style-type: disc;
+    }
+    
+    .html-content ol {
+        list-style-type: decimal;
+    }
+    
+    .html-content li {
+        margin-bottom: 0.5rem;
+        line-height: 1.6;
+    }
+    
+    .html-content li > ul, .html-content li > ol {
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+    
+    .html-content a {
+        color: #2563eb;
+        text-decoration: none;
+        border-bottom: 1px solid transparent;
+        transition: all 0.2s ease;
+    }
+    
+    .html-content a:hover {
+        color: #1d4ed8;
+        border-bottom-color: #1d4ed8;
+    }
+    
+    .html-content strong, .html-content b {
+        font-weight: 600;
+        color: #111827;
+    }
+    
+    .html-content em, .html-content i {
+        font-style: italic;
+        color: #6b7280;
+    }
+    
+    .html-content code {
+        background-color: #f3f4f6;
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.375rem;
+        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 pre {
+        background-color: #f9fafb;
+        padding: 1rem;
+        border-radius: 0.5rem;
+        overflow-x: auto;
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+        font-size: 0.875rem;
+        line-height: 1.5;
+        border: 1px solid #e5e7eb;
+        margin: 1.5rem 0;
+    }
+    
+    .html-content pre code {
+        background-color: transparent;
+        padding: 0;
+        border: none;
+        color: #374151;
+        font-size: inherit;
+    }
+    
+    .html-content blockquote {
+        border-left: 4px solid #3b82f6;
+        padding-left: 1rem;
+        margin: 1.5rem 0;
+        font-style: italic;
+        color: #6b7280;
+        background-color: #f8fafc;
+        padding: 1rem;
+        border-radius: 0.375rem;
+    }
+    
+    .html-content blockquote p {
+        margin-bottom: 0;
+    }
+    
+    .html-content table {
+        border-collapse: collapse;
+        border: 1px solid #e5e7eb;
+        width: 100%;
+        margin: 1.5rem 0;
+        border-radius: 0.5rem;
+        overflow: hidden;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    }
+    
+    .html-content th,
+    .html-content td {
+        border: 1px solid #e5e7eb;
+        padding: 0.75rem;
+        text-align: left;
+        vertical-align: top;
+    }
+    
+    .html-content th {
+        background-color: #f9fafb;
+        font-weight: 600;
+        color: #111827;
+        border-bottom: 2px solid #e5e7eb;
+    }
+    
+    .html-content tr:nth-child(even) {
+        background-color: #f9fafb;
+    }
+    
+    .html-content tr:hover {
+        background-color: #f3f4f6;
+    }
+    
+    .html-content hr {
+        border: none;
+        border-top: 2px solid #e5e7eb;
+        margin: 2rem 0;
+    }
+    
+    .html-content img {
+        max-width: 100%;
+        height: auto;
+        border-radius: 0.5rem;
+        margin: 1rem 0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    }
+    
+    /* Enhanced message container styling */
+    .message-container {
+        background: #ffffff;
+        padding-top: 16px;
+        padding-bottom: 16px;
+        margin: 12px 0;
+        transition: all 0.2s ease-in-out;
+    }
+    
+    /* Markdown content styling */
+    .markdown-content {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        line-height: 1.6;
+        color: #374151;
+    }
+    
+    .markdown-content h1 {
+        font-size: 1.5rem;
+        font-weight: 700;
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+        color: #111827;
+        padding-bottom: 0.5rem;
+        border-bottom: 2px solid #e5e7eb;
+    }
+    
+    .markdown-content h2 {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin-top: 1.25rem;
+        margin-bottom: 0.75rem;
+        color: #1f2937;
+        padding-bottom: 0.375rem;
+        border-bottom: 1px solid #e5e7eb;
+    }
+    
+    .markdown-content h3 {
+        font-size: 1.125rem;
+        font-weight: 600;
+        margin-top: 1rem;
+        margin-bottom: 0.5rem;
+        color: #374151;
+    }
+    
+    .markdown-content p {
+        margin-bottom: 0.75rem;
+        line-height: 1.6;
+        color: #4b5563;
+    }
+    
+    .markdown-content ul, .markdown-content ol {
+        margin: 1rem 0;
+        padding-left: 1.5rem;
+    }
+    
+    .markdown-content li {
+        margin-bottom: 0.5rem;
+        line-height: 1.6;
+    }
+    
+    .markdown-content code {
+        background-color: #f3f4f6;
+        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;
+    }
+    
+    .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.5;
+        margin: 1rem 0;
+    }
+    
+    .markdown-content pre code {
+        background-color: transparent;
+        padding: 0;
+        border: none;
+        color: #1f2937;
+        font-size: inherit;
+    }
+    
+    .markdown-content blockquote {
+        border-left: 4px solid #3b82f6;
+        background-color: #f8fafc;
+        padding: 1rem;
+        margin: 1rem 0;
+        border-radius: 6px;
+        font-style: italic;
+        color: #475569;
+        border-top: 1px solid #e5e7eb;
+        border-right: 1px solid #e5e7eb;
+        border-bottom: 1px solid #e5e7eb;
+    }
+    
+    .markdown-content table {
+        border-collapse: collapse;
+        border: 1px solid #e5e7eb;
+        width: 100%;
+        margin: 1rem 0;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    }
+    
+    .markdown-content th {
+        background-color: #f9fafb;
+        color: #374151;
+        font-weight: 600;
+        padding: 0.75rem;
+        text-align: left;
+        border-bottom: 1px solid #e5e7eb;
+        font-size: 0.875rem;
+    }
+    
+    .markdown-content td {
+        border: 1px solid #e5e7eb;
+        padding: 0.75rem;
+        text-align: left;
+        vertical-align: top;
+        background-color: white;
+        font-size: 0.875rem;
+    }
+    
+    .markdown-content tr:nth-child(even) td {
+        background-color: #f9fafb;
+    }
+    
+    .markdown-content tr:hover td {
+        background-color: #f3f4f6;
+    }
+    
+    /* Enhanced list styling */
+    .markdown-content ul li {
+        position: relative;
+        padding-left: 0.5rem;
+    }
+    
+    .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 */
+    .code-block-container {
+        background: #ffffff;
+        border: 1px solid #e5e7eb;
+        border-radius: 8px;
+        overflow: hidden;
+        margin: 1rem 0;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    }
+    
+    .code-block-header {
+        background: #f9fafb;
+        padding: 0.5rem 1rem;
+        border-bottom: 1px solid #e5e7eb;
+        font-weight: 600;
+        color: #374151;
+        font-size: 0.875rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+    
+    .code-block-content {
+        padding: 1rem;
+        overflow-x: auto;
+    }
+
+    .hover\:bg-gray-100:hover {
+        background-color: transparent !important;
+    }
+`;
+
+// Hook to inject CSS styles
+const useInjectStyles = () => {
+    useEffect(() => {
+        // Check if styles are already injected
+        if (document.getElementById('html-content-styles')) {
+            return;
+        }
+
+        // Create and inject style element
+        const styleElement = document.createElement('style');
+        styleElement.id = 'html-content-styles';
+        styleElement.textContent = htmlContentStyles;
+        document.head.appendChild(styleElement);
+
+        // Cleanup function
+        return () => {
+            const existingStyle = document.getElementById('html-content-styles');
+            if (existingStyle) {
+                existingStyle.remove();
+            }
+        };
+    }, []);
+};
+
+interface ModernMessageGroupProps {
+    messages: IPost[];
+    currentUser: IAuthUser;
+    onOpen: (element?: any) => void;
+    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 {
+    author: any;
+    messages: IPost[];
+    currentUser: IAuthUser;
+    onOpen: (element?: any) => void;
+    onMessageClick: (msg: IPost) => void;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
+}
+
+// Enhanced utility function to group messages by user and time
+export const groupMessagesByUserAndTime = (messages: IPost[], timeThresholdMinutes = 5): IPost[][] => {
+    if (!messages || messages.length === 0) return [];
+
+    const groups: IPost[][] = [];
+    let currentGroup: IPost[] = [];
+    let lastMessage: IPost | null = null;
+
+    for (const message of messages) {
+        if (typeof message === 'string') continue; // Skip date separators
+
+        const shouldStartNewGroup =
+            !lastMessage ||
+            lastMessage.author?.id !== message.author?.id ||
+            differenceInMinutes(new Date(message.createdAt), new Date(lastMessage.createdAt)) > timeThresholdMinutes;
+
+        if (shouldStartNewGroup) {
+            if (currentGroup.length > 0) {
+                groups.push(currentGroup);
+            }
+            currentGroup = [message];
+        } else {
+            currentGroup.push(message);
+        }
+
+        lastMessage = message;
+    }
+
+    if (currentGroup.length > 0) {
+        groups.push(currentGroup);
+    }
+
+    return groups;
+};
+
+// Enhanced content detection that properly identifies different content types
+const detectContentType = (value: string): 'html' | 'markdown' | 'code' | 'text' => {
+    if (!value) return 'text';
+
+    const trimmed = value.trim();
+
+    // Check for code patterns first (most specific)
+    const codePatterns = [
+        /```[\s\S]*?```/g, // Fenced code blocks
+        /`[^`\n]+`/g, // Inline code
+        /---\s*\w+\.\w+\s*---/g, // File separators like "--- src/index.css ---"
+        /@tailwind\s+\w+/g, // Tailwind directives
+        /export\s+default\s*\{/g, // JS/TS exports
+        /import\s+.*\s+from\s+['"]/g, // Import statements
+        /\/\*\*[\s\S]*?\*\//g, // JSDoc comments
+        /\/\*[\s\S]*?\*\//g, // Block comments
+        /\/\/.*$/gm, // Line comments
+    ];
+
+    const hasCodePatterns = codePatterns.some((pattern) => pattern.test(trimmed));
+    if (hasCodePatterns) return 'code';
+
+    // Check for markdown patterns
+    const markdownPatterns = [
+        /^#{1,6}\s+/gm, // Headers
+        /\*\*.*?\*\*/g, // Bold
+        /\*.*?\*/g, // Italic
+        /^\s*[-*+]\s+/gm, // Lists
+        /^\s*\d+\.\s+/gm, // Numbered lists
+        /\[.*?\]\(.*?\)/g, // Links
+        /!\[.*?\]\(.*?\)/g, // Images
+    ];
+
+    const hasMarkdownPatterns = markdownPatterns.some((pattern) => pattern.test(trimmed));
+    if (hasMarkdownPatterns) return 'markdown';
+
+    // Check for HTML patterns
+    const htmlPatterns = [
+        /<\/?[a-z][\s\S]*>/i, // HTML tags
+        /&[a-z0-9#]+;/i, // HTML entities
+        /\s+[a-z-]+\s*=\s*["'][^"']*["']/i, // HTML attributes
+        /<[^>]+>[^<]*<\/[^>]+>/i, // HTML structure
+    ];
+
+    const hasHtmlPatterns = htmlPatterns.some((pattern) => pattern.test(trimmed));
+    if (hasHtmlPatterns) return 'html';
+
+    return 'text';
+};
+
+// Legacy function for backward compatibility
+const isProbablyHTML = (value: string): boolean => {
+    return detectContentType(value) === 'html';
+};
+
+// Enhanced sanitizer that allows most HTML tags while maintaining security
+const sanitizeHtml = (html: string): string => {
+    try {
+        if (typeof window === 'undefined' || typeof window.DOMParser === 'undefined') {
+            return html
+                .replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, '')
+                .replace(/<style[\s\S]*?>[\s\S]*?<\/style>/gi, '')
+                .replace(/on\w+\s*=\s*"[^"]*"/gi, '')
+                .replace(/on\w+\s*=\s*'[^']*'/gi, '')
+                .replace(/on\w+\s*=\s*[^\s>]+/gi, '')
+                .replace(/javascript:/gi, '')
+                .replace(/data:text\/html/gi, '');
+        }
+
+        const parser = new window.DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+
+        // Only remove the most dangerous tags
+        const dangerousTags = ['script', 'style'];
+        dangerousTags.forEach((tag) => {
+            doc.querySelectorAll(tag).forEach((el) => el.remove());
+        });
+
+        const walker = doc.createTreeWalker(doc.body, (NodeFilter as any).SHOW_ELEMENT);
+        let node = walker.nextNode() as Element | null;
+        while (node) {
+            Array.from(node.attributes).forEach((attr) => {
+                const name = attr.name.toLowerCase();
+                const value = (attr.value || '').toLowerCase();
+
+                // Remove event handlers and javascript protocols
+                if (name.startsWith('on') || value.startsWith('javascript:')) {
+                    node?.removeAttribute(attr.name);
+                }
+
+                // Allow most attributes but validate URLs for src/href
+                if ((name === 'src' || name === 'href') && !/^https?:|^\/.*/.test(attr.value)) {
+                    node?.removeAttribute(attr.name);
+                }
+            });
+            node = walker.nextNode() as Element | null;
+        }
+
+        return doc.body.innerHTML;
+    } catch (e) {
+        return html.replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, '');
+    }
+};
+
+// 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;
+
+    return (
+        <div className="space-y-3">
+            {blocks.map((block, idx) => {
+                const type = block?.['@type'] || block?.type;
+                if (!type) return null;
+
+                if (/text/i.test(type)) {
+                    const html = sanitizeHtml(block?.text || block?.data?.text || '');
+                    return (
+                        <div
+                            key={idx}
+                            className="max-w-none text-gray-800"
+                            dangerouslySetInnerHTML={{ __html: html }}
+                        />
+                    );
+                }
+
+                if (/image/i.test(type)) {
+                    const src = block?.src || block?.image || block?.data?.src;
+                    const alt = block?.alt || block?.data?.alt || '';
+                    if (!src) return null;
+                    return (
+                        <div key={idx} className="rounded-lg overflow-hidden border border-gray-200">
+                            <img className="w-full h-auto" src={src} alt={alt} />
+                        </div>
+                    );
+                }
+
+                if (/button/i.test(type)) {
+                    const text = block?.text || block?.data?.text || 'Button';
+                    const href = block?.href || block?.link || block?.data?.href || '#';
+                    return (
+                        <a
+                            key={idx}
+                            href={href}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="inline-flex items-center px-3 py-1.5 rounded-md bg-blue-600 text-white text-sm hover:bg-blue-700"
+                        >
+                            {text}
+                        </a>
+                    );
+                }
+
+                if (/columns?/i.test(type)) {
+                    const cols = block?.columns || block?.data?.columns || [];
+                    return (
+                        <div key={idx} className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                            {cols.map((col: any, colIdx: number) => (
+                                <div key={colIdx} className="space-y-2">
+                                    <BuilderLikeRenderer blocks={col?.blocks || col?.children} />
+                                </div>
+                            ))}
+                        </div>
+                    );
+                }
+
+                return (
+                    <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 code formatter for raw code content
+const CodeFormatter: React.FC<{ content: string }> = ({ content }) => {
+    if (!content) return null;
+
+    // Split content by file separators and format each section
+    const sections = content.split(/(---\s*\w+\.\w+\s*---)/g);
+
+    return (
+        <div className="message-container">
+            <div className="space-y-4">
+                {sections.map((section, index) => {
+                    if (!section.trim()) return null;
+
+                    // Check if this is a file separator
+                    const fileMatch = section.match(/---\s*(\w+\.\w+)\s*---/);
+                    if (fileMatch) {
+                        return (
+                            <div key={index} className="code-block-container">
+                                <div className="code-block-header">📄 {fileMatch[1]}</div>
+                            </div>
+                        );
+                    }
+
+                    // Format the code content
+                    const lines = section.trim().split('\n');
+                    const isCode = lines.some(
+                        (line) =>
+                            line.includes('@tailwind') ||
+                            line.includes('export default') ||
+                            line.includes('import ') ||
+                            line.includes('{') ||
+                            line.includes('}') ||
+                            line.includes('//') ||
+                            line.includes('/*'),
+                    );
+
+                    if (isCode) {
+                        return (
+                            <div key={index} className="code-block-container">
+                                <div className="code-block-content">
+                                    <pre className="text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap">
+                                        <code>{section.trim()}</code>
+                                    </pre>
+                                </div>
+                            </div>
+                        );
+                    }
+
+                    // Regular text content
+                    return (
+                        <div key={index} className="text-gray-700 leading-relaxed whitespace-pre-wrap">
+                            {section.trim()}
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
+// Enhanced markdown renderer using react-markdown with remark-gfm
+const FormattedMessageContent: React.FC<{ content: string }> = ({ content }) => {
+    if (!content) return null;
+
+    // Check if content contains markdown patterns
+    const hasMarkdown = /[#*`>|]/.test(content) || content.includes('```');
+
+    if (hasMarkdown) {
+        return (
+            <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}
+                                    >
+                                        {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>
+                            ),
+                            // 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}
+                                    >
+                                        {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>
+                            ),
+                        }}
+                    >
+                        {content}
+                    </ReactMarkdown>
+                </div>
+            </div>
+        );
+    }
+
+    // For plain text content
+    return (
+        <div className="message-container">
+            <p className="text-gray-700 leading-relaxed whitespace-pre-wrap">{content}</p>
+        </div>
+    );
+};
+
+// Detect predominant text direction (RTL/LTR) for international content
+const detectTextDirection = (text: string): 'rtl' | 'ltr' => {
+    if (!text) return 'ltr';
+    const rtlRanges = /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/g; // Hebrew, Arabic, etc.
+    const ltrRanges = /[A-Za-z\u00C0-\u024F\u1E00-\u1EFF]/g;
+    const rtlCount = (text.match(rtlRanges) || []).length;
+    const ltrCount = (text.match(ltrRanges) || []).length;
+    return rtlCount > ltrCount ? 'rtl' : 'ltr';
+};
+
+// Lightweight language heuristic for lang attribute
+const detectLanguageTag = (text: string): string => {
+    if (!text) return 'en';
+    if (/\p{Script=Arabic}/u.test(text)) return 'ar';
+    if (/[\u0590-\u05FF]/.test(text)) return 'he';
+    if (/[\u0600-\u06FF]/.test(text)) return 'fa';
+    if (/[\u0900-\u097F]/.test(text)) return 'hi';
+    if (/[\u4E00-\u9FFF]/.test(text)) return 'zh';
+    if (/[\u3040-\u309F\u30A0-\u30FF]/.test(text)) return 'ja';
+    if (/[\uAC00-\uD7AF]/.test(text)) return 'ko';
+    if (/[\u0400-\u04FF]/.test(text)) return 'ru';
+    if (/[\u0E00-\u0E7F]/.test(text)) return 'th';
+    return 'en';
+};
+
+// Attempt to parse Builder.io-like JSON blocks embedded as message string
+const tryExtractBuilderBlocks = (content?: string): any[] | null => {
+    if (!content || content.length < 2) return null;
+    try {
+        const trimmed = content.trim();
+        const jsonMatch = trimmed.match(/([\[{][\s\S]*[\]}])/);
+        const jsonText = jsonMatch ? jsonMatch[1] : trimmed;
+        const parsed = JSON.parse(jsonText);
+        if (Array.isArray(parsed)) {
+            if (parsed.length && (parsed[0]['@type'] || parsed[0].type)) return parsed;
+        } else if (parsed && typeof parsed === 'object') {
+            if (Array.isArray(parsed.blocks)) return parsed.blocks;
+            if (Array.isArray(parsed?.data?.blocks)) return parsed.data.blocks;
+        }
+        return null;
+    } catch {
+        return null;
+    }
+};
+
+const ModernMessageGroup: React.FC<MessageGroupProps> = ({
+    author,
+    messages,
+    currentUser,
+    onOpen,
+    onMessageClick,
+    isDesktopView = false,
+    isSmallScreen = false,
+}) => {
+    // Inject CSS styles for HTML content
+    useInjectStyles();
+
+    const isOwnMessage = author?.id === currentUser?.id;
+    const authorName =
+        author?.givenName && author?.familyName
+            ? `${author.givenName} ${author.familyName}`
+            : author?.username || 'Unknown User';
+
+    const firstMessage = messages[0];
+    const formatTime = (timestamp: string) => {
+        const date = new Date(timestamp);
+        return format(date, 'h:mm a');
+    };
+
+    // Determine if this is an AI/system message for special styling
+    const isSystemMessage =
+        author?.username?.toLowerCase().includes('ai') ||
+        author?.username?.toLowerCase().includes('assistant') ||
+        author?.username?.toLowerCase().includes('system');
+
+    // For user messages, don't show group header, just individual messages with avatars
+    if (isOwnMessage) {
+        return (
+            <div
+                className={`min-h-fit ${
+                    isDesktopView ? 'space-y-1 mb-3' : isSmallScreen ? 'space-y-0.5 mb-2' : 'space-y-0.5 mb-2'
+                }`}
+            >
+                {messages.map((message, index) => (
+                    <ModernMessageBubble
+                        key={message.id}
+                        message={message}
+                        isOwnMessage={isOwnMessage}
+                        isSystemMessage={isSystemMessage}
+                        isFirstInGroup={index === 0}
+                        isLastInGroup={index === messages.length - 1}
+                        onMessageClick={onMessageClick}
+                        formatTime={formatTime}
+                    />
+                ))}
+            </div>
+        );
+    }
+
+    // For other messages (non-user), show the traditional group layout
+    return (
+        <div
+            className={`group transition-all duration-300 ease-in-out ${
+                isDesktopView ? 'mb-4 px-4 py-3' : isSmallScreen ? 'mb-2 px-2 py-1' : 'mb-3 px-3 py-1'
+            } ${isSystemMessage ? 'bg-white  rounded-lg' : ' rounded-lg'}`}
+        >
+            <div
+                className={`flex items-start ${
+                    isDesktopView ? 'space-x-4' : isSmallScreen ? 'space-x-2' : 'space-x-3'
+                }`}
+            >
+                {/* Enhanced Avatar - Only show for non-system messages */}
+                {!isSystemMessage && (
+                    <div className="flex-shrink-0 mt-1">
+                        <div className="relative rounded-lg overflow-hidden">
+                            <img
+                                className={`cursor-pointer hover:opacity-80 transition-opacity ${
+                                    isDesktopView ? 'w-12 h-12' : isSmallScreen ? 'w-8 h-8' : 'w-10 h-10'
+                                } rounded-lg object-cover`}
+                                src={author?.picture || '/default-avatar.svg'}
+                                alt={authorName}
+                                onClick={() => onOpen(firstMessage)}
+                                onError={(e) => {
+                                    e.currentTarget.src = '/default-avatar.svg';
+                                }}
+                            />
+                        </div>
+                    </div>
+                )}
+
+                <div className="flex-1 min-w-0 overflow-hidden">
+                    {/* Enhanced author header - Only show for non-system messages */}
+                    {!isSystemMessage && (
+                        <div className="flex items-center space-x-3 mb-2">
+                            <span className="font-semibold truncate text-gray-900">{authorName}</span>
+                        </div>
+                    )}
+
+                    {/* Enhanced Messages with rich formatting */}
+                    <div className="space-y-1">
+                        {messages.map((message, index) => (
+                            <ModernMessageBubble
+                                key={message.id}
+                                message={message}
+                                isOwnMessage={isOwnMessage}
+                                isSystemMessage={isSystemMessage}
+                                isFirstInGroup={index === 0}
+                                isLastInGroup={index === messages.length - 1}
+                                onMessageClick={onMessageClick}
+                                formatTime={formatTime}
+                            />
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+interface ModernMessageBubbleProps {
+    message: IPost;
+    isOwnMessage: boolean;
+    isSystemMessage: boolean;
+    isFirstInGroup: boolean;
+    isLastInGroup: boolean;
+    onMessageClick: (msg: IPost) => void;
+    formatTime: (timestamp: string) => string;
+}
+
+const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
+    message,
+    isOwnMessage,
+    isSystemMessage,
+    isFirstInGroup,
+    isLastInGroup,
+    onMessageClick,
+    formatTime,
+}) => {
+    const handleClick = () => {
+        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 =
+            message.author?.givenName && message.author?.familyName
+                ? `${message.author.givenName} ${message.author.familyName}`
+                : 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 ${
+                    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 flex-col items-end ">
+                        {!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 ${
+                                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="max-w-none">
+                                    {(() => {
+                                        const contentType = detectContentType(message.message);
+
+                                        if (contentType === 'code') {
+                                            return <CodeFormatter content={message.message} />;
+                                        } else if (contentType === 'html') {
+                                            return (
+                                                <div
+                                                    className="text-gray-800 html-content"
+                                                    dangerouslySetInnerHTML={{
+                                                        __html: prettifyHtmlContent(sanitizeHtml(message.message)),
+                                                    }}
+                                                />
+                                            );
+                                        } else {
+                                            return <FormattedMessageContent content={message.message} />;
+                                        }
+                                    })()}
+                                </div>
+                            )}
+
+                            {tryExtractBuilderBlocks((message as any)?.message)?.length ? (
+                                <div className="mt-2">
+                                    <BuilderLikeRenderer blocks={tryExtractBuilderBlocks((message as any)?.message)} />
+                                </div>
+                            ) : null}
+
+                            {(message as any)?.props?.blocks?.length ? (
+                                <div className="mt-2">
+                                    <BuilderLikeRenderer blocks={(message as any).props.blocks} />
+                                </div>
+                            ) : null}
+
+                            {message.files?.totalCount > 0 && (
+                                <div className="mt-2">
+                                    <FilesList uploaded files={message.files.data} />
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
+                    {/* User avatar on the right */}
+                    {!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>
+        );
+    }
+
+    // For other messages (left-aligned with full formatting)
+    return (
+        <div
+            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}
+        >
+            <div className="flex items-start justify-between gap-3">
+                <div className="flex-1 min-w-0">
+                    {message.message && (
+                        <div
+                            className={`max-w-none ${isSystemMessage ? 'text-gray-800' : 'text-gray-900'}`}
+                            dir={detectTextDirection((message as any)?.message || '')}
+                            lang={detectLanguageTag((message as any)?.message || '')}
+                        >
+                            {(() => {
+                                const contentType = detectContentType(message.message);
+
+                                if (contentType === 'code') {
+                                    return <CodeFormatter content={message.message} />;
+                                } else if (contentType === 'html') {
+                                    return (
+                                        <div
+                                            className="max-w-none text-gray-800 html-content"
+                                            dangerouslySetInnerHTML={{
+                                                __html: prettifyHtmlContent(sanitizeHtml(message.message)),
+                                            }}
+                                        />
+                                    );
+                                } else {
+                                    return <FormattedMessageContent content={message.message} />;
+                                }
+                            })()}
+                        </div>
+                    )}
+
+                    {tryExtractBuilderBlocks((message as any)?.message)?.length ? (
+                        <div className="mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
+                            <BuilderLikeRenderer blocks={tryExtractBuilderBlocks((message as any)?.message)} />
+                        </div>
+                    ) : null}
+
+                    {(message as any)?.props?.blocks?.length ? (
+                        <div className="mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
+                            <BuilderLikeRenderer blocks={(message as any).props.blocks} />
+                        </div>
+                    ) : null}
+
+                    {message.files?.totalCount > 0 && (
+                        <div className="mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
+                            <FilesList uploaded files={message.files.data} />
+                        </div>
+                    )}
+                </div>
+
+                {/* Action buttons on hover - Only show for non-system messages */}
+                {!isSystemMessage && (
+                    <div className="flex-shrink-0 mt-1">
+                        <div className="opacity-0 group-hover/message:opacity-100 transition-opacity duration-200 flex space-x-1">
+                            <button className="p-1 hover:bg-gray-200 rounded transition-colors">
+                                <svg
+                                    className="w-3 h-3 text-gray-400"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"
+                                    />
+                                </svg>
+                            </button>
+                            <button className="p-1 hover:bg-gray-200 rounded transition-colors">
+                                <svg
+                                    className="w-3 h-3 text-gray-400"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+                                    />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export const ModernMessageGroupComponent: React.FC<ModernMessageGroupProps> = ({
+    messages,
+    currentUser,
+    onOpen,
+    onMessageClick,
+    isDesktopView = false,
+    isSmallScreen = false,
+    sandboxErrors = [],
+    currentFiles = {},
+    onFixError,
+    onRecreateSandbox,
+}) => {
+    // Inject CSS styles for HTML content
+    useInjectStyles();
+
+    // Filter out non-message items (like date strings)
+    const actualMessages = messages.filter((msg) => typeof msg !== 'string') as IPost[];
+
+    // Group messages by user and time
+    const messageGroups = groupMessagesByUserAndTime(actualMessages);
+
+    return (
+        <div className={`min-h-fit ${isDesktopView ? 'space-y-6' : isSmallScreen ? 'space-y-4' : 'space-y-5'}`}>
+            {messageGroups.map((group, groupIndex) => {
+                const author = group[0]?.author;
+                return (
+                    <ModernMessageGroup
+                        key={`group-${groupIndex}-${group[0]?.id}`}
+                        author={author}
+                        messages={group}
+                        currentUser={currentUser}
+                        onOpen={onOpen}
+                        onMessageClick={onMessageClick}
+                        isDesktopView={isDesktopView}
+                        isSmallScreen={isSmallScreen}
+                    />
+                );
+            })}
+
+            {sandboxErrors?.map((error) => (
+                <div key={error.id} className="px-2">
+                    <ErrorFixCard
+                        error={error}
+                        onFixError={onFixError || (() => Promise.resolve())}
+                        currentFiles={currentFiles}
+                        isFixing={false}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};