@copilotkit/react-ui 1.10.0-next.9 → 1.10.0

package/dist/index.mjs

@@ -4,12 +4,12 @@ import "./chunk-MMVDU6DF.mjs";
 import "./chunk-SC6JRFAJ.mjs";
 import {
   CopilotSidebar
-} from "./chunk-TW4LLLTE.mjs";
+} from "./chunk-GBP47ONN.mjs";
 import "./chunk-WB3YULQ4.mjs";
 import {
   CopilotPopup
-} from "./chunk-6C3YVF5W.mjs";
-import "./chunk-7K2X77PW.mjs";
+} from "./chunk-J5ZZR6YB.mjs";
+import "./chunk-Y44VLEUH.mjs";
 import "./chunk-C3GSYRC3.mjs";
 import "./chunk-GDSZGYCE.mjs";
 import "./chunk-V7W6IM2V.mjs";
@@ -26,17 +26,7 @@ import "./chunk-BH6PCAAL.mjs";
 import "./chunk-UFN2VWSR.mjs";
 import {
   CopilotChat
-} from "./chunk-2KG77MAY.mjs";
-import "./chunk-JHUTTP5C.mjs";
-import {
-  AssistantMessage
-} from "./chunk-GCKKSSBU.mjs";
-import {
-  ImageRenderer
-} from "./chunk-DBKRAOH7.mjs";
-import {
-  UserMessage
-} from "./chunk-VVL6JFCJ.mjs";
+} from "./chunk-GJ4SX4JE.mjs";
 import {
   Suggestions
 } from "./chunk-226ZMOE3.mjs";
@@ -47,10 +37,21 @@ 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";
+import {
+  ImageRenderer
+} from "./chunk-DBKRAOH7.mjs";
+import {
+  UserMessage
+} from "./chunk-VVL6JFCJ.mjs";
 import {
   Markdown
 } from "./chunk-E6MQUIZW.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.9",
+  "version": "1.10.0",
   "sideEffects": [
     "**/*.css"
   ],
@@ -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.9",
-    "@copilotkit/runtime-client-gql": "1.10.0-next.9",
-    "@copilotkit/shared": "1.10.0-next.9"
+    "@copilotkit/react-core": "1.10.0",
+    "@copilotkit/runtime-client-gql": "1.10.0",
+    "@copilotkit/shared": "1.10.0"
   },
   "keywords": [
     "copilotkit",

package/src/components/chat/Chat.tsx

@@ -240,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.
    *
@@ -382,6 +407,13 @@ export function CopilotChat({
   hideStopButton,
   observabilityHooks,
   renderError,
+
+  // Legacy props - deprecated
+  RenderTextMessage,
+  RenderActionExecutionMessage,
+  RenderAgentStateMessage,
+  RenderResultMessage,
+  RenderImageMessage,
 }: CopilotChatProps) {
   const { additionalInstructions, setChatInstructions, copilotApiConfig, setBannerError } =
     useCopilotContext();
@@ -543,7 +575,7 @@ export function CopilotChat({
   }, [instructions, additionalInstructions]);
 
   const {
-    visibleMessages,
+    messages,
     isLoading,
     sendMessage,
     stopGeneration,
@@ -684,7 +716,7 @@ export function CopilotChat({
         AssistantMessage={AssistantMessage}
         UserMessage={UserMessage}
         RenderMessage={RenderMessage}
-        messages={visibleMessages}
+        messages={messages}
         inProgress={isLoading}
         onRegenerate={handleRegenerate}
         onCopy={handleCopy}
@@ -692,6 +724,12 @@ export function CopilotChat({
         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
@@ -757,8 +795,8 @@ export const useCopilotChatLogic = (
   onReloadMessages?: OnReloadMessages,
 ) => {
   const {
-    visibleMessages,
-    appendMessage,
+    messages,
+    sendMessage,
     setMessages,
     reloadMessages: defaultReloadMessages,
     stopGeneration: defaultStopGeneration,
@@ -822,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;
     }
@@ -837,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
@@ -877,7 +915,7 @@ export const useCopilotChatLogic = (
     onInProgress?.(isLoading);
   }, [onInProgress, isLoading]);
 
-  const sendMessage = async (
+  const safelySendMessage = async (
     messageContent: string,
     imagesToUse?: Array<{ contentType: string; bytes: string }>,
   ) => {
@@ -909,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",
       });
@@ -930,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;
         }
@@ -947,7 +985,6 @@ export const useCopilotChatLogic = (
     return firstMessage;
   };
 
-  const messages = visibleMessages;
   const currentAgentName = generalContext.agentSession?.agentName;
   const restartCurrentAgent = async (hint?: HintFunction) => {
     if (generalContext.agentSession) {
@@ -975,7 +1012,7 @@ export const useCopilotChatLogic = (
         generalContext.agentSession.agentName,
         stableContext,
         messagesContext.messages,
-        appendMessage,
+        sendMessage,
         runChatCompletion,
       );
     }
@@ -1037,10 +1074,9 @@ export const useCopilotChatLogic = (
 
   return {
     messages,
-    visibleMessages,
     isLoading,
     suggestions,
-    sendMessage,
+    sendMessage: safelySendMessage,
     stopGeneration,
     reloadMessages,
     resetSuggestions,

package/src/components/chat/Messages.tsx

@@ -3,6 +3,7 @@ import { MessagesProps } from "./props";
 import { useChatContext } from "./ChatContext";
 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,
     },
   ];

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

@@ -112,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 {
@@ -121,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 {
@@ -175,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 {