@copilotkit/react-core 1.81.0 → 1.83.0

package/dist/v2/index.umd.js

@@ -243,7 +243,16 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		chatToggleCloseLabel: "Close chat",
 		chatScrollToBottomLabel: "Scroll to bottom",
 		modalHeaderTitle: "CopilotKit Chat",
-		welcomeMessageText: "How can I help you today?"
+		welcomeMessageText: "How can I help you today?",
+		reasoningMessageThinkingLabel: "Thinking…",
+		chatInputSlashMenuLabel: "Slash commands",
+		chatInputSlashMenuEmptyText: "No commands found",
+		attachmentRemoveButtonLabel: "Remove attachment",
+		attachmentPlayVideoButtonLabel: "Play video",
+		attachmentPreviewCloseButtonLabel: "Close preview",
+		modalHeaderCloseButtonLabel: "Close",
+		modalHeaderThreadsButtonLabel: "Open threads",
+		sidebarLabel: "Copilot chat sidebar"
 	};
 	/**
 	* Mobile breakpoint below which the chat modal and the thread-list drawer are
@@ -1395,13 +1404,13 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		const slashMenu = slashMenuVisible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			"data-testid": "copilot-slash-menu",
 			role: "listbox",
-			"aria-label": "Slash commands",
+			"aria-label": labels.chatInputSlashMenuLabel,
 			ref: slashMenuRef,
 			className: "cpk:absolute cpk:bottom-full cpk:left-0 cpk:right-0 cpk:z-30 cpk:mb-2 cpk:max-h-64 cpk:overflow-y-auto cpk:rounded-lg cpk:border cpk:border-border cpk:bg-white cpk:shadow-lg cpk:dark:border-[#3a3a3a] cpk:dark:bg-[#1f1f1f]",
 			style: { maxHeight: `${SLASH_MENU_MAX_VISIBLE_ITEMS * SLASH_MENU_ITEM_HEIGHT_PX}px` },
 			children: filteredCommands.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "cpk:px-3 cpk:py-2 cpk:text-sm cpk:text-muted-foreground",
-				children: "No commands found"
+				children: labels.chatInputSlashMenuEmptyText
 			}) : filteredCommands.map((item, index) => {
 				const isActive = index === slashHighlightIndex;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -1815,7 +1824,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 
 //#endregion
 //#region package.json
-	var version = "1.81.0";
+	var version = "1.83.0";
 
 //#endregion
 //#region src/v2/components/CopilotKitInspector.tsx
@@ -3413,7 +3422,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 	*/
 	function A2UICatalogContext({ catalog, includeSchema }) {
 		const { copilotkit } = useCopilotKit();
-		const capabilitiesValue = (0, react.useMemo)(() => (0, _copilotkit_a2ui_renderer.buildCatalogContextValue)(catalog), [catalog]);
+		const capabilitiesValue = (0, react.useMemo)(() => (0, _copilotkit_a2ui_renderer.buildCatalogContextValue)(catalog, { includeSchema: includeSchema !== false }), [catalog, includeSchema]);
 		const schemaValue = (0, react.useMemo)(() => includeSchema !== false ? JSON.stringify((0, _copilotkit_a2ui_renderer.extractCatalogComponentSchemas)(catalog)) : null, [catalog, includeSchema]);
 		const a2uiAgentsKey = copilotkit?.a2uiAgents?.join(",");
 		(0, react.useLayoutEffect)(() => {
@@ -9044,14 +9053,14 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		const line = appearance === "line";
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-copilotkit": true,
-			className: (0, tailwind_merge.twMerge)(!line && "cpk:border-t cpk:border-border", className),
+			className: (0, tailwind_merge.twMerge)(appearance === "card" && "cpk:border-t cpk:border-border", className),
 			...props,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 				type: "button",
 				"aria-expanded": open,
 				"aria-controls": detailsId,
 				onClick: () => setOpen((value) => !value),
-				className: (0, tailwind_merge.twMerge)("cpk:group/row cpk:m-0 cpk:flex cpk:min-w-0 cpk:cursor-pointer cpk:items-center cpk:gap-2 cpk:border-none cpk:bg-transparent cpk:text-left cpk:text-[13px] cpk:text-inherit cpk:transition-colors cpk:hover:bg-accent/60 cpk:focus-visible:outline-2 cpk:focus-visible:-outline-offset-2 cpk:focus-visible:outline-ring", line ? "cpk:-mx-1.5 cpk:w-[calc(100%+0.75rem)] cpk:rounded-md cpk:px-1.5 cpk:py-1" : "cpk:w-full cpk:px-3.5 cpk:py-2"),
+				className: (0, tailwind_merge.twMerge)("cpk:group/row cpk:m-0 cpk:flex cpk:min-w-0 cpk:cursor-pointer cpk:items-center cpk:gap-2 cpk:border-none cpk:bg-transparent cpk:text-left cpk:text-[13px] cpk:text-inherit cpk:transition-colors cpk:hover:bg-accent/60 cpk:focus-visible:outline-2 cpk:focus-visible:-outline-offset-2 cpk:focus-visible:outline-ring", line ? "cpk:-mx-1.5 cpk:w-[calc(100%+0.75rem)] cpk:rounded-md cpk:px-1.5 cpk:py-1" : appearance === "stack" ? "cpk:w-full cpk:px-3.5 cpk:py-2.5" : "cpk:w-full cpk:px-3.5 cpk:py-2"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusIcon, { status }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -9091,7 +9100,8 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 	*
 	* Each call is drawn by its registered renderer. CopilotKit's built-in card
 	* (`useDefaultRenderTool`) draws a compact row inside the card and line
-	* appearances; a custom wildcard renderer draws whatever it draws.
+	* appearances and an open stack; a custom wildcard renderer draws whatever it
+	* draws.
 	*/
 	function CopilotChatToolCallGroup({ calls, renderCall, appearance = "card", isActive = false, className, ...props }) {
 		const [open, setOpen] = (0, react.useState)(false);
@@ -9170,11 +9180,6 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			});
 		}
 		if (appearance === "stack") {
-			if (calls.length === 1) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				...groupProps,
-				className: (0, tailwind_merge.twMerge)("cpk:py-1", className),
-				children: renderCall(latest)
-			});
 			const behind = open ? 0 : Math.min(calls.length - 1, 2);
 			const layer = "cpk:rounded-xl cpk:border cpk:border-border cpk:bg-card cpk:text-card-foreground";
 			const latestStatus = entryStatus(latest, isActive);
@@ -9188,68 +9193,88 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				},
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "cpk:relative cpk:isolate",
-					children: [Array.from({ length: behind }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						"aria-hidden": "true",
-						className: (0, tailwind_merge.twMerge)(layer, "cpk:absolute cpk:inset-0"),
-						style: {
-							transform: `translateY(${(index + 1) * 6}px) scaleX(${1 - (index + 1) * .045})`,
-							zIndex: -1 - index,
-							opacity: 1 - (index + 1) * .28
-						}
-					}, index)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						"aria-expanded": open,
-						"aria-controls": open ? bodyId : void 0,
-						onClick: () => setOpen((value) => !value),
-						className: (0, tailwind_merge.twMerge)("cpk:relative cpk:m-0 cpk:flex cpk:min-w-0 cpk:cursor-pointer cpk:items-center cpk:text-left cpk:transition-colors cpk:focus-visible:outline-2 cpk:focus-visible:outline-ring", open ? "cpk:mb-1 cpk:gap-1.5 cpk:rounded-md cpk:border-none cpk:bg-transparent cpk:p-0 cpk:py-0.5 cpk:text-xs cpk:text-muted-foreground cpk:hover:text-foreground" : (0, tailwind_merge.twMerge)(layer, "cpk:w-full cpk:gap-2 cpk:px-3.5 cpk:py-2.5 cpk:text-[13px] cpk:shadow-[0_1px_2px_rgb(0_0_0/0.04)] cpk:hover:bg-accent")),
-						children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-							pluralize(calls.length, "tool call"),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FailedCount, { calls }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, {
-								open: true,
-								className: "cpk:-rotate-90"
-							}),
-							"Collapse"
-						] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "cpk:flex cpk:min-w-0 cpk:flex-1 cpk:items-center cpk:gap-2 cpk:animate-[cpk-stack-drop_260ms_cubic-bezier(0.16,1,0.3,1)] cpk:motion-reduce:animate-none",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusIcon, { status: latestStatus }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: (0, tailwind_merge.twMerge)("cpk:shrink-0 cpk:font-mono cpk:font-medium cpk:text-foreground", latestStatus === "running" && "cpk-shimmer"),
-									children: latest.toolCall.function.name
-								}),
-								latestPreview && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "cpk:min-w-0 cpk:truncate cpk:font-mono cpk:text-muted-foreground",
-									children: latestPreview
-								})
-							]
-						}, latest.toolCall.id), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "cpk:ml-2 cpk:inline-flex cpk:shrink-0 cpk:items-center cpk:gap-2 cpk:text-xs cpk:text-muted-foreground",
-							children: [
+					children: [
+						Array.from({ length: behind }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							"aria-hidden": "true",
+							className: (0, tailwind_merge.twMerge)(layer, "cpk:absolute cpk:inset-0"),
+							style: {
+								transform: `translateY(${(index + 1) * 6}px) scaleX(${1 - (index + 1) * .045})`,
+								zIndex: -1 - index,
+								opacity: 1 - (index + 1) * .28
+							}
+						}, index)),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							"aria-expanded": open,
+							"aria-controls": open ? bodyId : void 0,
+							onClick: () => setOpen((value) => !value),
+							className: (0, tailwind_merge.twMerge)("cpk:relative cpk:m-0 cpk:flex cpk:min-w-0 cpk:cursor-pointer cpk:items-center cpk:text-left cpk:transition-colors cpk:focus-visible:outline-2 cpk:focus-visible:outline-ring", open ? "cpk:mb-1.5 cpk:w-full cpk:gap-1.5 cpk:rounded-md cpk:border-none cpk:bg-transparent cpk:p-0 cpk:py-0.5 cpk:text-xs cpk:text-muted-foreground cpk:hover:text-foreground" : (0, tailwind_merge.twMerge)(layer, "cpk:w-full cpk:gap-2 cpk:px-3.5 cpk:py-2.5 cpk:text-[13px] cpk:shadow-[0_1px_2px_rgb(0_0_0/0.04)] cpk:hover:bg-accent")),
+							children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+								pluralize(calls.length, "tool call"),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FailedCount, { calls }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "cpk:tabular-nums",
-									children: pluralize(calls.length, "call")
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, {
-									open: false,
-									className: "cpk:rotate-90"
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "cpk:ml-auto cpk:inline-flex cpk:items-center cpk:gap-1",
+									children: ["Collapse", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, {
+										open: true,
+										className: "cpk:-rotate-90"
+									})]
 								})
