@admin-layout/tailwind-chat-pro 12.2.4-alpha.86 → 12.2.4-alpha.88

package/src/components/messages-container-ui/ModernMessageGroup.tsx

@@ -2,7 +2,7 @@ import { Slot } from '@common-stack/components-pro';
 import { AiAgentMessageRole, IAuthUser, IPost } from 'common';
 import { differenceInMinutes, format } from 'date-fns';
 import { marked } from 'marked';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
@@ -24,6 +24,9 @@ const ASSISTANT_RESPONSE_BUBBLE_CLASS = 'llm-response__bubble';
 const ASSISTANT_RESPONSE_MARKDOWN_CLASS = 'llm-response__markdown';
 const USER_MESSAGE_TEXT_SIZE_CLASS = 'text-base';
 const USER_MESSAGE_PROSE_SIZE_CLASS = 'prose-base';
+/** Pasted queries longer than this collapse behind a "Show more" toggle. */
+const USER_MESSAGE_COLLAPSE_CHAR_THRESHOLD = 600;
+const USER_MESSAGE_COLLAPSED_MAX_HEIGHT = 220;
 
 function getAssistantResponseClasses(innerClassName?: string): string {
     return [ASSISTANT_RESPONSE_MARKDOWN_CLASS, innerClassName].filter(Boolean).join(' ');
@@ -52,15 +55,15 @@ const htmlContentStyles = `
     .html-content {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
         line-height: 1.6;
-        color: #374151;
+        color: inherit;
     }
-    
+
     .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;
+        color: inherit;
     }
     
     .html-content h1 {
@@ -362,6 +365,15 @@ const htmlContentStyles = `
         box-shadow: none !important;
     }
 
