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

package/dist/components/chat/index.js

@@ -533,9 +533,7 @@ var Button = ({}) => {
 
 // src/components/dev-console/utils.ts
 var import_react_core2 = require("@copilotkit/react-core");
-function shouldShowDevConsole(showDevConsole) {
-  return showDevConsole;
-}
+var import_react_core3 = require("@copilotkit/react-core");
 function getPublishedCopilotKitVersion(current, forceCheck = false) {
   return __async(this, null, function* () {
     const LOCAL_STORAGE_KEY = "__copilotkit_version_check__";
@@ -655,7 +653,7 @@ function logMessages(context) {
 }
 
 // src/components/dev-console/console.tsx
-var import_react_core3 = require("@copilotkit/react-core");
+var import_react_core4 = require("@copilotkit/react-core");
 var import_react4 = require("react");
 
 // src/components/dev-console/icons.tsx
@@ -845,10 +843,10 @@ function CopilotKitHelpModal() {
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function CopilotDevConsole() {
   const currentVersion = import_shared2.COPILOTKIT_VERSION;
-  const context = (0, import_react_core3.useCopilotContext)();
+  const context = (0, import_react_core4.useCopilotContext)();
   const [showDevConsole, setShowDevConsole] = (0, import_react4.useState)(false);
   (0, import_react4.useEffect)(() => {
-    setShowDevConsole(shouldShowDevConsole(context.showDevConsole));
+    setShowDevConsole((0, import_react_core3.shouldShowDevConsole)(context.showDevConsole));
   }, [context.showDevConsole]);
   const dontRunTwiceInDevMode = (0, import_react4.useRef)(false);
   const [versionStatus, setVersionStatus] = (0, import_react4.useState)("unknown");
@@ -974,8 +972,8 @@ function DebugMenuButton({
   checkForUpdates,
   mode
 }) {
-  const context = (0, import_react_core3.useCopilotContext)();
-  const messagesContext = (0, import_react_core3.useCopilotMessagesContext)();
+  const context = (0, import_react_core4.useCopilotContext)();
+  const messagesContext = (0, import_react_core4.useCopilotMessagesContext)();
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react5.Menu, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       import_react5.MenuButton,
@@ -1037,7 +1035,7 @@ var Header = ({}) => {
 
 // src/components/chat/Messages.tsx
 var import_react6 = require("react");
-var import_react_core4 = require("@copilotkit/react-core");
+var import_react_core5 = require("@copilotkit/react-core");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var Messages = ({
   inProgress,
@@ -1052,7 +1050,7 @@ var Messages = ({
   markdownTagRenderers
 }) => {
   const { labels } = useChatContext();
-  const { visibleMessages, interrupt } = (0, import_react_core4.useCopilotChat)();
+  const { visibleMessages, interrupt } = (0, import_react_core5.useCopilotChatInternal)();
   const initialMessages = (0, import_react6.useMemo)(() => makeInitialMessages(labels.initial), [labels.initial]);
   const messages = [...initialMessages, ...visibleMessages];
   const { messagesContainerRef, messagesEndRef } = useScrollToBottom(messages);
@@ -1225,7 +1223,7 @@ var AutoResizingTextarea = (0, import_react7.forwardRef)(
 var Textarea_default = AutoResizingTextarea;
 
 // src/hooks/use-push-to-talk.tsx
-var import_react_core5 = require("@copilotkit/react-core");
+var import_react_core6 = require("@copilotkit/react-core");
 var import_runtime_client_gql = require("@copilotkit/runtime-client-gql");
 var import_react8 = require("react");
 var startRecording = (mediaStreamRef, mediaRecorderRef, audioContextRef, recordedChunks, onStop) => __async(void 0, null, function* () {
@@ -1281,8 +1279,8 @@ var usePushToTalk = ({
   const audioContextRef = (0, import_react8.useRef)(null);
   const mediaRecorderRef = (0, import_react8.useRef)(null);
   const recordedChunks = (0, import_react8.useRef)([]);
-  const generalContext = (0, import_react_core5.useCopilotContext)();
-  const messagesContext = (0, import_react_core5.useCopilotMessagesContext)();
+  const generalContext = (0, import_react_core6.useCopilotContext)();
+  const messagesContext = (0, import_react_core6.useCopilotMessagesContext)();
   const context = __spreadValues(__spreadValues({}, generalContext), messagesContext);
   const [startReadingFromMessageId, setStartReadingFromMessageId] = (0, import_react8.useState)(null);
   (0, import_react8.useEffect)(() => {
@@ -1329,7 +1327,7 @@ var usePushToTalk = ({
 };
 
 // src/components/chat/Input.tsx
-var import_react_core6 = require("@copilotkit/react-core");
+var import_react_core7 = require("@copilotkit/react-core");
 
 // src/hooks/use-dark-mode.ts
 var useDarkMode = () => {
@@ -1370,7 +1368,7 @@ var Input = ({
 }) => {
   var _a, _b;
   const context = useChatContext();
-  const copilotContext = (0, import_react_core6.useCopilotContext)();
+  const copilotContext = (0, import_react_core7.useCopilotContext)();
   const showPoweredBy = !((_a = copilotContext.copilotApiConfig) == null ? void 0 : _a.publicApiKey);
   const pushToTalkConfigured = copilotContext.copilotApiConfig.textToSpeechUrl !== void 0 && copilotContext.copilotApiConfig.transcribeAudioUrl !== void 0;
   const textareaRef = (0, import_react9.useRef)(null);
@@ -2177,9 +2175,10 @@ function RenderMessage(_a) {
 
 // src/components/chat/Chat.tsx
 var import_react14 = __toESM(require("react"));
-var import_react_core8 = require("@copilotkit/react-core");
-var import_shared3 = require("@copilotkit/shared");
 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
 var import_jsx_runtime20 = require("react/jsx-runtime");
@@ -2260,12 +2259,12 @@ var ImageUploadQueue = ({
 };
 
 // src/components/chat/Suggestion.tsx
-var import_react_core7 = require("@copilotkit/react-core");
+var import_react_core8 = require("@copilotkit/react-core");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function Suggestion({ title, onClick, partial, className }) {
   if (!title)
     return null;
-  const { isLoading } = (0, import_react_core7.useCopilotChat)();
+  const { isLoading } = (0, import_react_core8.useCopilotChatInternal)();
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "button",
     {
@@ -2324,11 +2323,31 @@ function CopilotChat({
   ImageRenderer: ImageRenderer2 = ImageRenderer,
   imageUploadsEnabled,
   inputFileAccept = "image/*",
-  hideStopButton
+  hideStopButton,
+  observabilityHooks
 }) {
-  const { additionalInstructions, setChatInstructions } = (0, import_react_core8.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 +2420,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 +2446,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 +2489,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 +2512,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)(
@@ -2538,11 +2583,11 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
     generateSuggestions,
     resetSuggestions: resetSuggestionsFromHook,
     isLoadingSuggestions
-  } = (0, import_react_core8.useCopilotChat)({
+  } = (0, import_react_core9.useCopilotChatInternal)({
     makeSystemMessage
   });
-  const generalContext = (0, import_react_core8.useCopilotContext)();
-  const messagesContext = (0, import_react_core8.useCopilotMessagesContext)();
+  const generalContext = (0, import_react_core9.useCopilotContext)();
+  const messagesContext = (0, import_react_core9.useCopilotMessagesContext)();
   const { actions } = generalContext;
   const [suggestionsFailed, setSuggestionsFailed] = (0, import_react14.useState)(false);
   const hasGeneratedInitialSuggestions = (0, import_react14.useRef)(false);
@@ -2624,7 +2669,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 +2691,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 +2705,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;
   });
@@ -2685,7 +2730,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
   });
   const runCurrentAgent = (hint) => __async(void 0, null, function* () {
     if (generalContext.agentSession) {
-      yield (0, import_react_core9.runAgent)(
+      yield (0, import_react_core10.runAgent)(
         generalContext.agentSession.agentName,
         stableContext,
         appendMessage,
@@ -2696,7 +2741,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
   });
   const stopCurrentAgent = () => {
     if (generalContext.agentSession) {
-      (0, import_react_core9.stopAgent)(generalContext.agentSession.agentName, stableContext);
+      (0, import_react_core10.stopAgent)(generalContext.agentSession.agentName, stableContext);
     }
   };
   const setCurrentAgentState = (state) => {
@@ -2759,7 +2804,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 +2901,8 @@ var CopilotModal = (_a) => {
     onRegenerate,
     markdownTagRenderers,
     className,
-    children
+    children,
+    observabilityHooks
   } = _b, props = __objRest(_b, [
     "instructions",
     "defaultOpen",
@@ -2816,52 +2930,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