@mcp-b/react-components 0.6.5 → 0.7.1

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 { d as DownloadIcon, t as ArrowDownIcon } from "../icons-BAlTbWWP.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/Dialog.js

@@ -1,4 +1,4 @@
-import { F as XIcon } from "../icons-BCNawx-T.js";
+import { I as XIcon } from "../icons-BAlTbWWP.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";

package/dist/components/EnvironmentVariables.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { a as CheckIcon, f as EyeIcon, l as CopyIcon, p as EyeOffIcon } from "../icons-BCNawx-T.js";
+import { a as CheckIcon, l as CopyIcon, m as EyeOffIcon, p as EyeIcon } from "../icons-BAlTbWWP.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { Badge } from "./Badge.js";

package/dist/components/FileTree.js

@@ -1,2 +1,2 @@
-import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../FileTree-BWQZ0FSi.js";
+import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../FileTree-BdK93Uuu.js";
 export { FileTree, FileTreeActions, FileTreeFile, FileTreeFolder, FileTreeIcon, FileTreeName };

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 };

package/dist/components/Marker.js

@@ -0,0 +1,89 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Marker.tsx
+function markerVariants({ variant = "default", className } = {}) {
+	return cx("marker", `marker--${variant ?? "default"}`, className);
+}
+function assignRef(ref, value) {
+	if (!ref) return;
+	if (typeof ref === "function") {
+		ref(value);
+		return;
+	}
+	ref.current = value;
+}
+function mergeRefs(...refs) {
+	const activeRefs = refs.filter(Boolean);
+	if (activeRefs.length === 0) return void 0;
+	return (value) => {
+		for (const activeRef of activeRefs) assignRef(activeRef, value);
+	};
+}
+function isEventHandler(propName, value) {
+	return /^on[A-Z]/.test(propName) && typeof value === "function";
+}
+function mergeRenderedMarkerProps(renderProps, markerProps) {
+	const mergedProps = {
+		...renderProps,
+		...markerProps
+	};
+	const markerPropsRecord = markerProps;
+	for (const propName of Object.keys(renderProps)) {
+		const renderValue = renderProps[propName];
+		const markerValue = markerPropsRecord[propName];
+		if (isEventHandler(propName, renderValue) && isEventHandler(propName, markerValue)) mergedProps[propName] = (...args) => {
+			renderValue(...args);
+			markerValue(...args);
+		};
+	}
+	mergedProps.className = cx(renderProps.className, markerProps.className);
+	mergedProps.style = renderProps.style || markerProps.style ? {
+		...renderProps.style,
+		...markerProps.style
+	} : void 0;
+	mergedProps.ref = mergeRefs(renderProps.ref, markerProps.ref);
+	return mergedProps;
+}
+/**
+* Compact status or separator row for transcript events like compaction,
+* checkpoints, and progress markers.
+*/
+function Marker({ className, variant = "default", render, ref, ...props }) {
+	const rootProps = {
+		ref,
+		"data-slot": "marker",
+		"data-variant": variant,
+		className: markerVariants({
+			variant,
+			className
+		}),
+		...props
+	};
+	const markerProps = {
+		...rootProps,
+		ref
+	};
+	if (typeof render === "function") return render(markerProps, { variant });
+	if (React.isValidElement(render)) return React.cloneElement(render, mergeRenderedMarkerProps(render.props, markerProps));
+	return /* @__PURE__ */ jsx("div", { ...rootProps });
+}
+function MarkerIcon({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "marker-icon",
+		"aria-hidden": "true",
+		className: cx("marker__icon", className),
+		...props
+	});
+}
+function MarkerContent({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "marker-content",
+		className: cx("marker__content", className),
+		...props
+	});
+}
+//#endregion
+export { Marker, MarkerContent, MarkerIcon, markerVariants };

package/dist/components/McpServerPicker.js

@@ -1,4 +1,4 @@
-import { A as SpinnerIcon, D as PlusIcon, N as WarningIcon, a as CheckIcon } from "../icons-BCNawx-T.js";
+import { O as PlusIcon, P as WarningIcon, a as CheckIcon, j as SpinnerIcon } from "../icons-BAlTbWWP.js";
 import { Button } from "./Button.js";
 import { MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRoot, MenuShortcut, MenuTrigger } from "./Menu.js";
 import { getMcpServerIconSrc } from "../utils/mcp-server-catalog.js";

package/dist/components/Menubar.js

@@ -1,4 +1,4 @@
-import { a as CheckIcon, c as ChevronRightIcon, u as DotIcon } from "../icons-BCNawx-T.js";
+import { a as CheckIcon, c as ChevronRightIcon, u as DotIcon } from "../icons-BAlTbWWP.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";