+    /* Safety net: long unbroken tokens (file paths, CSS selectors, URLs) inside a
+       pasted user query must never push the bubble past its own width — wrap
+       anywhere rather than overflow the card. */
+    .user-message,
+    .user-message * {
+        max-width: 100%;
+        overflow-wrap: anywhere;
+    }
+
     .assistant-message-container {
         background: transparent;
         padding-top: 0;
@@ -371,338 +383,6 @@ const htmlContentStyles = `
         box-shadow: none;
     }
 
-    .assistant-html-content {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-        line-height: 1.6;
-        color: #374151;
-    }
-
-    .assistant-html-content h1,
-    .assistant-html-content h2,
-    .assistant-html-content h3,
-    .assistant-html-content h4,
-    .assistant-html-content h5,
-    .assistant-html-content h6 {
-        font-weight: 600;
-        line-height: 1.25;
-        color: #111827;
-    }
-
-    .assistant-html-content h1 {
-        font-size: 1.875rem;
-        margin-top: 2rem;
-        margin-bottom: 1rem;
-    }
-
-    .assistant-html-content h2 {
-        font-size: 1.5rem;
-        margin-top: 2rem;
-        margin-bottom: 1rem;
-    }
-
-    .assistant-html-content h3 {
-        font-size: 1.25rem;
-        margin-top: 1.5rem;
-        margin-bottom: 1rem;
-    }
-
-    .assistant-html-content h4 {
-        font-size: 1.125rem;
-        margin-top: 1rem;
-        margin-bottom: 0.5rem;
-    }
-
-    .assistant-html-content p {
-        margin-top: 0;
-        margin-bottom: 1rem;
-        line-height: 1.625;
-        color: #374151;
-    }
-
-    .assistant-html-content ul,
-    .assistant-html-content ol {
-        margin: 1rem 0;
-        padding-left: 1.25rem;
-    }
-
-    .assistant-html-content ul {
-        list-style-type: disc;
-    }
-
-    .assistant-html-content ol {
-        list-style-type: decimal;
-    }
-
-    .assistant-html-content li {
-        margin-bottom: 0.375rem;
-        line-height: 1.625;
-        color: #374151;
-    }
-
-    .assistant-html-content li > ul,
-    .assistant-html-content li > ol {
-        margin-top: 0.375rem;
-        margin-bottom: 0.375rem;
-    }
-
-    .assistant-html-content a {
-        color: #2563eb;
-        text-decoration: none;
-    }
-
-    .assistant-html-content a:hover {
-        color: #1d4ed8;
-        text-decoration: underline;
-        text-underline-offset: 2px;
-    }
-
-    .assistant-html-content strong,
-    .assistant-html-content b {
-        font-weight: 600;
-        color: #111827;
-    }
-
-    .assistant-html-content em,
-    .assistant-html-content i {
-        font-style: italic;
-        color: #4b5563;
-    }
-
-    .assistant-html-content code {
-        background-color: #f3f4f6;
-        padding: 0.25rem 0.5rem;
-        border-radius: 0.375rem;
-        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-        font-size: 0.875rem;
-        color: #dc2626;
-        border: 1px solid #e5e7eb;
-    }
-
-    .assistant-html-content pre {
-        background-color: #f9fafb;
-        padding: 1rem;
-        border-radius: 0.5rem;
-        overflow-x: auto;
-        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-        font-size: 0.875rem;
-        line-height: 1.5;
-        border: 1px solid #e5e7eb;
-        margin: 1.5rem 0;
-    }
-
-    .assistant-html-content pre code {
-        background-color: transparent;
-        padding: 0;
-        border: none;
-        color: #374151;
-        font-size: inherit;
-    }
-
-    .assistant-html-content blockquote {
-        margin: 1.5rem 0;
-        padding: 0 0 0 1rem;
-        border-left: 4px solid #d1d5db;
-        font-style: italic;
-        color: #6b7280;
-        background-color: transparent;
-        border-radius: 0;
-    }
-
-    .assistant-html-content blockquote p {
-        margin-bottom: 0;
-    }
-
-    .assistant-html-content table {
-        border-collapse: collapse;
-        border: 1px solid #e5e7eb;
-        width: 100%;
-        margin: 1rem 0;
-    }
-
-    .assistant-html-content th,
-    .assistant-html-content td {
-        text-align: left;
-        vertical-align: top;
-    }
-
-    .assistant-html-content th {
-        padding: 0.5rem 1rem;
-        background-color: #f9fafb;
-        border: 1px solid #e5e7eb;
-        font-weight: 500;
-        font-size: 0.75rem;
-        letter-spacing: 0.04em;
-        text-transform: uppercase;
-        color: #4b5563;
-    }
-
-    .assistant-html-content td {
-        padding: 0.5rem 1rem;
-        border-top: 1px solid #e5e7eb;
-        color: #374151;
-    }
-
-    .assistant-html-content hr {
-        border: none;
-        border-top: 1px solid #e5e7eb;
-        margin: 2rem 0;
-    }
-    
-    /* Markdown content styling */
-    .markdown-content {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-        line-height: 1.6;
-        color: #374151;
-    }
-    
-    .markdown-content h1 {
-        font-size: 1.5rem;
-        font-weight: 700;
-        margin-top: 1.5rem;
-        margin-bottom: 1rem;
-        color: #111827;
-        padding-bottom: 0.5rem;
-        border-bottom: 2px solid #e5e7eb;
-    }
-    
-    .markdown-content h2 {
-        font-size: 1.25rem;
-        font-weight: 600;
-        margin-top: 1.25rem;
-        margin-bottom: 0.75rem;
-        color: #1f2937;
-        padding-bottom: 0.375rem;
-        border-bottom: 1px solid #e5e7eb;
-    }
-    
-    .markdown-content h3 {
-        font-size: 1.125rem;
-        font-weight: 600;
-        margin-top: 1rem;
-        margin-bottom: 0.5rem;
-        color: #374151;
-    }
-    
-    .markdown-content p {
-        margin-bottom: 0.75rem;
-        line-height: 1.6;
-        color: #4b5563;
-    }
-    
-    .markdown-content ul, .markdown-content ol {
-        margin: 1rem 0;
-        padding-left: 1.5rem;
-    }
-    
-    .markdown-content li {
-        margin-bottom: 0.5rem;
-        line-height: 1.6;
-    }
-    
-    .markdown-content code {
-        background-color: #f3f4f6;
-        padding: 0.125rem 0.375rem;
-        border-radius: 0.25rem;
-        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-        font-size: 0.875rem;
-        color: #dc2626;
-        border: 1px solid #e5e7eb;
-    }
-    
-    .markdown-content pre {
-        color: #1f2937;
-        border-radius: 8px;
-        overflow-x: auto;
-        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-        font-size: 0.875rem;
-        line-height: 1.5;
-        margin: 1rem 0;
-    }
-    
-    .markdown-content pre code {
-        background-color: transparent;
-        padding: 0;
-        border: none;
-        color: #1f2937;
-        font-size: inherit;
-    }
-    
-    .markdown-content blockquote {
-        border-left: 4px solid #3b82f6;
-        background-color: #f8fafc;
-        padding: 1rem;
-        margin: 1rem 0;
-        border-radius: 6px;
-        font-style: italic;
-        color: #475569;
-        border-top: 1px solid #e5e7eb;
-        border-right: 1px solid #e5e7eb;
-        border-bottom: 1px solid #e5e7eb;
-    }
-    
-    .markdown-content table {
-        border-collapse: collapse;
-        border: 1px solid #e5e7eb;
-        width: 100%;
-        margin: 1rem 0;
-        border-radius: 8px;
-        overflow: hidden;
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-    }
-    
-    .markdown-content th {
-        background-color: #f9fafb;
-        color: #374151;
-        font-weight: 600;
-        padding: 0.75rem;
-        text-align: left;
-        border-bottom: 1px solid #e5e7eb;
-        font-size: 0.875rem;
-    }
-    
-    .markdown-content td {
-        border: 1px solid #e5e7eb;
-        padding: 0.75rem;
-        text-align: left;
-        vertical-align: top;
-        background-color: white;
-        font-size: 0.875rem;
-    }
-    
-    .markdown-content tr:nth-child(even) td {
-        background-color: #f9fafb;
-    }
-    
-    .markdown-content tr:hover td {
-        background-color: #f3f4f6;
-    }
-    
-    /* Enhanced list styling */
-    .markdown-content ul li {
-        position: relative;
-        padding-left: 0.5rem;
-    }
-    
-    .markdown-content ul li::before {
-        content: "•";
-        color: #000;
-        font-weight: bold;
-        position: absolute;
-        left: -1rem;
-    }
-    
-    .markdown-content ol li {
-        position: relative;
-        padding-left: 0.5rem;
-    }
-    
-    .markdown-content ol li::before {
-        content: counter(list-item) ".";
-        font-weight: 600;
-        position: absolute;
-        left: -1.5rem;
-    }
-    
     /* Code block container styling */
     .code-block-container {
         background: #ffffff;
@@ -724,38 +404,6 @@ const htmlContentStyles = `
         letter-spacing: 0.05em;
     }
     
