@messenger-box/tailwind-ui-inbox 10.0.3-alpha.176 → 10.0.3-alpha.178

package/src/components/InboxMessage/message-widgets/ModernMessageGroup.tsx

@@ -1,10 +1,17 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { format, differenceInMinutes } from 'date-fns';
 import { AiAgentMessageRole, IAuthUser, IPost, PostTypeEnum } from 'common';
 import { FilesList } from '../../inbox';
 import { ErrorFixCard } from './ErrorFixCard';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
+import { marked } from 'marked';
+
+// Configure marked for better markdown rendering
+marked.setOptions({
+    breaks: true, // Convert line breaks to <br>
+    gfm: true, // GitHub Flavored Markdown
+    headerIds: false, // Disable header IDs for cleaner HTML
+    mangle: false, // Don't mangle email addresses
+});
 
 // Enhanced CSS styles for HTML content rendering with prettification
 const htmlContentStyles = `
@@ -369,6 +376,30 @@ const htmlContentStyles = `
         padding: 1rem;
         overflow-x: auto;
     }
+    
+    /* Enhanced prose styling for markdown content */
+    .prose pre {
+        background-color: #f9fafb;
+        border: 1px solid #e5e7eb;
+        border-radius: 0.5rem;
+        padding: 1rem;
+        overflow-x: auto;
+    }
+    
+    .prose code {
+        background-color: #f3f4f6;
+        padding: 0.125rem 0.375rem;
+        border-radius: 0.25rem;
+        font-size: 0.875rem;
+        border: 1px solid #e5e7eb;
+    }
+    
+    .prose pre code {
+        background-color: transparent;
+        padding: 0;
+        border: none;
+        color:#000;
+    }
 
     .hover\:bg-gray-100:hover {
         background-color: transparent !important;
@@ -469,47 +500,57 @@ const detectContentType = (value: string): 'html' | 'markdown' | 'code' | '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
+    // Check for markdown patterns FIRST (before code, as markdown can contain code blocks)
+    const markdownPatterns = [
+        /^#{1,6}\s+.+$/gm, // Headers (must have text after #)
+        /^\s*[-*+]\s+.+$/gm, // Unordered lists
+        /^\s*\d+\.\s+.+$/gm, // Numbered lists
+        /\[.+?\]\(.+?\)/g, // Links
+        /!\[.+?\]\(.+?\)/g, // Images
+        /```[\s\S]*?```/g, // Fenced code blocks (markdown feature)
+        /^\s*>\s+/gm, // Blockquotes
+        /\*\*.*?\*\*/g, // Bold
+        /\*[^*].*?\*/g, // Italic (not just asterisks)
+        /^\s*\|.+\|/gm, // Tables
     ];
 
-    const hasCodePatterns = codePatterns.some((pattern) => pattern.test(trimmed));
-    if (hasCodePatterns) return 'code';
+    // Count markdown patterns - if we have multiple, it's likely markdown
+    const markdownMatches = markdownPatterns.filter((pattern) => {
+        const matches = trimmed.match(pattern);
+        return matches && matches.length > 0;
+    }).length;
 
-    // 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
+    // If we have 2+ markdown patterns, it's definitely markdown
+    if (markdownMatches >= 2) return 'markdown';
+
+    // If we have headers or lists, it's likely markdown
+    if (/^#{1,6}\s+/gm.test(trimmed) || /^\s*[-*+]\s+/gm.test(trimmed) || /^\s*\d+\.\s+/gm.test(trimmed)) {
+        return 'markdown';
+    }
+
+    // Check for pure code patterns (without markdown context)
+    const pureCodePatterns = [
+        /^---\s*\w+\.\w+\s*---$/gm, // File separators (standalone)
+        /^@tailwind\s+\w+/gm, // Tailwind directives at start
+        /^export\s+default\s*\{/gm, // JS/TS exports at start
+        /^import\s+.*\s+from\s+['"]/gm, // Import statements at start
     ];
 
-    const hasMarkdownPatterns = markdownPatterns.some((pattern) => pattern.test(trimmed));
-    if (hasMarkdownPatterns) return 'markdown';
+    const hasPureCodePatterns = pureCodePatterns.some((pattern) => pattern.test(trimmed));
+    if (hasPureCodePatterns && markdownMatches === 0) return 'code';
 
     // Check for HTML patterns
     const htmlPatterns = [
-        /<\/?[a-z][\s\S]*>/i, // HTML tags
+        /<[a-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';
+    // Only return HTML if it's clearly HTML and not markdown
+    if (hasHtmlPatterns && markdownMatches === 0) return 'html';
 
+    // Default to text, but FormattedMessageContent will still try to parse as markdown
     return 'text';
 };
 
@@ -724,7 +765,10 @@ const CodeFormatter: React.FC<{ content: string }> = ({ content }) => {
 
                     // Regular text content
                     return (
-                        <div key={index} className="text-gray-700 leading-relaxed whitespace-pre-wrap">
+                        <div
+                            key={index}
+                            className="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap break-words"
+                        >
                             {section.trim()}
                         </div>
                     );
@@ -734,130 +778,82 @@ const CodeFormatter: React.FC<{ content: string }> = ({ content }) => {
     );
 };
 
-// Enhanced markdown renderer using react-markdown with remark-gfm
+// Enhanced markdown renderer using marked (similar to MessageBubble.tsx)
 const FormattedMessageContent: React.FC<{ content: string }> = ({ content }) => {
     if (!content) return null;
 
-    // Check if content contains markdown patterns
-    const hasMarkdown = /[#*`>|]/.test(content) || content.includes('```');
+    // Parse markdown using marked - be more aggressive in detection
+    const htmlContent = useMemo(() => {
+        try {
+            const trimmed = content.trim();
+
+            // Comprehensive markdown detection patterns
+            const markdownIndicators = [
+                /^#{1,6}\s+.+$/gm, // Headers with text
+                /^\s*[-*+]\s+.+$/gm, // Unordered lists
+                /^\s*\d+\.\s+.+$/gm, // Numbered lists
+                /\[.+?\]\(.+?\)/g, // Links
+                /!\[.+?\]\(.+?\)/g, // Images
+                /```[\s\S]*?```/g, // Fenced code blocks
+                /^\s*>\s+/gm, // Blockquotes
+                /\*\*[^*]+\*\*/g, // Bold text
+                /\*[^*\n]+\*/g, // Italic text (not just asterisks)
+                /^\s*\|.+\|/gm, // Tables
+                /~~.+~~/g, // Strikethrough
+            ];
+
+            // Check if content has markdown patterns
+            const hasMarkdown = markdownIndicators.some((pattern) => {
+                const matches = trimmed.match(pattern);
+                return matches && matches.length > 0;
+            });
+
+            // Also check for common markdown characters that suggest markdown content
+            const hasMarkdownChars = /[#*`>|\[\]()]/.test(trimmed) && trimmed.length > 10;
+
+            // If we detect markdown, parse it
+            if (hasMarkdown || hasMarkdownChars) {
+                const parsed = marked.parse(trimmed, { async: false }) as string;
+                // Only return if parsing actually produced HTML (not just the same text)
+                if (parsed && parsed.trim() !== trimmed && parsed.includes('<')) {
+                    return parsed;
+                }
+            }
+
+            return null;
+        } catch (error) {
+            console.error('Error parsing markdown:', error);
+            return null;
+        }
+    }, [content]);
 
-    if (hasMarkdown) {
+    // If markdown was parsed, render as HTML with prose styling
+    if (htmlContent) {
         return (
             <div className="message-container">
-                <div className="markdown-content">
-                    <ReactMarkdown
-                        remarkPlugins={[remarkGfm]}
-                        components={{
-                            // Custom styling for code blocks
-                            code: ({ className, children, ...props }: any) => {
-                                const match = /language-(\w+)/.exec(className || '');
-                                const isInline = !className?.includes('language-');
-                                return !isInline ? (
-                                    <div className="code-block-container">
-                                        <div className="code-block-header">{match?.[1] || 'code'}</div>
-                                        <div className="code-block-content">
-                                            <pre className="text-sm text-gray-900 font-mono leading-relaxed whitespace-pre-wrap">
-                                                <code className={className} {...props}>
-                                                    {children}
-                                                </code>
-                                            </pre>
-                                        </div>
-                                    </div>
-                                ) : (
-                                    <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}
-                                    </code>
-                                );
-                            },
-                            // Custom styling for headings
-                            h1: ({ children, ...props }) => (
-                                <h1 className="text-xl font-bold text-gray-900 mb-3" {...props}>
-                                    {children}
-                                </h1>
-                            ),
-                            h2: ({ children, ...props }) => (
-                                <h2 className="text-lg font-semibold text-gray-800 mb-2" {...props}>
-                                    {children}
-                                </h2>
-                            ),
-                            h3: ({ children, ...props }) => (
-                                <h3 className="text-base font-medium text-gray-700 mb-2" {...props}>
-                                    {children}
-                                </h3>
-                            ),
-                            // Custom styling for lists
-                            ul: ({ children, ...props }) => (
-                                <ul className="space-y-1" {...props}>
-                                    {children}
-                                </ul>
-                            ),
-                            ol: ({ children, ...props }) => (
-                                <ol className="space-y-1" {...props}>
-                                    {children}
-                                </ol>
-                            ),
-                            li: ({ children, ...props }) => (
-                                <li className="text-gray-700 leading-relaxed" {...props}>
-                                    {children}
-                                </li>
-                            ),
-                            // Custom styling for blockquotes
-                            blockquote: ({ children, ...props }) => (
-                                <blockquote
-                                    className="border-l-4 border-blue-400 pl-3 py-2 bg-blue-50 rounded-r-md my-3"
-                                    {...props}
-                                >
-                                    {children}
-                                </blockquote>
-                            ),
-                            // Custom styling for tables
-                            table: ({ children, ...props }) => (
-                                <div className="overflow-x-auto my-3">
-                                    <table
-                                        className="min-w-full border border-gray-200 rounded-md overflow-hidden"
-                                        {...props}
-                                    >
-                                        {children}
-                                    </table>
-                                </div>
-                            ),
-                            th: ({ children, ...props }) => (
-                                <th
-                                    className="px-3 py-2 text-left font-medium text-gray-700 border border-gray-200"
-                                    {...props}
-                                >
-                                    {children}
-                                </th>
-                            ),
-                            td: ({ children, ...props }) => (
-                                <td className="px-3 py-2 border border-gray-200 text-gray-700" {...props}>
-                                    {children}
-                                </td>
-                            ),
-                            // Custom styling for task lists (from remark-gfm)
-                            input: ({ checked, ...props }: any) => (
-                                <input
-                                    type="checkbox"
-                                    checked={checked}
-                                    readOnly
-                                    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 }) => (
-                                <del className="text-gray-500 line-through" {...props}>
-                                    {children}
-                                </del>
-                            ),
-                        }}
-                    >
-                        {content}
-                    </ReactMarkdown>
-                </div>
+                <div
+                    className="text-sm prose prose-sm max-w-none leading-relaxed break-words 
+                        prose-p:my-2 prose-p:text-gray-700
+                        prose-pre:my-2 prose-pre:bg-gray-50 prose-pre:border prose-pre:border-gray-200 prose-pre:rounded prose-pre:p-3
+                        prose-ul:my-2 prose-ol:my-2 
+                        prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:overflow-x-auto
+                        prose-code:break-words prose-code:bg-gray-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:font-mono
+                        prose-headings:font-semibold prose-headings:text-gray-900 prose-headings:mt-4 prose-headings:mb-2
+                        prose-h1:text-2xl prose-h1:border-b prose-h1:border-gray-200 prose-h1:pb-2
+                        prose-h2:text-xl prose-h2:border-b prose-h2:border-gray-200 prose-h2:pb-1
+                        prose-h3:text-lg
+                        prose-h4:text-base
+                        prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
+                        prose-strong:font-semibold prose-strong:text-gray-900
+                        prose-em:text-gray-600
+                        prose-blockquote:border-l-4 prose-blockquote:border-blue-400 prose-blockquote:pl-4 prose-blockquote:py-2 prose-blockquote:bg-blue-50 prose-blockquote:rounded-r-md prose-blockquote:my-3 prose-blockquote:italic
+                        prose-table:w-full prose-table:border prose-table:border-gray-200 prose-table:rounded-md prose-table:my-4
+                        prose-th:px-3 prose-th:py-2 prose-th:text-left prose-th:font-semibold prose-th:bg-gray-50 prose-th:border prose-th:border-gray-200
+                        prose-td:px-3 prose-td:py-2 prose-td:border prose-td:border-gray-200 prose-td:text-gray-700
+                        prose-li:my-1 prose-li:text-gray-700
+                        prose-hr:my-4 prose-hr:border-gray-200"
+                    dangerouslySetInnerHTML={{ __html: htmlContent }}
+                />
             </div>
         );
     }
@@ -865,7 +861,7 @@ const FormattedMessageContent: React.FC<{ content: string }> = ({ content }) =>
     // For plain text content
     return (
         <div className="message-container">
-            <p className="text-gray-700 leading-relaxed whitespace-pre-wrap">{content}</p>
+            <p className="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap break-words">{content}</p>
         </div>
     );
 };
@@ -1199,6 +1195,8 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
                             {(() => {
                                 const contentType = detectContentType(message.message);
 
+                                // Markdown and text both go through FormattedMessageContent
+                                // which will intelligently detect and render markdown
                                 if (contentType === 'code') {
                                     return <CodeFormatter content={message.message} />;
                                 } else if (contentType === 'html') {
@@ -1211,6 +1209,8 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
                                         />
                                     );
                                 } else {
+                                    // Handle both 'markdown' and 'text' - FormattedMessageContent
+                                    // will detect markdown patterns and render accordingly
                                     return <FormattedMessageContent content={message.message} />;
                                 }
                             })()}

package/src/container/TestInboxWithAiLoader.tsx

@@ -1,11 +1,75 @@
-import React from 'react';
+import * as React from 'react';
 import InboxWithAiLoader from './InboxWithAiLoader';
 import { useParams } from '@remix-run/react';
+import { useReCreateSandboxEnvironmentMutation } from 'common/graphql';
+import { usePersistentModelConfig } from '../hooks/usePersistentModelConfig';
 const TestInboxWithAiLoaderOutlet = () => {
-    const { orgName } = useParams();
-    const handleRecreateSandbox = async (messageId: string) => {
-        console.log('recreateSandbox', messageId);
-    };
+    const params = useParams<{ orgName: string }>();
+    const orgName = params.orgName as string;
+    const { modelConfig } = usePersistentModelConfig();
+
+    const [reCreateSandboxEnvironment] = useReCreateSandboxEnvironmentMutation();
+
+    // Track active recreation calls to prevent duplicates
+    const activeRecreationsRef = React.useRef<Map<string, Promise<any>>>(new Map());
+    // Track last recreation time to add debounce
+    const lastRecreationTimeRef = React.useRef<Map<string, number>>(new Map());
+
+    const handleRecreateSandbox = React.useCallback(
+        async (postId: string) => {
+            console.log('🔄 handleRecreateSandbox called for postId:', postId);
+
+            // Check if we're already recreating this postId
+            const existingPromise = activeRecreationsRef.current.get(postId);
+            if (existingPromise) {
+                console.log('⏭️ Already recreating sandbox for postId:', postId, '- waiting for existing call');
+                try {
+                    return await existingPromise;
+                } catch (error) {
+                    console.log('⚠️ Existing recreation call failed, will retry:', error);
+                    activeRecreationsRef.current.delete(postId);
+                }
+            }
+
+            // Debounce: If we just recreated this postId recently (within 2 seconds), skip
+            const lastRecreationTime = lastRecreationTimeRef.current.get(postId);
+            const now = Date.now();
+            if (lastRecreationTime && now - lastRecreationTime < 2000) {
+                console.log('⏭️ Skipping recreation - too soon after last recreation:', {
+                    postId,
+                    timeSinceLastRecreation: now - lastRecreationTime,
+                });
+                return { data: { reCreateSandboxEnvironment: { success: true, message: 'Skipped - duplicate call' } } };
+            }
+
+            // Update last recreation time
+            lastRecreationTimeRef.current.set(postId, now);
+
+            // Create the mutation promise
+            const mutationPromise = (async () => {
+                try {
+                    console.log('📞 Calling reCreateSandboxEnvironment mutation for postId:', postId);
+                    const response = await reCreateSandboxEnvironment({
+                        variables: {
+                            postId: postId,
+                            metadata: modelConfig?.metadata,
+                        },
+                    });
+                    console.log('✅ reCreateSandboxEnvironment mutation completed:', response);
+                    return response;
+                } finally {
+                    // Clean up the promise reference when done
+                    activeRecreationsRef.current.delete(postId);
+                }
+            })();
+
+            // Store the promise IMMEDIATELY (synchronously) before any async work
+            activeRecreationsRef.current.set(postId, mutationPromise);
+
+            return await mutationPromise;
+        },
+        [reCreateSandboxEnvironment, modelConfig?.metadata],
+    );
     return (
         <InboxWithAiLoader
             orgName={orgName}