@mcp-b/react-components 0.13.0 → 0.14.0

package/dist/{AgentChat-Br6tKEl8.d.ts → AgentChat-Cgb1xuT7.d.ts}

@@ -1,8 +1,9 @@
-import { tt as PromptInputMessage } from "./PromptInput-p5KmOmt1.js";
+import { W as PromptInputDictationProps, tt as PromptInputMessage } from "./PromptInput-ClNqBiIw.js";
 import * as React from "react";
 import { ChatAddToolApproveResponseFunction, ChatStatus, UIMessage } from "ai";
 import { PendingApproval, Think } from "@cloudflare/think";
 import { AgentStub } from "agents/client";
+import { UseVoiceInputReturn } from "@cloudflare/voice/react";
 
 //#region src/components/AgentChat.d.ts
 type AgentChatPart<MessageT extends UIMessage = UIMessage> = MessageT["parts"][number];
@@ -85,6 +86,10 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
   emptyState?: React.ReactNode;
   /** Extra controls rendered in the composer toolbar. */
   composerTools?: React.ReactNode;
+  /** Whole upstream voice-input hook result used by the built-in dictation recorder. */
+  voiceInput?: UseVoiceInputReturn;
+  /** Host prerequisite run before the built-in recorder calls `voiceInput.start()`. */
+  beforeVoiceStart?: PromptInputDictationProps["beforeStart"];
   /**
    * Rendered in the prompt-composer header before attachments and the text
    * field. Use it to compose a compact Activity, task state, or app-specific
@@ -175,6 +180,8 @@ declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   emptyState,
   composerHeader,
   composerTools,
+  voiceInput,
+  beforeVoiceStart,
   composerAddMenuItems,
   notice,
   onRegenerate,

package/dist/{PromptInput-p5KmOmt1.d.ts → PromptInput-ClNqBiIw.d.ts}

@@ -235,6 +235,16 @@ declare function PromptInputButton({
 interface PromptInputDictationProps extends Omit<PromptInputButtonProps, "children" | "onClick" | "tooltip"> {
   /** The whole upstream `useVoiceInput` result; authentication and transport stay in the host. */
   voice: UseVoiceInputReturn;
