@copilotkit/react-ui 1.10.0-next.0 → 1.10.0-next.10

package/dist/index.mjs

@@ -4,30 +4,42 @@ import "./chunk-MMVDU6DF.mjs";
 import "./chunk-SC6JRFAJ.mjs";
 import {
   CopilotSidebar
-} from "./chunk-WPVTPQ7X.mjs";
+} from "./chunk-GBP47ONN.mjs";
 import "./chunk-WB3YULQ4.mjs";
 import {
   CopilotPopup
-} from "./chunk-VLNT34X3.mjs";
-import "./chunk-GJ3MFNBX.mjs";
+} from "./chunk-J5ZZR6YB.mjs";
+import "./chunk-Y44VLEUH.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-LXCD3K7B.mjs";
-import "./chunk-JHUTTP5C.mjs";
+} from "./chunk-GJ4SX4JE.mjs";
+import {
+  Suggestions
+} from "./chunk-226ZMOE3.mjs";
+import {
+  Suggestion
+} from "./chunk-W26XFBEG.mjs";
+import "./chunk-PLHTVHUW.mjs";
+import "./chunk-DTRPPNSA.mjs";
+import "./chunk-CGEAG65D.mjs";
+import "./chunk-QIOJXTIQ.mjs";
+import "./chunk-BJHJBS5M.mjs";
+import "./chunk-MIVUCSGO.mjs";
+import "./chunk-T5QU6KSB.mjs";
 import {
   AssistantMessage
 } from "./chunk-GCKKSSBU.mjs";
@@ -37,20 +49,9 @@ import {
 import {
   UserMessage
 } from "./chunk-VVL6JFCJ.mjs";
-import {
-  Suggestions
-} from "./chunk-O7KTFUAN.mjs";
-import {
-  Suggestion
-} from "./chunk-Q2467VHZ.mjs";
-import "./chunk-PLHTVHUW.mjs";
-import "./chunk-DTRPPNSA.mjs";
-import "./chunk-CGEAG65D.mjs";
-import "./chunk-QIOJXTIQ.mjs";
 import {
   Markdown
 } from "./chunk-E6MQUIZW.mjs";
-import "./chunk-WHDNKXMP.mjs";
 import {
   useChatContext
 } from "./chunk-IEMQ2SQW.mjs";
@@ -60,7 +61,7 @@ import "./chunk-IU3WTXLQ.mjs";
 import "./chunk-T26KLXLH.mjs";
 import {
   useCopilotChatSuggestions
-} from "./chunk-Z4XPPVZT.mjs";
+} from "./chunk-EYRKZDP5.mjs";
 import "./chunk-54JAUBUJ.mjs";
 import "./chunk-JGMFJZMG.mjs";
 import "./chunk-O72ZB5V3.mjs";

package/package.json

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

package/src/components/chat/Chat.tsx

@@ -1,6 +1,6 @@
 /**
  * <br/>
- * <img src="/images/CopilotChat.gif" width="500" />
+ * <img src="https://cdn.copilotkit.ai/docs/copilotkit/images/CopilotChat.gif" width="500" />
  *
  * A chatbot panel component for the CopilotKit framework. The component allows for a high degree
  * of customization through various props and custom CSS.
@@ -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,25 @@ 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,
+  CopilotErrorEvent,
+  Message,
+  Severity,
+  ErrorVisibility,
+  styledConsole,
+} from "@copilotkit/shared";
 import { randomId } from "@copilotkit/shared";
 import {
   AssistantMessageProps,
   ComponentsMap,
+  CopilotObservabilityHooks,
   ImageRendererProps,
   InputProps,
   MessagesProps,
@@ -214,6 +240,31 @@ export interface CopilotChatProps {
    */
   Messages?: React.ComponentType<MessagesProps>;
 
