@mcp-b/react-components 0.3.0 → 0.4.0

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/AgentChat.d.ts

@@ -1,4 +1,4 @@
-import { X as PromptInputMessage, dt as PromptInputStatus } from "../PromptInput-Dzn-fOPc.js";
+import { ExecutionApprovals, PromptInputMessage, PromptInputStatus } from "./PromptInput.js";
 import * as React from "react";
 import { ChatAddToolApproveResponseFunction, UIMessage } from "ai";
 
@@ -30,12 +30,44 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
   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. */
@@ -60,7 +92,12 @@ declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   disabled,
   emptyState,
   composerTools,
+  suggestions,
+  notice,
+  onRegenerate,
   onApprovalResponse,
+  executionApprovals,
+  contextWindow,
   renderPart,
   renderMessageAfter,
   ref

package/dist/components/AgentChat.js

@@ -1,13 +1,30 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
+import { D as PlusIcon, O as RefreshIcon } from "../icons-DQC4Zw5R.js";
+import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "./Context.js";
 import { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton } from "./Conversation.js";
-import { Message, MessageContent, MessageResponse } from "./Message.js";
-import { PromptInput, PromptInputApproval, PromptInputBody, PromptInputFooter, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getPendingToolApprovals } from "./PromptInput.js";
+import { Message, MessageAction, MessageActions, MessageAttachment, MessageContent, MessageResponse } from "./Message.js";
+import { PromptInput, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
+import { Suggestion, Suggestions } from "./Suggestion.js";
 import { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput } from "./Tool.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { isReasoningUIPart, isTextUIPart, isToolOrDynamicToolUIPart } from "ai";
+import { isFileUIPart, isReasoningUIPart, isTextUIPart, isToolOrDynamicToolUIPart } from "ai";
 //#region src/components/AgentChat.tsx
+function AgentChatAttachButton() {
+	const attachments = usePromptInputAttachments();
+	return /* @__PURE__ */ jsx(PromptInputButton, {
+		tooltip: "Add photos or files",
+		onClick: () => attachments.openFileDialog(),
+		children: /* @__PURE__ */ jsx(PlusIcon, {})
+	});
+}
+function isCompactedPart(message, part, partIndex) {
+	const metadata = message.metadata;
+	if (isTextUIPart(part)) return Array.isArray(metadata?.compactedTextParts) && metadata.compactedTextParts.includes(partIndex);
+	if (isToolOrDynamicToolUIPart(part)) return Array.isArray(metadata?.compactedToolOutputs) && metadata.compactedToolOutputs.includes(part.toolCallId);
+	return false;
+}
 function getPartKey(part, partIndex) {
 	if (isToolOrDynamicToolUIPart(part)) return part.toolCallId;
 	if ("id" in part && typeof part.id === "string") return `${part.type}-${part.id}`;
@@ -15,6 +32,7 @@ function getPartKey(part, partIndex) {
 }
 function renderDefaultPart(part) {
 	if (isTextUIPart(part) && part.text) return /* @__PURE__ */ jsx(MessageResponse, { children: part.text });
+	if (isFileUIPart(part)) return /* @__PURE__ */ jsx(MessageAttachment, { part });
 	if (isReasoningUIPart(part) && part.text) return /* @__PURE__ */ jsxs(Reasoning, {
 		isStreaming: part.state === "streaming",
 		children: [/* @__PURE__ */ jsx(ReasoningTrigger, {}), /* @__PURE__ */ jsx(ReasoningContent, { children: part.text })]
@@ -34,13 +52,40 @@ function renderDefaultPart(part) {
 * transport. Use it directly with plain AI SDK `useChat` or a read-only
 * transcript; if you have a Cloudflare Think agent, use `ThinkChat` instead.
 */
-function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerTools, onApprovalResponse, renderPart, renderMessageAfter, ref }) {
+function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerTools, suggestions, notice, onRegenerate, onApprovalResponse, executionApprovals, contextWindow, renderPart, renderMessageAfter, ref }) {
 	const handleSubmit = React.useCallback((message) => {
 		onSubmit?.(message);
 	}, [onSubmit]);
 	const [skippedApprovalIds, setSkippedApprovalIds] = React.useState([]);
-	const pendingApprovals = (onApprovalResponse ? getPendingToolApprovals(messages) : []).filter(({ part }) => part.state !== "approval-requested" || !skippedApprovalIds.includes(part.approval.id));
-	const pendingApproval = pendingApprovals[0];
+	const pendingApprovals = getPendingToolApprovals(messages, { pausedExecutions: Boolean(executionApprovals) }).filter(({ part }) => {
+		if (part.state === "approval-requested" && !onApprovalResponse) return false;
+		const id = getApprovalRequestId(part);
+		return Boolean(id) && !skippedApprovalIds.includes(id);
+	});
+	const approvalsWired = Boolean(onApprovalResponse || executionApprovals);
+	const [permissionMode, setPermissionMode] = React.useState("ask");
+	const autoApprovedIds = React.useRef(/* @__PURE__ */ new Set());
+	React.useEffect(() => {
+		if (permissionMode !== "bypass") return;
+		for (const { part } of pendingApprovals) {
+			const id = getApprovalRequestId(part);
+			if (!id || autoApprovedIds.current.has(id)) continue;
+			autoApprovedIds.current.add(id);
+			if (part.state === "approval-requested") onApprovalResponse?.({
+				id,
+				approved: true
+			});
+			else executionApprovals?.approve(id);
+		}
+	}, [
+		permissionMode,
+		messages,
+		onApprovalResponse,
+		executionApprovals
+	]);
+	const pendingApproval = permissionMode === "bypass" ? void 0 : pendingApprovals[0];
+	const contextUsage = contextWindow ? getContextUsage(messages) : void 0;
+	const lastAssistantIndex = onRegenerate && status !== "streaming" && status !== "submitted" ? messages.findLastIndex((message) => message.role === "assistant") : -1;
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("agent-chat", className),
@@ -51,42 +96,93 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 				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?.({
+				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__ */ jsxs(MessageContent, { children: [rendered, isCompactedPart(message, part, partIndex) ? /* @__PURE__ */ jsx("div", {
+							className: "message__compacted",
+							children: "Output truncated for storage"
+						}) : null] }, getPartKey(part, partIndex)) : null;
+					}),
+					renderMessageAfter?.({
 						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
-				})]
+						messageIndex
+					}),
+					onRegenerate && messageIndex === lastAssistantIndex ? /* @__PURE__ */ jsx(MessageActions, { children: /* @__PURE__ */ jsx(MessageAction, {
+						label: "Retry",
+						tooltip: "Regenerate response",
+						onClick: () => onRegenerate(message.id),
+						children: /* @__PURE__ */ jsx(RefreshIcon, { size: 14 })
+					}) }) : null
+				]
 			}, message.id ?? messageIndex))] }), /* @__PURE__ */ jsx(ConversationScrollButton, {})]
