@mcp-b/react-components 0.47.0 → 0.49.0

package/dist/components/ai-sdk/MessageScrollerVirtual.d.ts

@@ -1,76 +1,2 @@
-import { r as ButtonProps } from "../../Button-CZt3yywF.js";
-import * as React from "react";
-
-//#region src/components/ai-sdk/MessageScrollerVirtual.d.ts
-interface VirtualMessageScrollerProps<Item> extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
-  items: readonly Item[];
-  /**
-   * Stable per-item key. Must survive prepends and stream updates — the
-   * virtualizer tracks identity by key to keep scroll anchored. Message ids,
-   * never indexes (deliberately not passed here).
-   */
-  getItemKey: (item: Item) => string | number;
-  renderItem: (item: Item, index: number) => React.ReactNode;
-  /**
-   * Pre-measurement height estimate in px. Rows are measured once rendered;
-   * changing this later never re-estimates already-measured rows — only rows
-   * measured afterward see the new value.
-   */
-  estimateSize?: number;
-  /** Rows rendered beyond the viewport on each side. */
-  overscan?: number;
-  /** Rendered inside the viewport when `items` is empty. */
-  emptyState?: React.ReactNode;
-  /**
-   * Props for the inner content element. Defaults to `role="log"` with
-   * `aria-live="off"` — windowing re-inserts old rows as they scroll back
-   * into view, and a live region would announce them as new; override via
-   * these props only with that in mind.
-   */
-  contentProps?: React.HTMLAttributes<HTMLDivElement>;
-  /** Accessible label for the scroll-to-latest button. */
-  scrollButtonLabel?: string;
-  scrollButtonProps?: Omit<ButtonProps, "onClick" | "aria-label" | "tabIndex">;
-}
-/**
- * Windowed chat transcript for unbounded threads (hours-long agent runs):
- * only the visible slice of rows exists in the DOM, end-anchored so streaming
- * growth and appends keep the viewport pinned while reading history doesn't
- * get yanked to the bottom (TanStack Virtual `anchorTo: 'end'`).
- *
- * Windowing means rows unmount when scrolled away, so browser find-in-page
- * only searches the rendered window, and any disclosure state living inside a
- * row is lost unless it is persisted — wrap the transcript in
- * `ExpansionStateProvider` (AgentChat does) and give disclosures a `stateKey`.
- * New turns pin to the bottom.
- *
- * Host-side contract (what the consuming app must do — the scroller cannot
- * compensate for any of these):
- * - Give every item a stable id for `getItemKey`; keys must not change when
- *   older history is prepended or the last message grows.
- * - Keep unchanged items referentially stable across updates so memoized row
- *   content skips re-rendering. Rebuilding the array element-by-element —
- *   e.g. structured-clone over a worker/extension boundary per delta —
- *   defeats this; clone once per batch, not per row.
- * - Throttle stream deltas before they reach React state (AI SDK
- *   `experimental_throttle: 50` or equivalent); the scroller re-windows per
- *   update.
- * - Bound the data itself: windowing caps DOM size, not JS memory. Truncate
- *   stored tool output at the buffer (Codex caps at 20k chars) and keep
- *   compaction on so a six-hour run doesn't hold every byte it ever streamed.
- */
-declare function VirtualMessageScroller<Item>({
-  items,
-  getItemKey,
-  renderItem,
-  estimateSize,
-  overscan,
-  emptyState,
-  contentProps,
-  scrollButtonLabel,
-  scrollButtonProps,
-  className,
-  ...props
-}: VirtualMessageScrollerProps<Item>): React.JSX.Element;
-//#endregion
-export { VirtualMessageScroller, VirtualMessageScrollerProps };
+import { n as VirtualMessageScroller, r as VirtualMessageScrollerProps, t as VirtualMessageScrollAnchor } from "../../MessageScrollerVirtual-D4afYwVB.js";
+export { VirtualMessageScrollAnchor, VirtualMessageScroller, VirtualMessageScrollerProps };

package/dist/components/ai-sdk/MessageScrollerVirtual.js

@@ -33,8 +33,11 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 *   stored tool output at the buffer (Codex caps at 20k chars) and keep
 *   compaction on so a six-hour run doesn't hold every byte it ever streamed.
 */
