@copilotkitnext/react 0.0.13-alpha.0 → 0.0.13

package/dist/index.mjs

@@ -1,3 +1,5 @@
+"use client";
+
 // src/components/chat/CopilotChatInput.tsx
 import { useState as useState2, useRef as useRef2, useEffect as useEffect2, forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle2 } from "react";
 import { twMerge as twMerge3 } from "tailwind-merge";
@@ -899,26 +901,100 @@ import "katex/dist/katex.min.css";
 import { completePartialMarkdown } from "@copilotkitnext/core";
 
 // src/hooks/use-render-tool-call.tsx
-import { useCallback, useEffect as useEffect4, useState as useState4 } from "react";
+import { useCallback, useEffect as useEffect5, useState as useState4, useSyncExternalStore } from "react";
 import { ToolCallStatus } from "@copilotkitnext/core";
 
 // src/providers/CopilotKitProvider.tsx
-import { createContext as createContext2, useContext as useContext2, useMemo as useMemo2, useEffect as useEffect3, useState as useState3, useReducer, useRef as useRef3 } from "react";
+import {
+  createContext as createContext2,
+  useContext as useContext2,
+  useMemo as useMemo2,
+  useEffect as useEffect4,
+  useReducer,
+  useRef as useRef4,
+  useState as useState3
+} from "react";
 import { z } from "zod";
+
+// src/lib/react-core.ts
 import { CopilotKitCore } from "@copilotkitnext/core";
+var CopilotKitCoreReact = class extends CopilotKitCore {
+  _renderToolCalls = [];
+  _renderCustomMessages = [];
+  constructor(config) {
+    super(config);
+    this._renderToolCalls = config.renderToolCalls ?? [];
+    this._renderCustomMessages = config.renderCustomMessages ?? [];
+  }
+  get renderCustomMessages() {
+    return this._renderCustomMessages;
+  }
+  get renderToolCalls() {
+    return this._renderToolCalls;
+  }
+  setRenderToolCalls(renderToolCalls) {
+    this._renderToolCalls = renderToolCalls;
+    void this.notifySubscribers(
+      (subscriber) => {
+        const reactSubscriber = subscriber;
+        if (reactSubscriber.onRenderToolCallsChanged) {
+          reactSubscriber.onRenderToolCallsChanged({
+            copilotkit: this,
+            renderToolCalls: this.renderToolCalls
+          });
+        }
+      },
+      "Subscriber onRenderToolCallsChanged error:"
+    );
+  }
+  // Override to accept React-specific subscriber type
+  subscribe(subscriber) {
+    return super.subscribe(subscriber);
+  }
+  unsubscribe(subscriber) {
+    super.unsubscribe(subscriber);
+  }
+};
+
+// src/components/WebInspector.tsx
+import * as React4 from "react";
+import { createComponent } from "@lit-labs/react";
+import {
+  WEB_INSPECTOR_TAG,
+  WebInspectorElement,
+  defineWebInspector
+} from "@copilotkitnext/web-inspector";
 import { jsx as jsx7 } from "react/jsx-runtime";
