@mcp-b/react-components 0.2.2 → 0.4.0

package/dist/{CodeBlock-BrCoypnc.js → CodeBlock-C2Xjxu9M.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-9UtZwb0J.js";
 import { Select, SelectContent, SelectItem, SelectList, SelectTrigger, SelectValue } from "./components/Select.js";
-import { t as CopyButton } from "./copy-button-DAPlB8Z0.js";
+import { t as CopyButton } from "./copy-button-Dd6DEhOm.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createHighlighter } from "shiki";

package/dist/FileTree-D0c9Yj9U.js

@@ -0,0 +1,310 @@
+import { t as cx } from "./class-names-9UtZwb0J.js";
+import { _ as FolderOpenIcon, g as FolderIcon, h as FileIcon, l as ChevronRightIcon } from "./icons-DQC4Zw5R.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/_internal/use-file-tree-nav.ts
+const FileTreeContext = React.createContext(null);
+function useFileTreeContext() {
+	const ctx = React.useContext(FileTreeContext);
+	if (!ctx) throw new Error("FileTree subcomponents must be used inside <FileTree>.");
+	return ctx;
+}
+/**
+* Builds a FileTreeContextValue that tracks registered nodes and dispatches
+* keyboard navigation per the WAI-ARIA Tree Pattern.
+*
+* Call `register` from every FileTreeFolder/FileTreeFile during render. The
+* hook resets its internal list on each render pass so removed nodes don't
+* leave stale entries.
+*/
+function useFileTreeNav({ expanded, selectedPath, onSelect, onExpandedChange }) {
+	const [focusedPath, setFocusedPath] = React.useState(null);
+	const nodesRef = React.useRef([]);
+	nodesRef.current = [];
+	const register = React.useCallback((path, kind, parentExpanded) => {
+		nodesRef.current.push({
+			path,
+			kind,
+			visible: parentExpanded
+		});
+	}, []);
+	const visibleNodes = () => nodesRef.current.filter((n) => n.visible);
+	const moveFocus = React.useCallback((direction, from) => {
+		const visible = visibleNodes();
+		const idx = visible.findIndex((n) => n.path === from);
+		if (idx < 0) return;
+		const next = visible[Math.max(0, Math.min(visible.length - 1, idx + direction))];
+		if (next) setFocusedPath(next.path);
+	}, []);
+	const focusFirstVisibleNode = React.useCallback(() => {
+		const first = visibleNodes()[0];
+		if (first) setFocusedPath(first.path);
+	}, []);
+	const focusLastVisibleNode = React.useCallback(() => {
+		const visible = visibleNodes();
+		const last = visible[visible.length - 1];
+		if (last) setFocusedPath(last.path);
+	}, []);
+	const setFolderExpanded = React.useCallback((path, nextExpanded) => {
+		const next = new Set(expanded);
+		if (nextExpanded) next.add(path);
+		else next.delete(path);
+		onExpandedChange(next);
+	}, [expanded, onExpandedChange]);
+	const toggleFolderExpanded = React.useCallback((path) => {
+		setFolderExpanded(path, !expanded.has(path));
+	}, [expanded, setFolderExpanded]);
+	const keyHandlers = React.useMemo(() => ({
+		ArrowDown(path) {
+			moveFocus(1, path);
+		},
+		ArrowUp(path) {
+			moveFocus(-1, path);
+		},
+		ArrowRight(path, kind) {
+			if (!(kind === "folder")) return;
+			if (expanded.has(path)) moveFocus(1, path);
+			else setFolderExpanded(path, true);
+		},
+		ArrowLeft(path, kind) {
+			if (kind === "folder" && expanded.has(path)) setFolderExpanded(path, false);
+		},
+		Enter(path, kind) {
+			if (kind === "folder") {
+				onSelect(path);
+				toggleFolderExpanded(path);
+			} else onSelect(path);
+		},
+		" "(path, kind) {
+			if (kind === "folder") {
+				onSelect(path);
+				toggleFolderExpanded(path);
+			} else onSelect(path);
+		},
+		Home() {
+			focusFirstVisibleNode();
+		},
+		End() {
+			focusLastVisibleNode();
+		}
+	}), [
+		expanded,
+		focusFirstVisibleNode,
+		focusLastVisibleNode,
+		moveFocus,
+		onSelect,
+		setFolderExpanded,
+		toggleFolderExpanded
+	]);
+	const handleKeyDown = React.useCallback((event, path, kind) => {
+		const keyHandler = keyHandlers[event.key];
+		if (!keyHandler) return;
+		event.preventDefault();
+		keyHandler(path, kind);
+	}, [keyHandlers]);
+	return {
+		focusedPath,
+		selectedPath,
+		expanded,
+		onFocus: React.useCallback((path) => {
+			setFocusedPath(path);
+		}, []),
+		onSelect,
+		onExpandedChange: React.useCallback((path, next) => {
+			setFolderExpanded(path, next);
+		}, [setFolderExpanded]),
+		register,
+		handleKeyDown
+	};
+}
+//#endregion
+//#region src/components/FileTree.tsx
+/**
+* A keyboard-accessible hierarchical file browser. Compose with
+* FileTreeFolder and FileTreeFile children.
+*
+* Keyboard: ↑/↓ move focus, →/← expand/collapse folders, Enter/Space
+* selects files and selects/toggles folders, Home/End jump to first/last node.
+*
+* @example
+* ```tsx
+* <FileTree defaultExpanded={new Set(["src"])}>
+*   <FileTreeFolder path="src" name="src">
+*     <FileTreeFile path="src/index.ts" name="index.ts" />
+*     <FileTreeFolder path="src/lib" name="lib">
+*       <FileTreeFile path="src/lib/utils.ts" name="utils.ts" />
+*     </FileTreeFolder>
+*   </FileTreeFolder>
+* </FileTree>
+* ```
+*/
+function FileTree({ className, "aria-label": ariaLabel = "File tree", expanded, defaultExpanded, selectedPath = null, onSelect, onExpandedChange, children, ref, ...props }) {
+	const [internalExpanded, setInternalExpanded] = React.useState(() => defaultExpanded ?? /* @__PURE__ */ new Set());
+	const isControlled = expanded !== void 0;
+	const currentExpanded = isControlled ? expanded : internalExpanded;
+	const handleExpandedChange = React.useCallback((next) => {
+		if (!isControlled) setInternalExpanded(next);
+		onExpandedChange?.(next);
+	}, [isControlled, onExpandedChange]);
+	const ctx = useFileTreeNav({
+		expanded: currentExpanded,
+		selectedPath,
+		onSelect: React.useCallback((path) => {
+			onSelect?.(path);
+		}, [onSelect]),
+		onExpandedChange: handleExpandedChange
+	});
+	return /* @__PURE__ */ jsx(FileTreeContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cx("file-tree", className),
+			...props,
+			children: /* @__PURE__ */ jsx("ul", {
+				className: "file-tree__list",
+				role: "tree",
+				"aria-label": ariaLabel,
+				tabIndex: 0,
+				children
+			})
+		})
+	});
+}
+function renderNestedFileTreeChild(child, level) {
+	if (React.isValidElement(child) && (child.type === FileTreeFolder || child.type === FileTreeFile)) return React.cloneElement(child, { level: level + 1 });
+	return child;
+}
+function dataFlag(enabled) {
+	return enabled ? "" : void 0;
+}
+function getFileTreeNodeTabIndex(focusedPath, path, level) {
+	return focusedPath === path || !focusedPath && level === 0 ? 0 : -1;
+}
+function getFileTreeNodeIndent(level, offset) {
+	return `${level * 1.125 + offset}rem`;
+}
+function FileTreeFolder({ className, path, name, level = 0, children, ref, ...props }) {
+	const { expanded, focusedPath, selectedPath, onFocus, onSelect, register, handleKeyDown, onExpandedChange } = useFileTreeContext();
+	const isExpanded = expanded.has(path);
+	const isFocused = focusedPath === path;
+	const isSelected = selectedPath === path;
+	register(path, "folder", true);
+	const toggle = React.useCallback(() => {
+		onExpandedChange(path, !isExpanded);
+	}, [
+		isExpanded,
+		onExpandedChange,
+		path
+	]);
+	const handleClick = React.useCallback(() => {
+		onSelect(path);
+		toggle();
+	}, [
+		onSelect,
+		path,
+		toggle
+	]);
+	return /* @__PURE__ */ jsxs("li", {
+		ref,
+		role: "treeitem",
+		"aria-expanded": isExpanded,
+		"aria-selected": isSelected,
+		className: cx("file-tree__folder", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "file-tree__node file-tree__node--folder",
+			"data-focused": dataFlag(isFocused),
+			"data-selected": dataFlag(isSelected),
+			tabIndex: getFileTreeNodeTabIndex(focusedPath, path, level),
+			onClick: handleClick,
+			onFocus: () => onFocus(path),
+			onKeyDown: (e) => handleKeyDown(e, path, "folder"),
+			style: { paddingInlineStart: getFileTreeNodeIndent(level, .5) },
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: cx("file-tree__chevron", isExpanded && "file-tree__chevron--expanded"),
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "file-tree__icon",
+					"aria-hidden": "true",
+					children: isExpanded ? /* @__PURE__ */ jsx(FolderOpenIcon, {}) : /* @__PURE__ */ jsx(FolderIcon, {})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "file-tree__name",
+					children: name
+				})
+			]
+		}), isExpanded ? /* @__PURE__ */ jsx("ul", {
+			className: "file-tree__list",
+			role: "group",
+			children: React.Children.map(children, (child) => renderNestedFileTreeChild(child, level))
+		}) : null]
+	});
+}
+function FileTreeFile({ className, path, name, icon, level = 0, ref, ...props }) {
+	const { selectedPath, focusedPath, onFocus, onSelect, register, handleKeyDown } = useFileTreeContext();
+	const isSelected = selectedPath === path;
+	const isFocused = focusedPath === path;
+	register(path, "file", true);
+	return /* @__PURE__ */ jsx("li", {
+		ref,
+		role: "treeitem",
+		"aria-selected": isSelected,
+		className: cx("file-tree__file", className),
+		...props,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "file-tree__node file-tree__node--file",
+			"data-selected": dataFlag(isSelected),
+			"data-focused": dataFlag(isFocused),
+			tabIndex: getFileTreeNodeTabIndex(focusedPath, path, level),
+			onClick: () => onSelect(path),
+			onFocus: () => onFocus(path),
+			onKeyDown: (e) => handleKeyDown(e, path, "file"),
+			style: { paddingInlineStart: getFileTreeNodeIndent(level, 1.5) },
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "file-tree__icon",
+				"aria-hidden": "true",
+				children: icon ?? /* @__PURE__ */ jsx(FileIcon, {})
+			}), /* @__PURE__ */ jsx("span", {
+				className: "file-tree__name",
+				children: name
+			})]
+		})
+	});
+}
+function FileTreeIcon({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("file-tree__icon", className),
+		"aria-hidden": "true",
+		...props,
+		children
+	});
+}
+function FileTreeName({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("file-tree__name", className),
+		...props,
+		children
+	});
+}
+function FileTreeActions({ className, children, onClick, ref, ...props }) {
+	const handleClick = React.useCallback((e) => {
+		e.stopPropagation();
+		onClick?.(e);
+	}, [onClick]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("file-tree__actions", className),
+		onClick: handleClick,
+		...props,
+		children
+	});
+}
+//#endregion
+export { FileTreeIcon as a, FileTreeFolder as i, FileTreeActions as n, FileTreeName as o, FileTreeFile as r, FileTree as t };

