@copilotkitnext/react 0.0.19 → 0.0.21-alpha.0

package/dist/index.mjs

@@ -1362,14 +1362,19 @@ import { CopilotKitCore } from "@copilotkitnext/core";
 var CopilotKitCoreReact = class extends CopilotKitCore {
   _renderToolCalls = [];
   _renderCustomMessages = [];
+  _renderActivityMessages = [];
   constructor(config) {
     super(config);
     this._renderToolCalls = config.renderToolCalls ?? [];
     this._renderCustomMessages = config.renderCustomMessages ?? [];
+    this._renderActivityMessages = config.renderActivityMessages ?? [];
   }
   get renderCustomMessages() {
     return this._renderCustomMessages;
   }
+  get renderActivityMessages() {
+    return this._renderActivityMessages;
+  }
   get renderToolCalls() {
     return this._renderToolCalls;
   }
@@ -1455,10 +1460,12 @@ var CopilotKitProvider = ({
   properties = {},
   agents__unsafe_dev_only: agents = {},
   renderToolCalls,
+  renderActivityMessages,
   renderCustomMessages,
   frontendTools,
   humanInTheLoop,
-  showDevConsole = false
+  showDevConsole = false,
+  useSingleEndpoint = false
 }) => {
   const [shouldRenderInspector, setShouldRenderInspector] = useState3(false);
   useEffect4(() => {
@@ -1495,6 +1502,10 @@ var CopilotKitProvider = ({
     renderCustomMessages,
     "renderCustomMessages must be a stable array."
   );
+  const renderActivityMessagesList = useStableArrayProp(
+    renderActivityMessages,
+    "renderActivityMessages must be a stable array."
+  );
   const frontendToolsList = useStableArrayProp(
     frontendTools,
     "frontendTools must be a stable array. If you want to dynamically add or remove tools, use `useFrontendTool` instead."
@@ -1558,15 +1569,17 @@ var CopilotKitProvider = ({
   const copilotkit = useMemo3(() => {
     const copilotkit2 = new CopilotKitCoreReact({
       runtimeUrl,
+      runtimeTransport: useSingleEndpoint ? "single" : "rest",
       headers,
       properties,
       agents__unsafe_dev_only: agents,
       tools: allTools,
       renderToolCalls: allRenderToolCalls,
+      renderActivityMessages: renderActivityMessagesList,
       renderCustomMessages: renderCustomMessagesList
     });
     return copilotkit2;
-  }, [allTools, allRenderToolCalls, renderCustomMessagesList]);
+  }, [allTools, allRenderToolCalls, renderActivityMessagesList, renderCustomMessagesList, useSingleEndpoint]);
   const [, forceUpdate] = useReducer((x) => x + 1, 0);
   useEffect4(() => {
     const unsubscribe = copilotkit.subscribe({
@@ -1580,10 +1593,11 @@ var CopilotKitProvider = ({
   }, [copilotkit]);
   useEffect4(() => {
     copilotkit.setRuntimeUrl(runtimeUrl);
+    copilotkit.setRuntimeTransport(useSingleEndpoint ? "single" : "rest");
     copilotkit.setHeaders(headers);
     copilotkit.setProperties(properties);
     copilotkit.setAgents__unsafe_dev_only(agents);
-  }, [runtimeUrl, headers, properties, agents]);
+  }, [runtimeUrl, headers, properties, agents, useSingleEndpoint]);
   return /* @__PURE__ */ jsxs4(
     CopilotKitContext.Provider,
     {
@@ -1768,6 +1782,52 @@ function useRenderCustomMessages() {
   };
 }
 
+// src/hooks/use-render-activity-message.tsx
+import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID3 } from "@copilotkitnext/shared";
+import { useCallback as useCallback3 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function useRenderActivityMessage() {
+  const { copilotkit } = useCopilotKit();
+  const config = useCopilotChatConfiguration();
+  const agentId = config?.agentId ?? DEFAULT_AGENT_ID3;
+  const renderers = copilotkit.renderActivityMessages;
+  return useCallback3(
+    (message) => {
+      if (!renderers.length) {
+        return null;
+      }
+      const matches = renderers.filter(
+        (renderer2) => renderer2.activityType === message.activityType
+      );
+      const renderer = matches.find((candidate) => candidate.agentId === agentId) ?? matches.find((candidate) => candidate.agentId === void 0) ?? renderers.find((candidate) => candidate.activityType === "*");
+      if (!renderer) {
+        return null;
+      }
+      const parseResult = renderer.content.safeParse(message.content);
+      if (!parseResult.success) {
+        console.warn(
+          `Failed to parse content for activity message '${message.activityType}':`,
+          parseResult.error
+        );
+        return null;
+      }
+      const Component = renderer.render;
+      const agent = copilotkit.getAgent(agentId);
+      return /* @__PURE__ */ jsx11(
+        Component,
+        {
+          activityType: message.activityType,
+          content: parseResult.data,
+          message,
+          agent
+        },
+        message.id
+      );
+    },
+    [agentId, copilotkit, renderers]
+  );
+}
+
 // src/hooks/use-frontend-tool.tsx
 import { useEffect as useEffect6 } from "react";
 function useFrontendTool(tool) {
@@ -1804,7 +1864,7 @@ function useFrontendTool(tool) {
 }
 
 // src/hooks/use-human-in-the-loop.tsx
-import { useState as useState5, useCallback as useCallback3, useRef as useRef5, useEffect as useEffect7 } from "react";
+import { useState as useState5, useCallback as useCallback4, useRef as useRef5, useEffect as useEffect7 } from "react";
 import React7 from "react";
 function useHumanInTheLoop(tool) {
   const { copilotkit } = useCopilotKit();
@@ -1814,20 +1874,20 @@ function useHumanInTheLoop(tool) {
   const statusRef = useRef5(status);
   const resolvePromiseRef = useRef5(null);
   statusRef.current = status;
-  const respond = useCallback3(async (result) => {
+  const respond = useCallback4(async (result) => {
     if (resolvePromiseRef.current) {
       resolvePromiseRef.current(result);
       setStatus("complete");
       resolvePromiseRef.current = null;
     }
   }, []);
-  const handler = useCallback3(async () => {
+  const handler = useCallback4(async () => {
     return new Promise((resolve) => {
       setStatus("executing");
       resolvePromiseRef.current = resolve;
     });
   }, []);
-  const RenderComponent = useCallback3(
+  const RenderComponent = useCallback4(
     (props) => {
       const ToolComponent = tool.render;
       const currentStatus = statusRef.current;
@@ -1880,14 +1940,14 @@ function useHumanInTheLoop(tool) {
 
 // src/hooks/use-agent.tsx
 import { useMemo as useMemo4, useEffect as useEffect8, useReducer as useReducer2 } from "react";
-import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID3 } from "@copilotkitnext/shared";
+import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID4 } from "@copilotkitnext/shared";
 var ALL_UPDATES = [
   "OnMessagesChanged" /* OnMessagesChanged */,
   "OnStateChanged" /* OnStateChanged */,
   "OnRunStatusChanged" /* OnRunStatusChanged */
 ];
 function useAgent({ agentId, updates } = {}) {
-  agentId ??= DEFAULT_AGENT_ID3;
+  agentId ??= DEFAULT_AGENT_ID4;
   const { copilotkit } = useCopilotKit();
   const [, forceUpdate] = useReducer2((x) => x + 1, 0);
   const updateFlags = useMemo4(
@@ -1954,12 +2014,12 @@ function useAgentContext(context) {
 }
 
 // src/hooks/use-suggestions.tsx
-import { useCallback as useCallback4, useEffect as useEffect10, useMemo as useMemo5, useState as useState6 } from "react";
-import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID4 } from "@copilotkitnext/shared";
+import { useCallback as useCallback5, useEffect as useEffect10, useMemo as useMemo5, useState as useState6 } from "react";
+import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID5 } from "@copilotkitnext/shared";
 function useSuggestions({ agentId } = {}) {
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
-  const resolvedAgentId = useMemo5(() => agentId ?? config?.agentId ?? DEFAULT_AGENT_ID4, [agentId, config?.agentId]);
+  const resolvedAgentId = useMemo5(() => agentId ?? config?.agentId ?? DEFAULT_AGENT_ID5, [agentId, config?.agentId]);
   const [suggestions, setSuggestions] = useState6(() => {
     const result = copilotkit.getSuggestions(resolvedAgentId);
     return result.suggestions;
@@ -2003,10 +2063,10 @@ function useSuggestions({ agentId } = {}) {
       unsubscribe();
     };
   }, [copilotkit, resolvedAgentId]);
-  const reloadSuggestions = useCallback4(() => {
+  const reloadSuggestions = useCallback5(() => {
     copilotkit.reloadSuggestions(resolvedAgentId);
   }, [copilotkit, resolvedAgentId]);
-  const clearSuggestions = useCallback4(() => {
+  const clearSuggestions = useCallback5(() => {
     copilotkit.clearSuggestions(resolvedAgentId);
   }, [copilotkit, resolvedAgentId]);
   return {
@@ -2018,14 +2078,14 @@ function useSuggestions({ agentId } = {}) {
 }
 
 // src/hooks/use-configure-suggestions.tsx
-import { useCallback as useCallback5, useEffect as useEffect11, useMemo as useMemo6, useRef as useRef6 } from "react";
-import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID5 } from "@copilotkitnext/shared";
+import { useCallback as useCallback6, useEffect as useEffect11, useMemo as useMemo6, useRef as useRef6 } from "react";
+import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID6 } from "@copilotkitnext/shared";
 var EMPTY_DEPS = [];
 function useConfigureSuggestions(config, options) {
   const { copilotkit } = useCopilotKit();
   const chatConfig = useCopilotChatConfiguration();
   const extraDeps = options?.deps ?? EMPTY_DEPS;
-  const resolvedConsumerAgentId = useMemo6(() => chatConfig?.agentId ?? DEFAULT_AGENT_ID5, [chatConfig?.agentId]);
+  const resolvedConsumerAgentId = useMemo6(() => chatConfig?.agentId ?? DEFAULT_AGENT_ID6, [chatConfig?.agentId]);
   const rawConsumerAgentId = useMemo6(() => config ? config.consumerAgentId : void 0, [config]);
   const normalizationCacheRef = useRef6({
     serialized: null,
@@ -2075,7 +2135,7 @@ function useConfigureSuggestions(config, options) {
     return consumer;
   }, [normalizedConfig, resolvedConsumerAgentId]);
   const isGlobalConfig = rawConsumerAgentId === void 0 || rawConsumerAgentId === "*";
-  const requestReload = useCallback5(() => {
+  const requestReload = useCallback6(() => {
     if (!normalizedConfig) {
       return;
     }
@@ -2139,7 +2199,7 @@ function normalizeStaticSuggestions(suggestions) {
 
 // src/components/chat/CopilotChatToolCallsView.tsx
 import React8 from "react";
-import { Fragment as Fragment2, jsx as jsx11 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx12 } from "react/jsx-runtime";
 function CopilotChatToolCallsView({
   message,
   messages = []
@@ -2148,11 +2208,11 @@ function CopilotChatToolCallsView({
   if (!message.toolCalls || message.toolCalls.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx11(Fragment2, { children: message.toolCalls.map((toolCall) => {
+  return /* @__PURE__ */ jsx12(Fragment2, { children: message.toolCalls.map((toolCall) => {
     const toolMessage = messages.find(
       (m) => m.role === "tool" && m.toolCallId === toolCall.id
     );
-    return /* @__PURE__ */ jsx11(React8.Fragment, { children: renderToolCall({
+    return /* @__PURE__ */ jsx12(React8.Fragment, { children: renderToolCall({
       toolCall,
       toolMessage
     }) }, toolCall.id);
@@ -2161,7 +2221,7 @@ function CopilotChatToolCallsView({
 var CopilotChatToolCallsView_default = CopilotChatToolCallsView;
 
 // src/components/chat/CopilotChatAssistantMessage.tsx
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 function CopilotChatAssistantMessage({
   message,
   messages,
@@ -2260,7 +2320,7 @@ function CopilotChatAssistantMessage({
   const isLatestAssistantMessage = message.role === "assistant" && messages?.[messages.length - 1]?.id === message.id;
   const shouldShowToolbar = toolbarVisible && hasContent && !(isRunning && isLatestAssistantMessage);
   if (children) {
-    return /* @__PURE__ */ jsx12(Fragment3, { children: children({
+    return /* @__PURE__ */ jsx13(Fragment3, { children: children({
       markdownRenderer: boundMarkdownRenderer,
       toolbar: boundToolbar,
       toolCallsView: boundToolCallsView,
@@ -2298,11 +2358,11 @@ function CopilotChatAssistantMessage({
   );
 }
 ((CopilotChatAssistantMessage2) => {
-  CopilotChatAssistantMessage2.MarkdownRenderer = ({ content, className, ...props }) => /* @__PURE__ */ jsx12(Streamdown, { className, ...props, children: content ?? "" });
+  CopilotChatAssistantMessage2.MarkdownRenderer = ({ content, className, ...props }) => /* @__PURE__ */ jsx13(Streamdown, { className, ...props, children: content ?? "" });
   CopilotChatAssistantMessage2.Toolbar = ({
     className,
     ...props
-  }) => /* @__PURE__ */ jsx12(
+  }) => /* @__PURE__ */ jsx13(
     "div",
     {
       className: twMerge4(
@@ -2314,7 +2374,7 @@ function CopilotChatAssistantMessage({
   );
   CopilotChatAssistantMessage2.ToolbarButton = ({ title, children, ...props }) => {
     return /* @__PURE__ */ jsxs5(Tooltip, { children: [
-      /* @__PURE__ */ jsx12(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx13(
         Button,
         {
           type: "button",
@@ -2324,7 +2384,7 @@ function CopilotChatAssistantMessage({
           children
         }
       ) }),
-      /* @__PURE__ */ jsx12(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx12("p", { children: title }) })
+      /* @__PURE__ */ jsx13(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx13("p", { children: title }) })
     ] });
   };
   CopilotChatAssistantMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
@@ -2338,62 +2398,62 @@ function CopilotChatAssistantMessage({
         onClick(event);
       }
     };
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
         title: title || labels.assistantMessageToolbarCopyMessageLabel,
         onClick: handleClick,
         className,
         ...props,
-        children: copied ? /* @__PURE__ */ jsx12(Check2, { className: "size-[18px]" }) : /* @__PURE__ */ jsx12(Copy, { className: "size-[18px]" })
+        children: copied ? /* @__PURE__ */ jsx13(Check2, { className: "size-[18px]" }) : /* @__PURE__ */ jsx13(Copy, { className: "size-[18px]" })
       }
     );
   };
   CopilotChatAssistantMessage2.ThumbsUpButton = ({ title, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
         title: title || labels.assistantMessageToolbarThumbsUpLabel,
         ...props,
-        children: /* @__PURE__ */ jsx12(ThumbsUp, { className: "size-[18px]" })
+        children: /* @__PURE__ */ jsx13(ThumbsUp, { className: "size-[18px]" })
       }
     );
   };
   CopilotChatAssistantMessage2.ThumbsDownButton = ({ title, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
         title: title || labels.assistantMessageToolbarThumbsDownLabel,
         ...props,
-        children: /* @__PURE__ */ jsx12(ThumbsDown, { className: "size-[18px]" })
+        children: /* @__PURE__ */ jsx13(ThumbsDown, { className: "size-[18px]" })
       }
     );
   };
   CopilotChatAssistantMessage2.ReadAloudButton = ({ title, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
         title: title || labels.assistantMessageToolbarReadAloudLabel,
         ...props,
-        children: /* @__PURE__ */ jsx12(Volume2, { className: "size-[20px]" })
+        children: /* @__PURE__ */ jsx13(Volume2, { className: "size-[20px]" })
       }
     );
   };
   CopilotChatAssistantMessage2.RegenerateButton = ({ title, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
         title: title || labels.assistantMessageToolbarRegenerateLabel,
         ...props,
-        children: /* @__PURE__ */ jsx12(RefreshCw, { className: "size-[18px]" })
+        children: /* @__PURE__ */ jsx13(RefreshCw, { className: "size-[18px]" })
       }
     );
   };
@@ -2408,10 +2468,24 @@ CopilotChatAssistantMessage.RegenerateButton.displayName = "CopilotChatAssistant
 var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
 
 // src/components/chat/CopilotChatUserMessage.tsx
-import { useState as useState8 } from "react";
+import { useMemo as useMemo7, useState as useState8 } from "react";
 import { Copy as Copy2, Check as Check3, Edit, ChevronLeft, ChevronRight } from "lucide-react";
 import { twMerge as twMerge5 } from "tailwind-merge";
-import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+function flattenUserMessageContent(content) {
+  if (!content) {
+    return "";
+  }
+  if (typeof content === "string") {
+    return content;
+  }
+  return content.map((part) => {
+    if (part && typeof part === "object" && "type" in part && part.type === "text" && typeof part.text === "string") {
+      return part.text;
+    }
+    return "";
+  }).filter((text) => text.length > 0).join("\n");
+}
 function CopilotChatUserMessage({
   message,
   onEditMessage,
@@ -2428,11 +2502,15 @@ function CopilotChatUserMessage({
   className,
   ...props
 }) {
+  const flattenedContent = useMemo7(
+    () => flattenUserMessageContent(message.content),
+    [message.content]
+  );
   const BoundMessageRenderer = renderSlot(
     messageRenderer,
     CopilotChatUserMessage.MessageRenderer,
     {
-      content: message.content || ""
+      content: flattenedContent
     }
   );
   const BoundCopyButton = renderSlot(
@@ -2440,9 +2518,9 @@ function CopilotChatUserMessage({
     CopilotChatUserMessage.CopyButton,
     {
       onClick: async () => {
-        if (message.content) {
+        if (flattenedContent) {
           try {
-            await navigator.clipboard.writeText(message.content);
+            await navigator.clipboard.writeText(flattenedContent);
           } catch (err) {
             console.error("Failed to copy message:", err);
           }
@@ -2477,7 +2555,7 @@ function CopilotChatUserMessage({
     ] })
   });
   if (children) {
-    return /* @__PURE__ */ jsx13(Fragment4, { children: children({
+    return /* @__PURE__ */ jsx14(Fragment4, { children: children({
       messageRenderer: BoundMessageRenderer,
       toolbar: BoundToolbar,
       copyButton: BoundCopyButton,
@@ -2503,7 +2581,7 @@ function CopilotChatUserMessage({
   );
 }
 ((CopilotChatUserMessage2) => {
-  CopilotChatUserMessage2.Container = ({ children, className, ...props }) => /* @__PURE__ */ jsx13(
+  CopilotChatUserMessage2.Container = ({ children, className, ...props }) => /* @__PURE__ */ jsx14(
     "div",
     {
       className: twMerge5("flex flex-col items-end group", className),
@@ -2511,7 +2589,7 @@ function CopilotChatUserMessage({
       children
     }
   );
-  CopilotChatUserMessage2.MessageRenderer = ({ content, className }) => /* @__PURE__ */ jsx13(
+  CopilotChatUserMessage2.MessageRenderer = ({ content, className }) => /* @__PURE__ */ jsx14(
     "div",
     {
       className: twMerge5(
@@ -2524,7 +2602,7 @@ function CopilotChatUserMessage({
   CopilotChatUserMessage2.Toolbar = ({
     className,
     ...props
-  }) => /* @__PURE__ */ jsx13(
+  }) => /* @__PURE__ */ jsx14(
     "div",
     {
       className: twMerge5(
@@ -2536,7 +2614,7 @@ function CopilotChatUserMessage({
   );
   CopilotChatUserMessage2.ToolbarButton = ({ title, children, className, ...props }) => {
     return /* @__PURE__ */ jsxs6(Tooltip, { children: [
-      /* @__PURE__ */ jsx13(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx14(
         Button,
         {
           type: "button",
@@ -2547,7 +2625,7 @@ function CopilotChatUserMessage({
           children
         }
       ) }),
-      /* @__PURE__ */ jsx13(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx13("p", { children: title }) })
+      /* @__PURE__ */ jsx14(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx14("p", { children: title }) })
     ] });
   };
   CopilotChatUserMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
@@ -2561,27 +2639,27 @@ function CopilotChatUserMessage({
         onClick(event);
       }
     };
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       CopilotChatUserMessage2.ToolbarButton,
       {
         title: title || labels.userMessageToolbarCopyMessageLabel,
         onClick: handleClick,
         className,
         ...props,
-        children: copied ? /* @__PURE__ */ jsx13(Check3, { className: "size-[18px]" }) : /* @__PURE__ */ jsx13(Copy2, { className: "size-[18px]" })
+        children: copied ? /* @__PURE__ */ jsx14(Check3, { className: "size-[18px]" }) : /* @__PURE__ */ jsx14(Copy2, { className: "size-[18px]" })
       }
     );
   };
   CopilotChatUserMessage2.EditButton = ({ className, title, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       CopilotChatUserMessage2.ToolbarButton,
       {
         title: title || labels.userMessageToolbarEditMessageLabel,
         className,
         ...props,
-        children: /* @__PURE__ */ jsx13(Edit, { className: "size-[18px]" })
+        children: /* @__PURE__ */ jsx14(Edit, { className: "size-[18px]" })
       }
     );
   };
@@ -2599,7 +2677,7 @@ function CopilotChatUserMessage({
     const canGoPrev = currentBranch > 0;
     const canGoNext = currentBranch < numberOfBranches - 1;
     return /* @__PURE__ */ jsxs6("div", { className: twMerge5("flex items-center gap-1", className), ...props, children: [
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(
         Button,
         {
           type: "button",
@@ -2611,7 +2689,7 @@ function CopilotChatUserMessage({
           }),
           disabled: !canGoPrev,
           className: "h-6 w-6 p-0",
-          children: /* @__PURE__ */ jsx13(ChevronLeft, { className: "size-[20px]" })
+          children: /* @__PURE__ */ jsx14(ChevronLeft, { className: "size-[20px]" })
         }
       ),
       /* @__PURE__ */ jsxs6("span", { className: "text-sm text-muted-foreground px-0 font-medium", children: [
@@ -2619,7 +2697,7 @@ function CopilotChatUserMessage({
         "/",
         numberOfBranches
       ] }),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(
         Button,
         {
           type: "button",
@@ -2631,7 +2709,7 @@ function CopilotChatUserMessage({
           }),
           disabled: !canGoNext,
           className: "h-6 w-6 p-0",
-          children: /* @__PURE__ */ jsx13(ChevronRight, { className: "size-[20px]" })
+          children: /* @__PURE__ */ jsx14(ChevronRight, { className: "size-[20px]" })
         }
       )
     ] });
@@ -2649,7 +2727,7 @@ var CopilotChatUserMessage_default = CopilotChatUserMessage;
 // src/components/chat/CopilotChatSuggestionPill.tsx
 import React9 from "react";
 import { Loader2 } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var baseClasses = "group inline-flex h-7 sm:h-8 items-center gap-1 sm:gap-1.5 rounded-full border border-border/60 bg-background px-2.5 sm:px-3 text-[11px] sm:text-xs leading-none text-foreground transition-colors cursor-pointer hover:bg-accent/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:text-muted-foreground disabled:hover:bg-background disabled:hover:text-muted-foreground pointer-events-auto";
 var labelClasses = "whitespace-nowrap font-medium leading-none";
 var CopilotChatSuggestionPill = React9.forwardRef(function CopilotChatSuggestionPill2({ className, children, icon, isLoading, type, ...props }, ref) {
@@ -2665,8 +2743,8 @@ var CopilotChatSuggestionPill = React9.forwardRef(function CopilotChatSuggestion
       disabled: isLoading || props.disabled,
       ...props,
       children: [
-        isLoading ? /* @__PURE__ */ jsx14("span", { className: "flex h-3.5 sm:h-4 w-3.5 sm:w-4 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx14(Loader2, { className: "h-3.5 sm:h-4 w-3.5 sm:w-4 animate-spin", "aria-hidden": "true" }) }) : showIcon && /* @__PURE__ */ jsx14("span", { className: "flex h-3.5 sm:h-4 w-3.5 sm:w-4 items-center justify-center text-muted-foreground", children: icon }),
-        /* @__PURE__ */ jsx14("span", { className: labelClasses, children })
+        isLoading ? /* @__PURE__ */ jsx15("span", { className: "flex h-3.5 sm:h-4 w-3.5 sm:w-4 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx15(Loader2, { className: "h-3.5 sm:h-4 w-3.5 sm:w-4 animate-spin", "aria-hidden": "true" }) }) : showIcon && /* @__PURE__ */ jsx15("span", { className: "flex h-3.5 sm:h-4 w-3.5 sm:w-4 items-center justify-center text-muted-foreground", children: icon }),
+        /* @__PURE__ */ jsx15("span", { className: labelClasses, children })
       ]
     }
   );
@@ -2676,9 +2754,9 @@ var CopilotChatSuggestionPill_default = CopilotChatSuggestionPill;
 
 // src/components/chat/CopilotChatSuggestionView.tsx
 import React10 from "react";
-import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 var DefaultContainer = React10.forwardRef(function DefaultContainer2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       ref,
@@ -2734,7 +2812,7 @@ var CopilotChatSuggestionView = React10.forwardRef(function CopilotChatSuggestio
       isLoading: suggestions.length > 0 ? loadingSet.has(0) || suggestions[0]?.isLoading === true : false,
       type: "button"
     });
-    return /* @__PURE__ */ jsx15(Fragment5, { children: children({
+    return /* @__PURE__ */ jsx16(Fragment5, { children: children({
       container: boundContainer,
       suggestion: sampleSuggestion,
       suggestions,
@@ -2757,7 +2835,7 @@ var CopilotChatSuggestionView_default = CopilotChatSuggestionView;
 
 // src/components/chat/CopilotChatMessageView.tsx
 import { twMerge as twMerge6 } from "tailwind-merge";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 function CopilotChatMessageView({
   messages = [],
   assistantMessage,
@@ -2769,6 +2847,7 @@ function CopilotChatMessageView({
   ...props
 }) {
   const renderCustomMessage = useRenderCustomMessages();
+  const renderActivityMessage = useRenderActivityMessage();
   const messageElements = messages.flatMap((message) => {
     const elements = [];
     if (renderCustomMessage) {
@@ -2795,6 +2874,11 @@ function CopilotChatMessageView({
           message
         })
       );
+    } else if (message.role === "activity") {
+      const renderedActivity = renderActivityMessage(message);
+      if (renderedActivity) {
+        elements.push(renderedActivity);
+      }
     }
     if (renderCustomMessage) {
       elements.push(
@@ -2815,7 +2899,7 @@ function CopilotChatMessageView({
   ] });
 }
 CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       className: twMerge6("w-[11px] h-[11px] rounded-full bg-foreground animate-pulse-cursor ml-1", className),
@@ -2872,7 +2956,7 @@ function useKeyboardHeight() {
 }
 
 // src/components/chat/CopilotChatView.tsx
-import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function CopilotChatView({
   messageView,
   input,
@@ -2950,9 +3034,9 @@ function CopilotChatView({
     scrollToBottomButton,
     inputContainerHeight,
     isResizing,
-    children: /* @__PURE__ */ jsx17("div", { style: { paddingBottom: `${inputContainerHeight + (hasSuggestions ? 4 : 32)}px` }, children: /* @__PURE__ */ jsxs10("div", { className: "max-w-3xl mx-auto", children: [
+    children: /* @__PURE__ */ jsx18("div", { style: { paddingBottom: `${inputContainerHeight + (hasSuggestions ? 4 : 32)}px` }, children: /* @__PURE__ */ jsxs10("div", { className: "max-w-3xl mx-auto", children: [
       BoundMessageView,
-      hasSuggestions ? /* @__PURE__ */ jsx17("div", { className: "pl-0 pr-4 sm:px-0 mt-4", children: BoundSuggestionView }) : null
+      hasSuggestions ? /* @__PURE__ */ jsx18("div", { className: "pl-0 pr-4 sm:px-0 mt-4", children: BoundSuggestionView }) : null
     ] }) })
   });
   const BoundScrollToBottomButton = renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, {});
@@ -2961,7 +3045,7 @@ function CopilotChatView({
     ref: inputContainerRef,
     keyboardHeight: isKeyboardOpen ? keyboardHeight : 0,
     children: /* @__PURE__ */ jsxs10(Fragment6, { children: [
-      /* @__PURE__ */ jsx17("div", { className: "max-w-3xl mx-auto py-0 px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6 pointer-events-auto", children: BoundInput }),
+      /* @__PURE__ */ jsx18("div", { className: "max-w-3xl mx-auto py-0 px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6 pointer-events-auto", children: BoundInput }),
       BoundDisclaimer
     ] })
   });
@@ -2974,7 +3058,7 @@ function CopilotChatView({
       feather: BoundFeather,
       inputContainer: BoundInputContainer,
       disclaimer: BoundDisclaimer,
-      suggestionView: BoundSuggestionView ?? /* @__PURE__ */ jsx17(Fragment6, {})
+      suggestionView: BoundSuggestionView ?? /* @__PURE__ */ jsx18(Fragment6, {})
     });
   }
   return /* @__PURE__ */ jsxs10("div", { className: twMerge7("relative h-full", className), ...props, children: [
@@ -2987,8 +3071,8 @@ function CopilotChatView({
   const ScrollContent = ({ children, scrollToBottomButton, inputContainerHeight, isResizing }) => {
     const { isAtBottom, scrollToBottom } = useStickToBottomContext();
     return /* @__PURE__ */ jsxs10(Fragment6, { children: [
-      /* @__PURE__ */ jsx17(StickToBottom.Content, { className: "overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ jsx17("div", { className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6", children }) }),
-      !isAtBottom && !isResizing && /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(StickToBottom.Content, { className: "overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ jsx18("div", { className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6", children }) }),
+      !isAtBottom && !isResizing && /* @__PURE__ */ jsx18(
         "div",
         {
           className: "absolute inset-x-0 flex justify-center z-10 pointer-events-none",
@@ -3035,7 +3119,7 @@ function CopilotChatView({
       };
     }, [scrollRef, autoScroll]);
     if (!hasMounted) {
-      return /* @__PURE__ */ jsx17("div", { className: "h-full max-h-full flex flex-col min-h-0 overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ jsx17("div", { className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6", children }) });
+      return /* @__PURE__ */ jsx18("div", { className: "h-full max-h-full flex flex-col min-h-0 overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ jsx18("div", { className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6", children }) });
     }
     if (!autoScroll) {
       return /* @__PURE__ */ jsxs10(
@@ -3048,8 +3132,8 @@ function CopilotChatView({
           ),
           ...props,
           children: [
-            /* @__PURE__ */ jsx17("div", { ref: contentRef, className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6", children }),
-            showScrollButton && !isResizing && /* @__PURE__ */ jsx17(
+            /* @__PURE__ */ jsx18("div", { ref: contentRef, className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6", children }),
+            showScrollButton && !isResizing && /* @__PURE__ */ jsx18(
               "div",
               {
                 className: "absolute inset-x-0 flex justify-center z-10 pointer-events-none",
@@ -3065,14 +3149,14 @@ function CopilotChatView({
         }
       );
     }
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       StickToBottom,
       {
         className: cn("h-full max-h-full flex flex-col min-h-0 relative", className),
         resize: "smooth",
         initial: "smooth",
         ...props,
-        children: /* @__PURE__ */ jsx17(
+        children: /* @__PURE__ */ jsx18(
           ScrollContent,
           {
             scrollToBottomButton,
@@ -3087,7 +3171,7 @@ function CopilotChatView({
   CopilotChatView2.ScrollToBottomButton = ({
     className,
     ...props
-  }) => /* @__PURE__ */ jsx17(
+  }) => /* @__PURE__ */ jsx18(
     Button,
     {
       variant: "outline",
@@ -3101,10 +3185,10 @@ function CopilotChatView({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx17(ChevronDown, { className: "w-4 h-4 text-gray-600 dark:text-white" })
+      children: /* @__PURE__ */ jsx18(ChevronDown, { className: "w-4 h-4 text-gray-600 dark:text-white" })
     }
   );
-  CopilotChatView2.Feather = ({ className, style, ...props }) => /* @__PURE__ */ jsx17(
+  CopilotChatView2.Feather = ({ className, style, ...props }) => /* @__PURE__ */ jsx18(
     "div",
     {
       className: cn(
@@ -3117,7 +3201,7 @@ function CopilotChatView({
       ...props
     }
   );
-  CopilotChatView2.InputContainer = React11.forwardRef(({ children, className, keyboardHeight = 0, ...props }, ref) => /* @__PURE__ */ jsx17(
+  CopilotChatView2.InputContainer = React11.forwardRef(({ children, className, keyboardHeight = 0, ...props }, ref) => /* @__PURE__ */ jsx18(
     "div",
     {
       ref,
@@ -3135,7 +3219,7 @@ function CopilotChatView({
   CopilotChatView2.Disclaimer = ({ className, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       "div",
       {
         className: cn("text-center text-xs text-muted-foreground py-3 px-4 max-w-3xl mx-auto", className),
@@ -3148,15 +3232,15 @@ function CopilotChatView({
 var CopilotChatView_default = CopilotChatView;
 
 // src/components/chat/CopilotChat.tsx
-import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID6, randomUUID as randomUUID2 } from "@copilotkitnext/shared";
-import { useCallback as useCallback6, useEffect as useEffect14, useMemo as useMemo7 } from "react";
+import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID7, randomUUID as randomUUID2 } from "@copilotkitnext/shared";
+import { useCallback as useCallback7, useEffect as useEffect14, useMemo as useMemo8 } from "react";
 import { merge } from "ts-deepmerge";
 import { AGUIConnectNotImplementedError } from "@ag-ui/client";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen, ...props }) {
   const existingConfig = useCopilotChatConfiguration();
-  const resolvedAgentId = agentId ?? existingConfig?.agentId ?? DEFAULT_AGENT_ID6;
-  const resolvedThreadId = useMemo7(
+  const resolvedAgentId = agentId ?? existingConfig?.agentId ?? DEFAULT_AGENT_ID7;
+  const resolvedThreadId = useMemo8(
     () => threadId ?? existingConfig?.threadId ?? randomUUID2(),
     [threadId, existingConfig?.threadId]
   );
@@ -3187,7 +3271,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     return () => {
     };
   }, [resolvedThreadId, agent, copilotkit, resolvedAgentId]);
-  const onSubmitInput = useCallback6(
+  const onSubmitInput = useCallback7(
     async (value) => {
       agent?.addMessage({
         id: randomUUID2(),
@@ -3204,7 +3288,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     },
     [agent, copilotkit]
   );
-  const handleSelectSuggestion = useCallback6(
+  const handleSelectSuggestion = useCallback7(
     async (suggestion) => {
       if (!agent) {
         return;
@@ -3222,7 +3306,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     },
     [agent, copilotkit]
   );
-  const stopCurrentRun = useCallback6(() => {
+  const stopCurrentRun = useCallback7(() => {
     if (!agent) {
       return;
     }
@@ -3265,7 +3349,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     inputProps: finalInputProps
   });
   const RenderedChatView = renderSlot(chatView, CopilotChatView, finalProps);
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     CopilotChatConfigurationProvider,
     {
       agentId: resolvedAgentId,
@@ -3283,15 +3367,15 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 // src/components/chat/CopilotChatToggleButton.tsx
 import React12, { useState as useState11 } from "react";
 import { MessageCircle, X as X2 } from "lucide-react";
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 var DefaultOpenIcon = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx19(MessageCircle, { className: cn("h-6 w-6", className), strokeWidth: 1.75, fill: "currentColor", ...props });
+}) => /* @__PURE__ */ jsx20(MessageCircle, { className: cn("h-6 w-6", className), strokeWidth: 1.75, fill: "currentColor", ...props });
 var DefaultCloseIcon = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx19(X2, { className: cn("h-6 w-6", className), strokeWidth: 1.75, ...props });
+}) => /* @__PURE__ */ jsx20(X2, { className: cn("h-6 w-6", className), strokeWidth: 1.75, ...props });
 DefaultOpenIcon.displayName = "CopilotChatToggleButton.OpenIcon";
 DefaultCloseIcon.displayName = "CopilotChatToggleButton.CloseIcon";
 var ICON_TRANSITION_STYLE = Object.freeze({
@@ -3346,7 +3430,7 @@ var CopilotChatToggleButton = React12.forwardRef(function CopilotChatToggleButto
       focusable: false
     }
   );
-  const openIconElement = /* @__PURE__ */ jsx19(
+  const openIconElement = /* @__PURE__ */ jsx20(
     "span",
     {
       "aria-hidden": "true",
@@ -3360,7 +3444,7 @@ var CopilotChatToggleButton = React12.forwardRef(function CopilotChatToggleButto
       children: renderedOpenIcon
     }
   );
-  const closeIconElement = /* @__PURE__ */ jsx19(
+  const closeIconElement = /* @__PURE__ */ jsx20(
     "span",
     {
       "aria-hidden": "true",
@@ -3401,9 +3485,9 @@ var CopilotChatToggleButton_default = CopilotChatToggleButton;
 import { useEffect as useEffect15, useRef as useRef8, useState as useState12 } from "react";
 
 // src/components/chat/CopilotModalHeader.tsx
-import { useCallback as useCallback7 } from "react";
+import { useCallback as useCallback8 } from "react";
 import { X as X3 } from "lucide-react";
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 function CopilotModalHeader({
   title,
   titleContent,
@@ -3415,7 +3499,7 @@ function CopilotModalHeader({
   const configuration = useCopilotChatConfiguration();
   const fallbackTitle = configuration?.labels.modalHeaderTitle ?? CopilotChatDefaultLabels.modalHeaderTitle;
   const resolvedTitle = title ?? fallbackTitle;
-  const handleClose = useCallback7(() => {
+  const handleClose = useCallback8(() => {
     configuration?.setModalOpen(false);
   }, [configuration]);
   const BoundTitle = renderSlot(titleContent, CopilotModalHeader.Title, {
@@ -3432,7 +3516,7 @@ function CopilotModalHeader({
       ...rest
     });
   }
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "header",
     {
       "data-slot": "copilot-modal-header",
@@ -3443,16 +3527,16 @@ function CopilotModalHeader({
       ),
       ...rest,
       children: /* @__PURE__ */ jsxs12("div", { className: "flex w-full items-center gap-2", children: [
-        /* @__PURE__ */ jsx20("div", { className: "flex-1", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx20("div", { className: "flex flex-1 justify-center text-center", children: BoundTitle }),
-        /* @__PURE__ */ jsx20("div", { className: "flex flex-1 justify-end", children: BoundCloseButton })
+        /* @__PURE__ */ jsx21("div", { className: "flex-1", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx21("div", { className: "flex flex-1 justify-center text-center", children: BoundTitle }),
+        /* @__PURE__ */ jsx21("div", { className: "flex flex-1 justify-end", children: BoundCloseButton })
       ] })
     }
   );
 }
 CopilotModalHeader.displayName = "CopilotModalHeader";
 ((CopilotModalHeader2) => {
-  CopilotModalHeader2.Title = ({ children, className, ...props }) => /* @__PURE__ */ jsx20(
+  CopilotModalHeader2.Title = ({ children, className, ...props }) => /* @__PURE__ */ jsx21(
     "div",
     {
       className: cn(
@@ -3466,7 +3550,7 @@ CopilotModalHeader.displayName = "CopilotModalHeader";
   CopilotModalHeader2.CloseButton = ({
     className,
     ...props
-  }) => /* @__PURE__ */ jsx20(
+  }) => /* @__PURE__ */ jsx21(
     "button",
     {
       type: "button",
@@ -3477,7 +3561,7 @@ CopilotModalHeader.displayName = "CopilotModalHeader";
       ),
       "aria-label": "Close",
       ...props,
-      children: /* @__PURE__ */ jsx20(X3, { className: "h-4 w-4", "aria-hidden": "true" })
+      children: /* @__PURE__ */ jsx21(X3, { className: "h-4 w-4", "aria-hidden": "true" })
     }
   );
 })(CopilotModalHeader || (CopilotModalHeader = {}));
@@ -3485,7 +3569,7 @@ CopilotModalHeader.Title.displayName = "CopilotModalHeader.Title";
 CopilotModalHeader.CloseButton.displayName = "CopilotModalHeader.CloseButton";
 
 // src/components/chat/CopilotSidebarView.tsx
-import { Fragment as Fragment7, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 var DEFAULT_SIDEBAR_WIDTH = 480;
 var SIDEBAR_TRANSITION_MS = 260;
 function CopilotSidebarView({ header, width, ...props }) {
@@ -3530,7 +3614,7 @@ function CopilotSidebarView({ header, width, ...props }) {
   }, [width]);
   const headerElement = renderSlot(header, CopilotModalHeader, {});
   return /* @__PURE__ */ jsxs13(Fragment7, { children: [
-    isSidebarOpen && /* @__PURE__ */ jsx21(
+    isSidebarOpen && /* @__PURE__ */ jsx22(
       "style",
       {
         dangerouslySetInnerHTML: {
@@ -3544,8 +3628,8 @@ function CopilotSidebarView({ header, width, ...props }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx21(CopilotChatToggleButton_default, {}),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(CopilotChatToggleButton_default, {}),
+    /* @__PURE__ */ jsx22(
       "aside",
       {
         ref: sidebarRef,
@@ -3572,7 +3656,7 @@ function CopilotSidebarView({ header, width, ...props }) {
         role: "complementary",
         children: /* @__PURE__ */ jsxs13("div", { className: "flex h-full w-full flex-col overflow-hidden", children: [
           headerElement,
-          /* @__PURE__ */ jsx21("div", { className: "flex-1 overflow-hidden", "data-sidebar-chat": true, children: /* @__PURE__ */ jsx21(CopilotChatView_default, { ...props }) })
+          /* @__PURE__ */ jsx22("div", { className: "flex-1 overflow-hidden", "data-sidebar-chat": true, children: /* @__PURE__ */ jsx22(CopilotChatView_default, { ...props }) })
         ] })
       }
     )
@@ -3581,8 +3665,8 @@ function CopilotSidebarView({ header, width, ...props }) {
 CopilotSidebarView.displayName = "CopilotSidebarView";
 
 // src/components/chat/CopilotPopupView.tsx
-import { useEffect as useEffect16, useMemo as useMemo8, useRef as useRef9, useState as useState13 } from "react";
-import { Fragment as Fragment8, jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useEffect as useEffect16, useMemo as useMemo9, useRef as useRef9, useState as useState13 } from "react";
+import { Fragment as Fragment8, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 var DEFAULT_POPUP_WIDTH = 420;
 var DEFAULT_POPUP_HEIGHT = 560;
 var dimensionToCss = (value, fallback) => {
@@ -3675,10 +3759,10 @@ function CopilotPopupView({
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
   }, [isPopupOpen, clickOutsideToClose, setModalOpen]);
-  const headerElement = useMemo8(() => renderSlot(header, CopilotModalHeader, {}), [header]);
+  const headerElement = useMemo9(() => renderSlot(header, CopilotModalHeader, {}), [header]);
   const resolvedWidth = dimensionToCss(width, DEFAULT_POPUP_WIDTH);
   const resolvedHeight = dimensionToCss(height, DEFAULT_POPUP_HEIGHT);
-  const popupStyle = useMemo8(
+  const popupStyle = useMemo9(
     () => ({
       "--copilot-popup-width": resolvedWidth,
       "--copilot-popup-height": resolvedHeight,
@@ -3692,7 +3776,7 @@ function CopilotPopupView({
     [resolvedHeight, resolvedWidth]
   );
   const popupAnimationClass = isPopupOpen && !isAnimatingOut ? "pointer-events-auto translate-y-0 opacity-100 md:scale-100" : "pointer-events-none translate-y-4 opacity-0 md:translate-y-5 md:scale-[0.95]";
-  const popupContent = isRendered ? /* @__PURE__ */ jsx22(
+  const popupContent = isRendered ? /* @__PURE__ */ jsx23(
     "div",
     {
       className: cn(
@@ -3720,7 +3804,7 @@ function CopilotPopupView({
           style: popupStyle,
           children: [
             headerElement,
-            /* @__PURE__ */ jsx22("div", { className: "flex-1 overflow-hidden", "data-popup-chat": true, children: /* @__PURE__ */ jsx22(
+            /* @__PURE__ */ jsx23("div", { className: "flex-1 overflow-hidden", "data-popup-chat": true, children: /* @__PURE__ */ jsx23(
               CopilotChatView_default,
               {
                 ...restProps,
@@ -3733,20 +3817,20 @@ function CopilotPopupView({
     }
   ) : null;
   return /* @__PURE__ */ jsxs14(Fragment8, { children: [
-    /* @__PURE__ */ jsx22(CopilotChatToggleButton_default, {}),
+    /* @__PURE__ */ jsx23(CopilotChatToggleButton_default, {}),
     popupContent
   ] });
 }
 CopilotPopupView.displayName = "CopilotPopupView";
 
 // src/components/chat/CopilotSidebar.tsx
-import { useMemo as useMemo9 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { useMemo as useMemo10 } from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
-  const SidebarViewOverride = useMemo9(() => {
+  const SidebarViewOverride = useMemo10(() => {
     const Component = (viewProps) => {
       const { header: viewHeader, width: viewWidth, ...restProps } = viewProps;
-      return /* @__PURE__ */ jsx23(
+      return /* @__PURE__ */ jsx24(
         CopilotSidebarView,
         {
           ...restProps,
@@ -3757,7 +3841,7 @@ function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
     };
     return Object.assign(Component, CopilotChatView_default);
   }, [header, width]);
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     CopilotChat,
     {
       ...chatProps,
@@ -3769,8 +3853,8 @@ function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
 CopilotSidebar.displayName = "CopilotSidebar";
 
 // src/components/chat/CopilotPopup.tsx
-import { useMemo as useMemo10 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { useMemo as useMemo11 } from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function CopilotPopup({
   header,
   defaultOpen,
@@ -3779,7 +3863,7 @@ function CopilotPopup({
   clickOutsideToClose,
   ...chatProps
 }) {
-  const PopupViewOverride = useMemo10(() => {
+  const PopupViewOverride = useMemo11(() => {
     const Component = (viewProps) => {
       const {
         header: viewHeader,
@@ -3788,7 +3872,7 @@ function CopilotPopup({
         clickOutsideToClose: viewClickOutsideToClose,
         ...restProps
       } = viewProps;
-      return /* @__PURE__ */ jsx24(
+      return /* @__PURE__ */ jsx25(
         CopilotPopupView,
         {
           ...restProps,
@@ -3801,7 +3885,7 @@ function CopilotPopup({
     };
     return Object.assign(Component, CopilotChatView_default);
   }, [clickOutsideToClose, header, height, width]);
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     CopilotChat,
     {
       ...chatProps,
@@ -3826,7 +3910,7 @@ function defineToolCallRenderer(def) {
 
 // src/components/WildcardToolCallRender.tsx
 import { useState as useState14 } from "react";
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 var WildcardToolCallRender = defineToolCallRenderer({
   name: "*",
   render: ({ args, result, name, status }) => {
@@ -3835,7 +3919,7 @@ var WildcardToolCallRender = defineToolCallRenderer({
     const isActive = statusString === "inProgress" || statusString === "executing";
     const isComplete = statusString === "complete";
     const statusStyles = isActive ? "bg-amber-100 text-amber-800 dark:bg-amber-500/15 dark:text-amber-400" : isComplete ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-500/15 dark:text-emerald-400" : "bg-zinc-100 text-zinc-800 dark:bg-zinc-700/40 dark:text-zinc-300";
-    return /* @__PURE__ */ jsx25("div", { className: "mt-2 pb-2", children: /* @__PURE__ */ jsxs15("div", { className: "rounded-xl border border-zinc-200/60 dark:border-zinc-800/60 bg-white/70 dark:bg-zinc-900/50 shadow-sm backdrop-blur p-4", children: [
+    return /* @__PURE__ */ jsx26("div", { className: "mt-2 pb-2", children: /* @__PURE__ */ jsxs15("div", { className: "rounded-xl border border-zinc-200/60 dark:border-zinc-800/60 bg-white/70 dark:bg-zinc-900/50 shadow-sm backdrop-blur p-4", children: [
       /* @__PURE__ */ jsxs15(
         "div",
         {
@@ -3843,7 +3927,7 @@ var WildcardToolCallRender = defineToolCallRenderer({
           onClick: () => setIsExpanded(!isExpanded),
           children: [
             /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 min-w-0", children: [
-              /* @__PURE__ */ jsx25(
+              /* @__PURE__ */ jsx26(
                 "svg",
                 {
                   className: `h-4 w-4 text-zinc-500 dark:text-zinc-400 transition-transform ${isExpanded ? "rotate-90" : ""}`,
@@ -3851,7 +3935,7 @@ var WildcardToolCallRender = defineToolCallRenderer({
                   viewBox: "0 0 24 24",
                   strokeWidth: 2,
                   stroke: "currentColor",
-                  children: /* @__PURE__ */ jsx25(
+                  children: /* @__PURE__ */ jsx26(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -3861,10 +3945,10 @@ var WildcardToolCallRender = defineToolCallRenderer({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx25("span", { className: "inline-block h-2 w-2 rounded-full bg-blue-500" }),
-              /* @__PURE__ */ jsx25("span", { className: "truncate text-sm font-medium text-zinc-900 dark:text-zinc-100", children: name })
+              /* @__PURE__ */ jsx26("span", { className: "inline-block h-2 w-2 rounded-full bg-blue-500" }),
+              /* @__PURE__ */ jsx26("span", { className: "truncate text-sm font-medium text-zinc-900 dark:text-zinc-100", children: name })
             ] }),
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx26(
               "span",
               {
                 className: `inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${statusStyles}`,
@@ -3876,12 +3960,12 @@ var WildcardToolCallRender = defineToolCallRenderer({
       ),
       isExpanded && /* @__PURE__ */ jsxs15("div", { className: "mt-3 grid gap-4", children: [
         /* @__PURE__ */ jsxs15("div", { children: [
-          /* @__PURE__ */ jsx25("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Arguments" }),
-          /* @__PURE__ */ jsx25("pre", { className: "mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words", children: JSON.stringify(args ?? {}, null, 2) })
+          /* @__PURE__ */ jsx26("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Arguments" }),
+          /* @__PURE__ */ jsx26("pre", { className: "mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words", children: JSON.stringify(args ?? {}, null, 2) })
         ] }),
         result !== void 0 && /* @__PURE__ */ jsxs15("div", { children: [
-          /* @__PURE__ */ jsx25("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Result" }),
-          /* @__PURE__ */ jsx25("pre", { className: "mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words", children: typeof result === "string" ? result : JSON.stringify(result, null, 2) })
+          /* @__PURE__ */ jsx26("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Result" }),
+          /* @__PURE__ */ jsx26("pre", { className: "mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words", children: typeof result === "string" ? result : JSON.stringify(result, null, 2) })
         ] })
       ] })
     ] }) });
@@ -3920,6 +4004,7 @@ export {
   useCopilotKit,
   useFrontendTool,
   useHumanInTheLoop,
+  useRenderActivityMessage,
   useRenderCustomMessages,
   useRenderToolCall,
   useSuggestions