@copilotkit/react-core 1.57.1 → 1.57.3

package/dist/{copilotkit-DjxXMYHG.mjs → copilotkit-CC8DjOiC.mjs}

@@ -1415,6 +1415,300 @@ const LicenseContext = createContext({
 });
 const useLicenseContext = () => useContext(LicenseContext);
 
+//#endregion
+//#region src/v2/types/defineToolCallRenderer.ts
+function defineToolCallRenderer(def) {
+	const argsSchema = def.name === "*" && !def.args ? 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 ?? EMPTY_DEPS$1;
+	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) {
+	useRenderTool({
+		name: "*",
+		render: config?.render ?? DefaultToolCallRenderer
+	}, deps);
+}
+function DefaultToolCallRenderer({ name, parameters, status, result }) {
+	const [isExpanded, setIsExpanded] = 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__ */ 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__ */ jsxs("div", {
+			style: {
+				borderRadius: "12px",
+				border: "1px solid #e4e4e7",
+				backgroundColor: "#fafafa",
+				padding: "14px 16px"
+			},
+			children: [/* @__PURE__ */ jsxs("div", {
+				onClick: () => setIsExpanded(!isExpanded),
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					gap: "10px",
+					cursor: "pointer",
+					userSelect: "none"
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "8px",
+						minWidth: 0
+					},
+					children: [
+						/* @__PURE__ */ 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__ */ jsx("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								d: "M8.25 4.5l7.5 7.5-7.5 7.5"
+							})
+						}),
+						/* @__PURE__ */ jsx("span", { style: {
+							display: "inline-block",
+							height: "8px",
+							width: "8px",
+							borderRadius: "50%",
+							backgroundColor: dotColor,
+							flexShrink: 0
+						} }),
+						/* @__PURE__ */ jsx("span", {
+							"data-testid": "copilot-tool-render-name",
+							style: {
+								fontSize: "13px",
+								fontWeight: 600,
+								color: "#18181b",
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap"
+							},
+							children: name
+						})
+					]
+				}), /* @__PURE__ */ 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__ */ jsxs("div", {
+				style: {
+					marginTop: "12px",
+					display: "grid",
+					gap: "12px"
+				},
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: "10px",
+						textTransform: "uppercase",
+						letterSpacing: "0.05em",
+						color: "#71717a"
+					},
+					children: "Arguments"
+				}), /* @__PURE__ */ 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, 2)
+				})] }), result !== void 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: "10px",
+						textTransform: "uppercase",
+						letterSpacing: "0.05em",
+						color: "#71717a"
+					},
+					children: "Result"
+				}), /* @__PURE__ */ 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 {
+		return String(value);
+	}
+}
+
 //#endregion
 //#region src/v2/hooks/use-render-tool-call.tsx
 /**
@@ -1469,13 +1763,10 @@ function useRenderToolCall() {
 	}, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
 	return useCallback(({ toolCall, toolMessage }) => {
 		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__ */ jsx(ToolCallRenderer, {
 			toolCall,
 			toolMessage,
-			RenderComponent,
+			RenderComponent: (exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || renderToolCalls.find((rc) => rc.name === "*"))?.render ?? defaultToolCallRenderAdapter,
 			isExecuting: executingToolCallIds.has(toolCall.id)
 		}, toolCall.id);
 	}, [
@@ -1484,6 +1775,15 @@ function useRenderToolCall() {
 		agentId
 	]);
 }
+function defaultToolCallRenderAdapter(props) {
+	const status = props.status === ToolCallStatus.Complete ? "complete" : props.status === ToolCallStatus.Executing ? "executing" : "inProgress";
+	return /* @__PURE__ */ jsx(DefaultToolCallRenderer, {
+		name: props.name,
+		parameters: props.args,
+		status,
+		result: props.result
+	});
+}
 
 //#endregion
 //#region src/v2/components/CopilotKitInspector.tsx
@@ -2723,18 +3023,6 @@ function getOperationSurfaceId(operation) {
 	return operation?.createSurface?.surfaceId ?? operation?.updateComponents?.surfaceId ?? operation?.updateDataModel?.surfaceId ?? operation?.deleteSurface?.surfaceId ?? null;
 }
 
-//#endregion
-//#region src/v2/types/defineToolCallRenderer.ts
-function defineToolCallRenderer(def) {
-	const argsSchema = def.name === "*" && !def.args ? 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
 /**
@@ -3557,374 +3845,113 @@ function useRenderActivityMessage() {
 	}, [
 		agentId,
 		copilotkit,
-		findRenderer
-	]);
-	return 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 ?? EMPTY_DEPS$1;
-	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__ */ 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) {
+		findRenderer
+	]);
+	return 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 ?? EMPTY_DEPS;
 	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) {
-	useRenderTool({
-		name: "*",
-		render: config?.render ?? DefaultToolCallRenderer
-	}, deps);
-}
-function DefaultToolCallRenderer({ name, parameters, status, result }) {
-	const [isExpanded, setIsExpanded] = useState(false);
-	const statusString = String(status);
-	const isActive = statusString === "inProgress" || statusString === "executing";
-	const isComplete = statusString === "complete";
-	return /* @__PURE__ */ 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__ */ jsx(Component, { ...args });
 		},
