@mcp-b/react-components 0.1.1 → 0.1.2

package/dist/components/ContextMenu.js

@@ -0,0 +1,270 @@
+import { c as ChevronRightIcon, o as CheckIcon, u as DotIcon } from "../icons-BsWc8g4E.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
+//#region src/components/ContextMenu.tsx
+/**
+* Root component that manages context menu state.
+*
+* @example
+* ```tsx
+* <ContextMenu.Root>
+*   <ContextMenu.Trigger>Right click here</ContextMenu.Trigger>
+*   <ContextMenu.Portal>
+*     <ContextMenu.Positioner>
+*       <ContextMenu.Popup>
+*         <ContextMenu.Item>Cut</ContextMenu.Item>
+*         <ContextMenu.Item>Copy</ContextMenu.Item>
+*         <ContextMenu.Item>Paste</ContextMenu.Item>
+*       </ContextMenu.Popup>
+*     </ContextMenu.Positioner>
+*   </ContextMenu.Portal>
+* </ContextMenu.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/context-menu | Base UI ContextMenu}
+*/
+const ContextMenuRoot = (props) => {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Root, {
+		"data-slot": "context-menu",
+		...props
+	});
+};
+/**
+* Interactive area that activates the menu on right-click or long-press.
+*/
+function ContextMenuTrigger({ className = "", ref, ...props }) {
+	const classes = ["context-menu__trigger", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(ContextMenu$1.Trigger, {
+		ref,
+		"data-slot": "context-menu-trigger",
+		className: classes,
+		...props
+	});
+}
+/**
+* Renders menu content in a portal.
+*/
+const ContextMenuPortal = (props) => {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, {
+		"data-slot": "context-menu-portal",
+		...props
+	});
+};
+/**
+* Positions the menu at the pointer location.
+*/
+function ContextMenuPositioner({ className = "", ref, ...props }) {
+	const classes = ["context-menu__positioner", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
+		ref,
+		"data-slot": "context-menu-positioner",
+		className: classes,
+		...props
+	});
+}
+/**
+* Container for menu items.
+*/
+function ContextMenuPopup({ className = "", ref, ...props }) {
+	const classes = ["context-menu__popup", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
+		ref,
+		"data-slot": "context-menu-content",
+		className: classes,
+		...props
+	});
+}
+function ContextMenuContent({ anchor, positionMethod, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenuPortal, { children: /* @__PURE__ */ jsx(ContextMenuPositioner, {
+		anchor,
+		positionMethod,
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		collisionBoundary,
+		collisionPadding,
+		sticky,
+		arrowPadding,
+		disableAnchorTracking,
+		collisionAvoidance,
+		children: /* @__PURE__ */ jsx(ContextMenuPopup, { ...props })
+	}) });
+}
+/**
+* Interactive menu item.
+*/
+function ContextMenuItem({ className = "", inset, variant = "default", ref, ...props }) {
+	const classes = [
+		"context-menu__item",
+		inset && "context-menu__item--inset",
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(ContextMenu$1.Item, {
+		ref,
+		"data-slot": "context-menu-item",
+		"data-inset": inset || void 0,
+		"data-variant": variant,
+		className: classes,
+		...props
+	});
+}
+/**
+* Visual separator between menu sections.
+*/
+function ContextMenuSeparator({ className = "", ref, ...props }) {
+	const classes = ["context-menu__separator", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
+		ref,
+		"data-slot": "context-menu-separator",
+		className: classes,
+		...props
+	});
+}
+function ContextMenuGroup({ className = "", ref, ...props }) {
+	const classes = ["context-menu__group", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(ContextMenu$1.Group, {
+		ref,
+		"data-slot": "context-menu-group",
+		className: classes,
+		...props
+	});
+}
+function ContextMenuLabel({ className = "", inset, ref, ...props }) {
+	const classes = [
+		"context-menu__label",
+		inset && "context-menu__label--inset",
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(ContextMenu$1.GroupLabel, {
+		ref,
+		"data-slot": "context-menu-label",
+		"data-inset": inset || void 0,
+		className: classes,
+		...props
+	});
+}
+function ContextMenuCheckboxItem({ className = "", children, ref, ...props }) {
+	const classes = ["context-menu__checkbox-item", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
+		ref,
+		"data-slot": "context-menu-checkbox-item",
+		className: classes,
+		...props,
+		children: [/* @__PURE__ */ jsx(ContextMenu$1.CheckboxItemIndicator, {
+			className: "context-menu__indicator",
+			children: /* @__PURE__ */ jsx(CheckIcon, {})
+		}), children]
+	});
+}
+function ContextMenuRadioGroup({ className = "", ref, ...props }) {
+	const classes = ["context-menu__radio-group", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(ContextMenu$1.RadioGroup, {
+		ref,
+		"data-slot": "context-menu-radio-group",
+		className: classes,
+		...props
+	});
+}
+function ContextMenuRadioItem({ className = "", children, ref, ...props }) {
+	const classes = ["context-menu__radio-item", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
+		ref,
+		"data-slot": "context-menu-radio-item",
+		className: classes,
+		...props,
+		children: [/* @__PURE__ */ jsx(ContextMenu$1.RadioItemIndicator, {
+			className: "context-menu__indicator",
+			children: /* @__PURE__ */ jsx(DotIcon, { size: 8 })
+		}), children]
+	});
+}
+function ContextMenuShortcut({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "context-menu-shortcut",
+		className: ["context-menu__shortcut", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+function ContextMenuSub(props) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.SubmenuRoot, {
+		"data-slot": "context-menu-sub",
+		...props
+	});
+}
+function ContextMenuSubContent({ side = "right", align = "start", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenuContent, {
+		"data-slot": "context-menu-sub-content",
+		side,
+		align,
+		sideOffset,
+		...props
+	});
+}
+function ContextMenuSubTrigger({ className = "", inset, children, ref, ...props }) {
+	const classes = [
+		"context-menu__submenu-trigger",
+		inset && "context-menu__item--inset",
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs(ContextMenu$1.SubmenuTrigger, {
+		ref,
+		"data-slot": "context-menu-sub-trigger",
+		"data-inset": inset || void 0,
+		className: classes,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "context-menu__submenu-icon" })]
+	});
+}
+/**
+* A context menu that appears at the pointer on right-click or long-press.
+* Provides keyboard navigation and supports nested submenus.
+*
+* @example
+* ```tsx
+* // Basic context menu
+* <ContextMenu.Root>
+*   <ContextMenu.Trigger>
+*     <div style={{ padding: '2rem', border: '1px dashed gray' }}>
+*       Right-click here
+*     </div>
+*   </ContextMenu.Trigger>
+*   <ContextMenu.Portal>
+*     <ContextMenu.Positioner>
+*       <ContextMenu.Popup>
+*         <ContextMenu.Item onClick={() => console.log('Cut')}>Cut</ContextMenu.Item>
+*         <ContextMenu.Item onClick={() => console.log('Copy')}>Copy</ContextMenu.Item>
+*         <ContextMenu.Item onClick={() => console.log('Paste')}>Paste</ContextMenu.Item>
+*         <ContextMenu.Separator />
+*         <ContextMenu.Item onClick={() => console.log('Delete')}>Delete</ContextMenu.Item>
+*       </ContextMenu.Popup>
+*     </ContextMenu.Positioner>
+*   </ContextMenu.Portal>
+* </ContextMenu.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/context-menu | Base UI ContextMenu}
+*/
+const ContextMenu = Object.assign(ContextMenuRoot, {
+	Root: ContextMenuRoot,
+	Trigger: ContextMenuTrigger,
+	Portal: ContextMenuPortal,
+	Positioner: ContextMenuPositioner,
+	Popup: ContextMenuPopup,
+	Content: ContextMenuContent,
+	Item: ContextMenuItem,
+	Separator: ContextMenuSeparator,
+	Group: ContextMenuGroup,
+	Label: ContextMenuLabel,
+	CheckboxItem: ContextMenuCheckboxItem,
+	RadioGroup: ContextMenuRadioGroup,
+	RadioItem: ContextMenuRadioItem,
+	Shortcut: ContextMenuShortcut,
+	Sub: ContextMenuSub,
+	SubContent: ContextMenuSubContent,
+	SubTrigger: ContextMenuSubTrigger
+});
+//#endregion
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPopup, ContextMenuPortal, ContextMenuPositioner, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };

