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

package/dist/components/chat/Chat.js

@@ -1538,6 +1538,7 @@ function RenderMessage(_a) {
 var import_react10 = __toESM(require("react"));
 var import_react_core5 = require("@copilotkit/react-core");
 var import_shared = require("@copilotkit/shared");
+var import_shared2 = require("@copilotkit/shared");
 var import_react_core6 = require("@copilotkit/react-core");
 
 // src/components/chat/ImageUploadQueue.tsx
@@ -1683,11 +1684,31 @@ function CopilotChat({
   ImageRenderer: ImageRenderer2 = ImageRenderer,
   imageUploadsEnabled,
   inputFileAccept = "image/*",
-  hideStopButton
+  hideStopButton,
+  observabilityHooks
 }) {
-  const { additionalInstructions, setChatInstructions } = (0, import_react_core5.useCopilotContext)();
+  const { additionalInstructions, setChatInstructions, copilotApiConfig, setBannerError } = (0, import_react_core5.useCopilotContext)();
   const [selectedImages, setSelectedImages] = (0, import_react10.useState)([]);
   const fileInputRef = (0, import_react10.useRef)(null);
+  const triggerObservabilityHook = (0, import_react10.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_shared.CopilotKitError({
+            message: "observabilityHooks requires a publicApiKey to function.",
+            code: import_shared.CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
+            severity: import_shared.Severity.CRITICAL,
+            visibility: import_shared.ErrorVisibility.BANNER
+          })
+        );
+        import_shared.styledConsole.publicApiKeyRequired("observabilityHooks");
+      }
+    },
+    [copilotApiConfig.publicApiKey, observabilityHooks]
+  );
   (0, import_react10.useEffect)(() => {
     if (!imageUploadsEnabled)
       return;
@@ -1760,12 +1781,24 @@ function CopilotChat({
     onStopGeneration,
     onReloadMessages
   );
+  const prevIsLoading = (0, import_react10.useRef)(isLoading);
+  (0, import_react10.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_react10.default.useContext(ChatContext);
@@ -1774,12 +1807,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) {
@@ -1815,6 +1850,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_runtime16.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       Messages2,
@@ -1826,8 +1873,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_runtime16.jsx)(
@@ -1983,7 +2030,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
     let firstMessage = null;
     if (messageContent.trim().length > 0) {
       const textMessage = {
-        id: (0, import_shared.randomId)(),
+        id: (0, import_shared2.randomId)(),
         role: "user",
         content: messageContent
       };
@@ -2005,7 +2052,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
     if (images.length > 0) {
       for (let i = 0; i < images.length; i++) {
         const imageMessage = {
-          id: (0, import_shared.randomId)(),
+          id: (0, import_shared2.randomId)(),
           role: "user",
           image: {
             format: images[i].contentType.replace("image/", ""),
@@ -2019,7 +2066,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
       }
     }
     if (!firstMessage) {
-      return { role: "user", content: "", id: (0, import_shared.randomId)() };
+      return { role: "user", content: "", id: (0, import_shared2.randomId)() };
     }
     return firstMessage;
   });