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

package/lib/components/messages-container-ui/ModernMessageGroup.js

@@ -1,4 +1,4 @@
-import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {Slot}from'@common-stack/components-pro';import {AiAgentMessageRole}from'common';import {format,differenceInMinutes}from'date-fns';import {marked}from'marked';import React,{useMemo,useEffect}from'react';import ReactMarkdown from'react-markdown';import remarkBreaks from'remark-breaks';import remarkGfm from'remark-gfm';import {MessengerSlotFillNameEnum}from'./messenger-slot-fill-name-enum.js';import {FilesList}from'./FilesList.js';import {ErrorFixCard}from'./ErrorFixCard.js';// Configure marked for better markdown rendering
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {Slot}from'@common-stack/components-pro';import {AiAgentMessageRole}from'common';import {format,differenceInMinutes}from'date-fns';import {marked}from'marked';import React,{useMemo,useEffect,useState}from'react';import ReactMarkdown from'react-markdown';import remarkBreaks from'remark-breaks';import remarkGfm from'remark-gfm';import {MessengerSlotFillNameEnum}from'./messenger-slot-fill-name-enum.js';import {FilesList}from'./FilesList.js';import {ErrorFixCard}from'./ErrorFixCard.js';// Configure marked for better markdown rendering
 marked.setOptions({
   breaks: true,
   // Convert line breaks to <br>
@@ -14,6 +14,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) {
   return [ASSISTANT_RESPONSE_MARKDOWN_CLASS, innerClassName].filter(Boolean).join(' ');
 }
@@ -37,15 +40,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 {
@@ -347,6 +350,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;
@@ -356,338 +368,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;
@@ -709,38 +389,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
 const useInjectStyles = () => {
@@ -1185,7 +833,7 @@ const CodeFormatter = ({
         }
         // Regular text content
         return jsx("div", {
-          className: `${variant === 'user' ? USER_MESSAGE_TEXT_SIZE_CLASS : 'text-sm'} ${variant === 'user' ? planMode ? 'text-primary-foreground' : 'text-gray-900' : 'text-gray-700'} leading-relaxed whitespace-pre-wrap break-words`,
+          className: `${variant === 'user' ? USER_MESSAGE_TEXT_SIZE_CLASS : 'text-sm'} ${variant === 'user' ? 'text-foreground' : 'text-gray-700'} leading-relaxed whitespace-pre-wrap break-words`,
           children: section.trim()
         }, index);
       })
@@ -1262,52 +910,52 @@ const FormattedMessageContent = ({
       };
     }
   }, [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
@@ -1352,24 +1000,24 @@ const FormattedMessageContent = ({
       blockquote: ({
         children
       }) => isUserVariant ? jsx("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: children
       }) : jsx("blockquote", {
         children: children
       }),
       hr: () => isUserVariant ? jsx("hr", {
-        className: "my-4 border-gray-200"
+        className: "my-4 border-border"
       }) : jsx("hr", {}),
       ul: ({
         children
       }) => jsx("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',
+        className: isUserVariant ? `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',
         children: children
       }),
       ol: ({
         children
       }) => jsx("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',
+        className: isUserVariant ? `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',
         children: children
       }),
       li: ({
@@ -1393,7 +1041,7 @@ const FormattedMessageContent = ({
         children,
         ...props
       }) => isUserVariant ? jsx("div", {
-        className: "overflow-x-auto my-4 w-full rounded-md border border-gray-200",
+        className: "overflow-x-auto my-4 w-full rounded-md border border-border",
         children: jsx("table", {
           className: "w-full text-sm",
           ...props,
@@ -1409,7 +1057,7 @@ const FormattedMessageContent = ({
       thead: ({
         children
       }) => isUserVariant ? jsx("thead", {
-        className: "bg-gray-50 text-left",
+        className: "bg-muted text-left",
         children: children
       }) : jsx("thead", {
         children: children
@@ -1463,7 +1111,7 @@ const FormattedMessageContent = ({
           });
         }
         return jsx("code", {
-          className: isUserVariant ? `rounded px-1.5 py-0.5 text-sm font-mono bg-gray-50 break-words ${className || ''}` : `llm-inline-code break-words ${className || ''}`,
+          className: isUserVariant ? `rounded px-1.5 py-0.5 text-sm font-mono bg-muted break-words ${className || ''}` : `llm-inline-code break-words ${className || ''}`,
           ...rest,
           children: children
         });
@@ -1514,7 +1162,7 @@ const FormattedMessageContent = ({
   }
   // For plain text content
   return variant === 'user' ? jsx("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`,
     children: content
   }) : jsx(AssistantResponseWrapper, {
     children: jsx("div", {
@@ -1659,9 +1307,12 @@ const ModernMessageBubble = ({
   const handleClick = () => {
     onMessageClick?.(message);
   };
+  const [expanded, setExpanded] = useState(false);
   const isAssistantRole = message?.propsConfiguration?.contents?.role === AiAgentMessageRole.Assistant;
   const messageMode = message?.propsConfiguration?.contents?.mode ?? message?.propsConfiguration?.content?.mode ?? message?.props?.mode;
   const isPlanMode = messageMode === 'plan';
+  const isLongUserMessage = !isAssistantRole && (message?.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 = message.author?.givenName && message.author?.familyName ? `${message.author.givenName} ${message.author.familyName}` : message.author?.username || 'You';
@@ -1670,23 +1321,26 @@ const ModernMessageBubble = ({
       children: jsxs("div", {
         className: "flex items-start justify-end gap-2",
         children: [jsxs("div", {
-          className: "flex flex-col items-end max-w-[85%]",
+          className: "flex flex-col items-end max-w-[85%] min-w-0",
           children: [showAuthorName && jsx("div", {
             className: "flex items-end space-x-2 mb-0.5",
             children: jsx("span", {
-              className: "text-sm font-semibold text-gray-900",
+              className: "text-sm font-semibold text-foreground",
               children: authorName
             })
           }), jsxs("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 '}`,
+            className: `${isAssistantRole ? 'text-sm' : USER_MESSAGE_TEXT_SIZE_CLASS} ${isAssistantRole ? '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?.message || ''),
             lang: detectLanguageTag(message?.message || ''),
-            children: [message.message && jsx("div", {
-              className: "max-w-none",
-              children: (() => {
+            children: [message.message && jsxs("div", {
+              className: `max-w-none ${isCollapsed ? 'relative overflow-hidden' : ''}`,
+              style: isCollapsed ? {
+                maxHeight: USER_MESSAGE_COLLAPSED_MAX_HEIGHT
+              } : undefined,
+              children: [isCollapsed && jsx("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);
                 if (contentType === 'code') {
                   return jsx(CodeFormatter, {
@@ -1707,7 +1361,7 @@ const ModernMessageBubble = ({
                     });
                   }
                   return jsx("div", {
-                    className: isPlanMode ? '!text-primary-foreground html-content' : 'text-gray-900 html-content',
+                    className: "text-foreground html-content",
                     dangerouslySetInnerHTML: {
                       __html: prettifyHtmlContent(sanitizeHtml(message.message))
                     }
@@ -1720,7 +1374,27 @@ const ModernMessageBubble = ({
                     showCopyDownloadOnCodeBlock: showCopyDownloadOnCodeBlock
                   });
                 }
-              })()
+              })()]
+            }), isLongUserMessage && jsxs("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",
+              children: [expanded ? 'Show less' : 'Show more', jsx("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": true,
+                children: jsx("path", {
+                  d: "M6 9l6 6 6-6"
+                })
+              })]
             }), tryExtractBuilderBlocks(message?.message)?.length ? jsx("div", {
               className: "mt-2",
               children: jsx(BuilderLikeRenderer, {
@@ -1738,7 +1412,7 @@ const ModernMessageBubble = ({
                 files: message.files.data
               })
             }), showTimestamp ? jsx("div", {
-              className: `text-[10px] mt-1 text-right ${isAssistantRole ? 'text-gray-500' : isPlanMode ? 'text-primary-foreground/80' : 'text-gray-500'}`,
+              className: "text-[10px] mt-1 text-right text-muted-foreground",
               children: formatTime(message.createdAt)
             }) : null]
           })]