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

package/lib/components/InboxMessage/message-widgets/ModernMessageGroup.js

@@ -0,0 +1,1339 @@
+import React__default,{useEffect,useMemo}from'react';import {format,differenceInMinutes}from'date-fns';import {AiAgentMessageRole}from'common';import {Slot}from'@common-stack/components-pro';import {MessengerSlotFillNameEnum}from'../../../enums/messenger-slot-fill-name-enum.js';import {FilesList}from'../../inbox/FilesList.js';import'../../inbox/MessageItem.js';import'../../inbox/ThreadItem.js';import {ErrorFixCard}from'./ErrorFixCard.js';import {marked}from'marked';import ReactMarkdown from'react-markdown';import remarkGfm from'remark-gfm';// Configure marked for better markdown rendering
+marked.setOptions({
+  breaks: true,
+  // Convert line breaks to <br>
+  gfm: true,
+  // GitHub Flavored Markdown
+  headerIds: false,
+  // Disable header IDs for cleaner HTML
+  mangle: false // Don't mangle email addresses
+});
+// Enhanced CSS styles for HTML content rendering with prettification
+const htmlContentStyles = `
+    .html-content {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        line-height: 1.6;
+        color: #374151;
+    }
+    
+    .html-content h1, .html-content h2, .html-content h3, .html-content h4, .html-content h5, .html-content h6 {
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+        font-weight: 600;
+        line-height: 1.25;
+        color: #111827;
+    }
+    
+    .html-content h1 {
+        font-size: 1.875rem;
+        border-bottom: 2px solid #e5e7eb;
+        padding-bottom: 0.5rem;
+    }
+    
+    .html-content h2 {
+        font-size: 1.5rem;
+        border-bottom: 1px solid #e5e7eb;
+        padding-bottom: 0.375rem;
+    }
+    
+    .html-content h3 {
+        font-size: 1.25rem;
+    }
+    
+    .html-content p {
+        margin-bottom: 1rem;
+        line-height: 1.7;
+    }
+    
+    .html-content ul, .html-content ol {
+        margin-bottom: 1rem;
+        padding-left: 1.5rem;
+    }
+    
+    .html-content ul {
+        list-style-type: disc;
+    }
+    
+    .html-content ol {
+        list-style-type: decimal;
+    }
+    
+    .html-content li {
+        margin-bottom: 0.5rem;
+        line-height: 1.6;
+    }
+    
+    .html-content li > ul, .html-content li > ol {
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+    
+    .html-content a {
+        color: #2563eb;
+        text-decoration: none;
+        border-bottom: 1px solid transparent;
+        transition: all 0.2s ease;
+    }
+    
+    .html-content a:hover {
+        color: #1d4ed8;
+        border-bottom-color: #1d4ed8;
+    }
+    
+    .html-content strong, .html-content b {
+        font-weight: 600;
+        color: #111827;
+    }
+    
+    .html-content em, .html-content i {
+        font-style: italic;
+        color: #6b7280;
+    }
+    
+    .html-content code {
+        background-color: #f3f4f6;
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.375rem;
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+        font-size: 0.875rem;
+        color: #dc2626;
+        border: 1px solid #e5e7eb;
+    }
+    
+    .html-content pre {
+        background-color: #f9fafb;
+        padding: 1rem;
+        border-radius: 0.5rem;
+        overflow-x: auto;
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+        font-size: 0.875rem;
+        line-height: 1.5;
+        border: 1px solid #e5e7eb;
+        margin: 1.5rem 0;
+    }
+    
+    .html-content pre code {
+        background-color: transparent;
+        padding: 0;
+        border: none;
+        color: #374151;
+        font-size: inherit;
+    }
+    
+    .html-content blockquote {
+        border-left: 4px solid #3b82f6;
+        padding-left: 1rem;
+        margin: 1.5rem 0;
+        font-style: italic;
+        color: #6b7280;
+        background-color: #f8fafc;
+        padding: 1rem;
+        border-radius: 0.375rem;
+    }
+    
+    .html-content blockquote p {
+        margin-bottom: 0;
+    }
+    
+    .html-content table {
+        border-collapse: collapse;
+        border: 1px solid #e5e7eb;
+        width: 100%;
+        margin: 1.5rem 0;
+        border-radius: 0.5rem;
+        overflow: hidden;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    }
+    
+    .html-content th,
+    .html-content td {
+        border: 1px solid #e5e7eb;
+        padding: 0.75rem;
+        text-align: left;
+        vertical-align: top;
+    }
+    
+    .html-content th {
+        background-color: #f9fafb;
+        font-weight: 600;
+        color: #111827;
+        border-bottom: 2px solid #e5e7eb;
+    }
+    
+    .html-content tr:nth-child(even) {
+        background-color: #f9fafb;
+    }
+    
+    .html-content tr:hover {
+        background-color: #f3f4f6;
+    }
+    
+    .html-content hr {
+        border: none;
+        border-top: 2px solid #e5e7eb;
+        margin: 2rem 0;
+    }
+    
+    .html-content img {
+        max-width: 100%;
+        height: auto;
+        border-radius: 0.5rem;
+        margin: 1rem 0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    }
+    
+    /* Enhanced message container styling */
+    .message-container {
+        background: #ffffff;
+        padding-top: 16px;
+        padding-bottom: 16px;
+        margin: 12px 0;
+        transition: all 0.2s ease-in-out;
+    }
+
+    /* If a message container is rendered *inside the user bubble* (Image 2),
+     * we must neutralize it so it doesn't override the pill background/padding.
+     */
+    .user-message .message-container {
+        background: transparent !important;
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+        margin: 0 !important;
+        transition: none !important;
+        box-shadow: none !important;
+    }
+    
+    /* Markdown content styling */
+    .markdown-content {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        line-height: 1.6;
+        color: #374151;
+    }
+    
+    .markdown-content h1 {
+        font-size: 1.5rem;
+        font-weight: 700;
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+        color: #111827;
+        padding-bottom: 0.5rem;
+        border-bottom: 2px solid #e5e7eb;
+    }
+    
+    .markdown-content h2 {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin-top: 1.25rem;
+        margin-bottom: 0.75rem;
+        color: #1f2937;
+        padding-bottom: 0.375rem;
+        border-bottom: 1px solid #e5e7eb;
+    }
+    
+    .markdown-content h3 {
+        font-size: 1.125rem;
+        font-weight: 600;
+        margin-top: 1rem;
+        margin-bottom: 0.5rem;
+        color: #374151;
+    }
+    
+    .markdown-content p {
+        margin-bottom: 0.75rem;
+        line-height: 1.6;
+        color: #4b5563;
+    }
+    
+    .markdown-content ul, .markdown-content ol {
+        margin: 1rem 0;
+        padding-left: 1.5rem;
+    }
+    
+    .markdown-content li {
+        margin-bottom: 0.5rem;
+        line-height: 1.6;
+    }
+    
+    .markdown-content code {
+        background-color: #f3f4f6;
+        padding: 0.125rem 0.375rem;
+        border-radius: 0.25rem;
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+        font-size: 0.875rem;
+        color: #dc2626;
+        border: 1px solid #e5e7eb;
+    }
+    
+    .markdown-content pre {
+        color: #1f2937;
+        border-radius: 8px;
+        overflow-x: auto;
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+        font-size: 0.875rem;
+        line-height: 1.5;
+        margin: 1rem 0;
+    }
+    
+    .markdown-content pre code {
+        background-color: transparent;
+        padding: 0;
+        border: none;
+        color: #1f2937;
+        font-size: inherit;
+    }
+    
+    .markdown-content blockquote {
+        border-left: 4px solid #3b82f6;
+        background-color: #f8fafc;
+        padding: 1rem;
+        margin: 1rem 0;
+        border-radius: 6px;
+        font-style: italic;
+        color: #475569;
+        border-top: 1px solid #e5e7eb;
+        border-right: 1px solid #e5e7eb;
+        border-bottom: 1px solid #e5e7eb;
+    }
+    
+    .markdown-content table {
+        border-collapse: collapse;
+        border: 1px solid #e5e7eb;
+        width: 100%;
+        margin: 1rem 0;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    }
+    
+    .markdown-content th {
+        background-color: #f9fafb;
+        color: #374151;
+        font-weight: 600;
+        padding: 0.75rem;
+        text-align: left;
+        border-bottom: 1px solid #e5e7eb;
+        font-size: 0.875rem;
+    }
+    
+    .markdown-content td {
+        border: 1px solid #e5e7eb;
+        padding: 0.75rem;
+        text-align: left;
+        vertical-align: top;
+        background-color: white;
+        font-size: 0.875rem;
+    }
+    
+    .markdown-content tr:nth-child(even) td {
+        background-color: #f9fafb;
+    }
+    
+    .markdown-content tr:hover td {
+        background-color: #f3f4f6;
+    }
+    
+    /* Enhanced list styling */
+    .markdown-content ul li {
+        position: relative;
+        padding-left: 0.5rem;
+    }
+    
+    .markdown-content ul li::before {
+        content: "•";
+        color: #000;
+        font-weight: bold;
+        position: absolute;
+        left: -1rem;
+    }
+    
+    .markdown-content ol li {
+        position: relative;
+        padding-left: 0.5rem;
+    }
+    
+    .markdown-content ol li::before {
+        content: counter(list-item) ".";
+        font-weight: 600;
+        position: absolute;
+        left: -1.5rem;
+    }
+    
+    /* Code block container styling */
+    .code-block-container {
+        background: #ffffff;
+        border: 1px solid #e5e7eb;
+        border-radius: 8px;
+        overflow: hidden;
+        margin: 1rem 0;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    }
+    
+    .code-block-header {
+        background: #f9fafb;
+        padding: 0.5rem 1rem;
+        border-bottom: 1px solid #e5e7eb;
+        font-weight: 600;
+        color: #374151;
+        font-size: 0.875rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+    
+    .code-block-content {
+        padding: 1rem;
+        overflow-x: auto;
+    }
+    
+    /* Enhanced prose styling for markdown content */
+    .prose pre {
+        background-color: #f9fafb;
+        border: 1px solid #e5e7eb;
+        border-radius: 0.5rem;
+        padding: 1rem;
+        overflow-x: auto;
+    }
+    
+    .prose code {
+        background-color: #f3f4f6;
+        padding: 0.125rem 0.375rem;
+        border-radius: 0.25rem;
+        font-size: 0.875rem;
+        border: 1px solid #e5e7eb;
+    }
+    
+    .prose pre code {
+        background-color: transparent;
+        padding: 0;
+        border: none;
+        color:#000;
+    }
+
+    .hover\:bg-gray-100:hover {
+        background-color: transparent !important;
+    }
+`;
+// Hook to inject CSS styles
+const useInjectStyles = () => {
+  useEffect(() => {
+    // Check if styles are already injected
+    if (document.getElementById('html-content-styles')) {
+      return;
+    }
+    // Create and inject style element
+    const styleElement = document.createElement('style');
+    styleElement.id = 'html-content-styles';
+    styleElement.textContent = htmlContentStyles;
+    document.head.appendChild(styleElement);
+    // Cleanup function
+    return () => {
+      const existingStyle = document.getElementById('html-content-styles');
+      if (existingStyle) {
+        existingStyle.remove();
+      }
+    };
+  }, []);
+};
+// 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;
+  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 React__default.createElement("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 React__default.createElement("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 React__default.createElement("div", {
+        key: idx,
+        className: "rounded-lg overflow-hidden border border-gray-200"
+      }, React__default.createElement("img", {
+        className: "w-full h-auto",
+        src: src,
+        alt: alt
+      }));
+    }
+    if (/button/i.test(type)) {
+      const text = block?.text || block?.data?.text || 'Button';
+      const href = block?.href || block?.link || block?.data?.href || '#';
+      return React__default.createElement("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);
+    }
+    if (/columns?/i.test(type)) {
+      const cols = block?.columns || block?.data?.columns || [];
+      return React__default.createElement("div", {
+        key: idx,
+        className: "grid grid-cols-1 sm:grid-cols-2 gap-3"
+      }, cols.map((col, colIdx) => React__default.createElement("div", {
+        key: colIdx,
+        className: "space-y-2"
+      }, React__default.createElement(BuilderLikeRenderer, {
+        blocks: col?.blocks || col?.children
+      }))));
+    }
+    return React__default.createElement("div", {
+      key: idx,
+      className: "message-container"
+    }, React__default.createElement("pre", {
+      className: "text-xs text-gray-600 overflow-x-auto"
+    }, JSON.stringify(block, null, 2)));
+  }));
+};
+// Code block with optional header (language + copy) and footer (copy + download) per Image 2
+const CodeBlockWithActions = ({
+  content,
+  language,
+  showCopyDownload = true
+}) => {
+  const [copied, setCopied] = React__default.useState(false);
+  const handleCopy = React__default.useCallback(() => {
+    navigator.clipboard.writeText(content).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }, [content]);
+  const handleDownload = React__default.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
+  }) => React__default.createElement("svg", {
+    className: className,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": true
+  }, React__default.createElement("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"
+  }), React__default.createElement("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
+  }) => React__default.createElement("svg", {
+    className: className,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true
+  }, React__default.createElement("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
+  }) => React__default.createElement("svg", {
+    className: className,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.75,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true
+  }, React__default.createElement("path", {
+    d: "M5 13l4 4L19 7"
+  }));
+  const iconMuted = 'text-slate-500 hover:text-slate-600';
+  return React__default.createElement("div", {
+    className: "rounded-xl bg-white overflow-hidden my-3 shadow-sm ring-1 ring-slate-200/60"
+  }, React__default.createElement("div", {
+    className: "flex items-center justify-between px-4 pt-4 pb-3 bg-white"
+  }, React__default.createElement("span", {
+    className: "text-[11px] font-semibold uppercase tracking-wide text-slate-500"
+  }, langLabel), React__default.createElement("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"
+  }, React__default.createElement(IconCopy, {
+    className: "w-[15px] h-[15px] shrink-0"
+  }))), React__default.createElement("div", {
+    className: "px-4 pb-4"
+  }, React__default.createElement("div", {
+    className: "overflow-x-auto bg-white py-4"
+  }, React__default.createElement("pre", {
+    className: "text-sm text-slate-900 font-mono leading-relaxed whitespace-pre-wrap break-words m-0 p-0 border-0 bg-transparent"
+  }, React__default.createElement("code", {
+    className: "bg-transparent"
+  }, content)))), showCopyDownload && React__default.createElement("div", {
+    className: "flex items-center justify-start gap-0.5 px-4 pb-3 pt-0 mt-2 bg-white"
+  }, React__default.createElement("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 ? React__default.createElement(IconCheck, {
+    className: "w-[15px] h-[15px] text-emerald-600"
+  }) : React__default.createElement(IconCopy, {
+    className: "w-[15px] h-[15px] shrink-0"
+  })), React__default.createElement("button", {
+    type: "button",
+    onClick: handleDownload,
+    className: `p-1 rounded-md hover:bg-slate-100/80 transition-colors ${iconMuted}`,
+    title: "Download",
+    "aria-label": "Download"
+  }, React__default.createElement(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 React__default.createElement("div", {
+    className: variant === 'user' ? '' : 'message-container'
+  }, React__default.createElement("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 React__default.createElement("div", {
+        key: index,
+        className: "code-block-container"
+      }, React__default.createElement("div", {
+        className: "code-block-header"
+      }, "\uD83D\uDCC4 ", fileMatch[1]));
+    }
+    // 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 React__default.createElement(CodeBlockWithActions, {
+        key: index,
+        content: section.trim(),
+        language: lang,
+        showCopyDownload: showCopyDownload
+      });
+    }
+    // Regular text content
+    return React__default.createElement("div", {
+      key: index,
+      className: `text-sm ${variant === 'user' ? planMode ? 'text-primary-foreground' : 'text-gray-900' : 'text-gray-700'} leading-relaxed whitespace-pre-wrap break-words`
+    }, section.trim());
+  })));
+};
+// 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 proseMarkdownClasses = `text-sm prose prose-sm max-w-none leading-relaxed break-words 
+                        prose-p:my-2 prose-p:text-gray-700
+                        prose-pre:my-2 prose-pre:bg-transparent prose-pre:border-0 prose-pre:p-0
+                        prose-ul:my-2 prose-ol:my-2 
+                        prose-code:break-words prose-code:bg-gray-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:font-mono
+                        prose-headings:font-semibold prose-headings:text-gray-900 prose-headings:mt-4 prose-headings:mb-2
+                        prose-h1:text-2xl prose-h1:border-b prose-h1:border-gray-200 prose-h1:pb-2
+                        prose-h2:text-xl prose-h2:border-b prose-h2:border-gray-200 prose-h2:pb-1
+                        prose-h3:text-lg
+                        prose-h4:text-base
+                        prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
+                        prose-strong:font-semibold prose-strong:text-gray-900
+                        prose-em:text-gray-600
+                        prose-blockquote:border-l-4 prose-blockquote:border-blue-400 prose-blockquote:pl-4 prose-blockquote:py-2 prose-blockquote:bg-blue-50 prose-blockquote:rounded-r-md prose-blockquote:my-3 prose-blockquote:italic
+                        prose-table:w-full prose-table:border prose-table:border-gray-200 prose-table:rounded-md prose-table:my-4
+                        prose-th:px-3 prose-th:py-2 prose-th:text-left prose-th:font-semibold prose-th:bg-gray-50 prose-th:border prose-th:border-gray-200
+                        prose-td:px-3 prose-td:py-2 prose-td:border prose-td:border-gray-200 prose-td:text-gray-700
+                        prose-li:my-1 prose-li:text-gray-700
+                        prose-hr:my-4 prose-hr:border-gray-200
+                        ${variant === 'user' ? planMode ? '!prose-p:text-primary-foreground !prose-li:text-primary-foreground !prose-strong:text-primary-foreground !prose-em:text-primary-foreground !prose-a:text-primary-foreground' : '!prose-p:text-gray-900 !prose-li:text-gray-900 !prose-strong:text-gray-900 !prose-em:text-gray-700 !prose-a:text-blue-600' : ''}`;
+  const markdownComponents = useMemo(() => ({
+    pre: ({
+      children
+    }) => React__default.createElement(React__default.Fragment, null, children),
+    code: ({
+      className,
+      children,
+      ...rest
+    }) => {
+      const match = /language-(\w+)/.exec(className || '');
+      const text = String(children).replace(/\n$/, '');
+      if (match) {
+        return React__default.createElement("div", {
+          className: "not-prose max-w-none"
+        }, React__default.createElement(CodeBlockWithActions, {
+          content: text,
+          language: match[1],
+          showCopyDownload: showCopyDownloadOnCodeBlock
+        }));
+      }
+      if (text.includes('\n')) {
+        return React__default.createElement("div", {
+          className: "not-prose max-w-none"
+        }, React__default.createElement(CodeBlockWithActions, {
+          content: text,
+          language: "code",
+          showCopyDownload: showCopyDownloadOnCodeBlock
+        }));
+      }
+      return React__default.createElement("code", {
+        className: `rounded px-1.5 py-0.5 text-sm font-mono bg-gray-50 break-words ${className || ''}`,
+        ...rest
+      }, children);
+    }
+  }), [showCopyDownloadOnCodeBlock]);
+  // Fenced code copy/download needs React tree (not marked HTML)
+  if (showCopyDownloadOnCodeBlock && markdownSource) {
+    return React__default.createElement("div", {
+      className: variant === 'user' ? '' : 'message-container'
+    }, React__default.createElement("div", {
+      className: `${proseMarkdownClasses}`
+    }, React__default.createElement(ReactMarkdown, {
+      remarkPlugins: [remarkGfm],
+      components: markdownComponents
+    }, markdownSource)));
+  }
+  // If markdown was parsed, render as HTML with prose styling
+  if (htmlContent) {
+    return React__default.createElement("div", {
+      className: variant === 'user' ? '' : 'message-container'
+    }, React__default.createElement("div", {
+      className: `text-sm prose prose-sm max-w-none leading-relaxed break-words 
+                        prose-p:my-2 prose-p:text-gray-700
+                        prose-pre:my-2 prose-pre:bg-gray-50 prose-pre:border prose-pre:border-gray-200 prose-pre:rounded prose-pre:p-3
+                        prose-ul:my-2 prose-ol:my-2 
+                        prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:overflow-x-auto
+                        prose-code:break-words prose-code:bg-gray-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:font-mono
+                        prose-headings:font-semibold prose-headings:text-gray-900 prose-headings:mt-4 prose-headings:mb-2
+                        prose-h1:text-2xl prose-h1:border-b prose-h1:border-gray-200 prose-h1:pb-2
+                        prose-h2:text-xl prose-h2:border-b prose-h2:border-gray-200 prose-h2:pb-1
+                        prose-h3:text-lg
+                        prose-h4:text-base
+                        prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
+                        prose-strong:font-semibold prose-strong:text-gray-900
+                        prose-em:text-gray-600
+                        prose-blockquote:border-l-4 prose-blockquote:border-blue-400 prose-blockquote:pl-4 prose-blockquote:py-2 prose-blockquote:bg-blue-50 prose-blockquote:rounded-r-md prose-blockquote:my-3 prose-blockquote:italic
+                        prose-table:w-full prose-table:border prose-table:border-gray-200 prose-table:rounded-md prose-table:my-4
+                        prose-th:px-3 prose-th:py-2 prose-th:text-left prose-th:font-semibold prose-th:bg-gray-50 prose-th:border prose-th:border-gray-200
+                        prose-td:px-3 prose-td:py-2 prose-td:border prose-td:border-gray-200 prose-td:text-gray-700
+                        prose-li:my-1 prose-li:text-gray-700
+                        prose-hr:my-4 prose-hr:border-gray-200
+                        ${variant === 'user' ? planMode ? '!prose-p:text-primary-foreground !prose-li:text-primary-foreground !prose-strong:text-primary-foreground !prose-em:text-primary-foreground !prose-a:text-primary-foreground' : '!prose-p:text-gray-900 !prose-li:text-gray-900 !prose-strong:text-gray-900 !prose-em:text-gray-700 !prose-a:text-blue-600' : ''}`,
+      dangerouslySetInnerHTML: {
+        __html: htmlContent
+      }
+    }));
+  }
+  // For plain text content
+  return variant === 'user' ? React__default.createElement("p", {
+    className: `text-sm leading-relaxed whitespace-pre-wrap break-words ${planMode ? 'text-primary-foreground' : 'text-gray-900'}`
+  }, content) : React__default.createElement("div", {
+    className: "message-container"
+  }, React__default.createElement("p", {
+    className: "text-sm text-gray-700 leading-relaxed whitespace-pre-wrap break-words"
+  }, 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 React__default.createElement("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) => React__default.createElement(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
+    })));
+  }
+  // For other messages (non-user), show the traditional group layout
+  return React__default.createElement("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'}`
+  }, React__default.createElement("div", {
+    className: `flex items-start ${isDesktopView ? 'space-x-4' : isSmallScreen ? 'space-x-2' : 'space-x-3'}`
+  }, React__default.createElement("div", {
+    className: "flex-1 min-w-0 overflow-hidden"
+  }, React__default.createElement("div", {
+    className: "space-y-1"
+  }, displayMessages.map((message, index) => React__default.createElement(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
+  }))))));
+};
+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 React__default.createElement("div", {
+      className: "py-1 px-1 sm:px-2 -mx-1 sm:-mx-2 group"
+    }, React__default.createElement("div", {
+      className: "flex items-start justify-end gap-2"
+    }, React__default.createElement("div", {
+      className: "flex flex-col items-end max-w-[85%]"
+    }, showAuthorName && React__default.createElement("div", {
+      className: "flex items-end space-x-2 mb-0.5"
+    }, React__default.createElement("span", {
+      className: "text-sm font-semibold text-gray-900"
+    }, authorName)), React__default.createElement("div", {
+      className: `text-sm ${isAssistantRole ? 'cursor-pointer rounded-2xl border border-gray-200 bg-gray-50 text-gray-900 px-4 py-2.5' :
+      // : 'user-message rounded-[22px] rounded-br-[4px] px-4 py-3 bg-primary text-primary-foreground shadow-sm'
+      isPlanMode ? 'user-message rounded-[22px] rounded-br-[4px] px-4 py-3 bg-primary text-primary-foreground shadow-sm' : 'user-message rounded-[22px] rounded-br-[4px] px-4 py-3 '}`,
+      onClick: isAssistantRole ? handleClick : undefined,
+      dir: detectTextDirection(message?.message || ''),
+      lang: detectLanguageTag(message?.message || '')
+    }, message.message && React__default.createElement("div", {
+      className: "max-w-none"
+    }, (() => {
+      const contentType = detectContentType(message.message);
+      if (contentType === 'code') {
+        return React__default.createElement(CodeFormatter, {
+          content: message.message,
+          showCopyDownload: showCopyDownloadOnCodeBlock,
+          variant: isAssistantRole ? 'default' : 'user',
+          planMode: !isAssistantRole && isPlanMode
+        });
+      } else if (contentType === 'html') {
+        return React__default.createElement("div", {
+          className: isAssistantRole ? 'text-gray-800 html-content' : isPlanMode ? '!text-primary-foreground html-content' : 'text-gray-900 html-content',
+          dangerouslySetInnerHTML: {
+            __html: prettifyHtmlContent(sanitizeHtml(message.message))
+          }
+        });
+      } else {
+        return React__default.createElement(FormattedMessageContent, {
+          content: message.message,
+          variant: isAssistantRole ? 'default' : 'user',
+          planMode: !isAssistantRole && isPlanMode,
+          showCopyDownloadOnCodeBlock: showCopyDownloadOnCodeBlock
+        });
+      }
+    })()), tryExtractBuilderBlocks(message?.message)?.length ? React__default.createElement("div", {
+      className: "mt-2"
+    }, React__default.createElement(BuilderLikeRenderer, {
+      blocks: tryExtractBuilderBlocks(message?.message)
+    })) : null, message?.props?.blocks?.length ? React__default.createElement("div", {
+      className: "mt-2"
+    }, React__default.createElement(BuilderLikeRenderer, {
+      blocks: message.props.blocks
+    })) : null, message.files?.totalCount > 0 && React__default.createElement("div", {
+      className: "mt-2"
+    }, React__default.createElement(FilesList, {
+      uploaded: true,
+      files: message.files.data
+    })), showTimestamp ? React__default.createElement("div", {
+      className: `text-[10px] mt-1 text-right ${isAssistantRole ? 'text-gray-500' : isPlanMode ? 'text-primary-foreground/80' : 'text-gray-500'}`
+    }, formatTime(message.createdAt)) : null)), showAvatar && React__default.createElement("div", {
+      className: "flex-shrink-0 mt-0.5"
+    }, React__default.createElement("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 React__default.createElement("div", {
+    className: `group/message transition-all duration-200 hover:bg-gray-50 rounded-lg px-3 py-1 -mx-3 ${isSystemMessage || isAssistantRole ? 'cursor-pointer' : ''}`,
+    onClick: isSystemMessage || isAssistantRole ? handleClick : undefined
+  }, React__default.createElement("div", {
+    className: "flex items-start justify-between gap-3"
+  }, React__default.createElement("div", {
+    className: "flex-1 min-w-0"
+  }, slotName && shouldShowSlot && React__default.createElement(Slot, {
+    name: slotName,
+    fillProps: {
+      active: true,
+      message,
+      index: 0,
+      onMessageClick
+    }
+  }), !hasStreamingSlot && message.message && React__default.createElement("div", {
+    className: `max-w-none ${isSystemMessage ? 'text-gray-800' : 'text-gray-900'}`,
+    dir: detectTextDirection(message?.message || ''),
+    lang: detectLanguageTag(message?.message || '')
+  }, (() => {
+    const contentType = detectContentType(message.message);
+    // Markdown and text both go through FormattedMessageContent
+    // which will intelligently detect and render markdown
+    if (contentType === 'code') {
+      return React__default.createElement(CodeFormatter, {
+        content: message.message,
+        showCopyDownload: showCopyDownloadOnCodeBlock
+      });
+    } else if (contentType === 'html') {
+      return React__default.createElement("div", {
+        className: "max-w-none text-gray-800 html-content",
+        dangerouslySetInnerHTML: {
+          __html: prettifyHtmlContent(sanitizeHtml(message.message))
+        }
+      });
+    } else {
+      // Handle both 'markdown' and 'text' - FormattedMessageContent
+      // will detect markdown patterns and render accordingly
+      return React__default.createElement(FormattedMessageContent, {
+        content: message.message,
+        showCopyDownloadOnCodeBlock: showCopyDownloadOnCodeBlock
+      });
+    }
+  })()), !hasStreamingSlot && tryExtractBuilderBlocks(message?.message)?.length ? React__default.createElement("div", {
+    className: "mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200"
+  }, React__default.createElement(BuilderLikeRenderer, {
+    blocks: tryExtractBuilderBlocks(message?.message)
+  })) : null, !hasStreamingSlot && message?.props?.blocks?.length ? React__default.createElement("div", {
+    className: "mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200"
+  }, React__default.createElement(BuilderLikeRenderer, {
+    blocks: message.props.blocks
+  })) : null, !hasStreamingSlot && message.files?.totalCount > 0 ? React__default.createElement("div", {
+    className: "mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200"
+  }, React__default.createElement(FilesList, {
+    uploaded: true,
+    files: message.files.data
+  })) : null)), showTimestamp ? React__default.createElement("div", {
+    className: "text-[10px] text-gray-500 mt-1 text-right"
+  }, 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 React__default.createElement("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 React__default.createElement(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 => React__default.createElement("div", {
+    key: error.id,
+    className: "px-2"
+  }, React__default.createElement(ErrorFixCard, {
+    error: error,
+    onFixError: onFixError || (() => Promise.resolve()),
+    currentFiles: currentFiles,
+    isFixing: false
+  }))));
+};export{CodeFormatter,FormattedMessageContent,ModernMessageGroupComponent,detectContentType,groupMessagesByUserAndTime};//# sourceMappingURL=ModernMessageGroup.js.map