@mcp-b/react-components 0.3.0 → 0.5.0

package/dist/components/Context.js

@@ -1,5 +1,4 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { Button } from "./Button.js";
 import { Popover } from "./Popover.js";
 import { Separator } from "./Separator.js";
 import * as React from "react";
@@ -13,8 +12,8 @@ function useContextContext() {
 }
 /**
 * Displays token / context usage with a hover card breakdown. The trigger is
-* a button showing a compact percentage indicator; hovering or clicking opens
-* a popover with category rows and total cost.
+* a bare progress ring; clicking it opens a popover (upward by default) with
+* category rows and total cost.
 *
 * @example
 * ```tsx
@@ -22,7 +21,7 @@ function useContextContext() {
 *   usedTokens={42_300}
 *   maxTokens={200_000}
 *   modelId="claude-opus-4-6"
-*   usage={{ input: 30000, output: 12300 }}
+*   usage={{ inputTokens: 30000, outputTokens: 12300 }}
 *   totalCostUsd={0.42}
 * >
 *   <ContextTrigger />
@@ -68,33 +67,26 @@ function ContextTrigger({ className, children, ...props }) {
 	const percent = maxTokens > 0 ? usedTokens / maxTokens * 100 : 0;
 	if (React.isValidElement(children)) return /* @__PURE__ */ jsx(Popover.Trigger, { render: children });
 	if (children) return /* @__PURE__ */ jsx(Popover.Trigger, { children });
-	return /* @__PURE__ */ jsx(Popover.Trigger, { render: /* @__PURE__ */ jsxs(Button, {
-		variant: "ghost",
-		color: "neutral",
-		size: "sm",
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
 		className: cx("context__trigger", className),
 		"aria-label": `Context usage: ${percent.toFixed(0)}%`,
 		...props,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "context__trigger-ring",
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ jsx(ProgressRing, {
-				percent,
-				size: 16,
-				stroke: 2.5
-			})
-		}), /* @__PURE__ */ jsxs("span", {
-			className: "context__trigger-label",
-			children: [percent.toFixed(0), "%"]
-		})]
-	}) });
+		children: /* @__PURE__ */ jsx(ProgressRing, {
+			percent,
+			size: 16,
+			stroke: 2.5
+		})
+	});
 }
-function ContextContent({ className, children, ...props }) {
-	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Popup, {
-		className: cx("context__content", className),
-		...props,
-		children
-	}) }) });
+function ContextContent({ className, side = "top", children, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		side,
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			className: cx("context__content", className),
+			...props,
+			children
+		})
+	}) });
 }
 function ContextContentHeader({ className, children, ref, ...props }) {
 	const { usedTokens, maxTokens, modelId } = useContextContext();
@@ -173,7 +165,6 @@ function ContextContentBody({ className, children, ref, ...props }) {
 		label: "Cache",
 		tokens: cacheTokens
 	});
-	if (usage?.categories) rows.push(...usage.categories);
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("context__body", className),
@@ -182,20 +173,13 @@ function ContextContentBody({ className, children, ref, ...props }) {
 			className: "context__rows",
 			children: rows.map((row) => /* @__PURE__ */ jsxs("li", {
 				className: "context__row",
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "context__row-label",
-						children: row.label
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "context__row-value",
-						children: row.tokens.toLocaleString()
-					}),
-					row.costUsd !== void 0 ? /* @__PURE__ */ jsxs("span", {
-						className: "context__row-cost",
-						children: ["$", row.costUsd.toFixed(4)]
-					}) : null
-				]
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "context__row-label",
+					children: row.label
+				}), /* @__PURE__ */ jsx("span", {
+					className: "context__row-value",
+					children: row.tokens.toLocaleString()
+				})]
 			}, row.label))
 		})]
 	});
