@messenger-box/tailwind-ui-inbox 10.0.3-alpha.71 → 10.0.3-alpha.73

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

@@ -0,0 +1,1525 @@
+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';// 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);
+    }
+    
+    .html-content .highlight {
+        background-color: #fef3c7;
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.25rem;
+        border: 1px solid #f59e0b;
+    }
+    
+    .html-content .info-box {
+        background-color: #dbeafe;
+        border: 1px solid #3b82f6;
+        border-radius: 0.5rem;
+        padding: 1rem;
+        margin: 1rem 0;
+    }
+    
+    .html-content .warning-box {
+        background-color: #fef3c7;
+        border: 1px solid #f59e0b;
+        border-radius: 0.5rem;
+        padding: 1rem;
+        margin: 1rem 0;
+    }
+    
+    .html-content .success-box {
+        background-color: #d1fae5;
+        border: 1px solid #10b981;
+        border-radius: 0.5rem;
+        padding: 1rem;
+        margin: 1rem 0;
+    }
+    
+    .html-content .error-box {
+        background-color: #fee2e2;
+        border: 1px solid #ef4444;
+        border-radius: 0.5rem;
+        padding: 1rem;
+        margin: 1rem 0;
+    }
+    
+    .html-content .html-heading {
+        margin-top: 2rem;
+        margin-bottom: 1rem;
+        font-weight: 700;
+        line-height: 1.2;
+        color: #111827;
+    }
+    
+    .html-content .html-heading-1 {
+        font-size: 2rem;
+        border-bottom: 3px solid #3b82f6;
+        padding-bottom: 0.75rem;
+    }
+    
+    .html-content .html-heading-2 {
+        font-size: 1.5rem;
+        border-bottom: 2px solid #e5e7eb;
+        padding-bottom: 0.5rem;
+    }
+    
+    .html-content .html-heading-3 {
+        font-size: 1.25rem;
+        color: #374151;
+    }
+    
+    .html-content .html-paragraph {
+        margin-bottom: 1.25rem;
+        line-height: 1.8;
+        color: #4b5563;
+    }
+    
+    .html-content .html-list {
+        margin: 1.5rem 0;
+        padding-left: 2rem;
+    }
+    
+    .html-content .html-list li {
+        margin-bottom: 0.75rem;
+        line-height: 1.7;
+        position: relative;
+    }
+    
+    .html-content .html-list-unordered li::before {
+        content: "•";
+        color: #3b82f6;
+        font-weight: bold;
+        position: absolute;
+        left: -1.5rem;
+    }
+    
+    .html-content .html-list-ordered {
+        counter-reset: list-counter;
+    }
+    
+    .html-content .html-list-ordered li {
+        counter-increment: list-counter;
+    }
+    
+    .html-content .html-list-ordered li::before {
+        content: counter(list-counter) ".";
+        color: #3b82f6;
+        font-weight: 600;
+        position: absolute;
+        left: -2rem;
+    }
+    
+    .html-content .html-inline-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 .html-code-block {
+        background-color: #1f2937;
+        color: #f9fafb;
+        padding: 1.5rem;
+        border-radius: 0.75rem;
+        overflow-x: auto;
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+        font-size: 0.875rem;
+        line-height: 1.6;
+        border: 1px solid #374151;
+        margin: 2rem 0;
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    }
+    
+    .html-content .html-blockquote {
+        border-left: 4px solid #3b82f6;
+        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+        padding: 1.5rem;
+        margin: 2rem 0;
+        border-radius: 0.5rem;
+        font-style: italic;
+        color: #475569;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    }
+    
+    .html-content .html-table {
+        border-collapse: collapse;
+        border: 2px solid #e5e7eb;
+        width: 100%;
+        margin: 2rem 0;
+        border-radius: 0.75rem;
+        overflow: hidden;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    }
+    
+    .html-content .html-table-header {
+        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+        color: white;
+        font-weight: 700;
+        padding: 1rem;
+        text-align: left;
+        border-bottom: 2px solid #1d4ed8;
+    }
+    
+    .html-content .html-table-cell {
+        border: 1px solid #e5e7eb;
+        padding: 1rem;
+        text-align: left;
+        vertical-align: top;
+        background-color: white;
+    }
+    
+    .html-content .html-table tr:nth-child(even) .html-table-cell {
+        background-color: #f9fafb;
+    }
+    
+    .html-content .html-table tr:hover .html-table-cell {
+        background-color: #f3f4f6;
+    }
+    
+    /* Enhanced code block styling */
+    .html-content pre {
+        background-color: #1f2937;
+        color: #f9fafb;
+        padding: 1.5rem;
+        border-radius: 0.75rem;
+        overflow-x: auto;
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+        font-size: 0.875rem;
+        line-height: 1.6;
+        border: 1px solid #374151;
+        margin: 1.5rem 0;
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    }
+    
+    .html-content pre code {
+        background-color: transparent;
+        padding: 0;
+        border: none;
+        color: #f9fafb;
+        font-size: inherit;
+    }
+    
+    /* Code block container styling */
+    .html-content .code-block-container {
+        border-radius: 0.75rem;
+        overflow: hidden;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        margin: 1.5rem 0;
+    }
+    
+    .html-content .code-block-header {
+        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+        padding: 0.75rem 1rem;
+        border-bottom: 1px solid #d1d5db;
+        font-weight: 600;
+        color: #374151;
+        font-size: 0.875rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+    
+    .html-content .code-block-content {
+        background-color: #1f2937;
+        padding: 1.5rem;
+        overflow-x: auto;
+    }
+`;
+// 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;
+};
+// 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 HTML detection that recognizes more HTML patterns
+const isProbablyHTML = value => {
+  if (!value) return false;
+  // Check for HTML tags (including self-closing tags)
+  const htmlTagPattern = /<\/?[a-z][\s\S]*>/i;
+  // Check for HTML entities
+  const htmlEntityPattern = /&[a-z0-9#]+;/i;
+  // Check for common HTML attributes
+  const htmlAttrPattern = /\s+[a-z-]+\s*=\s*["'][^"']*["']/i;
+  // Check for HTML-like structure
+  const htmlStructurePattern = /<[^>]+>[^<]*<\/[^>]+>/i;
+  return htmlTagPattern.test(value.trim()) || htmlEntityPattern.test(value.trim()) || htmlAttrPattern.test(value.trim()) || htmlStructurePattern.test(value.trim());
+};
+// Detect if a string looks like a code block
+const isCodeBlock = text => {
+  if (!text || text.length < 10) return false;
+  // Check for common programming patterns
+  const codePatterns = [/\b(if|else|for|while|switch|case|break|continue|return|function|class|import|export|const|let|var|default)\b/, /\b(public|private|protected|static|final|abstract|interface|extends|implements)\b/, /\b(try|catch|finally|throw|throws)\b/, /\b(new|this|super|null|undefined|true|false)\b/,
+  // Narrow punctuation: exclude parentheses, brackets, hyphen, question/colon to reduce false positives
+  /[{}<>;=+*/%&|^~]/, /\b(System\.out\.println|console\.log|print|printf)\b/, /\b(int|string|boolean|float|double|long|char|byte|short)\b/, /\b(void|int|main|args)\b/, /\/\/.*$/m,
+  // Single line comments
+  /\/\*[\s\S]*?\*\//m,
+  // Multi-line comments
+  /^\s*[a-zA-Z_$][a-zA-Z0-9_$]*\s*[=:]\s*/,
+  // Variable assignment
+  /^\s*[a-zA-Z_$][a-zA-Z0-9_$]*\s*\(.*\)\s*{/,
+  // Function definition
+  /\bexport\s+default\b/,
+  // Export default statements
+  /\breturn\s+\(/,
+  // Return with JSX
+  /\bJSX\.Element\b/ // JSX types
+  ];
+  // Count how many patterns match
+  let matchCount = 0;
+  codePatterns.forEach(pattern => {
+    if (pattern.test(text)) {
+      matchCount++;
+    }
+  });
+  // Debug logging
+  console.log('Code block detection for:', text.substring(0, 100) + '...');
+  console.log('Match count:', matchCount);
+  console.log('Contains export default:', /\bexport\s+default\b/.test(text));
+  console.log('Contains function:', /\bfunction\b/.test(text));
+  console.log('Contains braces:', /[{}<>;]/.test(text));
+  // If multiple patterns match or if it contains specific strong indicators, consider it code
+  const result = matchCount >= 2 || /\b(if|else|for|while|function|class|export)\b/.test(text) || /[{}<>;]/.test(text) || /\bexport\s+default\b/.test(text);
+  console.log('Is code block:', result);
+  return result;
+};
+// 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, '');
+  }
+};
+// 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: "prose prose-sm 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("pre", {
+      key: idx,
+      className: "text-xs text-gray-600 bg-gray-50 p-2 rounded overflow-x-auto not-prose"
+    }, JSON.stringify(block, null, 2));
+  }));
+};
+// Enhanced markdown-like renderer for rich text content
+// Helper: render multiple inline lists from a single paragraph like
+// "Intro A: - item1 - item2  Intro B: - item3 - item4"
+const tryRenderMultipleInlineLists = text => {
+  if (!text || !text.includes(' - ') || !text.includes(':')) return null;
+  // Split while keeping the section headers (ending with ":")
+  const segments = text.split(/([^:]+:\s*)/).filter(s => s.length > 0);
+  if (segments.length < 3) return null; // need at least header + content
+  const nodes = [];
+  // Handle leading text before the first header
+  if (segments[0] && !segments[0].endsWith(':')) {
+    const leading = segments[0].trim();
+    if (leading) {
+      nodes.push(React__default.createElement("p", {
+        key: `inline-leading`,
+        className: "text-gray-700 leading-relaxed"
+      }, leading));
+    }
+  }
+  for (let i = 1; i < segments.length; i += 2) {
+    const header = (segments[i] || '').trim();
+    const rest = (segments[i + 1] || '').trim();
+    if (!header.endsWith(':')) continue;
+    const parts = rest.split(/\s-\s+/).filter(p => p.trim());
+    // When split on " - ", the first element is the tail right after header; ignore if empty
+    const items = parts.length && !rest.startsWith('- ') ? parts.slice(1) : parts;
+    if (items.length >= 2) {
+      nodes.push(React__default.createElement("div", {
+        key: `inline-group-${i}`,
+        className: "space-y-2"
+      }, React__default.createElement("p", {
+        className: "text-gray-900 font-semibold leading-relaxed"
+      }, header.replace(/:$/, '')), React__default.createElement("ul", {
+        className: "space-y-2"
+      }, items.map((it, idx) => React__default.createElement("li", {
+        key: `inline-item-${i}-${idx}`,
+        className: "flex items-start space-x-3 items-center"
+      }, React__default.createElement("svg", {
+        className: "w-5 h-5 text-black mt-0.5 flex-shrink-0",
+        fill: "currentColor",
+        viewBox: "0 0 20 20"
+      }, React__default.createElement("path", {
+        fillRule: "evenodd",
+        d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+        clipRule: "evenodd"
+      })), React__default.createElement("span", {
+        className: "text-gray-700 leading-relaxed"
+      }, it.trim()))))));
+    } else {
+      // Not enough items; treat as plain text
+      const combined = `${header} ${rest}`.trim();
+      if (combined) {
+        nodes.push(React__default.createElement("p", {
+          key: `inline-fallback-${i}`,
+          className: "text-gray-700 leading-relaxed"
+        }, combined));
+      }
+    }
+  }
+  return nodes.length ? nodes : null;
+};
+const FormattedMessageContent = ({
+  content
+}) => {
+  if (!content) return null;
+  // Debug logging for content
+  console.log('FormattedMessageContent received:', content.substring(0, 200) + '...');
+  // Direct check for a code-looking message (common for AI replies with fenced blocks)
+  if (content.includes('export default function Home()') || content.includes('export default') && content.includes('function') && content.includes('return')) {
+    console.log('Direct code pattern match detected!');
+    // If content has fenced code, extract language and code, removing the fences
+    const fenceMatch = content.match(/```([\w-]*)\n?([\s\S]*?)```/);
+    let language = 'typescript';
+    let codeBody = content;
+    if (fenceMatch) {
+      language = (fenceMatch[1] || 'code').trim() || 'code';
+      codeBody = fenceMatch[2];
+    }
+    // Clean up the code content for better display
+    const cleanCode = codeBody.replace(/^\s+/, '') // Remove leading whitespace
+    .replace(/\s+$/, '') // Remove trailing whitespace
+    .split('\n').map(line => line.trim()).filter(line => line.length > 0).join('\n');
+    return React__default.createElement("div", {
+      className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden"
+    }, React__default.createElement("div", {
+      className: "px-4 py-2 text-sm font-bold text-gray-900"
+    }, language), React__default.createElement("div", {
+      className: "px-4 pb-4 overflow-x-auto"
+    }, React__default.createElement("pre", {
+      className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
+    }, React__default.createElement("code", null, cleanCode))));
+  }
+  // Normalize escaped fences (\``` -> ```)
+  const normalizedContent = content.replace(/\\`{3}/g, '```');
+  // Global fenced-code parse as an early pass (handles cases where block splitting interferes)
+  if (normalizedContent.includes('```')) {
+    const parts = [];
+    const pushTextBlock = (text, key) => {
+      const t = (text || '').trim();
+      if (!t) return;
+      // Try to render multiple inline lists in one paragraph
+      const multiInline = tryRenderMultipleInlineLists(t);
+      if (multiInline) {
+        multiInline.forEach((n, idx) => parts.push(React__default.createElement(React__default.Fragment, {
+          key: `${key}-mil-${idx}`
+        }, n)));
+        return;
+      }
+      if (t.startsWith('# ')) {
+        parts.push(React__default.createElement("h1", {
+          key: key,
+          className: "text-2xl font-bold text-gray-900 mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
+        }, t.substring(2)));
+        return;
+      }
+      if (t.startsWith('## ')) {
+        parts.push(React__default.createElement("h2", {
+          key: key,
+          className: "text-xl font-semibold text-gray-800 mb-3 border-b border-gray-200 pb-2"
+        }, t.substring(3)));
+        return;
+      }
+      if (t.startsWith('### ')) {
+        parts.push(React__default.createElement("h3", {
+          key: key,
+          className: "text-lg font-medium text-gray-700 mb-2"
+        }, t.substring(4)));
+        return;
+      }
+      // Inline list heuristic: bullet items written on one line separated by " - "
+      if (!t.includes('\n') && t.includes(' - ') && t.split(' - ').length >= 3) {
+        const [intro, ...rawItems] = t.split(/\s-\s+/);
+        parts.push(React__default.createElement("div", {
+          key: `${key}-inline-list`,
+          className: "space-y-2"
+        }, intro.trim() ? React__default.createElement("p", {
+          className: "text-gray-700 leading-relaxed"
+        }, intro.trim()) : null, React__default.createElement("ul", {
+          className: "space-y-2"
+        }, rawItems.map((item, itemIndex) => React__default.createElement("li", {
+          key: `${key}-inli-${itemIndex}`,
+          className: "flex items-start space-x-3 items-center"
+        }, React__default.createElement("svg", {
+          className: "w-5 h-5 text-black mt-0.5 flex-shrink-0",
+          fill: "currentColor",
+          viewBox: "0 0 20 20"
+        }, React__default.createElement("path", {
+          fillRule: "evenodd",
+          d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+          clipRule: "evenodd"
+        })), React__default.createElement("span", {
+          className: "text-gray-700 leading-relaxed"
+        }, item.trim()))))));
+        return;
+      }
+      if (t.startsWith('- ') || t.startsWith('• ')) {
+        const items = t.split('\n').filter(line => line.trim());
+        parts.push(React__default.createElement("div", {
+          key: key,
+          className: "bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg"
+        }, React__default.createElement("ul", {
+          className: "space-y-2"
+        }, items.map((item, itemIndex) => React__default.createElement("li", {
+          key: `${key}-li-${itemIndex}`,
+          className: "flex items-start space-x-3 items-center"
+        }, React__default.createElement("svg", {
+          className: "w-5 h-5 text-black mt-0.5 flex-shrink-0",
+          fill: "currentColor",
+          viewBox: "0 0 20 20"
+        }, React__default.createElement("path", {
+          fillRule: "evenodd",
+          d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+          clipRule: "evenodd"
+        })), React__default.createElement("span", {
+          className: "text-gray-700 leading-relaxed"
+        }, item.replace(/^[\u2212\-•]\s*/, '')))))));
+        return;
+      }
+      if (isProbablyHTML(t)) {
+        parts.push(React__default.createElement("div", {
+          key: key,
+          className: "prose prose-sm max-w-none text-gray-800",
+          dangerouslySetInnerHTML: {
+            __html: sanitizeHtml(t)
+          }
+        }));
+        return;
+      }
+      if (t.includes('**') || t.includes('`')) {
+        const formatted = t.replace(/\*\*(.*?)\*\*/g, '<span class="font-semibold text-gray-900 bg-yellow-100 px-1 py-0.5 rounded">$1</span>').replace(/`([^`]+)`/g, '<code class="bg-gray-100 px-2 py-1 rounded text-sm font-mono text-gray-800">$1</code>');
+        parts.push(React__default.createElement("div", {
+          key: key,
+          className: "text-gray-700 leading-relaxed",
+          dangerouslySetInnerHTML: {
+            __html: sanitizeHtml(formatted)
+          }
+        }));
+        return;
+      }
+      // Check if the text looks like a code block (contains programming keywords, syntax, etc.)
+      if (isCodeBlock(t)) {
+        // Clean up the code content for better display
+        const cleanCode = t.replace(/^\s+/, '') // Remove leading whitespace
+        .replace(/\s+$/, '') // Remove trailing whitespace
+        .split('\n').map(line => line.trim()).filter(line => line.length > 0).join('\n');
+        parts.push(React__default.createElement("div", {
+          key: key,
+          className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden"
+        }, React__default.createElement("div", {
+          className: "px-4 py-2 text-sm font-bold text-gray-900"
+        }, "typescript"), React__default.createElement("div", {
+          className: "px-4 pb-4 overflow-x-auto"
+        }, React__default.createElement("pre", {
+          className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
+        }, React__default.createElement("code", null, cleanCode)))));
+        return;
+      }
+      parts.push(React__default.createElement("p", {
+        key: key,
+        className: "text-gray-700 leading-relaxed whitespace-pre-wrap"
+      }, t));
+    };
+    // Improved regex to handle multiline code blocks better
+    const codeRegex = /```([\w-]*)\n?([\s\S]*?)```/g;
+    let lastIndex = 0;
+    let m;
+    let foundAnyFence = false;
+    while ((m = codeRegex.exec(normalizedContent)) !== null) {
+      foundAnyFence = true;
+      const [full, lang, code] = m;
+      const before = normalizedContent.slice(lastIndex, m.index);
+      pushTextBlock(before, `global-before-${lastIndex}`);
+      const language = (lang || '').trim() || 'code';
+      // Clean up the code content properly
+      const cleanCode = code.replace(/^\s+/, '') // Remove leading whitespace
+      .replace(/\s+$/, '') // Remove trailing whitespace
+      .split('\n').map(line => line.trim()).filter(line => line.length > 0).join('\n');
+      parts.push(React__default.createElement("div", {
+        key: `global-code-${m.index}`,
+        className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
+      }, React__default.createElement("div", {
+        className: "px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200"
+      }, language), React__default.createElement("div", {
+        className: "px-4 py-4 overflow-x-auto bg-white"
+      }, React__default.createElement("pre", {
+        className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
+      }, React__default.createElement("code", null, cleanCode)))));
+      lastIndex = m.index + full.length;
+    }
+    const after = normalizedContent.slice(lastIndex);
+    if (!foundAnyFence) {
+      // Fallback: opening fence exists but no closing fence found
+      const fenceIndex = normalizedContent.indexOf('```');
+      const before = normalizedContent.slice(0, fenceIndex);
+      const afterFence = normalizedContent.slice(fenceIndex + 3); // skip opening backticks
+      // Try to read language up to end of line. If none, treat whole remainder as code.
+      const firstNewline = afterFence.indexOf('\n');
+      const language = firstNewline >= 0 ? afterFence.slice(0, firstNewline).trim() || 'code' : 'code';
+      const rawCodeBody = firstNewline >= 0 ? afterFence.slice(firstNewline + 1) : afterFence;
+      const codeBody = rawCodeBody.replace(/^\s+/, '').replace(/\s+$/, '').split('\n').map(line => line.trimEnd()).join('\n');
+      pushTextBlock(before, `global-fallback-before-${fenceIndex}`);
+      parts.push(React__default.createElement("div", {
+        key: `global-fallback-code-${fenceIndex}`,
+        className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
+      }, React__default.createElement("div", {
+        className: "px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200"
+      }, language), React__default.createElement("div", {
+        className: "px-4 py-4 overflow-x-auto bg-white"
+      }, React__default.createElement("pre", {
+        className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
+      }, React__default.createElement("code", null, codeBody)))));
+    } else {
+      // If there's a dangling opening fence in the tail, render it as a fallback code block
+      if (after.includes('```')) {
+        const fenceIndexTail = after.indexOf('```');
+        const beforeTail = after.slice(0, fenceIndexTail);
+        const afterFenceTail = after.slice(fenceIndexTail + 3);
+        const firstNewlineTail = afterFenceTail.indexOf('\n');
+        const languageTail = firstNewlineTail >= 0 ? afterFenceTail.slice(0, firstNewlineTail).trim() || 'code' : 'code';
+        const rawCodeTail = firstNewlineTail >= 0 ? afterFenceTail.slice(firstNewlineTail + 1) : afterFenceTail;
+        const cleanTail = rawCodeTail.replace(/^\s+/, '').replace(/\s+$/, '').split('\n').map(line => line.trimEnd()).join('\n');
+        pushTextBlock(beforeTail, `global-after-text-${lastIndex}`);
+        parts.push(React__default.createElement("div", {
+          key: `global-after-fallback-code-${lastIndex}`,
+          className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
+        }, React__default.createElement("div", {
+          className: "px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200"
+        }, languageTail), React__default.createElement("div", {
+          className: "px-4 py-4 overflow-x-auto bg-white"
+        }, React__default.createElement("pre", {
+          className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
+        }, React__default.createElement("code", null, cleanTail)))));
+      } else {
+        pushTextBlock(after, `global-after-${lastIndex}`);
+      }
+    }
+    return React__default.createElement("div", {
+      className: "space-y-4"
+    }, parts);
+  }
+  // Split content into blocks for better formatting
+  const blocks = normalizedContent.split('\n\n').filter(block => block.trim());
+  // Debug logging for blocks
+  console.log('Content blocks:', blocks.map(b => b.substring(0, 100) + '...'));
+  return React__default.createElement("div", {
+    className: "space-y-4"
+  }, blocks.map((block, index) => {
+    const trimmedBlock = block.trim();
+    // Debug logging for individual blocks
+    console.log(`Block ${index}:`, trimmedBlock.substring(0, 100) + '...');
+    console.log(`Block ${index} isCodeBlock:`, isCodeBlock(trimmedBlock));
+    // If the block contains fenced code anywhere, render text parts + code parts in order
+    if (trimmedBlock.includes('```')) {
+      const parts = [];
+      const pushTextBlock = (text, key) => {
+        const t = (text || '').trim();
+        if (!t) return;
+        const multiInlineInner = tryRenderMultipleInlineLists(t);
+        if (multiInlineInner) {
+          multiInlineInner.forEach((n, idx) => parts.push(React__default.createElement(React__default.Fragment, {
+            key: `${key}-mil-${idx}`
+          }, n)));
+          return;
+        }
+        if (t.startsWith('# ')) {
+          parts.push(React__default.createElement("h1", {
+            key: key,
+            className: "text-2xl font-bold text-gray-900 mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
+          }, t.substring(2)));
+          return;
+        }
+        if (t.startsWith('## ')) {
+          parts.push(React__default.createElement("h2", {
+            key: key,
+            className: "text-xl font-semibold text-gray-800 mb-3 border-b border-gray-200 pb-2"
+          }, t.substring(3)));
+          return;
+        }
+        if (t.startsWith('### ')) {
+          parts.push(React__default.createElement("h3", {
+            key: key,
+            className: "text-lg font-medium text-gray-700 mb-2"
+          }, t.substring(4)));
+          return;
+        }
+        // Inline list heuristic inside block
+        if (!t.includes('\n') && t.includes(' - ') && t.split(' - ').length >= 3) {
+          const [intro, ...rawItems] = t.split(/\s-\s+/);
+          parts.push(React__default.createElement("div", {
+            key: `${key}-inline-list`,
+            className: "space-y-2"
+          }, intro.trim() ? React__default.createElement("p", {
+            className: "text-gray-700 leading-relaxed"
+          }, intro.trim()) : null, React__default.createElement("ul", {
+            className: "space-y-2"
+          }, rawItems.map((item, itemIndex) => React__default.createElement("li", {
+            key: `${key}-inli-${itemIndex}`,
+            className: "flex items-start space-x-3 items-center"
+          }, React__default.createElement("svg", {
+            className: "w-5 h-5 text-black mt-0.5 flex-shrink-0",
+            fill: "currentColor",
+            viewBox: "0 0 20 20"
+          }, React__default.createElement("path", {
+            fillRule: "evenodd",
+            d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+            clipRule: "evenodd"
+          })), React__default.createElement("span", {
+            className: "text-gray-700 leading-relaxed"
+          }, item.trim()))))));
+          return;
+        }
+        if (t.startsWith('- ') || t.startsWith('• ')) {
+          const items = t.split('\n').filter(line => line.trim());
+          parts.push(
+          // <div key={key} className="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
+          React__default.createElement("div", {
+            key: key,
+            className: " p-4 rounded-r-lg"
+          }, React__default.createElement("ul", {
+            className: "space-y-2"
+          }, items.map((item, itemIndex) => React__default.createElement("li", {
+            key: `${key}-li-${itemIndex}`,
+            className: "flex items-start space-x-3 items-center"
+          }, React__default.createElement("svg", {
+            className: "w-5 h-5 text-black mt-0.5 flex-shrink-0",
+            fill: "currentColor",
+            viewBox: "0 0 20 20"
+          }, React__default.createElement("path", {
+            fillRule: "evenodd",
+            d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+            clipRule: "evenodd"
+          })), React__default.createElement("span", {
+            className: "text-gray-700 leading-relaxed"
+          }, item.replace(/^[\u2212\-•]\s*/, '')))))));
+          return;
+        }
+        if (t.includes('**') || t.includes('`')) {
+          const formatted = t.replace(/\*\*(.*?)\*\*/g, '<span class="font-semibold text-gray-900 bg-yellow-100 px-1 py-0.5 rounded">$1</span>').replace(/`([^`]+)`/g, '<code class="bg-gray-100 px-2 py-1 rounded text-sm font-mono text-gray-800">$1</code>');
+          parts.push(React__default.createElement("div", {
+            key: key,
+            className: "text-gray-700 leading-relaxed",
+            dangerouslySetInnerHTML: {
+              __html: sanitizeHtml(formatted)
+            }
+          }));
+          return;
+        }
+        // Check if the text looks like a code block (contains programming keywords, syntax, etc.)
+        if (isCodeBlock(t)) {
+          // Clean up the code content for better display
+          const cleanCode = t.replace(/^\s+/, '') // Remove leading whitespace
+          .replace(/\s+$/, '') // Remove trailing whitespace
+          .split('\n').map(line => line.trim()).filter(line => line.length > 0).join('\n');
+          parts.push(React__default.createElement("div", {
+            key: key,
+            className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden"
+          }, React__default.createElement("div", {
+            className: "px-4 py-2 text-sm font-bold text-gray-900"
+          }, "typescript"), React__default.createElement("div", {
+            className: "px-4 pb-4 overflow-x-auto"
+          }, React__default.createElement("pre", {
+            className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
+          }, React__default.createElement("code", null, cleanCode)))));
+          return;
+        }
+        parts.push(React__default.createElement("p", {
+          key: key,
+          className: "text-gray-700 leading-relaxed whitespace-pre-wrap"
+        }, t));
+      };
+      const codeRegex = /```([\w-]*)\n?([\s\S]*?)```/g;
+      let lastIndex = 0;
+      let match;
+      while ((match = codeRegex.exec(trimmedBlock)) !== null) {
+        const [full, lang, code] = match;
+        const before = trimmedBlock.slice(lastIndex, match.index).trim();
+        pushTextBlock(before, `${index}-before-${lastIndex}`);
+        const language = (lang || '').trim() || 'code';
+        // Clean up the code content properly
+        const cleanCode = code.replace(/^\s+/, '') // Remove leading whitespace
+        .replace(/\s+$/, '') // Remove trailing whitespace
+        .split('\n').map(line => line.trim()).filter(line => line.length > 0).join('\n');
+        parts.push(React__default.createElement("div", {
+          key: `${index}-code-${match.index}`,
+          className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
+        }, React__default.createElement("div", {
+          className: "px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200"
+        }, language), React__default.createElement("div", {
+          className: "px-4 py-4 overflow-x-auto bg-white"
+        }, React__default.createElement("pre", {
+          className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
+        }, React__default.createElement("code", null, cleanCode)))));
+        lastIndex = match.index + full.length;
+      }
+      const after = trimmedBlock.slice(lastIndex).trim();
+      pushTextBlock(after, `${index}-after`);
+      return React__default.createElement("div", {
+        key: index,
+        className: "space-y-3"
+      }, parts);
+    }
+    // Raw HTML support per block
+    if (isProbablyHTML(trimmedBlock)) {
+      return React__default.createElement("div", {
+        key: index,
+        className: "prose prose-sm max-w-none text-gray-800",
+        dangerouslySetInnerHTML: {
+          __html: sanitizeHtml(trimmedBlock)
+        }
+      });
+    }
+    // Check for different content types
+    if (trimmedBlock.startsWith('# ')) {
+      // Main heading
+      return React__default.createElement("h1", {
+        key: index,
+        className: "text-2xl font-bold text-gray-900 mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
+      }, trimmedBlock.substring(2));
+    } else if (trimmedBlock.startsWith('## ')) {
+      // Secondary heading
+      return React__default.createElement("h2", {
+        key: index,
+        className: "text-xl font-semibold text-gray-800 mb-3 border-b border-gray-200 pb-2"
+      }, trimmedBlock.substring(3));
+    } else if (trimmedBlock.startsWith('### ')) {
+      // Tertiary heading
+      return React__default.createElement("h3", {
+        key: index,
+        className: "text-lg font-medium text-gray-700 mb-2"
+      }, trimmedBlock.substring(4));
+    } else if (trimmedBlock.startsWith('- ') || trimmedBlock.startsWith('• ')) {
+      // Bullet points
+      const items = trimmedBlock.split('\n').filter(line => line.trim());
+      return (
+        // <div key={index} className="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
+        React__default.createElement("div", {
+          key: index,
+          className: " p-4 rounded-r-lg"
+        }, React__default.createElement("ul", {
+          className: "space-y-2"
+        }, items.map((item, itemIndex) => React__default.createElement("li", {
+          key: itemIndex,
+          className: "flex items-start space-x-3 items-center"
+        }, React__default.createElement("svg", {
+          className: "w-5 h-5 text-black mt-0.5 flex-shrink-0",
+          fill: "currentColor",
+          viewBox: "0 0 20 20"
+        }, React__default.createElement("path", {
+          fillRule: "evenodd",
+          d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+          clipRule: "evenodd"
+        })), React__default.createElement("span", {
+          className: "text-gray-700 leading-relaxed"
+        }, item.replace(/^[-•]\s*/, '').split(/(\*\*.*?\*\*)/).map((part, partIndex) => {
+          if (part.match(/\*\*.*?\*\*/)) {
+            // Extract text between ** markers and make it bold
+            const boldText = part.replace(/\*\*/g, '');
+            return React__default.createElement("strong", {
+              key: partIndex,
+              className: "font-semibold text-gray-900"
+            }, boldText);
+          }
+          return part;
+        }))))))
+      );
+    } else if (trimmedBlock.startsWith('```')) {
+      // Code block
+      const codeMatch = trimmedBlock.match(/^```([\w-]*)\n?([\s\S]*?)```$/);
+      if (codeMatch) {
+        const [, language, codeContent] = codeMatch;
+        const lang = (language || '').trim() || 'code';
+        // Clean up the code content properly
+        const cleanCode = codeContent.replace(/^\s+/, '') // Remove leading whitespace
+        .replace(/\s+$/, '') // Remove trailing whitespace
+        .split('\n').map(line => line.trim()).filter(line => line.length > 0).join('\n');
+        return React__default.createElement("div", {
+          key: index,
+          className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
+        }, React__default.createElement("div", {
+          className: "px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200"
+        }, lang), React__default.createElement("div", {
+          className: "px-4 py-4 overflow-x-auto bg-white"
+        }, React__default.createElement("pre", {
+          className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
+        }, React__default.createElement("code", null, cleanCode))));
+      }
+      // Fallback for malformed code blocks
+      const codeContent = trimmedBlock.replace(/^```[\w]*\n?/, '').replace(/```$/, '');
+      // If the fenced code actually looks like plain bullet text, render as text instead of code
+      const hyphenLines = codeContent.split('\n').filter(l => /^[-•]/.test(l.trim())).length;
+      const hasCodeSymbols = /[{}<>;=]/.test(codeContent) || /\b(function|class|import|export)\b/.test(codeContent);
+      if (hyphenLines >= 2 && !hasCodeSymbols) {
+        return React__default.createElement("p", {
+          key: index,
+          className: "text-gray-700 leading-relaxed whitespace-pre-wrap"
+        }, codeContent);
+      }
+      return React__default.createElement("div", {
+        key: index,
+        className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
+      }, React__default.createElement("div", {
+        className: "px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200"
+      }, "code"), React__default.createElement("div", {
+        className: "px-4 py-4 overflow-x-auto bg-white"
+      }, React__default.createElement("pre", {
+        className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
+      }, React__default.createElement("code", null, codeContent))));
+    } else if (trimmedBlock.startsWith('🔧 ')) {
+      // Tool status message - render as bordered container
+      const toolText = trimmedBlock.substring(2); // Remove the 🔧 emoji
+      return React__default.createElement("div", {
+        key: index,
+        className: "mt-2"
+      }, React__default.createElement("div", {
+        className: "inline-block px-3 py-1 bg-gray-100 border border-gray-300 rounded-lg text-sm text-gray-700"
+      }, React__default.createElement("span", {
+        className: "text-green-500 mr-2"
+      }, "\uD83D\uDD27"), toolText));
+    } else if (trimmedBlock.includes('**') || trimmedBlock.includes('`')) {
+      // Inline formatting (bold, inline code, highlights)
+      const formattedContent = trimmedBlock.replace(/\*\*(.*?)\*\*/g, '<span class="font-semibold text-gray-900 bg-yellow-100 px-1 py-0.5 rounded">$1</span>').replace(/`([^`]+)`/g, '<code class="bg-gray-100 px-2 py-1 rounded text-sm font-mono text-gray-800">$1</code>');
+      return React__default.createElement("div", {
+        key: index,
+        className: "text-gray-700 leading-relaxed",
+        dangerouslySetInnerHTML: {
+          __html: sanitizeHtml(formattedContent)
+        }
+      });
+    } else if (isCodeBlock(trimmedBlock)) {
+      // Code block detection for content that looks like code
+      // Clean up the code content for better display
+      const cleanCode = trimmedBlock.replace(/^\s+/, '') // Remove leading whitespace
+      .replace(/\s+$/, '') // Remove trailing whitespace
+      .split('\n').map(line => line.trim()).filter(line => line.length > 0).join('\n');
+      // Heuristic: if the "code" contains many leading hyphen bullets and no typical code symbols, treat as text
+      const hyphenLines = cleanCode.split('\n').filter(l => /^[-•]/.test(l.trim())).length;
+      const hasCodeSymbols = /[{}<>;=]/.test(cleanCode) || /\b(function|class|import|export)\b/.test(cleanCode);
+      if (hyphenLines >= 2 && !hasCodeSymbols) {
+        return React__default.createElement("p", {
+          key: index,
+          className: "text-gray-700 leading-relaxed whitespace-pre-wrap"
+        }, trimmedBlock);
+      }
+      return React__default.createElement("div", {
+        key: index,
+        className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden"
+      }, React__default.createElement("div", {
+        className: "px-4 py-2 text-sm font-bold text-gray-900"
+      }, "typescript"), React__default.createElement("div", {
+        className: "px-4 pb-4 overflow-x-auto"
+      }, React__default.createElement("pre", {
+        className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
+      }, React__default.createElement("code", null, cleanCode))));
+    } else if (
+    // Fallback: More aggressive code detection for specific patterns
+    trimmedBlock.includes('export default') || trimmedBlock.includes('function') || trimmedBlock.includes('return (') || trimmedBlock.includes('className=') || trimmedBlock.includes('Route::') || trimmedBlock.includes('class Post') || trimmedBlock.includes('extends Model') || trimmedBlock.includes('extends Controller') || trimmedBlock.includes('{') && trimmedBlock.includes('}') && trimmedBlock.includes(';')) {
+      console.log('Fallback code detection triggered for block:', trimmedBlock.substring(0, 100) + '...');
+      // Clean up the code content for better display
+      const cleanCode = trimmedBlock.replace(/^\s+/, '') // Remove leading whitespace
+      .replace(/\s+$/, '') // Remove trailing whitespace
+      .split('\n').map(line => line.trim()).filter(line => line.length > 0).join('\n');
+      return React__default.createElement("div", {
+        key: index,
+        className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden shadow-sm"
+      }, React__default.createElement("div", {
+        className: "px-4 py-2 text-sm font-bold text-gray-900 bg-gray-100 border-b border-gray-200"
+      }, "code"), React__default.createElement("div", {
+        className: "px-4 py-4 overflow-x-auto bg-white"
+      }, React__default.createElement("pre", {
+        className: "text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap not-prose"
+      }, React__default.createElement("code", null, cleanCode))));
+    } else {
+      // Regular paragraph
+      return React__default.createElement("p", {
+        key: index,
+        className: "text-gray-700 leading-relaxed whitespace-pre-wrap"
+      }, trimmedBlock);
+    }
+  }));
+};
+// 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);
+  };
+  // 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"
+    }, React__default.createElement("div", {
+      className: "flex items-start justify-end gap-2"
+    }, React__default.createElement("div", {
+      className: "flex flex-col items-end max-w-xs lg:max-w-md"
+    }, 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 cursor-pointer hover:bg-gray-100 px-1 sm:px-2 py-1 rounded",
+      onClick: handleClick,
+      dir: detectTextDirection(message?.message || ''),
+      lang: detectLanguageTag(message?.message || '')
+    }, message.message && React__default.createElement("div", {
+      className: "prose prose-sm max-w-none"
+    }, isProbablyHTML(message.message) ? React__default.createElement("div", {
+      className: "text-gray-800 html-content",
+      dangerouslySetInnerHTML: {
+        __html: prettifyHtmlContent(sanitizeHtml(message.message))
+      }
+    }) : 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
+    })))), 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 cursor-pointer hover:opacity-80 transition-opacity object-cover",
+      src: message.author?.picture || '/default-avatar.svg',
+      alt: authorName,
+      onClick: 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 ? '' : 'cursor-pointer'}`,
+    onClick: isSystemMessage ? 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: `prose prose-sm max-w-none ${isSystemMessage ? 'text-gray-800' : 'text-gray-900'}`,
+    dir: detectTextDirection(message?.message || ''),
+    lang: detectLanguageTag(message?.message || '')
+  }, message.message.includes('```') ? React__default.createElement(FormattedMessageContent, {
+    content: message.message
+  }) : isProbablyHTML(message.message) ? React__default.createElement("div", {
+    className: "prose prose-sm max-w-none text-gray-800 html-content",
+    dangerouslySetInnerHTML: {
+      __html: prettifyHtmlContent(sanitizeHtml(message.message))
+    }
+  }) : 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
+}) => {
+  // 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
+    });
+  }));
+};export{ModernMessageGroupComponent,groupMessagesByUserAndTime};//# sourceMappingURL=ModernMessageGroup.js.map