@admin-layout/tailwind-chat-pro 12.2.4-alpha.81 → 12.2.4-alpha.82

package/lib/components/messages-container-ui/ModernMessageGroup.js

@@ -0,0 +1,1883 @@
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {Slot}from'@common-stack/components-pro';import {AiAgentMessageRole}from'common';import {format,differenceInMinutes}from'date-fns';import {marked}from'marked';import React,{useMemo,useEffect}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.js';import {FilesList}from'./FilesList.js';import {ErrorFixCard}from'./ErrorFixCard.js';// 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';
+function getAssistantResponseClasses(innerClassName) {
+  return [ASSISTANT_RESPONSE_MARKDOWN_CLASS, innerClassName].filter(Boolean).join(' ');
+}
+function AssistantResponseWrapper({
+  children,
+  bubbleClassName
+}) {
+  return jsx("div", {
+    className: ASSISTANT_RESPONSE_THEME_CLASS,
+    children: jsx("div", {
+      className: ASSISTANT_RESPONSE_CLASS,
+      children: jsx("div", {
+        className: [ASSISTANT_RESPONSE_BUBBLE_CLASS, bubbleClassName].filter(Boolean).join(' '),
+        children: children
+      })
+    })
+  });
+}
+// 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;
+    }
+    .${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: var(--llm-color-text);
+        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: var(--llm-color-text);
+    }
+
+    .${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: var(--llm-color-text);
+    }
+
+    .${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: var(--llm-color-text);
+    }
+
+    .${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: var(--llm-color-text);
+        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;
+    }
+
+    .assistant-message-container {
+        background: transparent;
+        padding-top: 0;
+        padding-bottom: 0;
+        margin: 0;
+        transition: none;
+        box-shadow: none;
+    }
+
+    .assistant-html-content {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        line-height: 1.6;
+        color: #374151;
+    }
+
+    .assistant-html-content h1,
+    .assistant-html-content h2,
+    .assistant-html-content h3,
+    .assistant-html-content h4,
+    .assistant-html-content h5,
+    .assistant-html-content h6 {
+        font-weight: 600;
+        line-height: 1.25;
+        color: #111827;
+    }
+
+    .assistant-html-content h1 {
+        font-size: 1.875rem;
+        margin-top: 2rem;
+        margin-bottom: 1rem;
+    }
+
+    .assistant-html-content h2 {
+        font-size: 1.5rem;
+        margin-top: 2rem;
+        margin-bottom: 1rem;
+    }
+
+    .assistant-html-content h3 {
+        font-size: 1.25rem;
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+    }
+
+    .assistant-html-content h4 {
+        font-size: 1.125rem;
+        margin-top: 1rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .assistant-html-content p {
+        margin-top: 0;
+        margin-bottom: 1rem;
+        line-height: 1.625;
+        color: #374151;
+    }
+
+    .assistant-html-content ul,
+    .assistant-html-content ol {
+        margin: 1rem 0;
+        padding-left: 1.25rem;
+    }
+
+    .assistant-html-content ul {
+        list-style-type: disc;
+    }
+
+    .assistant-html-content ol {
+        list-style-type: decimal;
+    }
+
+    .assistant-html-content li {
+        margin-bottom: 0.375rem;
+        line-height: 1.625;
+        color: #374151;
+    }
+
+    .assistant-html-content li > ul,
+    .assistant-html-content li > ol {
+        margin-top: 0.375rem;
+        margin-bottom: 0.375rem;
+    }
+
+    .assistant-html-content a {
+        color: #2563eb;
+        text-decoration: none;
+    }
+
+    .assistant-html-content a:hover {
+        color: #1d4ed8;
+        text-decoration: underline;
+        text-underline-offset: 2px;
+    }
+
+    .assistant-html-content strong,
+    .assistant-html-content b {
+        font-weight: 600;
+        color: #111827;
+    }
+
+    .assistant-html-content em,
+    .assistant-html-content i {
+        font-style: italic;
+        color: #4b5563;
+    }
+
+    .assistant-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;
+    }
+
+    .assistant-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;
+    }
+
+    .assistant-html-content pre code {
+        background-color: transparent;
+        padding: 0;
+        border: none;
+        color: #374151;
+        font-size: inherit;
+    }
+
+    .assistant-html-content blockquote {
+        margin: 1.5rem 0;
+        padding: 0 0 0 1rem;
+        border-left: 4px solid #d1d5db;
+        font-style: italic;
+        color: #6b7280;
+        background-color: transparent;
+        border-radius: 0;
+    }
+
+    .assistant-html-content blockquote p {
+        margin-bottom: 0;
+    }
+
+    .assistant-html-content table {
+        border-collapse: collapse;
+        border: 1px solid #e5e7eb;
+        width: 100%;
+        margin: 1rem 0;
+    }
+
+    .assistant-html-content th,
+    .assistant-html-content td {
+        text-align: left;
+        vertical-align: top;
+    }
+
+    .assistant-html-content th {
+        padding: 0.5rem 1rem;
+        background-color: #f9fafb;
+        border: 1px solid #e5e7eb;
+        font-weight: 500;
+        font-size: 0.75rem;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        color: #4b5563;
+    }
+
+    .assistant-html-content td {
+        padding: 0.5rem 1rem;
+        border-top: 1px solid #e5e7eb;
+        color: #374151;
+    }
+
+    .assistant-html-content hr {
+        border: none;
+        border-top: 1px solid #e5e7eb;
+        margin: 2rem 0;
+    }
+    
+    /* Markdown content styling */
+    .markdown-content {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        line-height: 1.6;
+        color: #374151;
+    }
+    
+    .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(() => {
+    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();
+      }
+    };
+  }, []);
+};
+// Enhanced utility function to group messages by user and time
+const groupMessagesByUserAndTime = (messages, timeThresholdMinutes = 5) => {
+  if (!messages || messages.length === 0) return [];
+  const groups = [];
+  let currentGroup = [];
+  let lastMessage = null;
+  for (const message of messages) {
+    if (typeof message === 'string') continue; // Skip date separators
+    const shouldStartNewGroup = !lastMessage || lastMessage.author?.id !== message.author?.id || differenceInMinutes(new Date(message.createdAt), new Date(lastMessage.createdAt)) > timeThresholdMinutes;
+    if (shouldStartNewGroup) {
+      if (currentGroup.length > 0) {
+        groups.push(currentGroup);
+      }
+      currentGroup = [message];
+    } else {
+      currentGroup.push(message);
+    }
+    lastMessage = message;
+  }
+  if (currentGroup.length > 0) {
+    groups.push(currentGroup);
+  }
+  return groups;
+};
+// Enhanced content detection that properly identifies different content types
+const detectContentType = value => {
+  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';
+};
+/** Map message type (THINKING, TOOLUSE, etc.) to slot fill name for Kimi-like streaming UI */
+const getMessageSlotName = type => {
+  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;
+  return null;
+};
+// Enhanced sanitizer that allows most HTML tags while maintaining security
+const sanitizeHtml = html => {
+  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.SHOW_ELEMENT);
+    let node = walker.nextNode();
+    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();
+    }
+    return doc.body.innerHTML;
+  } catch (e) {
+    return html.replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, '');
+  }
+};
+// Function to prettify HTML content
+const prettifyHtmlContent = htmlContent => {
+  // 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 = ({
+  blocks
+}) => {
+  if (!blocks || !Array.isArray(blocks) || blocks.length === 0) return null;
+  return jsx("div", {
+    className: "space-y-3",
+    children: 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 jsx("div", {
+          className: "max-w-none text-gray-800",
+          dangerouslySetInnerHTML: {
+            __html: html
+          }
+        }, idx);
+      }
+      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 jsx("div", {
+          className: "rounded-lg overflow-hidden border border-gray-200",
+          children: jsx("img", {
+            className: "w-full h-auto",
+            src: src,
+            alt: alt
+          })
+        }, idx);
+      }
+      if (/button/i.test(type)) {
+        const text = block?.text || block?.data?.text || 'Button';
+        const href = block?.href || block?.link || block?.data?.href || '#';
+        return jsx("a", {
+          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",
+          children: text
+        }, idx);
+      }
+      if (/columns?/i.test(type)) {
+        const cols = block?.columns || block?.data?.columns || [];
+        return jsx("div", {
+          className: "grid grid-cols-1 sm:grid-cols-2 gap-3",
+          children: cols.map((col, colIdx) => jsx("div", {
+            className: "space-y-2",
+            children: jsx(BuilderLikeRenderer, {
+              blocks: col?.blocks || col?.children
+            })
+          }, colIdx))
+        }, idx);
+      }
+      return jsx("div", {
+        className: "message-container",
+        children: jsx("pre", {
+          className: "text-xs text-gray-600 overflow-x-auto",
+          children: JSON.stringify(block, null, 2)
+        })
+      }, idx);
+    })
+  });
+};
+// Code block with optional header (language + copy) and footer (copy + download) per Image 2
+const CodeBlockWithActions = ({
+  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
+  }) => jsxs("svg", {
+    className: className,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": true,
+    children: [jsx("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"
+    }), jsx("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"
+    })]
+  });
+  /** Arrow into tray (download) */
+  const IconDownload = ({
+    className
+  }) => jsx("svg", {
+    className: className,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    children: jsx("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"
+    })
+  });
+  const IconCheck = ({
+    className
+  }) => jsx("svg", {
+    className: className,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.75,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    children: jsx("path", {
+      d: "M5 13l4 4L19 7"
+    })
+  });
+  const iconMuted = 'text-slate-500 hover:text-slate-600';
+  return jsxs("div", {
+    className: "rounded-xl bg-white overflow-hidden my-3 shadow-sm ring-1 ring-slate-200/60",
+    children: [jsxs("div", {
+      className: "flex items-center justify-between px-4 pt-4 pb-3 bg-white",
+      children: [jsx("span", {
+        className: "text-[11px] font-semibold uppercase tracking-wide text-slate-500",
+        children: langLabel
+      }), jsx("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",
+        children: jsx(IconCopy, {
+          className: "w-[15px] h-[15px] shrink-0"
+        })
+      })]
+    }), jsx("div", {
+      className: "px-4 pb-4",
+      children: jsx("div", {
+        className: "overflow-x-auto bg-white py-4",
+        children: jsx("pre", {
+          className: "text-sm text-slate-900 font-mono leading-relaxed whitespace-pre-wrap break-words m-0 p-0 border-0 bg-transparent",
+          children: jsx("code", {
+            className: "bg-transparent",
+            children: content
+          })
+        })
+      })
+    }), showCopyDownload && jsxs("div", {
+      className: "flex items-center justify-start gap-0.5 px-4 pb-3 pt-0 mt-2 bg-white",
+      children: [jsx("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',
+        children: copied ? jsx(IconCheck, {
+          className: "w-[15px] h-[15px] text-emerald-600"
+        }) : jsx(IconCopy, {
+          className: "w-[15px] h-[15px] shrink-0"
+        })
+      }), jsx("button", {
+        type: "button",
+        onClick: handleDownload,
+        className: `p-1 rounded-md hover:bg-slate-100/80 transition-colors ${iconMuted}`,
+        title: "Download",
+        "aria-label": "Download",
+        children: jsx(IconDownload, {
+          className: "w-[15px] h-[15px] shrink-0"
+        })
+      })]
+    })]
+  });
+};
+// Infer language from file extension or content
+const inferCodeLanguage = (section, filename) => {
+  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
+const CodeFormatter = ({
+  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 jsx("div", {
+    className: variant === 'user' ? '' : 'message-container',
+    children: jsx("div", {
+      className: "space-y-4",
+      children: 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 jsx("div", {
+            className: "code-block-container",
+            children: jsxs("div", {
+              className: "code-block-header",
+              children: ["\uD83D\uDCC4 ", fileMatch[1]]
+            })
+          }, index);
+        }
+        // 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 jsx(CodeBlockWithActions, {
+            content: section.trim(),
+            language: lang,
+            showCopyDownload: showCopyDownload
+          }, index);
+        }
+        // Regular text content
+        return jsx("div", {
+          className: `${variant === 'user' ? USER_MESSAGE_TEXT_SIZE_CLASS : 'text-sm'} ${variant === 'user' ? planMode ? 'text-primary-foreground' : 'text-gray-900' : 'text-gray-700'} leading-relaxed whitespace-pre-wrap break-words`,
+          children: section.trim()
+        }, index);
+      })
+    })
+  });
+};
+// Enhanced markdown renderer using marked (similar to MessageBubble.tsx)
+const FormattedMessageContent = ({
+  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
+        });
+        // Only return if parsing actually produced HTML (not just the same text)
+        if (parsed && parsed.trim() !== trimmed && parsed.includes('<')) {
+          return {
+            htmlContent: parsed,
+            markdownSource: trimmed
+          };
+        }
+      }
+      return {
+        htmlContent: null,
+        markdownSource: null
+      };
+    } catch (error) {
+      console.error('Error parsing markdown:', error);
+      return {
+        htmlContent: null,
+        markdownSource: 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-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
+                        ${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 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-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
+                        ${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(() => {
+    const isUserVariant = variant === 'user';
+    const userTextClass = planMode ? 'text-primary-foreground' : 'text-gray-900';
+    const userMutedTextClass = planMode ? 'text-primary-foreground' : 'text-gray-700';
+    const userLinkClass = planMode ? 'text-primary-foreground underline underline-offset-2' : 'text-blue-600 hover:underline underline-offset-2';
+    return {
+      p: ({
+        children
+      }) => isUserVariant ? jsx("p", {
+        className: `break-words mb-4 last:mb-0 leading-relaxed ${userTextClass}`,
+        children: children
+      }) : jsx("p", {
+        children: children
+      }),
+      h1: ({
+        children
+      }) => isUserVariant ? jsx("h1", {
+        className: `text-2xl font-semibold mt-6 mb-3 first:mt-0 ${userTextClass}`,
+        children: children
+      }) : jsx("h1", {
+        children: children
+      }),
+      h2: ({
+        children
+      }) => isUserVariant ? jsx("h2", {
+        className: `text-xl font-semibold mt-5 mb-3 first:mt-0 ${userTextClass}`,
+        children: children
+      }) : jsx("h2", {
+        children: children
+      }),
+      h3: ({
+        children
+      }) => isUserVariant ? jsx("h3", {
+        className: `text-lg font-semibold mt-4 mb-2 first:mt-0 ${userTextClass}`,
+        children: children
+      }) : jsx("h3", {
+        children: children
+      }),
+      h4: ({
+        children
+      }) => isUserVariant ? jsx("h4", {
+        className: `text-base font-semibold mt-4 mb-2 first:mt-0 ${userTextClass}`,
+        children: children
+      }) : jsx("h4", {
+        children: children
+      }),
+      blockquote: ({
+        children
+      }) => isUserVariant ? jsx("blockquote", {
+        className: `border-l-4 border-blue-400 pl-4 py-2 bg-blue-50 rounded-r-md my-3 italic ${userMutedTextClass}`,
+        children: children
+      }) : jsx("blockquote", {
+        children: children
+      }),
+      hr: () => isUserVariant ? jsx("hr", {
+        className: "my-4 border-gray-200"
+      }) : jsx("hr", {}),
+      ul: ({
+        children
+      }) => jsx("ul", {
+        className: isUserVariant ? `list-disc pl-5 mb-4 space-y-1.5 marker:text-gray-500 [&_ul]:mt-1.5 [&_ol]:mt-1.5 ${userTextClass}` : 'list-disc pl-5',
+        children: children
+      }),
+      ol: ({
+        children
+      }) => jsx("ol", {
+        className: isUserVariant ? `list-decimal pl-5 mb-4 space-y-1.5 marker:text-gray-500 [&_ul]:mt-1.5 [&_ol]:mt-1.5 ${userTextClass}` : 'list-decimal pl-5',
+        children: children
+      }),
+      li: ({
+        children
+      }) => jsx("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: children
+      }),
+      a: ({
+        href,
+        children
+      }) => isUserVariant ? jsx("a", {
+        href: href,
+        className: userLinkClass,
+        children: children
+      }) : jsx("a", {
+        href: href,
+        children: children
+      }),
+      table: ({
+        children,
+        ...props
+      }) => isUserVariant ? jsx("div", {
+        className: "overflow-x-auto my-4 w-full rounded-md border border-gray-200",
+        children: jsx("table", {
+          className: "w-full text-sm",
+          ...props,
+          children: children
+        })
+      }) : jsx("div", {
+        className: "overflow-x-auto my-4 w-full",
+        children: jsx("table", {
+          ...props,
+          children: children
+        })
+      }),
+      thead: ({
+        children
+      }) => isUserVariant ? jsx("thead", {
+        className: "bg-gray-50 text-left",
+        children: children
+      }) : jsx("thead", {
+        children: children
+      }),
+      th: ({
+        children
+      }) => isUserVariant ? jsx("th", {
+        className: `px-3 py-2 text-left font-semibold ${userTextClass}`,
+        children: children
+      }) : jsx("th", {
+        children: children
+      }),
+      td: ({
+        children
+      }) => isUserVariant ? jsx("td", {
+        className: `px-3 py-2 ${userMutedTextClass}`,
+        children: children
+      }) : jsx("td", {
+        children: children
+      }),
+      pre: ({
+        children
+      }) => jsx(Fragment, {
+        children: children
+      }),
+      code: ({
+        className,
+        children,
+        ...rest
+      }) => {
+        const match = /language-(\w+)/.exec(className || '');
+        const text = String(children).replace(/\n$/, '');
+        if (match) {
+          return jsx("div", {
+            className: "not-prose max-w-none",
+            children: jsx(CodeBlockWithActions, {
+              content: text,
+              language: match[1],
+              showCopyDownload: showCopyDownloadOnCodeBlock
+            })
+          });
+        }
+        if (text.includes('\n')) {
+          return jsx("div", {
+            className: "not-prose max-w-none",
+            children: jsx(CodeBlockWithActions, {
+              content: text,
+              language: "code",
+              showCopyDownload: showCopyDownloadOnCodeBlock
+            })
+          });
+        }
+        return jsx("code", {
+          className: isUserVariant ? `rounded px-1.5 py-0.5 text-sm font-mono bg-gray-50 break-words ${className || ''}` : `llm-inline-code break-words ${className || ''}`,
+          ...rest,
+          children: children
+        });
+      }
+    };
+  }, [planMode, showCopyDownloadOnCodeBlock, variant]);
+  // Fenced code copy/download needs React tree (not marked HTML)
+  if (showCopyDownloadOnCodeBlock && markdownSource) {
+    if (variant === 'user') {
+      return jsx("div", {
+        className: userMarkdownClasses,
+        children: jsx(ReactMarkdown, {
+          remarkPlugins: [remarkGfm, remarkBreaks],
+          components: markdownComponents,
+          children: markdownSource
+        })
+      });
+    }
+    return jsx(AssistantResponseWrapper, {
+      children: jsx("div", {
+        className: getAssistantResponseClasses('min-w-0'),
+        children: jsx(ReactMarkdown, {
+          remarkPlugins: [remarkGfm, remarkBreaks],
+          components: markdownComponents,
+          children: markdownSource
+        })
+      })
+    });
+  }
+  // If markdown was parsed, render as HTML with prose styling
+  if (htmlContent) {
+    if (variant === 'user') {
+      return jsx("div", {
+        className: userHtmlClasses,
+        dangerouslySetInnerHTML: {
+          __html: htmlContent
+        }
+      });
+    }
+    return jsx(AssistantResponseWrapper, {
+      children: jsx("div", {
+        className: getAssistantResponseClasses('min-w-0'),
+        dangerouslySetInnerHTML: {
+          __html: htmlContent
+        }
+      })
+    });
+  }
+  // For plain text content
+  return variant === 'user' ? jsx("p", {
+    className: `${USER_MESSAGE_TEXT_SIZE_CLASS} leading-relaxed whitespace-pre-wrap break-words ${planMode ? 'text-primary-foreground' : 'text-gray-900'}`,
+    children: content
+  }) : jsx(AssistantResponseWrapper, {
+    children: jsx("div", {
+      className: getAssistantResponseClasses(),
+      children: jsx("p", {
+        className: "leading-relaxed whitespace-pre-wrap break-words",
+        children: content
+      })
+    })
+  });
+};
+// Detect predominant text direction (RTL/LTR) for international content
+const detectTextDirection = text => {
+  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 => {
+  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 => {
+  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 = ({
+  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 => message?.propsConfiguration?.contents?.role === AiAgentMessageRole.User) || Array.isArray(author?.alias) && typeof currentUser?.authUserId === 'string' && author.alias.some(alias => alias?.toLowerCase() === currentUser.authUserId.toLowerCase());
+  author?.givenName && author?.familyName ? `${author.givenName} ${author.familyName}` : author?.username || 'Unknown User';
+  displayMessages[0];
+  const formatTime = timestamp => {
+    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 jsx("div", {
+      className: `min-h-fit ${isDesktopView ? 'space-y-1 mb-3' : isSmallScreen ? 'space-y-0.5 mb-2' : 'space-y-0.5 mb-2'}`,
+      children: displayMessages.map((message, index) => jsx(ModernMessageBubble, {
+        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
+      }, message.id))
+    });
+  }
+  // For other messages (non-user), show the traditional group layout
+  return jsx("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'}`,
+    children: jsx("div", {
+      className: `flex items-start ${isDesktopView ? 'space-x-4' : isSmallScreen ? 'space-x-2' : 'space-x-3'}`,
+      children: jsx("div", {
+        className: "flex-1 min-w-0 overflow-hidden",
+        children: jsx("div", {
+          className: "space-y-1",
+          children: displayMessages.map((message, index) => jsx(ModernMessageBubble, {
+            message: message,
+            isOwnMessage: isOwnMessage,
+            isSystemMessage: isSystemMessage,
+            isFirstInGroup: index === 0,
+            isLastInGroup: index === displayMessages.length - 1,
+            onMessageClick: onMessageClick,
+            formatTime: formatTime,
+            showTimestamp: showTimestamp,
+            showCopyDownloadOnCodeBlock: showCopyDownloadOnCodeBlock
+          }, message.id))
+        })
+      })
+    })
+  });
+};
+const ModernMessageBubble = ({
+  showAuthorName = false,
+  showAvatar = false,
+  showTimestamp = false,
+  message,
+  isOwnMessage,
+  isSystemMessage,
+  isFirstInGroup,
+  isLastInGroup,
+  onMessageClick,
+  formatTime,
+  showCopyDownloadOnCodeBlock = false
+}) => {
+  const handleClick = () => {
+    onMessageClick?.(message);
+  };
+  const isAssistantRole = message?.propsConfiguration?.contents?.role === AiAgentMessageRole.Assistant;
+  const messageMode = message?.propsConfiguration?.contents?.mode ?? message?.propsConfiguration?.content?.mode ?? message?.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 jsx("div", {
+      className: "py-1 px-1 sm:px-2 -mx-1 sm:-mx-2 group",
+      children: jsxs("div", {
+        className: "flex items-start justify-end gap-2",
+        children: [jsxs("div", {
+          className: "flex flex-col items-end max-w-[85%]",
+          children: [showAuthorName && jsx("div", {
+            className: "flex items-end space-x-2 mb-0.5",
+            children: jsx("span", {
+              className: "text-sm font-semibold text-gray-900",
+              children: authorName
+            })
+          }), jsxs("div", {
+            className: `${isAssistantRole ? 'text-sm' : USER_MESSAGE_TEXT_SIZE_CLASS} ${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?.message || ''),
+            lang: detectLanguageTag(message?.message || ''),
+            children: [message.message && jsx("div", {
+              className: "max-w-none",
+              children: (() => {
+                const contentType = detectContentType(message.message);
+                if (contentType === 'code') {
+                  return jsx(CodeFormatter, {
+                    content: message.message,
+                    showCopyDownload: showCopyDownloadOnCodeBlock,
+                    variant: isAssistantRole ? 'default' : 'user',
+                    planMode: !isAssistantRole && isPlanMode
+                  });
+                } else if (contentType === 'html') {
+                  if (isAssistantRole) {
+                    return jsx(AssistantResponseWrapper, {
+                      children: jsx("div", {
+                        className: getAssistantResponseClasses('min-w-0'),
+                        dangerouslySetInnerHTML: {
+                          __html: prettifyHtmlContent(sanitizeHtml(message.message))
+                        }
+                      })
+                    });
+                  }
+                  return jsx("div", {
+                    className: isPlanMode ? '!text-primary-foreground html-content' : 'text-gray-900 html-content',
+                    dangerouslySetInnerHTML: {
+                      __html: prettifyHtmlContent(sanitizeHtml(message.message))
+                    }
+                  });
+                } else {
+                  return jsx(FormattedMessageContent, {
+                    content: message.message,
+                    variant: isAssistantRole ? 'default' : 'user',
+                    planMode: !isAssistantRole && isPlanMode,
+                    showCopyDownloadOnCodeBlock: showCopyDownloadOnCodeBlock
+                  });
+                }
+              })()
+            }), tryExtractBuilderBlocks(message?.message)?.length ? jsx("div", {
+              className: "mt-2",
+              children: jsx(BuilderLikeRenderer, {
+                blocks: tryExtractBuilderBlocks(message?.message)
+              })
+            }) : null, message?.props?.blocks?.length ? jsx("div", {
+              className: "mt-2",
+              children: jsx(BuilderLikeRenderer, {
+                blocks: message.props.blocks
+              })
+            }) : null, message.files?.totalCount > 0 && jsx("div", {
+              className: "mt-2",
+              children: jsx(FilesList, {
+                uploaded: true,
+                files: message.files.data
+              })
+            }), showTimestamp ? jsx("div", {
+              className: `text-[10px] mt-1 text-right ${isAssistantRole ? 'text-gray-500' : isPlanMode ? 'text-primary-foreground/80' : 'text-gray-500'}`,
+              children: formatTime(message.createdAt)
+            }) : null]
+          })]
+        }), showAvatar && jsx("div", {
+          className: "flex-shrink-0 mt-0.5",
+          children: jsx("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';
+            }
+          })
+        })]
+      })
+    });
+  }
+  // For other messages (left-aligned) — use Slot for streaming types (THINKING, TOOLUSE, etc.) like Kimi
+  const attachment = message?.props?.attachment ?? message?.propsConfiguration?.contents?.attachment;
+  const slotName = getMessageSlotName(message?.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 jsxs("div", {
+    className: `group/message w-full min-w-0 px-0 py-2 ${isSystemMessage || isAssistantRole ? 'cursor-pointer' : ''}`,
+    onClick: isSystemMessage || isAssistantRole ? handleClick : undefined,
+    children: [jsx("div", {
+      className: "flex items-start justify-between gap-3",
+      children: jsxs("div", {
+        className: "flex-1 min-w-0",
+        children: [slotName && shouldShowSlot && jsx(Slot, {
+          name: slotName,
+          fillProps: {
+            active: true,
+            message,
+            index: 0,
+            onMessageClick
+          }
+        }), !hasStreamingSlot && message.message && jsx("div", {
+          className: `min-w-0 relative max-w-full w-full ${isSystemMessage ? 'text-gray-800' : 'text-gray-900'}`,
+          dir: detectTextDirection(message?.message || ''),
+          lang: detectLanguageTag(message?.message || ''),
+          children: (() => {
+            const contentType = detectContentType(message.message);
+            // Markdown and text both go through FormattedMessageContent
+            // which will intelligently detect and render markdown
+            if (contentType === 'code') {
+              return jsx(CodeFormatter, {
+                content: message.message,
+                showCopyDownload: showCopyDownloadOnCodeBlock
+              });
+            } else if (contentType === 'html') {
+              return jsx(AssistantResponseWrapper, {
+                children: jsx("div", {
+                  className: getAssistantResponseClasses('min-w-0 relative max-w-full w-full'),
+                  dangerouslySetInnerHTML: {
+                    __html: prettifyHtmlContent(sanitizeHtml(message.message))
+                  }
+                })
+              });
+            } else {
+              // Handle both 'markdown' and 'text' - FormattedMessageContent
+              // will detect markdown patterns and render accordingly
+              return jsx(FormattedMessageContent, {
+                content: message.message,
+                showCopyDownloadOnCodeBlock: showCopyDownloadOnCodeBlock
+              });
+            }
+          })()
+        }), !hasStreamingSlot && tryExtractBuilderBlocks(message?.message)?.length ? jsx("div", {
+          className: "mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200",
+          children: jsx(BuilderLikeRenderer, {
+            blocks: tryExtractBuilderBlocks(message?.message)
+          })
+        }) : null, !hasStreamingSlot && message?.props?.blocks?.length ? jsx("div", {
+          className: "mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200",
+          children: jsx(BuilderLikeRenderer, {
+            blocks: message.props.blocks
+          })
+        }) : null, !hasStreamingSlot && message.files?.totalCount > 0 ? jsx("div", {
+          className: "mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200",
+          children: jsx(FilesList, {
+            uploaded: true,
+            files: message.files.data
+          })
+        }) : null]
+      })
+    }), showTimestamp ? jsx("div", {
+      className: "text-[10px] text-gray-500 mt-1 text-right",
+      children: formatTime(message.createdAt)
+    }) : null]
+  });
+};
+const ModernMessageGroupComponent = ({
+  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');
+  // Group messages by user and time
+  const messageGroups = groupMessagesByUserAndTime(actualMessages);
+  return jsxs("div", {
+    className: `min-h-fit ${isDesktopView ? 'space-y-6' : isSmallScreen ? 'space-y-4' : 'space-y-5'}`,
+    children: [messageGroups.map((group, groupIndex) => {
+      const author = group[0]?.author;
+      return jsx(ModernMessageGroup, {
+        author: author,
+        messages: group,
+        currentUser: currentUser,
+        onOpen: onOpen,
+        onMessageClick: onMessageClick,
+        isDesktopView: isDesktopView,
+        isSmallScreen: isSmallScreen,
+        showAuthorName: showAuthorName,
+        showAvatar: showAvatar,
+        showTimestamp: showTimestamp,
+        showCopyDownloadOnCodeBlock: showCopyDownloadOnCodeBlock
+      }, `group-${groupIndex}-${group[0]?.id}`);
+    }), sandboxErrors?.map(error => jsx("div", {
+      className: "px-2",
+      children: jsx(ErrorFixCard, {
+        error: error,
+        onFixError: onFixError || (() => Promise.resolve()),
+        currentFiles: currentFiles,
+        isFixing: false
+      })
+    }, error.id))]
+  });
+};export{AssistantResponseWrapper,CodeFormatter,FormattedMessageContent,ModernMessageGroupComponent,detectContentType,groupMessagesByUserAndTime};//# sourceMappingURL=ModernMessageGroup.js.map