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

package/dist/index.mjs

@@ -4,29 +4,29 @@ import "./chunk-MMVDU6DF.mjs";
 import "./chunk-SC6JRFAJ.mjs";
 import {
   CopilotSidebar
-} from "./chunk-QNG5G23E.mjs";
+} from "./chunk-MYWIJSW6.mjs";
 import "./chunk-WB3YULQ4.mjs";
 import {
   CopilotPopup
-} from "./chunk-PF3QW6U5.mjs";
-import "./chunk-DNSSBMAS.mjs";
+} from "./chunk-BXX6RM44.mjs";
+import "./chunk-BY42E5VF.mjs";
 import "./chunk-C3GSYRC3.mjs";
-import "./chunk-GVKA7RQQ.mjs";
+import "./chunk-GDSZGYCE.mjs";
 import "./chunk-V7W6IM2V.mjs";
 import {
   CopilotDevConsole
-} from "./chunk-SGFUVPDB.mjs";
+} from "./chunk-FFJHOZX6.mjs";
 import "./chunk-Q5V6S67N.mjs";
 import {
   shouldShowDevConsole
-} from "./chunk-QN7T3GWI.mjs";
+} from "./chunk-JY2CSDKN.mjs";
 import "./chunk-KXE2JCUH.mjs";
 import "./chunk-NRA3CFEE.mjs";
 import "./chunk-BH6PCAAL.mjs";
 import "./chunk-UFN2VWSR.mjs";
 import {
   CopilotChat
-} from "./chunk-7L34XQRL.mjs";
+} from "./chunk-K344MVUT.mjs";
 import "./chunk-JHUTTP5C.mjs";
 import {
   AssistantMessage
@@ -39,10 +39,10 @@ import {
 } from "./chunk-VVL6JFCJ.mjs";
 import {
   Suggestions
-} from "./chunk-O7KTFUAN.mjs";
+} from "./chunk-226ZMOE3.mjs";
 import {
   Suggestion
-} from "./chunk-Q2467VHZ.mjs";
+} from "./chunk-W26XFBEG.mjs";
 import "./chunk-PLHTVHUW.mjs";
 import "./chunk-DTRPPNSA.mjs";
 import "./chunk-CGEAG65D.mjs";
@@ -50,7 +50,7 @@ import "./chunk-QIOJXTIQ.mjs";
 import {
   Markdown
 } from "./chunk-E6MQUIZW.mjs";
-import "./chunk-WHDNKXMP.mjs";
+import "./chunk-U5ATIGWH.mjs";
 import {
   useChatContext
 } from "./chunk-IEMQ2SQW.mjs";

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.10.0-next.3",
+  "version": "1.10.0-next.5",
   "sideEffects": [
     "**/*.css"
   ],
@@ -40,8 +40,8 @@
     "ts-jest": "^29.1.1",
     "tsup": "^6.7.0",
     "typescript": "^5.2.3",
-    "tailwind-config": "1.4.6",
     "eslint-config-custom": "1.4.6",