-		}), /* @__PURE__ */ jsx("div", {
+		}), /* @__PURE__ */ jsxs("div", {
 			className: "agent-chat__composer",
-			children: /* @__PURE__ */ jsx(PromptInput, {
-				onSubmit: handleSubmit,
-				children: pendingApproval && onApprovalResponse ? /* @__PURE__ */ jsx(PromptInputApproval, {
-					part: pendingApproval.part,
-					count: pendingApprovals.length,
-					onRespond: onApprovalResponse,
-					onSkip: () => {
-						const { part } = pendingApproval;
-						if (part.state === "approval-requested") setSkippedApprovalIds((previous) => [...previous, part.approval.id]);
-					}
-				}) : /* @__PURE__ */ jsxs(Fragment, { 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
-				})] })] })
-			})
+			children: [
+				notice ? /* @__PURE__ */ jsx("div", {
+					className: "agent-chat__notice",
+					children: notice
+				}) : null,
+				suggestions?.length && !pendingApproval ? /* @__PURE__ */ jsx(Suggestions, {
+					className: "agent-chat__suggestions",
+					children: suggestions.map((suggestion) => /* @__PURE__ */ jsx(Suggestion, {
+						suggestion,
+						disabled,
+						onClick: (text) => handleSubmit({
+							text,
+							files: []
+						})
+					}, suggestion))
+				}) : null,
+				/* @__PURE__ */ jsx(PromptInput, {
+					multiple: true,
+					onSubmit: handleSubmit,
+					children: pendingApproval ? /* @__PURE__ */ jsx(PromptInputApproval, {
+						part: pendingApproval.part,
+						count: pendingApprovals.length,
+						onRespond: onApprovalResponse,
+						executionApprovals,
+						onSkip: () => {
+							const id = getApprovalRequestId(pendingApproval.part);
+							if (id) setSkippedApprovalIds((previous) => [...previous, id]);
+						}
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(PromptInputAttachments, {}),
+						/* @__PURE__ */ jsx(PromptInputBody, { children: /* @__PURE__ */ jsx(PromptInputTextarea, {
+							"aria-label": "Message",
+							placeholder,
+							disabled
+						}) }),
+						/* @__PURE__ */ jsxs(PromptInputFooter, { children: [/* @__PURE__ */ jsxs(PromptInputTools, { children: [
+							/* @__PURE__ */ jsx(AgentChatAttachButton, {}),
+							approvalsWired ? /* @__PURE__ */ jsx(PromptInputPermissionSelector, {
+								value: permissionMode,
+								onValueChange: setPermissionMode
+							}) : null,
+							composerTools
+						] }), /* @__PURE__ */ jsxs("div", {
+							className: "prompt-input__footer-end",
+							children: [contextWindow ? /* @__PURE__ */ jsxs(Context, {
+								usedTokens: getContextUsedTokens(contextUsage),
+								maxTokens: contextWindow.maxTokens,
+								usage: contextUsage,
+								modelId: contextWindow.modelId,
+								children: [/* @__PURE__ */ jsx(ContextTrigger, {}), /* @__PURE__ */ jsxs(ContextContent, { children: [/* @__PURE__ */ jsx(ContextContentHeader, {}), /* @__PURE__ */ jsx(ContextContentBody, {})] })]
+							}) : null, /* @__PURE__ */ jsx(PromptInputSubmit, {
+								status,
+								onStop
+							})]
+						})] })
+					] })
+				})
+			]
 		})]
 	});
 }

