@vertesia/ui 1.6.0-dev.20261008.064737Z → 1.6.0-dev.20261009.095813Z

package/lib/features/agent/chat/ModernAgentOutput/AllMessagesMixed.js

@@ -14,6 +14,7 @@ import { ThinkingMessages } from '../WaitingMessages';
 import { formatWorkstreamName, getWorkstreamActivityDetails, getWorkstreamDisplayName, getWorkstreamLaunchDetails, } from '../workstreams.js';
 import { createAgentMarkdownAnchor } from './AgentMarkdownAnchor';
 import { AttachmentPreviewList, parseUserMessageAttachments } from './AttachmentPreview';
+import { agentMarkdownStyles } from './agentMarkdownStyles.js';
 import BatchProgressPanel from './BatchProgressPanel';
 import { AGENT_LINE_CLAMP_CLASS, AGENT_PROSE_CLASS as SUMMARY_PROSE_CLASS, AGENT_COLLAPSE_LINES as SUMMARY_THOUGHT_COLLAPSE_LINES, AGENT_COLLAPSE_THRESHOLD as SUMMARY_THOUGHT_COLLAPSE_THRESHOLD, } from './CollapsibleAgentMarkdown.js';
 import { getMessageDeliveryStatus, MessageDeliveryStatus } from './MessageDeliveryStatus';