package/dist/attachment-preview-ChtC3HiU.js

@@ -0,0 +1,25 @@
+import { Dialog, DialogContent, DialogTrigger } from "./components/Dialog.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/_internal/attachment-preview.tsx
+/**
+* Click-to-zoom for image attachments: `children` is the thumbnail and
+* becomes the dialog trigger; the dialog shows the image full size. Shared by
+* the composer chips and message-side attachments.
+*/
+function AttachmentPreview({ url, filename, children }) {
+	return /* @__PURE__ */ jsxs(Dialog, { children: [/* @__PURE__ */ jsx(DialogTrigger, { render: children }), /* @__PURE__ */ jsxs(DialogContent, {
+		className: "attachment-preview",
+		"aria-label": filename ?? "Attachment preview",
+		children: [/* @__PURE__ */ jsx("img", {
+			className: "attachment-preview__image",
+			src: url,
+			alt: filename ?? "Attachment"
+		}), filename ? /* @__PURE__ */ jsx("div", {
+			className: "attachment-preview__name",
+			children: filename
+		}) : null]
+	})] });
+}
+//#endregion
+export { AttachmentPreview as t };

package/dist/components/Activity.js

@@ -1,6 +1,6 @@
 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 { l as ChevronRightIcon } from "../icons-DQC4Zw5R.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Activity.tsx