+    "tailwind-config": "1.4.6",
     "tsconfig": "1.4.6"
   },
   "dependencies": {
@@ -51,9 +51,9 @@
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "@copilotkit/runtime-client-gql": "1.10.0-next.3",
-    "@copilotkit/shared": "1.10.0-next.3",
-    "@copilotkit/react-core": "1.10.0-next.3"
+    "@copilotkit/react-core": "1.10.0-next.5",
+    "@copilotkit/runtime-client-gql": "1.10.0-next.5",
+    "@copilotkit/shared": "1.10.0-next.5"
   },
   "keywords": [
     "copilotkit",

package/src/components/chat/Chat.tsx

@@ -27,6 +27,23 @@
  * />
  * ```
  *
+ * ### With Observability Hooks
+ *
+ * To monitor user interactions, provide the `observabilityHooks` prop.
+ * **Note:** This requires a `publicApiKey` in the `<CopilotKit>` provider.
+ *
+ * ```tsx
+ * <CopilotKit publicApiKey="YOUR_PUBLIC_API_KEY">
+ *   <CopilotChat
+ *     observabilityHooks={{
+ *       onMessageSent: (message) => {
+ *         console.log("Message sent:", message);
+ *       },
+ *     }}
+ *   />
+ * </CopilotKit>
+ * ```
+ *
  * ### Look & Feel
  *
  * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
@@ -60,16 +77,24 @@ import { ImageRenderer as DefaultImageRenderer } from "./messages/ImageRenderer"
 import React, { useEffect, useRef, useState, useCallback, useMemo } from "react";
 import {
   SystemMessageFunction,
-  useCopilotChat,
+  useCopilotChatInternal as useCopilotChat,
   useCopilotContext,
   useCopilotMessagesContext,
 } from "@copilotkit/react-core";
 import type { SuggestionItem } from "@copilotkit/react-core";
-import { Message } from "@copilotkit/shared";
+import {
+  CopilotKitError,
+  CopilotKitErrorCode,
+  Message,
+  Severity,
+  ErrorVisibility,
+  styledConsole,
+} from "@copilotkit/shared";
 import { randomId } from "@copilotkit/shared";
 import {
   AssistantMessageProps,
   ComponentsMap,
+  CopilotObservabilityHooks,
   ImageRendererProps,
   InputProps,
   MessagesProps,
@@ -250,6 +275,12 @@ export interface CopilotChatProps {
   children?: React.ReactNode;
 
   hideStopButton?: boolean;
+
+  /**
+   * Event hooks for CopilotKit chat events.
+   * These hooks only work when publicApiKey is provided.
+   */
+  observabilityHooks?: CopilotObservabilityHooks;
 }
 
 interface OnStopGenerationArguments {
@@ -336,11 +367,34 @@ export function CopilotChat({
   imageUploadsEnabled,
   inputFileAccept = "image/*",
   hideStopButton,
+  observabilityHooks,
 }: CopilotChatProps) {
-  const { additionalInstructions, setChatInstructions } = useCopilotContext();
+  const { additionalInstructions, setChatInstructions, copilotApiConfig, setBannerError } =
+    useCopilotContext();
   const [selectedImages, setSelectedImages] = useState<Array<ImageUpload>>([]);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  // Helper function to trigger event hooks only if publicApiKey is provided
+  const triggerObservabilityHook = useCallback(
+    (hookName: keyof CopilotObservabilityHooks, ...args: any[]) => {
+      if (copilotApiConfig.publicApiKey && observabilityHooks?.[hookName]) {
+        (observabilityHooks[hookName] as any)(...args);
+      }
+      if (observabilityHooks?.[hookName] && !copilotApiConfig.publicApiKey) {
+        setBannerError(
+          new CopilotKitError({
+            message: "observabilityHooks requires a publicApiKey to function.",
+            code: CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
+            severity: Severity.CRITICAL,
+            visibility: ErrorVisibility.BANNER,
+          }),
+        );
+        styledConsole.publicApiKeyRequired("observabilityHooks");
+      }
+    },
+    [copilotApiConfig.publicApiKey, observabilityHooks],
+  );
+
   // Clipboard paste handler
   useEffect(() => {
     if (!imageUploadsEnabled) return;
@@ -430,6 +484,19 @@ export function CopilotChat({
     onReloadMessages,
   );
 
+  // Track loading state changes for chat start/stop events
+  const prevIsLoading = useRef(isLoading);
+  useEffect(() => {
+    if (prevIsLoading.current !== isLoading) {
+      if (isLoading) {
+        triggerObservabilityHook("onChatStarted");
+      } else {
+        triggerObservabilityHook("onChatStopped");
+      }
+      prevIsLoading.current = isLoading;
+    }
+  }, [isLoading, triggerObservabilityHook]);
+
   // Wrapper for sendMessage to clear selected images
   const handleSendMessage = (text: string) => {
     const images = selectedImages;
@@ -438,6 +505,9 @@ export function CopilotChat({
       fileInputRef.current.value = "";
     }
 
+    // Trigger message sent event
+    triggerObservabilityHook("onMessageSent", text);
+
     return sendMessage(text, images);
   };
 
@@ -449,6 +519,9 @@ export function CopilotChat({
       onRegenerate(messageId);
     }
 
+    // Trigger message regenerated event
+    triggerObservabilityHook("onMessageRegenerated", messageId);
+
     reloadMessages(messageId);
   };
 
@@ -456,6 +529,9 @@ export function CopilotChat({
     if (onCopy) {
       onCopy(message);
     }
+
+    // Trigger message copied event
+    triggerObservabilityHook("onMessageCopied", message);
   };
 
   const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -496,6 +572,24 @@ export function CopilotChat({
     setSelectedImages((prev) => prev.filter((_, i) => i !== index));
   };
 
+  const handleThumbsUp = (message: Message) => {
+    if (onThumbsUp) {
+      onThumbsUp(message);
+    }
+
+    // Trigger feedback given event
+    triggerObservabilityHook("onFeedbackGiven", message.id, "thumbsUp");
+  };
+
+  const handleThumbsDown = (message: Message) => {
+    if (onThumbsDown) {
+      onThumbsDown(message);
+    }
+
+    // Trigger feedback given event
+    triggerObservabilityHook("onFeedbackGiven", message.id, "thumbsDown");
+  };
+
   return (
     <WrappedCopilotChat icons={icons} labels={labels} className={className}>
       <Messages
@@ -506,8 +600,8 @@ export function CopilotChat({
         inProgress={isLoading}
         onRegenerate={handleRegenerate}
         onCopy={handleCopy}
-        onThumbsUp={onThumbsUp}
-        onThumbsDown={onThumbsDown}
+        onThumbsUp={handleThumbsUp}
+        onThumbsDown={handleThumbsDown}
         markdownTagRenderers={markdownTagRenderers}
         ImageRenderer={ImageRenderer}
       >

package/src/components/chat/Messages.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useMemo, useRef } from "react";
 import { MessagesProps } from "./props";
 import { useChatContext } from "./ChatContext";
-import { Message, Role } from "@copilotkit/shared";
-import { useCopilotChat } from "@copilotkit/react-core";
+import { Message } from "@copilotkit/shared";
+import { useCopilotChatInternal as useCopilotChat } from "@copilotkit/react-core";
 
 export const Messages = ({
   inProgress,

package/src/components/chat/Modal.tsx

@@ -1,6 +1,6 @@
-import React, { useMemo } from "react";
-import { ChatContextProvider } from "./ChatContext";
-import { ButtonProps, HeaderProps, WindowProps } from "./props";
+import React, { useMemo, useCallback, useEffect, useRef } from "react";
+import { ChatContextProvider, useChatContext } from "./ChatContext";
+import { ButtonProps, HeaderProps, WindowProps, CopilotObservabilityHooks } from "./props";
 import { Window as DefaultWindow } from "./Window";
 import { Button as DefaultButton } from "./Button";
 import { Header as DefaultHeader } from "./Header";
@@ -9,6 +9,7 @@ import { Input as DefaultInput } from "./Input";
 import { CopilotChat, CopilotChatProps } from "./Chat";
 import { AssistantMessage as DefaultAssistantMessage } from "./messages/AssistantMessage";
 import { UserMessage as DefaultUserMessage } from "./messages/UserMessage";
+import { useCopilotContext } from "@copilotkit/react-core";
 
 export interface CopilotModalProps extends CopilotChatProps {
   /**
@@ -57,6 +58,78 @@ export interface CopilotModalProps extends CopilotChatProps {
   Header?: React.ComponentType<HeaderProps>;
 }
 
+// Inner component that has access to the Copilot context
+const CopilotModalInner = ({
+  observabilityHooks,
+  onSetOpen,
+  clickOutsideToClose,
+  hitEscapeToClose,
+  shortcut,
+  className,
+  children,
+  Window,
+  Button,
+  Header,
+  ...chatProps
+}: Omit<CopilotModalProps, "icons" | "labels" | "defaultOpen"> & {
+  Window: React.ComponentType<WindowProps>;
+  Button: React.ComponentType<ButtonProps>;
+  Header: React.ComponentType<HeaderProps>;
+  clickOutsideToClose: boolean;
+  hitEscapeToClose: boolean;
+  shortcut: string;
+}) => {
+  const { copilotApiConfig } = useCopilotContext();
+
+  // Helper function to trigger event hooks only if publicApiKey is provided
+  const triggerObservabilityHook = useCallback(
+    (hookName: keyof CopilotObservabilityHooks, ...args: any[]) => {
+      if (copilotApiConfig.publicApiKey && observabilityHooks?.[hookName]) {
+        (observabilityHooks[hookName] as any)(...args);
+      }
+    },
+    [copilotApiConfig.publicApiKey, observabilityHooks],
+  );
+
+  const { open } = useChatContext();
+  const prevOpen = useRef(open);
+
+  // Monitor open state changes and trigger event hooks
+  useEffect(() => {
+    if (prevOpen.current !== open) {
+      onSetOpen?.(open);
+
+      // Trigger chat minimize/expand events
+      if (open) {
+        triggerObservabilityHook("onChatExpanded");
+      } else {
+        triggerObservabilityHook("onChatMinimized");
+      }
+      prevOpen.current = open;
+    }
+  }, [open, onSetOpen, triggerObservabilityHook]);
+
+  const memoizedHeader = useMemo(() => <Header />, [Header]);
+  const memoizedChildren = useMemo(() => children, [children]);
+
+  return (
+    <>
+      {memoizedChildren}
+      <div className={className}>
+        <Button></Button>
+        <Window
+          clickOutsideToClose={clickOutsideToClose}
+          shortcut={shortcut}
+          hitEscapeToClose={hitEscapeToClose}
+        >
+          {memoizedHeader}
+          <CopilotChat {...chatProps} observabilityHooks={observabilityHooks} />
+        </Window>
+      </div>
+    </>
+  );
+};
+
 export const CopilotModal = ({
   instructions,
   defaultOpen = false,
@@ -85,49 +158,42 @@ export const CopilotModal = ({
   markdownTagRenderers,
   className,
   children,
+  observabilityHooks,
   ...props
 }: CopilotModalProps) => {
   const [openState, setOpenState] = React.useState(defaultOpen);
 
-  const setOpen = (open: boolean) => {
-    onSetOpen?.(open);
-    setOpenState(open);
-  };
-
-  const memoizedHeader = useMemo(() => <Header />, [Header]);
-  const memoizedChildren = useMemo(() => children, [children]);
-
   return (
-    <ChatContextProvider icons={icons} labels={labels} open={openState} setOpen={setOpen}>
-      {memoizedChildren}
-      <div className={className}>
-        <Button></Button>
-        <Window
-          clickOutsideToClose={clickOutsideToClose}
-          shortcut={shortcut}
-          hitEscapeToClose={hitEscapeToClose}
-        >
-          {memoizedHeader}
-          <CopilotChat
-            {...props}
-            instructions={instructions}
-            onSubmitMessage={onSubmitMessage}
-            onStopGeneration={onStopGeneration}
-            onReloadMessages={onReloadMessages}
-            makeSystemMessage={makeSystemMessage}
-            onInProgress={onInProgress}
-            Messages={Messages}
-            Input={Input}
-            AssistantMessage={AssistantMessage}
-            UserMessage={UserMessage}
-            onThumbsUp={onThumbsUp}
-            onThumbsDown={onThumbsDown}
-            onCopy={onCopy}
-            onRegenerate={onRegenerate}
-            markdownTagRenderers={markdownTagRenderers}
-          />
-        </Window>
-      </div>
+    <ChatContextProvider icons={icons} labels={labels} open={openState} setOpen={setOpenState}>
+      <CopilotModalInner
+        observabilityHooks={observabilityHooks}
+        onSetOpen={onSetOpen}
+        clickOutsideToClose={clickOutsideToClose ?? true}
+        hitEscapeToClose={hitEscapeToClose ?? true}
+        shortcut={shortcut ?? "/"}
+        className={className}
+        Window={Window}
+        Button={Button}
+        Header={Header}
+        instructions={instructions}
+        onSubmitMessage={onSubmitMessage}
+        onStopGeneration={onStopGeneration}
+        onReloadMessages={onReloadMessages}
+        makeSystemMessage={makeSystemMessage}
+        onInProgress={onInProgress}
+        Messages={Messages}
+        Input={Input}
+        AssistantMessage={AssistantMessage}
+        UserMessage={UserMessage}
+        onThumbsUp={onThumbsUp}
+        onThumbsDown={onThumbsDown}
+        onCopy={onCopy}
+        onRegenerate={onRegenerate}
+        markdownTagRenderers={markdownTagRenderers}
+        {...props}
+      >
+        {children}
+      </CopilotModalInner>
     </ChatContextProvider>
   );
 };

package/src/components/chat/Popup.tsx

@@ -28,6 +28,26 @@
  * />
  * ```
  *
+ * ### With Observability Hooks
+ *
+ * To monitor user interactions, provide the `observabilityHooks` prop.
+ * **Note:** This requires a `publicApiKey` in the `<CopilotKit>` provider.
+ *
+ * ```tsx
+ * <CopilotKit publicApiKey="YOUR_PUBLIC_API_KEY">
+ *   <CopilotPopup
+ *     observabilityHooks={{
+ *       onChatExpanded: () => {
+ *         console.log("Popup opened");
+ *       },
+ *       onChatMinimized: () => {
+ *         console.log("Popup closed");
+ *       },
+ *     }}
+ *   />
+ * </CopilotKit>
+ * ```
+ *
  * ### Look & Feel
  *
  * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:

package/src/components/chat/Sidebar.tsx

@@ -30,6 +30,28 @@
  * </CopilotSidebar>
  * ```
  *
+ * ### With Observability Hooks
+ *
+ * To monitor user interactions, provide the `observabilityHooks` prop.
+ * **Note:** This requires a `publicApiKey` in the `<CopilotKit>` provider.
+ *
+ * ```tsx
+ * <CopilotKit publicApiKey="YOUR_PUBLIC_API_KEY">
+ *   <CopilotSidebar
+ *     observabilityHooks={{
+ *       onChatExpanded: () => {
+ *         console.log("Sidebar opened");
+ *       },
+ *       onChatMinimized: () => {
+ *         console.log("Sidebar closed");
+ *       },
+ *     }}
+ *   >
+ *     <YourApp/>
+ *   </CopilotSidebar>
+ * </CopilotKit>
+ * ```
+ *
  * ### Look & Feel
  *
  * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:

package/src/components/chat/Suggestion.tsx

@@ -1,4 +1,4 @@
-import { useCopilotChat } from "@copilotkit/react-core";
+import { useCopilotChatInternal as useCopilotChat } from "@copilotkit/react-core";
 import { SmallSpinnerIcon } from "./Icons";
 
 interface SuggestionsProps {

package/src/components/chat/props.ts

@@ -3,6 +3,52 @@ import { CopilotChatSuggestion } from "../../types/suggestions";
 import { ReactNode } from "react";
 import { ImageData } from "@copilotkit/shared";
 
+/**
+ * Event hooks for CopilotKit chat events.
+ * These hooks only work when publicApiKey is provided.
+ */
+export 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;
+}
+
 export interface ButtonProps {}
 
 export interface WindowProps {

package/src/components/dev-console/utils.ts

@@ -4,12 +4,7 @@ import {
   defaultCopilotContextCategories,
 } from "@copilotkit/react-core";
 import { CopilotKitVersion } from "./types";
-import { ActionExecutionMessage, ResultMessage, TextMessage } from "@copilotkit/runtime-client-gql";
-import { AgentStateMessage } from "@copilotkit/runtime-client-gql";
-
-export function shouldShowDevConsole(showDevConsole: boolean): boolean {
-  return showDevConsole;
-}
+export { shouldShowDevConsole } from "@copilotkit/react-core";
 
 export async function getPublishedCopilotKitVersion(
   current: string,