@mcp-b/react-components 0.1.5 → 0.2.0

package/dist/components/Activity.d.ts

@@ -0,0 +1,148 @@
+import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
+import * as React from "react";
+
+//#region src/components/Activity.d.ts
+interface ActivityProps extends Omit<CollapsibleRootProps, "className" | "unstyled"> {
+  className?: string;
+  /** While true, the trigger label shimmers. */
+  isStreaming?: boolean;
+}
+/**
+ * A collapsible activity line that aggregates agent activity (tool calls,
+ * file edits, searches) instead of rendering every call as its own block.
+ * Borderless, Claude/Codex style: the collapsed state is a single plain text
+ * line whose label shimmers while streaming — pass the latest action as the
+ * label while streaming, and a short summary once settled. Expanding reveals
+ * the full log. Compose with ActivityTrigger, ActivityContent, and
+ * ActivityItem.
+ *
+ * @example
+ * ```tsx
+ * <Activity isStreaming={running}>
+ *   <ActivityTrigger label={running ? "Searching code" : "Read 2 files and searched code"} />
+ *   <ActivityContent>
+ *     <ActivityItem>Searched code</ActivityItem>
+ *     <ActivityItem>Edited a file</ActivityItem>
+ *   </ActivityContent>
+ * </Activity>
+ * ```
+ */
+declare function Activity({
+  className,
+  isStreaming,
+  defaultOpen,
+  ref,
+  ...props
+}: ActivityProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ActivityTriggerProps extends Omit<CollapsibleTriggerProps, "className" | "unstyled"> {
+  className?: string;
+  /** Header text. Defaults to "Working…". */
+  label?: React.ReactNode;
+}
+/**
+ * Clickable header line that toggles the activity log. The label shimmers
+ * while the parent Activity is streaming.
+ */
+declare function ActivityTrigger({
+  className,
+  label,
+  children,
+  ref,
+  ...props
+}: ActivityTriggerProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+interface ActivityContentProps extends Omit<CollapsiblePanelProps, "className" | "unstyled"> {
+  className?: string;
+}
+/** The collapsible log of ActivityItem children. */
+declare function ActivityContent({
+  className,
+  children,
+  ref,
+  ...props
+}: ActivityContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ActivityItemGroupProps extends Omit<CollapsibleRootProps, "className" | "unstyled"> {
+  className?: string;
+  /** The row text, e.g. "Ran bash · vp test". */
+  label: React.ReactNode;
+  /** Optional leading icon for the row. */
+  icon?: React.ReactNode;
+}
+/**
+ * An expandable activity row — the second collapse level. The trigger reads
+ * like a plain ActivityItem; expanding reveals chrome-free detail (a Terminal,
+ * a thought trace) flush inside the outer Activity log.
+ */
+declare function ActivityItemGroup({
+  className,
+  label,
+  icon,
+  children,
+  ref,
+  ...props
+}: ActivityItemGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ActivityTextProps extends React.HTMLAttributes<HTMLDivElement> {}
+/** Scrollable plain-text detail inside an ActivityItemGroup. */
+declare function ActivityText({
+  className,
+  children,
+  ref,
+  ...props
+}: ActivityTextProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ActivityItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Optional leading icon for the row. */
+  icon?: React.ReactNode;
+}
+/**
+ * A single activity row — "Searched code", "Edited a file", etc. Free-form
+ * content; keep it to one line so the streaming peek reads well.
+ */
+declare function ActivityItem({
+  className,
+  icon,
+  children,
+  ref,
+  ...props
+}: ActivityItemProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ActivityOutputProps extends React.HTMLAttributes<HTMLPreElement> {}
+/** Scrollable monospaced output inside an ActivityPanel. */
+declare function ActivityOutput({
+  className,
+  children,
+  ref,
+  ...props
+}: ActivityOutputProps & {
+  ref?: React.Ref<HTMLPreElement>;
+}): React.JSX.Element;
+interface ActivityPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  label: React.ReactNode;
+  text?: string;
+  status?: React.ReactNode;
+  error?: boolean;
+}
+/** Quiet detail panel for tool output inside an ActivityItemGroup. */
+declare function ActivityPanel({
+  className,
+  label,
+  text,
+  status,
+  error,
+  children,
+  ref,
+  ...props
+}: ActivityPanelProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { Activity, ActivityContent, ActivityContentProps, ActivityItem, ActivityItemGroup, ActivityItemGroupProps, ActivityItemProps, ActivityOutput, ActivityOutputProps, ActivityPanel, ActivityPanelProps, ActivityProps, ActivityText, ActivityTextProps, ActivityTrigger, ActivityTriggerProps };

package/dist/components/Activity.js

@@ -0,0 +1,177 @@
+import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { l as ChevronRightIcon } from "../icons-Bf7JMKk-.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Activity.tsx
+/**
+* A collapsible activity line that aggregates agent activity (tool calls,
+* file edits, searches) instead of rendering every call as its own block.
+* Borderless, Claude/Codex style: the collapsed state is a single plain text
+* line whose label shimmers while streaming — pass the latest action as the
+* label while streaming, and a short summary once settled. Expanding reveals
+* the full log. Compose with ActivityTrigger, ActivityContent, and
+* ActivityItem.
+*
+* @example
+* ```tsx
+* <Activity isStreaming={running}>
+*   <ActivityTrigger label={running ? "Searching code" : "Read 2 files and searched code"} />
+*   <ActivityContent>
+*     <ActivityItem>Searched code</ActivityItem>
+*     <ActivityItem>Edited a file</ActivityItem>
+*   </ActivityContent>
+* </Activity>
+* ```
+*/
+function Activity({ className, isStreaming = false, defaultOpen = false, ref, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsibleRoot, {
+		ref,
+		className: cx("activity", className),
+		defaultOpen,
+		"data-streaming": isStreaming || void 0,
+		...props,
+		unstyled: true
+	});
+}
+/**
+* Clickable header line that toggles the activity log. The label shimmers
+* while the parent Activity is streaming.
+*/
+function ActivityTrigger({ className, label = "Working…", children, ref, ...props }) {
+	if (children !== void 0 && children !== null) return /* @__PURE__ */ jsx(CollapsibleTrigger, {
+		ref,
+		className: cx("activity__trigger", className),
+		...props,
+		unstyled: true,
+		children
+	});
+	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		ref,
+		className: cx("activity__trigger", className),
+		...props,
+		unstyled: true,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "activity__trigger-label",
+			children: label
+		}), /* @__PURE__ */ jsx("span", {
+			className: "activity__trigger-icon",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+		})]
+	});
+}
+/** The collapsible log of ActivityItem children. */
+function ActivityContent({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsiblePanel, {
+		ref,
+		className: cx("activity__content", className),
+		...props,
+		unstyled: true,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "activity__list",
+			children
+		})
+	});
+}
+/**
+* An expandable activity row — the second collapse level. The trigger reads
+* like a plain ActivityItem; expanding reveals chrome-free detail (a Terminal,
+* a thought trace) flush inside the outer Activity log.
+*/
+function ActivityItemGroup({ className, label, icon, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs(CollapsibleRoot, {
+		ref,
+		className: cx("activity__group", className),
+		...props,
+		unstyled: true,
+		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			className: "activity__group-trigger",
+			unstyled: true,
+			children: [
+				icon ? /* @__PURE__ */ jsx("span", {
+					className: "activity__item-icon",
+					"aria-hidden": "true",
+					children: icon
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: "activity__item-text",
+					children: label
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "activity__group-icon",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+				})
+			]
+		}), /* @__PURE__ */ jsx(CollapsiblePanel, {
+			className: "activity__group-panel",
+			unstyled: true,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "activity__group-panel-inner",
+				children
+			})
+		})]
+	});
+}
+/** Scrollable plain-text detail inside an ActivityItemGroup. */
+function ActivityText({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		tabIndex: 0,
+		className: cx("activity__group-text", className),
+		...props,
+		children
+	});
+}
+/**
+* A single activity row — "Searched code", "Edited a file", etc. Free-form
+* content; keep it to one line so the streaming peek reads well.
+*/
+function ActivityItem({ className, icon, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("activity__item", className),
+		...props,
+		children: [icon ? /* @__PURE__ */ jsx("span", {
+			className: "activity__item-icon",
+			"aria-hidden": "true",
+			children: icon
+		}) : null, /* @__PURE__ */ jsx("span", {
+			className: "activity__item-text",
+			children
+		})]
+	});
+}
+/** Scrollable monospaced output inside an ActivityPanel. */
+function ActivityOutput({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("pre", {
+		ref,
+		tabIndex: 0,
+		className: cx("activity__shell-output", className),
+		...props,
+		children
+	});
+}
+/** Quiet detail panel for tool output inside an ActivityItemGroup. */
+function ActivityPanel({ className, label, text, status, error, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("activity__shell", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "activity__shell-label",
+				children: label
+			}),
+			children ?? (text ? /* @__PURE__ */ jsx(ActivityOutput, { children: text }) : null),
+			status ? /* @__PURE__ */ jsx("span", {
+				className: "activity__shell-status",
+				"data-error": error || void 0,
+				children: status
+			}) : null
+		]
+	});
+}
+//#endregion
+export { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityOutput, ActivityPanel, ActivityText, ActivityTrigger };