package/dist/components/Conversation.d.ts

@@ -0,0 +1,166 @@
+import { t as Button } from "../Button-QCM8ZKgR.js";
+import * as React from "react";
+
+//#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 {
+  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;
+  /** ConversationContent, messages, empty state, scroll button, or download button. */
+  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.
+ *
+ * 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.
+ *
+ * Styling consumes Sigvelo canvas, surface, border, spacing, radius, shadow,
+ * and motion tokens. Add new behavior in this package when multiple apps need
+ * it; app code should compose children and avoid reaching into scroll internals.
+ *
+ * Pair with {@link ConversationContent} for layout, {@link ConversationScrollButton}
+ * for a "jump to latest" affordance, and {@link ConversationDownload} to export
+ * the transcript as Markdown.
+ *
+ * @example
+ * ```tsx
+ * <Conversation>
+ *   <ConversationContent>
+ *     {messages.map((m) => <Message key={m.id} {...m} />)}
+ *   </ConversationContent>
+ *   <ConversationScrollButton />
+ * </Conversation>
+ * ```
+ *
+ * @see {@link https://elements.ai-sdk.dev/components/conversation | AI Elements Conversation}
+ */
+declare function Conversation({
+  className,
+  children,
+  ref,
+  ...props
+}: ConversationProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ConversationContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * Inner layout wrapper for conversation children. Applies vertical stacking
+ * and padding; does not scroll (the parent {@link Conversation} does).
+ */
+declare function ConversationContent({
+  className,
+  children,
+  ref,
+  ...props
+}: ConversationContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ConversationEmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: React.ReactNode;
+}
+/**
+ * Placeholder shown when there are no messages yet. Renders an icon, title,
+ * and description stacked vertically; pass `children` to override the
+ * default layout entirely.
+ */
+declare function ConversationEmptyState({
+  className,
+  title,
+  description,
+  icon,
+  children,
+  ref,
+  ...props
+}: ConversationEmptyStateProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ConversationScrollButtonProps extends Omit<React.ComponentProps<typeof Button>, "onClick" | "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;
+}
+/**
+ * Floating button that scrolls the conversation to the latest message.
+ * Hidden while the viewport is already pinned to the bottom.
+ */
+declare function ConversationScrollButton({
+  className,
+  variant,
+  color,
+  size,
+  onClick,
+  label,
+  children,
+  ref,
+  ...props
+}: ConversationScrollButtonProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element | null;
+/**
+ * Converts a conversation to a Markdown document with a heading per message.
+ *
+ * @param messages - Array of messages to serialize.
+ * @param formatMessage - Optional per-message formatter; defaults to
+ *   `### Role\n\n<text>` blocks joined by blank lines.
+ */
+declare function messagesToMarkdown(messages: ConversationMessage[], formatMessage?: (message: ConversationMessage, index: number) => string): string;
+interface ConversationDownloadProps extends Omit<React.ComponentProps<typeof Button>, "onClick" | "children" | "className"> {
+  className?: string;
+  messages: ConversationMessage[];
+  /** Filename for the downloaded Markdown file. */
+  filename?: string;
+  /** Customize the text for each message in the exported Markdown. */
+  formatMessage?: (message: ConversationMessage, index: number) => string;
+  /** Accessible label for the button. */
+  label?: string;
+  children?: React.ReactNode;
+}
+/**
+ * Button that exports the current conversation as a Markdown file.
+ *
+ * Skipped when `messages` is empty. For custom export flows, use
+ * {@link messagesToMarkdown} directly.
+ */
+declare function ConversationDownload({
+  className,
+  messages,
+  filename,
+  formatMessage,
+  label,
+  variant,
+  color,
+  size,
+  children,
+  ref,
+  ...props
+}: ConversationDownloadProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element | null;
+//#endregion
+export { Conversation, ConversationContent, ConversationContentProps, ConversationDownload, ConversationDownloadProps, ConversationEmptyState, ConversationEmptyStateProps, ConversationMessage, ConversationProps, ConversationScrollButton, ConversationScrollButtonProps, messagesToMarkdown };

package/dist/components/Conversation.js

@@ -0,0 +1,202 @@
+import { d as DownloadIcon, t as ArrowDownIcon } from "../icons-BsWc8g4E.js";
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Button } from "./Button.js";
+import { useStickToBottom } from "./useStickToBottom.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#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.
+*
+* 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.
+*
+* Styling consumes Sigvelo canvas, surface, border, spacing, radius, shadow,
+* and motion tokens. Add new behavior in this package when multiple apps need
+* it; app code should compose children and avoid reaching into scroll internals.
+*
+* Pair with {@link ConversationContent} for layout, {@link ConversationScrollButton}
+* for a "jump to latest" affordance, and {@link ConversationDownload} to export
+* the transcript as Markdown.
+*
+* @example
+* ```tsx
+* <Conversation>
+*   <ConversationContent>
+*     {messages.map((m) => <Message key={m.id} {...m} />)}
+*   </ConversationContent>
+*   <ConversationScrollButton />
+* </Conversation>
+* ```
+*
+* @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: handleViewportRef,
+			role: "log",
+			"aria-live": "polite",
+			"aria-relevant": "additions text",
+			tabIndex: 0,
+			className: cx("conversation", className),
+			...props,
+			children
+		})
+	});
+}
+/**
+* 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]),
+		className: cx("conversation__content", className),
+		...props,
+		children
+	});
+}
+/**
+* Placeholder shown when there are no messages yet. Renders an icon, title,
+* and description stacked vertically; pass `children` to override the
+* default layout entirely.
+*/
+function ConversationEmptyState({ className, title = "No messages yet", description = "Start a conversation to see messages here", icon, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("conversation__empty", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+			icon ? /* @__PURE__ */ jsx("span", {
+				className: "conversation__empty-icon",
+				"aria-hidden": "true",
+				children: icon
+			}) : null,
+			title ? /* @__PURE__ */ jsx("div", {
+				className: "conversation__empty-title",
+				children: title
+			}) : null,
+			description ? /* @__PURE__ */ jsx("div", {
+				className: "conversation__empty-description",
+				children: description
+			}) : null
+		] })
+	});
+}
+/**
+* Floating button that scrolls the conversation to the latest message.
+* Hidden while the viewport is already pinned to the bottom.
+*/
+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",
+		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, {})
+	});
+}
+const ROLE_HEADING = {
+	user: "### User",
+	assistant: "### Assistant",
+	system: "### System",
+	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()}`;
+}
+/**
+* Converts a conversation to a Markdown document with a heading per message.
+*
+* @param messages - Array of messages to serialize.
+* @param formatMessage - Optional per-message formatter; defaults to
+*   `### Role\n\n<text>` blocks joined by blank lines.
+*/
+function messagesToMarkdown(messages, formatMessage = defaultFormatMessage) {
+	return messages.map((message, index) => formatMessage(message, index)).join("\n\n");
+}
+/**
+* Button that exports the current conversation as a Markdown file.
+*
+* Skipped when `messages` is empty. For custom export flows, use
+* {@link messagesToMarkdown} directly.
+*/
+function ConversationDownload({ className, messages, filename = "conversation.md", formatMessage, label = "Download conversation", variant = "outline", color = "neutral", size = "icon", children, ref, ...props }) {
+	if (messages.length === 0) return null;
+	const handleClick = () => {
+		const markdown = messagesToMarkdown(messages, formatMessage);
+		const blob = new Blob([markdown], { type: "text/markdown;charset=utf-8" });
+		const url = URL.createObjectURL(blob);
+		const anchor = document.createElement("a");
+		anchor.href = url;
+		anchor.download = filename;
+		document.body.appendChild(anchor);
+		anchor.click();
+		anchor.remove();
+		URL.revokeObjectURL(url);
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		type: "button",
+		variant,
+		color,
+		size,
+		className: cx("conversation__download-button", className),
+		"aria-label": label,
+		onClick: handleClick,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(DownloadIcon, {})
+	});
+}
+//#endregion
+export { Conversation, ConversationContent, ConversationDownload, ConversationEmptyState, ConversationScrollButton, messagesToMarkdown };