@mcp-b/react-components 0.12.0 → 0.14.0

package/dist/{ThinkChat-B3wYahor.js → ThinkChat-7DQ2CogF.js}

@@ -1,3 +1,4 @@
+import { Button } from "./components/Button.js";
 import { AgentChat } from "./components/AgentChat.js";
 import { ThinkChatContext, useThinkChatContext } from "./components/ThinkChatContext.js";
 import { ThinkChatActivity, createThinkChatActivityRenderer, renderThinkChatActivityPart } from "./components/ThinkChatActivity.js";
@@ -139,9 +140,40 @@ function ThinkChatMessages({ renderPart, excludeTools, toolRenderers, thinkStub,
 		excludeTools,
 		toolRenderers
 	}), [excludeTools, toolRenderers]);
-	const connectionNotice = chat.isRecovering ? /* @__PURE__ */ jsx(Fragment, { children: "Reconnecting to the agent…" }) : chat.connectionError ? /* @__PURE__ */ jsxs("span", {
+	const retryMessageId = chat.error ? chat.messages.findLast((message) => message.role !== "system")?.id : void 0;
+	const defaultNotice = chat.isRecovering ? /* @__PURE__ */ jsx(Fragment, { children: "Reconnecting to the agent…" }) : chat.connectionError ? /* @__PURE__ */ jsxs("span", {
 		"data-tone": "danger",
 		children: ["Connection lost", chat.connectionError.reason ? ` — ${chat.connectionError.reason}` : ""]
+	}) : chat.error ? /* @__PURE__ */ jsxs("div", {
+		className: "agent-chat__turn-error",
+		"data-tone": "danger",
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "agent-chat__turn-error-message",
+			children: [
+				/* @__PURE__ */ jsx("strong", { children: "Response failed." }),
+				" ",
+				chat.error.message.trim() || "The response could not be completed."
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "agent-chat__turn-error-actions",
+			children: [/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				color: "neutral",
+				size: "lg",
+				onClick: chat.clearError,
+				children: "Dismiss"
+			}), retryMessageId ? /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				color: "primary",
+				size: "lg",
+				onClick: () => {
+					chat.clearError();
+					chat.regenerate({ messageId: retryMessageId });
+				},
+				children: "Try again"
+			}) : null]
+		})]
 	}) : void 0;
 	return /* @__PURE__ */ jsx(AgentChat, {
 		...props,
@@ -153,7 +185,7 @@ function ThinkChatMessages({ renderPart, excludeTools, toolRenderers, thinkStub,
 		thinkStub: resolvedApprovals.thinkStub,
 		onExecutionSettled: resolvedApprovals.onExecutionSettled,
 		pendingApprovals: resolvedApprovals.pendingApprovals,
-		notice: notice ?? connectionNotice,
+		notice: notice ?? defaultNotice,
 		onRegenerate: (messageId) => void chat.regenerate({ messageId }),
 		onSubmit: ({ text, files }) => {
 			const trimmed = text.trim();

package/dist/{ThinkChatActivity-F4KFPcJA.d.ts → ThinkChatActivity-m9orbdeI.d.ts}

@@ -1,4 +1,4 @@
-import { a as AgentChatRenderPartContext, r as AgentChatProps } from "./AgentChat-CRmsKg9B.js";
+import { a as AgentChatRenderPartContext, r as AgentChatProps } from "./AgentChat-Cgb1xuT7.js";
 import { s as ThinkChatPart } from "./ThinkChatToolParts-Cv4o7j6F.js";
 import * as React from "react";
 import { DynamicToolUIPart, ToolUIPart, UIMessage } from "ai";

package/dist/{attachment-preview-ChtC3HiU.js → attachment-preview-DIs50Q0h.js}

@@ -1,4 +1,4 @@
-import { Dialog, DialogContent, DialogTrigger } from "./components/Dialog.js";
+import { Dialog } from "./components/Dialog.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/attachment-preview.tsx
@@ -8,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * 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, {
+	return /* @__PURE__ */ jsxs(Dialog.Root, { children: [/* @__PURE__ */ jsx(Dialog.Trigger, { render: children }), /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {}), /* @__PURE__ */ jsx(Dialog.Viewport, { children: /* @__PURE__ */ jsxs(Dialog.Popup, {
 		className: "attachment-preview",
 		"aria-label": filename ?? "Attachment preview",
 		children: [/* @__PURE__ */ jsx("img", {
@@ -19,7 +19,7 @@ function AttachmentPreview({ url, filename, children }) {
 			className: "attachment-preview__name",
 			children: filename
 		}) : null]
-	})] });
+	}) })] })] });
 }
 //#endregion
 export { AttachmentPreview as t };

package/dist/components/Accordion.d.ts