-							]
-						})] })
-					})]
+							] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "cpk:flex cpk:min-w-0 cpk:flex-1 cpk:items-center cpk:gap-2 cpk:animate-[cpk-stack-drop_260ms_cubic-bezier(0.16,1,0.3,1)] cpk:motion-reduce:animate-none",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusIcon, { status: latestStatus }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: (0, tailwind_merge.twMerge)("cpk:shrink-0 cpk:font-mono cpk:font-medium cpk:text-foreground", latestStatus === "running" && "cpk-shimmer"),
+										children: latest.toolCall.function.name
+									}),
+									latestPreview && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "cpk:min-w-0 cpk:truncate cpk:font-mono cpk:text-muted-foreground",
+										children: latestPreview
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "cpk:sr-only",
+										children: statusLabels[latestStatus]
+									})
+								]
+							}, latest.toolCall.id), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "cpk:ml-2 cpk:inline-flex cpk:shrink-0 cpk:items-center cpk:gap-2 cpk:text-xs cpk:text-muted-foreground",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FailedCount, { calls }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "cpk:tabular-nums",
+										children: pluralize(calls.length, "call")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, {
+										open: false,
+										className: "cpk:rotate-90"
+									})
+								]
+							})] })
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-live": "polite",
+							className: "cpk:sr-only",
+							children: open ? "" : `${latest.toolCall.function.name}: ${statusLabels[latestStatus]}`
+						})
+					]
 				}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					id: bodyId,