-function VirtualMessageScroller({ items, getItemKey, renderItem, estimateSize = 160, overscan = 6, emptyState, contentProps, scrollButtonLabel = "Scroll to latest", scrollButtonProps, className, ...props }) {
+function VirtualMessageScroller({ items, getItemKey, renderItem, estimateSize = 160, overscan = 6, emptyState, contentProps, scrollButtonLabel = "Scroll to latest", scrollButtonProps, className, scrollAnchor, ...props }) {
 	const viewportRef = React.useRef(null);
+	const initialAnchor = React.useRef(scrollAnchor?.current);
+	const restoring = React.useRef(true);
+	const contentRef = React.useRef(null);
 	const warnedBadKey = React.useRef(false);
 	const [atEnd, setAtEnd] = React.useState(true);
 	const [scrollEdges, setScrollEdges] = React.useState();
@@ -52,6 +55,17 @@ function VirtualMessageScroller({ items, getItemKey, renderItem, estimateSize =
 			seen.add(key);
 		}
 	}, [items, getItemKey]);
+	const recordAnchor = (instance) => {
+		const viewport = viewportRef.current;
+		if (restoring.current || !scrollAnchor || !viewport) return;
+		const scrollTop = viewport.scrollTop;
+		const first = instance.getVirtualItems().find((item) => item.end > scrollTop);
+		if (first) scrollAnchor.current = {
+			key: getItemKey(items[first.index]),
+			offset: scrollTop - first.start,
+			followLatest: viewport.scrollHeight - viewport.clientHeight - scrollTop <= instance.options.scrollEndThreshold
+		};
+	};
 	const virtualizer = useVirtualizer({
 		count: items.length,
 		getScrollElement: () => viewportRef.current,
@@ -62,17 +76,35 @@ function VirtualMessageScroller({ items, getItemKey, renderItem, estimateSize =
 		scrollEndThreshold: 80,
 		overscan,
 		gap: 16,
-		initialOffset: () => items.length * (estimateSize + 16),
+		initialOffset: () => {
+			const anchor = initialAnchor.current;
+			const index = anchor && !anchor.followLatest ? items.findIndex((item) => getItemKey(item) === anchor.key) : -1;
+			return index < 0 ? items.length * (estimateSize + 16) : index * (estimateSize + 16);
+		},
 		onChange: (instance) => {
 			setAtEnd(instance.isAtEnd());
+			recordAnchor(instance);
 			const start = (viewportRef.current?.scrollTop ?? 0) > 1;
 			const end = instance.getDistanceFromEnd() > 1;
 			setScrollEdges(start && end ? "start end" : start ? "start" : end ? "end" : void 0);
 		}
 	});
 	React.useLayoutEffect(() => {
-		virtualizer.scrollToEnd();
-	}, []);
+		if (!restoring.current) return;
+		const anchor = initialAnchor.current;
+		const index = anchor && !anchor.followLatest ? items.findIndex((item) => getItemKey(item) === anchor.key) : -1;
+		if (index >= 0 && anchor) {
+			const row = contentRef.current?.querySelector(`:scope > [data-index="${index}"]`);
+			if (!row) return;
+			virtualizer.measureElement(row);
+			const height = Number.parseFloat(contentRef.current?.style.height ?? "0");
+			if (Math.abs(height - virtualizer.getTotalSize()) > .5) return;
+			const item = virtualizer.getVirtualItems().find((item) => item.index === index);
+			if (!item) return;
+			virtualizer.scrollToOffset(item.start + anchor.offset);
+		} else virtualizer.scrollToEnd();
+		restoring.current = false;
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": messageScrollerContract.root.slot,
 		className: cx(messageScrollerContract.root.className, className),
@@ -80,6 +112,7 @@ function VirtualMessageScroller({ items, getItemKey, renderItem, estimateSize =
 		"data-recipe": "fill-host",
 		children: [/* @__PURE__ */ jsx("div", {
 			ref: viewportRef,
+			onScroll: () => recordAnchor(virtualizer),
 			"aria-label": messageScrollerContract.viewport.ariaLabel,
 			"data-slot": messageScrollerContract.viewport.slot,
 			"data-recipe": "scroll-fade-y",
@@ -89,6 +122,7 @@ function VirtualMessageScroller({ items, getItemKey, renderItem, estimateSize =
 			tabIndex: messageScrollerContract.viewport.tabIndex,
 			children: items.length === 0 ? emptyState : /* @__PURE__ */ jsx("div", {
 				...resolvedContentProps,
+				ref: contentRef,
 				"aria-live": contentAriaLive,
 				"aria-relevant": contentAriaRelevant,
 				className: cx(messageScrollerContract.content.virtualClassName, contentClassName),

package/dist/components/ai-sdk/Plan.d.ts

@@ -19,7 +19,7 @@ declare function Plan({
   ref,
   ...props
 }: PlanProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 interface PlanHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
 declare function PlanHeader({

package/dist/components/ai-sdk/PromptInput.d.ts

@@ -1,2 +1,2 @@
-import { $ as PromptInputSubmit, A as PromptInputContextItem, B as PromptInputHoverCard, C as PromptInputButtonProps, Ct as usePromptInputController, D as PromptInputCommandDefinition, E as PromptInputCommandComposerProps, F as PromptInputDictationProps, G as PromptInputHoverCardTriggerProps, H as PromptInputHoverCardContentProps, I as PromptInputFooter, J as PromptInputPermissionSelectorProps, K as PromptInputMessage, L as PromptInputFooterProps, M as PromptInputContextSelectorProps, N as PromptInputControllerProps, O as PromptInputCommandTrigger, P as PromptInputDictation, Q as PromptInputReference, R as PromptInputHeader, S as PromptInputButton, St as usePromptInputAttachments, T as PromptInputCommandComposer, U as PromptInputHoverCardProps, V as PromptInputHoverCardContent, W as PromptInputHoverCardTrigger, X as PromptInputProvider, Y as PromptInputProps, Z as PromptInputProviderProps, _ as PromptInputAttachmentProps, _t as PromptInputTrayProps, a as PromptInputActionAddAttachmentsProps, at as PromptInputTabItemProps, b as PromptInputBody, bt as TooltipSide, c as PromptInputActionMenu, ct as PromptInputTabProps, d as PromptInputActionMenuItem, dt as PromptInputTextarea, et as PromptInputSubmitProps, f as PromptInputActionMenuItemProps, ft as PromptInputTextareaProps, g as PromptInputAttachment, gt as PromptInputTray, h as PromptInputActionMenuTriggerProps, ht as PromptInputTooltipConfig, i as PromptInputActionAddAttachments, it as PromptInputTabItem, j as PromptInputContextSelector, k as PromptInputContextAction, l as PromptInputActionMenuContent, lt as PromptInputTabsList, m as PromptInputActionMenuTrigger, mt as PromptInputToolsProps, n as PermissionMode, nt as PromptInputTabBody, o as PromptInputActionAddScreenshot, ot as PromptInputTabLabel, p as PromptInputActionMenuProps, pt as PromptInputTools, q as PromptInputPermissionSelector, r as PromptInput, rt as PromptInputTabBodyProps, s as PromptInputActionAddScreenshotProps, st as PromptInputTabLabelProps, t as AttachmentsContext, tt as PromptInputTab, u as PromptInputActionMenuContentProps, ut as PromptInputTabsListProps, v as PromptInputAttachments, vt as PromptInputVoiceInput, w as PromptInputButtonTooltip, wt as useProviderAttachments, x as PromptInputBodyProps, xt as composerLinksToReferences, y as PromptInputAttachmentsProps, yt as TextInputContext, z as PromptInputHeaderProps } from "../../PromptInput-DtJHyp0S.js";
-export { AttachmentsContext, PermissionMode, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputActionAddScreenshot, PromptInputActionAddScreenshotProps, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputAttachment, PromptInputAttachmentProps, PromptInputAttachments, PromptInputAttachmentsProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommandComposer, PromptInputCommandComposerProps, PromptInputCommandDefinition, PromptInputCommandTrigger, PromptInputContextAction, PromptInputContextItem, PromptInputContextSelector, PromptInputContextSelectorProps, PromptInputControllerProps, PromptInputDictation, PromptInputDictationProps, PromptInputFooter, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputMessage, PromptInputPermissionSelector, PromptInputPermissionSelectorProps, PromptInputProps, PromptInputProvider, PromptInputProviderProps, PromptInputReference, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, PromptInputTooltipConfig, PromptInputTray, PromptInputTrayProps, PromptInputVoiceInput, TextInputContext, TooltipSide, composerLinksToReferences, usePromptInputAttachments, usePromptInputController, useProviderAttachments };
+import { $ as PromptInputProviderProps, A as PromptInputContextItem, B as PromptInputHeader, C as PromptInputButtonProps, Ct as composerLinksToReferences, D as PromptInputCommandDefinition, E as PromptInputCommandComposerProps, F as PromptInputDictationProps, G as PromptInputHoverCardProps, H as PromptInputHoverCard, I as PromptInputFooter, J as PromptInputMessage, K as PromptInputHoverCardTrigger, L as PromptInputFooterEnd, M as PromptInputContextSelectorProps, N as PromptInputControllerProps, O as PromptInputCommandTrigger, P as PromptInputDictation, Q as PromptInputProvider, R as PromptInputFooterEndProps, S as PromptInputButton, St as TooltipSide, T as PromptInputCommandComposer, Tt as usePromptInputController, U as PromptInputHoverCardContent, V as PromptInputHeaderProps, W as PromptInputHoverCardContentProps, X as PromptInputPermissionSelectorProps, Y as PromptInputPermissionSelector, Z as PromptInputProps, _ as PromptInputAttachmentProps, _t as PromptInputTooltipConfig, a as PromptInputActionAddAttachmentsProps, at as PromptInputTabBodyProps, b as PromptInputBody, bt as PromptInputVoiceInput, c as PromptInputActionMenu, ct as PromptInputTabLabel, d as PromptInputActionMenuItem, dt as PromptInputTabsList, et as PromptInputReference, f as PromptInputActionMenuItemProps, ft as PromptInputTabsListProps, g as PromptInputAttachment, gt as PromptInputToolsProps, h as PromptInputActionMenuTriggerProps, ht as PromptInputTools, i as PromptInputActionAddAttachments, it as PromptInputTabBody, j as PromptInputContextSelector, k as PromptInputContextAction, l as PromptInputActionMenuContent, lt as PromptInputTabLabelProps, m as PromptInputActionMenuTrigger, mt as PromptInputTextareaProps, n as PermissionMode, nt as PromptInputSubmitProps, o as PromptInputActionAddScreenshot, ot as PromptInputTabItem, p as PromptInputActionMenuProps, pt as PromptInputTextarea, q as PromptInputHoverCardTriggerProps, r as PromptInput, rt as PromptInputTab, s as PromptInputActionAddScreenshotProps, st as PromptInputTabItemProps, t as AttachmentsContext, tt as PromptInputSubmit, u as PromptInputActionMenuContentProps, ut as PromptInputTabProps, v as PromptInputAttachments, vt as PromptInputTray, w as PromptInputButtonTooltip, wt as usePromptInputAttachments, x as PromptInputBodyProps, xt as TextInputContext, y as PromptInputAttachmentsProps, yt as PromptInputTrayProps, z as PromptInputFooterProps } from "../../PromptInput-C4Mofitz.js";
+export { AttachmentsContext, PermissionMode, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputActionAddScreenshot, PromptInputActionAddScreenshotProps, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputAttachment, PromptInputAttachmentProps, PromptInputAttachments, PromptInputAttachmentsProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommandComposer, PromptInputCommandComposerProps, PromptInputCommandDefinition, PromptInputCommandTrigger, PromptInputContextAction, PromptInputContextItem, PromptInputContextSelector, PromptInputContextSelectorProps, PromptInputControllerProps, PromptInputDictation, PromptInputDictationProps, PromptInputFooter, PromptInputFooterEnd, PromptInputFooterEndProps, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputMessage, PromptInputPermissionSelector, PromptInputPermissionSelectorProps, PromptInputProps, PromptInputProvider, PromptInputProviderProps, PromptInputReference, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, PromptInputTooltipConfig, PromptInputTray, PromptInputTrayProps, PromptInputVoiceInput, TextInputContext, TooltipSide, composerLinksToReferences, usePromptInputAttachments, usePromptInputController };