package/dist/components/AgentConnection.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
 import { b as LinkIcon } from "../icons-DQC4Zw5R.js";
+import { Popover } from "./Popover.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-C2Xjxu9M.js";
-import { Popover } from "./Popover.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/AgentConnection.tsx

package/dist/components/BrowserLiveView.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
 import { A as SpinnerIcon, x as MaximizeIcon } from "../icons-DQC4Zw5R.js";
 import { Button } from "./Button.js";
-import { Badge } from "./Badge.js";
 import { Dialog, DialogContent, DialogTitle } from "./Dialog.js";
+import { Badge } from "./Badge.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/BrowserLiveView.tsx

package/dist/components/Context.d.ts

@@ -1,31 +1,21 @@
-import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
-import { PopoverProps } from "./Popover.js";
+import { PopoverPositionerProps, PopoverProps } from "./Popover.js";
 import * as React from "react";
+import { LanguageModelUsage, UIMessage } from "ai";
 
 //#region src/components/Context.d.ts
-interface ContextUsageCategory {
-  label: string;
-  tokens: number;
-  costUsd?: number;
-}
-interface ContextUsage {
-  input?: number;
-  inputTokens?: number;
-  output?: number;
-  outputTokens?: number;
-  reasoning?: number;
-  reasoningTokens?: number;
-  cache?: number;
-  cachedInputTokens?: number;
-  categories?: ContextUsageCategory[];
-}
+/**
+ * The AI SDK's `LanguageModelUsage`, taken whole. `Partial` only relaxes the
+ * required-but-`undefined`able keys for fixtures/JSX literals — key names and
+ * meanings are upstream's.
+ */
+type ContextTokenUsage = Partial<LanguageModelUsage>;
 interface ContextProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Tokens currently used. */
   usedTokens: number;
   /** Maximum context window size. */
   maxTokens: number;
   /** Optional usage breakdown. */
-  usage?: ContextUsage;
+  usage?: ContextTokenUsage;
   /** Optional model identifier shown in the header. */
   modelId?: string;
   /** Optional total cost in USD. */
@@ -36,8 +26,8 @@ interface ContextProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 /**
  * 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
@@ -45,7 +35,7 @@ interface ContextProps extends React.HTMLAttributes<HTMLDivElement> {
  *   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 />
@@ -73,17 +63,19 @@ declare function Context({
 }: ContextProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface ContextTriggerProps extends Omit<ButtonProps, "variant" | "color" | "className"> {
-  className?: string;
-}
+interface ContextTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
 declare function ContextTrigger({
   className,
   children,
   ...props
 }: ContextTriggerProps): React.JSX.Element;
-interface ContextContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface ContextContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The trigger usually sits in a composer at the bottom, so default "top". */
+  side?: PopoverPositionerProps["side"];
+}
 declare function ContextContent({
   className,
+  side,
   children,
   ...props
 }: ContextContentProps): React.JSX.Element;
@@ -125,5 +117,14 @@ declare function ContextInputUsage(props: ContextInputUsageProps): React.JSX.Ele
 declare function ContextOutputUsage(props: ContextOutputUsageProps): React.JSX.Element;
 declare function ContextReasoningUsage(props: ContextReasoningUsageProps): React.JSX.Element;
 declare function ContextCacheUsage(props: ContextCacheUsageProps): React.JSX.Element;
+/**
+ * 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.
+ */
+declare function getContextUsage(messages: readonly UIMessage[]): LanguageModelUsage | undefined;
+/** Tokens occupying the context window: `totalTokens`, or input + output. */
+declare function getContextUsedTokens(usage: LanguageModelUsage | undefined): number;
 //#endregion
-export { Context, ContextCacheUsage, ContextCacheUsageProps, ContextContent, ContextContentBody, ContextContentBodyProps, ContextContentFooter, ContextContentFooterProps, ContextContentHeader, ContextContentHeaderProps, ContextContentProps, ContextInputUsage, ContextInputUsageProps, ContextOutputUsage, ContextOutputUsageProps, ContextProps, ContextReasoningUsage, ContextReasoningUsageProps, ContextTrigger, ContextTriggerProps, ContextUsage, ContextUsageCategory, ContextUsageRowProps };
+export { Context, ContextCacheUsage, ContextCacheUsageProps, ContextContent, ContextContentBody, ContextContentBodyProps, ContextContentFooter, ContextContentFooterProps, ContextContentHeader, ContextContentHeaderProps, ContextContentProps, ContextInputUsage, ContextInputUsageProps, ContextOutputUsage, ContextOutputUsageProps, ContextProps, ContextReasoningUsage, ContextReasoningUsageProps, ContextTokenUsage, ContextTrigger, ContextTriggerProps, ContextUsageRowProps, getContextUsage, getContextUsedTokens };

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/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 };