-					className: "cpk:[&>*]:animate-[cpk-stack-fan_300ms_cubic-bezier(0.16,1,0.3,1)_both] cpk:motion-reduce:[&>*]:animate-none",
-					children: calls.map((call) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: renderCall(call) }, call.toolCall.id))
+					className: "cpk:grid cpk:gap-1.5",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallGroupContext.Provider, {
+						value: {
+							appearance: "stack",
+							failedIds,
+							active: isActive
+						},
+						children: calls.map((call, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: (0, tailwind_merge.twMerge)(layer, "cpk:overflow-hidden cpk:shadow-[0_1px_2px_rgb(0_0_0/0.04)] cpk:animate-[cpk-stack-fan_240ms_cubic-bezier(0.16,1,0.3,1)_both] cpk:motion-reduce:animate-none"),
+							style: { animationDelay: `${index * 30}ms` },
+							children: renderCall(call)
+						}, call.toolCall.id))
+					})
 				})]
 			});
 		}
-		if (calls.length === 1) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			...groupProps,
-			className: (0, tailwind_merge.twMerge)("cpk:py-1", className),
-			children: renderCall(latest)
-		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			...groupProps,
 			className: (0, tailwind_merge.twMerge)("cpk:my-3 cpk:overflow-hidden cpk:rounded-xl cpk:border cpk:border-border cpk:bg-card cpk:text-card-foreground", className),
