@copilotkitnext/react 1.53.1-next.1 → 1.54.0-next.3

package/dist/index.umd.js

@@ -1,10 +1,10 @@
 "use client";
 
 (function(global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('@ag-ui/client'), require('react'), require('tailwind-merge'), require('lucide-react'), require('@copilotkitnext/shared'), require('react/jsx-runtime'), require('@radix-ui/react-slot'), require('class-variance-authority'), require('clsx'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-dropdown-menu'), require('katex/dist/katex.min.css'), require('streamdown'), require('@copilotkitnext/core'), require('zod'), require('@lit-labs/react'), require('use-stick-to-bottom'), require('ts-deepmerge')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@ag-ui/client', 'react', 'tailwind-merge', 'lucide-react', '@copilotkitnext/shared', 'react/jsx-runtime', '@radix-ui/react-slot', 'class-variance-authority', 'clsx', '@radix-ui/react-tooltip', '@radix-ui/react-dropdown-menu', 'katex/dist/katex.min.css', 'streamdown', '@copilotkitnext/core', 'zod', '@lit-labs/react', 'use-stick-to-bottom', 'ts-deepmerge'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitNextReact = {}), global.AgUIClient,global.React,global.tailwindMerge,global.lucideReact,global.CopilotKitNextShared,global.ReactJsxRuntime,global.RadixReactSlot,global.classVarianceAuthority,global.clsx,global.RadixReactTooltip,global.RadixReactDropdownMenu,global.katexCss,global.streamdown,global.CopilotKitNextCore,global.Zod,global.LitLabsReact,global.useStickToBottom,global.tsDeepmerge));
-})(this, function(exports, _ag_ui_client, react, tailwind_merge, lucide_react, _copilotkitnext_shared, react_jsx_runtime, _radix_ui_react_slot, class_variance_authority, clsx, _radix_ui_react_tooltip, _radix_ui_react_dropdown_menu, katex_dist_katex_min_css, streamdown, _copilotkitnext_core, zod, _lit_labs_react, use_stick_to_bottom, ts_deepmerge) {
+  typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('@ag-ui/client'), require('react'), require('tailwind-merge'), require('lucide-react'), require('@copilotkitnext/shared'), require('react/jsx-runtime'), require('@radix-ui/react-slot'), require('class-variance-authority'), require('clsx'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-dropdown-menu'), require('streamdown'), require('@copilotkitnext/core'), require('zod'), require('@lit-labs/react'), require('@copilotkit/a2ui-renderer'), require('use-stick-to-bottom'), require('ts-deepmerge')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@ag-ui/client', 'react', 'tailwind-merge', 'lucide-react', '@copilotkitnext/shared', 'react/jsx-runtime', '@radix-ui/react-slot', 'class-variance-authority', 'clsx', '@radix-ui/react-tooltip', '@radix-ui/react-dropdown-menu', 'streamdown', '@copilotkitnext/core', 'zod', '@lit-labs/react', '@copilotkit/a2ui-renderer', 'use-stick-to-bottom', 'ts-deepmerge'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitNextReact = {}), global.AgUIClient,global.React,global.tailwindMerge,global.lucideReact,global.CopilotKitNextShared,global.ReactJsxRuntime,global.RadixReactSlot,global.classVarianceAuthority,global.clsx,global.RadixReactTooltip,global.RadixReactDropdownMenu,global.streamdown,global.CopilotKitNextCore,global.Zod,global.LitLabsReact,global.CopilotKitA2UIRenderer,global.useStickToBottom,global.tsDeepmerge));
+})(this, function(exports, _ag_ui_client, react, tailwind_merge, lucide_react, _copilotkitnext_shared, react_jsx_runtime, _radix_ui_react_slot, class_variance_authority, clsx, _radix_ui_react_tooltip, _radix_ui_react_dropdown_menu, streamdown, _copilotkitnext_core, zod, _lit_labs_react, _copilotkit_a2ui_renderer, use_stick_to_bottom, ts_deepmerge) {
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 //#region \0rolldown/runtime.js
 	var __create = Object.create;
@@ -1239,6 +1239,23 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 	CopilotChatInput.Disclaimer.displayName = "CopilotChatInput.Disclaimer";
 	var CopilotChatInput_default = CopilotChatInput;
 
+//#endregion
+//#region src/hooks/useKatexStyles.ts
+	let injected = false;
+	/**
+	* Dynamically injects KaTeX CSS at runtime to avoid the Next.js
+	* "Global CSS cannot be imported from within node_modules" build error.
+	*
+	* Uses a singleton flag so the stylesheet is only injected once.
+	*/
+	function useKatexStyles() {
+		(0, react.useEffect)(() => {
+			if (injected || typeof document === "undefined") return;
+			injected = true;
+			import("katex/dist/katex.min.css").catch(() => {});
+		}, []);
+	}
+
 //#endregion
 //#region src/components/CopilotKitInspector.tsx
 	const CopilotKitInspector = ({ core, ...rest }) => {
@@ -1794,6 +1811,131 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		});
 	};
 
