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

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

@@ -0,0 +1,1968 @@
+import React, { useEffect } from 'react';
+import { format, formatDistanceToNow, differenceInMinutes } from 'date-fns';
+import { IAuthUser, IPost } from 'common';
+import { FilesList } from '../../inbox';
+
+// 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);
+    }
+    
+    .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;
+    }
+    
+    .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;
+    }
+    
+    .html-content .html-heading {
+        margin-top: 2rem;
+        margin-bottom: 1rem;
+        font-weight: 700;
+        line-height: 1.2;
+        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;
+    }
+    
+    .html-content .html-heading-3 {
+        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 {
+        margin-bottom: 0.75rem;
+        line-height: 1.7;
+        position: relative;
+    }
+    
+    .html-content .html-list-unordered li::before {
+        content: "•";
+        color: #3b82f6;
+        font-weight: bold;
+        position: absolute;
+        left: -1.5rem;
+    }
+    
+    .html-content .html-list-ordered {
+        counter-reset: list-counter;
+    }
+    
+    .html-content .html-list-ordered li {
+        counter-increment: list-counter;
+    }
+    
+    .html-content .html-list-ordered li::before {
+        content: counter(list-counter) ".";
+        color: #3b82f6;
+        font-weight: 600;
+        position: absolute;
+        left: -2rem;
+    }
+    
+    .html-content .html-inline-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 .html-code-block {
+        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: 2rem 0;
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    }
+    
+    .html-content .html-blockquote {
+        border-left: 4px solid #3b82f6;
+        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+        padding: 1.5rem;
+        margin: 2rem 0;
+        border-radius: 0.5rem;
+        font-style: italic;
+        color: #475569;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    }
+    
+    .html-content .html-table {
+        border-collapse: collapse;
+        border: 2px solid #e5e7eb;
+        width: 100%;
+        margin: 2rem 0;
+        border-radius: 0.75rem;
+        overflow: hidden;
+        box-shadow: 0 4px 6px -1px 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;
+        text-align: left;
+        border-bottom: 2px solid #1d4ed8;
+    }
+    
+    .html-content .html-table-cell {
+        border: 1px solid #e5e7eb;
+        padding: 1rem;
+        text-align: left;
+        vertical-align: top;
+        background-color: white;
+    }
+    
+    .html-content .html-table tr:nth-child(even) .html-table-cell {
+        background-color: #f9fafb;
+    }
+    
+    .html-content .html-table tr:hover .html-table-cell {
+        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);
+    }
+    
+    .html-content pre code {
+        background-color: transparent;
+        padding: 0;
+        border: none;
+        color: #f9fafb;
+        font-size: inherit;
+    }
+    
+    /* Code block container styling */
+    .html-content .code-block-container {
+        border-radius: 0.75rem;
+        overflow: hidden;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        margin: 1.5rem 0;
+    }
+    
+    .html-content .code-block-header {
+        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+        padding: 0.75rem 1rem;
+        border-bottom: 1px solid #d1d5db;
+        font-weight: 600;
+        color: #374151;
+        font-size: 0.875rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+    
+    .html-content .code-block-content {
+        background-color: #1f2937;
+        padding: 1.5rem;
+        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;
+};
+
+// 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;
+}
+
+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 HTML detection that recognizes more HTML patterns
+const isProbablyHTML = (value: string): boolean => {
+    if (!value) return false;
+
+    // Check for HTML tags (including self-closing tags)
+    const htmlTagPattern = /<\/?[a-z][\s\S]*>/i;
+
+    // Check for HTML entities
+    const htmlEntityPattern = /&[a-z0-9#]+;/i;
+
+    // Check for common HTML attributes
+    const htmlAttrPattern = /\s+[a-z-]+\s*=\s*["'][^"']*["']/i;
+
+    // Check for HTML-like structure
+    const htmlStructurePattern = /<[^>]+>[^<]*<\/[^>]+>/i;
+
+    return (
+        htmlTagPattern.test(value.trim()) ||
+        htmlEntityPattern.test(value.trim()) ||
+        htmlAttrPattern.test(value.trim()) ||
+        htmlStructurePattern.test(value.trim())
+    );
+};
+
+// Detect if a string looks like a code block
+const isCodeBlock = (text: 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 {
+        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, '');
+    }
+};
+
+// 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="prose prose-sm 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 (
+                    <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>
+    );
+};
+
+// 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;
+};
+
+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');
+
+        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"
+                                    >
+                                        <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">
+                        <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 (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"
+                    >
+                        <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>;
+    }
+
+    // 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) + '...'),
+    );
+
+    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>
+    );
+};
+
+// 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);
+    };
+
+    // 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">
+                <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>
+
+                        <div
+                            className="text-sm text-gray-900 cursor-pointer hover:bg-gray-100 px-1 sm:px-2 py-1 rounded"
+                            onClick={handleClick}
+                            dir={detectTextDirection((message as any)?.message || '')}
+                            lang={detectLanguageTag((message as any)?.message || '')}
+                        >
+                            {message.message && (
+                                <div className="prose prose-sm max-w-none">
+                                    {isProbablyHTML(message.message) ? (
+                                        <div
+                                            className="text-gray-800 html-content"
+                                            dangerouslySetInnerHTML={{
+                                                __html: prettifyHtmlContent(sanitizeHtml(message.message)),
+                                            }}
+                                        />
+                                    ) : (
+                                        <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 */}
+                    <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>
+                </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 ? '' : 'cursor-pointer'
+            }`}
+            onClick={isSystemMessage ? 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'
+                            }`}
+                            dir={detectTextDirection((message as any)?.message || '')}
+                            lang={detectLanguageTag((message as any)?.message || '')}
+                        >
+                            {/* Prefer fenced code rendering over HTML when present */}
+                            {message.message.includes('```') ? (
+                                <FormattedMessageContent content={message.message} />
+                            ) : isProbablyHTML(message.message) ? (
+                                <div
+                                    className="prose prose-sm max-w-none text-gray-800 html-content"
+                                    dangerouslySetInnerHTML={{
+                                        __html: prettifyHtmlContent(sanitizeHtml(message.message)),
+                                    }}
+                                />
+                            ) : (
+                                <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,
+}) => {
+    // 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}
+                    />
+                );
+            })}
+        </div>
+    );
+};