@@ -9272,7 +9297,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 						className: "cpk:ml-auto cpk:flex cpk:shrink-0 cpk:items-center cpk:gap-2 cpk:pl-2 cpk:text-xs cpk:text-muted-foreground",
 						children: [status === "failed" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FailedCount, { calls }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "cpk:tabular-nums",
-							children: status === "running" ? `${done} done` : statusLabels[status]
+							children: status !== "running" ? statusLabels[status] : done > 0 && `${done} done`
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, { open })]
 					})
 				]
@@ -12503,7 +12528,13 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 
 //#endregion
 //#region src/v2/components/chat/Lightbox.tsx
+/**
+	* A full-screen preview portalled to `document.body`. It closes on Escape, a
+	* click on the backdrop, or its close button, which is named by
+	* `labels.attachmentPreviewCloseButtonLabel`.
+	*/
 	function Lightbox({ onClose, children }) {
+		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
 		(0, react.useEffect)(() => {
 			const handleKey = (e) => {
 				if (e.key === "Escape") onClose();
@@ -12518,7 +12549,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				onClick: onClose,
 				className: "cpk:absolute cpk:top-4 cpk:right-4 cpk:text-white cpk:bg-white/10 cpk:hover:bg-white/20 cpk:rounded-full cpk:w-10 cpk:h-10 cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer cpk:border-none cpk:z-10",
-				"aria-label": "Close preview",
+				"aria-label": labels.attachmentPreviewCloseButtonLabel,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "cpk:w-5 cpk:h-5" })
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				onClick: (e) => e.stopPropagation(),
@@ -12871,7 +12902,14 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		if (secs === 0) return `${mins} minute${mins > 1 ? "s" : ""}`;
 		return `${mins}m ${secs}s`;
 	}
+	/**
+	* A reasoning message as a collapsible block. While the model reasons it is
+	* open and the header shows `labels.reasoningMessageThinkingLabel`; when
+	* streaming ends it collapses and the header reads "Thought for …". The
+	* `header` slot also receives `elapsedSeconds`.
+	*/
 	function CopilotChatReasoningMessage({ message, messages, isRunning, isLatest: isLatestProp, header, contentView, toggle, children, className, ...props }) {
+		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
 		const isLatest = isLatestProp ?? messages?.[messages.length - 1]?.id === message.id;
 		const isStreaming = !!(isRunning && isLatest);
 		const hasContent = !!(message.content && message.content.length > 0);
@@ -12901,12 +12939,13 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			userToggledRef.current = true;
 			setIsOpen((prev) => !prev);
 		} : void 0;
-		const label = isStreaming ? "Thinking…" : `Thought for ${formatDuration$1(elapsed)}`;
+		const label = isStreaming ? labels.reasoningMessageThinkingLabel : `Thought for ${formatDuration$1(elapsed)}`;
 		const boundHeader = renderSlot(header, CopilotChatReasoningMessage.Header, {
 			isOpen,
 			label,
 			hasContent,
 			isStreaming,
+			elapsedSeconds: elapsed,
 			onClick: handleToggle
 		});
 		const boundContent = renderSlot(contentView, CopilotChatReasoningMessage.Content, {
@@ -12938,7 +12977,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		});
 	}
 	(function(_CopilotChatReasoningMessage) {
-		_CopilotChatReasoningMessage.Header = ({ isOpen, label = "Thoughts", hasContent, isStreaming, className, children: headerChildren, ...headerProps }) => {
+		_CopilotChatReasoningMessage.Header = ({ isOpen, label = "Thoughts", hasContent, isStreaming, elapsedSeconds: _elapsedSeconds, className, children: headerChildren, ...headerProps }) => {
 			const isExpandable = !!hasContent;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 				type: "button",
@@ -14214,7 +14253,12 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 
 //#endregion
 //#region src/v2/components/chat/CopilotChatAttachmentQueue.tsx
+/**
+	* The attachments queued in the composer, each with a preview and a remove
+	* button named by `labels.attachmentRemoveButtonLabel`.
+	*/
 	const CopilotChatAttachmentQueue = ({ attachments, onRemoveAttachment, className }) => {
+		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
 		if (attachments.length === 0) return null;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			"data-testid": "copilot-attachment-queue",
@@ -14229,7 +14273,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							onClick: () => onRemoveAttachment(attachment.id),
 							className: cn("cpk:absolute cpk:bg-black/60 cpk:text-white cpk:border-none cpk:rounded-full cpk:w-5 cpk:h-5 cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer cpk:text-[10px] cpk:z-20", isMedia ? "cpk:top-1 cpk:right-1" : "cpk:top-1.5 cpk:right-1.5"),
-							"aria-label": "Remove attachment",
+							"aria-label": labels.attachmentRemoveButtonLabel,
 							children: "✕"
 						})
 					]
@@ -14285,7 +14329,13 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			})]
 		});
 	}