package/dist/components/AgentChat.d.ts

@@ -0,0 +1,61 @@
+import { PromptInputMessage, PromptInputStatus } from "./PromptInput.js";
+import * as React from "react";
+import { UIDataTypes, UIMessage, UITools } from "ai";
+
+//#region src/components/AgentChat.d.ts
+type AgentChatMessage<Metadata = unknown, DataParts extends UIDataTypes = UIDataTypes, Tools extends UITools = UITools> = UIMessage<Metadata, DataParts, Tools>;
+type AgentChatPart<MessageT extends AgentChatMessage = AgentChatMessage> = MessageT["parts"][number];
+interface AgentChatRenderPartContext<MessageT extends AgentChatMessage = AgentChatMessage> {
+  message: MessageT;
+  part: AgentChatPart<MessageT>;
+  partIndex: number;
+  defaultRender: () => React.ReactNode;
+}
+interface AgentChatRenderMessageContext<MessageT extends AgentChatMessage = AgentChatMessage> {
+  message: MessageT;
+  messageIndex: number;
+}
+interface AgentChatProps<MessageT extends AgentChatMessage = AgentChatMessage> {
+  className?: string;
+  /** AI SDK `UIMessage`s to render, oldest first. */
+  messages: readonly MessageT[];
+  /** Drives the composer's send/stop affordance and streaming indicators. */
+  status?: PromptInputStatus;
+  /** Called with the composed message when the user submits. Omit for a read-only transcript. */
+  onSubmit?: (message: PromptInputMessage) => void | Promise<void>;
+  /** Called when the user hits stop while `status` is streaming/submitted. */
+  onStop?: () => void;
+  placeholder?: string;
+  disabled?: boolean;
+  /** Rendered in place of the transcript while `messages` is empty. */
+  emptyState?: React.ReactNode;
+  /** Extra controls rendered in the composer toolbar. */
+  composerTools?: React.ReactNode;
+  /** Override rendering per part; return `undefined` to fall back to the default part UI. */
+  renderPart?: (context: AgentChatRenderPartContext<MessageT>) => React.ReactNode | undefined;
+  /** Rendered after each message's parts — for actions, citations, and the like. */
+  renderMessageAfter?: (context: AgentChatRenderMessageContext<MessageT>) => React.ReactNode;
+}
+/**
+ * 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`.
+ */
+declare function AgentChat<MessageT extends AgentChatMessage = AgentChatMessage>({
+  className,
+  messages,
+  status,
+  onSubmit,
+  onStop,
+  placeholder,
+  disabled,
+  emptyState,
+  composerTools,
+  renderPart,
+  renderMessageAfter,
+  ref
+}: AgentChatProps<MessageT> & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { AgentChat, AgentChatMessage, AgentChatPart, AgentChatProps, AgentChatRenderMessageContext, AgentChatRenderPartContext };

package/dist/components/AgentChat.js

@@ -0,0 +1,91 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton } from "./Conversation.js";
+import { Message, MessageContent, MessageResponse } from "./Message.js";
+import { PromptInput, PromptInputBody, PromptInputFooter, PromptInputSubmit, PromptInputTextarea, PromptInputTools } from "./PromptInput.js";
+import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
+import { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput } from "./Tool.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getToolName, isReasoningUIPart, isTextUIPart, isToolUIPart } from "ai";
+//#region src/components/AgentChat.tsx
+function getPartKey(part, partIndex) {
+	if (isToolUIPart(part)) return part.toolCallId;
+	if ("id" in part && typeof part.id === "string") return `${part.type}-${part.id}`;
+	return `${part.type}-${partIndex}`;
+}
+function renderDefaultPart(part) {
+	if (isTextUIPart(part) && part.text) return /* @__PURE__ */ jsx(MessageResponse, { children: part.text });
+	if (isReasoningUIPart(part) && part.text) return /* @__PURE__ */ jsxs(Reasoning, {
+		isStreaming: part.state === "streaming",
+		children: [/* @__PURE__ */ jsx(ReasoningTrigger, {}), /* @__PURE__ */ jsx(ReasoningContent, { children: part.text })]
+	});
+	if (isToolUIPart(part)) {
+		const output = "output" in part ? part.output : void 0;
+		const errorText = "errorText" in part ? part.errorText : void 0;
+		const toolType = part.type === "dynamic-tool" ? "dynamic-tool" : "function";
+		return /* @__PURE__ */ jsxs(Tool, {
+			state: part.state,
+			children: [/* @__PURE__ */ jsx(ToolHeader, {
+				type: toolType,
+				toolName: getToolName(part),
+				title: part.title
+			}), /* @__PURE__ */ jsxs(ToolContent, { children: [part.input !== void 0 ? /* @__PURE__ */ jsx(ToolInput, { input: part.input }) : null, /* @__PURE__ */ jsx(ToolOutput, {
+				output,
+				errorText
+			})] })]
+		});
+	}
+	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`.
+*/
+function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerTools, renderPart, renderMessageAfter, ref }) {
+	const handleSubmit = React.useCallback((message) => {
+		onSubmit?.(message);
+	}, [onSubmit]);
+	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__ */ jsx(MessageContent, { children: rendered }, getPartKey(part, partIndex)) : null;
+				}), renderMessageAfter?.({
+					message,
+					messageIndex
+				})]
+			}, message.id ?? messageIndex))] }), /* @__PURE__ */ jsx(ConversationScrollButton, {})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "agent-chat__composer",
+			children: /* @__PURE__ */ jsxs(PromptInput, {
+				onSubmit: handleSubmit,
+				children: [/* @__PURE__ */ jsx(PromptInputBody, { children: /* @__PURE__ */ jsx(PromptInputTextarea, {
+					"aria-label": "Message",
+					placeholder,
+					disabled
+				}) }), /* @__PURE__ */ jsxs(PromptInputFooter, { children: [/* @__PURE__ */ jsx(PromptInputTools, { children: composerTools }), /* @__PURE__ */ jsx(PromptInputSubmit, {
+					status,
+					onStop
+				})] })]
+			})
+		})]
+	});
+}
+//#endregion
+export { AgentChat };

package/dist/components/AgentConnection.js

@@ -1,7 +1,7 @@
-import { v as LinkIcon } from "../icons-BsWc8g4E.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
+import { b as LinkIcon } from "../icons-Bf7JMKk-.js";
 import { Button } from "./Button.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-CttHhWcb.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-BrCoypnc.js";
 import { Popover } from "./Popover.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Artifact.js

@@ -1,5 +1,5 @@
-import { O as XIcon } from "../icons-BsWc8g4E.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
+import { P as XIcon } from "../icons-Bf7JMKk-.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import "react";

package/dist/components/ChainOfThought.d.ts

@@ -1,17 +1,7 @@
 import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
+import { v as IconProps } from "../icons-BklFyZbx.js";
 import * as React from "react";
 
-//#region src/components/_internal/icons.d.ts
-/**
- * Small inline-SVG icon set used across AI chat and code components.
- *
- * All icons are 16x16 by default, use `currentColor` for strokes/fills, and
- * accept standard SVG props so consumers can override size and aria-hidden.
- */
-type IconProps = Omit<React.SVGAttributes<SVGSVGElement>, "width" | "height"> & {
-  size?: number | string;
-};
-//#endregion
 //#region src/components/ChainOfThought.d.ts
 interface ChainOfThoughtProps extends Omit<CollapsibleRootProps, "className" | "unstyled"> {
   className?: string;

package/dist/components/ChainOfThought.js

@@ -1,6 +1,6 @@
-import { C as SpinnerIcon, c as ChevronRightIcon, o as CheckIcon, u as DotIcon } from "../icons-BsWc8g4E.js";
-import { t as cx } from "../class-names-9UtZwb0J.js";
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { d as DotIcon, k as SpinnerIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-Bf7JMKk-.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChainOfThought.tsx

package/dist/components/CodeBlock.js

@@ -1,2 +1,2 @@
-import { a as CodeBlockCopyButton, c as CodeBlockLanguageSelector, d as CodeBlockLanguageSelectorTrigger, f as CodeBlockLanguageSelectorValue, h as CODE_BLOCK_LANGUAGES, i as CodeBlockContent, l as CodeBlockLanguageSelectorContent, m as highlightCode, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock, u as CodeBlockLanguageSelectorItem } from "../CodeBlock-CttHhWcb.js";
+import { a as CodeBlockCopyButton, c as CodeBlockLanguageSelector, d as CodeBlockLanguageSelectorTrigger, f as CodeBlockLanguageSelectorValue, h as CODE_BLOCK_LANGUAGES, i as CodeBlockContent, l as CodeBlockLanguageSelectorContent, m as highlightCode, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock, u as CodeBlockLanguageSelectorItem } from "../CodeBlock-BrCoypnc.js";
 export { CODE_BLOCK_LANGUAGES, CodeBlock, CodeBlockActions, CodeBlockContainer, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockHeader, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, CodeBlockLanguageSelectorItem, CodeBlockLanguageSelectorTrigger, CodeBlockLanguageSelectorValue, CodeBlockTitle, highlightCode };