-		children: /* @__PURE__ */ jsxs("div", {
-			style: {
-				borderRadius: "12px",
-				border: "1px solid #e4e4e7",
-				backgroundColor: "#fafafa",
-				padding: "14px 16px"
-			},
-			children: [/* @__PURE__ */ jsxs("div", {
-				onClick: () => setIsExpanded(!isExpanded),
-				style: {
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "space-between",
-					gap: "10px",
-					cursor: "pointer",
-					userSelect: "none"
-				},
-				children: [/* @__PURE__ */ jsxs("div", {
-					style: {
-						display: "flex",
-						alignItems: "center",
-						gap: "8px",
-						minWidth: 0
-					},
-					children: [
-						/* @__PURE__ */ 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__ */ jsx("path", {
-								strokeLinecap: "round",
-								strokeLinejoin: "round",
-								d: "M8.25 4.5l7.5 7.5-7.5 7.5"
-							})
-						}),
-						/* @__PURE__ */ jsx("span", { style: {
-							display: "inline-block",
-							height: "8px",
-							width: "8px",
-							borderRadius: "50%",
-							backgroundColor: isActive ? "#f59e0b" : isComplete ? "#10b981" : "#a1a1aa",
-							flexShrink: 0
-						} }),
-						/* @__PURE__ */ jsx("span", {
-							style: {
-								fontSize: "13px",
-								fontWeight: 600,
-								color: "#18181b",
-								overflow: "hidden",
-								textOverflow: "ellipsis",
-								whiteSpace: "nowrap"
-							},
-							children: name
-						})
-					]
-				}), /* @__PURE__ */ 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__ */ jsxs("div", {
-				style: {
-					marginTop: "12px",
-					display: "grid",
-					gap: "12px"
-				},
-				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-					style: {
-						fontSize: "10px",
-						textTransform: "uppercase",
-						letterSpacing: "0.05em",
-						color: "#71717a"
-					},
-					children: "Arguments"
-				}), /* @__PURE__ */ 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, 2)
-				})] }), result !== void 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-					style: {
-						fontSize: "10px",
-						textTransform: "uppercase",
-						letterSpacing: "0.05em",
-						color: "#71717a"
-					},
-					children: "Result"
-				}), /* @__PURE__ */ 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
@@ -7401,18 +7428,19 @@ CopilotModalHeader.CloseButton.displayName = "CopilotModalHeader.CloseButton";
 //#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__ */ jsx(CopilotChatConfigurationProvider, {
 		isModalDefaultOpen: defaultOpen,
 		children: /* @__PURE__ */ jsx(CopilotSidebarViewInternal, {
 			header,
 			toggleButton,
 			width,
+			position,
 			...props
 		})
 	});
 }