+//#endregion
+//#region src/a2ui/A2UIMessageRenderer.tsx
+	let initialized = false;
+	function ensureInitialized() {
+		if (!initialized) {
+			(0, _copilotkit_a2ui_renderer.initializeDefaultCatalog)();
+			(0, _copilotkit_a2ui_renderer.injectStyles)();
+			initialized = true;
+		}
+	}
+	function createA2UIMessageRenderer(options) {
+		const { theme } = options;
+		return {
+			activityType: "a2ui-surface",
+			content: zod.z.any(),
+			render: ({ content, agent }) => {
+				ensureInitialized();
+				const [operations, setOperations] = (0, react.useState)([]);
+				const lastSignatureRef = (0, react.useRef)(null);
+				const { copilotkit } = useCopilotKit();
+				(0, react.useEffect)(() => {
+					if (!content || !Array.isArray(content.operations)) {
+						lastSignatureRef.current = null;
+						setOperations([]);
+						return;
+					}
+					const incoming = content.operations;
+					const signature = stringifyOperations(incoming);
+					if (signature && signature === lastSignatureRef.current) return;
+					lastSignatureRef.current = signature;
+					setOperations(incoming);
+				}, [content]);
+				const groupedOperations = (0, react.useMemo)(() => {
+					const groups = /* @__PURE__ */ new Map();
+					for (const operation of operations) {
+						var _getOperationSurfaceI;
+						const surfaceId = (_getOperationSurfaceI = getOperationSurfaceId(operation)) !== null && _getOperationSurfaceI !== void 0 ? _getOperationSurfaceI : _copilotkit_a2ui_renderer.DEFAULT_SURFACE_ID;
+						if (!groups.has(surfaceId)) groups.set(surfaceId, []);
+						groups.get(surfaceId).push(operation);
+					}
+					return groups;
+				}, [operations]);
+				if (!groupedOperations.size) return null;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "cpk:flex cpk:min-h-0 cpk:flex-1 cpk:flex-col cpk:gap-6 cpk:overflow-auto cpk:py-6",
+					children: Array.from(groupedOperations.entries()).map(([surfaceId, ops]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReactSurfaceHost, {
+						surfaceId,
+						operations: ops,
+						theme,
+						agent,
+						copilotkit
+					}, surfaceId))
+				});
+			}
+		};
+	}
+	/**
+	* Renders a single A2UI surface using the React renderer.
+	* Wraps A2UIProvider + A2UIRenderer and bridges actions back to CopilotKit.
+	*/
+	function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "cpk:flex cpk:w-full cpk:flex-none cpk:overflow-hidden cpk:rounded-lg cpk:bg-white/5 cpk:p-4",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_copilotkit_a2ui_renderer.A2UIProvider, {
+				onAction: (0, react.useCallback)(async (message) => {
+					if (!agent) return;
+					try {
+						var _copilotkit$propertie;
+						console.info("[A2UI] Action dispatched", message.userAction);
+						copilotkit.setProperties({
+							...(_copilotkit$propertie = copilotkit.properties) !== null && _copilotkit$propertie !== void 0 ? _copilotkit$propertie : {},
+							a2uiAction: message
+						});
+						await copilotkit.runAgent({ agent });
+					} finally {
+						if (copilotkit.properties) {
+							const { a2uiAction, ...rest } = copilotkit.properties;
+							copilotkit.setProperties(rest);
+						}
+					}
+				}, [agent, copilotkit]),
+				theme,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SurfaceMessageProcessor, {
+					surfaceId,
+					operations
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_copilotkit_a2ui_renderer.A2UIRenderer, {
+					surfaceId,
+					className: "cpk:flex cpk:flex-1"
+				})]
+			})
+		});
+	}
+	/**
+	* Processes A2UI operations into the provider's message processor.
+	* Must be a child of A2UIProvider to access the actions context.
+	*/
+	function SurfaceMessageProcessor({ surfaceId, operations }) {
+		const { processMessages } = (0, _copilotkit_a2ui_renderer.useA2UIActions)();
+		const lastProcessedRef = (0, react.useRef)("");
+		(0, react.useEffect)(() => {
+			const key = `${surfaceId}-${JSON.stringify(operations)}`;
+			if (key === lastProcessedRef.current) return;
+			lastProcessedRef.current = key;
+			processMessages(operations);
+		}, [
+			processMessages,
+			surfaceId,
+			operations
+		]);
+		return null;
+	}
+	function getOperationSurfaceId(operation) {
+		var _ref, _ref2, _ref3, _operation$beginRende, _operation$beginRende2, _operation$surfaceUpd, _operation$dataModelU, _operation$deleteSurf;
+		if (!operation || typeof operation !== "object") return null;
+		if (typeof operation.surfaceId === "string") return operation.surfaceId;
+		return (_ref = (_ref2 = (_ref3 = (_operation$beginRende = operation === null || operation === void 0 || (_operation$beginRende2 = operation.beginRendering) === null || _operation$beginRende2 === void 0 ? void 0 : _operation$beginRende2.surfaceId) !== null && _operation$beginRende !== void 0 ? _operation$beginRende : operation === null || operation === void 0 || (_operation$surfaceUpd = operation.surfaceUpdate) === null || _operation$surfaceUpd === void 0 ? void 0 : _operation$surfaceUpd.surfaceId) !== null && _ref3 !== void 0 ? _ref3 : operation === null || operation === void 0 || (_operation$dataModelU = operation.dataModelUpdate) === null || _operation$dataModelU === void 0 ? void 0 : _operation$dataModelU.surfaceId) !== null && _ref2 !== void 0 ? _ref2 : operation === null || operation === void 0 || (_operation$deleteSurf = operation.deleteSurface) === null || _operation$deleteSurf === void 0 ? void 0 : _operation$deleteSurf.surfaceId) !== null && _ref !== void 0 ? _ref : null;
+	}
+	function stringifyOperations(ops) {
+		try {
+			return JSON.stringify(ops);
+		} catch (error) {
+			return null;
+		}
+	}
+
 //#endregion
 //#region src/lib/react-core.ts
 	var CopilotKitCoreReact = class extends _copilotkitnext_core.CopilotKitCore {
@@ -1869,8 +2011,9 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		}, [value, warningMessage]);
 		return value;
 	}