+	/**
+	* A video thumbnail with a play button, named by
+	* `labels.attachmentPlayVideoButtonLabel`, that opens the full player in a
+	* lightbox.
+	*/
 	function VideoPreview({ attachment }) {
+		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
 		const src = (0, _copilotkit_shared.getSourceUrl)(attachment.source);
 		const { thumbnailRef, vtName, open, openLightbox, closeLightbox } = useLightbox();
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
@@ -14306,7 +14356,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				onClick: openLightbox,
 				className: "cpk:absolute cpk:inset-0 cpk:flex cpk:items-center cpk:justify-center cpk:z-10 cpk:cursor-pointer cpk:bg-black/20 cpk:border-none cpk:p-0",
-				"aria-label": "Play video",
+				"aria-label": labels.attachmentPlayVideoButtonLabel,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "cpk:w-8 cpk:h-8 cpk:rounded-full cpk:bg-black/60 cpk:flex cpk:items-center cpk:justify-center",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Play, { className: "cpk:w-4 cpk:h-4 cpk:text-white cpk:ml-0.5" })
@@ -15393,6 +15443,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		const pendingRunActivityReconnectRef = (0, react.useRef)(false);
 		const runActivityReconnectGenerationRef = (0, react.useRef)(0);
 		const activeLocalRunIdsRef = (0, react.useRef)(/* @__PURE__ */ new Set());