-function CopilotSidebarViewInternal({ header, toggleButton, width, ...props }) {
+function CopilotSidebarViewInternal({ header, toggleButton, width, position = "right", ...props }) {
 	const isSidebarOpen = useCopilotChatConfiguration()?.isModalOpen ?? false;
 	const sidebarRef = useRef(null);
 	const [sidebarWidth, setSidebarWidth] = useState(width ?? DEFAULT_SIDEBAR_WIDTH);
@@ -7445,26 +7473,33 @@ function CopilotSidebarViewInternal({ header, toggleButton, width, ...props }) {
 	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__ */ jsxs(Fragment$1, { children: [renderSlot(toggleButton, CopilotChatToggleButton, {}), /* @__PURE__ */ jsx("aside", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [renderSlot(toggleButton, CopilotChatToggleButton, position === "left" ? { className: "cpk:left-6 cpk:right-auto" } : {}), /* @__PURE__ */ 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)",
@@ -7671,7 +7706,7 @@ var CopilotPopupView_default = CopilotPopupView;
 
 //#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");
 	useEffect(() => {
@@ -7679,13 +7714,14 @@ function CopilotSidebar({ header, toggleButton, defaultOpen, width, ...chatProps
 	}, [isSidebarLicensed]);
 	const SidebarViewOverride = 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__ */ jsx(CopilotSidebarView, {
 				...restProps,
 				header: header ?? viewHeader,
 				toggleButton: toggleButton ?? viewToggleButton,
 				width: width ?? viewWidth,
-				defaultOpen: defaultOpen ?? viewDefaultOpen
+				defaultOpen: defaultOpen ?? viewDefaultOpen,
+				position: position ?? viewPosition
 			});
 		};
 		return Object.assign(Component, CopilotChatView_default);
@@ -7693,7 +7729,8 @@ function CopilotSidebar({ header, toggleButton, defaultOpen, width, ...chatProps
 		header,
 		toggleButton,
 		width,
-		defaultOpen
+		defaultOpen,
+		position
 	]);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [!isSidebarLicensed && /* @__PURE__ */ jsx(InlineFeatureWarning, { featureName: "Sidebar" }), /* @__PURE__ */ jsx(CopilotChat, {
 		welcomeScreen: CopilotSidebarView.WelcomeScreen,
@@ -9933,5 +9970,5 @@ function validateProps(props) {
 }
 
 //#endregion
-export { CopilotKitProvider as $, IntelligenceIndicator as A, useInterrupt as B, CopilotChatToggleButton as C, CopilotChatView_default as D, CopilotChat as E, CopilotChatAttachmentRenderer as F, useAgent as G, useSuggestions as H, CopilotChatAssistantMessage_default as I, useRenderTool as J, useHumanInTheLoop as K, CopilotChatToolCallsView as L, CopilotChatSuggestionPill as M, CopilotChatReasoningMessage_default as N, CopilotChatAttachmentQueue as O, CopilotChatUserMessage_default as P, useRenderCustomMessages as Q, useAttachments as R, CopilotModalHeader as S, DefaultOpenIcon as T, useCapabilities as U, useConfigureSuggestions as V, UseAgentUpdate as W, useFrontendTool as X, useComponent as Y, useRenderActivityMessage as Z, WildcardToolCallRender as _, ThreadsProvider as a, MCPAppsActivityContentSchema as at, CopilotPopupView as b, CoAgentStateRendersProvider as c, CopilotKitInspector as ct, shouldShowDevConsole as d, CopilotKitCoreReact as dt, useAgentContext as et, useToast as f, CopilotChatInput_default as ft, useCopilotContext as g, useCopilotChatConfiguration as gt, CopilotContext as h, CopilotChatConfigurationProvider as ht, ThreadsContext as i, useSandboxFunctions as it, CopilotChatSuggestionView as j, CopilotChatMessageView as k, useCoAgentStateRenders as l, useRenderToolCall as lt, useCopilotMessagesContext as m, CopilotChatAudioRecorder as mt, defaultCopilotContextCategories as n, createA2UIMessageRenderer as nt, useThreads as o, MCPAppsActivityRenderer as ot, CopilotMessagesContext as p, AudioRecorderError as pt, useDefaultRenderTool as q, CoAgentStateRenderBridge as r, SandboxFunctionsContext as rt, CoAgentStateRendersContext as s, MCPAppsActivityType as st, CopilotKit as t, defineToolCallRenderer as tt, useAsyncCallback as u, useCopilotKit as ut, CopilotPopup as v, DefaultCloseIcon as w, CopilotSidebarView as x, CopilotSidebar as y, useThreads$1 as z };
-//# sourceMappingURL=copilotkit-DjxXMYHG.mjs.map
+export { createA2UIMessageRenderer as $, IntelligenceIndicator as A, useInterrupt as B, CopilotChatToggleButton as C, CopilotChatView_default as D, CopilotChat as E, CopilotChatAttachmentRenderer as F, useAgent as G, useSuggestions as H, CopilotChatAssistantMessage_default as I, useFrontendTool as J, useHumanInTheLoop as K, CopilotChatToolCallsView as L, CopilotChatSuggestionPill as M, CopilotChatReasoningMessage_default as N, CopilotChatAttachmentQueue as O, CopilotChatUserMessage_default as P, useAgentContext as Q, useAttachments as R, CopilotModalHeader as S, DefaultOpenIcon as T, useCapabilities as U, useConfigureSuggestions as V, UseAgentUpdate as W, useRenderCustomMessages as X, useRenderActivityMessage as Y, CopilotKitProvider as Z, WildcardToolCallRender as _, ThreadsProvider as a, CopilotKitInspector as at, CopilotPopupView as b, CoAgentStateRendersProvider as c, useRenderTool as ct, shouldShowDevConsole as d, CopilotKitCoreReact as dt, SandboxFunctionsContext as et, useToast as f, CopilotChatInput_default as ft, useCopilotContext as g, useCopilotChatConfiguration as gt, CopilotContext as h, CopilotChatConfigurationProvider as ht, ThreadsContext as i, MCPAppsActivityType as it, CopilotChatSuggestionView as j, CopilotChatMessageView as k, useCoAgentStateRenders as l, defineToolCallRenderer as lt, useCopilotMessagesContext as m, CopilotChatAudioRecorder as mt, defaultCopilotContextCategories as n, MCPAppsActivityContentSchema as nt, useThreads as o, useRenderToolCall as ot, CopilotMessagesContext as p, AudioRecorderError as pt, useComponent as q, CoAgentStateRenderBridge as r, MCPAppsActivityRenderer as rt, CoAgentStateRendersContext as s, useDefaultRenderTool as st, CopilotKit as t, useSandboxFunctions as tt, useAsyncCallback as u, useCopilotKit as ut, CopilotPopup as v, DefaultCloseIcon as w, CopilotSidebarView as x, CopilotSidebar as y, useThreads$1 as z };
+//# sourceMappingURL=copilotkit-CC8DjOiC.mjs.map