-	const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, publicApiKey, publicLicenseKey, properties = {}, agents__unsafe_dev_only: agents = {}, selfManagedAgents = {}, renderToolCalls, renderActivityMessages, renderCustomMessages, frontendTools, humanInTheLoop, showDevConsole = false, useSingleEndpoint = false, onError }) => {
+	const CopilotKitProvider = ({ children, runtimeUrl, headers = {}, credentials, publicApiKey, publicLicenseKey, properties = {}, agents__unsafe_dev_only: agents = {}, selfManagedAgents = {}, renderToolCalls, renderActivityMessages, renderCustomMessages, frontendTools, humanInTheLoop, showDevConsole = false, useSingleEndpoint = false, onError, a2ui }) => {
 		const [shouldRenderInspector, setShouldRenderInspector] = (0, react.useState)(false);
+		const [runtimeA2UIEnabled, setRuntimeA2UIEnabled] = (0, react.useState)(false);
 		(0, react.useEffect)(() => {
 			if (typeof window === "undefined") return;
 			if (showDevConsole === true) setShouldRenderInspector(true);
@@ -1892,11 +2035,18 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		});
 		const renderCustomMessagesList = useStableArrayProp(renderCustomMessages, "renderCustomMessages must be a stable array.");
 		const renderActivityMessagesList = useStableArrayProp(renderActivityMessages, "renderActivityMessages must be a stable array.");
-		const builtInActivityRenderers = (0, react.useMemo)(() => [{
-			activityType: MCPAppsActivityType,
-			content: MCPAppsActivityContentSchema,
-			render: MCPAppsActivityRenderer
-		}], []);
+		const builtInActivityRenderers = (0, react.useMemo)(() => {
+			const renderers = [{
+				activityType: MCPAppsActivityType,
+				content: MCPAppsActivityContentSchema,
+				render: MCPAppsActivityRenderer
+			}];
+			if (runtimeA2UIEnabled) {
+				var _a2ui$theme;
+				renderers.unshift(createA2UIMessageRenderer({ theme: (_a2ui$theme = a2ui === null || a2ui === void 0 ? void 0 : a2ui.theme) !== null && _a2ui$theme !== void 0 ? _a2ui$theme : _copilotkit_a2ui_renderer.viewerTheme }));
+			}
+			return renderers;
+		}, [runtimeA2UIEnabled, a2ui]);
 		const allActivityRenderers = (0, react.useMemo)(() => {
 			return [...renderActivityMessagesList, ...builtInActivityRenderers];
 		}, [renderActivityMessagesList, builtInActivityRenderers]);
@@ -1991,6 +2141,14 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			renderCustomMessages: renderCustomMessagesList
 		});
 		const copilotkit = copilotkitRef.current;
