@copilotkit/react-ui 1.10.0-next.1 → 1.10.0-next.11

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,14 @@ 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";
+import {
+  CopilotKitError,
+  CopilotKitErrorCode,
+  Severity,
+  ErrorVisibility,
+  styledConsole,
+} from "@copilotkit/shared";
 
 export interface CopilotModalProps extends CopilotChatProps {
   /**
@@ -57,6 +65,92 @@ 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, setBannerError } = useCopilotContext();
+
+  // Destructure stable values to avoid object reference changes
+  const { publicApiKey } = copilotApiConfig;
+
+  // Helper function to trigger event hooks only if publicApiKey is provided
+  const triggerObservabilityHook = useCallback(
+    (hookName: keyof CopilotObservabilityHooks, ...args: any[]) => {
+      if (publicApiKey && observabilityHooks?.[hookName]) {
+        (observabilityHooks[hookName] as any)(...args);
+      }
+      if (observabilityHooks?.[hookName] && !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");
+      }
+    },
+    [publicApiKey, observabilityHooks, setBannerError],
+  );
+
+  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 +179,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/messages/LegacyRenderMessage.tsx

@@ -0,0 +1,143 @@
+import React from "react";
+import { RenderMessageProps } from "../props";
+import { RenderMessage as DefaultRenderMessage } from "./RenderMessage";
+import { aguiToGQL } from "@copilotkit/runtime-client-gql";
+
+/**
+ * Legacy message render props interface for backwards compatibility
+ */
+export interface LegacyRenderProps {
+  RenderTextMessage?: React.ComponentType<RenderMessageProps>;
+  RenderActionExecutionMessage?: React.ComponentType<RenderMessageProps>;
+  RenderAgentStateMessage?: React.ComponentType<RenderMessageProps>;
+  RenderResultMessage?: React.ComponentType<RenderMessageProps>;
+  RenderImageMessage?: React.ComponentType<RenderMessageProps>;
+}
+
+/**
+ * Props for the LegacyRenderMessage component
+ */
+export interface LegacyRenderMessageProps extends RenderMessageProps {
+  legacyProps: LegacyRenderProps;
+}
+
+/**
+ * Legacy message adapter component that maps old render props to new message types.
+ * This component provides backwards compatibility for the deprecated render props.
+ */
+export const LegacyRenderMessage: React.FC<LegacyRenderMessageProps> = ({
+  message,
+  inProgress,
+  index,
+  isCurrentMessage,
+  actionResult,
+  AssistantMessage,
+  UserMessage,
+  ImageRenderer,
+  onRegenerate,
+  onCopy,
+  onThumbsUp,
+  onThumbsDown,
+  markdownTagRenderers,
+  legacyProps,
+}) => {
+  const {
+    RenderTextMessage,
+    RenderActionExecutionMessage,
+    RenderAgentStateMessage,
+    RenderResultMessage,
+    RenderImageMessage,
+  } = legacyProps;
+
+  const deprecatedMessage = aguiToGQL(message)[0] ?? undefined;
+
+  // Route to appropriate legacy renderer based on message type
+  if (deprecatedMessage.isTextMessage() && RenderTextMessage) {
+    return (
+      <RenderTextMessage
+        message={message}
+        inProgress={inProgress}
+        index={index}
+        isCurrentMessage={isCurrentMessage}
+        AssistantMessage={AssistantMessage}
+        UserMessage={UserMessage}
+        onRegenerate={onRegenerate}
+        onCopy={onCopy}
+        onThumbsUp={onThumbsUp}
+        onThumbsDown={onThumbsDown}
+        markdownTagRenderers={markdownTagRenderers}
+      />
+    );
+  }
+
+  if (deprecatedMessage.isActionExecutionMessage() && RenderActionExecutionMessage) {
+    return (
+      <RenderActionExecutionMessage
+        message={message}
+        inProgress={inProgress}
+        index={index}
+        isCurrentMessage={isCurrentMessage}
+        actionResult={actionResult}
+        AssistantMessage={AssistantMessage}
+        UserMessage={UserMessage}
+      />
+    );
+  }
+
+  if (deprecatedMessage.isAgentStateMessage() && RenderAgentStateMessage) {
+    return (
+      <RenderAgentStateMessage
+        message={message}
+        inProgress={inProgress}
+        index={index}
+        isCurrentMessage={isCurrentMessage}
+        AssistantMessage={AssistantMessage}
+        UserMessage={UserMessage}
+      />
+    );
+  }
+
+  if (deprecatedMessage.isResultMessage() && RenderResultMessage) {
+    return (
+      <RenderResultMessage
+        message={message}
+        inProgress={inProgress}
+        index={index}
+        isCurrentMessage={isCurrentMessage}
+        AssistantMessage={AssistantMessage}
+        UserMessage={UserMessage}
+      />
+    );
+  }
+
+  if (deprecatedMessage.isImageMessage() && RenderImageMessage) {
+    return (
+      <RenderImageMessage
+        message={message}
+        inProgress={inProgress}
+        index={index}
+        isCurrentMessage={isCurrentMessage}
+        AssistantMessage={AssistantMessage}
+        UserMessage={UserMessage}
+      />
+    );
+  }
+
+  // Fallback to default RenderMessage for any unhandled cases
+  return (
+    <DefaultRenderMessage
+      message={message}
+      inProgress={inProgress}
+      index={index}
+      isCurrentMessage={isCurrentMessage}
+      AssistantMessage={AssistantMessage}
+      UserMessage={UserMessage}
+      ImageRenderer={ImageRenderer}
+      onRegenerate={onRegenerate}
+      onCopy={onCopy}
+      onThumbsUp={onThumbsUp}
+      onThumbsDown={onThumbsDown}
+      markdownTagRenderers={markdownTagRenderers}
+    />
+  );
+};

package/src/components/chat/messages/RenderMessage.tsx

@@ -26,6 +26,7 @@ export function RenderMessage({
       return (
         <UserMessage
           key={index}
+          rawData={message}
           data-message-role="user"
           message={message}
           ImageRenderer={ImageRenderer}
@@ -36,6 +37,8 @@ export function RenderMessage({
         <AssistantMessage
           key={index}
           data-message-role="assistant"
+          subComponent={message.generativeUI?.()}
+          rawData={message}
           message={message}
           isLoading={inProgress && isCurrentMessage && !message.content}
           isGenerating={inProgress && isCurrentMessage && !!message.content}

package/src/components/chat/props.ts

@@ -1,8 +1,60 @@
-import { AIMessage, Message, UserMessage } from "@copilotkit/shared";
+import { AIMessage, Message, UserMessage, CopilotErrorEvent } from "@copilotkit/shared";
 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;
+
+  /**
+   * Called when an error occurs in the chat
+   * This enables chat-specific error handling UX while preserving system-wide error monitoring
+   */
+  onError?: (errorEvent: CopilotErrorEvent) => void;
+}
+
 export interface ButtonProps {}
 
 export interface WindowProps {
@@ -60,6 +112,31 @@ export interface MessagesProps {
    * Useful when you want to render custom elements in the message (e.g a reference tag element)
    */
   markdownTagRenderers?: ComponentsMap;
+
+  /**
+   * @deprecated Use RenderMessage instead
+   */
+  RenderTextMessage?: React.ComponentType<RenderMessageProps>;
+
+  /**
+   * @deprecated Use RenderMessage instead
+   */
+  RenderActionExecutionMessage?: React.ComponentType<RenderMessageProps>;
+
+  /**
+   * @deprecated Use RenderMessage instead
+   */
+  RenderAgentStateMessage?: React.ComponentType<RenderMessageProps>;
+
+  /**
+   * @deprecated Use RenderMessage instead
+   */
+  RenderResultMessage?: React.ComponentType<RenderMessageProps>;
+
+  /**
+   * @deprecated Use RenderMessage instead
+   */
+  RenderImageMessage?: React.ComponentType<RenderMessageProps>;
 }
 
 export interface Renderer {
@@ -69,6 +146,13 @@ export interface Renderer {
 export interface UserMessageProps {
   message?: UserMessage;
   ImageRenderer: React.ComponentType<ImageRendererProps>;
+
+  /**
+   * @deprecated use message instead
+   *
+   * The raw data from the assistant's response
+   */
+  rawData: any;
 }
 
 export interface AssistantMessageProps {
@@ -123,6 +207,31 @@ export interface AssistantMessageProps {
    * A custom image rendering component to use instead of the default.
    */
   ImageRenderer?: React.ComponentType<ImageRendererProps>;
+
+  /**
+   * @deprecated use message instead
+   *
+   * The raw data from the assistant's response
+   */
+  rawData: any;
+
+  /**
+   *
+   * @deprecated
+   *
+   * use `message.generativeUI()` instead.
+   *
+   * For example:
+   *
+   * ```tsx
+   * const CustomAssistantMessage = ({ message }: AssistantMessageProps) => {
+   *   const subComponent = message?.generativeUI?.();
+   *   return <div>{subComponent}</div>;
+   * };
+   *
+   * ```
+   */
+  subComponent?: React.JSX.Element;
 }
 
 export interface RenderMessageProps {

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,