+		const observedLocalRunIdsRef = (0, react.useRef)(/* @__PURE__ */ new Set());
 		const recentlyLocalRunIdsRef = (0, react.useRef)(/* @__PURE__ */ new Map());
 		const activeWakeRunIdsRef = (0, react.useRef)(/* @__PURE__ */ new Set());
 		const recentlyWakeRunIdsRef = (0, react.useRef)(/* @__PURE__ */ new Map());
@@ -15424,7 +15475,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		}, []);
 		const isLocalActiveRunActivity = (0, react.useCallback)((notification) => {
 			if (notification.agentId && notification.agentId !== resolvedAgentId) return false;
-			if (!notification.runId || !activeLocalRunIdsRef.current.has(notification.runId) && !recentlyLocalRunIdsRef.current.has(notification.runId)) return false;
+			if (!notification.runId || !activeLocalRunIdsRef.current.has(notification.runId) && !observedLocalRunIdsRef.current.has(notification.runId) && !recentlyLocalRunIdsRef.current.has(notification.runId)) return false;
 			const eventType = notification.eventType.toUpperCase();
 			return eventType === "RUN_STARTED" || eventType === "RUN_FINISHED" || eventType === "RUN_ERROR";
 		}, [resolvedAgentId]);
@@ -15623,6 +15674,16 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				pendingWakeRunIdRef.current = notification.runId;
 				startRunActivityReconnectRef.current?.(generation);
 			});
+			const observedLocalRunIds = observedLocalRunIdsRef.current;
+			const localRunSubscription = agent.subscribe({
+				onRunInitialized: ({ input }) => {
+					observedLocalRunIds.add(input.runId);
+				},
+				onRunFinalized: ({ input }) => {
+					observedLocalRunIds.delete(input.runId);
+					rememberRecentlyLocalRunId(input.runId);
+				}
+			});
 			return () => {
 				detached = true;
 				pendingRunActivityReconnectRef.current = false;
@@ -15635,6 +15696,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				if (wakeReconnectActive) agent.detachActiveRun().catch(() => {});
 				activeWakeRunIdsRef.current.clear();
 				subscription.unsubscribe();
+				localRunSubscription.unsubscribe();
 				if (ownsStandaloneStore) {
 					threadStore.setContext(null);
 					threadStore.stop();
@@ -15653,6 +15715,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			copilotkit.threadEndpoints?.realtimeMetadata,
 			standaloneRunActivityStore,
 			isLocalActiveRunActivity,
+			rememberRecentlyLocalRunId,
 			rememberRecentlyWakeRunId
 		]);
 		const waitForActiveRunToSettle = (0, react.useCallback)(async () => {
@@ -16174,28 +16237,34 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			...props,
 			children
 		});