+		(0, react.useEffect)(() => {
+			const subscription = copilotkit.subscribe({ onRuntimeConnectionStatusChanged: () => {
+				setRuntimeA2UIEnabled(copilotkit.a2uiEnabled);
+			} });
+			return () => {
+				subscription.unsubscribe();
+			};
+		}, [copilotkit]);
 		const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
 		(0, react.useEffect)(() => {
 			const subscription = copilotkit.subscribe({ onRenderToolCallsChanged: () => {
@@ -2311,16 +2469,16 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	*
 	* This hook is a convenience wrapper around `useFrontendTool` that:
 	* - builds a model-facing tool description,
-	* - forwards optional Zod parameters,
+	* - forwards optional schema parameters (any Standard Schema V1 compatible library),
 	* - renders your component with tool call parameters.
 	*
 	* Use this when you want to display a typed visual component for a tool call
 	* without manually wiring a full frontend tool object.
 	*
-	* When `parameters` is provided, render props are inferred from the schema
-	* via `z.infer`. When omitted, the render component may accept any props.
+	* When `parameters` is provided, render props are inferred from the schema.
+	* When omitted, the render component may accept any props.
 	*
-	* @typeParam TSchema - Zod schema describing tool parameters, or `undefined` when no schema is given.
+	* @typeParam TSchema - Schema describing tool parameters, or `undefined` when no schema is given.
 	* @param config - Tool registration config.
 	* @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
 	*
@@ -2394,7 +2552,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	* - keeps renderer entries on cleanup so historical chat tool calls can still render,
 	* - refreshes registration when `deps` change.
 	*
-	* @typeParam S - Zod schema type describing tool call parameters.
+	* @typeParam S - Schema type describing tool call parameters.
 	* @param config - Renderer config for wildcard or named tools.
 	* @param deps - Optional dependencies to refresh registration.
 	*
@@ -3220,6 +3378,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 //#region src/components/chat/CopilotChatAssistantMessage.tsx
 	function CopilotChatAssistantMessage({ message, messages, isRunning, onThumbsUp, onThumbsDown, onReadAloud, onRegenerate, additionalToolbarItems, toolbarVisible = true, markdownRenderer, toolbar, copyButton, thumbsUpButton, thumbsDownButton, readAloudButton, regenerateButton, toolCallsView, children, className, ...props }) {
 		var _messages;
+		useKatexStyles();
 		const boundMarkdownRenderer = renderSlot(markdownRenderer, CopilotChatAssistantMessage.MarkdownRenderer, { content: message.content || "" });
 		const boundCopyButton = renderSlot(copyButton, CopilotChatAssistantMessage.CopyButton, { onClick: async () => {
 			if (message.content) try {
@@ -5261,6 +5420,7 @@ exports.MCPAppsActivityRenderer = MCPAppsActivityRenderer;
 exports.MCPAppsActivityType = MCPAppsActivityType;
 exports.UseAgentUpdate = UseAgentUpdate;
 exports.WildcardToolCallRender = WildcardToolCallRender;
+exports.createA2UIMessageRenderer = createA2UIMessageRenderer;
 exports.defineToolCallRenderer = defineToolCallRenderer;
 exports.useAgent = useAgent;
 exports.useAgentContext = useAgentContext;