@@ -11,10 +11,12 @@ interface AccordionItemProps extends Omit<React.ComponentPropsWithRef<typeof Acc
 interface AccordionTriggerProps extends Omit<React.ComponentPropsWithRef<typeof Accordion$1.Trigger>, "className"> {
   className?: string;
 }
+interface AccordionHeaderProps extends Omit<Accordion$1.Header.Props, "className"> {
+  className?: string;
+}
 interface AccordionPanelProps extends Omit<React.ComponentPropsWithRef<typeof Accordion$1.Panel>, "className"> {
   className?: string;
 }
-type AccordionContentProps = AccordionPanelProps;
 /**
  * An accordion component for showing collapsible content sections.
  *
@@ -34,7 +36,7 @@ type AccordionContentProps = AccordionPanelProps;
  *
  * @see {@link https://base-ui.com/react/components/accordion | Base UI Accordion}
  */
-declare function Accordion({
+declare function AccordionRoot({
   className,
   ref,
   ...props
@@ -51,16 +53,19 @@ declare function AccordionItem({
 }: AccordionItemProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
+declare function AccordionHeader({
+  className,
+  ref,
+  ...props
+}: AccordionHeaderProps): React.JSX.Element;
 /**
  * The header/trigger that toggles an AccordionItem.
  */
-declare const AccordionHeader: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AccordionHeaderProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 /**
  * The clickable trigger button within an AccordionItem.
  */
 declare function AccordionTrigger({
   className,
-  children,
   ref,
   ...props
 }: AccordionTriggerProps & {
@@ -76,6 +81,12 @@ declare function AccordionPanel({
 }: AccordionPanelProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare const AccordionContent: typeof AccordionPanel;
+declare const Accordion: {
+  Root: typeof AccordionRoot;
+  Item: typeof AccordionItem;
+  Header: typeof AccordionHeader;
+  Trigger: typeof AccordionTrigger;
+  Panel: typeof AccordionPanel;
+};
 //#endregion
-export { Accordion, AccordionContent, AccordionContentProps, AccordionHeader, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, AccordionTrigger, AccordionTriggerProps };
+export { Accordion, AccordionHeaderProps, AccordionItemProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps };

package/dist/components/Accordion.js

@@ -1,6 +1,6 @@
 import "react";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/Accordion.tsx
 /**
 * An accordion component for showing collapsible content sections.
@@ -21,7 +21,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 *
 * @see {@link https://base-ui.com/react/components/accordion | Base UI Accordion}
 */
-function Accordion({ className = "", ref, ...props }) {
+function AccordionRoot({ className = "", ref, ...props }) {
 	const classes = ["accordion", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Accordion$1.Root, {
 		ref,
@@ -40,45 +40,26 @@ function AccordionItem({ className = "", ref, ...props }) {
 		...props
 	});
 }
+function AccordionHeader({ className = "", ref, ...props }) {
+	const classes = ["accordion__header", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Accordion$1.Header, {
+		ref,
+		className: classes,
+		...props
+	});
+}
 /**
 * The header/trigger that toggles an AccordionItem.
 */
-const AccordionHeader = Accordion$1.Header;
 /**
 * The clickable trigger button within an AccordionItem.
 */
-function AccordionTrigger({ className = "", children, ref, ...props }) {
+function AccordionTrigger({ className = "", ref, ...props }) {
 	const classes = ["accordion__trigger", className].filter(Boolean).join(" ");
-	return /* @__PURE__ */ jsx(Accordion$1.Header, {
-		className: "accordion__header",
-		children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
-			ref,
-			className: classes,
-			...props,
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "accordion__trigger-text",
-				children
-			}), /* @__PURE__ */ jsx("span", {
-				className: "accordion__icon",
-				"aria-hidden": "true",
-				children: /* @__PURE__ */ jsx("svg", {
-					width: "12",
-					height: "12",
-					viewBox: "0 0 12 12",
-					fill: "none",
-					xmlns: "http://www.w3.org/2000/svg",
-					"aria-hidden": "true",
-					focusable: "false",
-					children: /* @__PURE__ */ jsx("path", {
-						d: "M2.5 4.5L6 8L9.5 4.5",
-						stroke: "currentColor",
-						strokeWidth: "1.5",
-						strokeLinecap: "round",
-						strokeLinejoin: "round"
-					})
-				})
-			})]
-		})
+	return /* @__PURE__ */ jsx(Accordion$1.Trigger, {
+		ref,
+		className: classes,
+		...props
 	});
 }
 /**
@@ -92,6 +73,12 @@ function AccordionPanel({ className = "", ref, ...props }) {
 		...props
 	});
 }
-const AccordionContent = AccordionPanel;
+const Accordion = {
+	Root: AccordionRoot,
+	Item: AccordionItem,
+	Header: AccordionHeader,
+	Trigger: AccordionTrigger,
+	Panel: AccordionPanel
+};
 //#endregion
-export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger };
+export { Accordion };

package/dist/components/Activity.d.ts

@@ -1,8 +1,8 @@
-import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
+import { Collapsible } from "./Collapsible.js";
 import * as React from "react";
 
 //#region src/components/Activity.d.ts
-interface ActivityProps extends Omit<CollapsibleRootProps, "className" | "unstyled"> {
+interface ActivityProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "className" | "unstyled"> {
   className?: string;
   /** While true, the trigger label shimmers. */
   isStreaming?: boolean;
@@ -36,7 +36,7 @@ declare function Activity({
 }: ActivityProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface ActivityTriggerProps extends Omit<CollapsibleTriggerProps, "className" | "unstyled"> {
+interface ActivityTriggerProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "className" | "unstyled"> {
   className?: string;
   /** Header text. Defaults to "Working…". */
   label?: React.ReactNode;
@@ -57,7 +57,7 @@ declare function ActivityTrigger({
 }: ActivityTriggerProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
-interface ActivityContentProps extends Omit<CollapsiblePanelProps, "className" | "unstyled"> {
+interface ActivityContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "className" | "unstyled"> {
   className?: string;
 }
 /** The collapsible log of ActivityItem children. */
@@ -69,7 +69,7 @@ declare function ActivityContent({
 }: ActivityContentProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface ActivityItemGroupProps extends Omit<CollapsibleRootProps, "className" | "unstyled"> {
+interface ActivityItemGroupProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "className" | "unstyled"> {
   className?: string;
   /** The row text, e.g. "Ran bash · vp test". */
   label: React.ReactNode;

package/dist/components/Activity.js

@@ -1,6 +1,6 @@
-import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
+import { Collapsible } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { c as ChevronRightIcon } from "../icons-D2Q5n5C1.js";
+import { c as ChevronRightIcon } from "../icons-Ba9THQKz.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Activity.tsx
@@ -25,7 +25,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * ```
 */
 function Activity({ className, isStreaming = false, defaultOpen = false, ref, ...props }) {
-	return /* @__PURE__ */ jsx(CollapsibleRoot, {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
 		ref,
 		className: cx("activity", className),
 		defaultOpen,
@@ -39,14 +39,14 @@ function Activity({ className, isStreaming = false, defaultOpen = false, ref, ..
 * while the parent Activity is streaming.
 */
 function ActivityTrigger({ className, label = "Working…", icon, children, ref, ...props }) {
-	if (children !== void 0 && children !== null) return /* @__PURE__ */ jsx(CollapsibleTrigger, {
+	if (children !== void 0 && children !== null) return /* @__PURE__ */ jsx(Collapsible.Trigger, {
 		ref,
 		className: cx("activity__trigger", className),
 		...props,
 		unstyled: true,
 		children
 	});
-	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+	return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
 		ref,
 		className: cx("activity__trigger", className),
 		...props,
@@ -71,7 +71,7 @@ function ActivityTrigger({ className, label = "Working…", icon, children, ref,
 }
 /** The collapsible log of ActivityItem children. */
 function ActivityContent({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx(CollapsiblePanel, {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
 		ref,
 		className: cx("activity__content", className),
 		...props,
@@ -88,12 +88,12 @@ function ActivityContent({ className, children, ref, ...props }) {
 * a thought trace) flush inside the outer Activity log.
 */
 function ActivityItemGroup({ className, label, icon, children, ref, ...props }) {
-	return /* @__PURE__ */ jsxs(CollapsibleRoot, {
+	return /* @__PURE__ */ jsxs(Collapsible.Root, {
 		ref,
 		className: cx("activity__group", className),
 		...props,
 		unstyled: true,
-		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
 			className: "activity__group-trigger",
 			unstyled: true,
 			children: [
@@ -112,7 +112,7 @@ function ActivityItemGroup({ className, label, icon, children, ref, ...props })
 					children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
 				})
 			]
-		}), /* @__PURE__ */ jsx(CollapsiblePanel, {
+		}), /* @__PURE__ */ jsx(Collapsible.Panel, {
 			className: "activity__group-panel",
 			unstyled: true,
 			children: /* @__PURE__ */ jsx("div", {

package/dist/components/AgentChat.d.ts

@@ -1,2 +1,2 @@
-import { a as AgentChatRenderPartContext, i as AgentChatRenderMessageContext, n as AgentChatPart, r as AgentChatProps, t as AgentChat } from "../AgentChat-CRmsKg9B.js";
+import { a as AgentChatRenderPartContext, i as AgentChatRenderMessageContext, n as AgentChatPart, r as AgentChatProps, t as AgentChat } from "../AgentChat-Cgb1xuT7.js";
 export { AgentChat, AgentChatPart, AgentChatProps, AgentChatRenderMessageContext, AgentChatRenderPartContext };