@copilotkit/react-ui 1.10.0-next.4 → 1.10.0-next.6

package/dist/components/chat/index.mjs

@@ -1,12 +1,12 @@
 import "../../chunk-SC6JRFAJ.mjs";
 import {
   CopilotSidebar
-} from "../../chunk-2TABXABK.mjs";
+} from "../../chunk-MYWIJSW6.mjs";
 import "../../chunk-WB3YULQ4.mjs";
 import {
   CopilotPopup
-} from "../../chunk-WYEGK6BP.mjs";
-import "../../chunk-QKDRZ7WA.mjs";
+} from "../../chunk-BXX6RM44.mjs";
+import "../../chunk-BY42E5VF.mjs";
 import "../../chunk-C3GSYRC3.mjs";
 import "../../chunk-GDSZGYCE.mjs";
 import "../../chunk-V7W6IM2V.mjs";
@@ -19,7 +19,7 @@ import "../../chunk-BH6PCAAL.mjs";
 import "../../chunk-UFN2VWSR.mjs";
 import {
   CopilotChat
-} from "../../chunk-P6O2MZGT.mjs";
+} from "../../chunk-K344MVUT.mjs";
 import "../../chunk-JHUTTP5C.mjs";
 import {
   AssistantMessage

package/dist/components/chat/props.d.ts

@@ -2,6 +2,44 @@ import { Message, UserMessage, AIMessage, ImageData } from '@copilotkit/shared';
 import { CopilotChatSuggestion } from '../../types/suggestions.js';
 import { ReactNode } from 'react';
 
+/**
+ * Event hooks for CopilotKit chat events.
+ * These hooks only work when publicApiKey is provided.
+ */
+interface CopilotObservabilityHooks {
+    /**
+     * Called when a message is sent by the user
+     */
+    onMessageSent?: (message: string) => void;
+    /**
+     * Called when the chat is minimized/closed
+     */
+    onChatMinimized?: () => void;
+    /**
+     * Called when the chat is expanded/opened
+     */
+    onChatExpanded?: () => void;
+    /**
+     * Called when a message is regenerated
+     */
+    onMessageRegenerated?: (messageId: string) => void;
+    /**
+     * Called when a message is copied
+     */
+    onMessageCopied?: (content: string) => void;
+    /**
+     * Called when feedback is given (thumbs up/down)
+     */
+    onFeedbackGiven?: (messageId: string, type: "thumbsUp" | "thumbsDown") => void;
+    /**
+     * Called when chat generation starts
+     */
+    onChatStarted?: () => void;
+    /**
+     * Called when chat generation stops
+     */
+    onChatStopped?: () => void;
+}
 interface ButtonProps {
 }
 interface WindowProps {
@@ -162,4 +200,4 @@ interface ImageRendererProps {
     className?: string;
 }
 
-export { AssistantMessageProps, ButtonProps, ComponentsMap, HeaderProps, ImageRendererProps, InputProps, MessagesProps, RenderMessageProps, RenderSuggestionsListProps, Renderer, SuggestionsProps, UserMessageProps, WindowProps };
+export { AssistantMessageProps, ButtonProps, ComponentsMap, CopilotObservabilityHooks, HeaderProps, ImageRendererProps, InputProps, MessagesProps, RenderMessageProps, RenderSuggestionsListProps, Renderer, SuggestionsProps, UserMessageProps, WindowProps };

package/dist/components/chat/props.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/chat/props.ts"],"sourcesContent":["import { AIMessage, Message, UserMessage } from \"@copilotkit/shared\";\nimport { CopilotChatSuggestion } from \"../../types/suggestions\";\nimport { ReactNode } from \"react\";\nimport { ImageData } from \"@copilotkit/shared\";\n\nexport interface ButtonProps {}\n\nexport interface WindowProps {\n  clickOutsideToClose: boolean;\n  hitEscapeToClose: boolean;\n  shortcut: string;\n  children?: React.ReactNode;\n}\n\nexport interface HeaderProps {}\n\nexport interface SuggestionsProps {\n  title: string;\n  message: string;\n  partial?: boolean;\n  className?: string;\n  onClick: (message: string) => void;\n}\n\nexport type ComponentsMap<T extends Record<string, object> = Record<string, object>> = {\n  [K in keyof T]: React.FC<{ children?: ReactNode } & T[K]>;\n};\n\nexport interface MessagesProps {\n  messages: Message[];\n  inProgress: boolean;\n  children?: React.ReactNode;\n  AssistantMessage: React.ComponentType<AssistantMessageProps>;\n  UserMessage: React.ComponentType<UserMessageProps>;\n  RenderMessage: React.ComponentType<RenderMessageProps>;\n  ImageRenderer: React.ComponentType<ImageRendererProps>;\n\n  /**\n   * Callback function to regenerate the assistant's response\n   */\n  onRegenerate?: (messageId: string) => void;\n\n  /**\n   * Callback function when the message is copied\n   */\n  onCopy?: (message: string) => void;\n\n  /**\n   * Callback function for thumbs up feedback\n   */\n  onThumbsUp?: (message: Message) => void;\n\n  /**\n   * Callback function for thumbs down feedback\n   */\n  onThumbsDown?: (message: Message) => void;\n\n  /**\n   * A list of markdown components to render in assistant message.\n   * Useful when you want to render custom elements in the message (e.g a reference tag element)\n   */\n  markdownTagRenderers?: ComponentsMap;\n}\n\nexport interface Renderer {\n  content: string;\n}\n\nexport interface UserMessageProps {\n  message?: UserMessage;\n  ImageRenderer: React.ComponentType<ImageRendererProps>;\n}\n\nexport interface AssistantMessageProps {\n  /**\n   * The message content from the assistant\n   */\n\n  message?: AIMessage;\n\n  /**\n   * Indicates if this is the last message\n   */\n  isCurrentMessage?: boolean;\n\n  /**\n   * Whether a response is loading, this is when the LLM is thinking of a response but hasn't finished yet.\n   */\n  isLoading: boolean;\n\n  /**\n   * Whether a response is generating, this is when the LLM is actively generating and streaming content.\n   */\n  isGenerating: boolean;\n\n  /**\n   * Callback function to regenerate the assistant's response\n   */\n  onRegenerate?: () => void;\n\n  /**\n   * Callback function when the message is copied\n   */\n  onCopy?: (message: string) => void;\n\n  /**\n   * Callback function for thumbs up feedback\n   */\n  onThumbsUp?: (message: Message) => void;\n\n  /**\n   * Callback function for thumbs down feedback\n   */\n  onThumbsDown?: (message: Message) => void;\n\n  /**\n   * A list of markdown components to render in assistant message.\n   * Useful when you want to render custom elements in the message (e.g a reference tag element)\n   */\n  markdownTagRenderers?: ComponentsMap;\n\n  /**\n   * A custom image rendering component to use instead of the default.\n   */\n  ImageRenderer?: React.ComponentType<ImageRendererProps>;\n}\n\nexport interface RenderMessageProps {\n  message: Message;\n  inProgress: boolean;\n  index: number;\n  isCurrentMessage: boolean;\n  actionResult?: string;\n  AssistantMessage?: React.ComponentType<AssistantMessageProps>;\n  UserMessage?: React.ComponentType<UserMessageProps>;\n  ImageRenderer?: React.ComponentType<ImageRendererProps>;\n\n  /**\n   * Callback function to regenerate the assistant's response\n   */\n  onRegenerate?: (messageId: string) => void;\n\n  /**\n   * Callback function when the message is copied\n   */\n  onCopy?: (message: string) => void;\n\n  /**\n   * Callback function for thumbs up feedback\n   */\n  onThumbsUp?: (message: Message) => void;\n\n  /**\n   * Callback function for thumbs down feedback\n   */\n  onThumbsDown?: (message: Message) => void;\n\n  /**\n   * A list of markdown components to render in assistant message.\n   * Useful when you want to render custom elements in the message (e.g a reference tag element)\n   */\n  markdownTagRenderers?: ComponentsMap;\n}\n\nexport interface InputProps {\n  inProgress: boolean;\n  onSend: (text: string) => Promise<Message>;\n  isVisible?: boolean;\n  onStop?: () => void;\n  onUpload?: () => void;\n  hideStopButton?: boolean;\n}\n\nexport interface RenderSuggestionsListProps {\n  suggestions: CopilotChatSuggestion[];\n  onSuggestionClick: (message: string) => void;\n}\n\nexport interface ImageRendererProps {\n  /**\n   * The image data containing format and bytes\n   */\n  image: ImageData;\n\n  /**\n   * Optional content to display alongside the image\n   */\n  content?: string;\n\n  /**\n   * Additional CSS class name for styling\n   */\n  className?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/components/chat/props.ts"],"sourcesContent":["import { AIMessage, Message, UserMessage } from \"@copilotkit/shared\";\nimport { CopilotChatSuggestion } from \"../../types/suggestions\";\nimport { ReactNode } from \"react\";\nimport { ImageData } from \"@copilotkit/shared\";\n\n/**\n * Event hooks for CopilotKit chat events.\n * These hooks only work when publicApiKey is provided.\n */\nexport interface CopilotObservabilityHooks {\n  /**\n   * Called when a message is sent by the user\n   */\n  onMessageSent?: (message: string) => void;\n\n  /**\n   * Called when the chat is minimized/closed\n   */\n  onChatMinimized?: () => void;\n\n  /**\n   * Called when the chat is expanded/opened\n   */\n  onChatExpanded?: () => void;\n\n  /**\n   * Called when a message is regenerated\n   */\n  onMessageRegenerated?: (messageId: string) => void;\n\n  /**\n   * Called when a message is copied\n   */\n  onMessageCopied?: (content: string) => void;\n\n  /**\n   * Called when feedback is given (thumbs up/down)\n   */\n  onFeedbackGiven?: (messageId: string, type: \"thumbsUp\" | \"thumbsDown\") => void;\n\n  /**\n   * Called when chat generation starts\n   */\n  onChatStarted?: () => void;\n\n  /**\n   * Called when chat generation stops\n   */\n  onChatStopped?: () => void;\n}\n\nexport interface ButtonProps {}\n\nexport interface WindowProps {\n  clickOutsideToClose: boolean;\n  hitEscapeToClose: boolean;\n  shortcut: string;\n  children?: React.ReactNode;\n}\n\nexport interface HeaderProps {}\n\nexport interface SuggestionsProps {\n  title: string;\n  message: string;\n  partial?: boolean;\n  className?: string;\n  onClick: (message: string) => void;\n}\n\nexport type ComponentsMap<T extends Record<string, object> = Record<string, object>> = {\n  [K in keyof T]: React.FC<{ children?: ReactNode } & T[K]>;\n};\n\nexport interface MessagesProps {\n  messages: Message[];\n  inProgress: boolean;\n  children?: React.ReactNode;\n  AssistantMessage: React.ComponentType<AssistantMessageProps>;\n  UserMessage: React.ComponentType<UserMessageProps>;\n  RenderMessage: React.ComponentType<RenderMessageProps>;\n  ImageRenderer: React.ComponentType<ImageRendererProps>;\n\n  /**\n   * Callback function to regenerate the assistant's response\n   */\n  onRegenerate?: (messageId: string) => void;\n\n  /**\n   * Callback function when the message is copied\n   */\n  onCopy?: (message: string) => void;\n\n  /**\n   * Callback function for thumbs up feedback\n   */\n  onThumbsUp?: (message: Message) => void;\n\n  /**\n   * Callback function for thumbs down feedback\n   */\n  onThumbsDown?: (message: Message) => void;\n\n  /**\n   * A list of markdown components to render in assistant message.\n   * Useful when you want to render custom elements in the message (e.g a reference tag element)\n   */\n  markdownTagRenderers?: ComponentsMap;\n}\n\nexport interface Renderer {\n  content: string;\n}\n\nexport interface UserMessageProps {\n  message?: UserMessage;\n  ImageRenderer: React.ComponentType<ImageRendererProps>;\n}\n\nexport interface AssistantMessageProps {\n  /**\n   * The message content from the assistant\n   */\n\n  message?: AIMessage;\n\n  /**\n   * Indicates if this is the last message\n   */\n  isCurrentMessage?: boolean;\n\n  /**\n   * Whether a response is loading, this is when the LLM is thinking of a response but hasn't finished yet.\n   */\n  isLoading: boolean;\n\n  /**\n   * Whether a response is generating, this is when the LLM is actively generating and streaming content.\n   */\n  isGenerating: boolean;\n\n  /**\n   * Callback function to regenerate the assistant's response\n   */\n  onRegenerate?: () => void;\n\n  /**\n   * Callback function when the message is copied\n   */\n  onCopy?: (message: string) => void;\n\n  /**\n   * Callback function for thumbs up feedback\n   */\n  onThumbsUp?: (message: Message) => void;\n\n  /**\n   * Callback function for thumbs down feedback\n   */\n  onThumbsDown?: (message: Message) => void;\n\n  /**\n   * A list of markdown components to render in assistant message.\n   * Useful when you want to render custom elements in the message (e.g a reference tag element)\n   */\n  markdownTagRenderers?: ComponentsMap;\n\n  /**\n   * A custom image rendering component to use instead of the default.\n   */\n  ImageRenderer?: React.ComponentType<ImageRendererProps>;\n}\n\nexport interface RenderMessageProps {\n  message: Message;\n  inProgress: boolean;\n  index: number;\n  isCurrentMessage: boolean;\n  actionResult?: string;\n  AssistantMessage?: React.ComponentType<AssistantMessageProps>;\n  UserMessage?: React.ComponentType<UserMessageProps>;\n  ImageRenderer?: React.ComponentType<ImageRendererProps>;\n\n  /**\n   * Callback function to regenerate the assistant's response\n   */\n  onRegenerate?: (messageId: string) => void;\n\n  /**\n   * Callback function when the message is copied\n   */\n  onCopy?: (message: string) => void;\n\n  /**\n   * Callback function for thumbs up feedback\n   */\n  onThumbsUp?: (message: Message) => void;\n\n  /**\n   * Callback function for thumbs down feedback\n   */\n  onThumbsDown?: (message: Message) => void;\n\n  /**\n   * A list of markdown components to render in assistant message.\n   * Useful when you want to render custom elements in the message (e.g a reference tag element)\n   */\n  markdownTagRenderers?: ComponentsMap;\n}\n\nexport interface InputProps {\n  inProgress: boolean;\n  onSend: (text: string) => Promise<Message>;\n  isVisible?: boolean;\n  onStop?: () => void;\n  onUpload?: () => void;\n  hideStopButton?: boolean;\n}\n\nexport interface RenderSuggestionsListProps {\n  suggestions: CopilotChatSuggestion[];\n  onSuggestionClick: (message: string) => void;\n}\n\nexport interface ImageRendererProps {\n  /**\n   * The image data containing format and bytes\n   */\n  image: ImageData;\n\n  /**\n   * Optional content to display alongside the image\n   */\n  content?: string;\n\n  /**\n   * Additional CSS class name for styling\n   */\n  className?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/components/index.d.ts

@@ -1,4 +1,4 @@
-export { AssistantMessageProps, ButtonProps, ComponentsMap, HeaderProps, ImageRendererProps, InputProps, MessagesProps, RenderMessageProps, RenderSuggestionsListProps, Renderer, SuggestionsProps, UserMessageProps, WindowProps } from './chat/props.js';
+export { AssistantMessageProps, ButtonProps, ComponentsMap, CopilotObservabilityHooks, HeaderProps, ImageRendererProps, InputProps, MessagesProps, RenderMessageProps, RenderSuggestionsListProps, Renderer, SuggestionsProps, UserMessageProps, WindowProps } from './chat/props.js';
 export { CopilotPopup } from './chat/Popup.js';
 export { CopilotSidebar } from './chat/Sidebar.js';
 export { CopilotChat } from './chat/Chat.js';

package/dist/components/index.js

@@ -2179,6 +2179,7 @@ function RenderMessage(_a) {
 var import_react14 = __toESM(require("react"));
 var import_react_core9 = require("@copilotkit/react-core");
 var import_shared3 = require("@copilotkit/shared");
+var import_shared4 = require("@copilotkit/shared");
 var import_react_core10 = require("@copilotkit/react-core");
 
 // src/components/chat/ImageUploadQueue.tsx
@@ -2324,11 +2325,31 @@ function CopilotChat({
   ImageRenderer: ImageRenderer2 = ImageRenderer,
   imageUploadsEnabled,
   inputFileAccept = "image/*",
-  hideStopButton
+  hideStopButton,
+  observabilityHooks
 }) {
-  const { additionalInstructions, setChatInstructions } = (0, import_react_core9.useCopilotContext)();
+  const { additionalInstructions, setChatInstructions, copilotApiConfig, setBannerError } = (0, import_react_core9.useCopilotContext)();
   const [selectedImages, setSelectedImages] = (0, import_react14.useState)([]);
   const fileInputRef = (0, import_react14.useRef)(null);
+  const triggerObservabilityHook = (0, import_react14.useCallback)(
+    (hookName, ...args) => {
+      if (copilotApiConfig.publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks[hookName])) {
+        observabilityHooks[hookName](...args);
+      }
+      if ((observabilityHooks == null ? void 0 : observabilityHooks[hookName]) && !copilotApiConfig.publicApiKey) {
+        setBannerError(
+          new import_shared3.CopilotKitError({
+            message: "observabilityHooks requires a publicApiKey to function.",
+            code: import_shared3.CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
+            severity: import_shared3.Severity.CRITICAL,
+            visibility: import_shared3.ErrorVisibility.BANNER
+          })
+        );
+        import_shared3.styledConsole.publicApiKeyRequired("observabilityHooks");
+      }
+    },
+    [copilotApiConfig.publicApiKey, observabilityHooks]
+  );
   (0, import_react14.useEffect)(() => {
     if (!imageUploadsEnabled)
       return;
@@ -2401,12 +2422,24 @@ function CopilotChat({
     onStopGeneration,
     onReloadMessages
   );
+  const prevIsLoading = (0, import_react14.useRef)(isLoading);
+  (0, import_react14.useEffect)(() => {
+    if (prevIsLoading.current !== isLoading) {
+      if (isLoading) {
+        triggerObservabilityHook("onChatStarted");
+      } else {
+        triggerObservabilityHook("onChatStopped");
+      }
+      prevIsLoading.current = isLoading;
+    }
+  }, [isLoading, triggerObservabilityHook]);
   const handleSendMessage = (text) => {
     const images = selectedImages;
     setSelectedImages([]);
     if (fileInputRef.current) {
       fileInputRef.current.value = "";
     }
+    triggerObservabilityHook("onMessageSent", text);
     return sendMessage(text, images);
   };
   const chatContext = import_react14.default.useContext(ChatContext);
@@ -2415,12 +2448,14 @@ function CopilotChat({
     if (onRegenerate) {
       onRegenerate(messageId);
     }
+    triggerObservabilityHook("onMessageRegenerated", messageId);
     reloadMessages(messageId);
   };
   const handleCopy = (message) => {
     if (onCopy) {
       onCopy(message);
     }
+    triggerObservabilityHook("onMessageCopied", message);
   };
   const handleImageUpload = (event) => __async(this, null, function* () {
     if (!event.target.files || event.target.files.length === 0) {
@@ -2456,6 +2491,18 @@ function CopilotChat({
   const removeSelectedImage = (index) => {
     setSelectedImages((prev) => prev.filter((_, i) => i !== index));
   };
+  const handleThumbsUp = (message) => {
+    if (onThumbsUp) {
+      onThumbsUp(message);
+    }
+    triggerObservabilityHook("onFeedbackGiven", message.id, "thumbsUp");
+  };
+  const handleThumbsDown = (message) => {
+    if (onThumbsDown) {
+      onThumbsDown(message);
+    }
+    triggerObservabilityHook("onFeedbackGiven", message.id, "thumbsDown");
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Messages2,
@@ -2467,8 +2514,8 @@ function CopilotChat({
         inProgress: isLoading,
         onRegenerate: handleRegenerate,
         onCopy: handleCopy,
-        onThumbsUp,
-        onThumbsDown,
+        onThumbsUp: handleThumbsUp,
+        onThumbsDown: handleThumbsDown,
         markdownTagRenderers,
         ImageRenderer: ImageRenderer2,
         children: currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -2624,7 +2671,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
     let firstMessage = null;
     if (messageContent.trim().length > 0) {
       const textMessage = {
-        id: (0, import_shared3.randomId)(),
+        id: (0, import_shared4.randomId)(),
         role: "user",
         content: messageContent
       };
@@ -2646,7 +2693,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
     if (images.length > 0) {
       for (let i = 0; i < images.length; i++) {
         const imageMessage = {
-          id: (0, import_shared3.randomId)(),
+          id: (0, import_shared4.randomId)(),
           role: "user",
           image: {
             format: images[i].contentType.replace("image/", ""),
@@ -2660,7 +2707,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
       }
     }
     if (!firstMessage) {
-      return { role: "user", content: "", id: (0, import_shared3.randomId)() };
+      return { role: "user", content: "", id: (0, import_shared4.randomId)() };
     }
     return firstMessage;
   });
@@ -2759,7 +2806,75 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
 };
 
 // src/components/chat/Modal.tsx
+var import_react_core11 = require("@copilotkit/react-core");
 var import_jsx_runtime24 = require("react/jsx-runtime");
+var CopilotModalInner = (_a) => {
+  var _b = _a, {
+    observabilityHooks,
+    onSetOpen,
+    clickOutsideToClose,
+    hitEscapeToClose,
+    shortcut,
+    className,
+    children,
+    Window: Window2,
+    Button: Button2,
+    Header: Header2
+  } = _b, chatProps = __objRest(_b, [
+    "observabilityHooks",
+    "onSetOpen",
+    "clickOutsideToClose",
+    "hitEscapeToClose",
+    "shortcut",
+    "className",
+    "children",
+    "Window",
+    "Button",
+    "Header"
+  ]);
+  const { copilotApiConfig } = (0, import_react_core11.useCopilotContext)();
+  const triggerObservabilityHook = (0, import_react15.useCallback)(
+    (hookName, ...args) => {
+      if (copilotApiConfig.publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks[hookName])) {
+        observabilityHooks[hookName](...args);
+      }
+    },
+    [copilotApiConfig.publicApiKey, observabilityHooks]
+  );
+  const { open } = useChatContext();
+  const prevOpen = (0, import_react15.useRef)(open);
+  (0, import_react15.useEffect)(() => {
+    if (prevOpen.current !== open) {
+      onSetOpen == null ? void 0 : onSetOpen(open);
+      if (open) {
+        triggerObservabilityHook("onChatExpanded");
+      } else {
+        triggerObservabilityHook("onChatMinimized");
+      }
+      prevOpen.current = open;
+    }
+  }, [open, onSetOpen, triggerObservabilityHook]);
+  const memoizedHeader = (0, import_react15.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Header2, {}), [Header2]);
+  const memoizedChildren = (0, import_react15.useMemo)(() => children, [children]);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    memoizedChildren,
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button2, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        Window2,
+        {
+          clickOutsideToClose,
+          shortcut,
+          hitEscapeToClose,
+          children: [
+            memoizedHeader,
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CopilotChat, __spreadProps(__spreadValues({}, chatProps), { observabilityHooks }))
+          ]
+        }
+      )
+    ] })
+  ] });
+};
 var CopilotModal = (_a) => {
   var _b = _a, {
     instructions,
@@ -2788,7 +2903,8 @@ var CopilotModal = (_a) => {
     onRegenerate,
     markdownTagRenderers,
     className,
-    children
+    children,
+    observabilityHooks
   } = _b, props = __objRest(_b, [
     "instructions",
     "defaultOpen",
@@ -2816,52 +2932,41 @@ var CopilotModal = (_a) => {
     "onRegenerate",
     "markdownTagRenderers",
     "className",
-    "children"
+    "children",
+    "observabilityHooks"
   ]);
   const [openState, setOpenState] = import_react15.default.useState(defaultOpen);
-  const setOpen = (open) => {
-    onSetOpen == null ? void 0 : onSetOpen(open);
-    setOpenState(open);
-  };
-  const memoizedHeader = (0, import_react15.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Header2, {}), [Header2]);
-  const memoizedChildren = (0, import_react15.useMemo)(() => children, [children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ChatContextProvider, { icons, labels, open: openState, setOpen, children: [
-    memoizedChildren,
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button2, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-        Window2,
-        {
-          clickOutsideToClose,
-          shortcut,
-          hitEscapeToClose,
-          children: [
-            memoizedHeader,
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-              CopilotChat,
-              __spreadProps(__spreadValues({}, props), {
-                instructions,
-                onSubmitMessage,
-                onStopGeneration,
-                onReloadMessages,
-                makeSystemMessage,
-                onInProgress,
-                Messages: Messages2,
-                Input: Input2,
-                AssistantMessage: AssistantMessage2,
-                UserMessage: UserMessage2,
-                onThumbsUp,
-                onThumbsDown,
-                onCopy,
-                onRegenerate,
-                markdownTagRenderers
-              })
-            )
-          ]
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChatContextProvider, { icons, labels, open: openState, setOpen: setOpenState, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    CopilotModalInner,
+    __spreadProps(__spreadValues({
+      observabilityHooks,
+      onSetOpen,
+      clickOutsideToClose: clickOutsideToClose != null ? clickOutsideToClose : true,
+      hitEscapeToClose: hitEscapeToClose != null ? hitEscapeToClose : true,
+      shortcut: shortcut != null ? shortcut : "/",
+      className,
+      Window: Window2,
+      Button: Button2,
+      Header: Header2,
+      instructions,
+      onSubmitMessage,
+      onStopGeneration,
+      onReloadMessages,
+      makeSystemMessage,
+      onInProgress,
+      Messages: Messages2,
+      Input: Input2,
+      AssistantMessage: AssistantMessage2,
+      UserMessage: UserMessage2,
+      onThumbsUp,
+      onThumbsDown,
+      onCopy,
+      onRegenerate,
+      markdownTagRenderers
+    }, props), {
+      children
+    })
+  ) });
 };
 
 // src/components/chat/Popup.tsx