-var CopilotKitContext = createContext2({
-  copilotkit: null,
-  renderToolCalls: [],
-  currentRenderToolCalls: [],
-  setCurrentRenderToolCalls: () => {
+defineWebInspector();
+var WebInspectorBase = createComponent({
+  tagName: WEB_INSPECTOR_TAG,
+  elementClass: WebInspectorElement,
+  react: React4
+});
+var WebInspector = React4.forwardRef(
+  ({ core, ...rest }, ref) => {
+    const innerRef = React4.useRef(null);
+    React4.useImperativeHandle(ref, () => innerRef.current, []);
+    React4.useEffect(() => {
+      if (innerRef.current) {
+        innerRef.current.core = core ?? null;
+      }
+    }, [core]);
+    return /* @__PURE__ */ jsx7(WebInspectorBase, { ...rest, ref: innerRef });
   }
+);
+WebInspector.displayName = "WebInspector";
+
+// src/providers/CopilotKitProvider.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var CopilotKitContext = createContext2({
+  copilotkit: null
 });
 function useStableArrayProp(prop, warningMessage, isMeaningfulChange) {
   const empty = useMemo2(() => [], []);
   const value = prop ?? empty;
-  const initial = useRef3(value);
-  useEffect3(() => {
+  const initial = useRef4(value);
+  useEffect4(() => {
     if (warningMessage && value !== initial.current && (isMeaningfulChange ? isMeaningfulChange(initial.current, value) : true)) {
       console.error(warningMessage);
     }
@@ -932,9 +1008,29 @@ var CopilotKitProvider = ({
   properties = {},
   agents__unsafe_dev_only: agents = {},
   renderToolCalls,
+  renderCustomMessages,
   frontendTools,
-  humanInTheLoop
+  humanInTheLoop,
+  showDevConsole = false
 }) => {
+  const [shouldRenderInspector, setShouldRenderInspector] = useState3(false);
+  useEffect4(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    if (showDevConsole === true) {
+      setShouldRenderInspector(true);
+    } else if (showDevConsole === "auto") {
+      const localhostHosts = /* @__PURE__ */ new Set(["localhost", "127.0.0.1"]);
+      if (localhostHosts.has(window.location.hostname)) {
+        setShouldRenderInspector(true);
+      } else {
+        setShouldRenderInspector(false);
+      }
+    } else {
+      setShouldRenderInspector(false);
+    }
+  }, [showDevConsole]);
   const renderToolCallsList = useStableArrayProp(
     renderToolCalls,
     "renderToolCalls must be a stable array. If you want to dynamically add or remove tools, use `useFrontendTool` instead.",
@@ -948,6 +1044,10 @@ var CopilotKitProvider = ({
       return false;
     }
   );
+  const renderCustomMessagesList = useStableArrayProp(
+    renderCustomMessages,
+    "renderCustomMessages 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."
@@ -956,8 +1056,6 @@ var CopilotKitProvider = ({
     humanInTheLoop,
     "humanInTheLoop must be a stable array. If you want to dynamically add or remove human-in-the-loop tools, use `useHumanInTheLoop` instead."
   );
-  const initialRenderToolCalls = useMemo2(() => renderToolCallsList, []);
-  const [currentRenderToolCalls, setCurrentRenderToolCalls] = useState3([]);
   const processedHumanInTheLoopTools = useMemo2(() => {
     const processedTools = [];
     const processedRenderToolCalls = [];
@@ -1011,58 +1109,44 @@ var CopilotKitProvider = ({
     return combined;
   }, [renderToolCallsList, frontendToolsList, processedHumanInTheLoopTools]);
   const copilotkit = useMemo2(() => {
-    const config = {
+    const copilotkit2 = new CopilotKitCoreReact({
       runtimeUrl,
       headers,
       properties,
       agents__unsafe_dev_only: agents,
-      tools: allTools
-    };
-    const copilotkit2 = new CopilotKitCore(config);
+      tools: allTools,
+      renderToolCalls: allRenderToolCalls,
+      renderCustomMessages: renderCustomMessagesList
+    });
     return copilotkit2;
-  }, [allTools]);
-  useEffect3(() => {
-    setCurrentRenderToolCalls((prev) => {
-      const keyOf = (rc) => `${rc?.agentId ?? ""}:${rc?.name ?? ""}`;
-      const computedMap = /* @__PURE__ */ new Map();
-      for (const rc of allRenderToolCalls) {
-        computedMap.set(keyOf(rc), rc);
-      }
-      const merged = [...computedMap.values()];
-      for (const rc of prev) {
-        const k = keyOf(rc);
-        if (!computedMap.has(k)) merged.push(rc);
-      }
-      const sameLength = merged.length === prev.length;
-      if (sameLength) {
-        let same = true;
-        for (let i = 0; i < merged.length; i++) {
-          if (merged[i] !== prev[i]) {
-            same = false;
-            break;
-          }
-        }
-        if (same) return prev;
+  }, [allTools, allRenderToolCalls, renderCustomMessagesList]);
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+  useEffect4(() => {
+    const unsubscribe = copilotkit.subscribe({
+      onRenderToolCallsChanged: () => {
+        forceUpdate();
       }
-      return merged;
     });
-  }, [allRenderToolCalls]);
-  useEffect3(() => {
+    return () => {
+      unsubscribe();
+    };
+  }, [copilotkit]);
+  useEffect4(() => {
     copilotkit.setRuntimeUrl(runtimeUrl);
     copilotkit.setHeaders(headers);
     copilotkit.setProperties(properties);
     copilotkit.setAgents__unsafe_dev_only(agents);
   }, [runtimeUrl, headers, properties, agents]);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs4(
     CopilotKitContext.Provider,
     {
       value: {
-        copilotkit,
-        renderToolCalls: allRenderToolCalls,
-        currentRenderToolCalls,
-        setCurrentRenderToolCalls
+        copilotkit
       },
-      children
+      children: [
+        children,
+        shouldRenderInspector ? /* @__PURE__ */ jsx8(WebInspector, { core: copilotkit }) : null
+      ]
     }
   );
 };
@@ -1072,7 +1156,7 @@ var useCopilotKit = () => {
   if (!context) {
     throw new Error("useCopilotKit must be used within CopilotKitProvider");
   }
-  useEffect3(() => {
+  useEffect4(() => {
     const unsubscribe = context.copilotkit.subscribe({
       onRuntimeConnectionStatusChanged: () => {
         forceUpdate();
@@ -1088,13 +1172,22 @@ var useCopilotKit = () => {
 // src/hooks/use-render-tool-call.tsx
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID2 } from "@copilotkitnext/shared";
 import { partialJSONParse } from "@copilotkitnext/shared";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function useRenderToolCall() {
-  const { currentRenderToolCalls, copilotkit } = useCopilotKit();
+  const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
   const agentId = config?.agentId ?? DEFAULT_AGENT_ID2;
   const [executingToolCallIds, setExecutingToolCallIds] = useState4(() => /* @__PURE__ */ new Set());
-  useEffect4(() => {
+  const renderToolCalls = useSyncExternalStore(
+    (callback) => {
+      return copilotkit.subscribe({
+        onRenderToolCallsChanged: callback
+      });
+    },
+    () => copilotkit.renderToolCalls,
+    () => copilotkit.renderToolCalls
+  );
+  useEffect5(() => {
     const unsubscribe = copilotkit.subscribe({
       onToolExecutionStart: ({ toolCallId }) => {
         setExecutingToolCallIds((prev) => {
@@ -1120,10 +1213,10 @@ function useRenderToolCall() {
       toolCall,
       toolMessage
     }) => {
-      const exactMatches = currentRenderToolCalls.filter(
+      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] || currentRenderToolCalls.find((rc) => rc.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;
       }
@@ -1131,7 +1224,7 @@ function useRenderToolCall() {
       const args = partialJSONParse(toolCall.function.arguments);
       const toolName = toolCall.function.name;
       if (toolMessage) {
-        return /* @__PURE__ */ jsx8(
+        return /* @__PURE__ */ jsx9(
           RenderComponent,
           {
             name: toolName,
@@ -1142,7 +1235,7 @@ function useRenderToolCall() {
           toolCall.id
         );
       } else if (executingToolCallIds.has(toolCall.id)) {
-        return /* @__PURE__ */ jsx8(
+        return /* @__PURE__ */ jsx9(
           RenderComponent,
           {
             name: toolName,
@@ -1153,7 +1246,7 @@ function useRenderToolCall() {
           toolCall.id
         );
       } else {
-        return /* @__PURE__ */ jsx8(
+        return /* @__PURE__ */ jsx9(
           RenderComponent,
           {
             name: toolName,
@@ -1165,16 +1258,74 @@ function useRenderToolCall() {
         );
       }
     },
-    [currentRenderToolCalls, executingToolCallIds, agentId]
+    [renderToolCalls, executingToolCallIds, agentId]
   );
   return renderToolCall;
 }
 
+// src/hooks/use-render-custom-messages.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function useRenderCustomMessages() {
+  const { copilotkit } = useCopilotKit();
+  const config = useCopilotChatConfiguration();
+  if (!config) {
+    return null;
+  }
+  const { agentId, threadId } = config;
+  const customMessageRenderers = copilotkit.renderCustomMessages.filter((renderer) => renderer.agentId === void 0 || renderer.agentId === agentId).sort((a, b) => {
+    const aHasAgent = a.agentId !== void 0;
+    const bHasAgent = b.agentId !== void 0;
+    if (aHasAgent === bHasAgent) return 0;
+    return aHasAgent ? -1 : 1;
+  });
+  return function(params) {
+    if (!customMessageRenderers.length) {
+      return null;
+    }
+    const { message, position } = params;
+    const runId = copilotkit.getRunIdForMessage(agentId, threadId, message.id);
+    const agent = copilotkit.getAgent(agentId);
+    if (!agent) {
+      throw new Error("Agent not found");
+    }
+    const messagesIdsInRun = agent.messages.filter((msg) => copilotkit.getRunIdForMessage(agentId, threadId, msg.id) === runId).map((msg) => msg.id);
+    const messageIndex = agent.messages.findIndex((msg) => msg.id === message.id) ?? 0;
+    const messageIndexInRun = Math.min(messagesIdsInRun.indexOf(message.id), 0);
+    const numberOfMessagesInRun = messagesIdsInRun.length;
+    const stateSnapshot = copilotkit.getStateByRun(agentId, threadId, runId);
+    let result = null;
+    for (const renderer of customMessageRenderers) {
+      if (!renderer.render) {
+        continue;
+      }
+      const Component = renderer.render;
+      result = /* @__PURE__ */ jsx10(
+        Component,
+        {
+          message,
+          position,
+          runId,
+          messageIndex,
+          messageIndexInRun,
+          numberOfMessagesInRun,
+          agentId,
+          stateSnapshot
+        },
+        `${runId}-${message.id}-${position}`
+      );
+      if (result) {
+        break;
+      }
+    }
+    return result;
+  };
+}
+
 // src/hooks/use-frontend-tool.tsx
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 function useFrontendTool(tool) {
-  const { copilotkit, setCurrentRenderToolCalls } = useCopilotKit();
-  useEffect5(() => {
+  const { copilotkit } = useCopilotKit();
+  useEffect6(() => {
     const name = tool.name;
     if (copilotkit.getTool({ toolName: name, agentId: tool.agentId })) {
       console.warn(
@@ -1184,37 +1335,37 @@ function useFrontendTool(tool) {
     }
     copilotkit.addTool(tool);
     if (tool.render) {
-      setCurrentRenderToolCalls((prev) => {
-        const replaced = prev.filter(
-          (rc) => !(rc.name === name && rc.agentId === tool.agentId)
-        );
-        return [
-          ...replaced,
-          {
-            name,
-            args: tool.parameters,
-            agentId: tool.agentId,
-            render: tool.render
-          }
-        ];
-      });
+      const keyOf = (rc) => `${rc.agentId ?? ""}:${rc.name}`;
+      const currentRenderToolCalls = copilotkit.renderToolCalls;
+      const mergedMap = /* @__PURE__ */ new Map();
+      for (const rc of currentRenderToolCalls) {
+        mergedMap.set(keyOf(rc), rc);
+      }
+      const newEntry = {
+        name,
+        args: tool.parameters,
+        agentId: tool.agentId,
+        render: tool.render
+      };
+      mergedMap.set(keyOf(newEntry), newEntry);
+      copilotkit.setRenderToolCalls(Array.from(mergedMap.values()));
     }
     return () => {
       copilotkit.removeTool(name, tool.agentId);
     };
-  }, [tool.name, copilotkit, setCurrentRenderToolCalls]);
+  }, [tool.name, copilotkit]);
 }
 
 // src/hooks/use-human-in-the-loop.tsx
-import { useState as useState5, useCallback as useCallback2, useRef as useRef4, useEffect as useEffect6 } from "react";
-import React6 from "react";
+import { useState as useState5, useCallback as useCallback2, useRef as useRef5, useEffect as useEffect7 } from "react";
+import React7 from "react";
 function useHumanInTheLoop(tool) {
+  const { copilotkit } = useCopilotKit();
   const [status, setStatus] = useState5(
     "inProgress"
   );
-  const statusRef = useRef4(status);
-  const resolvePromiseRef = useRef4(null);
-  const { setCurrentRenderToolCalls } = useCopilotKit();
+  const statusRef = useRef5(status);
+  const resolvePromiseRef = useRef5(null);
   statusRef.current = status;
   const respond = useCallback2(async (result) => {
     if (resolvePromiseRef.current) {
@@ -1240,7 +1391,7 @@ function useHumanInTheLoop(tool) {
           description: tool.description || "",
           respond: void 0
         };
-        return React6.createElement(ToolComponent, enhancedProps);
+        return React7.createElement(ToolComponent, enhancedProps);
       } else if (currentStatus === "executing" && props.status === "executing") {
         const enhancedProps = {
           ...props,
@@ -1248,7 +1399,7 @@ function useHumanInTheLoop(tool) {
           description: tool.description || "",
           respond
         };
-        return React6.createElement(ToolComponent, enhancedProps);
+        return React7.createElement(ToolComponent, enhancedProps);
       } else if (currentStatus === "complete" && props.status === "complete") {
         const enhancedProps = {
           ...props,
@@ -1256,9 +1407,9 @@ function useHumanInTheLoop(tool) {
           description: tool.description || "",
           respond: void 0
         };
-        return React6.createElement(ToolComponent, enhancedProps);
+        return React7.createElement(ToolComponent, enhancedProps);
       }
-      return React6.createElement(ToolComponent, props);
+      return React7.createElement(ToolComponent, props);
     },
     [tool.render, tool.name, tool.description, respond]
   );
@@ -1268,19 +1419,20 @@ function useHumanInTheLoop(tool) {
     render: RenderComponent
   };
   useFrontendTool(frontendTool);
-  useEffect6(() => {
+  useEffect7(() => {
     return () => {
-      setCurrentRenderToolCalls(
-        (prev) => prev.filter(
-          (rc) => rc.name !== tool.name || rc.agentId !== tool.agentId
-        )
+      const keyOf = (rc) => `${rc.agentId ?? ""}:${rc.name}`;
+      const currentRenderToolCalls = copilotkit.renderToolCalls;
+      const filtered = currentRenderToolCalls.filter(
+        (rc) => keyOf(rc) !== keyOf({ name: tool.name, agentId: tool.agentId })
       );
+      copilotkit.setRenderToolCalls(filtered);
     };
-  }, [setCurrentRenderToolCalls, tool.name, tool.agentId]);
+  }, [copilotkit, tool.name, tool.agentId]);
 }
 
 // src/hooks/use-agent.tsx
-import { useMemo as useMemo3, useEffect as useEffect7, useReducer as useReducer2 } from "react";
+import { useMemo as useMemo3, useEffect as useEffect8, useReducer as useReducer2 } from "react";
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID3 } from "@copilotkitnext/shared";
 var ALL_UPDATES = [
   "OnMessagesChanged" /* OnMessagesChanged */,
@@ -1303,7 +1455,7 @@ function useAgent({ agentId, updates } = {}) {
     copilotkit.runtimeConnectionStatus,
     copilotkit
   ]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!agent) {
       return;
     }
@@ -1341,11 +1493,11 @@ function useAgent({ agentId, updates } = {}) {
 }
 
 // src/hooks/use-agent-context.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 function useAgentContext(context) {
   const { description, value } = context;
   const { copilotkit } = useCopilotKit();
-  useEffect8(() => {
+  useEffect9(() => {
     if (!copilotkit) return;
     const id = copilotkit.addContext(context);
     return () => {
@@ -1355,7 +1507,7 @@ function useAgentContext(context) {
 }
 
 // src/hooks/use-suggestions.tsx
-import { useCallback as useCallback3, useEffect as useEffect9, useMemo as useMemo4, useState as useState6 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect10, useMemo as useMemo4, useState as useState6 } from "react";
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID4 } from "@copilotkitnext/shared";
 function useSuggestions({ agentId } = {}) {
   const { copilotkit } = useCopilotKit();
@@ -1369,12 +1521,12 @@ function useSuggestions({ agentId } = {}) {
     const result = copilotkit.getSuggestions(resolvedAgentId);
     return result.isLoading;
   });
-  useEffect9(() => {
+  useEffect10(() => {
     const result = copilotkit.getSuggestions(resolvedAgentId);
     setSuggestions(result.suggestions);
     setIsLoading(result.isLoading);
   }, [copilotkit, resolvedAgentId]);
-  useEffect9(() => {
+  useEffect10(() => {
     const unsubscribe = copilotkit.subscribe({
       onSuggestionsChanged: ({ agentId: changedAgentId, suggestions: suggestions2 }) => {
         if (changedAgentId !== resolvedAgentId) {
@@ -1419,7 +1571,7 @@ function useSuggestions({ agentId } = {}) {
 }
 
 // src/hooks/use-configure-suggestions.tsx
-import { useCallback as useCallback4, useEffect as useEffect10, useMemo as useMemo5, useRef as useRef5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect11, useMemo as useMemo5, useRef as useRef6 } from "react";
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID5 } from "@copilotkitnext/shared";
 var EMPTY_DEPS = [];
 function useConfigureSuggestions(config, options) {
@@ -1428,7 +1580,7 @@ function useConfigureSuggestions(config, options) {
   const extraDeps = options?.deps ?? EMPTY_DEPS;
   const resolvedConsumerAgentId = useMemo5(() => chatConfig?.agentId ?? DEFAULT_AGENT_ID5, [chatConfig?.agentId]);
   const rawConsumerAgentId = useMemo5(() => config ? config.consumerAgentId : void 0, [config]);
-  const normalizationCacheRef = useRef5({
+  const normalizationCacheRef = useRef6({
     serialized: null,
     config: null
   });
@@ -1462,9 +1614,9 @@ function useConfigureSuggestions(config, options) {
     normalizationCacheRef.current = { serialized, config: built };
     return { normalizedConfig: built, serializedConfig: serialized };
   }, [config, resolvedConsumerAgentId, ...extraDeps]);
-  const latestConfigRef = useRef5(null);
+  const latestConfigRef = useRef6(null);
   latestConfigRef.current = normalizedConfig;
-  const previousSerializedConfigRef = useRef5(null);
+  const previousSerializedConfigRef = useRef6(null);
   const targetAgentId = useMemo5(() => {
     if (!normalizedConfig) {
       return resolvedConsumerAgentId;
@@ -1498,7 +1650,7 @@ function useConfigureSuggestions(config, options) {
     }
     copilotkit.reloadSuggestions(targetAgentId);
   }, [copilotkit, isGlobalConfig, normalizedConfig, targetAgentId]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!serializedConfig || !latestConfigRef.current) {
       return;
     }
@@ -1508,7 +1660,7 @@ function useConfigureSuggestions(config, options) {
       copilotkit.removeSuggestionsConfig(id);
     };
   }, [copilotkit, serializedConfig, requestReload]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!normalizedConfig) {
       previousSerializedConfigRef.current = null;
       return;
@@ -1521,7 +1673,7 @@ function useConfigureSuggestions(config, options) {
     }
     requestReload();
   }, [normalizedConfig, requestReload, serializedConfig]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!normalizedConfig || extraDeps.length === 0) {
       return;
     }
@@ -1539,8 +1691,8 @@ function normalizeStaticSuggestions(suggestions) {
 }
 
 // src/components/chat/CopilotChatToolCallsView.tsx
-import React7 from "react";
-import { Fragment as Fragment2, jsx as jsx9 } from "react/jsx-runtime";
+import React8 from "react";
+import { Fragment as Fragment2, jsx as jsx11 } from "react/jsx-runtime";
 function CopilotChatToolCallsView({
   message,
   messages = []
@@ -1549,11 +1701,11 @@ function CopilotChatToolCallsView({
   if (!message.toolCalls || message.toolCalls.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx9(Fragment2, { children: message.toolCalls.map((toolCall) => {
+  return /* @__PURE__ */ jsx11(Fragment2, { children: message.toolCalls.map((toolCall) => {
     const toolMessage = messages.find(
       (m) => m.role === "tool" && m.toolCallId === toolCall.id
     );
-    return /* @__PURE__ */ jsx9(React7.Fragment, { children: renderToolCall({
+    return /* @__PURE__ */ jsx11(React8.Fragment, { children: renderToolCall({
       toolCall,
       toolMessage
     }) }, toolCall.id);
@@ -1562,7 +1714,7 @@ function CopilotChatToolCallsView({
 var CopilotChatToolCallsView_default = CopilotChatToolCallsView;
 
 // src/components/chat/CopilotChatAssistantMessage.tsx
-import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 function CopilotChatAssistantMessage({
   message,
   messages,
@@ -1639,7 +1791,7 @@ function CopilotChatAssistantMessage({
     toolbar,
     CopilotChatAssistantMessage.Toolbar,
     {
-      children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1", children: [
+      children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1", children: [
         boundCopyButton,
         (onThumbsUp || thumbsUpButton) && boundThumbsUpButton,
         (onThumbsDown || thumbsDownButton) && boundThumbsDownButton,
@@ -1660,7 +1812,7 @@ function CopilotChatAssistantMessage({
   const hasContent = !!(message.content && message.content.trim().length > 0);
   const shouldShowToolbar = toolbarVisible && hasContent;
   if (children) {
-    return /* @__PURE__ */ jsx10(Fragment3, { children: children({
+    return /* @__PURE__ */ jsx12(Fragment3, { children: children({
       markdownRenderer: boundMarkdownRenderer,
       toolbar: boundToolbar,
       toolCallsView: boundToolCallsView,
@@ -1680,7 +1832,7 @@ function CopilotChatAssistantMessage({
       toolbarVisible: shouldShowToolbar
     }) });
   }
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className: twMerge4(
@@ -1702,7 +1854,7 @@ function CopilotChatAssistantMessage({
     children,
     ...props
   }) => {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx12(
       "code",
       {
         className: "px-[4.8px] py-[2.5px] bg-[rgb(236,236,236)] dark:bg-gray-800 rounded text-sm font-mono font-medium! text-foreground!",
@@ -1735,10 +1887,10 @@ function CopilotChatAssistantMessage({
         console.error("Failed to copy code:", err);
       }
     };
-    return /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between px-4 pr-3 py-3 text-xs", children: [
-        language && /* @__PURE__ */ jsx10("span", { className: "font-regular text-muted-foreground dark:text-white", children: language }),
-        /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between px-4 pr-3 py-3 text-xs", children: [
+        language && /* @__PURE__ */ jsx12("span", { className: "font-regular text-muted-foreground dark:text-white", children: language }),
+        /* @__PURE__ */ jsxs5(
           "button",
           {
             className: cn(
@@ -1747,13 +1899,13 @@ function CopilotChatAssistantMessage({
             onClick: copyToClipboard,
             title: copied ? labels.assistantMessageToolbarCopyCodeCopiedLabel : `${labels.assistantMessageToolbarCopyCodeLabel} code`,
             children: [
-              copied ? /* @__PURE__ */ jsx10(Check2, { className: "h-[10px]! w-[10px]!" }) : /* @__PURE__ */ jsx10(Copy, { className: "h-[10px]! w-[10px]!" }),
-              /* @__PURE__ */ jsx10("span", { className: "text-[11px]", children: copied ? labels.assistantMessageToolbarCopyCodeCopiedLabel : labels.assistantMessageToolbarCopyCodeLabel })
+              copied ? /* @__PURE__ */ jsx12(Check2, { className: "h-[10px]! w-[10px]!" }) : /* @__PURE__ */ jsx12(Copy, { className: "h-[10px]! w-[10px]!" }),
+              /* @__PURE__ */ jsx12("span", { className: "text-[11px]", children: copied ? labels.assistantMessageToolbarCopyCodeCopiedLabel : labels.assistantMessageToolbarCopyCodeLabel })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx12(
         "pre",
         {
           className: cn(
@@ -1766,7 +1918,7 @@ function CopilotChatAssistantMessage({
       )
     ] });
   };
-  CopilotChatAssistantMessage2.MarkdownRenderer = ({ content, className }) => /* @__PURE__ */ jsx10("div", { className, children: /* @__PURE__ */ jsx10(
+  CopilotChatAssistantMessage2.MarkdownRenderer = ({ content, className }) => /* @__PURE__ */ jsx12("div", { className, children: /* @__PURE__ */ jsx12(
     MarkdownHooks,
     {
       remarkPlugins: [remarkGfm, remarkMath],
@@ -1789,9 +1941,9 @@ function CopilotChatAssistantMessage({
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         code: ({ className: className2, children, ...props }) => {
           if (typeof children === "string") {
-            return /* @__PURE__ */ jsx10(InlineCode, { ...props, children });
+            return /* @__PURE__ */ jsx12(InlineCode, { ...props, children });
           }
-          return /* @__PURE__ */ jsx10("code", { className: className2, ...props, children });
+          return /* @__PURE__ */ jsx12("code", { className: className2, ...props, children });
         }
       },
       children: completePartialMarkdown(content || "")
@@ -1800,7 +1952,7 @@ function CopilotChatAssistantMessage({
   CopilotChatAssistantMessage2.Toolbar = ({
     className,
     ...props
-  }) => /* @__PURE__ */ jsx10(
+  }) => /* @__PURE__ */ jsx12(
     "div",
     {
       className: twMerge4(
@@ -1811,8 +1963,8 @@ function CopilotChatAssistantMessage({
     }
   );
   CopilotChatAssistantMessage2.ToolbarButton = ({ title, children, ...props }) => {
-    return /* @__PURE__ */ jsxs4(Tooltip, { children: [
-      /* @__PURE__ */ jsx10(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsxs5(Tooltip, { children: [
+      /* @__PURE__ */ jsx12(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx12(
         Button,
         {
           type: "button",
@@ -1822,7 +1974,7 @@ function CopilotChatAssistantMessage({
           children
         }
       ) }),
-      /* @__PURE__ */ jsx10(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx10("p", { children: title }) })
+      /* @__PURE__ */ jsx12(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx12("p", { children: title }) })
     ] });
   };
   CopilotChatAssistantMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
@@ -1836,62 +1988,62 @@ function CopilotChatAssistantMessage({
         onClick(event);
       }
     };
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx12(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
         title: title || labels.assistantMessageToolbarCopyMessageLabel,
         onClick: handleClick,
         className,
         ...props,
-        children: copied ? /* @__PURE__ */ jsx10(Check2, { className: "size-[18px]" }) : /* @__PURE__ */ jsx10(Copy, { className: "size-[18px]" })
+        children: copied ? /* @__PURE__ */ jsx12(Check2, { className: "size-[18px]" }) : /* @__PURE__ */ jsx12(Copy, { className: "size-[18px]" })
       }
     );
   };
   CopilotChatAssistantMessage2.ThumbsUpButton = ({ title, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx12(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
         title: title || labels.assistantMessageToolbarThumbsUpLabel,
         ...props,
-        children: /* @__PURE__ */ jsx10(ThumbsUp, { className: "size-[18px]" })
+        children: /* @__PURE__ */ jsx12(ThumbsUp, { className: "size-[18px]" })
       }
     );
   };
   CopilotChatAssistantMessage2.ThumbsDownButton = ({ title, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx12(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
         title: title || labels.assistantMessageToolbarThumbsDownLabel,
         ...props,
-        children: /* @__PURE__ */ jsx10(ThumbsDown, { className: "size-[18px]" })
+        children: /* @__PURE__ */ jsx12(ThumbsDown, { className: "size-[18px]" })
       }
     );
   };
   CopilotChatAssistantMessage2.ReadAloudButton = ({ title, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx12(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
         title: title || labels.assistantMessageToolbarReadAloudLabel,
         ...props,
-        children: /* @__PURE__ */ jsx10(Volume2, { className: "size-[20px]" })
+        children: /* @__PURE__ */ jsx12(Volume2, { className: "size-[20px]" })
       }
     );
   };
   CopilotChatAssistantMessage2.RegenerateButton = ({ title, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx12(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
         title: title || labels.assistantMessageToolbarRegenerateLabel,
         ...props,
-        children: /* @__PURE__ */ jsx10(RefreshCw, { className: "size-[18px]" })
+        children: /* @__PURE__ */ jsx12(RefreshCw, { className: "size-[18px]" })
       }
     );
   };
@@ -1909,7 +2061,7 @@ var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
 import { 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 jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 function CopilotChatUserMessage({
   message,
   onEditMessage,
@@ -1967,7 +2119,7 @@ function CopilotChatUserMessage({
   );
   const showBranchNavigation = numberOfBranches && numberOfBranches > 1 && onSwitchToBranch;
   const BoundToolbar = renderSlot(toolbar, CopilotChatUserMessage.Toolbar, {
-    children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1 justify-end", children: [
+    children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 justify-end", children: [
       additionalToolbarItems,
       BoundCopyButton,
       onEditMessage && BoundEditButton,
@@ -1975,7 +2127,7 @@ function CopilotChatUserMessage({
     ] })
   });
   if (children) {
-    return /* @__PURE__ */ jsx11(Fragment4, { children: children({
+    return /* @__PURE__ */ jsx13(Fragment4, { children: children({
       messageRenderer: BoundMessageRenderer,
       toolbar: BoundToolbar,
       copyButton: BoundCopyButton,
@@ -1987,7 +2139,7 @@ function CopilotChatUserMessage({
       additionalToolbarItems
     }) });
   }
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: twMerge5("flex flex-col items-end group pt-10", className),
@@ -2001,7 +2153,7 @@ function CopilotChatUserMessage({
   );
 }
 ((CopilotChatUserMessage2) => {
-  CopilotChatUserMessage2.Container = ({ children, className, ...props }) => /* @__PURE__ */ jsx11(
+  CopilotChatUserMessage2.Container = ({ children, className, ...props }) => /* @__PURE__ */ jsx13(
     "div",
     {
       className: twMerge5("flex flex-col items-end group", className),
@@ -2009,7 +2161,7 @@ function CopilotChatUserMessage({
       children
     }
   );
-  CopilotChatUserMessage2.MessageRenderer = ({ content, className }) => /* @__PURE__ */ jsx11(
+  CopilotChatUserMessage2.MessageRenderer = ({ content, className }) => /* @__PURE__ */ jsx13(
     "div",
     {
       className: twMerge5(
@@ -2022,7 +2174,7 @@ function CopilotChatUserMessage({
   CopilotChatUserMessage2.Toolbar = ({
     className,
     ...props
-  }) => /* @__PURE__ */ jsx11(
+  }) => /* @__PURE__ */ jsx13(
     "div",
     {
       className: twMerge5(
@@ -2033,8 +2185,8 @@ function CopilotChatUserMessage({
     }
   );
   CopilotChatUserMessage2.ToolbarButton = ({ title, children, className, ...props }) => {
-    return /* @__PURE__ */ jsxs5(Tooltip, { children: [
-      /* @__PURE__ */ jsx11(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsxs6(Tooltip, { children: [
+      /* @__PURE__ */ jsx13(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx13(
         Button,
         {
           type: "button",
@@ -2045,7 +2197,7 @@ function CopilotChatUserMessage({
           children
         }
       ) }),
-      /* @__PURE__ */ jsx11(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx11("p", { children: title }) })
+      /* @__PURE__ */ jsx13(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx13("p", { children: title }) })
     ] });
   };
   CopilotChatUserMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
@@ -2059,27 +2211,27 @@ function CopilotChatUserMessage({
         onClick(event);
       }
     };
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx13(
       CopilotChatUserMessage2.ToolbarButton,
       {
         title: title || labels.userMessageToolbarCopyMessageLabel,
         onClick: handleClick,
         className,
         ...props,
-        children: copied ? /* @__PURE__ */ jsx11(Check3, { className: "size-[18px]" }) : /* @__PURE__ */ jsx11(Copy2, { className: "size-[18px]" })
+        children: copied ? /* @__PURE__ */ jsx13(Check3, { className: "size-[18px]" }) : /* @__PURE__ */ jsx13(Copy2, { className: "size-[18px]" })
       }
     );
   };
   CopilotChatUserMessage2.EditButton = ({ className, title, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx13(
       CopilotChatUserMessage2.ToolbarButton,
       {
         title: title || labels.userMessageToolbarEditMessageLabel,
         className,
         ...props,
-        children: /* @__PURE__ */ jsx11(Edit, { className: "size-[18px]" })
+        children: /* @__PURE__ */ jsx13(Edit, { className: "size-[18px]" })
       }
     );
   };
@@ -2096,8 +2248,8 @@ function CopilotChatUserMessage({
     }
     const canGoPrev = currentBranch > 0;
     const canGoNext = currentBranch < numberOfBranches - 1;
-    return /* @__PURE__ */ jsxs5("div", { className: twMerge5("flex items-center gap-1", className), ...props, children: [
-      /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsxs6("div", { className: twMerge5("flex items-center gap-1", className), ...props, children: [
+      /* @__PURE__ */ jsx13(
         Button,
         {
           type: "button",
@@ -2109,15 +2261,15 @@ function CopilotChatUserMessage({
           }),
           disabled: !canGoPrev,
           className: "h-6 w-6 p-0",
-          children: /* @__PURE__ */ jsx11(ChevronLeft, { className: "size-[20px]" })
+          children: /* @__PURE__ */ jsx13(ChevronLeft, { className: "size-[20px]" })
         }
       ),
-      /* @__PURE__ */ jsxs5("span", { className: "text-sm text-muted-foreground px-0 font-medium", children: [
+      /* @__PURE__ */ jsxs6("span", { className: "text-sm text-muted-foreground px-0 font-medium", children: [
         currentBranch + 1,
         "/",
         numberOfBranches
       ] }),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx13(
         Button,
         {
           type: "button",
@@ -2129,7 +2281,7 @@ function CopilotChatUserMessage({
           }),
           disabled: !canGoNext,
           className: "h-6 w-6 p-0",
-          children: /* @__PURE__ */ jsx11(ChevronRight, { className: "size-[20px]" })
+          children: /* @__PURE__ */ jsx13(ChevronRight, { className: "size-[20px]" })
         }
       )
     ] });
@@ -2145,14 +2297,14 @@ CopilotChatUserMessage.BranchNavigation.displayName = "CopilotChatUserMessage.Br
 var CopilotChatUserMessage_default = CopilotChatUserMessage;
 
 // src/components/chat/CopilotChatSuggestionPill.tsx
-import React8 from "react";
+import React9 from "react";
 import { Loader2 } from "lucide-react";
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 var baseClasses = "group inline-flex h-8 items-center gap-1.5 rounded-full border border-border/60 bg-background px-3 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 = React8.forwardRef(function CopilotChatSuggestionPill2({ className, children, icon, isLoading, type, ...props }, ref) {
+var CopilotChatSuggestionPill = React9.forwardRef(function CopilotChatSuggestionPill2({ className, children, icon, isLoading, type, ...props }, ref) {
   const showIcon = !isLoading && icon;
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "button",
     {
       ref,
@@ -2163,8 +2315,8 @@ var CopilotChatSuggestionPill = React8.forwardRef(function CopilotChatSuggestion
       disabled: isLoading || props.disabled,
       ...props,
       children: [
-        isLoading ? /* @__PURE__ */ jsx12("span", { className: "flex h-4 w-4 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx12(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }) }) : showIcon && /* @__PURE__ */ jsx12("span", { className: "flex h-4 w-4 items-center justify-center text-muted-foreground", children: icon }),
-        /* @__PURE__ */ jsx12("span", { className: labelClasses, children })
+        isLoading ? /* @__PURE__ */ jsx14("span", { className: "flex h-4 w-4 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx14(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }) }) : showIcon && /* @__PURE__ */ jsx14("span", { className: "flex h-4 w-4 items-center justify-center text-muted-foreground", children: icon }),
+        /* @__PURE__ */ jsx14("span", { className: labelClasses, children })
       ]
     }
   );
@@ -2173,10 +2325,10 @@ CopilotChatSuggestionPill.displayName = "CopilotChatSuggestionPill";
 var CopilotChatSuggestionPill_default = CopilotChatSuggestionPill;
 
 // src/components/chat/CopilotChatSuggestionView.tsx
-import React9 from "react";
-import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-var DefaultContainer = React9.forwardRef(function DefaultContainer2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx13(
+import React10 from "react";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+var DefaultContainer = React10.forwardRef(function DefaultContainer2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       ref,
@@ -2188,7 +2340,7 @@ var DefaultContainer = React9.forwardRef(function DefaultContainer2({ className,
     }
   );
 });
-var CopilotChatSuggestionView = React9.forwardRef(function CopilotChatSuggestionView2({
+var CopilotChatSuggestionView = React10.forwardRef(function CopilotChatSuggestionView2({
   suggestions,
   onSelectSuggestion,
   loadingIndexes,
@@ -2198,7 +2350,7 @@ var CopilotChatSuggestionView = React9.forwardRef(function CopilotChatSuggestion
   children,
   ...restProps
 }, ref) {
-  const loadingSet = React9.useMemo(() => {
+  const loadingSet = React10.useMemo(() => {
     if (!loadingIndexes || loadingIndexes.length === 0) {
       return /* @__PURE__ */ new Set();
     }
@@ -2217,11 +2369,11 @@ var CopilotChatSuggestionView = React9.forwardRef(function CopilotChatSuggestion
       type: "button",
       onClick: () => onSelectSuggestion?.(suggestion, index)
     });
-    return React9.cloneElement(pill, {
+    return React10.cloneElement(pill, {
       key: `${suggestion.title}-${index}`
     });
   });
-  const boundContainer = React9.cloneElement(
+  const boundContainer = React10.cloneElement(
     ContainerElement,
     void 0,
     suggestionElements
@@ -2232,7 +2384,7 @@ var CopilotChatSuggestionView = React9.forwardRef(function CopilotChatSuggestion
       isLoading: suggestions.length > 0 ? loadingSet.has(0) || suggestions[0]?.isLoading === true : false,
       type: "button"
     });
-    return /* @__PURE__ */ jsx13(Fragment5, { children: children({
+    return /* @__PURE__ */ jsx15(Fragment5, { children: children({
       container: boundContainer,
       suggestion: sampleSuggestion,
       suggestions,
@@ -2243,7 +2395,7 @@ var CopilotChatSuggestionView = React9.forwardRef(function CopilotChatSuggestion
     }) });
   }
   if (children) {
-    return /* @__PURE__ */ jsxs7(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs8(Fragment5, { children: [
       boundContainer,
       children
     ] });
@@ -2255,7 +2407,7 @@ var CopilotChatSuggestionView_default = CopilotChatSuggestionView;
 
 // src/components/chat/CopilotChatMessageView.tsx
 import { twMerge as twMerge6 } from "tailwind-merge";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function CopilotChatMessageView({
   messages = [],
   assistantMessage,
@@ -2266,41 +2418,57 @@ function CopilotChatMessageView({
   className,
   ...props
 }) {
-  const messageElements = messages.map((message) => {
+  const renderCustomMessage = useRenderCustomMessages();
+  const messageElements = messages.flatMap((message) => {
+    const elements = [];
+    if (renderCustomMessage) {
+      elements.push(
+        renderCustomMessage({
+          message,
+          position: "before"
+        })
+      );
+    }
     if (message.role === "assistant") {
-      return renderSlot(assistantMessage, CopilotChatAssistantMessage_default, {
-        key: message.id,
-        message,
-        messages,
-        isRunning
-      });
+      elements.push(
+        renderSlot(assistantMessage, CopilotChatAssistantMessage_default, {
+          key: message.id,
+          message,
+          messages,
+          isRunning
+        })
+      );
     } else if (message.role === "user") {
-      return renderSlot(userMessage, CopilotChatUserMessage_default, {
-        key: message.id,
-        message
-      });
+      elements.push(
+        renderSlot(userMessage, CopilotChatUserMessage_default, {
+          key: message.id,
+          message
+        })
+      );
     }
-    return;
+    if (renderCustomMessage) {
+      elements.push(
+        renderCustomMessage({
+          message,
+          position: "after"
+        })
+      );
+    }
+    return elements;
   }).filter(Boolean);
   if (children) {
     return children({ messageElements, messages, isRunning });
   }
-  return /* @__PURE__ */ jsxs8("div", { className: twMerge6("flex flex-col", className), ...props, children: [
+  return /* @__PURE__ */ jsxs9("div", { className: twMerge6("flex flex-col", className), ...props, children: [
     messageElements,
     isRunning && renderSlot(cursor, CopilotChatMessageView.Cursor, {})
   ] });
 }
-CopilotChatMessageView.Cursor = function Cursor({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx14(
+CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
+  return /* @__PURE__ */ jsx16(
     "div",
     {
-      className: twMerge6(
-        "w-[11px] h-[11px] rounded-full bg-foreground animate-pulse-cursor ml-1",
-        className
-      ),
+      className: twMerge6("w-[11px] h-[11px] rounded-full bg-foreground animate-pulse-cursor ml-1", className),
       ...props
     }
   );
@@ -2308,11 +2476,11 @@ CopilotChatMessageView.Cursor = function Cursor({
 var CopilotChatMessageView_default = CopilotChatMessageView;
 
 // src/components/chat/CopilotChatView.tsx
-import React10, { useRef as useRef6, useState as useState9, useEffect as useEffect11 } from "react";
+import React11, { useRef as useRef7, useState as useState9, useEffect as useEffect12 } from "react";
 import { twMerge as twMerge7 } from "tailwind-merge";
 import { StickToBottom, useStickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 import { ChevronDown } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 function CopilotChatView({
   messageView,
   input,
@@ -2333,11 +2501,11 @@ function CopilotChatView({
   className,
   ...props
 }) {
-  const inputContainerRef = useRef6(null);
+  const inputContainerRef = useRef7(null);
   const [inputContainerHeight, setInputContainerHeight] = useState9(0);
   const [isResizing, setIsResizing] = useState9(false);
-  const resizeTimeoutRef = useRef6(null);
-  useEffect11(() => {
+  const resizeTimeoutRef = useRef7(null);
+  useEffect12(() => {
     const element = inputContainerRef.current;
     if (!element) return;
     const resizeObserver = new ResizeObserver((entries) => {
@@ -2389,17 +2557,17 @@ function CopilotChatView({
     scrollToBottomButton,
     inputContainerHeight,
     isResizing,
-    children: /* @__PURE__ */ jsx15("div", { style: { paddingBottom: `${inputContainerHeight + (hasSuggestions ? 4 : 32)}px` }, children: /* @__PURE__ */ jsxs9("div", { className: "max-w-3xl mx-auto", children: [
+    children: /* @__PURE__ */ jsx17("div", { style: { paddingBottom: `${inputContainerHeight + (hasSuggestions ? 4 : 32)}px` }, children: /* @__PURE__ */ jsxs10("div", { className: "max-w-3xl mx-auto", children: [
       BoundMessageView,
-      hasSuggestions ? /* @__PURE__ */ jsx15("div", { className: "px-4 sm:px-0 mt-4", children: BoundSuggestionView }) : null
+      hasSuggestions ? /* @__PURE__ */ jsx17("div", { className: "px-4 sm:px-0 mt-4", children: BoundSuggestionView }) : null
     ] }) })
   });
   const BoundScrollToBottomButton = renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, {});
   const BoundDisclaimer = renderSlot(disclaimer, CopilotChatView.Disclaimer, {});
   const BoundInputContainer = renderSlot(inputContainer, CopilotChatView.InputContainer, {
     ref: inputContainerRef,
-    children: /* @__PURE__ */ jsxs9(Fragment6, { children: [
-      /* @__PURE__ */ jsx15("div", { className: "max-w-3xl mx-auto py-0 px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 pointer-events-auto", children: BoundInput }),
+    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 pointer-events-auto", children: BoundInput }),
       BoundDisclaimer
     ] })
   });
@@ -2412,10 +2580,10 @@ function CopilotChatView({
       feather: BoundFeather,
       inputContainer: BoundInputContainer,
       disclaimer: BoundDisclaimer,
-      suggestionView: BoundSuggestionView ?? /* @__PURE__ */ jsx15(Fragment6, {})
+      suggestionView: BoundSuggestionView ?? /* @__PURE__ */ jsx17(Fragment6, {})
     });
   }
-  return /* @__PURE__ */ jsxs9("div", { className: twMerge7("relative h-full", className), ...props, children: [
+  return /* @__PURE__ */ jsxs10("div", { className: twMerge7("relative h-full", className), ...props, children: [
     BoundScrollView,
     BoundFeather,
     BoundInputContainer
@@ -2424,9 +2592,9 @@ function CopilotChatView({
 ((CopilotChatView2) => {
   const ScrollContent = ({ children, scrollToBottomButton, inputContainerHeight, isResizing }) => {
     const { isAtBottom, scrollToBottom } = useStickToBottomContext();
-    return /* @__PURE__ */ jsxs9(Fragment6, { children: [
-      /* @__PURE__ */ jsx15(StickToBottom.Content, { className: "overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ jsx15("div", { className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8", children }) }),
-      !isAtBottom && !isResizing && /* @__PURE__ */ jsx15(
+    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", children }) }),
+      !isAtBottom && !isResizing && /* @__PURE__ */ jsx17(
         "div",
         {
           className: "absolute inset-x-0 flex justify-center z-10 pointer-events-none",
@@ -2452,10 +2620,10 @@ function CopilotChatView({
     const [hasMounted, setHasMounted] = useState9(false);
     const { scrollRef, contentRef, scrollToBottom } = useStickToBottom();
     const [showScrollButton, setShowScrollButton] = useState9(false);
-    useEffect11(() => {
+    useEffect12(() => {
       setHasMounted(true);
     }, []);
-    useEffect11(() => {
+    useEffect12(() => {
       if (autoScroll) return;
       const scrollElement = scrollRef.current;
       if (!scrollElement) return;
@@ -2473,10 +2641,10 @@ function CopilotChatView({
       };
     }, [scrollRef, autoScroll]);
     if (!hasMounted) {
-      return /* @__PURE__ */ jsx15("div", { className: "h-full max-h-full flex flex-col min-h-0 overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ jsx15("div", { className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8", children }) });
+      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", children }) });
     }
     if (!autoScroll) {
-      return /* @__PURE__ */ jsxs9(
+      return /* @__PURE__ */ jsxs10(
         "div",
         {
           ref: scrollRef,
@@ -2486,8 +2654,8 @@ function CopilotChatView({
           ),
           ...props,
           children: [
-            /* @__PURE__ */ jsx15("div", { ref: contentRef, className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8", children }),
-            showScrollButton && !isResizing && /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsx17("div", { ref: contentRef, className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8", children }),
+            showScrollButton && !isResizing && /* @__PURE__ */ jsx17(
               "div",
               {
                 className: "absolute inset-x-0 flex justify-center z-10 pointer-events-none",
@@ -2503,14 +2671,14 @@ function CopilotChatView({
         }
       );
     }
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx17(
       StickToBottom,
       {
         className: cn("h-full max-h-full flex flex-col min-h-0 relative", className),
         resize: "smooth",
         initial: "smooth",
         ...props,
-        children: /* @__PURE__ */ jsx15(
+        children: /* @__PURE__ */ jsx17(
           ScrollContent,
           {
             scrollToBottomButton,
@@ -2525,7 +2693,7 @@ function CopilotChatView({
   CopilotChatView2.ScrollToBottomButton = ({
     className,
     ...props
-  }) => /* @__PURE__ */ jsx15(
+  }) => /* @__PURE__ */ jsx17(
     Button,
     {
       variant: "outline",
@@ -2539,10 +2707,10 @@ function CopilotChatView({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx15(ChevronDown, { className: "w-4 h-4 text-gray-600 dark:text-white" })
+      children: /* @__PURE__ */ jsx17(ChevronDown, { className: "w-4 h-4 text-gray-600 dark:text-white" })
     }
   );
-  CopilotChatView2.Feather = ({ className, style, ...props }) => /* @__PURE__ */ jsx15(
+  CopilotChatView2.Feather = ({ className, style, ...props }) => /* @__PURE__ */ jsx17(
     "div",
     {
       className: cn(
@@ -2555,12 +2723,12 @@ function CopilotChatView({
       ...props
     }
   );
-  CopilotChatView2.InputContainer = React10.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsx15("div", { ref, className: cn("absolute bottom-0 left-0 right-0 z-20 pointer-events-none", className), ...props, children }));
+  CopilotChatView2.InputContainer = React11.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsx17("div", { ref, className: cn("absolute bottom-0 left-0 right-0 z-20 pointer-events-none", className), ...props, children }));
   CopilotChatView2.InputContainer.displayName = "CopilotChatView.InputContainer";
   CopilotChatView2.Disclaimer = ({ className, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx17(
       "div",
       {
         className: cn("text-center text-xs text-muted-foreground py-3 px-4 max-w-3xl mx-auto", className),
@@ -2574,10 +2742,10 @@ 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 useCallback5, useEffect as useEffect12, useMemo as useMemo6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect13, useMemo as useMemo6 } from "react";
 import { merge } from "ts-deepmerge";
 import { AGUIConnectNotImplementedError } from "@ag-ui/client";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen, ...props }) {
   const existingConfig = useCopilotChatConfiguration();
   const resolvedAgentId = agentId ?? existingConfig?.agentId ?? DEFAULT_AGENT_ID6;
@@ -2594,7 +2762,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     suggestionView: providedSuggestionView,
     ...restProps
   } = props;
-  useEffect12(() => {
+  useEffect13(() => {
     const connect = async (agent2) => {
       try {
         await copilotkit.connectAgent({ agent: agent2 });
@@ -2667,7 +2835,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     }
   });
   const RenderedChatView = renderSlot(chatView, CopilotChatView, finalProps);
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx18(
     CopilotChatConfigurationProvider,
     {
       agentId: resolvedAgentId,
@@ -2683,17 +2851,17 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 })(CopilotChat || (CopilotChat = {}));
 
 // src/components/chat/CopilotChatToggleButton.tsx
-import React11, { useState as useState10 } from "react";
+import React12, { useState as useState10 } from "react";
 import { MessageCircle, X as X2 } from "lucide-react";
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var DefaultOpenIcon = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx17(MessageCircle, { className: cn("h-6 w-6", className), strokeWidth: 1.75, fill: "currentColor", ...props });
+}) => /* @__PURE__ */ jsx19(MessageCircle, { className: cn("h-6 w-6", className), strokeWidth: 1.75, fill: "currentColor", ...props });
 var DefaultCloseIcon = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx17(X2, { className: cn("h-6 w-6", className), strokeWidth: 1.75, ...props });
+}) => /* @__PURE__ */ jsx19(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({
@@ -2710,7 +2878,7 @@ var BUTTON_BASE_CLASSES = cn(
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
   "disabled:pointer-events-none disabled:opacity-60"
 );
-var CopilotChatToggleButton = React11.forwardRef(function CopilotChatToggleButton2({ openIcon, closeIcon, className, ...buttonProps }, ref) {
+var CopilotChatToggleButton = React12.forwardRef(function CopilotChatToggleButton2({ openIcon, closeIcon, className, ...buttonProps }, ref) {
   const { onClick, type, disabled, ...restProps } = buttonProps;
   const configuration = useCopilotChatConfiguration();
   const labels = configuration?.labels ?? CopilotChatDefaultLabels;
@@ -2748,7 +2916,7 @@ var CopilotChatToggleButton = React11.forwardRef(function CopilotChatToggleButto
       focusable: false
     }
   );
-  const openIconElement = /* @__PURE__ */ jsx17(
+  const openIconElement = /* @__PURE__ */ jsx19(
     "span",
     {
       "aria-hidden": "true",
@@ -2762,7 +2930,7 @@ var CopilotChatToggleButton = React11.forwardRef(function CopilotChatToggleButto
       children: renderedOpenIcon
     }
   );
-  const closeIconElement = /* @__PURE__ */ jsx17(
+  const closeIconElement = /* @__PURE__ */ jsx19(
     "span",
     {
       "aria-hidden": "true",
@@ -2776,7 +2944,7 @@ var CopilotChatToggleButton = React11.forwardRef(function CopilotChatToggleButto
       children: renderedCloseIcon
     }
   );
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "button",
     {
       ref,
@@ -2800,12 +2968,12 @@ CopilotChatToggleButton.displayName = "CopilotChatToggleButton";
 var CopilotChatToggleButton_default = CopilotChatToggleButton;
 
 // src/components/chat/CopilotSidebarView.tsx
-import { useEffect as useEffect13, useRef as useRef7, useState as useState11 } from "react";
+import { useEffect as useEffect14, useRef as useRef8, useState as useState11 } from "react";
 
 // src/components/chat/CopilotModalHeader.tsx
 import { useCallback as useCallback6 } from "react";
 import { X as X3 } from "lucide-react";
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 function CopilotModalHeader({
   title,
   titleContent,
@@ -2834,7 +3002,7 @@ function CopilotModalHeader({
       ...rest
     });
   }
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(
     "header",
     {
       "data-slot": "copilot-modal-header",
@@ -2844,17 +3012,17 @@ function CopilotModalHeader({
         className
       ),
       ...rest,
-      children: /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-center gap-2", children: [
-        /* @__PURE__ */ jsx18("div", { className: "flex-1", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx18("div", { className: "flex flex-1 justify-center text-center", children: BoundTitle }),
-        /* @__PURE__ */ jsx18("div", { className: "flex flex-1 justify-end", children: BoundCloseButton })
+      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 })
       ] })
     }
   );
 }
 CopilotModalHeader.displayName = "CopilotModalHeader";
 ((CopilotModalHeader2) => {
-  CopilotModalHeader2.Title = ({ children, className, ...props }) => /* @__PURE__ */ jsx18(
+  CopilotModalHeader2.Title = ({ children, className, ...props }) => /* @__PURE__ */ jsx20(
     "div",
     {
       className: cn(
@@ -2868,7 +3036,7 @@ CopilotModalHeader.displayName = "CopilotModalHeader";
   CopilotModalHeader2.CloseButton = ({
     className,
     ...props
-  }) => /* @__PURE__ */ jsx18(
+  }) => /* @__PURE__ */ jsx20(
     "button",
     {
       type: "button",
@@ -2879,7 +3047,7 @@ CopilotModalHeader.displayName = "CopilotModalHeader";
       ),
       "aria-label": "Close",
       ...props,
-      children: /* @__PURE__ */ jsx18(X3, { className: "h-4 w-4", "aria-hidden": "true" })
+      children: /* @__PURE__ */ jsx20(X3, { className: "h-4 w-4", "aria-hidden": "true" })
     }
   );
 })(CopilotModalHeader || (CopilotModalHeader = {}));
@@ -2887,13 +3055,13 @@ CopilotModalHeader.Title.displayName = "CopilotModalHeader.Title";
 CopilotModalHeader.CloseButton.displayName = "CopilotModalHeader.CloseButton";
 
 // src/components/chat/CopilotSidebarView.tsx
-import { Fragment as Fragment7, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 var DEFAULT_SIDEBAR_WIDTH = 480;
 var SIDEBAR_TRANSITION_MS = 260;
 function CopilotSidebarView({ header, width, ...props }) {
   const configuration = useCopilotChatConfiguration();
   const isSidebarOpen = configuration?.isModalOpen ?? false;
-  const sidebarRef = useRef7(null);
+  const sidebarRef = useRef8(null);
   const [sidebarWidth, setSidebarWidth] = useState11(width ?? DEFAULT_SIDEBAR_WIDTH);
   const widthToCss = (w) => {
     return typeof w === "number" ? `${w}px` : w;
@@ -2904,7 +3072,7 @@ function CopilotSidebarView({ header, width, ...props }) {
     }
     return w;
   };
-  useEffect13(() => {
+  useEffect14(() => {
     if (width !== void 0) {
       return;
     }
@@ -2931,8 +3099,8 @@ function CopilotSidebarView({ header, width, ...props }) {
     return () => window.removeEventListener("resize", updateWidth);
   }, [width]);
   const headerElement = renderSlot(header, CopilotModalHeader, {});
-  return /* @__PURE__ */ jsxs12(Fragment7, { children: [
-    isSidebarOpen && /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs13(Fragment7, { children: [
+    isSidebarOpen && /* @__PURE__ */ jsx21(
       "style",
       {
         dangerouslySetInnerHTML: {
@@ -2943,8 +3111,8 @@ function CopilotSidebarView({ header, width, ...props }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx19(CopilotChatToggleButton_default, {}),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx21(CopilotChatToggleButton_default, {}),
+    /* @__PURE__ */ jsx21(
       "aside",
       {
         ref: sidebarRef,
@@ -2959,9 +3127,9 @@ function CopilotSidebarView({ header, width, ...props }) {
         "aria-hidden": !isSidebarOpen,
         "aria-label": "Copilot chat sidebar",
         role: "complementary",
-        children: /* @__PURE__ */ jsxs12("div", { className: "flex h-full w-full flex-col overflow-hidden", children: [
+        children: /* @__PURE__ */ jsxs13("div", { className: "flex h-full w-full flex-col overflow-hidden", children: [
           headerElement,
-          /* @__PURE__ */ jsx19("div", { className: "flex-1 overflow-hidden", "data-sidebar-chat": true, children: /* @__PURE__ */ jsx19(CopilotChatView_default, { ...props }) })
+          /* @__PURE__ */ jsx21("div", { className: "flex-1 overflow-hidden", "data-sidebar-chat": true, children: /* @__PURE__ */ jsx21(CopilotChatView_default, { ...props }) })
         ] })
       }
     )
@@ -2971,12 +3139,12 @@ CopilotSidebarView.displayName = "CopilotSidebarView";
 
 // src/components/chat/CopilotSidebar.tsx
 import { useMemo as useMemo7 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
   const SidebarViewOverride = useMemo7(() => {
     const Component = (viewProps) => {
       const { header: viewHeader, width: viewWidth, ...restProps } = viewProps;
-      return /* @__PURE__ */ jsx20(
+      return /* @__PURE__ */ jsx22(
         CopilotSidebarView,
         {
           ...restProps,
@@ -2987,7 +3155,7 @@ function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
     };
     return Object.assign(Component, CopilotChatView_default);
   }, [header, width]);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22(
     CopilotChat,
     {
       ...chatProps,
@@ -2998,9 +3166,9 @@ function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
 }
 CopilotSidebar.displayName = "CopilotSidebar";
 
-// src/types/defineToolCallRender.ts
+// src/types/defineToolCallRenderer.ts
 import { z as z2 } from "zod";
-function defineToolCallRender(def) {
+function defineToolCallRenderer(def) {
   const argsSchema = def.name === "*" && !def.args ? z2.any() : def.args;
   return {
     name: def.name,
@@ -3012,8 +3180,8 @@ function defineToolCallRender(def) {
 
 // src/components/WildcardToolCallRender.tsx
 import { useState as useState12 } from "react";
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
-var WildcardToolCallRender = defineToolCallRender({
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+var WildcardToolCallRender = defineToolCallRenderer({
   name: "*",
   render: ({ args, result, name, status }) => {
     const [isExpanded, setIsExpanded] = useState12(false);
@@ -3021,15 +3189,15 @@ var WildcardToolCallRender = defineToolCallRender({
     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__ */ jsx21("div", { className: "mt-2 pb-2", children: /* @__PURE__ */ jsxs13("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__ */ jsxs13(
+    return /* @__PURE__ */ jsx23("div", { className: "mt-2 pb-2", children: /* @__PURE__ */ jsxs14("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__ */ jsxs14(
         "div",
         {
           className: "flex items-center justify-between gap-3 cursor-pointer",
           onClick: () => setIsExpanded(!isExpanded),
           children: [
-            /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 min-w-0", children: [
-              /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2 min-w-0", children: [
+              /* @__PURE__ */ jsx23(
                 "svg",
                 {
                   className: `h-4 w-4 text-zinc-500 dark:text-zinc-400 transition-transform ${isExpanded ? "rotate-90" : ""}`,
@@ -3037,7 +3205,7 @@ var WildcardToolCallRender = defineToolCallRender({
                   viewBox: "0 0 24 24",
                   strokeWidth: 2,
                   stroke: "currentColor",
-                  children: /* @__PURE__ */ jsx21(
+                  children: /* @__PURE__ */ jsx23(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -3047,10 +3215,10 @@ var WildcardToolCallRender = defineToolCallRender({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx21("span", { className: "inline-block h-2 w-2 rounded-full bg-blue-500" }),
-              /* @__PURE__ */ jsx21("span", { className: "truncate text-sm font-medium text-zinc-900 dark:text-zinc-100", children: name })
+              /* @__PURE__ */ jsx23("span", { className: "inline-block h-2 w-2 rounded-full bg-blue-500" }),
+              /* @__PURE__ */ jsx23("span", { className: "truncate text-sm font-medium text-zinc-900 dark:text-zinc-100", children: name })
             ] }),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx23(
               "span",
               {
                 className: `inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${statusStyles}`,
@@ -3060,14 +3228,14 @@ var WildcardToolCallRender = defineToolCallRender({
           ]
         }
       ),
-      isExpanded && /* @__PURE__ */ jsxs13("div", { className: "mt-3 grid gap-4", children: [
-        /* @__PURE__ */ jsxs13("div", { children: [
-          /* @__PURE__ */ jsx21("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Arguments" }),
-          /* @__PURE__ */ jsx21("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) })
+      isExpanded && /* @__PURE__ */ jsxs14("div", { className: "mt-3 grid gap-4", children: [
+        /* @__PURE__ */ jsxs14("div", { children: [
+          /* @__PURE__ */ jsx23("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Arguments" }),
+          /* @__PURE__ */ jsx23("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__ */ jsxs13("div", { children: [
-          /* @__PURE__ */ jsx21("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Result" }),
-          /* @__PURE__ */ jsx21("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) })
+        result !== void 0 && /* @__PURE__ */ jsxs14("div", { children: [
+          /* @__PURE__ */ jsx23("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Result" }),
+          /* @__PURE__ */ jsx23("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) })
         ] })
       ] })
     ] }) });
@@ -3089,12 +3257,14 @@ export {
   CopilotChatToolCallsView_default as CopilotChatToolCallsView,
   CopilotChatUserMessage_default as CopilotChatUserMessage,
   CopilotChatView_default as CopilotChatView,
+  CopilotKitCoreReact,
   CopilotKitProvider,
   CopilotModalHeader,
   CopilotSidebar,
   CopilotSidebarView,
+  WebInspector,
   WildcardToolCallRender,
-  defineToolCallRender,
+  defineToolCallRenderer,
   useAgent,
   useAgentContext,
   useConfigureSuggestions,
@@ -3102,6 +3272,7 @@ export {
   useCopilotKit,
   useFrontendTool,
   useHumanInTheLoop,
+  useRenderCustomMessages,
   useRenderToolCall,
   useSuggestions
 };