@mcp-b/react-components 0.6.5 → 0.7.0

package/dist/components/AgentChat.js

@@ -2,15 +2,17 @@ import { t as cx } from "../class-names-9UtZwb0J.js";
 import { D as PlusIcon, O as RefreshIcon } from "../icons-BCNawx-T.js";
 import { Activity, ActivityContent, ActivityPanel, ActivityTrigger } from "./Activity.js";
 import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "./Context.js";
-import { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton } from "./Conversation.js";
+import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "./MessageScroller.js";
+import { ConversationEmptyState } from "./Conversation.js";
 import { Message, MessageAction, MessageActions, MessageAttachment, MessageContent, MessageResponse } from "./Message.js";
 import { MenuGroup, MenuGroupLabel } from "./Menu.js";
 import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { getToolName, isFileUIPart, isReasoningUIPart, isTextUIPart, isToolOrDynamicToolUIPart } from "ai";
+import { getToolName, isFileUIPart, isReasoningUIPart, isTextUIPart, isToolUIPart } from "ai";
 //#region src/components/AgentChat.tsx
+const EMPTY_PENDING_APPROVALS = [];
 function AgentChatAttachButton() {
 	const attachments = usePromptInputAttachments();
 	return /* @__PURE__ */ jsx(PromptInputButton, {
@@ -33,11 +35,11 @@ function AgentChatAddMenu({ children }) {
 function isCompactedPart(message, part, partIndex) {
 	const metadata = message.metadata;
 	if (isTextUIPart(part)) return Array.isArray(metadata?.compactedTextParts) && metadata.compactedTextParts.includes(partIndex);
-	if (isToolOrDynamicToolUIPart(part)) return Array.isArray(metadata?.compactedToolOutputs) && metadata.compactedToolOutputs.includes(part.toolCallId);
+	if (isToolUIPart(part)) return Array.isArray(metadata?.compactedToolOutputs) && metadata.compactedToolOutputs.includes(part.toolCallId);
 	return false;
 }
 function getPartKey(part, partIndex) {
-	if (isToolOrDynamicToolUIPart(part)) return part.toolCallId;
+	if (isToolUIPart(part)) return part.toolCallId;
 	if ("id" in part && typeof part.id === "string") return `${part.type}-${part.id}`;
 	return `${part.type}-${partIndex}`;
 }
@@ -88,39 +90,35 @@ function renderDefaultPart(part) {
 		isStreaming: part.state === "streaming",
 		children: [/* @__PURE__ */ jsx(ReasoningTrigger, {}), /* @__PURE__ */ jsx(ReasoningContent, { children: part.text })]
 	});
-	if (isToolOrDynamicToolUIPart(part)) return renderToolActivity(part);
+	if (isToolUIPart(part)) return renderToolActivity(part);
 	return null;
 }
 /**
-* A complete agent chat surface: auto-scrolling conversation of AI SDK
-* `UIMessage`s (text, reasoning, and tool parts rendered by default) plus a
-* prompt composer. Customize per-part rendering with `renderPart`.
-*
-* This is the presentational layer under `ThinkChat` — props in, no
-* transport. Use it directly with plain AI SDK `useChat` or a read-only
-* transcript; if you have a Cloudflare Think agent, use `ThinkChat` instead.
+* Low-level transcript/composer surface used by `ThinkChat`: props in, no
+* transport. Product code that talks to a Cloudflare Think agent should render
+* `ThinkChat`; use this directly only for plain AI SDK or read-only messages.
 */
-function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerTools, composerAddMenuItems, notice, onRegenerate, onApprovalResponse, executionApprovals, contextWindow, renderPart, renderMessageAfter, ref }) {
+function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerTools, composerAddMenuItems, notice, onRegenerate, onApprovalResponse, executionApprovals, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, ref }) {
 	const handleSubmit = React.useCallback((message) => {
 		onSubmit?.(message);
 	}, [onSubmit]);
 	const [skippedApprovalIds, setSkippedApprovalIds] = React.useState([]);
-	const pendingApprovals = getPendingToolApprovals(messages, { pausedExecutions: Boolean(executionApprovals) }).filter(({ part }) => {
+	const pendingApprovalItems = [...getPendingToolApprovals(messages, { pausedExecutions: Boolean(executionApprovals) }).filter(({ part }) => {
 		if (part.state === "approval-requested" && !onApprovalResponse) return false;
 		const id = getApprovalStateKey(part);
 		return Boolean(id) && !skippedApprovalIds.includes(id);
-	});
+	}).map((approval) => ({ part: approval.part })), ...executionApprovals ? durableApprovals.filter((approval) => approval.source === "action" && !skippedApprovalIds.includes(approval.executionId)).map((approval) => ({ approval })) : []];
 	const approvalsWired = Boolean(onApprovalResponse || executionApprovals);
 	const [permissionMode, setPermissionMode] = React.useState("ask");
 	const autoApprovedIds = React.useRef(/* @__PURE__ */ new Set());
 	React.useEffect(() => {
 		if (permissionMode !== "bypass") return;
-		for (const { part } of pendingApprovals) {
-			const id = getApprovalRequestId(part);
-			const key = getApprovalStateKey(part);
+		for (const item of pendingApprovalItems) {
+			const id = "part" in item ? getApprovalRequestId(item.part) : item.approval.executionId;
+			const key = "part" in item ? getApprovalStateKey(item.part) : item.approval.executionId;
 			if (!id || !key || autoApprovedIds.current.has(key)) continue;
 			autoApprovedIds.current.add(key);
-			if (part.state === "approval-requested") onApprovalResponse?.({
+			if ("part" in item && item.part.state === "approval-requested") onApprovalResponse?.({
 				id,
 				approved: true
 			});
@@ -129,10 +127,11 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 	}, [
 		permissionMode,
 		messages,
+		durableApprovals,
 		onApprovalResponse,
 		executionApprovals
 	]);
-	const pendingApproval = permissionMode === "bypass" ? void 0 : pendingApprovals[0];
+	const pendingApproval = permissionMode === "bypass" ? void 0 : pendingApprovalItems[0];
 	const contextUsage = contextWindow ? getContextUsage(messages) : void 0;
 	const lastAssistantIndex = onRegenerate && status !== "streaming" && status !== "submitted" ? messages.findLastIndex((message) => message.role === "assistant") : -1;
 	const composerRef = (el) => {
@@ -147,40 +146,59 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("agent-chat", className),
-		children: [/* @__PURE__ */ jsxs(Conversation, {
-			className: "agent-chat__conversation",
-			children: [/* @__PURE__ */ jsxs(ConversationContent, { children: [messages.length === 0 ? emptyState ?? /* @__PURE__ */ jsx(ConversationEmptyState, {
-				title: "Start a conversation",
-				description: "Ask the agent to inspect, plan, or build."
-			}) : null, messages.map((message, messageIndex) => /* @__PURE__ */ jsxs(Message, {
-				from: message.role,
-				children: [
-					message.parts.map((part, partIndex) => {
-						const defaultRender = () => renderDefaultPart(part);
-						const custom = renderPart?.({
-							message,
-							part,
-							partIndex,
-							defaultRender
-						});
-						const rendered = custom === void 0 ? defaultRender() : custom;
-						return rendered ? /* @__PURE__ */ jsxs(MessageContent, { children: [rendered, isCompactedPart(message, part, partIndex) ? /* @__PURE__ */ jsx("div", {
-							className: "message__compacted",
-							children: "Output truncated for storage"
-						}) : null] }, getPartKey(part, partIndex)) : null;
-					}),
-					renderMessageAfter?.({
-						message,
-						messageIndex
-					}),
-					onRegenerate && messageIndex === lastAssistantIndex ? /* @__PURE__ */ jsx(MessageActions, { children: /* @__PURE__ */ jsx(MessageAction, {
-						label: "Retry",
-						tooltip: "Regenerate response",
-						onClick: () => onRegenerate(message.id),
-						children: /* @__PURE__ */ jsx(RefreshIcon, { size: 14 })
-					}) }) : null
-				]
-			}, message.id ?? messageIndex))] }), /* @__PURE__ */ jsx(ConversationScrollButton, {})]
+		children: [/* @__PURE__ */ jsx(MessageScrollerProvider, {
+			autoScroll: true,
+			defaultScrollPosition: "last-anchor",
+			children: /* @__PURE__ */ jsxs(MessageScroller, {
+				className: "agent-chat__conversation",
+				children: [/* @__PURE__ */ jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(MessageScrollerContent, {
+					"aria-busy": status === "streaming" || status === "submitted",
+					className: "agent-chat__transcript-content",
+					children: [messages.length === 0 ? /* @__PURE__ */ jsx(MessageScrollerItem, {
+						className: "agent-chat__empty-row",
+						children: emptyState ?? /* @__PURE__ */ jsx(ConversationEmptyState, {
+							title: "Start a conversation",
+							description: "Ask the agent to inspect, plan, or build."
+						})
+					}) : null, messages.map((message, messageIndex) => /* @__PURE__ */ jsx(MessageScrollerItem, {
+						messageId: message.id,
+						scrollAnchor: message.role === "user",
+						children: /* @__PURE__ */ jsxs(Message, {
+							from: message.role,
+							children: [
+								message.parts.map((part, partIndex) => {
+									const defaultRender = () => renderDefaultPart(part);
+									const custom = renderPart?.({
+										message,
+										part,
+										partIndex,
+										defaultRender
+									});
+									const rendered = custom === void 0 ? defaultRender() : custom;
+									return rendered ? /* @__PURE__ */ jsxs(MessageContent, { children: [rendered, isCompactedPart(message, part, partIndex) ? /* @__PURE__ */ jsx("div", {
+										className: "message__compacted",
+										children: "Output truncated for storage"
+									}) : null] }, getPartKey(part, partIndex)) : null;
+								}),
+								renderMessageAfter?.({
+									message,
+									messageIndex
+								}),
+								onRegenerate && messageIndex === lastAssistantIndex ? /* @__PURE__ */ jsx(MessageActions, { children: /* @__PURE__ */ jsx(MessageAction, {
+									label: "Retry",
+									tooltip: "Regenerate response",
+									onClick: () => onRegenerate(message.id),
+									children: /* @__PURE__ */ jsx(RefreshIcon, { size: 14 })
+								}) }) : null
+							]
+						})
+					}, message.id ?? messageIndex))]
+				}) }), /* @__PURE__ */ jsx(MessageScrollerButton, {
+					"aria-label": "Scroll to latest",
+					className: "agent-chat__scroll-button",
+					size: "icon"
+				})]
+			})
 		}), /* @__PURE__ */ jsxs("div", {
 			ref: composerRef,
 			className: "agent-chat__composer",
@@ -191,12 +209,13 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 				multiple: true,
 				onSubmit: handleSubmit,
 				children: pendingApproval ? /* @__PURE__ */ jsx(PromptInputApproval, {
-					part: pendingApproval.part,
-					count: pendingApprovals.length,
+					part: "part" in pendingApproval ? pendingApproval.part : void 0,
+					approval: "approval" in pendingApproval ? pendingApproval.approval : void 0,
+					count: pendingApprovalItems.length,
 					onRespond: onApprovalResponse,
 					executionApprovals,
 					onSkip: () => {
-						const id = getApprovalStateKey(pendingApproval.part);
+						const id = "part" in pendingApproval ? getApprovalStateKey(pendingApproval.part) : pendingApproval.approval.executionId;
 						if (id) setSkippedApprovalIds((previous) => [...previous, id]);
 					}
 				}) : /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/Context.d.ts

@@ -3,19 +3,13 @@ import * as React from "react";
 import { LanguageModelUsage, UIMessage } from "ai";
 
 //#region src/components/Context.d.ts
-/**
- * The AI SDK's `LanguageModelUsage`, taken whole. `Partial` only relaxes the
- * required-but-`undefined`able keys for fixtures/JSX literals — key names and
- * meanings are upstream's.
- */
-type ContextTokenUsage = Partial<LanguageModelUsage>;
 interface ContextProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Tokens currently used. */
   usedTokens: number;
   /** Maximum context window size. */
   maxTokens: number;
   /** Optional usage breakdown. */
-  usage?: ContextTokenUsage;
+  usage?: LanguageModelUsage;
   /** Optional model identifier shown in the header. */
   modelId?: string;
   /** Optional total cost in USD. */
@@ -31,11 +25,13 @@ interface ContextProps extends React.HTMLAttributes<HTMLDivElement> {
  *
  * @example
  * ```tsx
+ * const usage = getContextUsage(messages);
+ *
  * <Context
- *   usedTokens={42_300}
+ *   usedTokens={getContextUsedTokens(usage)}
  *   maxTokens={200_000}
  *   modelId="claude-opus-4-6"
- *   usage={{ inputTokens: 30000, outputTokens: 12300 }}
+ *   usage={usage}
  *   totalCostUsd={0.42}
  * >
  *   <ContextTrigger />
@@ -127,4 +123,4 @@ declare function getContextUsage(messages: readonly UIMessage[]): LanguageModelU
 /** Tokens occupying the context window: `totalTokens`, or input + output. */
 declare function getContextUsedTokens(usage: LanguageModelUsage | undefined): number;
 //#endregion
-export { Context, ContextCacheUsage, ContextCacheUsageProps, ContextContent, ContextContentBody, ContextContentBodyProps, ContextContentFooter, ContextContentFooterProps, ContextContentHeader, ContextContentHeaderProps, ContextContentProps, ContextInputUsage, ContextInputUsageProps, ContextOutputUsage, ContextOutputUsageProps, ContextProps, ContextReasoningUsage, ContextReasoningUsageProps, ContextTokenUsage, ContextTrigger, ContextTriggerProps, ContextUsageRowProps, getContextUsage, getContextUsedTokens };
+export { Context, ContextCacheUsage, ContextCacheUsageProps, ContextContent, ContextContentBody, ContextContentBodyProps, ContextContentFooter, ContextContentFooterProps, ContextContentHeader, ContextContentHeaderProps, ContextContentProps, ContextInputUsage, ContextInputUsageProps, ContextOutputUsage, ContextOutputUsageProps, ContextProps, ContextReasoningUsage, ContextReasoningUsageProps, ContextTrigger, ContextTriggerProps, ContextUsageRowProps, getContextUsage, getContextUsedTokens };

package/dist/components/Context.js

@@ -17,11 +17,13 @@ function useContextContext() {
 *
 * @example
 * ```tsx
+* const usage = getContextUsage(messages);
+*
 * <Context
-*   usedTokens={42_300}
+*   usedTokens={getContextUsedTokens(usage)}
 *   maxTokens={200_000}
 *   modelId="claude-opus-4-6"
-*   usage={{ inputTokens: 30000, outputTokens: 12300 }}
+*   usage={usage}
 *   totalCostUsd={0.42}
 * >
 *   <ContextTrigger />

package/dist/components/Conversation.d.ts

@@ -1,23 +1,15 @@
 import { t as Button } from "../Button-Ct5I6aTu.js";
+import { MessageScrollerButtonProps, MessageScrollerItemProps } from "./MessageScroller.js";
 import * as React from "react";
+import { UIMessage } from "ai";
 
 //#region src/components/Conversation.d.ts
-/**
- * Minimum message shape accepted by {@link ConversationDownload} and
- * {@link messagesToMarkdown}. Structurally compatible with the AI SDK
- * `UIMessage` type so consumers can pass those directly.
- */
-interface ConversationMessage {
+/** AI SDK `UIMessage`, or a plain text fallback for non-chat exports. */
+type ConversationMessage = UIMessage | {
   id?: string;
   role: string;
-  /** AI SDK-style parts array. The text types are concatenated for export. */
-  parts?: Array<{
-    type: string;
-    text?: string;
-  }>;
-  /** Plain-text content; used as a fallback when `parts` is not provided. */
   content?: string;
-}
+};
 interface ConversationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
   /** Additional class names for layout only; do not override scroll behavior from apps. */
   className?: string;
@@ -25,16 +17,17 @@ interface ConversationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
   children?: React.ReactNode;
 }
 /**
- * Scrollable container for a chat conversation. Sticks the viewport to the
- * bottom as new content arrives, unless the user has scrolled up. Adapted
- * from Vercel AI Elements and restyled with Sigvelo CSS tokens.
+ * Compatibility wrapper around {@link MessageScroller} for existing
+ * conversation imports. Prefer MessageScroller directly for new chat
+ * transcript surfaces.
  *
  * Use for assistant/user message streams. Do not use for static lists or
  * logs that should not auto-stick to the latest item.
  *
  * Sigvelo changes: removed Tailwind classes, uses a native scroll region with
- * the local stick-to-bottom hook, emits `role="log"` with polite updates, and
- * keeps transcript export in a separate ConversationDownload action.
+ * the shared MessageScroller primitive, emits `role="log"` with polite
+ * updates, and keeps transcript export in a separate ConversationDownload
+ * action.
  *
  * Styling consumes Sigvelo canvas, surface, border, spacing, radius, shadow,
  * and motion tokens. Add new behavior in this package when multiple apps need
@@ -48,7 +41,11 @@ interface ConversationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
  * ```tsx
  * <Conversation>
  *   <ConversationContent>
- *     {messages.map((m) => <Message key={m.id} {...m} />)}
+ *     {messages.map((m) => (
+ *       <ConversationItem key={m.id} messageId={m.id} scrollAnchor={m.role === "user"}>
+ *         <Message {...m} />
+ *       </ConversationItem>
+ *     ))}
  *   </ConversationContent>
  *   <ConversationScrollButton />
  * </Conversation>
@@ -72,11 +69,17 @@ interface ConversationContentProps extends React.HTMLAttributes<HTMLDivElement>
 declare function ConversationContent({
   className,
   children,
-  ref,
   ...props
 }: ConversationContentProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
+type ConversationItemProps = MessageScrollerItemProps;
+/** Optional wrapper for one turn/message. Enables upstream scroll anchoring and visibility tracking. */
+declare function ConversationItem({
+  className,
+  scrollAnchor,
+  ...props
+}: ConversationItemProps): React.JSX.Element;
 interface ConversationEmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
   title?: React.ReactNode;
   description?: React.ReactNode;
@@ -98,30 +101,27 @@ declare function ConversationEmptyState({
 }: ConversationEmptyStateProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface ConversationScrollButtonProps extends Omit<React.ComponentProps<typeof Button>, "onClick" | "className"> {
+interface ConversationScrollButtonProps extends Omit<MessageScrollerButtonProps, "children" | "className"> {
   className?: string;
-  /** Optional click handler; runs before the default scroll-to-bottom action. */
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
   /** Accessible label for the button. */
   label?: string;
+  children?: React.ReactNode;
 }
 /**
  * Floating button that scrolls the conversation to the latest message.
- * Hidden while the viewport is already pinned to the bottom.
+ * Hidden from view and tab order while the viewport is already at the end.
  */
 declare function ConversationScrollButton({
   className,
   variant,
   color,
   size,
-  onClick,
   label,
   children,
-  ref,
   ...props
 }: ConversationScrollButtonProps & {
   ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element | null;
+}): React.JSX.Element;
 /**
  * Converts a conversation to a Markdown document with a heading per message.
  *
@@ -163,4 +163,4 @@ declare function ConversationDownload({
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element | null;
 //#endregion
-export { Conversation, ConversationContent, ConversationContentProps, ConversationDownload, ConversationDownloadProps, ConversationEmptyState, ConversationEmptyStateProps, ConversationMessage, ConversationProps, ConversationScrollButton, ConversationScrollButtonProps, messagesToMarkdown };
+export { Conversation, ConversationContent, ConversationContentProps, ConversationDownload, ConversationDownloadProps, ConversationEmptyState, ConversationEmptyStateProps, ConversationItem, ConversationItemProps, ConversationMessage, ConversationProps, ConversationScrollButton, ConversationScrollButtonProps, messagesToMarkdown };

package/dist/components/Conversation.js

@@ -1,27 +1,23 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
 import { d as DownloadIcon, t as ArrowDownIcon } from "../icons-BCNawx-T.js";
 import { Button } from "./Button.js";
-import { useStickToBottom } from "./useStickToBottom.js";
+import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "./MessageScroller.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { isReasoningUIPart, isTextUIPart } from "ai";
 //#region src/components/Conversation.tsx
-const ConversationContext = React.createContext(null);
-function useConversationContext(component) {
-	const ctx = React.useContext(ConversationContext);
-	if (!ctx) throw new Error(`${component} must be used inside a <Conversation>.`);
-	return ctx;
-}
 /**
-* Scrollable container for a chat conversation. Sticks the viewport to the
-* bottom as new content arrives, unless the user has scrolled up. Adapted
-* from Vercel AI Elements and restyled with Sigvelo CSS tokens.
+* Compatibility wrapper around {@link MessageScroller} for existing
+* conversation imports. Prefer MessageScroller directly for new chat
+* transcript surfaces.
 *
 * Use for assistant/user message streams. Do not use for static lists or
 * logs that should not auto-stick to the latest item.
 *
 * Sigvelo changes: removed Tailwind classes, uses a native scroll region with
-* the local stick-to-bottom hook, emits `role="log"` with polite updates, and
-* keeps transcript export in a separate ConversationDownload action.
+* the shared MessageScroller primitive, emits `role="log"` with polite
+* updates, and keeps transcript export in a separate ConversationDownload
+* action.
 *
 * Styling consumes Sigvelo canvas, surface, border, spacing, radius, shadow,
 * and motion tokens. Add new behavior in this package when multiple apps need
@@ -35,7 +31,11 @@ function useConversationContext(component) {
 * ```tsx
 * <Conversation>
 *   <ConversationContent>
-*     {messages.map((m) => <Message key={m.id} {...m} />)}
+*     {messages.map((m) => (
+*       <ConversationItem key={m.id} messageId={m.id} scrollAnchor={m.role === "user"}>
+*         <Message {...m} />
+*       </ConversationItem>
+*     ))}
 *   </ConversationContent>
 *   <ConversationScrollButton />
 * </Conversation>
@@ -44,29 +44,19 @@ function useConversationContext(component) {
 * @see {@link https://elements.ai-sdk.dev/components/conversation | AI Elements Conversation}
 */
 function Conversation({ className, children, ref, ...props }) {
-	const { viewportRef, contentRef, isAtBottom, scrollToBottom } = useStickToBottom();
 	const handleViewportRef = React.useCallback((element) => {
-		viewportRef(element);
 		if (typeof ref === "function") {
 			ref(element);
 			return;
 		}
 		if (ref) ref.current = element;
-	}, [ref, viewportRef]);
-	const ctx = React.useMemo(() => ({
-		isAtBottom,
-		scrollToBottom,
-		registerContentElement: contentRef
-	}), [
-		contentRef,
-		isAtBottom,
-		scrollToBottom
-	]);
-	return /* @__PURE__ */ jsx(ConversationContext.Provider, {
-		value: ctx,
-		children: /* @__PURE__ */ jsx("div", {
+	}, [ref]);
+	return /* @__PURE__ */ jsx(MessageScrollerProvider, {
+		autoScroll: true,
+		defaultScrollPosition: "end",
+		children: /* @__PURE__ */ jsx(MessageScroller, {
 			className: cx("conversation", className),
-			children: /* @__PURE__ */ jsx("div", {
+			children: /* @__PURE__ */ jsx(MessageScrollerViewport, {
 				ref: handleViewportRef,
 				tabIndex: 0,
 				className: "conversation__viewport",
@@ -80,25 +70,24 @@ function Conversation({ className, children, ref, ...props }) {
 * Inner layout wrapper for conversation children. Applies vertical stacking
 * and padding; does not scroll (the parent {@link Conversation} does).
 */
-function ConversationContent({ className, children, ref, ...props }) {
-	const { registerContentElement } = useConversationContext("ConversationContent");
-	return /* @__PURE__ */ jsx("div", {
-		ref: React.useCallback((element) => {
-			registerContentElement(element);
-			if (typeof ref === "function") {
-				ref(element);
-				return;
-			}
-			if (ref) ref.current = element;
-		}, [registerContentElement, ref]),
+function ConversationContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScrollerContent, {
 		role: "log",
 		"aria-live": "polite",
-		"aria-relevant": "additions text",
+		"aria-relevant": "additions",
 		className: cx("conversation__content", className),
 		...props,
 		children
 	});
 }
+/** Optional wrapper for one turn/message. Enables upstream scroll anchoring and visibility tracking. */
+function ConversationItem({ className, scrollAnchor = false, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScrollerItem, {
+		className: cx("conversation__item", className),
+		scrollAnchor,
+		...props
+	});
+}
 /**
 * Placeholder shown when there are no messages yet. Renders an icon, title,
 * and description stacked vertically; pass `children` to override the
@@ -128,23 +117,15 @@ function ConversationEmptyState({ className, title = "No messages yet", descript
 }
 /**
 * Floating button that scrolls the conversation to the latest message.
-* Hidden while the viewport is already pinned to the bottom.
+* Hidden from view and tab order while the viewport is already at the end.
 */
-function ConversationScrollButton({ className, variant = "outline", color = "neutral", size = "icon", onClick, label = "Scroll to latest", children, ref, ...props }) {
-	const { isAtBottom, scrollToBottom } = useConversationContext("ConversationScrollButton");
-	if (isAtBottom) return null;
-	return /* @__PURE__ */ jsx(Button, {
-		ref,
-		type: "button",
+function ConversationScrollButton({ className, variant = "outline", color = "neutral", size = "icon", label = "Scroll to latest", children, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScrollerButton, {
 		variant,
 		color,
 		size,
 		className: cx("conversation__scroll-button", className),
 		"aria-label": label,
-		onClick: (event) => {
-			onClick?.(event);
-			if (!event.defaultPrevented) scrollToBottom();
-		},
 		...props,
 		children: children ?? /* @__PURE__ */ jsx(ArrowDownIcon, {})
 	});
@@ -156,7 +137,7 @@ const ROLE_HEADING = {
 	tool: "### Tool"
 };
 function defaultFormatMessage(message) {
-	return `${ROLE_HEADING[message.role] ?? `### ${message.role}`}\n\n${(message.parts ? message.parts.filter((part) => part.type === "text" || part.type === "reasoning").map((part) => part.text ?? "").join("") : message.content ?? "").trim()}`;
+	return `${ROLE_HEADING[message.role] ?? `### ${message.role}`}\n\n${("parts" in message ? message.parts.filter((part) => isTextUIPart(part) || isReasoningUIPart(part)).map((part) => part.text).join("") : message.content ?? "").trim()}`;
 }
 /**
 * Converts a conversation to a Markdown document with a heading per message.
@@ -202,4 +183,4 @@ function ConversationDownload({ className, messages, filename = "conversation.md
 	});
 }
 //#endregion
-export { Conversation, ConversationContent, ConversationDownload, ConversationEmptyState, ConversationScrollButton, messagesToMarkdown };
+export { Conversation, ConversationContent, ConversationDownload, ConversationEmptyState, ConversationItem, ConversationScrollButton, messagesToMarkdown };

package/dist/components/Marker.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+
+//#region src/components/Marker.d.ts
+type MarkerVariant = "default" | "separator" | "border";
+type MarkerRenderProps = React.HTMLAttributes<HTMLElement> & {
+  ref?: React.Ref<HTMLElement>;
+};
+type MarkerRenderState = {
+  variant: MarkerVariant;
+};
+type MarkerRenderFunction = (props: MarkerRenderProps, state: MarkerRenderState) => React.ReactElement | null;
+type MarkerRender = React.ReactElement<React.HTMLAttributes<HTMLElement>> | MarkerRenderFunction;
+interface MarkerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Visual treatment for status, separator, or bordered marker rows. */
+  variant?: MarkerVariant;
+  /** Replace the root element while keeping marker classes, refs, and handlers merged. */
+  render?: MarkerRender;
+}
+interface MarkerVariantsOptions {
+  variant?: MarkerVariant | null;
+  className?: string;
+}
+declare function markerVariants({
+  variant,
+  className
+}?: MarkerVariantsOptions): string;
+/**
+ * Compact status or separator row for transcript events like compaction,
+ * checkpoints, and progress markers.
+ */
+declare function Marker({
+  className,
+  variant,
+  render,
+  ref,
+  ...props
+}: MarkerProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element | null;
+interface MarkerIconProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function MarkerIcon({
+  className,
+  ref,
+  ...props
+}: MarkerIconProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface MarkerContentProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function MarkerContent({
+  className,
+  ref,
+  ...props
+}: MarkerContentProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+//#endregion
+export { Marker, MarkerContent, MarkerContentProps, MarkerIcon, MarkerIconProps, MarkerProps, MarkerVariant, MarkerVariantsOptions, markerVariants };