@@ -269,10 +253,27 @@ function ContextUsageRow({ className, children, label, usageKey, defaultLabel, r
 }
 function getUsageTokens(usage, key) {
 	if (!usage) return void 0;
-	if (key === "input") return usage.input ?? usage.inputTokens;
-	if (key === "output") return usage.output ?? usage.outputTokens;
-	if (key === "reasoning") return usage.reasoning ?? usage.reasoningTokens;
-	return usage.cache ?? usage.cachedInputTokens;
+	if (key === "input") return usage.inputTokens;
+	if (key === "output") return usage.outputTokens;
+	if (key === "reasoning") return usage.outputTokenDetails?.reasoningTokens ?? usage.reasoningTokens;
+	return usage.inputTokenDetails?.cacheReadTokens ?? usage.cachedInputTokens;
+}
+/**
+* Latest `metadata.usage` in a transcript — the AI SDK convention for token
+* accounting (`toUIMessageStreamResponse({ messageMetadata })`), which Think
+* merges into `message.metadata` as turns finish. Structural: any message
+* whose metadata carries a `usage` object qualifies.
+*/
+function getContextUsage(messages) {
+	for (let i = messages.length - 1; i >= 0; i--) {
+		const usage = messages[i].metadata?.usage;
+		if (usage && typeof usage === "object") return usage;
+	}
+}
+/** Tokens occupying the context window: `totalTokens`, or input + output. */
+function getContextUsedTokens(usage) {
+	if (!usage) return 0;
+	return usage.totalTokens ?? (usage.inputTokens ?? 0) + (usage.outputTokens ?? 0);
 }
 function ProgressRing({ percent, size, stroke }) {
 	const radius = (size - stroke) / 2;
@@ -306,4 +307,4 @@ function ProgressRing({ percent, size, stroke }) {
 	});
 }
 //#endregion
-export { Context, ContextCacheUsage, ContextContent, ContextContentBody, ContextContentFooter, ContextContentHeader, ContextInputUsage, ContextOutputUsage, ContextReasoningUsage, ContextTrigger };
+export { Context, ContextCacheUsage, ContextContent, ContextContentBody, ContextContentFooter, ContextContentHeader, ContextInputUsage, ContextOutputUsage, ContextReasoningUsage, ContextTrigger, getContextUsage, getContextUsedTokens };

package/dist/components/ContextMenu.js

