@copilotkit/react-core 1.57.1 → 1.57.2

package/dist/v2/index.umd.js

@@ -1463,6 +1463,301 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 	});
 	const useLicenseContext = () => (0, react.useContext)(LicenseContext);
 
+//#endregion
+//#region src/v2/types/defineToolCallRenderer.ts
+	function defineToolCallRenderer(def) {
+		const argsSchema = def.name === "*" && !def.args ? zod.z.any() : def.args;
+		return {
+			name: def.name,
+			args: argsSchema,
+			render: def.render,
+			...def.agentId ? { agentId: def.agentId } : {}
+		};
+	}
+
+//#endregion
+//#region src/v2/hooks/use-render-tool.tsx
+	const EMPTY_DEPS$1 = [];
+	/**
+	* Registers a renderer entry in CopilotKit's `renderToolCalls` registry.
+	*
+	* Key behavior:
+	* - deduplicates by `agentId:name` (latest registration wins),
+	* - keeps renderer entries on cleanup so historical chat tool calls can still render,
+	* - refreshes registration when `deps` change.
+	*
+	* @typeParam S - Schema type describing tool call parameters.
+	* @param config - Renderer config for wildcard or named tools.
+	* @param deps - Optional dependencies to refresh registration.
+	*
+	* @example
+	* ```tsx
+	* useRenderTool(
+	*   {
+	*     name: "searchDocs",
+	*     parameters: z.object({ query: z.string() }),
+	*     render: ({ status, parameters, result }) => {
+	*       if (status === "executing") return <div>Searching {parameters.query}</div>;
+	*       if (status === "complete") return <div>{result}</div>;
+	*       return <div>Preparing...</div>;
+	*     },
+	*   },
+	*   [],
+	* );
+	* ```
+	*
+	* @example
+	* ```tsx
+	* useRenderTool(
+	*   {
+	*     name: "summarize",
+	*     parameters: z.object({ text: z.string() }),
+	*     agentId: "research-agent",
+	*     render: ({ name, status }) => <div>{name}: {status}</div>,
+	*   },
+	*   [selectedAgentId],
+	* );
+	* ```
+	*/
+	function useRenderTool(config, deps) {
+		const { copilotkit } = useCopilotKit();
+		const extraDeps = deps !== null && deps !== void 0 ? deps : EMPTY_DEPS$1;
+		(0, react.useEffect)(() => {
+			const renderer = config.name === "*" && !config.parameters ? defineToolCallRenderer({
+				name: "*",
+				render: (props) => config.render({
+					...props,
+					parameters: props.args
+				}),
+				...config.agentId ? { agentId: config.agentId } : {}
+			}) : defineToolCallRenderer({
+				name: config.name,
+				args: config.parameters,
+				render: (props) => config.render({
+					...props,
+					parameters: props.args
+				}),
+				...config.agentId ? { agentId: config.agentId } : {}
+			});
+			copilotkit.addHookRenderToolCall(renderer);
+		}, [
+			config.name,
+			copilotkit,
+			JSON.stringify(extraDeps)
+		]);
+	}
+
+//#endregion
+//#region src/v2/hooks/use-default-render-tool.tsx
+/**
+	* Registers a wildcard (`"*"`) tool-call renderer via `useRenderTool`.
+	*
+	* - Call with no config to use CopilotKit's built-in default tool-call card.
+	* - Pass `config.render` to replace the default UI with your own fallback renderer.
+	*
+	* This is useful when you want a generic renderer for tools that do not have a
+	* dedicated `useRenderTool({ name: "..." })` registration.
+	*
+	* @param config - Optional custom wildcard render function.
+	* @param deps - Optional dependencies to refresh registration.
+	*
+	* @example
+	* ```tsx
+	* useDefaultRenderTool();
+	* ```
+	*
+	* @example
+	* ```tsx
+	* useDefaultRenderTool({
+	*   render: ({ name, status }) => <div>{name}: {status}</div>,
+	* });
+	* ```
+	*
+	* @example
+	* ```tsx
+	* useDefaultRenderTool(
+	*   {
+	*     render: ({ name, result }) => (
+	*       <ToolEventRow title={name} payload={result} compact={compactMode} />
+	*     ),
+	*   },
+	*   [compactMode],
+	* );
+	* ```
+	*/
+	function useDefaultRenderTool(config, deps) {
+		var _config$render;
+		useRenderTool({
+			name: "*",
+			render: (_config$render = config === null || config === void 0 ? void 0 : config.render) !== null && _config$render !== void 0 ? _config$render : DefaultToolCallRenderer
+		}, deps);
+	}
+	function DefaultToolCallRenderer({ name, parameters, status, result }) {
+		const [isExpanded, setIsExpanded] = (0, react.useState)(false);
+		const statusString = String(status);
+		const isActive = statusString === "inProgress" || statusString === "executing";
+		const isComplete = statusString === "complete";
+		const statusLabel = isActive ? "Running" : isComplete ? "Done" : status;
+		const dotColor = isActive ? "#f59e0b" : isComplete ? "#10b981" : "#a1a1aa";
+		const badgeBg = isActive ? "#fef3c7" : isComplete ? "#d1fae5" : "#f4f4f5";
+		const badgeColor = isActive ? "#92400e" : isComplete ? "#065f46" : "#3f3f46";
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-testid": "copilot-tool-render",
+			"data-tool-name": name,
+			"data-status": statusString,
+			"data-args": safeStringifyForAttr(parameters),
+			"data-result": safeStringifyForAttr(result),
+			style: {
+				marginTop: "8px",
+				paddingBottom: "8px"
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					borderRadius: "12px",
+					border: "1px solid #e4e4e7",
+					backgroundColor: "#fafafa",
+					padding: "14px 16px"
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					onClick: () => setIsExpanded(!isExpanded),
+					style: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "space-between",
+						gap: "10px",
+						cursor: "pointer",
+						userSelect: "none"
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: "8px",
+							minWidth: 0
+						},
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+								style: {
+									height: "14px",
+									width: "14px",
+									color: "#71717a",
+									transition: "transform 0.15s",
+									transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
+									flexShrink: 0
+								},
+								fill: "none",
+								viewBox: "0 0 24 24",
+								strokeWidth: 2,
+								stroke: "currentColor",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									d: "M8.25 4.5l7.5 7.5-7.5 7.5"
+								})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
+								display: "inline-block",
+								height: "8px",
+								width: "8px",
+								borderRadius: "50%",
+								backgroundColor: dotColor,
+								flexShrink: 0
+							} }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								"data-testid": "copilot-tool-render-name",
+								style: {
+									fontSize: "13px",
+									fontWeight: 600,
+									color: "#18181b",
+									overflow: "hidden",
+									textOverflow: "ellipsis",
+									whiteSpace: "nowrap"
+								},
+								children: name
+							})
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"data-testid": "copilot-tool-render-status",
+						style: {
+							display: "inline-flex",
+							alignItems: "center",
+							borderRadius: "9999px",
+							padding: "2px 8px",
+							fontSize: "11px",
+							fontWeight: 500,
+							backgroundColor: badgeBg,
+							color: badgeColor,
+							flexShrink: 0
+						},
+						children: statusLabel
+					})]
+				}), isExpanded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						marginTop: "12px",
+						display: "grid",
+						gap: "12px"
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: {
+							fontSize: "10px",
+							textTransform: "uppercase",
+							letterSpacing: "0.05em",
+							color: "#71717a"
+						},
+						children: "Arguments"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+						style: {
+							marginTop: "6px",
+							maxHeight: "200px",
+							overflow: "auto",
+							borderRadius: "6px",
+							backgroundColor: "#f4f4f5",
+							padding: "10px",
+							fontSize: "11px",
+							lineHeight: 1.6,
+							color: "#27272a",
+							whiteSpace: "pre-wrap",
+							wordBreak: "break-word"
+						},
+						children: JSON.stringify(parameters !== null && parameters !== void 0 ? parameters : {}, null, 2)
+					})] }), result !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: {
+							fontSize: "10px",
+							textTransform: "uppercase",
+							letterSpacing: "0.05em",
+							color: "#71717a"
+						},
+						children: "Result"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+						style: {
+							marginTop: "6px",
+							maxHeight: "200px",
+							overflow: "auto",
+							borderRadius: "6px",
+							backgroundColor: "#f4f4f5",
+							padding: "10px",
+							fontSize: "11px",
+							lineHeight: 1.6,
+							color: "#27272a",
+							whiteSpace: "pre-wrap",
+							wordBreak: "break-word"
+						},
+						children: typeof result === "string" ? result : JSON.stringify(result, null, 2)
+					})] })]
+				})]
+			})
+		});
+	}
+	function safeStringifyForAttr(value) {
+		if (value === void 0 || value === null) return "";
+		if (typeof value === "string") return value;
+		try {
+			return JSON.stringify(value);
+		} catch (_unused) {
+			return String(value);
+		}
+	}
+
 //#endregion
 //#region src/v2/hooks/use-render-tool-call.tsx
 /**
@@ -1519,14 +1814,13 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			return copilotkit.subscribe({ onRenderToolCallsChanged: callback }).unsubscribe;
 		}, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
 		return (0, react.useCallback)(({ toolCall, toolMessage }) => {
+			var _renderConfig$render;
 			const exactMatches = renderToolCalls.filter((rc) => rc.name === toolCall.function.name);
 			const renderConfig = exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || renderToolCalls.find((rc) => rc.name === "*");
-			if (!renderConfig) return null;
-			const RenderComponent = renderConfig.render;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallRenderer, {
 				toolCall,
 				toolMessage,
-				RenderComponent,
+				RenderComponent: (_renderConfig$render = renderConfig === null || renderConfig === void 0 ? void 0 : renderConfig.render) !== null && _renderConfig$render !== void 0 ? _renderConfig$render : defaultToolCallRenderAdapter,
 				isExecuting: executingToolCallIds.has(toolCall.id)
 			}, toolCall.id);
 		}, [
@@ -1535,6 +1829,15 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 			agentId
 		]);
 	}
+	function defaultToolCallRenderAdapter(props) {
+		const status = props.status === _copilotkit_core.ToolCallStatus.Complete ? "complete" : props.status === _copilotkit_core.ToolCallStatus.Executing ? "executing" : "inProgress";
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultToolCallRenderer, {
+			name: props.name,
+			parameters: props.args,
+			status,
+			result: props.result
+		});
+	}
 
 //#endregion
 //#region src/v2/components/CopilotKitInspector.tsx
@@ -2791,18 +3094,6 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		return (_ref = (_ref2 = (_ref3 = (_operation$createSurf = operation === null || operation === void 0 || (_operation$createSurf2 = operation.createSurface) === null || _operation$createSurf2 === void 0 ? void 0 : _operation$createSurf2.surfaceId) !== null && _operation$createSurf !== void 0 ? _operation$createSurf : operation === null || operation === void 0 || (_operation$updateComp = operation.updateComponents) === null || _operation$updateComp === void 0 ? void 0 : _operation$updateComp.surfaceId) !== null && _ref3 !== void 0 ? _ref3 : operation === null || operation === void 0 || (_operation$updateData = operation.updateDataModel) === null || _operation$updateData === void 0 ? void 0 : _operation$updateData.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;
 	}
 
-//#endregion
-//#region src/v2/types/defineToolCallRenderer.ts
-	function defineToolCallRenderer(def) {
-		const argsSchema = def.name === "*" && !def.args ? zod.z.any() : def.args;
-		return {
-			name: def.name,
-			args: argsSchema,
-			render: def.render,
-			...def.agentId ? { agentId: def.agentId } : {}
-		};
-	}
-
 //#endregion
 //#region src/v2/a2ui/A2UIToolCallRenderer.tsx
 /**
@@ -3640,374 +3931,112 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			agentId,
 			copilotkit,
 			findRenderer
-		]);
-		return (0, react.useMemo)(() => ({
-			renderActivityMessage,
-			findRenderer
-		}), [renderActivityMessage, findRenderer]);
-	}
-
-//#endregion
-//#region src/v2/hooks/use-frontend-tool.tsx
-	const EMPTY_DEPS$1 = [];
-	function useFrontendTool(tool, deps) {
-		const { copilotkit } = useCopilotKit();
-		const extraDeps = deps !== null && deps !== void 0 ? deps : EMPTY_DEPS$1;
-		(0, react.useEffect)(() => {
-			const name = tool.name;
-			if (copilotkit.getTool({
-				toolName: name,
-				agentId: tool.agentId
-			})) {
-				console.warn(`Tool '${name}' already exists for agent '${tool.agentId || "global"}'. Overriding with latest registration.`);
-				copilotkit.removeTool(name, tool.agentId);
-			}
-			copilotkit.addTool(tool);
-			if (tool.render) copilotkit.addHookRenderToolCall({
-				name,
-				args: tool.parameters,
-				agentId: tool.agentId,
-				render: tool.render
-			});
-			return () => {
-				copilotkit.removeTool(name, tool.agentId);
-			};
-		}, [
-			tool.name,
-			tool.available,
-			copilotkit,
-			JSON.stringify(extraDeps)
-		]);
-	}
-
-//#endregion
-//#region src/v2/hooks/use-component.tsx
-/**
-	* Registers a React component as a frontend tool renderer in chat.
-	*
-	* This hook is a convenience wrapper around `useFrontendTool` that:
-	* - builds a model-facing tool description,
-	* - 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.
-	* When omitted, the render component may accept any props.
-	*
-	* @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`).
-	*
-	* @example
-	* ```tsx
-	* // Without parameters — render accepts any props
-	* useComponent({
-	*   name: "showGreeting",
-	*   render: ({ message }: { message: string }) => <div>{message}</div>,
-	* });
-	* ```
-	*
-	* @example
-	* ```tsx
-	* // With parameters — render props inferred from schema
-	* useComponent({
-	*   name: "showWeatherCard",
-	*   parameters: z.object({ city: z.string() }),
-	*   render: ({ city }) => <div>{city}</div>,
-	* });
-	* ```
-	*
-	* @example
-	* ```tsx
-	* useComponent(
-	*   {
-	*     name: "renderProfile",
-	*     parameters: z.object({ userId: z.string() }),
-	*     render: ProfileCard,
-	*     agentId: "support-agent",
-	*   },
-	*   [selectedAgentId],
-	* );
-	* ```
-	*/
-	function useComponent(config, deps) {
-		const prefix = `Use this tool to display the "${config.name}" component in the chat. This tool renders a visual UI component for the user.`;
-		const fullDescription = config.description ? `${prefix}\n\n${config.description}` : prefix;
-		useFrontendTool({
-			name: config.name,
-			description: fullDescription,
-			parameters: config.parameters,
-			render: ({ args }) => {
-				const Component = config.render;
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { ...args });
-			},
-			agentId: config.agentId
-		}, deps);
-	}
-
-//#endregion
-//#region src/v2/hooks/use-render-tool.tsx
-	const EMPTY_DEPS = [];
-	/**
-	* Registers a renderer entry in CopilotKit's `renderToolCalls` registry.
-	*
-	* Key behavior:
-	* - deduplicates by `agentId:name` (latest registration wins),
-	* - keeps renderer entries on cleanup so historical chat tool calls can still render,
-	* - refreshes registration when `deps` change.
-	*
-	* @typeParam S - Schema type describing tool call parameters.
-	* @param config - Renderer config for wildcard or named tools.
-	* @param deps - Optional dependencies to refresh registration.
-	*
-	* @example
-	* ```tsx
-	* useRenderTool(
-	*   {
-	*     name: "searchDocs",
-	*     parameters: z.object({ query: z.string() }),
-	*     render: ({ status, parameters, result }) => {
-	*       if (status === "executing") return <div>Searching {parameters.query}</div>;
-	*       if (status === "complete") return <div>{result}</div>;
-	*       return <div>Preparing...</div>;
-	*     },
-	*   },
-	*   [],
-	* );
-	* ```
-	*
-	* @example
-	* ```tsx
-	* useRenderTool(
-	*   {
-	*     name: "summarize",
-	*     parameters: z.object({ text: z.string() }),
-	*     agentId: "research-agent",
-	*     render: ({ name, status }) => <div>{name}: {status}</div>,
-	*   },
-	*   [selectedAgentId],
-	* );
-	* ```
-	*/
-	function useRenderTool(config, deps) {
+		]);
+		return (0, react.useMemo)(() => ({
+			renderActivityMessage,
+			findRenderer
+		}), [renderActivityMessage, findRenderer]);
+	}
+
+//#endregion
+//#region src/v2/hooks/use-frontend-tool.tsx
+	const EMPTY_DEPS = [];
+	function useFrontendTool(tool, deps) {
 		const { copilotkit } = useCopilotKit();
 		const extraDeps = deps !== null && deps !== void 0 ? deps : EMPTY_DEPS;
 		(0, react.useEffect)(() => {
-			const renderer = config.name === "*" && !config.parameters ? defineToolCallRenderer({
-				name: "*",
-				render: (props) => config.render({
-					...props,
-					parameters: props.args
-				}),
-				...config.agentId ? { agentId: config.agentId } : {}
-			}) : defineToolCallRenderer({
-				name: config.name,
-				args: config.parameters,
-				render: (props) => config.render({
-					...props,
-					parameters: props.args
-				}),
-				...config.agentId ? { agentId: config.agentId } : {}
+			const name = tool.name;
+			if (copilotkit.getTool({
+				toolName: name,
+				agentId: tool.agentId
+			})) {
+				console.warn(`Tool '${name}' already exists for agent '${tool.agentId || "global"}'. Overriding with latest registration.`);
+				copilotkit.removeTool(name, tool.agentId);
+			}
+			copilotkit.addTool(tool);
+			if (tool.render) copilotkit.addHookRenderToolCall({
+				name,
+				args: tool.parameters,
+				agentId: tool.agentId,
+				render: tool.render
 			});
-			copilotkit.addHookRenderToolCall(renderer);
+			return () => {
+				copilotkit.removeTool(name, tool.agentId);
+			};
 		}, [
-			config.name,
+			tool.name,
+			tool.available,
 			copilotkit,
 			JSON.stringify(extraDeps)
 		]);
 	}
 
 //#endregion
-//#region src/v2/hooks/use-default-render-tool.tsx
+//#region src/v2/hooks/use-component.tsx
 /**
-	* Registers a wildcard (`"*"`) tool-call renderer via `useRenderTool`.
+	* Registers a React component as a frontend tool renderer in chat.
 	*
-	* - Call with no config to use CopilotKit's built-in default tool-call card.
-	* - Pass `config.render` to replace the default UI with your own fallback renderer.
+	* This hook is a convenience wrapper around `useFrontendTool` that:
+	* - builds a model-facing tool description,
+	* - forwards optional schema parameters (any Standard Schema V1 compatible library),
+	* - renders your component with tool call parameters.
 	*
-	* This is useful when you want a generic renderer for tools that do not have a
-	* dedicated `useRenderTool({ name: "..." })` registration.
+	* Use this when you want to display a typed visual component for a tool call
+	* without manually wiring a full frontend tool object.
 	*
-	* @param config - Optional custom wildcard render function.
-	* @param deps - Optional dependencies to refresh registration.
+	* When `parameters` is provided, render props are inferred from the schema.
+	* When omitted, the render component may accept any props.
+	*
+	* @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`).
 	*
 	* @example
 	* ```tsx
-	* useDefaultRenderTool();
+	* // Without parameters — render accepts any props
+	* useComponent({
+	*   name: "showGreeting",
+	*   render: ({ message }: { message: string }) => <div>{message}</div>,
+	* });
 	* ```
 	*
 	* @example
 	* ```tsx
-	* useDefaultRenderTool({
-	*   render: ({ name, status }) => <div>{name}: {status}</div>,
+	* // With parameters — render props inferred from schema
+	* useComponent({
+	*   name: "showWeatherCard",
+	*   parameters: z.object({ city: z.string() }),
+	*   render: ({ city }) => <div>{city}</div>,
 	* });
 	* ```
 	*
 	* @example
 	* ```tsx
-	* useDefaultRenderTool(
+	* useComponent(
 	*   {
-	*     render: ({ name, result }) => (
-	*       <ToolEventRow title={name} payload={result} compact={compactMode} />
-	*     ),
+	*     name: "renderProfile",
+	*     parameters: z.object({ userId: z.string() }),
+	*     render: ProfileCard,
+	*     agentId: "support-agent",
 	*   },
-	*   [compactMode],
+	*   [selectedAgentId],
 	* );
 	* ```
 	*/
-	function useDefaultRenderTool(config, deps) {
-		var _config$render;
-		useRenderTool({
-			name: "*",
-			render: (_config$render = config === null || config === void 0 ? void 0 : config.render) !== null && _config$render !== void 0 ? _config$render : DefaultToolCallRenderer
-		}, deps);
-	}
-	function DefaultToolCallRenderer({ name, parameters, status, result }) {
-		const [isExpanded, setIsExpanded] = (0, react.useState)(false);
-		const statusString = String(status);
-		const isActive = statusString === "inProgress" || statusString === "executing";
-		const isComplete = statusString === "complete";
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			style: {
-				marginTop: "8px",
-				paddingBottom: "8px"
+	function useComponent(config, deps) {
+		const prefix = `Use this tool to display the "${config.name}" component in the chat. This tool renders a visual UI component for the user.`;
+		const fullDescription = config.description ? `${prefix}\n\n${config.description}` : prefix;
+		useFrontendTool({
+			name: config.name,
+			description: fullDescription,
+			parameters: config.parameters,
+			render: ({ args }) => {
+				const Component = config.render;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { ...args });
 			},
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				style: {
-					borderRadius: "12px",
-					border: "1px solid #e4e4e7",
-					backgroundColor: "#fafafa",
-					padding: "14px 16px"
-				},
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					onClick: () => setIsExpanded(!isExpanded),
-					style: {
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "space-between",
-						gap: "10px",
-						cursor: "pointer",
-						userSelect: "none"
-					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						style: {
-							display: "flex",
-							alignItems: "center",
-							gap: "8px",
-							minWidth: 0
-						},
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-								style: {
-									height: "14px",
-									width: "14px",
-									color: "#71717a",
-									transition: "transform 0.15s",
-									transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
-									flexShrink: 0
-								},
-								fill: "none",
-								viewBox: "0 0 24 24",
-								strokeWidth: 2,
-								stroke: "currentColor",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-									strokeLinecap: "round",
-									strokeLinejoin: "round",
-									d: "M8.25 4.5l7.5 7.5-7.5 7.5"
-								})
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
-								display: "inline-block",
-								height: "8px",
-								width: "8px",
-								borderRadius: "50%",
-								backgroundColor: isActive ? "#f59e0b" : isComplete ? "#10b981" : "#a1a1aa",
-								flexShrink: 0
-							} }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								style: {
-									fontSize: "13px",
-									fontWeight: 600,
-									color: "#18181b",
-									overflow: "hidden",
-									textOverflow: "ellipsis",
-									whiteSpace: "nowrap"
-								},
-								children: name
-							})
-						]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						style: {
-							display: "inline-flex",
-							alignItems: "center",
-							borderRadius: "9999px",
-							padding: "2px 8px",
-							fontSize: "11px",
-							fontWeight: 500,
-							backgroundColor: isActive ? "#fef3c7" : isComplete ? "#d1fae5" : "#f4f4f5",
-							color: isActive ? "#92400e" : isComplete ? "#065f46" : "#3f3f46",
-							flexShrink: 0
-						},
-						children: isActive ? "Running" : isComplete ? "Done" : status
-					})]
-				}), isExpanded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					style: {
-						marginTop: "12px",
-						display: "grid",
-						gap: "12px"
-					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						style: {
-							fontSize: "10px",
-							textTransform: "uppercase",
-							letterSpacing: "0.05em",
-							color: "#71717a"
-						},
-						children: "Arguments"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-						style: {
-							marginTop: "6px",
-							maxHeight: "200px",
-							overflow: "auto",
-							borderRadius: "6px",
-							backgroundColor: "#f4f4f5",
-							padding: "10px",
-							fontSize: "11px",
-							lineHeight: 1.6,
-							color: "#27272a",
-							whiteSpace: "pre-wrap",
-							wordBreak: "break-word"
-						},
-						children: JSON.stringify(parameters !== null && parameters !== void 0 ? parameters : {}, null, 2)
-					})] }), result !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						style: {
-							fontSize: "10px",
-							textTransform: "uppercase",
-							letterSpacing: "0.05em",
-							color: "#71717a"
-						},
-						children: "Result"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-						style: {
-							marginTop: "6px",
-							maxHeight: "200px",
-							overflow: "auto",
-							borderRadius: "6px",
-							backgroundColor: "#f4f4f5",
-							padding: "10px",
-							fontSize: "11px",
-							lineHeight: 1.6,
-							color: "#27272a",
-							whiteSpace: "pre-wrap",
-							wordBreak: "break-word"
-						},
-						children: typeof result === "string" ? result : JSON.stringify(result, null, 2)
-					})] })]
-				})]
-			})
-		});
+			agentId: config.agentId,
+			followUp: config.followUp
+		}, deps);
 	}
 
 //#endregion