+  /**
+   * Runs immediately before the unchanged upstream `voice.start()` call.
+   * Use this for host-specific prerequisites, such as opening an extension tab
+   * that can present Chrome's microphone permission prompt. Reject to prevent
+   * `voice.start()` and surface the error in the composer.
+   *
+   * @see https://github.com/cloudflare/agents/blob/main/examples/voice-input/src/client.tsx
+   * @see https://developer.chrome.com/docs/extensions/reference/api/offscreen#type-Reason
+   */
+  beforeStart?: (voice: UseVoiceInputReturn) => void | Promise<void>;
 }
 /**
  * Voice-dictation control for PromptInput. Final upstream transcripts are
@@ -242,6 +252,7 @@ interface PromptInputDictationProps extends Omit<PromptInputButtonProps, "childr
  */
 declare function PromptInputDictation({
   voice,
+  beforeStart,
   className,
   disabled,
   ref,

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

@@ -1,4 +1,4 @@
-import { a as AgentChatRenderPartContext, r as AgentChatProps } from "./AgentChat-Br6tKEl8.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/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-Br6tKEl8.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 };

package/dist/components/AgentChat.js

@@ -7,7 +7,7 @@ import { MessageScroller, MessageScrollerButton, MessageScrollerContent, Message
 import { ConversationEmptyState } from "./Conversation.js";
 import { Message, MessageAction, MessageActions, MessageAttachment, MessageContent, MessageResponse } from "./Message.js";
 import { Marker, MarkerContent } from "./Marker.js";
-import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputHeader, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
+import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
 import { Source, Sources, SourcesContent, SourcesTrigger } from "./Sources.js";
 import { t as CopyButton } from "../copy-button-DUMLYdsk.js";
@@ -310,7 +310,7 @@ function renderDefaultPart(part) {
 * transport. Product code that talks to a Cloudflare Think agent should render
 * `ThinkChat`; use this directly only for plain AI SDK or read-only messages.
 */
-function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerHeader, composerTools, composerAddMenuItems, notice, onRegenerate, onEditAndResend, onApprovalResponse, thinkStub, onExecutionSettled, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, ref }) {
+function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerHeader, composerTools, voiceInput, beforeVoiceStart, composerAddMenuItems, notice, onRegenerate, onEditAndResend, onApprovalResponse, thinkStub, onExecutionSettled, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, ref }) {
 	const [copyAnnouncement, setCopyAnnouncement] = React.useState("");
 	const copyAnnouncementTimer = React.useRef(null);
 	const announceCopyStatus = React.useCallback((message) => {
@@ -551,7 +551,12 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 								value: permissionMode,
 								onValueChange: setPermissionMode
 							}) : null,
-							composerTools
+							composerTools,
+							voiceInput ? /* @__PURE__ */ jsx(PromptInputDictation, {
+								voice: voiceInput,
+								beforeStart: beforeVoiceStart,
+								disabled
+							}) : null
 						] }), /* @__PURE__ */ jsxs("div", {
 							className: "prompt-input__footer-end",
 							children: [contextWindow ? /* @__PURE__ */ jsxs(Context, {

package/dist/components/PromptInput.d.ts

@@ -1,2 +1,2 @@
-import { $ as PromptInputHoverCardTrigger, A as PromptInputCommandEmptyProps, At as getPendingToolApprovals, B as PromptInputCommandSeparator, C as PromptInputBody, Ct as PromptInputTools, D as PromptInputButtonTooltip, Dt as TooltipSide, E as PromptInputButtonProps, Et as TextInputContext, F as PromptInputCommandItem, G as PromptInputFooter, H as PromptInputControllerProps, I as PromptInputCommandItemProps, J as PromptInputHeaderProps, K as PromptInputFooterProps, L as PromptInputCommandList, M as PromptInputCommandGroupProps, Mt as usePromptInputController, N as PromptInputCommandInput, Nt as useProviderAttachments, O as PromptInputCommand, Ot as getApprovalRequestId, P as PromptInputCommandInputProps, Q as PromptInputHoverCardProps, R as PromptInputCommandListProps, S as PromptInputAttachmentsProps, St as PromptInputTextareaProps, T as PromptInputButton, Tt as PromptInputTooltipConfig, U as PromptInputDictation, V as PromptInputCommandSeparatorProps, W as PromptInputDictationProps, X as PromptInputHoverCardContent, Y as PromptInputHoverCard, Z as PromptInputHoverCardContentProps, _ as PromptInputApproval, _t as PromptInputTabLabelProps, a as PromptInputActionAddAttachments, at as PromptInputProvider, b as PromptInputAttachmentProps, bt as PromptInputTabsListProps, c as PromptInputActionAddScreenshotProps, ct as PromptInputSelectProps, d as PromptInputActionMenuContentProps, dt as PromptInputTab, et as PromptInputHoverCardTriggerProps, f as PromptInputActionMenuItem, ft as PromptInputTabBody, g as PromptInputActionMenuTriggerProps, gt as PromptInputTabLabel, h as PromptInputActionMenuTrigger, ht as PromptInputTabItemProps, i as PromptInput, it as PromptInputProps, j as PromptInputCommandGroup, jt as usePromptInputAttachments, k as PromptInputCommandEmpty, kt as getApprovalStateKey, l as PromptInputActionMenu, lt as PromptInputSubmit, m as PromptInputActionMenuProps, mt as PromptInputTabItem, n as PendingToolApproval, nt as PromptInputPermissionSelector, o as PromptInputActionAddAttachmentsProps, ot as PromptInputProviderProps, p as PromptInputActionMenuItemProps, pt as PromptInputTabBodyProps, q as PromptInputHeader, r as PermissionMode, rt as PromptInputPermissionSelectorProps, s as PromptInputActionAddScreenshot, st as PromptInputSelect, t as AttachmentsContext, tt as PromptInputMessage, u as PromptInputActionMenuContent, ut as PromptInputSubmitProps, v as PromptInputApprovalProps, vt as PromptInputTabProps, w as PromptInputBodyProps, wt as PromptInputToolsProps, x as PromptInputAttachments, xt as PromptInputTextarea, y as PromptInputAttachment, yt as PromptInputTabsList, z as PromptInputCommandProps } from "../PromptInput-p5KmOmt1.js";
+import { $ as PromptInputHoverCardTrigger, A as PromptInputCommandEmptyProps, At as getPendingToolApprovals, B as PromptInputCommandSeparator, C as PromptInputBody, Ct as PromptInputTools, D as PromptInputButtonTooltip, Dt as TooltipSide, E as PromptInputButtonProps, Et as TextInputContext, F as PromptInputCommandItem, G as PromptInputFooter, H as PromptInputControllerProps, I as PromptInputCommandItemProps, J as PromptInputHeaderProps, K as PromptInputFooterProps, L as PromptInputCommandList, M as PromptInputCommandGroupProps, Mt as usePromptInputController, N as PromptInputCommandInput, Nt as useProviderAttachments, O as PromptInputCommand, Ot as getApprovalRequestId, P as PromptInputCommandInputProps, Q as PromptInputHoverCardProps, R as PromptInputCommandListProps, S as PromptInputAttachmentsProps, St as PromptInputTextareaProps, T as PromptInputButton, Tt as PromptInputTooltipConfig, U as PromptInputDictation, V as PromptInputCommandSeparatorProps, W as PromptInputDictationProps, X as PromptInputHoverCardContent, Y as PromptInputHoverCard, Z as PromptInputHoverCardContentProps, _ as PromptInputApproval, _t as PromptInputTabLabelProps, a as PromptInputActionAddAttachments, at as PromptInputProvider, b as PromptInputAttachmentProps, bt as PromptInputTabsListProps, c as PromptInputActionAddScreenshotProps, ct as PromptInputSelectProps, d as PromptInputActionMenuContentProps, dt as PromptInputTab, et as PromptInputHoverCardTriggerProps, f as PromptInputActionMenuItem, ft as PromptInputTabBody, g as PromptInputActionMenuTriggerProps, gt as PromptInputTabLabel, h as PromptInputActionMenuTrigger, ht as PromptInputTabItemProps, i as PromptInput, it as PromptInputProps, j as PromptInputCommandGroup, jt as usePromptInputAttachments, k as PromptInputCommandEmpty, kt as getApprovalStateKey, l as PromptInputActionMenu, lt as PromptInputSubmit, m as PromptInputActionMenuProps, mt as PromptInputTabItem, n as PendingToolApproval, nt as PromptInputPermissionSelector, o as PromptInputActionAddAttachmentsProps, ot as PromptInputProviderProps, p as PromptInputActionMenuItemProps, pt as PromptInputTabBodyProps, q as PromptInputHeader, r as PermissionMode, rt as PromptInputPermissionSelectorProps, s as PromptInputActionAddScreenshot, st as PromptInputSelect, t as AttachmentsContext, tt as PromptInputMessage, u as PromptInputActionMenuContent, ut as PromptInputSubmitProps, v as PromptInputApprovalProps, vt as PromptInputTabProps, w as PromptInputBodyProps, wt as PromptInputToolsProps, x as PromptInputAttachments, xt as PromptInputTextarea, y as PromptInputAttachment, yt as PromptInputTabsList, z as PromptInputCommandProps } from "../PromptInput-ClNqBiIw.js";
 export { AttachmentsContext, PendingToolApproval, PermissionMode, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputActionAddScreenshot, PromptInputActionAddScreenshotProps, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputApproval, PromptInputApprovalProps, PromptInputAttachment, PromptInputAttachmentProps, PromptInputAttachments, PromptInputAttachmentsProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandEmptyProps, PromptInputCommandGroup, PromptInputCommandGroupProps, PromptInputCommandInput, PromptInputCommandInputProps, PromptInputCommandItem, PromptInputCommandItemProps, PromptInputCommandList, PromptInputCommandListProps, PromptInputCommandProps, PromptInputCommandSeparator, PromptInputCommandSeparatorProps, PromptInputControllerProps, PromptInputDictation, PromptInputDictationProps, PromptInputFooter, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputMessage, PromptInputPermissionSelector, PromptInputPermissionSelectorProps, PromptInputProps, PromptInputProvider, PromptInputProviderProps, PromptInputSelect, PromptInputSelectProps, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, PromptInputTooltipConfig, TextInputContext, TooltipSide, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, useProviderAttachments };

package/dist/components/PromptInput.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { D as PencilIcon, F as StopIcon, L as WarningIcon, N as SpinnerIcon, P as SquareIcon, S as MicrophoneIcon, T as PaperclipIcon, h as FileIcon, i as ArrowUpIcon, k as PlusIcon, o as ChevronDownIcon, w as MonitorIcon, z as XIcon } from "../icons-Ba9THQKz.js";
+import { D as PencilIcon, F as StopIcon, L as WarningIcon, N as SpinnerIcon, P as SquareIcon, R as WrenchIcon, S as MicrophoneIcon, T as PaperclipIcon, h as FileIcon, i as ArrowUpIcon, k as PlusIcon, o as ChevronDownIcon, w as MonitorIcon, z as XIcon } from "../icons-Ba9THQKz.js";
 import { Button } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import { t as AttachmentPreview } from "../attachment-preview-DIs50Q0h.js";
@@ -450,6 +450,7 @@ function PromptInputButton({ className, tooltip, variant = "ghost", color = "neu
 	const resolvedSize = size ?? (React.Children.count(children) > 1 ? "xs" : "icon-xs");
 	const tooltipConfig = typeof tooltip === "string" ? { content: tooltip } : tooltip;
 	const fallbackLabel = ariaLabel ?? (typeof tooltipConfig?.content === "string" ? tooltipConfig.content : void 0);
+	const hasResponsiveLabel = Boolean(tooltipConfig && React.Children.count(children) > 1);
 	const button = /* @__PURE__ */ jsx(Button, {
 		ref,
 		type: "button",
@@ -458,6 +459,7 @@ function PromptInputButton({ className, tooltip, variant = "ghost", color = "neu
 		size: resolvedSize,
 		className: cx("prompt-input__button", className),
 		"aria-label": fallbackLabel,
+		"data-responsive-label": hasResponsiveLabel || void 0,
 		...props,
 		children
 	});
@@ -478,10 +480,14 @@ function PromptInputButton({ className, tooltip, variant = "ghost", color = "neu
 * Voice-dictation control for PromptInput. Final upstream transcripts are
 * appended to the composer while interim text remains ephemeral.
 */
-function PromptInputDictation({ voice, className, disabled, ref, ...props }) {
+function PromptInputDictation({ voice, beforeStart, className, disabled, ref, ...props }) {
 	const controller = useOptionalPromptInputController();
+	const attachments = usePromptInputAttachments();
 	const buttonRef = React.useRef(null);
 	const committedTranscriptRef = React.useRef("");
+	const submitAfterStopRef = React.useRef(false);
+	const recordingStartedAtRef = React.useRef(null);
+	const [elapsedSeconds, setElapsedSeconds] = React.useState(0);
 	const [isStarting, setIsStarting] = React.useState(false);
 	const [startError, setStartError] = React.useState(null);
 	React.useImperativeHandle(ref, () => buttonRef.current, []);
@@ -501,49 +507,195 @@ function PromptInputDictation({ voice, className, disabled, ref, ...props }) {
 		textarea.value = appendDictationTranscript(textarea.value, addition);
 		textarea.dispatchEvent(new Event("input", { bubbles: true }));
 	}, [controller, voice.transcript]);
+	React.useEffect(() => {
+		if (!voice.isListening) {
+			recordingStartedAtRef.current = null;
+			setElapsedSeconds(0);
+			if (submitAfterStopRef.current) {
+				submitAfterStopRef.current = false;
+				window.requestAnimationFrame(() => buttonRef.current?.form?.requestSubmit());
+			}
+			return;
+		}
+		recordingStartedAtRef.current ??= Date.now();
+		const updateElapsed = () => {
+			setElapsedSeconds(Math.floor((Date.now() - (recordingStartedAtRef.current ?? Date.now())) / 1e3));
+		};
+		updateElapsed();
+		const timer = window.setInterval(updateElapsed, 250);
+		return () => window.clearInterval(timer);
+	}, [voice.isListening]);
 	const error = startError ?? voice.error;
 	const listening = voice.isListening;
 	const label = listening ? "Stop dictation" : error ? "Retry dictation" : "Start dictation";
 	const status = error ? `Dictation failed: ${error}` : listening ? voice.interimTranscript ? "Listening. Speech detected." : "Listening for speech." : isStarting ? "Starting dictation." : "";
 	const level = Math.min(Math.max(voice.audioLevel, 0), 1);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PromptInputButton, {
-		ref: buttonRef,
-		className: cx("prompt-input__dictation", className),
-		tooltip: {
-			content: label,
-			side: "top"
-		},
-		"aria-label": label,
-		"aria-pressed": listening,
-		"data-error": error ? "true" : void 0,
-		"data-listening": listening ? "true" : void 0,
-		"data-starting": isStarting ? "true" : void 0,
-		disabled: disabled || isStarting,
-		onClick: () => {
-			setStartError(null);
-			if (listening) {
-				voice.stop();
+	const elapsed = formatDictationElapsed(elapsedSeconds);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(PromptInputButton, {
+			ref: buttonRef,
+			className: cx("prompt-input__dictation", className),
+			tooltip: {
+				content: label,
+				side: "top"
+			},
+			"aria-label": label,
+			"aria-hidden": listening || void 0,
+			"aria-pressed": listening,
+			"data-error": error ? "true" : void 0,
+			"data-listening": listening ? "true" : void 0,
+			"data-starting": isStarting ? "true" : void 0,
+			disabled: disabled || isStarting || listening,
+			tabIndex: listening ? -1 : void 0,
+			onClick: () => {
+				setStartError(null);
+				if (listening) {
+					voice.stop();
+					return;
+				}
+				setIsStarting(true);
+				Promise.resolve().then(() => beforeStart?.(voice)).then(() => voice.start()).catch((reason) => {
+					setStartError(reason instanceof Error ? reason.message : String(reason));
+				}).finally(() => setIsStarting(false));
+			},
+			...props,
+			children: /* @__PURE__ */ jsx("span", {
+				className: "prompt-input__dictation-icon",
+				style: { "--prompt-input-dictation-level": level },
+				"aria-hidden": "true",
+				children: isStarting ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : listening ? /* @__PURE__ */ jsx(StopIcon, {}) : /* @__PURE__ */ jsx(MicrophoneIcon, {})
+			})
+		}),
+		listening ? /* @__PURE__ */ jsxs("div", {
+			className: "prompt-input__recording",
+			role: "group",
+			"aria-label": "Voice recording controls",
+			children: [
+				/* @__PURE__ */ jsx(PromptInputButton, {
+					className: "prompt-input__recording-add",
+					tooltip: "Add photos or files",
+					onClick: () => attachments.openFileDialog(),
+					children: /* @__PURE__ */ jsx(PlusIcon, {})
+				}),
+				/* @__PURE__ */ jsx(PromptInputRecordingWaveform, {
+					active: true,
+					level
+				}),
+				/* @__PURE__ */ jsx("time", {
+					className: "prompt-input__recording-time",
+					dateTime: `PT${elapsedSeconds}S`,
+					children: elapsed
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					className: "prompt-input__recording-button",
+					type: "button",
+					variant: "normal",
+					color: "neutral",
+					size: "icon",
+					"aria-label": "Stop dictation",
+					onClick: () => voice.stop(),
+					children: /* @__PURE__ */ jsx(SquareIcon, { size: 12 })
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					className: "prompt-input__recording-button",
+					type: "button",
+					color: "primary",
+					size: "icon",
+					"aria-label": "Stop dictation and send",
+					onClick: () => {
+						submitAfterStopRef.current = true;
+						voice.stop();
+					},
+					children: /* @__PURE__ */ jsx(ArrowUpIcon, { size: 18 })
+				})
+			]
+		}) : null,
+		/* @__PURE__ */ jsx("span", {
+			className: "prompt-input__dictation-status",
+			role: "status",
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			children: status
+		})
+	] });
+}
+/**
+* Scrolling canvas waveform adapted from ElevenLabs UI's Waveform component.
+* Cloudflare Voice already owns the microphone stream, so this renderer
+* consumes its upstream `audioLevel` instead of requesting a second stream.
+*/
+function PromptInputRecordingWaveform({ active, level }) {
+	const canvasRef = React.useRef(null);
+	const containerRef = React.useRef(null);
+	const historyRef = React.useRef([]);
+	const levelRef = React.useRef(level);
+	levelRef.current = level;
+	React.useEffect(() => {
+		const canvas = canvasRef.current;
+		const container = containerRef.current;
+		if (!canvas || !container) return;
+		const resize = () => {
+			const rect = container.getBoundingClientRect();
+			const dpr = window.devicePixelRatio || 1;
+			canvas.width = Math.max(1, Math.round(rect.width * dpr));
+			canvas.height = Math.max(1, Math.round(rect.height * dpr));
+			canvas.style.width = `${rect.width}px`;
+			canvas.style.height = `${rect.height}px`;
+			canvas.getContext("2d")?.setTransform(dpr, 0, 0, dpr, 0, 0);
+		};
+		const observer = new ResizeObserver(resize);
+		observer.observe(container);
+		resize();
+		const barWidth = 2;
+		const step = 4;
+		let animationFrame = 0;
+		let lastUpdate = 0;
+		let smoothedLevel = levelRef.current;
+		const draw = (time) => {
+			const context = canvas.getContext("2d");
+			const rect = canvas.getBoundingClientRect();
+			if (!context || rect.width === 0 || rect.height === 0) {
+				animationFrame = window.requestAnimationFrame(draw);
 				return;
 			}
-			setIsStarting(true);
-			voice.start().catch((reason) => {
-				setStartError(reason instanceof Error ? reason.message : String(reason));
-			}).finally(() => setIsStarting(false));
-		},
-		...props,
-		children: /* @__PURE__ */ jsx("span", {
-			className: "prompt-input__dictation-icon",
-			style: { "--prompt-input-dictation-level": level },
-			"aria-hidden": "true",
-			children: isStarting ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : listening ? /* @__PURE__ */ jsx(StopIcon, {}) : /* @__PURE__ */ jsx(MicrophoneIcon, {})
-		})
-	}), /* @__PURE__ */ jsx("span", {
-		className: "prompt-input__dictation-status",
-		role: "status",
-		"aria-live": "polite",
-		"aria-atomic": "true",
-		children: status
-	})] });
+			const barCount = Math.max(1, Math.floor(rect.width / step));
+			if (active && time - lastUpdate >= 50) {
+				smoothedLevel += (levelRef.current - smoothedLevel) * .45;
+				historyRef.current.push(Math.max(.08, Math.min(1, smoothedLevel)));
+				if (historyRef.current.length > barCount) historyRef.current.shift();
+				lastUpdate = time;
+			}
+			context.clearRect(0, 0, rect.width, rect.height);
+			context.fillStyle = getComputedStyle(canvas).color;
+			const centerY = rect.height / 2;
+			for (let index = 0; index < barCount; index += 1) {
+				const historyIndex = historyRef.current.length - barCount + index;
+				const value = historyIndex >= 0 ? historyRef.current[historyIndex] ?? .08 : .08;
+				const barHeight = Math.max(2, value * rect.height * .9);
+				const x = index * step;
+				context.globalAlpha = .45 + value * .55;
+				context.beginPath();
+				context.roundRect(x, centerY - barHeight / 2, barWidth, barHeight, 1);
+				context.fill();
+			}
+			context.globalAlpha = 1;
+			animationFrame = window.requestAnimationFrame(draw);
+		};
+		animationFrame = window.requestAnimationFrame(draw);
+		return () => {
+			observer.disconnect();
+			window.cancelAnimationFrame(animationFrame);
+		};
+	}, [active]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: "prompt-input__recording-waveform",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef })
+	});
+}
+function formatDictationElapsed(totalSeconds) {
+	return `${Math.floor(totalSeconds / 60)}:${(totalSeconds % 60).toString().padStart(2, "0")}`;
 }
 function appendDictationTranscript(current, transcript) {
 	if (!current) return transcript;
@@ -635,23 +787,38 @@ const PERMISSION_MODES = [{
 */
 function PromptInputPermissionSelector({ value, onValueChange, question = "How should agent actions be approved?" }) {
 	const selected = PERMISSION_MODES.find((mode) => mode.value === value) ?? PERMISSION_MODES[0];
-	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(Menu.Trigger, {
+	const trigger = /* @__PURE__ */ jsx(Menu.Trigger, {
 		unstyled: true,
 		render: /* @__PURE__ */ jsxs(PromptInputButton, {
 			size: "xs",
 			className: "prompt-input__permissions-trigger",
 			"data-mode": value,
 			"aria-label": selected.label,
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "prompt-input__permissions-current",
-				children: PERMISSION_MODES.map((mode) => /* @__PURE__ */ jsxs("span", {
-					className: "prompt-input__permissions-current-option",
-					"data-active": mode.value === value || void 0,
-					children: [mode.value === "bypass" ? /* @__PURE__ */ jsx(WarningIcon, { size: 14 }) : null, mode.label]
-				}, mode.value))
-			}), /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12 })]
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "prompt-input__permissions-icon",
+					children: value === "bypass" ? /* @__PURE__ */ jsx(WarningIcon, { size: 14 }) : /* @__PURE__ */ jsx(WrenchIcon, { size: 14 })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "prompt-input__permissions-current",
+					children: PERMISSION_MODES.map((mode) => /* @__PURE__ */ jsx("span", {
+						className: "prompt-input__permissions-current-option",
+						"data-active": mode.value === value || void 0,
+						children: mode.label
+					}, mode.value))
+				}),
+				/* @__PURE__ */ jsx(ChevronDownIcon, {
+					className: "prompt-input__permissions-chevron",
+					size: 12
+				})
+			]
 		})
-	}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsxs(Menu.Popup, {
+	});
+	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: trigger }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		side: "top",
+		sideOffset: 6,
+		children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: selected.label })
+	}) })] }), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsxs(Menu.Popup, {
 		className: "prompt-input__permissions-menu",
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "prompt-input__permissions-question",

package/dist/components/ThinkChat.d.ts

@@ -1,8 +1,8 @@
-import { a as AgentChatRenderPartContext, r as AgentChatProps } from "../AgentChat-Br6tKEl8.js";
+import { a as AgentChatRenderPartContext, r as AgentChatProps } from "../AgentChat-Cgb1xuT7.js";
 import { n as BrowserLiveViewProps, t as BrowserLiveView } from "../BrowserLiveView-BV5qgFgI.js";
 import { n as BrowserReplayProps, t as BrowserReplay } from "../BrowserReplay-xWvRjRAC.js";
 import { _ as isThinkChatActivityPart } from "../ThinkChatToolParts-Cv4o7j6F.js";
-import { a as ThinkChatToolRenderers, c as renderThinkChatActivityPart, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as describeThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-Cuk28Js_.js";
+import { a as ThinkChatToolRenderers, c as renderThinkChatActivityPart, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as describeThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-m9orbdeI.js";
 import { n as ThinkChatValue } from "../ThinkChatContext-C3Eb1Xpi.js";
 import { FileInfo, UseWorkspaceOptions, WorkspaceExplorer, WorkspaceExplorerProps, WorkspaceFileState, WorkspaceInfo, WorkspaceSource, WorkspaceState, inferWorkspaceLanguage, useWorkspace } from "./WorkspaceExplorer.js";
 import * as React from "react";
@@ -10,6 +10,7 @@ import { UIMessage } from "ai";
 import { UseAgentOptions } from "agents/react";
 import { PendingApproval, Think } from "@cloudflare/think";
 import { AgentStub } from "agents/client";
+import { UseVoiceInputReturn } from "@cloudflare/voice/react";
 
 //#region src/components/ThinkChat.d.ts
 interface ThinkChatProviderProps<State = unknown, MessageT extends UIMessage = UIMessage> {
@@ -32,6 +33,10 @@ interface ThinkChatMessagesProps<MessageT extends UIMessage = UIMessage> extends
   emptyState?: React.ReactNode;
   /** Extra controls rendered inside the composer, next to the send button. */
   composerTools?: React.ReactNode;
+  /** Whole upstream `useVoiceInput` result for the built-in microphone recorder. */
+  voiceInput?: UseVoiceInputReturn;
+  /** Host prerequisite run before the built-in recorder calls `voiceInput.start()`. */
+  beforeVoiceStart?: AgentChatProps<MessageT>["beforeVoiceStart"];
   /** Optional product state rendered in the PromptInput header, such as an Activity. */
   composerHeader?: AgentChatProps<MessageT>["composerHeader"];
   /** Extra rows rendered in the built-in plus menu after files. */

package/dist/components/ThinkChatActivity.d.ts

@@ -1,3 +1,3 @@
 import { _ as isThinkChatActivityPart } from "../ThinkChatToolParts-Cv4o7j6F.js";
-import { a as ThinkChatToolRenderers, c as renderThinkChatActivityPart, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as describeThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-Cuk28Js_.js";
+import { a as ThinkChatToolRenderers, c as renderThinkChatActivityPart, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as describeThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-m9orbdeI.js";
 export { ThinkChatActivity, ThinkChatActivityProps, ThinkChatActivityRendererOptions, ThinkChatToolRenderer, ThinkChatToolRenderers, createThinkChatActivityRenderer, describeThinkChatActivityPart, isThinkChatActivityPart, renderThinkChatActivityPart };

package/dist/styles/prompt-input.css

@@ -1,4 +1,6 @@
 .prompt-input {
+  container: prompt-input / inline-size;
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--sigvelo-spacing-1-5);
@@ -17,6 +19,55 @@
     box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
+.prompt-input__recording {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+  flex: 1;
+  min-width: 0;
+}
+
+.prompt-input__recording-add {
+  flex: 0 0 auto;
+}
+
+.prompt-input__recording-waveform {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  block-size: var(--sigvelo-spacing-4);
+  color: var(--sigvelo-color-text);
+}
+
+.prompt-input__recording-waveform canvas {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.prompt-input__recording-time {
+  min-inline-size: 2.5rem;
+  color: var(--sigvelo-color-text-muted);
+  font-variant-numeric: tabular-nums;
+  font-size: var(--sigvelo-text-sm);
+  text-align: end;
+}
+
+.prompt-input__recording-button {
+  flex: 0 0 auto;
+  border-radius: var(--sigvelo-radius-full);
+}
+
+.prompt-input__tools:has(.prompt-input__recording) {
+  flex: 1;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.prompt-input__tools:has(.prompt-input__recording) > :not(.prompt-input__recording),
+.prompt-input__footer:has(.prompt-input__recording) > :not(.prompt-input__tools) {
+  display: none;
+}
+
 .prompt-input__file-input {
   position: fixed;
   inline-size: 1px;
@@ -288,6 +339,13 @@
   gap: 0.25rem;
 }
 
+.prompt-input__permissions-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
 .prompt-input__permissions-trigger:hover,
 .prompt-input__permissions-trigger[data-popup-open] {
   background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
@@ -314,6 +372,38 @@
   white-space: nowrap;
 }
 
+@container prompt-input (max-width: 36rem) {
+  .prompt-input__footer {
+    gap: var(--sigvelo-spacing-1);
+  }
+
+  .prompt-input__tools {
+    min-width: 0;
+    flex-wrap: nowrap;
+  }
+
+  .prompt-input__button[data-responsive-label] {
+    inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding-inline: 0;
+    border-radius: var(--sigvelo-radius-full);
+  }
+
+  .prompt-input__button[data-responsive-label] > span,
+  .prompt-input__permissions-current,
+  .prompt-input__permissions-chevron {
+    display: none;
+  }
+
+  .prompt-input__permissions-trigger {
+    inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding-inline: 0;
+    justify-content: center;
+    border-radius: var(--sigvelo-radius-full);
+  }
+}
+
 .prompt-input__permissions-current-option:not([data-active]) {
   visibility: hidden;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -53,7 +53,7 @@
     "lucide-react": "^1.23.0",
     "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.13.0"
+    "@mcp-b/design-tokens": "0.14.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",