@@ -1,4 +1,4 @@
-import { d as DotIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-DQC4Zw5R.js";
+import { a as CheckIcon, c as ChevronRightIcon, u as DotIcon } from "../icons-CZRH4FVH.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";

package/dist/components/Conversation.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { f as DownloadIcon, t as ArrowDownIcon } from "../icons-DQC4Zw5R.js";
+import { d as DownloadIcon, t as ArrowDownIcon } from "../icons-CZRH4FVH.js";
 import { Button } from "./Button.js";
 import { useStickToBottom } from "./useStickToBottom.js";
 import * as React from "react";

package/dist/components/Dialog.js

@@ -1,4 +1,4 @@
-import { F as XIcon } from "../icons-DQC4Zw5R.js";
+import { P as XIcon } from "../icons-CZRH4FVH.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 { m as EyeOffIcon, o as CheckIcon, p as EyeIcon, u as CopyIcon } from "../icons-DQC4Zw5R.js";
+import { a as CheckIcon, f as EyeIcon, l as CopyIcon, p as EyeOffIcon } from "../icons-CZRH4FVH.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-D0c9Yj9U.js";
+import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../FileTree-D8rtTLgK.js";
 export { FileTree, FileTreeActions, FileTreeFile, FileTreeFolder, FileTreeIcon, FileTreeName };

package/dist/components/Menubar.js

@@ -1,4 +1,4 @@
-import { d as DotIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-DQC4Zw5R.js";
+import { a as CheckIcon, c as ChevronRightIcon, u as DotIcon } from "../icons-CZRH4FVH.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";

package/dist/components/Message.d.ts

@@ -1,6 +1,6 @@
 import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
 import * as React from "react";
-import { UIMessage } from "ai";
+import { FileUIPart, UIMessage } from "ai";
 import { StreamdownProps } from "streamdown";
 
 //#region src/components/Message.d.ts
@@ -60,6 +60,20 @@ declare const MessageResponse: React.MemoExoticComponent<({
   className,
   ...props
 }: MessageResponseProps) => React.JSX.Element>;
+interface MessageAttachmentProps extends Omit<React.HTMLAttributes<HTMLElement>, "part"> {
+  /** The AI SDK `file` part, taken whole. */
+  part: FileUIPart;
+}
+/**
+ * A `file` part inside a message: images render inline (click to zoom),
+ * anything else becomes a download chip. Covers both directions — files the
+ * user attached and files the agent emitted.
+ */
+declare function MessageAttachment({
+  part,
+  className,
+  ...props
+}: MessageAttachmentProps): React.JSX.Element;
 interface MessageActionsProps extends React.HTMLAttributes<HTMLDivElement> {}
 /**
  * Horizontal list of action buttons (copy, retry, thumbs-up, etc.) shown
@@ -214,4 +228,4 @@ declare function MessageBranchPage({
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
 //#endregion
-export { Message, MessageAction, MessageActionProps, MessageActions, MessageActionsProps, MessageBranch, MessageBranchContent, MessageBranchContentProps, MessageBranchNext, MessageBranchNextProps, MessageBranchPage, MessageBranchPageProps, MessageBranchPrevious, MessageBranchPreviousProps, MessageBranchProps, MessageBranchSelector, MessageBranchSelectorProps, MessageContent, MessageContentProps, MessageProps, MessageResponse, MessageResponseProps, MessageRole, MessageToolbar, MessageToolbarProps };
+export { Message, MessageAction, MessageActionProps, MessageActions, MessageActionsProps, MessageAttachment, MessageAttachmentProps, MessageBranch, MessageBranchContent, MessageBranchContentProps, MessageBranchNext, MessageBranchNextProps, MessageBranchPage, MessageBranchPageProps, MessageBranchPrevious, MessageBranchPreviousProps, MessageBranchProps, MessageBranchSelector, MessageBranchSelectorProps, MessageContent, MessageContentProps, MessageProps, MessageResponse, MessageResponseProps, MessageRole, MessageToolbar, MessageToolbarProps };

package/dist/components/Message.js

@@ -1,7 +1,8 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { n as ArrowLeftIcon, r as ArrowRightIcon } from "../icons-DQC4Zw5R.js";
+import { m as FileIcon, n as ArrowLeftIcon, r as ArrowRightIcon } from "../icons-CZRH4FVH.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
+import { t as AttachmentPreview } from "../attachment-preview-ChtC3HiU.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cjk } from "@streamdown/cjk";
@@ -66,6 +67,39 @@ const MessageResponse = React.memo(function MessageResponse({ className, ...prop
 	});
 });
 /**
+* A `file` part inside a message: images render inline (click to zoom),
+* anything else becomes a download chip. Covers both directions — files the
+* user attached and files the agent emitted.
+*/
+function MessageAttachment({ part, className, ...props }) {
+	const name = part.filename ?? (part.mediaType || "attachment");
+	if (part.mediaType.startsWith("image/")) return /* @__PURE__ */ jsx(AttachmentPreview, {
+		url: part.url,
+		filename: part.filename,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: cx("message__attachment-zoom", className),
+			"aria-label": `Preview ${name}`,
+			...props,
+			children: /* @__PURE__ */ jsx("img", {
+				className: "message__attachment-image",
+				src: part.url,
+				alt: part.filename ?? "Attached image"
+			})
+		})
+	});
+	return /* @__PURE__ */ jsxs("a", {
+		className: cx("message__attachment", className),
+		href: part.url,
+		download: part.filename,
+		...props,
+		children: [/* @__PURE__ */ jsx(FileIcon, { className: "message__attachment-icon" }), /* @__PURE__ */ jsx("span", {
+			className: "message__attachment-name",
+			children: name
+		})]
+	});
+}
+/**
 * Horizontal list of action buttons (copy, retry, thumbs-up, etc.) shown
 * alongside or beneath a message.
 */