@@ -7564,18 +7593,19 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 //#region src/v2/components/chat/CopilotSidebarView.tsx
 	const DEFAULT_SIDEBAR_WIDTH = 480;
 	const SIDEBAR_TRANSITION_MS = 260;
-	function CopilotSidebarView({ header, toggleButton, width, defaultOpen = true, ...props }) {
+	function CopilotSidebarView({ header, toggleButton, width, defaultOpen = true, position = "right", ...props }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatConfigurationProvider, {
 			isModalDefaultOpen: defaultOpen,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotSidebarViewInternal, {
 				header,
 				toggleButton,
 				width,
+				position,
 				...props
 			})
 		});
 	}
-	function CopilotSidebarViewInternal({ header, toggleButton, width, ...props }) {
+	function CopilotSidebarViewInternal({ header, toggleButton, width, position = "right", ...props }) {
 		var _configuration$isModa;
 		const configuration = useCopilotChatConfiguration();
 		const isSidebarOpen = (_configuration$isModa = configuration === null || configuration === void 0 ? void 0 : configuration.isModalOpen) !== null && _configuration$isModa !== void 0 ? _configuration$isModa : false;
@@ -7610,26 +7640,33 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		(0, react.useLayoutEffect)(() => {
 			if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
 			if (!window.matchMedia("(min-width: 768px)").matches) return;
+			const marginStyleProp = position === "left" ? "marginInlineStart" : "marginInlineEnd";
+			const transitionCssProp = position === "left" ? "margin-inline-start" : "margin-inline-end";
 			if (isSidebarOpen) {
-				if (hasMounted.current) document.body.style.transition = `margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease`;
-				document.body.style.marginInlineEnd = widthToMargin(sidebarWidth);
+				if (hasMounted.current) document.body.style.transition = `${transitionCssProp} ${SIDEBAR_TRANSITION_MS}ms ease`;
+				document.body.style[marginStyleProp] = widthToMargin(sidebarWidth);
 			} else if (hasMounted.current) {
-				document.body.style.transition = `margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease`;
-				document.body.style.marginInlineEnd = "";
+				document.body.style.transition = `${transitionCssProp} ${SIDEBAR_TRANSITION_MS}ms ease`;
+				document.body.style[marginStyleProp] = "";
 			}
 			hasMounted.current = true;
 			return () => {
-				document.body.style.marginInlineEnd = "";
+				document.body.style[marginStyleProp] = "";
 				document.body.style.transition = "";
 			};
-		}, [isSidebarOpen, sidebarWidth]);
+		}, [
+			isSidebarOpen,
+			sidebarWidth,
+			position
+		]);
 		const headerElement = renderSlot(header, CopilotModalHeader, {});
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [renderSlot(toggleButton, CopilotChatToggleButton, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [renderSlot(toggleButton, CopilotChatToggleButton, position === "left" ? { className: "cpk:left-6 cpk:right-auto" } : {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
 			ref: sidebarRef,
 			"data-copilotkit": true,
 			"data-testid": "copilot-sidebar",
 			"data-copilot-sidebar": true,
-			className: cn("copilotKitSidebar copilotKitWindow", "cpk:fixed cpk:right-0 cpk:top-0 cpk:z-[1200] cpk:flex", "cpk:h-[100vh] cpk:h-[100dvh] cpk:max-h-screen", "cpk:w-full", "cpk:border-l cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl", "cpk:transition-transform cpk:duration-300 cpk:ease-out", isSidebarOpen ? "cpk:translate-x-0" : "cpk:translate-x-full cpk:pointer-events-none"),
+			"data-position": position,
+			className: cn("copilotKitSidebar copilotKitWindow", "cpk:fixed cpk:top-0 cpk:z-[1200] cpk:flex", position === "left" ? "cpk:left-0" : "cpk:right-0", "cpk:h-[100vh] cpk:h-[100dvh] cpk:max-h-screen", "cpk:w-full", position === "left" ? "cpk:border-r" : "cpk:border-l", "cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl", "cpk:transition-transform cpk:duration-300 cpk:ease-out", isSidebarOpen ? "cpk:translate-x-0" : position === "left" ? "cpk:-translate-x-full cpk:pointer-events-none" : "cpk:translate-x-full cpk:pointer-events-none"),
 			style: {
 				["--sidebar-width"]: widthToCss(sidebarWidth),
 				paddingTop: "env(safe-area-inset-top)",
@@ -7838,7 +7875,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 
 //#endregion
 //#region src/v2/components/chat/CopilotSidebar.tsx
-	function CopilotSidebar({ header, toggleButton, defaultOpen, width, ...chatProps }) {
+	function CopilotSidebar({ header, toggleButton, defaultOpen, width, position, ...chatProps }) {
 		const { checkFeature } = useLicenseContext();
 		const isSidebarLicensed = checkFeature("sidebar");
 		(0, react.useEffect)(() => {
@@ -7846,13 +7883,14 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		}, [isSidebarLicensed]);
 		const SidebarViewOverride = (0, react.useMemo)(() => {
 			const Component = (viewProps) => {
-				const { header: viewHeader, toggleButton: viewToggleButton, width: viewWidth, defaultOpen: viewDefaultOpen, ...restProps } = viewProps;
+				const { header: viewHeader, toggleButton: viewToggleButton, width: viewWidth, defaultOpen: viewDefaultOpen, position: viewPosition, ...restProps } = viewProps;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotSidebarView, {
 					...restProps,
 					header: header !== null && header !== void 0 ? header : viewHeader,
 					toggleButton: toggleButton !== null && toggleButton !== void 0 ? toggleButton : viewToggleButton,
 					width: width !== null && width !== void 0 ? width : viewWidth,
-					defaultOpen: defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : viewDefaultOpen
+					defaultOpen: defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : viewDefaultOpen,
+					position: position !== null && position !== void 0 ? position : viewPosition
 				});
 			};
 			return Object.assign(Component, CopilotChatView_default);
@@ -7860,7 +7898,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			header,
 			toggleButton,
 			width,
-			defaultOpen
+			defaultOpen,
+			position
 		]);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!isSidebarLicensed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineFeatureWarning, { featureName: "Sidebar" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChat, {
 			welcomeScreen: CopilotSidebarView.WelcomeScreen,