@ciridae/ui-agent 0.3.10 → 0.3.11

package/dist/components/agentic/message-response.css

@@ -188,16 +188,19 @@
 	color: var(--accent-foreground);
 }
 
+/* Streamdown puts a table in two boxes: an outer card holding the copy,
+   download, and fullscreen controls, and an inner bordered scroll container
+   whose own classes draw the one visible border; the table's own w-full fills
+   it. The card loses its chrome. */
+.agentic-message-response [data-streamdown="table-wrapper"] {
+	background: transparent;
+	border: 0;
+	padding: 0;
+}
+
 .agentic-message-response :where(table) {
-	border: 1px solid var(--border);
 	border-collapse: separate;
-	border-radius: var(--radius-md);
 	border-spacing: 0;
-	display: block;
-	margin-block: 1rem;
-	max-width: 100%;
-	overflow-x: auto;
-	width: max-content;
 }
 
 .agentic-message-response :where(thead) {

package/dist/components/agentic/message.d.ts

@@ -16,14 +16,20 @@ type MessageActionProps = React.ComponentProps<typeof Button> & {
     tooltip?: string;
 };
 type MessageToolbarProps = React.ComponentProps<"div">;
-type MessageResponseProps = React.ComponentProps<typeof Streamdown> & {
+type MessageResponseProps = Omit<React.ComponentProps<typeof Streamdown>, "tableMaxHeight"> & {
     isStreaming?: boolean;
+    /**
+     * Height at which a markdown table starts scrolling; numbers are pixels.
+     * Pass 300 for Streamdown's own scroll box.
+     * @default "none"
+     */
+    tableMaxHeight?: React.ComponentProps<typeof Streamdown>["tableMaxHeight"];
 };
 declare function Message({ className, role, ...props }: MessageProps): React.JSX.Element;
 declare function MessageContent({ className, variant, ...props }: MessageContentProps): React.JSX.Element;
 declare function MessageActions({ className, ...props }: MessageActionsProps): React.JSX.Element;
 declare function MessageAction({ children, label, tooltip, variant, size, ...props }: MessageActionProps): React.JSX.Element;
-declare const MessageResponse: React.MemoExoticComponent<({ animated, className, components, controls, icons, isAnimating, isStreaming, mermaid: mermaidOptions, plugins, prefix, translations, ...props }: MessageResponseProps) => React.JSX.Element>;
+declare const MessageResponse: React.MemoExoticComponent<({ animated, className, components, controls, icons, isAnimating, isStreaming, mermaid: mermaidOptions, plugins, prefix, tableMaxHeight, translations, ...props }: MessageResponseProps) => React.JSX.Element>;
 declare function MessageToolbar({ className, ...props }: MessageToolbarProps): React.JSX.Element;
 export { Message, MessageAction, MessageActions, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar, };
 export type { MessageActionProps, MessageActionsProps, MessageBranchContentProps, MessageBranchNextProps, MessageBranchPageProps, MessageBranchPreviousProps, MessageBranchProps, MessageBranchSelectorProps, MessageContentProps, MessageProps, MessageResponseProps, MessageToolbarProps, };

package/dist/components/agentic/message.js

@@ -141,7 +141,10 @@ function MessageAction({ children, label, tooltip, variant = "ghost", size = "ic
         return button;
     return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { children: _jsx("p", { children: tooltip }) })] }) }));
 }
-const MessageResponse = memo(function MessageResponse({ animated, className, components, controls, icons, isAnimating = false, isStreaming = false, mermaid: mermaidOptions, plugins, prefix, translations, ...props }) {
+const MessageResponse = memo(function MessageResponse({ animated, className, components, controls, icons, isAnimating = false, isStreaming = false, mermaid: mermaidOptions, plugins, prefix, 
+// Streamdown defaults a table to a 300px scroll box, which hides most rows
+// of a modest table behind an inner scrollbar; a chat shows the whole table.
+tableMaxHeight = "none", translations, ...props }) {
     const prefersReducedMotion = usePrefersReducedMotion();
     const isActivelyStreaming = isAnimating || isStreaming;
     const resolvedAnimation = animated === true ? messageResponseAnimation : animated;
@@ -155,7 +158,7 @@ const MessageResponse = memo(function MessageResponse({ animated, className, com
         prefix,
         translations,
     }), [controls, icons, mermaidOptions, prefix, resolvedPlugins, translations]);
-    return (_jsx(MessageResponseStreamingContext.Provider, { value: isActivelyStreaming, children: _jsx(MessageResponseRendererOptionsContext.Provider, { value: rendererOptions, children: _jsx(Streamdown, { animated: prefersReducedMotion ? false : resolvedAnimation, className: cn("agentic-message-response", className), components: resolvedComponents, controls: controls, icons: icons, isAnimating: isActivelyStreaming, mermaid: mermaidOptions, plugins: resolvedPlugins, prefix: prefix, translations: translations, ...props }) }) }));
+    return (_jsx(MessageResponseStreamingContext.Provider, { value: isActivelyStreaming, children: _jsx(MessageResponseRendererOptionsContext.Provider, { value: rendererOptions, children: _jsx(Streamdown, { animated: prefersReducedMotion ? false : resolvedAnimation, className: cn("agentic-message-response", className), components: resolvedComponents, controls: controls, icons: icons, isAnimating: isActivelyStreaming, mermaid: mermaidOptions, plugins: resolvedPlugins, prefix: prefix, tableMaxHeight: tableMaxHeight, translations: translations, ...props }) }) }));
 });
 MessageResponse.displayName = "MessageResponse";
 function MessageResponseCode({ children, className, "data-block": dataBlock, node, ...props }) {

package/dist/components/agentic/reasoning.js

@@ -94,7 +94,7 @@ const ReasoningTrigger = memo(function ReasoningTrigger({ children, className, g
     return (_jsxs(CollapsibleTrigger, { "data-slot": "reasoning-trigger", className: cn("group flex w-full items-center justify-between gap-3 px-3 py-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring focus-visible:outline-none", className), ...props, children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(BrainIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "min-w-0 truncate", children: children ?? getThinkingMessage(isStreaming, duration) })] }), _jsx(ChevronDownIcon, { "aria-hidden": "true", className: cn("size-4 shrink-0 text-muted-foreground transition-transform", isOpen ? "rotate-180" : undefined) })] }));
 });
 const ReasoningContent = memo(function ReasoningContent({ children, className, ...props }) {
-    return (_jsx(CollapsibleContent, { "data-slot": "reasoning-content", className: cn("border-t px-3 py-3 text-sm", className), ...props, children: _jsx(Streamdown, { className: cn("agentic-message-response text-muted-foreground"), plugins: streamdownPlugins, children: children }) }));
+    return (_jsx(CollapsibleContent, { "data-slot": "reasoning-content", className: cn("border-t px-3 py-3 text-sm", className), ...props, children: _jsx(Streamdown, { className: cn("agentic-message-response text-muted-foreground"), plugins: streamdownPlugins, tableMaxHeight: "none", children: children }) }));
 });
 function defaultGetThinkingMessage(isStreaming, duration) {
     if (isStreaming || duration === 0)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ciridae/ui-agent",
-	"version": "0.3.10",
+	"version": "0.3.11",
 	"type": "module",
 	"private": false,
 	"repository": {
@@ -64,6 +64,6 @@
 		"lucide-react": "^1.23.0",
 		"react-jsx-parser": "^2.4.1",
 		"shiki": "^4.3.0",
-		"streamdown": "^2.5.0"
+		"streamdown": "^2.6.0"
 	}
 }