-    .code-block-content {
-        padding: 1rem;
-        overflow-x: auto;
-    }
-    
-    /* Enhanced prose styling for markdown content */
-    .prose pre {
-        background-color: #f9fafb;
-        border: 1px solid #e5e7eb;
-        border-radius: 0.5rem;
-        padding: 1rem;
-        overflow-x: auto;
-    }
-    
-    .prose code {
-        background-color: #f3f4f6;
-        padding: 0.125rem 0.375rem;
-        border-radius: 0.25rem;
-        font-size: 0.875rem;
-        border: 1px solid #e5e7eb;
-    }
-    
-    .prose pre code {
-        background-color: transparent;
-        padding: 0;
-        border: none;
-        color:#000;
-    }
-
-    .hover\:bg-gray-100:hover {
-        background-color: transparent !important;
-    }
 `;
 
 // Hook to inject CSS styles
@@ -929,6 +577,9 @@ const getMessageSlotName = (type: string | undefined): string | null => {
     if (t === 'MEDIA') return MessengerSlotFillNameEnum.MEDIA_NAME;
     if (t === 'WORKFLOW') return MessengerSlotFillNameEnum.WORKFLOW_NAME;
     if (t === 'CONNECTOR') return MessengerSlotFillNameEnum.CONNECTOR_NAME;
+    // Shared catch-all card (shopping, design, page/resume, …). Routes type:'generic' to the
+    // registered `generic` Fill (MessageGeneric); without this the generic Fill never mounts.
+    if (t === 'GENERIC') return MessengerSlotFillNameEnum.GENERIC_NAME;
     return null;
 };
 
@@ -1315,11 +966,7 @@ export const CodeFormatter: React.FC<{
                         <div
                             key={index}
                             className={`${variant === 'user' ? USER_MESSAGE_TEXT_SIZE_CLASS : 'text-sm'} ${
-                                variant === 'user'
-                                    ? planMode
-                                        ? 'text-primary-foreground'
-                                        : 'text-gray-900'
-                                    : 'text-gray-700'
+                                variant === 'user' ? 'text-foreground' : 'text-gray-700'
                             } leading-relaxed whitespace-pre-wrap break-words`}
                         >
                             {section.trim()}
@@ -1390,64 +1037,54 @@ export const FormattedMessageContent: React.FC<{
         }
     }, [content]);
 
-    const userMarkdownClasses = `${USER_MESSAGE_TEXT_SIZE_CLASS} prose ${USER_MESSAGE_PROSE_SIZE_CLASS} max-w-none leading-relaxed break-words 
-                        prose-p:my-2 prose-p:text-gray-700
+    const userMarkdownClasses = `${USER_MESSAGE_TEXT_SIZE_CLASS} prose ${USER_MESSAGE_PROSE_SIZE_CLASS} max-w-none leading-relaxed break-words
+                        prose-p:my-2 prose-p:text-foreground
                         prose-pre:my-2 prose-pre:bg-transparent prose-pre:border-0 prose-pre:p-0
-                        prose-ul:my-2 prose-ol:my-2 
-                        prose-code:break-words prose-code:bg-gray-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:font-mono
-                        prose-headings:font-semibold prose-headings:text-gray-900 prose-headings:mt-4 prose-headings:mb-2
-                        prose-h1:text-2xl prose-h1:border-b prose-h1:border-gray-200 prose-h1:pb-2
-                        prose-h2:text-xl prose-h2:border-b prose-h2:border-gray-200 prose-h2:pb-1
+                        prose-ul:my-2 prose-ol:my-2
+                        prose-code:break-words prose-code:bg-muted 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-foreground prose-headings:mt-4 prose-headings:mb-2
+                        prose-h1:text-2xl prose-h1:border-b prose-h1:border-border prose-h1:pb-2
+                        prose-h2:text-xl prose-h2:border-b prose-h2:border-border prose-h2:pb-1
                         prose-h3:text-lg
                         prose-h4:text-base
-                        prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
-                        prose-strong:font-semibold prose-strong:text-gray-900
-                        prose-em:text-gray-600
-                        prose-blockquote:border-l-4 prose-blockquote:border-blue-400 prose-blockquote:pl-4 prose-blockquote:py-2 prose-blockquote:bg-blue-50 prose-blockquote:rounded-r-md prose-blockquote:my-3 prose-blockquote:italic
-                        prose-table:w-full prose-table:border prose-table:border-gray-200 prose-table:rounded-md prose-table:my-4
-                        prose-th:px-3 prose-th:py-2 prose-th:text-left prose-th:font-semibold prose-th:bg-gray-50 prose-th:border prose-th:border-gray-200
-                        prose-td:px-3 prose-td:py-2 prose-td:border prose-td:border-gray-200 prose-td:text-gray-700
-                        prose-li:my-1 prose-li:text-gray-700
-                        prose-hr:my-4 prose-hr:border-gray-200
-                        ${
-                            planMode
-                                ? '!prose-p:text-primary-foreground !prose-li:text-primary-foreground !prose-strong:text-primary-foreground !prose-em:text-primary-foreground !prose-a:text-primary-foreground'
-                                : '!prose-p:text-gray-900 !prose-li:text-gray-900 !prose-strong:text-gray-900 !prose-em:text-gray-700 !prose-a:text-blue-600'
-                        }`;
-
-    const userHtmlClasses = `${USER_MESSAGE_TEXT_SIZE_CLASS} prose ${USER_MESSAGE_PROSE_SIZE_CLASS} max-w-none leading-relaxed break-words 
-                        prose-p:my-2 prose-p:text-gray-700
-                        prose-pre:my-2 prose-pre:bg-gray-50 prose-pre:border prose-pre:border-gray-200 prose-pre:rounded prose-pre:p-3
-                        prose-ul:my-2 prose-ol:my-2 
+                        prose-a:text-foreground prose-a:underline hover:prose-a:text-foreground
+                        prose-strong:font-semibold prose-strong:text-foreground
+                        prose-em:text-muted-foreground
+                        prose-blockquote:border-l-2 prose-blockquote:border-border prose-blockquote:pl-4 prose-blockquote:py-2 prose-blockquote:bg-transparent prose-blockquote:my-3 prose-blockquote:italic prose-blockquote:text-muted-foreground
+                        prose-table:w-full prose-table:border prose-table:border-border 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-muted prose-th:border prose-th:border-border
+                        prose-td:px-3 prose-td:py-2 prose-td:border prose-td:border-border prose-td:text-foreground
+                        prose-li:my-1 prose-li:text-foreground
+                        prose-hr:my-4 prose-hr:border-border
+                        !prose-p:text-foreground !prose-li:text-foreground !prose-strong:text-foreground !prose-em:text-muted-foreground !prose-a:text-foreground`;
+
+    const userHtmlClasses = `${USER_MESSAGE_TEXT_SIZE_CLASS} prose ${USER_MESSAGE_PROSE_SIZE_CLASS} max-w-none leading-relaxed break-words
+                        prose-p:my-2 prose-p:text-foreground
+                        prose-pre:my-2 prose-pre:bg-muted prose-pre:border prose-pre:border-border 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-code:break-words prose-code:bg-muted 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-foreground prose-headings:mt-4 prose-headings:mb-2
+                        prose-h1:text-2xl prose-h1:border-b prose-h1:border-border prose-h1:pb-2
+                        prose-h2:text-xl prose-h2:border-b prose-h2:border-border prose-h2:pb-1
                         prose-h3:text-lg
                         prose-h4:text-base
-                        prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
-                        prose-strong:font-semibold prose-strong:text-gray-900
-                        prose-em:text-gray-600
-                        prose-blockquote:border-l-4 prose-blockquote:border-blue-400 prose-blockquote:pl-4 prose-blockquote:py-2 prose-blockquote:bg-blue-50 prose-blockquote:rounded-r-md prose-blockquote:my-3 prose-blockquote:italic
-                        prose-table:w-full prose-table:border prose-table:border-gray-200 prose-table:rounded-md prose-table:my-4
-                        prose-th:px-3 prose-th:py-2 prose-th:text-left prose-th:font-semibold prose-th:bg-gray-50 prose-th:border prose-th:border-gray-200
-                        prose-td:px-3 prose-td:py-2 prose-td:border prose-td:border-gray-200 prose-td:text-gray-700
-                        prose-li:my-1 prose-li:text-gray-700
-                        prose-hr:my-4 prose-hr:border-gray-200
-                        ${
-                            planMode
-                                ? '!prose-p:text-primary-foreground !prose-li:text-primary-foreground !prose-strong:text-primary-foreground !prose-em:text-primary-foreground !prose-a:text-primary-foreground'
-                                : '!prose-p:text-gray-900 !prose-li:text-gray-900 !prose-strong:text-gray-900 !prose-em:text-gray-700 !prose-a:text-blue-600'
-                        }`;
+                        prose-a:text-foreground prose-a:underline hover:prose-a:text-foreground
+                        prose-strong:font-semibold prose-strong:text-foreground
+                        prose-em:text-muted-foreground
+                        prose-blockquote:border-l-2 prose-blockquote:border-border prose-blockquote:pl-4 prose-blockquote:py-2 prose-blockquote:bg-transparent prose-blockquote:my-3 prose-blockquote:italic prose-blockquote:text-muted-foreground
+                        prose-table:w-full prose-table:border prose-table:border-border 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-muted prose-th:border prose-th:border-border
+                        prose-td:px-3 prose-td:py-2 prose-td:border prose-td:border-border prose-td:text-foreground
+                        prose-li:my-1 prose-li:text-foreground
+                        prose-hr:my-4 prose-hr:border-border
+                        !prose-p:text-foreground !prose-li:text-foreground !prose-strong:text-foreground !prose-em:text-muted-foreground !prose-a:text-foreground`;
 
     const markdownComponents = useMemo(() => {
         const isUserVariant = variant === 'user';
-        const userTextClass = planMode ? 'text-primary-foreground' : 'text-gray-900';
-        const userMutedTextClass = planMode ? 'text-primary-foreground' : 'text-gray-700';
-        const userLinkClass = planMode
-            ? 'text-primary-foreground underline underline-offset-2'
-            : 'text-blue-600 hover:underline underline-offset-2';
+        const userTextClass = 'text-foreground';
+        const userMutedTextClass = 'text-muted-foreground';
+        const userLinkClass = 'text-foreground underline underline-offset-2 hover:text-foreground/80';
 
         return {
             p: ({ children }: { children?: React.ReactNode }) =>
@@ -1483,19 +1120,19 @@ export const FormattedMessageContent: React.FC<{
             blockquote: ({ children }: { children?: React.ReactNode }) =>
                 isUserVariant ? (
                     <blockquote
-                        className={`border-l-4 border-blue-400 pl-4 py-2 bg-blue-50 rounded-r-md my-3 italic ${userMutedTextClass}`}
+                        className={`border-l-2 border-border pl-4 py-2 bg-transparent my-3 italic ${userMutedTextClass}`}
                     >
                         {children}
                     </blockquote>
                 ) : (
                     <blockquote>{children}</blockquote>
                 ),
-            hr: () => (isUserVariant ? <hr className="my-4 border-gray-200" /> : <hr />),
+            hr: () => (isUserVariant ? <hr className="my-4 border-border" /> : <hr />),
             ul: ({ children }: { children?: React.ReactNode }) => (
                 <ul
                     className={
                         isUserVariant
-                            ? `list-disc pl-5 mb-4 space-y-1.5 marker:text-gray-500 [&_ul]:mt-1.5 [&_ol]:mt-1.5 ${userTextClass}`
+                            ? `list-disc pl-5 mb-4 space-y-1.5 marker:text-muted-foreground [&_ul]:mt-1.5 [&_ol]:mt-1.5 ${userTextClass}`
                             : 'list-disc pl-5'
                     }
                 >
@@ -1506,7 +1143,7 @@ export const FormattedMessageContent: React.FC<{
                 <ol
                     className={
                         isUserVariant
-                            ? `list-decimal pl-5 mb-4 space-y-1.5 marker:text-gray-500 [&_ul]:mt-1.5 [&_ol]:mt-1.5 ${userTextClass}`
+                            ? `list-decimal pl-5 mb-4 space-y-1.5 marker:text-muted-foreground [&_ul]:mt-1.5 [&_ol]:mt-1.5 ${userTextClass}`
                             : 'list-decimal pl-5'
                     }
                 >
@@ -1537,7 +1174,7 @@ export const FormattedMessageContent: React.FC<{
                 ...props
             }: React.TableHTMLAttributes<HTMLTableElement> & { children?: React.ReactNode }) =>
                 isUserVariant ? (
-                    <div className="overflow-x-auto my-4 w-full rounded-md border border-gray-200">
+                    <div className="overflow-x-auto my-4 w-full rounded-md border border-border">
                         <table className="w-full text-sm" {...props}>
                             {children}
                         </table>
@@ -1548,7 +1185,7 @@ export const FormattedMessageContent: React.FC<{
                     </div>
                 ),
             thead: ({ children }: { children?: React.ReactNode }) =>
-                isUserVariant ? <thead className="bg-gray-50 text-left">{children}</thead> : <thead>{children}</thead>,
+                isUserVariant ? <thead className="bg-muted text-left">{children}</thead> : <thead>{children}</thead>,
             th: ({ children }: { children?: React.ReactNode }) =>
                 isUserVariant ? (
                     <th className={`px-3 py-2 text-left font-semibold ${userTextClass}`}>{children}</th>
@@ -1587,7 +1224,7 @@ export const FormattedMessageContent: React.FC<{
                     <code
                         className={
                             isUserVariant
-                                ? `rounded px-1.5 py-0.5 text-sm font-mono bg-gray-50 break-words ${className || ''}`
+                                ? `rounded px-1.5 py-0.5 text-sm font-mono bg-muted break-words ${className || ''}`
                                 : `llm-inline-code break-words ${className || ''}`
                         }
                         {...rest}
@@ -1641,9 +1278,7 @@ export const FormattedMessageContent: React.FC<{
     // For plain text content
     return variant === 'user' ? (
         <p
-            className={`${USER_MESSAGE_TEXT_SIZE_CLASS} leading-relaxed whitespace-pre-wrap break-words ${
-                planMode ? 'text-primary-foreground' : 'text-gray-900'
-            }`}
+            className={`${USER_MESSAGE_TEXT_SIZE_CLASS} leading-relaxed whitespace-pre-wrap break-words text-foreground`}
         >
             {content}
         </p>
@@ -1870,6 +1505,7 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
     const handleClick = () => {
         onMessageClick?.(message);
     };
+    const [expanded, setExpanded] = useState(false);
 
     const isAssistantRole = (message as any)?.propsConfiguration?.contents?.role === AiAgentMessageRole.Assistant;
     const messageMode =
@@ -1877,6 +1513,9 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
         (message as any)?.propsConfiguration?.content?.mode ??
         (message as any)?.props?.mode;
     const isPlanMode = messageMode === 'plan';
+    const isLongUserMessage =
+        !isAssistantRole && ((message as any)?.message?.length ?? 0) > USER_MESSAGE_COLLAPSE_CHAR_THRESHOLD;
+    const isCollapsed = isLongUserMessage && !expanded;
     // For user messages, create a right-aligned layout with avatar and name
     if (isOwnMessage) {
         const authorName =
@@ -1887,10 +1526,10 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
         return (
             <div className="py-1 px-1 sm:px-2 -mx-1 sm:-mx-2 group">
                 <div className="flex items-start justify-end gap-2">
-                    <div className="flex flex-col items-end max-w-[85%]">
+                    <div className="flex flex-col items-end max-w-[85%] min-w-0">
                         {showAuthorName && (
                             <div className="flex items-end space-x-2 mb-0.5">
-                                <span className="text-sm font-semibold text-gray-900">{authorName}</span>
+                                <span className="text-sm font-semibold text-foreground">{authorName}</span>
                             </div>
                         )}
 
@@ -1898,18 +1537,21 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
                         <div
                             className={`${isAssistantRole ? 'text-sm' : USER_MESSAGE_TEXT_SIZE_CLASS} ${
                                 isAssistantRole
-                                    ? 'cursor-pointer rounded-2xl border border-gray-200 bg-gray-50 text-gray-900 px-4 py-2.5'
-                                    : // : 'user-message rounded-[22px] rounded-br-[4px] px-4 py-3 bg-primary text-primary-foreground shadow-sm'
-                                      isPlanMode
-                                      ? 'user-message rounded-[22px] rounded-br-[4px] px-4 py-3 bg-primary text-primary-foreground shadow-sm'
-                                      : 'user-message rounded-[22px] rounded-br-[4px] px-4 py-3 '
+                                    ? 'cursor-pointer rounded-2xl border border-border bg-muted text-foreground px-4 py-2.5'
+                                    : 'user-message rounded-[22px] rounded-br-[4px] px-4 py-3 bg-muted text-foreground shadow-sm'
                             }`}
                             onClick={isAssistantRole ? handleClick : undefined}
                             dir={detectTextDirection((message as any)?.message || '')}
                             lang={detectLanguageTag((message as any)?.message || '')}
                         >
                             {message.message && (
-                                <div className="max-w-none">
+                                <div
+                                    className={`max-w-none ${isCollapsed ? 'relative overflow-hidden' : ''}`}
+                                    style={isCollapsed ? { maxHeight: USER_MESSAGE_COLLAPSED_MAX_HEIGHT } : undefined}
+                                >
+                                    {isCollapsed && (
+                                        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-muted to-transparent" />
+                                    )}
                                     {(() => {
                                         const contentType = detectContentType(message.message);
 
@@ -1940,11 +1582,7 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
 
                                             return (
                                                 <div
-                                                    className={
-                                                        isPlanMode
-                                                            ? '!text-primary-foreground html-content'
-                                                            : 'text-gray-900 html-content'
-                                                    }
+                                                    className="text-foreground html-content"
                                                     dangerouslySetInnerHTML={{
                                                         __html: prettifyHtmlContent(sanitizeHtml(message.message)),
                                                     }}
@@ -1964,6 +1602,31 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
                                 </div>
                             )}
 
+                            {isLongUserMessage && (
+                                <button
+                                    type="button"
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        setExpanded((v) => !v);
+                                    }}
+                                    className="mt-1 flex items-center gap-1 text-sm font-medium text-muted-foreground hover:text-foreground"
+                                >
+                                    {expanded ? 'Show less' : 'Show more'}
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        strokeWidth={2}
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        className={`h-3.5 w-3.5 transition-transform ${expanded ? 'rotate-180' : ''}`}
+                                        aria-hidden
+                                    >
+                                        <path d="M6 9l6 6 6-6" />
+                                    </svg>
+                                </button>
+                            )}
+
                             {tryExtractBuilderBlocks((message as any)?.message)?.length ? (
                                 <div className="mt-2">
                                     <BuilderLikeRenderer blocks={tryExtractBuilderBlocks((message as any)?.message)} />
@@ -1982,15 +1645,7 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
                                 </div>
                             )}
                             {showTimestamp ? (
-                                <div
-                                    className={`text-[10px] mt-1 text-right ${
-                                        isAssistantRole
-                                            ? 'text-gray-500'
-                                            : isPlanMode
-                                              ? 'text-primary-foreground/80'
-                                              : 'text-gray-500'
-                                    }`}
-                                >
+                                <div className="text-[10px] mt-1 text-right text-muted-foreground">
                                     {formatTime(message.createdAt)}
                                 </div>
                             ) : null}