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

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

@@ -0,0 +1,1082 @@
+import React__default,{useEffect}from'react';import {format,differenceInMinutes}from'date-fns';import {FilesList}from'../../inbox/FilesList.js';import'../../inbox/MessageItem.js';import'../../inbox/ThreadItem.js';import {ErrorFixCard}from'./ErrorFixCard.js';import ReactMarkdown from'react-markdown';import remarkGfm from'remark-gfm';// 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;
+    }
+    
+    /* 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;
+    }
+
+    .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 code patterns first (most specific)
+  const codePatterns = [/```[\s\S]*?```/g,
+  // Fenced code blocks
+  /`[^`\n]+`/g,
+  // Inline code
+  /---\s*\w+\.\w+\s*---/g,
+  // File separators like "--- src/index.css ---"
+  /@tailwind\s+\w+/g,
+  // Tailwind directives
+  /export\s+default\s*\{/g,
+  // JS/TS exports
+  /import\s+.*\s+from\s+['"]/g,
+  // Import statements
+  /\/\*\*[\s\S]*?\*\//g,
+  // JSDoc comments
+  /\/\*[\s\S]*?\*\//g,
+  // Block comments
+  /\/\/.*$/gm // Line comments
+  ];
+  const hasCodePatterns = codePatterns.some(pattern => pattern.test(trimmed));
+  if (hasCodePatterns) return 'code';
+  // Check for markdown patterns
+  const markdownPatterns = [/^#{1,6}\s+/gm,
+  // Headers
+  /\*\*.*?\*\*/g,
+  // Bold
+  /\*.*?\*/g,
+  // Italic
+  /^\s*[-*+]\s+/gm,
+  // Lists
+  /^\s*\d+\.\s+/gm,
+  // Numbered lists
+  /\[.*?\]\(.*?\)/g,
+  // Links
+  /!\[.*?\]\(.*?\)/g // Images
+  ];
+  const hasMarkdownPatterns = markdownPatterns.some(pattern => pattern.test(trimmed));
+  if (hasMarkdownPatterns) return 'markdown';
+  // Check for HTML patterns
+  const htmlPatterns = [/<\/?[a-z][\s\S]*>/i,
+  // HTML tags
+  /&[a-z0-9#]+;/i,
+  // HTML entities
+  /\s+[a-z-]+\s*=\s*["'][^"']*["']/i,
+  // HTML attributes
+  /<[^>]+>[^<]*<\/[^>]+>/i // HTML structure
+  ];
+  const hasHtmlPatterns = htmlPatterns.some(pattern => pattern.test(trimmed));
+  if (hasHtmlPatterns) return 'html';
+  return 'text';
+};
+// 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)));
+  }));
+};
+// Enhanced code formatter for raw code content
+const CodeFormatter = ({
+  content
+}) => {
+  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: "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) {
+      return React__default.createElement("div", {
+        key: index,
+        className: "code-block-container"
+      }, React__default.createElement("div", {
+        className: "code-block-content"
+      }, React__default.createElement("pre", {
+        className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap"
+      }, React__default.createElement("code", null, section.trim()))));
+    }
+    // Regular text content
+    return React__default.createElement("div", {
+      key: index,
+      className: "text-gray-700 leading-relaxed whitespace-pre-wrap"
+    }, section.trim());
+  })));
+};
+// Enhanced markdown renderer using react-markdown with remark-gfm
+const FormattedMessageContent = ({
+  content
+}) => {
+  if (!content) return null;
+  // Check if content contains markdown patterns
+  const hasMarkdown = /[#*`>|]/.test(content) || content.includes('```');
+  if (hasMarkdown) {
+    return React__default.createElement("div", {
+      className: "message-container"
+    }, React__default.createElement("div", {
+      className: "markdown-content"
+    }, React__default.createElement(ReactMarkdown, {
+      remarkPlugins: [remarkGfm],
+      components: {
+        // Custom styling for code blocks
+        code: ({
+          className,
+          children,
+          ...props
+        }) => {
+          const match = /language-(\w+)/.exec(className || '');
+          const isInline = !className?.includes('language-');
+          return !isInline ? React__default.createElement("div", {
+            className: "code-block-container"
+          }, React__default.createElement("div", {
+            className: "code-block-header"
+          }, match?.[1] || 'code'), React__default.createElement("div", {
+            className: "code-block-content"
+          }, React__default.createElement("pre", {
+            className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap"
+          }, React__default.createElement("code", {
+            className: className,
+            ...props
+          }, children)))) : React__default.createElement("code", {
+            className: "bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono text-gray-800 border border-gray-200",
+            ...props
+          }, children);
+        },
+        // Custom styling for headings
+        h1: ({
+          children,
+          ...props
+        }) => React__default.createElement("h1", {
+          className: "text-xl font-bold text-gray-900 mb-3",
+          ...props
+        }, children),
+        h2: ({
+          children,
+          ...props
+        }) => React__default.createElement("h2", {
+          className: "text-lg font-semibold text-gray-800 mb-2",
+          ...props
+        }, children),
+        h3: ({
+          children,
+          ...props
+        }) => React__default.createElement("h3", {
+          className: "text-base font-medium text-gray-700 mb-2",
+          ...props
+        }, children),
+        // Custom styling for lists
+        ul: ({
+          children,
+          ...props
+        }) => React__default.createElement("ul", {
+          className: "space-y-1",
+          ...props
+        }, children),
+        ol: ({
+          children,
+          ...props
+        }) => React__default.createElement("ol", {
+          className: "space-y-1",
+          ...props
+        }, children),
+        li: ({
+          children,
+          ...props
+        }) => React__default.createElement("li", {
+          className: "text-gray-700 leading-relaxed",
+          ...props
+        }, children),
+        // Custom styling for blockquotes
+        blockquote: ({
+          children,
+          ...props
+        }) => React__default.createElement("blockquote", {
+          className: "border-l-4 border-blue-400 pl-3 py-2 bg-blue-50 rounded-r-md my-3",
+          ...props
+        }, children),
+        // Custom styling for tables
+        table: ({
+          children,
+          ...props
+        }) => React__default.createElement("div", {
+          className: "overflow-x-auto my-3"
+        }, React__default.createElement("table", {
+          className: "min-w-full border border-gray-200 rounded-md overflow-hidden",
+          ...props
+        }, children)),
+        th: ({
+          children,
+          ...props
+        }) => React__default.createElement("th", {
+          className: "px-3 py-2 text-left font-medium text-gray-700 border border-gray-200",
+          ...props
+        }, children),
+        td: ({
+          children,
+          ...props
+        }) => React__default.createElement("td", {
+          className: "px-3 py-2 border border-gray-200 text-gray-700",
+          ...props
+        }, children),
+        // Custom styling for task lists (from remark-gfm)
+        input: ({
+          checked,
+          ...props
+        }) => React__default.createElement("input", {
+          type: "checkbox",
+          checked: checked,
+          readOnly: true,
+          className: "mr-2 mt-1 h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500",
+          ...props
+        }),
+        // Custom styling for strikethrough (from remark-gfm)
+        del: ({
+          children,
+          ...props
+        }) => React__default.createElement("del", {
+          className: "text-gray-500 line-through",
+          ...props
+        }, children)
+      }
+    }, content)));
+  }
+  // For plain text content
+  return React__default.createElement("div", {
+    className: "message-container"
+  }, React__default.createElement("p", {
+    className: "text-gray-700 leading-relaxed whitespace-pre-wrap"
+  }, 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,
+  onOpen,
+  onMessageClick,
+  isDesktopView = false,
+  isSmallScreen = false
+}) => {
+  // Inject CSS styles for HTML content
+  useInjectStyles();
+  const isOwnMessage = author?.id === currentUser?.id;
+  const authorName = author?.givenName && author?.familyName ? `${author.givenName} ${author.familyName}` : author?.username || 'Unknown User';
+  const firstMessage = messages[0];
+  const formatTime = timestamp => {
+    const date = new Date(timestamp);
+    return format(date, 'h:mm a');
+  };
+  // Determine if this is an AI/system message for special styling
+  const isSystemMessage = author?.username?.toLowerCase().includes('ai') || author?.username?.toLowerCase().includes('assistant') || author?.username?.toLowerCase().includes('system');
+  // For user messages, don't show group header, just individual messages with avatars
+  if (isOwnMessage) {
+    return 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'}`
+    }, messages.map((message, index) => React__default.createElement(ModernMessageBubble, {
+      key: message.id,
+      message: message,
+      isOwnMessage: isOwnMessage,
+      isSystemMessage: isSystemMessage,
+      isFirstInGroup: index === 0,
+      isLastInGroup: index === messages.length - 1,
+      onMessageClick: onMessageClick,
+      formatTime: formatTime
+    })));
+  }
+  // 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'}`
+  }, !isSystemMessage && React__default.createElement("div", {
+    className: "flex-shrink-0 mt-1"
+  }, React__default.createElement("div", {
+    className: "relative rounded-lg overflow-hidden"
+  }, React__default.createElement("img", {
+    className: `cursor-pointer hover:opacity-80 transition-opacity ${isDesktopView ? 'w-12 h-12' : isSmallScreen ? 'w-8 h-8' : 'w-10 h-10'} rounded-lg object-cover`,
+    src: author?.picture || '/default-avatar.svg',
+    alt: authorName,
+    onClick: () => onOpen(firstMessage),
+    onError: e => {
+      e.currentTarget.src = '/default-avatar.svg';
+    }
+  }))), React__default.createElement("div", {
+    className: "flex-1 min-w-0 overflow-hidden"
+  }, !isSystemMessage && React__default.createElement("div", {
+    className: "flex items-center space-x-3 mb-2"
+  }, React__default.createElement("span", {
+    className: "font-semibold truncate text-gray-900"
+  }, authorName)), React__default.createElement("div", {
+    className: "space-y-1"
+  }, messages.map((message, index) => React__default.createElement(ModernMessageBubble, {
+    key: message.id,
+    message: message,
+    isOwnMessage: isOwnMessage,
+    isSystemMessage: isSystemMessage,
+    isFirstInGroup: index === 0,
+    isLastInGroup: index === messages.length - 1,
+    onMessageClick: onMessageClick,
+    formatTime: formatTime
+  }))))));
+};
+const ModernMessageBubble = ({
+  message,
+  isOwnMessage,
+  isSystemMessage,
+  isFirstInGroup,
+  isLastInGroup,
+  onMessageClick,
+  formatTime
+}) => {
+  const handleClick = () => {
+    onMessageClick?.(message);
+  };
+  const isAssistantRole = message?.propsConfiguration?.contents?.role === 'ASSISTANT';
+  // 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 hover:bg-gray-50 hover:bg-opacity-50 rounded px-1 sm:px-2 -mx-1 sm:-mx-2 group ${isAssistantRole ? 'border border-gray-200' : ''}`
+    }, React__default.createElement("div", {
+      className: "flex items-start justify-end gap-2"
+    }, React__default.createElement("div", {
+      className: "flex flex-col items-end "
+    }, !isAssistantRole && 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 text-gray-900 ${isAssistantRole ? 'cursor-pointer' : ''}  px-1 sm:px-2 py-1 rounded`,
+      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
+        });
+      } else if (contentType === 'html') {
+        return React__default.createElement("div", {
+          className: "text-gray-800 html-content",
+          dangerouslySetInnerHTML: {
+            __html: prettifyHtmlContent(sanitizeHtml(message.message))
+          }
+        });
+      } else {
+        return React__default.createElement(FormattedMessageContent, {
+          content: message.message
+        });
+      }
+    })()), 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
+    })))), !isAssistantRole && 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,
+      onError: e => {
+        e.currentTarget.src = '/default-avatar.svg';
+      }
+    }))));
+  }
+  // For other messages (left-aligned with full formatting)
+  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 ? undefined : handleClick
+  }, React__default.createElement("div", {
+    className: "flex items-start justify-between gap-3"
+  }, React__default.createElement("div", {
+    className: "flex-1 min-w-0"
+  }, 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);
+    if (contentType === 'code') {
+      return React__default.createElement(CodeFormatter, {
+        content: message.message
+      });
+    } 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 {
+      return React__default.createElement(FormattedMessageContent, {
+        content: message.message
+      });
+    }
+  })()), 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, 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, 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
+  }))), !isSystemMessage && React__default.createElement("div", {
+    className: "flex-shrink-0 mt-1"
+  }, React__default.createElement("div", {
+    className: "opacity-0 group-hover/message:opacity-100 transition-opacity duration-200 flex space-x-1"
+  }, React__default.createElement("button", {
+    className: "p-1 hover:bg-gray-200 rounded transition-colors"
+  }, React__default.createElement("svg", {
+    className: "w-3 h-3 text-gray-400",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"
+  }))), React__default.createElement("button", {
+    className: "p-1 hover:bg-gray-200 rounded transition-colors"
+  }, React__default.createElement("svg", {
+    className: "w-3 h-3 text-gray-400",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+  })))))));
+};
+const ModernMessageGroupComponent = ({
+  messages,
+  currentUser,
+  onOpen,
+  onMessageClick,
+  isDesktopView = false,
+  isSmallScreen = false,
+  sandboxErrors = [],
+  currentFiles = {},
+  onFixError,
+  onRecreateSandbox
+}) => {
+  // 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
+    });
+  }), 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{ModernMessageGroupComponent,groupMessagesByUserAndTime};//# sourceMappingURL=ModernMessageGroup.js.map