+  /**
+   * @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>;
+
   /**
    * A custom RenderMessage component to use instead of the default.
    *
@@ -250,6 +301,24 @@ export interface CopilotChatProps {
   children?: React.ReactNode;
 
   hideStopButton?: boolean;
+
+  /**
+   * Event hooks for CopilotKit chat events.
+   * These hooks only work when publicApiKey is provided.
+   */
+  observabilityHooks?: CopilotObservabilityHooks;
+
+  /**
+   * Custom error renderer for chat-specific errors.
+   * When provided, errors will be displayed inline within the chat interface.
+   */
+  renderError?: (error: {
+    message: string;
+    operation?: string;
+    timestamp: number;
+    onDismiss: () => void;
+    onRetry?: () => void;
+  }) => React.ReactNode;
 }
 
 interface OnStopGenerationArguments {
@@ -336,11 +405,101 @@ export function CopilotChat({
   imageUploadsEnabled,
   inputFileAccept = "image/*",
   hideStopButton,
+  observabilityHooks,
+  renderError,
+
+  // Legacy props - deprecated
+  RenderTextMessage,
+  RenderActionExecutionMessage,
+  RenderAgentStateMessage,
+  RenderResultMessage,
+  RenderImageMessage,
 }: CopilotChatProps) {
-  const { additionalInstructions, setChatInstructions } = useCopilotContext();
+  const { additionalInstructions, setChatInstructions, copilotApiConfig, setBannerError } =
+    useCopilotContext();
+
+  // Destructure stable values to avoid object reference changes
+  const { publicApiKey, chatApiEndpoint } = copilotApiConfig;
   const [selectedImages, setSelectedImages] = useState<Array<ImageUpload>>([]);
+  const [chatError, setChatError] = useState<{
+    message: string;
+    operation?: string;
+    timestamp: number;
+  } | null>(null);
   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 (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],
+  );
+
+  // Helper function to trigger chat error and render error UI
+  const triggerChatError = useCallback(
+    (error: any, operation: string, originalError?: any) => {
+      const errorMessage = error?.message || error?.toString() || "An error occurred";
+
+      // Set chat error state for rendering
+      setChatError({
+        message: errorMessage,
+        operation,
+        timestamp: Date.now(),
+      });
+
+      // Also trigger observability hook if available
+      if (publicApiKey && observabilityHooks?.onError) {
+        const errorEvent: CopilotErrorEvent = {
+          type: "error",
+          timestamp: Date.now(),
+          context: {
+            source: "ui",
+            request: {
+              operation,
+              url: chatApiEndpoint,
+              startTime: Date.now(),
+            },
+            technical: {
+              environment: "browser",
+              userAgent: typeof navigator !== "undefined" ? navigator.userAgent : undefined,
+              stackTrace: originalError instanceof Error ? originalError.stack : undefined,
+            },
+          },
+          error,
+        };
+        observabilityHooks.onError(errorEvent);
+      }
+
+      // Show banner error if onError hook is used without publicApiKey
+      if (observabilityHooks?.onError && !publicApiKey) {
+        setBannerError(
+          new CopilotKitError({
+            message: "observabilityHooks.onError requires a publicApiKey to function.",
+            code: CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
+            severity: Severity.CRITICAL,
+            visibility: ErrorVisibility.BANNER,
+          }),
+        );
+        styledConsole.publicApiKeyRequired("observabilityHooks.onError");
+      }
+    },
+    [publicApiKey, chatApiEndpoint, observabilityHooks, setBannerError],
+  );
+
   // Clipboard paste handler
   useEffect(() => {
     if (!imageUploadsEnabled) return;
@@ -382,14 +541,15 @@ export function CopilotChat({
         const loadedImages = (await Promise.all(imagePromises)).filter((img) => img !== null);
         setSelectedImages((prev) => [...prev, ...loadedImages]);
       } catch (error) {
-        // TODO: Show an error message to the user
+        // Trigger chat-level error handler
+        triggerChatError(error, "processClipboardImages", error);
         console.error("Error processing pasted images:", error);
       }
     };
 
     document.addEventListener("paste", handlePaste);
     return () => document.removeEventListener("paste", handlePaste);
-  }, [imageUploadsEnabled]);
+  }, [imageUploadsEnabled, triggerChatError]);
 
   useEffect(() => {
     if (!additionalInstructions?.length) {
@@ -415,7 +575,7 @@ export function CopilotChat({
   }, [instructions, additionalInstructions]);
 
   const {
-    visibleMessages,
+    messages,
     isLoading,
     sendMessage,
     stopGeneration,
@@ -430,6 +590,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 +611,9 @@ export function CopilotChat({
       fileInputRef.current.value = "";
     }
 
+    // Trigger message sent event
+    triggerObservabilityHook("onMessageSent", text);
+
     return sendMessage(text, images);
   };
 
@@ -449,6 +625,9 @@ export function CopilotChat({
       onRegenerate(messageId);
     }
 
+    // Trigger message regenerated event
+    triggerObservabilityHook("onMessageRegenerated", messageId);
+
     reloadMessages(messageId);
   };
 
@@ -456,6 +635,9 @@ export function CopilotChat({
     if (onCopy) {
       onCopy(message);
     }
+
+    // Trigger message copied event
+    triggerObservabilityHook("onMessageCopied", message);
   };
 
   const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -487,7 +669,8 @@ export function CopilotChat({
       const loadedImages = await Promise.all(fileReadPromises);
       setSelectedImages((prev) => [...prev, ...loadedImages]);
     } catch (error) {
-      // TODO: Show an error message to the user
+      // Trigger chat-level error handler
+      triggerChatError(error, "processUploadedImages", error);
       console.error("Error reading files:", error);
     }
   };
@@ -496,20 +679,57 @@ 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}>
+      {/* Render error above messages if present */}
+      {chatError &&
+        renderError &&
+        renderError({
+          ...chatError,
+          onDismiss: () => setChatError(null),
+          onRetry: () => {
+            // Clear error and potentially retry based on operation
+            setChatError(null);
+            // TODO: Implement specific retry logic based on operation type
+          },
+        })}
+
       <Messages
         AssistantMessage={AssistantMessage}
         UserMessage={UserMessage}
         RenderMessage={RenderMessage}
-        messages={visibleMessages}
+        messages={messages}
         inProgress={isLoading}
         onRegenerate={handleRegenerate}
         onCopy={handleCopy}
-        onThumbsUp={onThumbsUp}
-        onThumbsDown={onThumbsDown}
+        onThumbsUp={handleThumbsUp}
+        onThumbsDown={handleThumbsDown}
         markdownTagRenderers={markdownTagRenderers}
         ImageRenderer={ImageRenderer}
+        // Legacy props - passed through to Messages component
+        RenderTextMessage={RenderTextMessage}
+        RenderActionExecutionMessage={RenderActionExecutionMessage}
+        RenderAgentStateMessage={RenderAgentStateMessage}
+        RenderResultMessage={RenderResultMessage}
+        RenderImageMessage={RenderImageMessage}
       >
         {currentSuggestions.length > 0 && (
           <RenderSuggestionsList
@@ -575,8 +795,8 @@ export const useCopilotChatLogic = (
   onReloadMessages?: OnReloadMessages,
 ) => {
   const {
-    visibleMessages,
-    appendMessage,
+    messages,
+    sendMessage,
     setMessages,
     reloadMessages: defaultReloadMessages,
     stopGeneration: defaultStopGeneration,
@@ -640,14 +860,14 @@ export const useCopilotChatLogic = (
     }
 
     // Generate initial suggestions when chat is empty
-    if (visibleMessages.length === 0 && !hasGeneratedInitialSuggestions.current) {
+    if (messages.length === 0 && !hasGeneratedInitialSuggestions.current) {
       hasGeneratedInitialSuggestions.current = true;
       generateSuggestionsWithErrorHandling("initial");
       return;
     }
 
     // Generate post-message suggestions after assistant responds
-    if (visibleMessages.length > 0 && suggestions.length === 0) {
+    if (messages.length > 0 && suggestions.length === 0) {
       generateSuggestionsWithErrorHandling("post-message");
       return;
     }
@@ -655,7 +875,7 @@ export const useCopilotChatLogic = (
     chatSuggestions,
     isLoadingSuggestions,
     suggestionsFailed,
-    visibleMessages.length,
+    messages.length,
     isLoading,
     suggestions.length,
     Object.keys(generalContext.chatSuggestionConfiguration).join(","), // Use stable string instead of object reference
@@ -695,7 +915,7 @@ export const useCopilotChatLogic = (
     onInProgress?.(isLoading);
   }, [onInProgress, isLoading]);
 
-  const sendMessage = async (
+  const safelySendMessage = async (
     messageContent: string,
     imagesToUse?: Array<{ contentType: string; bytes: string }>,
   ) => {
@@ -727,7 +947,7 @@ export const useCopilotChatLogic = (
       }
 
       // Send the message and clear suggestions for auto/manual modes
-      await appendMessage(textMessage, {
+      await sendMessage(textMessage, {
         followUp: images.length === 0,
         clearSuggestions: chatSuggestions === "auto" || chatSuggestions === "manual",
       });
@@ -748,7 +968,7 @@ export const useCopilotChatLogic = (
             bytes: images[i].bytes,
           },
         } as unknown as Message;
-        await appendMessage(imageMessage, { followUp: i === images.length - 1 });
+        await sendMessage(imageMessage, { followUp: i === images.length - 1 });
         if (!firstMessage) {
           firstMessage = imageMessage;
         }
@@ -765,7 +985,6 @@ export const useCopilotChatLogic = (
     return firstMessage;
   };
 
-  const messages = visibleMessages;
   const currentAgentName = generalContext.agentSession?.agentName;
   const restartCurrentAgent = async (hint?: HintFunction) => {
     if (generalContext.agentSession) {
@@ -792,9 +1011,9 @@ export const useCopilotChatLogic = (
       await runAgent(
         generalContext.agentSession.agentName,
         stableContext,
-        appendMessage,
+        messagesContext.messages,
+        sendMessage,
         runChatCompletion,
-        hint,
       );
     }
   };
@@ -855,10 +1074,9 @@ export const useCopilotChatLogic = (
 
   return {
     messages,
-    visibleMessages,
     isLoading,
     suggestions,
-    sendMessage,
+    sendMessage: safelySendMessage,
     stopGeneration,
     reloadMessages,
     resetSuggestions,

package/src/components/chat/Messages.tsx

@@ -1,8 +1,9 @@
 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";
+import { LegacyRenderMessage, LegacyRenderProps } from "./messages/LegacyRenderMessage";
 
 export const Messages = ({
   inProgress,
@@ -10,25 +11,76 @@ export const Messages = ({
   RenderMessage,
   AssistantMessage,
   UserMessage,
+  ImageRenderer,
   onRegenerate,
   onCopy,
   onThumbsUp,
   onThumbsDown,
   markdownTagRenderers,
+
+  // Legacy props
+  RenderTextMessage,
+  RenderActionExecutionMessage,
+  RenderAgentStateMessage,
+  RenderResultMessage,
+  RenderImageMessage,
 }: MessagesProps) => {
   const { labels } = useChatContext();
-  const { visibleMessages, interrupt } = useCopilotChat();
+  const { messages: visibleMessages, interrupt } = useCopilotChat();
   const initialMessages = useMemo(() => makeInitialMessages(labels.initial), [labels.initial]);
   const messages = [...initialMessages, ...visibleMessages];
   const { messagesContainerRef, messagesEndRef } = useScrollToBottom(messages);
 
+  // Check if any legacy props are provided
+  const hasLegacyProps = !!(
+    RenderTextMessage ||
+    RenderActionExecutionMessage ||
+    RenderAgentStateMessage ||
+    RenderResultMessage ||
+    RenderImageMessage
+  );
+
+  // Show deprecation warning if legacy props are used
+  useEffect(() => {
+    if (hasLegacyProps) {
+      console.warn(
+        "[CopilotKit] Legacy message render props (RenderTextMessage, RenderActionExecutionMessage, etc.) are deprecated. " +
+          "Please use the unified 'RenderMessage' prop instead. " +
+          "See migration guide: https://docs.copilotkit.ai/migration/render-message",
+      );
+    }
+  }, [hasLegacyProps]);
+
+  // Create legacy props object for the adapter
+  const legacyProps: LegacyRenderProps = useMemo(
+    () => ({
+      RenderTextMessage,
+      RenderActionExecutionMessage,
+      RenderAgentStateMessage,
+      RenderResultMessage,
+      RenderImageMessage,
+    }),
+    [
+      RenderTextMessage,
+      RenderActionExecutionMessage,
+      RenderAgentStateMessage,
+      RenderResultMessage,
+      RenderImageMessage,
+    ],
+  );
+
+  // Determine which render component to use
+  const MessageRenderer = hasLegacyProps
+    ? (props: any) => <LegacyRenderMessage {...props} legacyProps={legacyProps} />
+    : RenderMessage;
+
   return (
     <div className="copilotKitMessages" ref={messagesContainerRef}>
       <div className="copilotKitMessagesContainer">
         {messages.map((message, index) => {
           const isCurrentMessage = index === messages.length - 1;
           return (
-            <RenderMessage
+            <MessageRenderer
               key={index}
               message={message}
               inProgress={inProgress}
@@ -36,6 +88,7 @@ export const Messages = ({
               isCurrentMessage={isCurrentMessage}
               AssistantMessage={AssistantMessage}
               UserMessage={UserMessage}
+              ImageRenderer={ImageRenderer}
               onRegenerate={onRegenerate}
               onCopy={onCopy}
               onThumbsUp={onThumbsUp}
@@ -69,7 +122,7 @@ function makeInitialMessages(initial: string | string[] | undefined): Message[]
   return [
     {
       id: initial,
-      role: "system",
+      role: "assistant",
       content: initial,
     },
   ];