package/dist/components/Message.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { m as FileIcon, n as ArrowLeftIcon, r as ArrowRightIcon } from "../icons-BCNawx-T.js";
+import { h as FileIcon, n as ArrowLeftIcon, r as ArrowRightIcon } from "../icons-BAlTbWWP.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { t as AttachmentPreview } from "../attachment-preview-ChtC3HiU.js";

package/dist/components/MessageScroller.d.ts

@@ -0,0 +1,52 @@
+import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
+import * as React from "react";
+import { MessageScroller as MessageScroller$1, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
+
+//#region src/components/MessageScroller.d.ts
+type MessageScrollerProviderProps = React.ComponentProps<typeof MessageScroller$1.Provider>;
+interface MessageScrollerProps extends React.ComponentProps<typeof MessageScroller$1.Root> {
+  /** Extra class names merged onto the scroll container. */
+  className?: string;
+}
+type MessageScrollerViewportProps = React.ComponentProps<typeof MessageScroller$1.Viewport>;
+type MessageScrollerContentProps = React.ComponentProps<typeof MessageScroller$1.Content>;
+type MessageScrollerItemProps = React.ComponentProps<typeof MessageScroller$1.Item>;
+declare function MessageScrollerProvider(props: MessageScrollerProviderProps): React.JSX.Element;
+/**
+ * Scroll container for chat transcripts, wrapping shadcn's message scroller
+ * primitive with design-system classes.
+ */
+declare function MessageScroller({
+  className,
+  ...props
+}: MessageScrollerProps): React.JSX.Element;
+declare function MessageScrollerViewport({
+  className,
+  ...props
+}: MessageScrollerViewportProps): React.JSX.Element;
+declare function MessageScrollerContent({
+  className,
+  ...props
+}: MessageScrollerContentProps): React.JSX.Element;
+declare function MessageScrollerItem({
+  className,
+  scrollAnchor,
+  ...props
+}: MessageScrollerItemProps): React.JSX.Element;
+interface MessageScrollerButtonProps extends Omit<React.ComponentProps<typeof MessageScroller$1.Button>, "children" | "className" | "color" | "render">, Pick<ButtonProps, "color" | "size" | "variant"> {
+  className?: string;
+  children?: React.ReactNode;
+  render?: React.ComponentProps<typeof MessageScroller$1.Button>["render"];
+}
+declare function MessageScrollerButton({
+  className,
+  children,
+  color,
+  direction,
+  render,
+  size,
+  variant,
+  ...props
+}: MessageScrollerButtonProps): React.JSX.Element;
+//#endregion
+export { MessageScroller, MessageScrollerButton, MessageScrollerButtonProps, MessageScrollerContent, MessageScrollerContentProps, MessageScrollerItem, MessageScrollerItemProps, MessageScrollerProps, MessageScrollerProvider, MessageScrollerProviderProps, MessageScrollerViewport, MessageScrollerViewportProps, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };

package/dist/components/MessageScroller.js

@@ -0,0 +1,62 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { t as ArrowDownIcon } from "../icons-BAlTbWWP.js";
+import { Button } from "./Button.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { MessageScroller as MessageScroller$1, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
+//#region src/components/MessageScroller.tsx
+function MessageScrollerProvider(props) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Provider, { ...props });
+}
+/**
+* Scroll container for chat transcripts, wrapping shadcn's message scroller
+* primitive with design-system classes.
+*/
+function MessageScroller({ className, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Root, {
+		"data-slot": "message-scroller",
+		className: cx("message-scroller", className),
+		...props
+	});
+}
+function MessageScrollerViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Viewport, {
+		"data-slot": "message-scroller-viewport",
+		className: cx("message-scroller__viewport", className),
+		...props
+	});
+}
+function MessageScrollerContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Content, {
+		"data-slot": "message-scroller-content",
+		className: cx("message-scroller__content", className),
+		...props
+	});
+}
+function MessageScrollerItem({ className, scrollAnchor = false, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Item, {
+		"data-slot": "message-scroller-item",
+		scrollAnchor,
+		className: cx("message-scroller__item", className),
+		...props
+	});
+}
+function MessageScrollerButton({ className, children, color = "neutral", direction = "end", render, size = "icon-sm", variant = "normal", ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Button, {
+		"data-slot": "message-scroller-button",
+		direction,
+		className: cx("message-scroller__button", className),
+		render: render ?? /* @__PURE__ */ jsx(Button, {
+			color,
+			size,
+			variant
+		}),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ArrowDownIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "message-scroller__button-label",
+			children: direction === "end" ? "Scroll to end" : "Scroll to start"
+		})] })
+	});
+}
+//#endregion
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };