@admin-layout/tailwind-chat-pro 12.2.5-alpha.2 → 12.2.5-alpha.20

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

@@ -9,6 +9,8 @@ import remarkGfm from 'remark-gfm';
 import { MessengerSlotFillNameEnum } from './messenger-slot-fill-name-enum';
 import { FilesList } from './FilesList';
 import { ErrorFixCard } from './ErrorFixCard';
+import { useBubbleEntrance } from './useBubbleEntrance';
+import { TABLE_SCROLL_CLASS, TABLE_STYLES, wrapTables } from './markdownTables';
 
 // Configure marked for better markdown rendering
 marked.setOptions({
@@ -50,8 +52,8 @@ export function AssistantResponseWrapper({
     );
 }
 
-// Enhanced CSS styles for HTML content rendering with prettification
-const htmlContentStyles = `
+// Enhanced CSS styles for HTML content rendering with prettification (exported for its tests)
+export const htmlContentStyles = `
     .html-content {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
         line-height: 1.6;
@@ -89,6 +91,7 @@ const htmlContentStyles = `
         --llm-color-code-text: #d96b00;
         --llm-color-code-block-border: #ebeef3;
         --llm-shadow-soft: 0 1px 2px rgba(18, 25, 38, 0.04), 0 10px 32px rgba(18, 25, 38, 0.05);
+        --llm-table-scroll-shadow: rgba(18, 25, 38, 0.14);
         --llm-radius-bubble: 1.5rem;
         --llm-radius-code: 0.85rem;
         --llm-line-height-body: 1.62;
@@ -102,8 +105,11 @@ const htmlContentStyles = `
         background: transparent;
     }
 
+    /* The app's dark mode is a \`dark\` class on <html> (design-pro toggles it); nothing sets
+       data-color-mode, so without \`.dark\` a reply's table stayed a white card on a dark page. */
     .${ASSISTANT_RESPONSE_THEME_CLASS}[data-color-mode='dark'],
-    [data-color-mode='dark'] .${ASSISTANT_RESPONSE_THEME_CLASS} {
+    [data-color-mode='dark'] .${ASSISTANT_RESPONSE_THEME_CLASS},
+    .dark .${ASSISTANT_RESPONSE_THEME_CLASS} {
         --llm-color-bg: #0f1115;
         --llm-color-surface: #171a20;
         --llm-color-surface-2: #1f2530;
@@ -118,6 +124,7 @@ const htmlContentStyles = `
         --llm-color-code-text: #ffb36b;
         --llm-color-code-block-border: #262d39;
         --llm-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.28), 0 14px 36px rgba(0, 0, 0, 0.3);
+        --llm-table-scroll-shadow: rgba(0, 0, 0, 0.55);
     }
 
     .${ASSISTANT_RESPONSE_CLASS} {
@@ -138,7 +145,9 @@ const htmlContentStyles = `
         min-height: 1.75rem;
         border-radius: var(--llm-radius-bubble);
         color: inherit;
-        word-break: break-word;
+        /* Long tokens (paths, URLs) wrap rather than widen the chat. Same behaviour as the
+           legacy \`word-break: break-word\` this replaces; tables opt out (see TABLE_STYLES). */
+        overflow-wrap: anywhere;
     }
 
     .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} {
@@ -303,15 +312,21 @@ const htmlContentStyles = `
         -webkit-box-decoration-break: clone;
     }
 
-    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} table {
-        width: 100%;
+    /* The card is the scroll box around the table, so a table wider than the reply scrolls
+       inside a card that keeps its rounded edges on screen. It is also the size container the
+       narrow-table rule below measures, and so never widens the reply. */
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} .${TABLE_SCROLL_CLASS} {
         margin: 1rem 0 1.1rem;
-        border-collapse: separate;
-        border-spacing: 0;
         border: 1px solid var(--llm-color-border);
         border-radius: 1rem;
-        overflow: hidden;
         box-shadow: var(--llm-shadow-soft);
+        container-type: inline-size;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} table {
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 0;
     }
 
     .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} thead {
@@ -326,6 +341,17 @@ const htmlContentStyles = `
         vertical-align: top;
     }
 
+    /* A column the markdown aligns (\`|---:|\`, \`|:---:|\`) keeps that alignment. */
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} th[align='right'],
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} td[align='right'] {
+        text-align: right;
+    }
+
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} th[align='center'],
+    .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} td[align='center'] {
+        text-align: center;
+    }
+
     .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} th {
         font-size: 0.8rem;
         font-weight: 600;
@@ -354,7 +380,20 @@ const htmlContentStyles = `
             padding: 0.75rem 0.8rem;
         }
     }
-     * we must neutralize it so it doesn't override the pill background/padding.
+
+    /* The same tighter cells in a narrow chat pane on a wide screen, which the viewport query
+       above never sees: the table measures its own card. */
+    @container (max-width: 30rem) {
+        .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} th,
+        .${ASSISTANT_RESPONSE_MARKDOWN_CLASS} td {
+            padding: 0.75rem 0.8rem;
+        }
+    }
+
+    /* The user pill is drawn by .user-message. A shared global class (.message-container, from
+     * @messenger-box/tailwind-ui-inbox) ships its own background and padding, so neutralize it
+     * inside the pill. (This comment had lost its opening, which turned the rule below into an
+     * invalid selector that never applied.)
      */
     .user-message .message-container {
         background: transparent !important;
@@ -373,7 +412,7 @@ const htmlContentStyles = `
         max-width: 100%;
         overflow-wrap: anywhere;
     }