@@ -1774,259 +1775,7 @@ function AllMessagesMixedComponent({ messages, workstreamSourceMessages, bottomR
     }, [workstreamSourceSorted]);
     return (_jsxs("div", { ref: containerRef, 
         // biome-ignore lint/a11y/noNoninteractiveTabindex: scrollable message log needs to accept keyboard focus for arrow-key navigation
-        tabIndex: 0, className: "flex-1 min-h-0 h-full w-full max-w-full overflow-y-auto overflow-x-hidden px-1.5 sm:px-2.5 lg:px-3 flex flex-col relative focus:outline-none", "data-testid": "all-messages-mixed", "data-message-count": messages.length, "data-streaming-count": streamingMessages.size, "data-view-mode": viewMode, children: [_jsx("style", { children: `
-                /* Better vertical rhythm for markdown */
-                .vprose > * + * {
-                    margin-top: 0.625rem;
-                }
-                .vprose > h1 + *,
-                .vprose > h2 + *,
-                .vprose > h3 + * {
-                    margin-top: 0.375rem;
-                }
-                /* Tables should read like part of the conversation, not a separate app grid. */
-                .vprose table {
-                    margin-top: 0.875rem;
-                    margin-bottom: 0.875rem;
-                    border-collapse: collapse;
-                    width: 100%;
-                    background: transparent;
-                }
-                .vprose th,
-                .vprose td {
-                    padding: 0.5rem 0.625rem;
-                    border: 0;
-                    border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
-                    background: transparent;
-                    text-align: left;
-                }
-                .vprose thead th {
-                    background: transparent;
-                    font-weight: 600;
-                    color: var(--muted);
-                    font-size: 0.75rem;
-                    text-transform: none;
-                    letter-spacing: 0;
-                }
-                .vprose tbody tr:hover {
-                    background: transparent;
-                }
-                /* Dark mode table styles */
-                .dark .vprose th,
-                .dark .vprose td {
-                    border-color: color-mix(in oklch, var(--border) 70%, transparent);
-                }
-                .dark .vprose thead th {
-                    background: transparent;
-                    color: var(--muted);
-                }
-                .dark .vprose tbody tr:hover {
-                    background: transparent;
-                }
-                /* Horizontal rules as section dividers */
-                .vprose hr {
-                    margin-top: 1rem;
-                    margin-bottom: 1rem;
-                    border-color: var(--border);
-                }
-                /* Better blockquote styling */
-                .vprose blockquote {
-                    margin-top: 0.875rem;
-                    margin-bottom: 0.875rem;
-                    padding-left: 1rem;
-                    border-left-width: 3px;
-                    border-left-color: var(--border);
-                    color: var(--muted);
-                }
-                /* Code blocks */
-                .vprose pre {
-                    margin-top: 0.75rem;
-                    margin-bottom: 0.75rem;
-                    padding: 0.75rem;
-                    border-radius: 0.5rem;
-                    overflow-x: auto;
-                    background-color: var(--muted-background);
-                    color: var(--foreground);
-                }
-                .vprose pre code {
-                    color: inherit;
-                }
-                .dark .vprose pre {
-                    color: var(--foreground);
-                }
-
-                /* Summary chat markdown: keep structure, but match the app's quieter conversation surface. */
-                .agent-markdown {
-                    color: color-mix(in oklch, var(--foreground) 78%, transparent);
-                    font-size: 0.875rem;
-                    line-height: 1.625;
-                    overflow-x: auto;
-                }
-                .agent-markdown > * + * {
-                    margin-top: 0.65rem;
-                }
-                .agent-markdown p {
-                    margin-top: 0.5rem;
-                    margin-bottom: 0.5rem;
-                }
-                .agent-markdown h1,
-                .agent-markdown h2,
-                .agent-markdown h3,
-                .agent-markdown h4 {
-                    margin-top: 1.2rem;
-                    margin-bottom: 0.45rem;
-                    color: var(--foreground);
-                    font-weight: 650;
-                    letter-spacing: 0;
-                    line-height: 1.3;
-                }
-                .agent-markdown h1 {
-                    font-size: 1.2rem;
-                }
-                .agent-markdown h2 {
-                    font-size: 1.05rem;
-                }
-                .agent-markdown h3,
-                .agent-markdown h4 {
-                    font-size: 0.95rem;
-                }
-                .agent-markdown h1:first-child,
-                .agent-markdown h2:first-child,
-                .agent-markdown h3:first-child,
-                .agent-markdown h4:first-child {
-                    margin-top: 0;
-                }
-                .agent-markdown hr {
-                    margin: 1.15rem 0;
-                    border: 0;
-                    border-top: 1px solid var(--border);
-                    opacity: 0.65;
-                }
-                .agent-markdown ul,
-                .agent-markdown ol {
-                    margin-top: 0.55rem;
-                    margin-bottom: 0.55rem;
-                    padding-left: 1.25rem;
-                }
-                .agent-markdown li {
-                    margin-top: 0.2rem;
-                    margin-bottom: 0.2rem;
-                    padding-left: 0.1rem;
-                    color: inherit;
-                }
-                .agent-markdown li::marker {
-                    color: var(--muted);
-                }
-                .agent-markdown strong {
-                    color: var(--foreground);
-                    font-weight: 600;
-                }
-                .agent-markdown em {
-                    color: color-mix(in oklch, var(--foreground) 72%, transparent);
-                }
-                .agent-markdown a {
-                    color: var(--foreground);
-                    text-decoration-color: var(--muted);
-                    text-underline-offset: 3px;
-                }
-                .agent-markdown blockquote {
-                    margin-top: 0.85rem;
-                    margin-bottom: 0.85rem;
-                    padding-left: 0.875rem;
-                    border-left: 2px solid var(--border);
-                    color: var(--muted);
-                    font-style: normal;
-                }
-                .agent-markdown :not(pre) > code {
-                    border: 1px solid var(--border);
-                    border-radius: 0.375rem;
-                    background: var(--muted);
-                    color: var(--foreground);
-                    padding: 0.1rem 0.35rem;
-                    font-size: 0.8125em;
-                    font-weight: 500;
-                }
-                .agent-markdown pre {
-                    margin-top: 0.85rem;
-                    margin-bottom: 0.85rem;
-                    max-height: 32rem;
-                    overflow: auto;
-                    border: 1px solid var(--border);
-                    border-radius: 0.75rem;
-                    background: var(--muted);
-                    color: var(--foreground);
-                    padding: 0.875rem;
-                    font-size: 0.8125rem;
-                    line-height: 1.55;
-                }
-                .agent-markdown pre code {
-                    border: 0;
-                    background: transparent;
-                    color: inherit;
-                    padding: 0;
-                    font-size: inherit;
-                }
-                .agent-markdown table {
-                    display: table;
-                    width: 100%;
-                    max-width: 100%;
-                    margin: 0.9rem 0 1rem;
-                    border: 0;
-                    border-collapse: collapse;
-                    border-spacing: 0;
-                    font-size: 0.8125rem;
-                    table-layout: fixed;
-                    background: transparent;
-                }
-                .agent-markdown thead {
-                    background: transparent;
-                }
-                .agent-markdown th,
-                .agent-markdown td {
-                    border: 0;
-                    border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
-                    background: transparent;
-                    padding: 0.55rem 0.75rem;
-                    text-align: left;
-                    vertical-align: top;
-                    overflow-wrap: anywhere;
-                    word-break: normal;
-                    white-space: normal;
-                }
-                .agent-markdown th {
-                    color: var(--muted);
-                    font-size: 0.75rem;
-                    font-weight: 600;
-                    letter-spacing: 0;
-                    text-transform: none;
-                    white-space: nowrap;
-                }
-                .agent-markdown td {
-                    color: inherit;
-                }
-                .agent-markdown th + th,
-                .agent-markdown td + td {
-                    padding-inline-start: 1.75rem;
-                }
-                .agent-markdown th:first-child,
-                .agent-markdown td:first-child {
-                    min-width: 0;
-                    width: auto;
-                    white-space: normal;
-                }
-                .agent-markdown col {
-                    width: var(--agent-markdown-table-column-width);
-                }
-                .agent-markdown tr:last-child td {
-                    border-bottom: 0;
-                }
-                .agent-markdown tbody tr:nth-child(even) {
-                    background: transparent;
-                }
-                .agent-markdown tbody tr:hover {
-                    background: transparent;
-                }
-            ` }), viewMode === 'stacked' && (_jsx("div", { className: cn('sticky top-0 z-10', hideWorkstreamTabs && 'hidden'), children: _jsx(WorkstreamTabs, { workstreams: workstreams, activeWorkstream: activeWorkstream, onSelectWorkstream: handleSelectWorkstream, count: workstreamCounts, completionStatus: workstreamCompletionStatus }) })), isSummaryView && activeWorkstream !== 'all' && activeWorkstreamName && (_jsx("div", { className: "sticky top-0 z-20 -mx-2 bg-background/95 px-2 pb-2 pt-1 backdrop-blur sm:-mx-4 sm:px-4", children: _jsxs("div", { className: "mx-auto flex w-full max-w-3xl items-center gap-2 border-b border-border/70 pb-3", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-8 shrink-0 text-muted hover:text-foreground", title: t('agent.backToMainAgent'), "aria-label": t('agent.backToMainAgent'), onClick: handleShowMainAgentChat, children: _jsx(ArrowLeft, { className: "size-4", "aria-hidden": "true" }) }), _jsx("div", { className: "min-w-0 flex-1 truncate text-sm font-medium text-foreground", children: activeWorkstreamName })] }) })), displayMessages.length === 0 &&
+        tabIndex: 0, className: "flex-1 min-h-0 h-full w-full max-w-full overflow-y-auto overflow-x-hidden px-1.5 sm:px-2.5 lg:px-3 flex flex-col relative focus:outline-none", "data-testid": "all-messages-mixed", "data-message-count": messages.length, "data-streaming-count": streamingMessages.size, "data-view-mode": viewMode, children: [_jsx("style", { children: agentMarkdownStyles }), viewMode === 'stacked' && (_jsx("div", { className: cn('sticky top-0 z-10', hideWorkstreamTabs && 'hidden'), children: _jsx(WorkstreamTabs, { workstreams: workstreams, activeWorkstream: activeWorkstream, onSelectWorkstream: handleSelectWorkstream, count: workstreamCounts, completionStatus: workstreamCompletionStatus }) })), isSummaryView && activeWorkstream !== 'all' && activeWorkstreamName && (_jsx("div", { className: "sticky top-0 z-20 -mx-2 bg-background/95 px-2 pb-2 pt-1 backdrop-blur sm:-mx-4 sm:px-4", children: _jsxs("div", { className: "mx-auto flex w-full max-w-3xl items-center gap-2 border-b border-border/70 pb-3", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-8 shrink-0 text-muted hover:text-foreground", title: t('agent.backToMainAgent'), "aria-label": t('agent.backToMainAgent'), onClick: handleShowMainAgentChat, children: _jsx(ArrowLeft, { className: "size-4", "aria-hidden": "true" }) }), _jsx("div", { className: "min-w-0 flex-1 truncate text-sm font-medium text-foreground", children: activeWorkstreamName })] }) })), displayMessages.length === 0 &&
                 incompleteStreaming.length === 0 &&
                 !hasRenderableInitialRequest &&
                 !(isSummaryView && showActivityFallback) ? (activeWorkstream === 'all' && isAgentWorking ? (_jsx("div", { className: "flex-1 px-2 py-6 sm:px-4", children: _jsx(InitialRequestWaitingCard, { label: t('agent.preparing'), timestamp: fallbackWorkingStartedAtRef.current, className: workingIndicatorClassName }) })) : (_jsx("div", { className: "flex items-center justify-center h-full text-center py-8", children: _jsx("div", { className: "flex items-center px-3 py-2 text-sm text-muted", children: activeWorkstream === 'all'