@@ -82,7 +116,7 @@ function MessageActions({ className, children, ref, ...props }) {
 * A single icon button inside {@link MessageActions}. Always has an accessible
 * name; shows a tooltip on hover/focus when {@link tooltip} is set.
 */
-function MessageAction({ className, label, tooltip, variant = "ghost", color = "neutral", size = "sm", children, ref, ...props }) {
+function MessageAction({ className, label, tooltip, variant = "ghost", color = "neutral", size = "icon-xs", children, ref, ...props }) {
 	const button = /* @__PURE__ */ jsx(Button, {
 		ref,
 		type: "button",
@@ -190,7 +224,7 @@ function MessageBranchSelector({ className, children, ref, ...props }) {
 	});
 }
 /** Button that selects the previous branch. Disabled at the first branch. */
-function MessageBranchPrevious({ className, label = "Previous response", variant = "ghost", color = "neutral", size = "sm", children, onClick, ref, ...props }) {
+function MessageBranchPrevious({ className, label = "Previous response", variant = "ghost", color = "neutral", size = "icon-xs", children, onClick, ref, ...props }) {
 	const { branchIndex, branchCount, setBranchIndex } = useMessageBranch("MessageBranchPrevious");
 	return /* @__PURE__ */ jsx(Button, {
 		ref,
@@ -210,7 +244,7 @@ function MessageBranchPrevious({ className, label = "Previous response", variant
 	});
 }
 /** Button that selects the next branch. Disabled at the last branch. */
-function MessageBranchNext({ className, label = "Next response", variant = "ghost", color = "neutral", size = "sm", children, onClick, ref, ...props }) {
+function MessageBranchNext({ className, label = "Next response", variant = "ghost", color = "neutral", size = "icon-xs", children, onClick, ref, ...props }) {
 	const { branchIndex, branchCount, setBranchIndex } = useMessageBranch("MessageBranchNext");
 	return /* @__PURE__ */ jsx(Button, {
 		ref,
@@ -242,4 +276,4 @@ function MessageBranchPage({ className, format, ref, ...props }) {
 	});
 }
 //#endregion
-export { Message, MessageAction, MessageActions, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar };
+export { Message, MessageAction, MessageActions, MessageAttachment, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar };

package/dist/components/ModelSelector.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { k as SearchIcon, s as ChevronDownIcon } from "../icons-DQC4Zw5R.js";
+import { O as SearchIcon, o as ChevronDownIcon } from "../icons-CZRH4FVH.js";
 import { Button } from "./Button.js";
 import { Dialog, DialogBackdrop, DialogPopup, DialogPortal, DialogTitle, DialogTrigger } from "./Dialog.js";
 import * as React from "react";

package/dist/components/NavigationMenu.js

@@ -1,4 +1,4 @@
-import { s as ChevronDownIcon } from "../icons-DQC4Zw5R.js";
+import { o as ChevronDownIcon } from "../icons-CZRH4FVH.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";

package/dist/components/PricingPage.js

@@ -1,12 +1,12 @@
 import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "./Accordion.js";
+import { Separator } from "./Separator.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
-import { Badge } from "./Badge.js";
 import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle } from "./AlertDialog.js";
+import { Badge } from "./Badge.js";
 import { Slider, SliderControl, SliderIndicator, SliderThumb, SliderTrack } from "./Slider.js";
 import { Card } from "./Card.js";
 import { Checkbox } from "./Checkbox.js";
-import { Separator } from "./Separator.js";
 import { Switch, SwitchThumb } from "./Switch.js";
 import { Label } from "./Label.js";
 import { ToggleGroup, ToggleGroupItem } from "./ToggleGroup.js";