-
+${TABLE_STYLES}
     /* Assistant replies must read as plain text on the page — no card. A shared
        global class (.message-container, from @messenger-box/tailwind-ui-inbox)
        ships its own pill background/padding; neutralize it here the same way the
@@ -584,9 +623,16 @@ 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
+    // Shared catch-all card (design, local services, …). Routes type:'generic' to the
     // registered `generic` Fill (MessageGeneric); without this the generic Fill never mounts.
     if (t === 'GENERIC') return MessengerSlotFillNameEnum.GENERIC_NAME;
+    // Result cards (ai-chat-ext MessageResults). The host routes a parsed `jobs` / `resume` /
+    // `shopping` / `movies` widget to a message of that type; without these the bubble had no
+    // slot for it and the agent's card never appeared - only the prose around it.
+    if (t === 'SHOPPING') return MessengerSlotFillNameEnum.SHOPPING_NAME;
+    if (t === 'MOVIES') return MessengerSlotFillNameEnum.MOVIES_NAME;
+    if (t === 'JOBS') return MessengerSlotFillNameEnum.JOBS_NAME;
+    if (t === 'RESUME') return MessengerSlotFillNameEnum.RESUME_NAME;
     return null;
 };
 
@@ -665,6 +711,7 @@ const prettifyHtmlContent = (htmlContent: string): string => {
     prettified = prettified.replace(/<table>/g, '<table class="html-table">');
     prettified = prettified.replace(/<th>/g, '<th class="html-table-header">');
     prettified = prettified.replace(/<td>/g, '<td class="html-table-cell">');
+    prettified = wrapTables(prettified);
 
     // Add info boxes for certain content patterns
     prettified = prettified.replace(
@@ -1033,7 +1080,7 @@ export const FormattedMessageContent: React.FC<{
                 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 { htmlContent: parsed, markdownSource: trimmed as string };
+                    return { htmlContent: wrapTables(parsed), markdownSource: trimmed as string };
                 }
             }
 
@@ -1181,26 +1228,35 @@ 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-border">
+                    <div className={`${TABLE_SCROLL_CLASS} my-4 w-full rounded-md border border-border`}>
                         <table className="w-full text-sm" {...props}>
                             {children}
                         </table>
                     </div>
                 ) : (
-                    <div className="overflow-x-auto my-4 w-full">
+                    <div className={TABLE_SCROLL_CLASS}>
                         <table {...props}>{children}</table>
                     </div>
                 ),
             thead: ({ children }: { children?: React.ReactNode }) =>
                 isUserVariant ? <thead className="bg-muted text-left">{children}</thead> : <thead>{children}</thead>,
-            th: ({ children }: { children?: React.ReactNode }) =>
+            // `style` carries the column's markdown alignment (`|---:|` is text-align: right).
+            th: ({ children, style }: { children?: React.ReactNode; style?: React.CSSProperties }) =>
                 isUserVariant ? (
-                    <th className={`px-3 py-2 text-left font-semibold ${userTextClass}`}>{children}</th>
+                    <th className={`px-3 py-2 text-left font-semibold ${userTextClass}`} style={style}>
+                        {children}
+                    </th>
                 ) : (
-                    <th>{children}</th>
+                    <th style={style}>{children}</th>
+                ),
+            td: ({ children, style }: { children?: React.ReactNode; style?: React.CSSProperties }) =>
+                isUserVariant ? (
+                    <td className={`px-3 py-2 ${userMutedTextClass}`} style={style}>
+                        {children}
+                    </td>
+                ) : (
+                    <td style={style}>{children}</td>
                 ),
-            td: ({ children }: { children?: React.ReactNode }) =>
-                isUserVariant ? <td className={`px-3 py-2 ${userMutedTextClass}`}>{children}</td> : <td>{children}</td>,
             pre: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
             code: ({ className, children, ...rest }: { className?: string; children?: React.ReactNode }) => {
                 const match = /language-(\w+)/.exec(className || '');
@@ -1343,6 +1399,10 @@ const tryExtractBuilderBlocks = (content?: string): any[] | null => {
     }
 };
 
+/** Shared with the streaming frame so a landing stream doesn't shift. */
+export const assistantFrameClass = (isDesktopView: boolean, isSmallScreen: boolean) =>
+    isDesktopView ? 'mb-4 px-4 py-3' : isSmallScreen ? 'mb-2 px-2 py-1' : 'mb-3 px-3 py-1';
+
 const ModernMessageGroup: React.FC<MessageGroupProps> = ({
     author,
     messages,
@@ -1423,9 +1483,10 @@ const ModernMessageGroup: React.FC<MessageGroupProps> = ({
     // For other messages (non-user), show the traditional group layout
     return (
         <div
-            className={`group transition-all duration-300 ease-in-out ${
-                isDesktopView ? 'mb-4 px-4 py-3' : isSmallScreen ? 'mb-2 px-2 py-1' : 'mb-3 px-3 py-1'
-            } rounded-lg`}
+            className={`group transition-all duration-300 ease-in-out ${assistantFrameClass(
+                isDesktopView,
+                isSmallScreen,
+            )} rounded-lg`}
         >
             <div
                 className={`flex items-start ${
@@ -1523,6 +1584,9 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
     const isLongUserMessage =
         !isAssistantRole && ((message as any)?.message?.length ?? 0) > USER_MESSAGE_COLLAPSE_CHAR_THRESHOLD;
     const isCollapsed = isLongUserMessage && !expanded;
+    const entranceRef = useBubbleEntrance<HTMLDivElement>(
+        isOwnMessage && !isAssistantRole && (message as any)?.props?.animateEntry === true,
+    );
     // For user messages, create a right-aligned layout with avatar and name
     if (isOwnMessage) {
         const authorName =
@@ -1542,6 +1606,7 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
 
                         {/* User message bubble (Image 2) */}
                         <div
+                            ref={entranceRef}
                             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'

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { AiAgentMessageRole, PostTypeEnum } from 'common';
-import type { MessageGroupComponentType, PlanMessage } from './types';
+import type { MessageGroupComponentType, PlanMessage, StreamingRenderOptions } from './types';
 import { DefaultMessageGroup } from './DefaultMessageGroup';
 import { DefaultInputToolBar } from './DefaultInputToolBar';
 
@@ -124,7 +124,7 @@ export interface PlanModeViewProps {
      * Optional: how to render the in-flight streaming assistant content. Defaults to a
      * plain-text bubble. Inject a richer renderer (markdown / code) if desired.
      */
-    renderStreamingContent?: (content: string) => React.ReactNode;
+    renderStreamingContent?: (content: string, opts?: StreamingRenderOptions) => React.ReactNode;
     /**
      * Optional: override how a PlanMessage is mapped to the post shape handed to
      * `MessageGroupComponent`. Defaults to {@link defaultPlanMessageToPost}.
@@ -421,23 +421,31 @@ export function PlanModeView({
                         </div>
                     ))}
 
-                    {streamingContent?.trim() && (
-                        <div className="flex justify-start">
-                            <div
-                                className={clsx(
-                                    'max-w-[85%] w-full rounded-2xl px-4 py-3 text-gray-900',
-                                    ASSISTANT_BUBBLE_BG,
-                                    showMessageBubbleBorder && `border ${BORDER_COLOR}`,
-                                )}
-                            >
-                                <div className="min-w-0 text-[15px] leading-relaxed break-words whitespace-pre-wrap">
-                                    {renderStreamingContent
-                                        ? renderStreamingContent(streamingContent)
-                                        : streamingContent}
+                    {streamingContent?.trim() &&
+                        (renderStreamingContent ? (
+                            // A custom renderer draws the post's own frame; this bubble belongs to the plain-text default.
+                            <div className={clsx('mb-3', postContainerClassName)}>
+                                {renderStreamingContent(streamingContent, {
+                                    isDesktopView,
+                                    isSmallScreen,
+                                    showCopyDownloadOnCodeBlock,
+                                })}
+                            </div>
+                        ) : (
+                            <div className="flex justify-start">
+                                <div
+                                    className={clsx(
+                                        'max-w-[85%] w-full rounded-2xl px-4 py-3 text-gray-900',
+                                        ASSISTANT_BUBBLE_BG,
+                                        showMessageBubbleBorder && `border ${BORDER_COLOR}`,
+                                    )}
+                                >
+                                    <div className="min-w-0 text-[15px] leading-relaxed break-words whitespace-pre-wrap">
+                                        {streamingContent}
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    )}
+                        ))}
 
                     {isLoading && (
                         <div className="flex justify-start">
@@ -450,7 +458,7 @@ export function PlanModeView({
                 </div>
             </div>
             {shouldRenderBottomToolbar && (
-                <div className="border-t border-gray-200 bg-white p-3">{renderToolbar(inputToolbarProps)}</div>
+                <div className="border-t border-border bg-background p-3">{renderToolbar(inputToolbarProps)}</div>
             )}
         </div>
     );

package/src/components/messages-container-ui/__tests__/markdownTables.test.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import { marked } from 'marked';
+import { TABLE_SCROLL_CLASS, TABLE_STYLES, wrapTables } from '../markdownTables';
+import { FormattedMessageContent, htmlContentStyles } from '../ModernMessageGroup';
+
+// The table from the report: in a 520px pane its numbers wrapped mid-digit ("2,00" / "0").
+const BUDGET = [
+    "Here's the budget:",
+    '',
+    '| Category | Mar | Apr |',
+    '|---|---:|---:|',
+    '| Events & Promotions | 2,000 | 3,500 |',
+    '| Email Marketing | 600 | 750 |',
+].join('\n');
+
+/** The declarations of every rule whose selector list includes `selector`. */
+function declarationsFor(css: string, selector: string): string {
+    const rules = css.matchAll(/([^{}]+)\{([^{}]*)\}/g);
+    return [...rules]
+        .filter(([, selectors]) => selectors.split(',').some((s) => s.trim() === selector))
+        .map(([, , body]) => body)
+        .join('\n');
+}
+
+describe('wrapTables', () => {
+    it('puts a markdown table in its own scroll box', () => {
+        const html = wrapTables(marked.parse(BUDGET, { async: false }) as string);
+        expect(html).toMatch(new RegExp(`<div class="${TABLE_SCROLL_CLASS}"><table>[\\s\\S]*</table>\\s*</div>`));
+    });
+
+    it('keeps a table that has attributes, and nested tables, balanced', () => {
+        const html = wrapTables('<table class="x"><tr><td><table><tr><td>1</td></tr></table></td></tr></TABLE>');
+        expect(html.match(/<div class=/g)).toHaveLength(2);
+        expect(html.match(/<\/div>/g)).toHaveLength(2);
+        expect(html.startsWith(`<div class="${TABLE_SCROLL_CLASS}"><table class="x">`)).toBe(true);
+    });
+
+    it('leaves a table written inside a code block alone', () => {
+        const html = marked.parse('```html\n<table><tr><td>1</td></tr></table>\n```', { async: false }) as string;
+        expect(wrapTables(html)).toBe(html);
+    });
+});
+
+describe('FormattedMessageContent tables', () => {
+    for (const showCopyDownloadOnCodeBlock of [false, true]) {
+        const lane = showCopyDownloadOnCodeBlock ? 'react-markdown' : 'marked';
+        for (const variant of ['default', 'user'] as const) {
+            it(`a ${variant} message's table scrolls in its own box (${lane})`, () => {
+                const html = renderToStaticMarkup(
+                    <FormattedMessageContent
+                        content={BUDGET}
+                        variant={variant}
+                        showCopyDownloadOnCodeBlock={showCopyDownloadOnCodeBlock}
+                    />,
+                );
+                expect(html).toMatch(new RegExp(`<div class="${TABLE_SCROLL_CLASS}[^"]*"><table`));
+            });
+        }
+
+        it(`keeps the markdown's column alignment (${lane})`, () => {
+            const html = renderToStaticMarkup(
+                <FormattedMessageContent content={BUDGET} showCopyDownloadOnCodeBlock={showCopyDownloadOnCodeBlock} />,
+            );
+            // marked writes align="right"; react-markdown writes the same as a style.
+            expect(html).toMatch(/<td (align="right"|style="text-align:right")>2,000<\/td>/);
+        });
+    }
+});
+
+describe('table styles', () => {
+    // Declarations only: the comments name the rules they replace.
+    const css = `${htmlContentStyles}\n${TABLE_STYLES}`.replace(/\/\*[\s\S]*?\*\//g, '');
+
+    it('lets no word inside a table break to fit, so a number never splits', () => {
+        const rule = declarationsFor(css, `.${TABLE_SCROLL_CLASS} table *`);
+        expect(rule).toMatch(/word-break:\s*normal/);
+        expect(rule).toMatch(/overflow-wrap:\s*normal/);
+    });
+
+    it('wraps prose with overflow-wrap, not the legacy word-break keyword a table cannot opt out of', () => {
+        // `word-break: break-word` overrides every overflow-wrap below it, tables included.
+        expect(css).not.toMatch(/word-break:\s*break-word/);
+    });
+
+    it('scrolls a table that does not fit', () => {
+        expect(declarationsFor(css, `.${TABLE_SCROLL_CLASS}`)).toMatch(/overflow-x:\s*auto/);
+    });
+
+    it("follows the app's dark mode (a dark class on <html>)", () => {
+        expect(declarationsFor(css, '.dark .llm-response-theme')).toMatch(/--llm-color-bg:\s*#0f1115/);
+    });
+});

package/src/components/messages-container-ui/index.ts

@@ -15,4 +15,10 @@ export {
 } from './ModernMessageGroup';
 export { renderModernStreamingContent } from './modernStreaming';
 export { MessengerSlotFillNameEnum } from './messenger-slot-fill-name-enum';
-export type { PlanMessage, CurrentUser, MessageGroupRenderProps, MessageGroupComponentType } from './types';
+export type {
+    PlanMessage,
+    CurrentUser,
+    MessageGroupRenderProps,
+    MessageGroupComponentType,
+    StreamingRenderOptions,
+} from './types';

package/src/components/messages-container-ui/markdownTables.ts

@@ -0,0 +1,108 @@
+/**
+ * Markdown tables in a chat message: every table sits in its own box that scrolls sideways, and
+ * nothing inside a table may break a word to make it fit.
+ *
+ * A message's prose wraps anywhere (`overflow-wrap: anywhere`), so a long path or URL never
+ * pushes the chat wider. That rule also counts every character as a break when a table sizes its
+ * columns, so a table in a narrow pane squeezed its number columns to a few characters and split
+ * "2,000" into "2,00" / "0". Inside a table a line now breaks only where the text has a space,
+ * and a table still too wide for the message scrolls in its box instead.
+ */
+
+/** The box every rendered markdown table sits in. */
+export const TABLE_SCROLL_CLASS = 'llm-table-scroll';
+
+/**
+ * Put each `<table>` of rendered HTML in a {@link TABLE_SCROLL_CLASS} box. Every opening tag gets
+ * a box and every closing tag closes it, so well-formed HTML stays balanced (nested tables too).
+ * Escaped markup, such as a table inside a code block, is text and is left alone.
+ */
+export function wrapTables(html: string): string {
+    return html
+        .replace(/<table\b[^>]*>/gi, (open) => `<div class="${TABLE_SCROLL_CLASS}">${open}`)
+        .replace(/<\/table\s*>/gi, (close) => `${close}</div>`);
+}
+
+/**
+ * The box, the no-split rule and the scroll cue, for both the assistant's reply and the person's
+ * own bubble. `.llm-table-scroll table *` outranks the bubbles' wrap-anywhere rules
+ * (`.user-message *`, the reply's bubble), which is what keeps a number whole.
+ */
+export const TABLE_STYLES = `
+    .${TABLE_SCROLL_CLASS} {
+        max-width: 100%;
+        overflow-x: auto;
+    }
+
+    /* The box carries the spacing: a scroll box never collapses its child's margins, so a
+       table's own (prose gives it 1em) would show as an empty band inside the box. */
+    .${TABLE_SCROLL_CLASS} > table {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    .${TABLE_SCROLL_CLASS} table,
+    .${TABLE_SCROLL_CLASS} table * {
+        word-break: normal;
+        overflow-wrap: normal;
+    }
+
+    .${TABLE_SCROLL_CLASS} th,
+    .${TABLE_SCROLL_CLASS} td {
+        font-variant-numeric: tabular-nums;
+    }
+
+    /* A cut-off column alone reads as a finished table (or as a number split in two), so a side
+       that has more columns to scroll to carries a soft shadow. Both shadows are pinned to the
+       box's edges (sticky, in the table's grid cell) and fade with the scroll position; a table
+       that fits has no scroll timeline, so neither shows. Where the browser cannot tie an
+       animation to scrolling, the box scrolls without the cue. */
+    @supports (animation-timeline: scroll()) {
+        .${TABLE_SCROLL_CLASS} {
+            display: grid;
+            scroll-timeline: --llm-table-scroll inline;
+        }
+
+        .${TABLE_SCROLL_CLASS} > table,
+        .${TABLE_SCROLL_CLASS}::before,
+        .${TABLE_SCROLL_CLASS}::after {
+            grid-area: 1 / 1;
+        }
+
+        .${TABLE_SCROLL_CLASS}::before,
+        .${TABLE_SCROLL_CLASS}::after {
+            content: '';
+            position: sticky;
+            z-index: 1;
+            width: 0.875rem;
+            pointer-events: none;
+            opacity: 0;
+        }
+
+        .${TABLE_SCROLL_CLASS}::before {
+            left: 0;
+            justify-self: start;
+            background: linear-gradient(to right, var(--llm-table-scroll-shadow, rgba(18, 25, 38, 0.14)), transparent);
+            animation: llm-table-scroll-start linear both;
+            animation-timeline: --llm-table-scroll;
+        }
+
+        .${TABLE_SCROLL_CLASS}::after {
+            right: 0;
+            justify-self: end;
+            background: linear-gradient(to left, var(--llm-table-scroll-shadow, rgba(18, 25, 38, 0.14)), transparent);
+            animation: llm-table-scroll-end linear both;
+            animation-timeline: --llm-table-scroll;
+        }
+    }
+
+    @keyframes llm-table-scroll-start {
+        0% { opacity: 0; }
+        6%, 100% { opacity: 1; }
+    }
+
+    @keyframes llm-table-scroll-end {
+        0%, 94% { opacity: 1; }
+        100% { opacity: 0; }
+    }
+`;

package/src/components/messages-container-ui/messenger-slot-fill-name-enum.ts

@@ -12,4 +12,10 @@ export enum MessengerSlotFillNameEnum {
     WORKFLOW_NAME = 'workflow',
     CONNECTOR_NAME = 'connector',
     GENERIC_NAME = 'generic',
+    // Result cards registered by ai-chat-ext (MessageResults): a row of product, showtime or
+    // role cards, and the single resume document card.
+    SHOPPING_NAME = 'shopping',
+    MOVIES_NAME = 'movies',
+    JOBS_NAME = 'jobs',
+    RESUME_NAME = 'resume',
 }

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { CodeFormatter, detectContentType, FormattedMessageContent } from './ModernMessageGroup';
+import { assistantFrameClass, CodeFormatter, detectContentType, FormattedMessageContent } from './ModernMessageGroup';
+import type { StreamingRenderOptions } from './types';
 
 /**
  * Renders in-flight streaming assistant content with the rich Modern renderer:
@@ -9,10 +10,23 @@ import { CodeFormatter, detectContentType, FormattedMessageContent } from './Mod
  * Pass this as `MessagesContainerUI` / `PlanModeView`'s `renderStreamingContent` to keep
  * markdown / code rendering while streaming (the base default is plain text).
  */
-export function renderModernStreamingContent(content: string, showCopyDownloadOnCodeBlock = true): React.ReactNode {
-    return detectContentType(content) === 'code' ? (
-        <CodeFormatter content={content} showCopyDownload={showCopyDownloadOnCodeBlock} />
-    ) : (
-        <FormattedMessageContent content={content} showCopyDownloadOnCodeBlock={showCopyDownloadOnCodeBlock} />
+export function renderModernStreamingContent(content: string, opts: StreamingRenderOptions = {}): React.ReactNode {
+    const { isDesktopView = false, isSmallScreen = false, showCopyDownloadOnCodeBlock = true } = opts;
+    return (
+        // Same frame as ModernMessageGroup's assistant post, so nothing restyles when the stream lands.
+        <div className={`group rounded-lg ${assistantFrameClass(isDesktopView, isSmallScreen)}`}>
+            <div className="min-w-0 overflow-hidden py-2">
+                <div className="min-w-0 relative max-w-full w-full text-foreground">
+                    {detectContentType(content) === 'code' ? (
+                        <CodeFormatter content={content} showCopyDownload={showCopyDownloadOnCodeBlock} />
+                    ) : (
+                        <FormattedMessageContent
+                            content={content}
+                            showCopyDownloadOnCodeBlock={showCopyDownloadOnCodeBlock}
+                        />
+                    )}
+                </div>
+            </div>
+        </div>
     );
 }

package/src/components/messages-container-ui/types.ts

@@ -13,6 +13,7 @@ export interface PlanMessage {
     createdAt?: Date | string;
     /** Optional: pass through to the injected message-group renderer (propsConfiguration, props, files, etc.) */
     propsConfiguration?: any;
+    /** `props.animateEntry: true` plays the just-sent entrance on a user bubble (see useBubbleEntrance). */
     props?: any;
     files?: any;
     author?: any;
@@ -66,3 +67,10 @@ export interface MessageGroupRenderProps {
 
 /** The injectable message-group renderer. Defaults to a plain-text bubble renderer. */
 export type MessageGroupComponentType = React.ComponentType<MessageGroupRenderProps>;
+
+/** What `renderStreamingContent` gets to frame the stream like the post it becomes. */
+export interface StreamingRenderOptions {
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
+    showCopyDownloadOnCodeBlock?: boolean;
+}

package/src/components/messages-container-ui/useBubbleEntrance.ts

@@ -0,0 +1,31 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+
+/** Rises out of the composer toward its tail corner; ease-out so it lands softly. */
+const KEYFRAMES: Keyframe[] = [
+    { opacity: 0, transform: 'translateY(12px) scale(0.96)', transformOrigin: 'right bottom' },
+    { opacity: 1, transform: 'translateY(0) scale(1)', transformOrigin: 'right bottom' },
+];
+const TIMING: KeyframeAnimationOptions = { duration: 320, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' };
+
+/**
+ * The entrance a message plays when the user has just sent it (a post with
+ * `props.animateEntry`). History, chat switches and re-renders never animate:
+ * the host flags only the bubble it just appended, and the decision is taken
+ * once at mount so the flag going away later cannot cut or replay it.
+ *
+ * Transform and opacity only, so it runs on the compositor and never moves the
+ * layout around it. Runs before paint, so the bubble never flashes in place
+ * first. Reduced-motion users get the bubble with no motion.
+ */
+export function useBubbleEntrance<T extends HTMLElement>(requested: boolean) {
+    const ref = useRef<T>(null);
+    const [play] = useState(requested);
+    useLayoutEffect(() => {
+        const el = ref.current;
+        if (!play || !el || typeof el.animate !== 'function') return undefined;
+        if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return undefined;
+        const animation = el.animate(KEYFRAMES, TIMING);
+        return () => animation.cancel();
+    }, [play]);
+    return ref;
+}

package/vitest.config.ts

@@ -0,0 +1,17 @@
+import { fileURLToPath } from 'node:url';
+// eslint-disable-next-line import/no-extraneous-dependencies -- the test runner's own config; vitest is a devDependency
+import { defineConfig } from 'vitest/config';
+
+const stub = (file: string) => fileURLToPath(new URL(`./src/__tests__/stubs/${file}`, import.meta.url));
+
+// The renderer imports app packages: `common` (generated models and hooks, built separately) and
+// components-pro. The tests stand in for them, so they run without building any.
+export default defineConfig({
+    test: {
+        alias: [
+            { find: /^common$/, replacement: stub('common.ts') },
+            { find: /^common\/graphql$/, replacement: stub('common-graphql.ts') },
+            { find: /^@common-stack\/components-pro$/, replacement: stub('components-pro.ts') },
+        ],
+    },
+});