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

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

@@ -0,0 +1,1733 @@
+import React, { useEffect, useMemo } from 'react';
+import { format, differenceInMinutes } from 'date-fns';
+import { AiAgentMessageRole, IAuthUser, IPost } from 'common';
+import { Slot } from '@common-stack/components-pro';
+import { MessengerSlotFillNameEnum } from '../../../enums';
+import { FilesList } from '../../inbox';
+import { ErrorFixCard } from './ErrorFixCard';
+import { marked } from 'marked';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+// Configure marked for better markdown rendering
+marked.setOptions({
+    breaks: true, // Convert line breaks to <br>
+    gfm: true, // GitHub Flavored Markdown
+    headerIds: false, // Disable header IDs for cleaner HTML
+    mangle: false, // Don't mangle email addresses
+});
+
+// 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;
+    }
+
+    /* If a message container is rendered *inside the user bubble* (Image 2),
+     * we must neutralize it so it doesn't override the pill background/padding.
+     */
+    .user-message .message-container {
+        background: transparent !important;
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+        margin: 0 !important;
+        transition: none !important;
+        box-shadow: none !important;
+    }
+    
+    /* 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;
+    }
+    
+    /* Enhanced prose styling for markdown content */
+    .prose pre {
+        background-color: #f9fafb;
+        border: 1px solid #e5e7eb;
+        border-radius: 0.5rem;
+        padding: 1rem;
+        overflow-x: auto;
+    }
+    
+    .prose code {
+        background-color: #f3f4f6;
+        padding: 0.125rem 0.375rem;
+        border-radius: 0.25rem;
+        font-size: 0.875rem;
+        border: 1px solid #e5e7eb;
+    }
+    
+    .prose pre code {
+        background-color: transparent;
+        padding: 0;
+        border: none;
+        color:#000;
+    }
+
+    .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 {
+    showAuthorName?: boolean;
+    showAvatar?: boolean;
+    showTimestamp?: boolean;
+    messages: IPost[];
+    currentUser: IAuthUser;
+    onOpen: (element?: any) => void;
+    onMessageClick: (msg: IPost) => void;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
+    sandboxErrors?: any[];
+    currentFiles?: Record<string, string>;
+    onFixError?: (errorMessage: string) => Promise<void>;
+    onRecreateSandbox?: (fragmentId: string) => void;
+    /** When true, code blocks show copy and download actions in header and footer (default: true) */
+    showCopyDownloadOnCodeBlock?: boolean;
+}
+
+interface MessageGroupProps {
+    showAuthorName?: boolean;
+    showAvatar?: boolean;
+    showTimestamp?: boolean;
+    author: any;
+    messages: IPost[];
+    currentUser: IAuthUser;
+    onOpen: (element?: any) => void;
+    onMessageClick: (msg: IPost) => void;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
+    showCopyDownloadOnCodeBlock?: 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
+export const detectContentType = (value: string): 'html' | 'markdown' | 'code' | 'text' => {
+    if (!value) return 'text';
+
+    const trimmed = value.trim();
+
+    // Check for markdown patterns FIRST (before code, as markdown can contain code blocks)
+    const markdownPatterns = [
+        /^#{1,6}\s+.+$/gm, // Headers (must have text after #)
+        /^\s*[-*+]\s+.+$/gm, // Unordered lists
+        /^\s*\d+\.\s+.+$/gm, // Numbered lists
+        /\[.+?\]\(.+?\)/g, // Links
+        /!\[.+?\]\(.+?\)/g, // Images
+        /```[\s\S]*?```/g, // Fenced code blocks (markdown feature)
+        /^\s*>\s+/gm, // Blockquotes
+        /\*\*.*?\*\*/g, // Bold
+        /\*[^*].*?\*/g, // Italic (not just asterisks)
+        /^\s*\|.+\|/gm, // Tables
+    ];
+
+    // Count markdown patterns - if we have multiple, it's likely markdown
+    const markdownMatches = markdownPatterns.filter((pattern) => {
+        const matches = trimmed.match(pattern);
+        return matches && matches.length > 0;
+    }).length;
+
+    // If we have 2+ markdown patterns, it's definitely markdown
+    if (markdownMatches >= 2) return 'markdown';
+
+    // If we have headers or lists, it's likely markdown
+    if (/^#{1,6}\s+/gm.test(trimmed) || /^\s*[-*+]\s+/gm.test(trimmed) || /^\s*\d+\.\s+/gm.test(trimmed)) {
+        return 'markdown';
+    }
+
+    // Check for pure code patterns (without markdown context)
+    const pureCodePatterns = [
+        /^---\s*\w+\.\w+\s*---$/gm, // File separators (standalone)
+        /^@tailwind\s+\w+/gm, // Tailwind directives at start
+        /^export\s+default\s*\{/gm, // JS/TS exports at start
+        /^import\s+.*\s+from\s+['"]/gm, // Import statements at start
+    ];
+
+    const hasPureCodePatterns = pureCodePatterns.some((pattern) => pattern.test(trimmed));
+    if (hasPureCodePatterns && markdownMatches === 0) return 'code';
+
+    // Check for HTML patterns
+    const htmlPatterns = [
+        /<[a-z][\s\S]*?>/i, // HTML tags
+        /&[a-z0-9#]+;/i, // HTML entities
+        /<[^>]+>[^<]*<\/[^>]+>/i, // HTML structure
+    ];
+
+    const hasHtmlPatterns = htmlPatterns.some((pattern) => pattern.test(trimmed));
+    // Only return HTML if it's clearly HTML and not markdown
+    if (hasHtmlPatterns && markdownMatches === 0) return 'html';
+
+    // Default to text, but FormattedMessageContent will still try to parse as markdown
+    return 'text';
+};
+
+// Legacy function for backward compatibility
+const isProbablyHTML = (value: string): boolean => {
+    return detectContentType(value) === 'html';
+};
+
+/** Map message type (THINKING, TOOLUSE, etc.) to slot fill name for Kimi-like streaming UI */
+const getMessageSlotName = (type: string | undefined): string | null => {
+    if (!type) return null;
+    const t = String(type).toUpperCase();
+    if (t === 'THINKING') return MessengerSlotFillNameEnum.THINKING_NAME;
+    if (t === 'TOOLUSE') return MessengerSlotFillNameEnum.TOOLUSE_NAME;
+    if (t === 'CODEBLOCK') return MessengerSlotFillNameEnum.CODEBLOCK_NAME;
+    if (t === 'SERVICE') return MessengerSlotFillNameEnum.SERVICE_NAME;
+    if (t === 'AIASSISTANT' || t === 'ASSISTANT') return MessengerSlotFillNameEnum.AIASSISTANT_NAME;
+    return null;
+};
+
+// 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>
+    );
+};
+
+// Code block with optional header (language + copy) and footer (copy + download) per Image 2
+const CodeBlockWithActions: React.FC<{
+    content: string;
+    language?: string;
+    showCopyDownload?: boolean;
+}> = ({ content, language, showCopyDownload = true }) => {
+    const [copied, setCopied] = React.useState(false);
+
+    const handleCopy = React.useCallback(() => {
+        navigator.clipboard.writeText(content).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        });
+    }, [content]);
+
+    const handleDownload = React.useCallback(() => {
+        const ext =
+            language === 'jsx' || language === 'tsx' ? '.tsx' : language === 'js' || language === 'ts' ? '.ts' : '.txt';
+        const blob = new Blob([content], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `snippet${ext}`;
+        a.click();
+        URL.revokeObjectURL(url);
+    }, [content, language]);
+
+    const langLabel = (language || 'code').toUpperCase();
+
+    /**
+     * Duplicate / copy: back square offset top-left (only its top-left shows behind),
+     * front square on top toward bottom-right — matches typical “two sheets” reference art.
+     */
+    const IconCopy = ({ className }: { className?: string }) => (
+        <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
+            <rect
+                x="3.25"
+                y="3.25"
+                width="10.5"
+                height="10.5"
+                rx="2.25"
+                ry="2.25"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <rect
+                x="8.75"
+                y="8.75"
+                width="10.5"
+                height="10.5"
+                rx="2.25"
+                ry="2.25"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+
+    /** Arrow into tray (download) */
+    const IconDownload = ({ className }: { className?: string }) => (
+        <svg
+            className={className}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={1.5}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden
+        >
+            <path d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
+        </svg>
+    );
+
+    const IconCheck = ({ className }: { className?: string }) => (
+        <svg
+            className={className}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={1.75}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden
+        >
+            <path d="M5 13l4 4L19 7" />
+        </svg>
+    );
+
+    const iconMuted = 'text-slate-500 hover:text-slate-600';
+
+    return (
+        <div className="rounded-xl bg-white overflow-hidden my-3 shadow-sm ring-1 ring-slate-200/60">
+            {/* Header: label + copy — padding aligned with inner code gutter (image 3) */}
+            <div className="flex items-center justify-between px-4 pt-4 pb-3 bg-white">
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-slate-500">{langLabel}</span>
+                <button
+                    type="button"
+                    onClick={handleCopy}
+                    className={`p-1 rounded-md hover:bg-slate-100/80 transition-colors ${iconMuted}`}
+                    title="Copy"
+                    aria-label="Copy to clipboard"
+                >
+                    <IconCopy className="w-[15px] h-[15px] shrink-0" />
+                </button>
+            </div>
+            {/* Code body: white, no inner border (single flat surface inside the card) */}
+            <div className="px-4 pb-4">
+                <div className="overflow-x-auto bg-white py-4">
+                    <pre className="text-sm text-slate-900 font-mono leading-relaxed whitespace-pre-wrap break-words m-0 p-0 border-0 bg-transparent">
+                        <code className="bg-transparent">{content}</code>
+                    </pre>
+                </div>
+            </div>
+            {showCopyDownload && (
+                <div className="flex items-center justify-start gap-0.5 px-4 pb-3 pt-0 mt-2 bg-white">
+                    <button
+                        type="button"
+                        onClick={handleCopy}
+                        className={`p-1 rounded-md hover:bg-slate-100/80 transition-colors ${iconMuted}`}
+                        title={copied ? 'Copied' : 'Copy'}
+                        aria-label={copied ? 'Copied' : 'Copy to clipboard'}
+                    >
+                        {copied ? (
+                            <IconCheck className="w-[15px] h-[15px] text-emerald-600" />
+                        ) : (
+                            <IconCopy className="w-[15px] h-[15px] shrink-0" />
+                        )}
+                    </button>
+                    <button
+                        type="button"
+                        onClick={handleDownload}
+                        className={`p-1 rounded-md hover:bg-slate-100/80 transition-colors ${iconMuted}`}
+                        title="Download"
+                        aria-label="Download"
+                    >
+                        <IconDownload className="w-[15px] h-[15px] shrink-0" />
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};
+
+// Infer language from file extension or content
+const inferCodeLanguage = (section: string, filename?: string): string => {
+    if (filename) {
+        const ext = filename.split('.').pop()?.toLowerCase();
+        const map: Record<string, string> = {
+            tsx: 'tsx',
+            jsx: 'jsx',
+            ts: 'ts',
+            js: 'js',
+            css: 'css',
+            html: 'html',
+            json: 'json',
+        };
+        return map[ext ?? ''] ?? ext ?? 'code';
+    }
+    if (/\bimport\b.*from\s+['"]react['"]/i.test(section) || /<\w+[\s>]/.test(section)) return 'jsx';
+    if (/\bimport\b/.test(section) && /\.(ts|tsx)\b/.test(section)) return 'ts';
+    return 'code';
+};
+
+// Enhanced code formatter for raw code content
+export const CodeFormatter: React.FC<{
+    content: string;
+    showCopyDownload?: boolean;
+    variant?: 'default' | 'user';
+    /** When variant is `user`, use primary-foreground only on plan-mode bubbles (bg-primary). */
+    planMode?: boolean;
+}> = ({ content, showCopyDownload = true, variant = 'default', planMode = false }) => {
+    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={variant === 'user' ? '' : '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) {
+                        const lang = inferCodeLanguage(section);
+                        return (
+                            <CodeBlockWithActions
+                                key={index}
+                                content={section.trim()}
+                                language={lang}
+                                showCopyDownload={showCopyDownload}
+                            />
+                        );
+                    }
+
+                    // Regular text content
+                    return (
+                        <div
+                            key={index}
+                            className={`text-sm ${
+                                variant === 'user'
+                                    ? planMode
+                                        ? 'text-primary-foreground'
+                                        : 'text-gray-900'
+                                    : 'text-gray-700'
+                            } leading-relaxed whitespace-pre-wrap break-words`}
+                        >
+                            {section.trim()}
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
+// Enhanced markdown renderer using marked (similar to MessageBubble.tsx)
+export const FormattedMessageContent: React.FC<{
+    content: string;
+    variant?: 'default' | 'user';
+    /** When variant is `user`, use primary-foreground only on plan-mode bubbles (bg-primary). */
+    planMode?: boolean;
+    /**
+     * When true, fenced code blocks use the same copy/download UI as elsewhere.
+     * Implemented via react-markdown (safe) instead of raw HTML from marked.
+     */
+    showCopyDownloadOnCodeBlock?: boolean;
+}> = ({ content, variant = 'default', planMode = false, showCopyDownloadOnCodeBlock = false }) => {
+    if (!content) return null;
+
+    // Parse markdown using marked - be more aggressive in detection
+    const { htmlContent, markdownSource } = useMemo(() => {
+        try {
+            const trimmed = content.trim();
+
+            // Comprehensive markdown detection patterns
+            const markdownIndicators = [
+                /^#{1,6}\s+.+$/gm, // Headers with text
+                /^\s*[-*+]\s+.+$/gm, // Unordered lists
+                /^\s*\d+\.\s+.+$/gm, // Numbered lists
+                /\[.+?\]\(.+?\)/g, // Links
+                /!\[.+?\]\(.+?\)/g, // Images
+                /```[\s\S]*?```/g, // Fenced code blocks
+                /^\s*>\s+/gm, // Blockquotes
+                /\*\*[^*]+\*\*/g, // Bold text
+                /\*[^*\n]+\*/g, // Italic text (not just asterisks)
+                /^\s*\|.+\|/gm, // Tables
+                /~~.+~~/g, // Strikethrough
+            ];
+
+            // Check if content has markdown patterns
+            const hasMarkdown = markdownIndicators.some((pattern) => {
+                const matches = trimmed.match(pattern);
+                return matches && matches.length > 0;
+            });
+
+            // Also check for common markdown characters that suggest markdown content
+            const hasMarkdownChars = /[#*`>|\[\]()]/.test(trimmed) && trimmed.length > 10;
+
+            // If we detect markdown, parse it
+            if (hasMarkdown || hasMarkdownChars) {
+                const parsed = marked.parse(trimmed, { async: false }) as string;
+                // Only return if parsing actually produced HTML (not just the same text)
+                if (parsed && parsed.trim() !== trimmed && parsed.includes('<')) {
+                    return { htmlContent: parsed, markdownSource: trimmed as string };
+                }
+            }
+
+            return { htmlContent: null as string | null, markdownSource: null as string | null };
+        } catch (error) {
+            console.error('Error parsing markdown:', error);
+            return { htmlContent: null as string | null, markdownSource: null as string | null };
+        }
+    }, [content]);
+
+    const proseMarkdownClasses = `text-sm prose prose-sm max-w-none leading-relaxed break-words 
+                        prose-p:my-2 prose-p:text-gray-700
+                        prose-pre:my-2 prose-pre:bg-transparent prose-pre:border-0 prose-pre:p-0
+                        prose-ul:my-2 prose-ol:my-2 
+                        prose-code:break-words prose-code:bg-gray-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:font-mono
+                        prose-headings:font-semibold prose-headings:text-gray-900 prose-headings:mt-4 prose-headings:mb-2
+                        prose-h1:text-2xl prose-h1:border-b prose-h1:border-gray-200 prose-h1:pb-2
+                        prose-h2:text-xl prose-h2:border-b prose-h2:border-gray-200 prose-h2:pb-1
+                        prose-h3:text-lg
+                        prose-h4:text-base
+                        prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
+                        prose-strong:font-semibold prose-strong:text-gray-900
+                        prose-em:text-gray-600
+                        prose-blockquote:border-l-4 prose-blockquote:border-blue-400 prose-blockquote:pl-4 prose-blockquote:py-2 prose-blockquote:bg-blue-50 prose-blockquote:rounded-r-md prose-blockquote:my-3 prose-blockquote:italic
+                        prose-table:w-full prose-table:border prose-table:border-gray-200 prose-table:rounded-md prose-table:my-4
+                        prose-th:px-3 prose-th:py-2 prose-th:text-left prose-th:font-semibold prose-th:bg-gray-50 prose-th:border prose-th:border-gray-200
+                        prose-td:px-3 prose-td:py-2 prose-td:border prose-td:border-gray-200 prose-td:text-gray-700
+                        prose-li:my-1 prose-li:text-gray-700
+                        prose-hr:my-4 prose-hr:border-gray-200
+                        ${
+                            variant === 'user'
+                                ? planMode
+                                    ? '!prose-p:text-primary-foreground !prose-li:text-primary-foreground !prose-strong:text-primary-foreground !prose-em:text-primary-foreground !prose-a:text-primary-foreground'
+                                    : '!prose-p:text-gray-900 !prose-li:text-gray-900 !prose-strong:text-gray-900 !prose-em:text-gray-700 !prose-a:text-blue-600'
+                                : ''
+                        }`;
+
+    const markdownComponents = useMemo(
+        () => ({
+            pre: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
+            code: ({ className, children, ...rest }: { className?: string; children?: React.ReactNode }) => {
+                const match = /language-(\w+)/.exec(className || '');
+                const text = String(children).replace(/\n$/, '');
+                if (match) {
+                    return (
+                        <div className="not-prose max-w-none">
+                            <CodeBlockWithActions
+                                content={text}
+                                language={match[1]}
+                                showCopyDownload={showCopyDownloadOnCodeBlock}
+                            />
+                        </div>
+                    );
+                }
+                if (text.includes('\n')) {
+                    return (
+                        <div className="not-prose max-w-none">
+                            <CodeBlockWithActions
+                                content={text}
+                                language="code"
+                                showCopyDownload={showCopyDownloadOnCodeBlock}
+                            />
+                        </div>
+                    );
+                }
+                return (
+                    <code
+                        className={`rounded px-1.5 py-0.5 text-sm font-mono bg-gray-50 break-words ${className || ''}`}
+                        {...rest}
+                    >
+                        {children}
+                    </code>
+                );
+            },
+        }),
+        [showCopyDownloadOnCodeBlock],
+    );
+
+    // Fenced code copy/download needs React tree (not marked HTML)
+    if (showCopyDownloadOnCodeBlock && markdownSource) {
+        return (
+            <div className={variant === 'user' ? '' : 'message-container'}>
+                <div className={`${proseMarkdownClasses}`}>
+                    <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+                        {markdownSource}
+                    </ReactMarkdown>
+                </div>
+            </div>
+        );
+    }
+
+    // If markdown was parsed, render as HTML with prose styling
+    if (htmlContent) {
+        return (
+            <div className={variant === 'user' ? '' : 'message-container'}>
+                <div
+                    className={`text-sm prose prose-sm max-w-none leading-relaxed break-words 
+                        prose-p:my-2 prose-p:text-gray-700
+                        prose-pre:my-2 prose-pre:bg-gray-50 prose-pre:border prose-pre:border-gray-200 prose-pre:rounded prose-pre:p-3
+                        prose-ul:my-2 prose-ol:my-2 
+                        prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:overflow-x-auto
+                        prose-code:break-words prose-code:bg-gray-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:font-mono
+                        prose-headings:font-semibold prose-headings:text-gray-900 prose-headings:mt-4 prose-headings:mb-2
+                        prose-h1:text-2xl prose-h1:border-b prose-h1:border-gray-200 prose-h1:pb-2
+                        prose-h2:text-xl prose-h2:border-b prose-h2:border-gray-200 prose-h2:pb-1
+                        prose-h3:text-lg
+                        prose-h4:text-base
+                        prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
+                        prose-strong:font-semibold prose-strong:text-gray-900
+                        prose-em:text-gray-600
+                        prose-blockquote:border-l-4 prose-blockquote:border-blue-400 prose-blockquote:pl-4 prose-blockquote:py-2 prose-blockquote:bg-blue-50 prose-blockquote:rounded-r-md prose-blockquote:my-3 prose-blockquote:italic
+                        prose-table:w-full prose-table:border prose-table:border-gray-200 prose-table:rounded-md prose-table:my-4
+                        prose-th:px-3 prose-th:py-2 prose-th:text-left prose-th:font-semibold prose-th:bg-gray-50 prose-th:border prose-th:border-gray-200
+                        prose-td:px-3 prose-td:py-2 prose-td:border prose-td:border-gray-200 prose-td:text-gray-700
+                        prose-li:my-1 prose-li:text-gray-700
+                        prose-hr:my-4 prose-hr:border-gray-200
+                        ${
+                            variant === 'user'
+                                ? planMode
+                                    ? '!prose-p:text-primary-foreground !prose-li:text-primary-foreground !prose-strong:text-primary-foreground !prose-em:text-primary-foreground !prose-a:text-primary-foreground'
+                                    : '!prose-p:text-gray-900 !prose-li:text-gray-900 !prose-strong:text-gray-900 !prose-em:text-gray-700 !prose-a:text-blue-600'
+                                : ''
+                        }`}
+                    dangerouslySetInnerHTML={{ __html: htmlContent }}
+                />
+            </div>
+        );
+    }
+
+    // For plain text content
+    return variant === 'user' ? (
+        <p
+            className={`text-sm leading-relaxed whitespace-pre-wrap break-words ${
+                planMode ? 'text-primary-foreground' : 'text-gray-900'
+            }`}
+        >
+            {content}
+        </p>
+    ) : (
+        <div className="message-container">
+            <p className="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap break-words">{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,
+    showAuthorName = false,
+    showAvatar = false,
+    showTimestamp = false,
+    onOpen,
+    onMessageClick,
+    isDesktopView = false,
+    isSmallScreen = false,
+    showCopyDownloadOnCodeBlock = false,
+}) => {
+    // Inject CSS styles for HTML content
+    useInjectStyles();
+
+    // Preserve server / store order for posts (TOOLUSE, THINKING, etc.); no client-side reordering
+    const displayMessages = messages;
+
+    //const isOwnMessage = author?.id === currentUser?.id;
+    //const isOwnMessage = messages.some((message: any) => (message as any)?.propsConfiguration?.contents?.role === AiAgentMessageRole.User);
+    const isOwnMessage =
+        displayMessages.some(
+            (message: any) => (message as any)?.propsConfiguration?.contents?.role === AiAgentMessageRole.User,
+        ) ||
+        (Array.isArray(author?.alias) &&
+            typeof currentUser?.authUserId === 'string' &&
+            author.alias.some((alias: string) => alias?.toLowerCase() === currentUser.authUserId.toLowerCase()));
+
+    const authorName =
+        author?.givenName && author?.familyName
+            ? `${author.givenName} ${author.familyName}`
+            : author?.username || 'Unknown User';
+
+    const firstMessage = displayMessages[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');
+    // const isSystemMessage = messages.some(
+    //     (message: any) => (message as any)?.propsConfiguration?.contents?.role === AiAgentMessageRole.Assistant,
+    // );
+
+    // 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'
+                }`}
+            >
+                {displayMessages.map((message, index) => (
+                    <ModernMessageBubble
+                        key={message.id}
+                        message={message}
+                        isOwnMessage={isOwnMessage}
+                        isSystemMessage={isSystemMessage}
+                        isFirstInGroup={index === 0}
+                        isLastInGroup={index === displayMessages.length - 1}
+                        onMessageClick={onMessageClick}
+                        formatTime={formatTime}
+                        showAuthorName={showAuthorName}
+                        showAvatar={showAvatar}
+                        showTimestamp={showTimestamp}
+                        showCopyDownloadOnCodeBlock={showCopyDownloadOnCodeBlock}
+                    />
+                ))}
+            </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">
+                        {displayMessages.map((message, index) => (
+                            <ModernMessageBubble
+                                key={message.id}
+                                message={message}
+                                isOwnMessage={isOwnMessage}
+                                isSystemMessage={isSystemMessage}
+                                isFirstInGroup={index === 0}
+                                isLastInGroup={index === displayMessages.length - 1}
+                                onMessageClick={onMessageClick}
+                                formatTime={formatTime}
+                                showTimestamp={showTimestamp}
+                                showCopyDownloadOnCodeBlock={showCopyDownloadOnCodeBlock}
+                            />
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+interface ModernMessageBubbleProps {
+    showAuthorName?: boolean;
+    showAvatar?: boolean;
+    showTimestamp?: boolean;
+    message: IPost;
+    isOwnMessage: boolean;
+    isSystemMessage: boolean;
+    isFirstInGroup: boolean;
+    isLastInGroup: boolean;
+    onMessageClick: (msg: IPost) => void;
+    formatTime: (timestamp: string) => string;
+    showCopyDownloadOnCodeBlock?: boolean;
+}
+
+const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
+    showAuthorName = false,
+    showAvatar = false,
+    showTimestamp = false,
+    message,
+    isOwnMessage,
+    isSystemMessage,
+    isFirstInGroup,
+    isLastInGroup,
+    onMessageClick,
+    formatTime,
+    showCopyDownloadOnCodeBlock = false,
+}) => {
+    const handleClick = () => {
+        onMessageClick?.(message);
+    };
+
+    const isAssistantRole = (message as any)?.propsConfiguration?.contents?.role === AiAgentMessageRole.Assistant;
+    const messageMode =
+        (message as any)?.propsConfiguration?.contents?.mode ??
+        (message as any)?.propsConfiguration?.content?.mode ??
+        (message as any)?.props?.mode;
+    const isPlanMode = messageMode === 'plan';
+    // 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 px-1 sm:px-2 -mx-1 sm:-mx-2 group">
+                <div className="flex items-start justify-end gap-2">
+                    <div className="flex flex-col items-end max-w-[85%]">
+                        {showAuthorName && (
+                            <div className="flex items-end space-x-2 mb-0.5">
+                                <span className="text-sm font-semibold text-gray-900">{authorName}</span>
+                            </div>
+                        )}
+
+                        {/* User message bubble (Image 2) */}
+                        <div
+                            className={`text-sm ${
+                                isAssistantRole
+                                    ? 'cursor-pointer rounded-2xl border border-gray-200 bg-gray-50 text-gray-900 px-4 py-2.5'
+                                    : // : 'user-message rounded-[22px] rounded-br-[4px] px-4 py-3 bg-primary text-primary-foreground shadow-sm'
+                                    isPlanMode
+                                    ? 'user-message rounded-[22px] rounded-br-[4px] px-4 py-3 bg-primary text-primary-foreground shadow-sm'
+                                    : 'user-message rounded-[22px] rounded-br-[4px] px-4 py-3 '
+                            }`}
+                            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}
+                                                    showCopyDownload={showCopyDownloadOnCodeBlock}
+                                                    variant={isAssistantRole ? 'default' : 'user'}
+                                                    planMode={!isAssistantRole && isPlanMode}
+                                                />
+                                            );
+                                        } else if (contentType === 'html') {
+                                            return (
+                                                <div
+                                                    className={
+                                                        isAssistantRole
+                                                            ? 'text-gray-800 html-content'
+                                                            : isPlanMode
+                                                            ? '!text-primary-foreground html-content'
+                                                            : 'text-gray-900 html-content'
+                                                    }
+                                                    dangerouslySetInnerHTML={{
+                                                        __html: prettifyHtmlContent(sanitizeHtml(message.message)),
+                                                    }}
+                                                />
+                                            );
+                                        } else {
+                                            return (
+                                                <FormattedMessageContent
+                                                    content={message.message}
+                                                    variant={isAssistantRole ? 'default' : 'user'}
+                                                    planMode={!isAssistantRole && isPlanMode}
+                                                    showCopyDownloadOnCodeBlock={showCopyDownloadOnCodeBlock}
+                                                />
+                                            );
+                                        }
+                                    })()}
+                                </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>
+                            )}
+                            {showTimestamp ? (
+                                <div
+                                    className={`text-[10px] mt-1 text-right ${
+                                        isAssistantRole
+                                            ? 'text-gray-500'
+                                            : isPlanMode
+                                            ? 'text-primary-foreground/80'
+                                            : 'text-gray-500'
+                                    }`}
+                                >
+                                    {formatTime(message.createdAt)}
+                                </div>
+                            ) : null}
+                        </div>
+                    </div>
+
+                    {/* User avatar on the right */}
+                    {showAvatar && (
+                        <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}
+                                onClick={isAssistantRole ? handleClick : undefined}
+                                onError={(e) => {
+                                    e.currentTarget.src = '/default-avatar.svg';
+                                }}
+                            />
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
+    // For other messages (left-aligned) — use Slot for streaming types (THINKING, TOOLUSE, etc.) like Kimi
+    const attachment =
+        (message as any)?.props?.attachment ?? (message as any)?.propsConfiguration?.contents?.attachment;
+    const slotName = getMessageSlotName((message as any)?.type);
+    // Don't show THINKING slot when attachment has no meaningful content or when dismissed
+    const isThinkingSlot = slotName === MessengerSlotFillNameEnum.THINKING_NAME;
+    const shouldShowThinkingSlot =
+        !!attachment &&
+        attachment.dismissed !== true &&
+        (attachment.isThinking === true || (attachment.thought != null && String(attachment.thought).trim() !== ''));
+    const shouldShowSlot = isThinkingSlot ? shouldShowThinkingSlot : !!attachment;
+    const hasStreamingSlot = !!slotName && shouldShowSlot;
+    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 ? handleClick : undefined}
+        >
+            <div className="flex items-start justify-between gap-3">
+                <div className="flex-1 min-w-0">
+                    {/* Slot fill for streaming message types (THINKING, TOOLUSE, CODEBLOCK, SERVICE, AIASSISTANT) */}
+                    {slotName && shouldShowSlot && (
+                        <Slot
+                            name={slotName}
+                            fillProps={{
+                                active: true,
+                                message,
+                                index: 0,
+                                onMessageClick,
+                            }}
+                        />
+                    )}
+                    {/* Default content when no slot or attachment (slot returns null when active: false) */}
+                    {!hasStreamingSlot && 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);
+
+                                // Markdown and text both go through FormattedMessageContent
+                                // which will intelligently detect and render markdown
+                                if (contentType === 'code') {
+                                    return (
+                                        <CodeFormatter
+                                            content={message.message}
+                                            showCopyDownload={showCopyDownloadOnCodeBlock}
+                                        />
+                                    );
+                                } else if (contentType === 'html') {
+                                    return (
+                                        <div
+                                            className="max-w-none text-gray-800 html-content"
+                                            dangerouslySetInnerHTML={{
+                                                __html: prettifyHtmlContent(sanitizeHtml(message.message)),
+                                            }}
+                                        />
+                                    );
+                                } else {
+                                    // Handle both 'markdown' and 'text' - FormattedMessageContent
+                                    // will detect markdown patterns and render accordingly
+                                    return (
+                                        <FormattedMessageContent
+                                            content={message.message}
+                                            showCopyDownloadOnCodeBlock={showCopyDownloadOnCodeBlock}
+                                        />
+                                    );
+                                }
+                            })()}
+                        </div>
+                    )}
+
+                    {!hasStreamingSlot && 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}
+
+                    {!hasStreamingSlot && (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}
+
+                    {!hasStreamingSlot && 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>
+                    ) : null}
+                </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>
+            {showTimestamp ? (
+                <div className="text-[10px] text-gray-500 mt-1 text-right">{formatTime(message.createdAt)}</div>
+            ) : null}
+        </div>
+    );
+};
+
+export const ModernMessageGroupComponent: React.FC<ModernMessageGroupProps> = ({
+    messages,
+    currentUser,
+    showAuthorName = false,
+    showAvatar = false,
+    showTimestamp = false,
+    onOpen,
+    onMessageClick,
+    isDesktopView = false,
+    isSmallScreen = false,
+    sandboxErrors = [],
+    currentFiles = {},
+    onFixError,
+    showCopyDownloadOnCodeBlock = 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}
+                        showAuthorName={showAuthorName}
+                        showAvatar={showAvatar}
+                        showTimestamp={showTimestamp}
+                        showCopyDownloadOnCodeBlock={showCopyDownloadOnCodeBlock}
+                    />
+                );
+            })}
+
+            {sandboxErrors?.map((error) => (
+                <div key={error.id} className="px-2">
+                    <ErrorFixCard
+                        error={error}
+                        onFixError={onFixError || (() => Promise.resolve())}
+                        currentFiles={currentFiles}
+                        isFixing={false}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};