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

package/dist/components/index.mjs

@@ -2,12 +2,12 @@ import "../chunk-MMVDU6DF.mjs";
 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";
@@ -24,7 +24,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/index.d.ts

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

package/dist/index.js

@@ -2181,6 +2181,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
@@ -2326,11 +2327,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;
@@ -2403,12 +2424,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);
@@ -2417,12 +2450,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) {
@@ -2458,6 +2493,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,
@@ -2469,8 +2516,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)(
@@ -2626,7 +2673,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
       };
@@ -2648,7 +2695,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/", ""),
@@ -2662,7 +2709,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;
   });
@@ -2761,7 +2808,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,
@@ -2790,7 +2905,8 @@ var CopilotModal = (_a) => {
     onRegenerate,
     markdownTagRenderers,
     className,
-    children
+    children,
+    observabilityHooks
   } = _b, props = __objRest(_b, [
     "instructions",
     "defaultOpen",
@@ -2818,52 +2934,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
@@ -2895,8 +3000,8 @@ function CopilotSidebar(props) {
 
 // src/hooks/use-copilot-chat-suggestions.tsx
 var import_react17 = require("react");
-var import_react_core11 = require("@copilotkit/react-core");
-var import_shared4 = require("@copilotkit/shared");
+var import_react_core12 = require("@copilotkit/react-core");
+var import_shared5 = require("@copilotkit/shared");
 function useCopilotChatSuggestions({
   available = "enabled",
   instructions,
@@ -2904,11 +3009,11 @@ function useCopilotChatSuggestions({
   minSuggestions = 1,
   maxSuggestions = 3
 }, dependencies = []) {
-  const context = (0, import_react_core11.useCopilotContext)();
+  const context = (0, import_react_core12.useCopilotContext)();
   (0, import_react17.useEffect)(() => {
     if (available === "disabled")
       return;
-    const id = (0, import_shared4.randomId)();
+    const id = (0, import_shared5.randomId)();
     context.addChatSuggestionConfiguration(id, {
       instructions,
       minSuggestions,