@admin-layout/tailwind-chat-pro 12.2.4-alpha.102

package/src/components/messages-container-ui/ModernMessageGroup.tsx

@@ -0,0 +1,1885 @@
+import { Slot } from '@common-stack/components-pro';
+import { AiAgentMessageRole, IAuthUser, IPost } from 'common';
+import { differenceInMinutes, format } from 'date-fns';
+import { marked } from 'marked';
+import React, { useEffect, useMemo, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkBreaks from 'remark-breaks';
+import remarkGfm from 'remark-gfm';
+import { MessengerSlotFillNameEnum } from './messenger-slot-fill-name-enum';
+import { FilesList } from './FilesList';
+import { ErrorFixCard } from './ErrorFixCard';
+
+// 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
+});
+
+const ASSISTANT_RESPONSE_THEME_CLASS = 'llm-response-theme';
+const ASSISTANT_RESPONSE_CLASS = 'llm-response';
+const ASSISTANT_RESPONSE_BUBBLE_CLASS = 'llm-response__bubble';
+const ASSISTANT_RESPONSE_MARKDOWN_CLASS = 'llm-response__markdown';
+const USER_MESSAGE_TEXT_SIZE_CLASS = 'text-base';
+const USER_MESSAGE_PROSE_SIZE_CLASS = 'prose-base';
+/** Pasted queries longer than this collapse behind a "Show more" toggle. */
+const USER_MESSAGE_COLLAPSE_CHAR_THRESHOLD = 600;
+const USER_MESSAGE_COLLAPSED_MAX_HEIGHT = 220;
+
+function getAssistantResponseClasses(innerClassName?: string): string {
+    return [ASSISTANT_RESPONSE_MARKDOWN_CLASS, innerClassName].filter(Boolean).join(' ');
+}
+
+export function AssistantResponseWrapper({
+    children,
+    bubbleClassName,
+}: {
+    children: React.ReactNode;
+    bubbleClassName?: string;
+}) {
+    return (
+        <div className={ASSISTANT_RESPONSE_THEME_CLASS}>
+            <div className={ASSISTANT_RESPONSE_CLASS}>
+                <div className={[ASSISTANT_RESPONSE_BUBBLE_CLASS, bubbleClassName].filter(Boolean).join(' ')}>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// 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: inherit;
+    }
+
+    .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: inherit;
+    }
+    
+    .html-content h1 {
+        font-size: 1.875rem;
+        border-bottom: 2px solid #e5e7eb;
+        padding-bottom: 0.5rem;
+    }
+    .${ASSISTANT_RESPONSE_THEME_CLASS} {
+        --llm-content-max-width: 100%;
+        --llm-font-sans: 'Avenir Next', 'Segoe UI', sans-serif;
+        --llm-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
+        --llm-color-bg: #ffffff;
+        --llm-color-surface: #f6f7f8;
+        --llm-color-surface-2: #eef1f4;
+        --llm-color-surface-hover: #e9edf2;
+        --llm-color-border: #e3e7ee;
+        --llm-color-border-strong: #cfd7e3;
+        --llm-color-text: #121926;
+        --llm-color-text-secondary: #667085;
+        --llm-color-marker: #8e98a8;
+        --llm-color-link-underline: rgba(18, 25, 38, 0.18);
+        --llm-color-code-bg: rgba(249, 115, 22, 0.1);
+        --llm-color-code-text: #d96b00;
+        --llm-color-code-block-border: #ebeef3;
+        --llm-shadow-soft: 0 1px 2px rgba(18, 25, 38, 0.04), 0 10px 32px rgba(18, 25, 38, 0.05);
+        --llm-radius-bubble: 1.5rem;
+        --llm-radius-code: 0.85rem;
+        --llm-line-height-body: 1.62;
+        --llm-line-height-mobile: 1.55;
+        --llm-line-height-heading: 1.35;
+        --llm-space-heading-top: 1.45rem;
+        --llm-space-heading-bottom: 0.75rem;
+        --llm-space-paragraph: 1rem;
+        --llm-space-list: 0.9rem;
+        color: inherit;
+        background: transparent;
+    }
+
+    .${ASSISTANT_RESPONSE_THEME_CLASS}[data-color-mode='dark'],
+    [data-color-mode='dark'] .${ASSISTANT_RESPONSE_THEME_CLASS} {
+        --llm-color-bg: #0f1115;
+        --llm-color-surface: #171a20;
+        --llm-color-surface-2: #1f2530;
+        --llm-color-surface-hover: #232a36;
+        --llm-color-border: #2a3240;
+        --llm-color-border-strong: #364052;
+        --llm-color-text: #f3f5f8;
+        --llm-color-text-secondary: #aab3c2;
+        --llm-color-marker: #7f8999;
+        --llm-color-link-underline: rgba(243, 245, 248, 0.24);
+        --llm-color-code-bg: rgba(251, 146, 60, 0.14);
+        --llm-color-code-text: #ffb36b;
+        --llm-color-code-block-border: #262d39;
+        --llm-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.28), 0 14px 36px rgba(0, 0, 0, 0.3);
+    }
+
+    .${ASSISTANT_RESPONSE_CLASS} {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        width: 100%;
+        max-width: var(--llm-content-max-width);
+        font-family: var(--llm-font-sans);
+        color: inherit;
+    }
+
+    .${ASSISTANT_RESPONSE_BUBBLE_CLASS} {
+        position: relative;
+        width: 100%;
+        min-height: 1.75rem;
+        border-radius: var(--llm-radius-bubble);
+        color: inherit;
+        word-break: break-word;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} {
+        position: relative;
+        width: 100%;
+        max-width: none;
+        color: inherit;
+        font-size: 1rem;
+        line-height: var(--llm-line-height-body);
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} > :first-child {
+        margin-top: 0;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} > :last-child {
+        margin-bottom: 0;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} p,
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} li,
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} th,
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} td,
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} blockquote,
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS}.html-content,
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS}.assistant-html-content {
+        color: inherit;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} p,
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS}.html-content p,
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS}.assistant-html-content p {
+        margin: 0 0 var(--llm-space-paragraph);
+        white-space: pre-wrap;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} h1,
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} h2,
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} h3,
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} h4,
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} h5,
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} h6 {
+        margin: var(--llm-space-heading-top) 0 var(--llm-space-heading-bottom);
+        font-weight: 600;
+        letter-spacing: -0.02em;
+        line-height: var(--llm-line-height-heading);
+        color: inherit;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} h1 { font-size: 1.75rem; }
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} h2 { font-size: 1.5rem; }
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} h3 { font-size: 1.25rem; }
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} h4 { font-size: 1.05rem; }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} strong,
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} b {
+        font-weight: 600;
+        color: inherit;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} em,
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} i {
+        color: var(--llm-color-text-secondary);
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} a {
+        color: currentColor;
+        text-decoration: underline;
+        text-decoration-color: var(--llm-color-link-underline);
+        text-underline-offset: 0.18em;
+        transition: color 120ms ease, text-decoration-color 120ms ease;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} a:hover {
+        color: inherit;
+        text-decoration-color: currentColor;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} ul,
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} ol {
+        margin: 0.35rem 0 var(--llm-space-list);
+        padding-left: 1.15rem;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} ul {
+        list-style-type: disc;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} ol {
+        list-style-type: decimal;
+        /* Wider gutter so multi-digit markers (e.g. "60.") aren't clipped at the
+           content's left edge — long numbered content (verse, step lists) showed
+           "0." for line 60. */
+        padding-left: 2rem;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} li {
+        margin: 0.28rem 0;
+        padding-inline-start: 0.1rem;
+        /* \`normal\` collapses the stray "\\n" react-markdown inserts between <li>
+           and its child <p>; with \`pre-wrap\` that newline rendered as a blank
+           first line, stranding the marker above its text. Intra-paragraph
+           whitespace is preserved by the \`li > p\` rule below. */
+        white-space: normal;
+    }
+
+    /* Loose list items wrap their text in <p>. Keep pre-wrap for the text but
+       drop the paragraph margins so each item is a single tight line — fixes
+       poems / verse the model emits as numbered lists rendering as a sprawling,
+       double-spaced listicle. */
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} li > p {
+        margin-top: 0;
+        white-space: pre-wrap;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} li > p:last-child {
+        margin-bottom: 0;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} li > ul,
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} li > ol {
+        margin-top: 0.35rem;
+        margin-bottom: 0.15rem;
+        white-space: normal;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} ::marker {
+        color: var(--llm-color-marker);
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} hr {
+        margin: 1.25rem 0;
+        border: 0;
+        border-top: 1px solid var(--llm-color-border);
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} blockquote {
+        margin: 1rem 0;
+        padding: 0.2rem 0 0.2rem 1rem;
+        border-left: 2px solid var(--llm-color-border-strong);
+        background: transparent;
+        color: var(--llm-color-text-secondary);
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} blockquote p {
+        margin-bottom: 0;
+        color: inherit;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} :not(pre) > code,
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} .llm-inline-code {
+        display: inline-block;
+        padding: 0.08rem 0.38rem;
+        border: 0;
+        border-radius: 0.32rem;
+        font-family: var(--llm-font-mono);
+        font-size: 0.875em;
+        line-height: 1.45;
+        background: var(--llm-color-code-bg);
+        color: var(--llm-color-code-text);
+        box-decoration-break: clone;
+        -webkit-box-decoration-break: clone;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} table {
+        width: 100%;
+        margin: 1rem 0 1.1rem;
+        border-collapse: separate;
+        border-spacing: 0;
+        border: 1px solid var(--llm-color-border);
+        border-radius: 1rem;
+        overflow: hidden;
+        box-shadow: var(--llm-shadow-soft);
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} thead {
+        background: var(--llm-color-surface);
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} th,
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} td {
+        padding: 0.85rem 1rem;
+        border-bottom: 1px solid var(--llm-color-border);
+        text-align: left;
+        vertical-align: top;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} th {
+        font-size: 0.8rem;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        color: var(--llm-color-text-secondary);
+        background: var(--llm-color-surface);
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} td {
+        color: var(--llm-color-text);
+        background: var(--llm-color-bg);
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} tbody tr:last-child td {
+        border-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+        .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} {
+            font-size: 0.95rem;
+            line-height: var(--llm-line-height-mobile);
+        }
+
+        .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} th,
+        .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} td {
+            padding: 0.75rem 0.8rem;
+        }
+    }
+     * 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;
+    }
+
+    /* Safety net: long unbroken tokens (file paths, CSS selectors, URLs) inside a
+       pasted user query must never push the bubble past its own width — wrap
+       anywhere rather than overflow the card. */
+    .user-message,
+    .user-message * {
+        max-width: 100%;
+        overflow-wrap: anywhere;
+    }
+
+    /* Assistant replies must read as plain text on the page — no card. A shared
+       global class (.message-container, from @messenger-box/tailwind-ui-inbox)
+       ships its own pill background/padding; neutralize it here the same way the
+       user bubble already does above. */
+    .${ASSISTANT_RESPONSE_THEME_CLASS},
+    .${ASSISTANT_RESPONSE_CLASS},
+    .${ASSISTANT_RESPONSE_BUBBLE_CLASS},
+    .${ASSISTANT_RESPONSE_THEME_CLASS} .message-container {
+        background: transparent !important;
+        box-shadow: none !important;
+    }
+    .${ASSISTANT_RESPONSE_THEME_CLASS} .message-container {
+        padding: 0 !important;
+        margin: 0 !important;
+    }
+
+    /* 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;
+    }
+    
+`;
+
+// Hook to inject CSS styles
+const useInjectStyles = () => {
+    useEffect(() => {
+        const styleElementPresent = !!document.getElementById('html-content-styles');
+
+        // Check if styles are already injected
+        if (styleElementPresent) {
+            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;
+    if (t === 'TRAVEL') return MessengerSlotFillNameEnum.TRAVEL_NAME;
+    if (t === 'MEDIA') return MessengerSlotFillNameEnum.MEDIA_NAME;
+    if (t === 'WORKFLOW') return MessengerSlotFillNameEnum.WORKFLOW_NAME;
+    if (t === 'CONNECTOR') return MessengerSlotFillNameEnum.CONNECTOR_NAME;
+    // Shared catch-all card (shopping, design, page/resume, …). Routes type:'generic' to the
+    // registered `generic` Fill (MessageGeneric); without this the generic Fill never mounts.
+    if (t === 'GENERIC') return MessengerSlotFillNameEnum.GENERIC_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={`${variant === 'user' ? USER_MESSAGE_TEXT_SIZE_CLASS : 'text-sm'} ${
+                                variant === 'user' ? 'text-foreground' : '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 userMarkdownClasses = `${USER_MESSAGE_TEXT_SIZE_CLASS} prose ${USER_MESSAGE_PROSE_SIZE_CLASS} max-w-none leading-relaxed break-words
+                        prose-p:my-2 prose-p:text-foreground
+                        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-muted prose-code:text-foreground 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-foreground prose-headings:mt-4 prose-headings:mb-2
+                        prose-h1:text-2xl prose-h1:border-b prose-h1:border-border prose-h1:pb-2
+                        prose-h2:text-xl prose-h2:border-b prose-h2:border-border prose-h2:pb-1
+                        prose-h3:text-lg
+                        prose-h4:text-base
+                        prose-a:text-foreground prose-a:underline hover:prose-a:text-foreground
+                        prose-strong:font-semibold prose-strong:text-foreground
+                        prose-em:text-muted-foreground
+                        prose-blockquote:border-l-2 prose-blockquote:border-border prose-blockquote:pl-4 prose-blockquote:py-2 prose-blockquote:bg-transparent prose-blockquote:my-3 prose-blockquote:italic prose-blockquote:text-muted-foreground
+                        prose-table:w-full prose-table:border prose-table:border-border 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-muted prose-th:border prose-th:border-border
+                        prose-td:px-3 prose-td:py-2 prose-td:border prose-td:border-border prose-td:text-foreground
+                        prose-li:my-1 prose-li:text-foreground
+                        prose-hr:my-4 prose-hr:border-border
+                        !prose-p:text-foreground !prose-li:text-foreground !prose-strong:text-foreground !prose-em:text-muted-foreground !prose-a:text-foreground !prose-code:text-foreground`;
+
+    const userHtmlClasses = `${USER_MESSAGE_TEXT_SIZE_CLASS} prose ${USER_MESSAGE_PROSE_SIZE_CLASS} max-w-none leading-relaxed break-words
+                        prose-p:my-2 prose-p:text-foreground
+                        prose-pre:my-2 prose-pre:bg-muted prose-pre:border prose-pre:border-border 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-muted prose-code:text-foreground 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-foreground prose-headings:mt-4 prose-headings:mb-2
+                        prose-h1:text-2xl prose-h1:border-b prose-h1:border-border prose-h1:pb-2
+                        prose-h2:text-xl prose-h2:border-b prose-h2:border-border prose-h2:pb-1
+                        prose-h3:text-lg
+                        prose-h4:text-base
+                        prose-a:text-foreground prose-a:underline hover:prose-a:text-foreground
+                        prose-strong:font-semibold prose-strong:text-foreground
+                        prose-em:text-muted-foreground
+                        prose-blockquote:border-l-2 prose-blockquote:border-border prose-blockquote:pl-4 prose-blockquote:py-2 prose-blockquote:bg-transparent prose-blockquote:my-3 prose-blockquote:italic prose-blockquote:text-muted-foreground
+                        prose-table:w-full prose-table:border prose-table:border-border 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-muted prose-th:border prose-th:border-border
+                        prose-td:px-3 prose-td:py-2 prose-td:border prose-td:border-border prose-td:text-foreground
+                        prose-li:my-1 prose-li:text-foreground
+                        prose-hr:my-4 prose-hr:border-border
+                        !prose-p:text-foreground !prose-li:text-foreground !prose-strong:text-foreground !prose-em:text-muted-foreground !prose-a:text-foreground !prose-code:text-foreground`;
+
+    const markdownComponents = useMemo(() => {
+        const isUserVariant = variant === 'user';
+        const userTextClass = 'text-foreground';
+        const userMutedTextClass = 'text-muted-foreground';
+        const userLinkClass = 'text-foreground underline underline-offset-2 hover:text-foreground/80';
+
+        return {
+            p: ({ children }: { children?: React.ReactNode }) =>
+                isUserVariant ? (
+                    <p className={`break-words mb-4 last:mb-0 leading-relaxed ${userTextClass}`}>{children}</p>
+                ) : (
+                    <p>{children}</p>
+                ),
+            h1: ({ children }: { children?: React.ReactNode }) =>
+                isUserVariant ? (
+                    <h1 className={`text-2xl font-semibold mt-6 mb-3 first:mt-0 ${userTextClass}`}>{children}</h1>
+                ) : (
+                    <h1>{children}</h1>
+                ),
+            h2: ({ children }: { children?: React.ReactNode }) =>
+                isUserVariant ? (
+                    <h2 className={`text-xl font-semibold mt-5 mb-3 first:mt-0 ${userTextClass}`}>{children}</h2>
+                ) : (
+                    <h2>{children}</h2>
+                ),
+            h3: ({ children }: { children?: React.ReactNode }) =>
+                isUserVariant ? (
+                    <h3 className={`text-lg font-semibold mt-4 mb-2 first:mt-0 ${userTextClass}`}>{children}</h3>
+                ) : (
+                    <h3>{children}</h3>
+                ),
+            h4: ({ children }: { children?: React.ReactNode }) =>
+                isUserVariant ? (
+                    <h4 className={`text-base font-semibold mt-4 mb-2 first:mt-0 ${userTextClass}`}>{children}</h4>
+                ) : (
+                    <h4>{children}</h4>
+                ),
+            blockquote: ({ children }: { children?: React.ReactNode }) =>
+                isUserVariant ? (
+                    <blockquote
+                        className={`border-l-2 border-border pl-4 py-2 bg-transparent my-3 italic ${userMutedTextClass}`}
+                    >
+                        {children}
+                    </blockquote>
+                ) : (
+                    <blockquote>{children}</blockquote>
+                ),
+            hr: () => (isUserVariant ? <hr className="my-4 border-border" /> : <hr />),
+            ul: ({ children }: { children?: React.ReactNode }) => (
+                <ul
+                    className={
+                        isUserVariant
+                            ? `list-disc pl-5 mb-4 space-y-1.5 marker:text-muted-foreground [&_ul]:mt-1.5 [&_ol]:mt-1.5 ${userTextClass}`
+                            : 'list-disc pl-5'
+                    }
+                >
+                    {children}
+                </ul>
+            ),
+            ol: ({ children }: { children?: React.ReactNode }) => (
+                <ol
+                    className={
+                        isUserVariant
+                            ? `list-decimal pl-5 mb-4 space-y-1.5 marker:text-muted-foreground [&_ul]:mt-1.5 [&_ol]:mt-1.5 ${userTextClass}`
+                            : 'list-decimal pl-5'
+                    }
+                >
+                    {children}
+                </ol>
+            ),
+            li: ({ children }: { children?: React.ReactNode }) => (
+                <li
+                    className={
+                        isUserVariant
+                            ? `break-words whitespace-pre-wrap leading-relaxed [&>ul]:whitespace-normal [&>ol]:whitespace-normal ${userMutedTextClass}`
+                            : 'break-words whitespace-pre-wrap leading-relaxed [&>ul]:whitespace-normal [&>ol]:whitespace-normal'
+                    }
+                >
+                    {children}
+                </li>
+            ),
+            a: ({ href, children }: { href?: string; children?: React.ReactNode }) =>
+                isUserVariant ? (
+                    <a href={href} className={userLinkClass}>
+                        {children}
+                    </a>
+                ) : (
+                    <a href={href}>{children}</a>
+                ),
+            table: ({
+                children,
+                ...props
+            }: React.TableHTMLAttributes<HTMLTableElement> & { children?: React.ReactNode }) =>
+                isUserVariant ? (
+                    <div className="overflow-x-auto my-4 w-full rounded-md border border-border">
+                        <table className="w-full text-sm" {...props}>
+                            {children}
+                        </table>
+                    </div>
+                ) : (
+                    <div className="overflow-x-auto my-4 w-full">
+                        <table {...props}>{children}</table>
+                    </div>
+                ),
+            thead: ({ children }: { children?: React.ReactNode }) =>
+                isUserVariant ? <thead className="bg-muted text-left">{children}</thead> : <thead>{children}</thead>,
+            th: ({ children }: { children?: React.ReactNode }) =>
+                isUserVariant ? (
+                    <th className={`px-3 py-2 text-left font-semibold ${userTextClass}`}>{children}</th>
+                ) : (
+                    <th>{children}</th>
+                ),
+            td: ({ children }: { children?: React.ReactNode }) =>
+                isUserVariant ? <td className={`px-3 py-2 ${userMutedTextClass}`}>{children}</td> : <td>{children}</td>,
+            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={
+                            isUserVariant
+                                ? `rounded px-1.5 py-0.5 text-sm font-mono bg-muted text-foreground break-words ${className || ''}`
+                                : `llm-inline-code break-words ${className || ''}`
+                        }
+                        {...rest}
+                    >
+                        {children}
+                    </code>
+                );
+            },
+        };
+    }, [planMode, showCopyDownloadOnCodeBlock, variant]);
+
+    // Fenced code copy/download needs React tree (not marked HTML)
+    if (showCopyDownloadOnCodeBlock && markdownSource) {
+        if (variant === 'user') {
+            return (
+                <div className={userMarkdownClasses}>
+                    <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownComponents}>
+                        {markdownSource}
+                    </ReactMarkdown>
+                </div>
+            );
+        }
+
+        return (
+            <AssistantResponseWrapper>
+                <div className={getAssistantResponseClasses('min-w-0')}>
+                    <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownComponents}>
+                        {markdownSource}
+                    </ReactMarkdown>
+                </div>
+            </AssistantResponseWrapper>
+        );
+    }
+
+    // If markdown was parsed, render as HTML with prose styling
+    if (htmlContent) {
+        if (variant === 'user') {
+            return <div className={userHtmlClasses} dangerouslySetInnerHTML={{ __html: htmlContent }} />;
+        }
+
+        return (
+            <AssistantResponseWrapper>
+                <div
+                    className={getAssistantResponseClasses('min-w-0')}
+                    dangerouslySetInnerHTML={{ __html: htmlContent }}
+                />
+            </AssistantResponseWrapper>
+        );
+    }
+
+    // For plain text content
+    return variant === 'user' ? (
+        <p
+            className={`${USER_MESSAGE_TEXT_SIZE_CLASS} leading-relaxed whitespace-pre-wrap break-words text-foreground`}
+        >
+            {content}
+        </p>
+    ) : (
+        <AssistantResponseWrapper>
+            <div className={getAssistantResponseClasses()}>
+                <p className="leading-relaxed whitespace-pre-wrap break-words">{content}</p>
+            </div>
+        </AssistantResponseWrapper>
+    );
+};
+
+// 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'
+            } 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 [expanded, setExpanded] = useState(false);
+
+    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';
+    const isLongUserMessage =
+        !isAssistantRole && ((message as any)?.message?.length ?? 0) > USER_MESSAGE_COLLAPSE_CHAR_THRESHOLD;
+    const isCollapsed = isLongUserMessage && !expanded;
+    // 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%] min-w-0">
+                        {showAuthorName && (
+                            <div className="flex items-end space-x-2 mb-0.5">
+                                <span className="text-sm font-semibold text-foreground">{authorName}</span>
+                            </div>
+                        )}
+
+                        {/* User message bubble (Image 2) */}
+                        <div
+                            className={`${isAssistantRole ? 'text-sm' : USER_MESSAGE_TEXT_SIZE_CLASS} ${
+                                isAssistantRole
+                                    ? 'cursor-pointer rounded-2xl border border-border bg-muted text-foreground px-4 py-2.5'
+                                    : 'user-message rounded-[22px] rounded-br-[4px] px-4 py-3 bg-muted text-foreground shadow-sm'
+                            }`}
+                            onClick={isAssistantRole ? handleClick : undefined}
+                            dir={detectTextDirection((message as any)?.message || '')}
+                            lang={detectLanguageTag((message as any)?.message || '')}
+                        >
+                            {message.message && (
+                                <div
+                                    className={`max-w-none ${isCollapsed ? 'relative overflow-hidden' : ''}`}
+                                    style={isCollapsed ? { maxHeight: USER_MESSAGE_COLLAPSED_MAX_HEIGHT } : undefined}
+                                >
+                                    {isCollapsed && (
+                                        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-muted to-transparent" />
+                                    )}
+                                    {(() => {
+                                        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') {
+                                            if (isAssistantRole) {
+                                                return (
+                                                    <AssistantResponseWrapper>
+                                                        <div
+                                                            className={getAssistantResponseClasses('min-w-0')}
+                                                            dangerouslySetInnerHTML={{
+                                                                __html: prettifyHtmlContent(
+                                                                    sanitizeHtml(message.message),
+                                                                ),
+                                                            }}
+                                                        />
+                                                    </AssistantResponseWrapper>
+                                                );
+                                            }
+
+                                            return (
+                                                <div
+                                                    className="text-foreground html-content"
+                                                    dangerouslySetInnerHTML={{
+                                                        __html: prettifyHtmlContent(sanitizeHtml(message.message)),
+                                                    }}
+                                                />
+                                            );
+                                        } else {
+                                            return (
+                                                <FormattedMessageContent
+                                                    content={message.message}
+                                                    variant={isAssistantRole ? 'default' : 'user'}
+                                                    planMode={!isAssistantRole && isPlanMode}
+                                                    showCopyDownloadOnCodeBlock={showCopyDownloadOnCodeBlock}
+                                                />
+                                            );
+                                        }
+                                    })()}
+                                </div>
+                            )}
+
+                            {isLongUserMessage && (
+                                <button
+                                    type="button"
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        setExpanded((v) => !v);
+                                    }}
+                                    className="mt-1 flex items-center gap-1 text-sm font-medium text-muted-foreground hover:text-foreground"
+                                >
+                                    {expanded ? 'Show less' : 'Show more'}
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        strokeWidth={2}
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        className={`h-3.5 w-3.5 transition-transform ${expanded ? 'rotate-180' : ''}`}
+                                        aria-hidden
+                                    >
+                                        <path d="M6 9l6 6 6-6" />
+                                    </svg>
+                                </button>
+                            )}
+
+                            {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 text-muted-foreground">
+                                    {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 w-full min-w-0 px-0 py-2 ${
+                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="min-w-0 relative max-w-full w-full text-foreground"
+                            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 (
+                                        <AssistantResponseWrapper>
+                                            <div
+                                                className={getAssistantResponseClasses(
+                                                    'min-w-0 relative max-w-full w-full',
+                                                )}
+                                                dangerouslySetInnerHTML={{
+                                                    __html: prettifyHtmlContent(sanitizeHtml(message.message)),
+                                                }}
+                                            />
+                                        </AssistantResponseWrapper>
+                                    );
+                                } 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>
+    );
+};