package/dist/components/AgentChat.d.ts

@@ -1,21 +1,20 @@
-import { PromptInputMessage, PromptInputStatus } from "./PromptInput.js";
+import { ExecutionApprovals, PromptInputMessage, PromptInputStatus } from "./PromptInput.js";
 import * as React from "react";
-import { UIDataTypes, UIMessage, UITools } from "ai";
+import { ChatAddToolApproveResponseFunction, UIMessage } 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> {
+type AgentChatPart<MessageT extends UIMessage = UIMessage> = MessageT["parts"][number];
+interface AgentChatRenderPartContext<MessageT extends UIMessage = UIMessage> {
   message: MessageT;
   part: AgentChatPart<MessageT>;
   partIndex: number;
   defaultRender: () => React.ReactNode;
 }
-interface AgentChatRenderMessageContext<MessageT extends AgentChatMessage = AgentChatMessage> {
+interface AgentChatRenderMessageContext<MessageT extends UIMessage = UIMessage> {
   message: MessageT;
   messageIndex: number;
 }
-interface AgentChatProps<MessageT extends AgentChatMessage = AgentChatMessage> {
+interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
   className?: string;
   /** AI SDK `UIMessage`s to render, oldest first. */
   messages: readonly MessageT[];
@@ -31,6 +30,44 @@ interface AgentChatProps<MessageT extends AgentChatMessage = AgentChatMessage> {
   emptyState?: React.ReactNode;
   /** Extra controls rendered in the composer toolbar. */
   composerTools?: React.ReactNode;
+  /**
+   * Prompt suggestions shown as a chip row above the composer; clicking one
+   * submits it as the message text. Strings double as React keys — keep them
+   * unique.
+   */
+  suggestions?: readonly string[];
+  /**
+   * Transient status rendered between the transcript and the composer —
+   * e.g. a "Reconnecting…" pill. `ThinkChat.Messages` fills this from the
+   * hook's `isRecovering`/`connectionError` automatically.
+   */
+  notice?: React.ReactNode;
+  /**
+   * When set, the last assistant message gets a Retry action that calls this
+   * with its message id — pass to the AI SDK's `regenerate({ messageId })`.
+   */
+  onRegenerate?: (messageId: string) => void;
+  /**
+   * Pass `addToolApprovalResponse` from `useAgentChat`/`useChat` directly.
+   * When set and a tool call awaits approval, the composer becomes the
+   * confirmation.
+   */
+  onApprovalResponse?: ChatAddToolApproveResponseFunction;
+  /**
+   * When set, paused codemode executions surface in the same composer
+   * confirmation as tool approvals. See {@link ExecutionApprovals}.
+   */
+  executionApprovals?: ExecutionApprovals;
+  /**
+   * When set, a Context ring in the composer footer shows how much of the
+   * model's window the conversation occupies. Used tokens come from the
+   * newest message carrying `metadata.usage` (the AI SDK `messageMetadata`
+   * convention; Think merges it into message metadata as turns finish).
+   */
+  contextWindow?: {
+    maxTokens: number;
+    modelId?: string;
+  };
   /** 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. */
@@ -40,8 +77,12 @@ interface AgentChatProps<MessageT extends AgentChatMessage = AgentChatMessage> {
  * 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.
  */
-declare function AgentChat<MessageT extends AgentChatMessage = AgentChatMessage>({
+declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   className,
   messages,
   status,
@@ -51,6 +92,12 @@ declare function AgentChat<MessageT extends AgentChatMessage = AgentChatMessage>
   disabled,
   emptyState,
   composerTools,
+  suggestions,
+  notice,
+  onRegenerate,
+  onApprovalResponse,
+  executionApprovals,
+  contextWindow,
   renderPart,
   renderMessageAfter,
   ref
@@ -58,4 +105,4 @@ declare function AgentChat<MessageT extends AgentChatMessage = AgentChatMessage>
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { AgentChat, AgentChatMessage, AgentChatPart, AgentChatProps, AgentChatRenderMessageContext, AgentChatRenderPartContext };
+export { AgentChat, AgentChatPart, AgentChatProps, AgentChatRenderMessageContext, AgentChatRenderPartContext };