-		_CopilotModalHeader.CloseButton = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			type: "button",
-			"data-testid": "copilot-close-button",
-			className: cn("cpk:inline-flex cpk:size-8 cpk:items-center cpk:justify-center cpk:rounded-full cpk:text-muted-foreground cpk:transition cpk:cursor-pointer", "cpk:hover:bg-muted cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring", className),
-			"aria-label": "Close",
-			...props,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
-				className: "cpk:h-4 cpk:w-4",
-				"aria-hidden": "true"
-			})
-		});
-		_CopilotModalHeader.DrawerLauncher = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			type: "button",
-			"data-testid": "copilot-threads-drawer-launcher",
-			className: cn("cpk:inline-flex cpk:size-8 cpk:items-center cpk:justify-center cpk:rounded-full cpk:text-muted-foreground cpk:transition cpk:cursor-pointer", "cpk:hover:bg-muted cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring", className),
-			"aria-label": "Open threads",
-			...props,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PanelLeftOpen, {
-				className: "cpk:h-4 cpk:w-4",
-				"aria-hidden": "true"
-			})
-		});
+		_CopilotModalHeader.CloseButton = ({ className, ...props }) => {
+			const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"data-testid": "copilot-close-button",
+				className: cn("cpk:inline-flex cpk:size-8 cpk:items-center cpk:justify-center cpk:rounded-full cpk:text-muted-foreground cpk:transition cpk:cursor-pointer", "cpk:hover:bg-muted cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring", className),
+				"aria-label": labels.modalHeaderCloseButtonLabel,
+				...props,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+					className: "cpk:h-4 cpk:w-4",
+					"aria-hidden": "true"
+				})
+			});
+		};
+		_CopilotModalHeader.DrawerLauncher = ({ className, ...props }) => {
+			const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"data-testid": "copilot-threads-drawer-launcher",
+				className: cn("cpk:inline-flex cpk:size-8 cpk:items-center cpk:justify-center cpk:rounded-full cpk:text-muted-foreground cpk:transition cpk:cursor-pointer", "cpk:hover:bg-muted cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring", className),
+				"aria-label": labels.modalHeaderThreadsButtonLabel,
+				...props,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PanelLeftOpen, {
+					className: "cpk:h-4 cpk:w-4",
+					"aria-hidden": "true"
+				})
+			});
+		};
 	})(CopilotModalHeader || (CopilotModalHeader = {}));
 	CopilotModalHeader.Title.displayName = "CopilotModalHeader.Title";
 	CopilotModalHeader.CloseButton.displayName = "CopilotModalHeader.CloseButton";
@@ -16205,6 +16274,10 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 //#region src/v2/components/chat/CopilotSidebarView.tsx
 	const DEFAULT_SIDEBAR_WIDTH = 480;
 	const SIDEBAR_TRANSITION_MS = 260;
+	/**
+	* The chat in a side panel: a `complementary` region named by
+	* `labels.sidebarLabel`, with a header, the chat view and a toggle button.
+	*/
 	function CopilotSidebarView({ header, toggleButton, width, defaultOpen = true, position = "right", ...props }) {
 		const { open, onOpenChange } = useModalOpenControl();
 		const hasOpenControl = open !== void 0 || onOpenChange !== void 0;
@@ -16225,7 +16298,8 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		});
 	}
 	function CopilotSidebarViewInternal({ header, toggleButton, width, position = "right", ...props }) {
-		const isSidebarOpen = useCopilotChatConfiguration()?.isModalOpen ?? false;
+		const configuration = useCopilotChatConfiguration();
+		const isSidebarOpen = configuration?.isModalOpen ?? false;
 		const sidebarRef = (0, react.useRef)(null);
 		const [sidebarWidth, setSidebarWidth] = (0, react.useState)(width ?? DEFAULT_SIDEBAR_WIDTH);
 		const widthToCss = (w) => {
@@ -16290,7 +16364,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				paddingBottom: "env(safe-area-inset-bottom)"
 			},
 			"aria-hidden": !isSidebarOpen,
-			"aria-label": "Copilot chat sidebar",
+			"aria-label": configuration?.labels.sidebarLabel ?? CopilotChatDefaultLabels.sidebarLabel,
 			role: "complementary",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden",