@copilotkit/react-core 1.57.1 → 1.57.3

package/dist/{copilotkit-C3k13WZn.cjs → copilotkit-CtXcs1ea.cjs}

@@ -1445,6 +1445,300 @@ const LicenseContext = (0, react.createContext)({
 });
 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 ?? 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) {
+	useRenderTool({
+		name: "*",
+		render: 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, 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 {
+		return String(value);
+	}
+}
+
 //#endregion
 //#region src/v2/hooks/use-render-tool-call.tsx
 /**
@@ -1499,13 +1793,10 @@ function useRenderToolCall() {
 	}, () => copilotkit.renderToolCalls, () => copilotkit.renderToolCalls);
 	return (0, react.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__ */ (0, react_jsx_runtime.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);
 	}, [
@@ -1514,6 +1805,15 @@ function useRenderToolCall() {
 		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
@@ -2753,18 +3053,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 ? 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
 /**
@@ -3587,374 +3875,113 @@ function useRenderActivityMessage() {
 	}, [
 		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 ?? 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) {
+		findRenderer
+	]);
+	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 ?? 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) {
-	useRenderTool({
-		name: "*",
-		render: 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, 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
@@ -7431,18 +7458,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__ */ (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 }) {
 	const isSidebarOpen = useCopilotChatConfiguration()?.isModalOpen ?? false;
 	const sidebarRef = (0, react.useRef)(null);
 	const [sidebarWidth, setSidebarWidth] = (0, react.useState)(width ?? DEFAULT_SIDEBAR_WIDTH);
@@ -7475,26 +7503,33 @@ function CopilotSidebarViewInternal({ header, toggleButton, width, ...props }) {
 	(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)",
@@ -7701,7 +7736,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");
 	(0, react.useEffect)(() => {
@@ -7709,13 +7744,14 @@ function CopilotSidebar({ header, toggleButton, defaultOpen, width, ...chatProps
 	}, [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 ?? viewHeader,
 				toggleButton: toggleButton ?? viewToggleButton,
 				width: width ?? viewWidth,
-				defaultOpen: defaultOpen ?? viewDefaultOpen
+				defaultOpen: defaultOpen ?? viewDefaultOpen,
+				position: position ?? viewPosition
 			});
 		};
 		return Object.assign(Component, CopilotChatView_default);
@@ -7723,7 +7759,8 @@ function CopilotSidebar({ header, toggleButton, defaultOpen, width, ...chatProps
 		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,
@@ -10389,4 +10426,4 @@ Object.defineProperty(exports, 'useToast', {
     return useToast;
   }
 });
-//# sourceMappingURL=copilotkit-C3k13WZn.cjs.map
+//# sourceMappingURL=copilotkit-CtXcs1ea.cjs.map