@copilotkit/react-ui 1.3.2 → 1.3.3-pre.0

package/dist/index.mjs

@@ -4,27 +4,31 @@ import "./chunk-JD7BAH7U.mjs";
 import "./chunk-MRFF7GSQ.mjs";
 import {
   CopilotSidebar
-} from "./chunk-KJQVEUVB.mjs";
+} from "./chunk-UUHCZZZV.mjs";
 import "./chunk-WB3YULQ4.mjs";
 import {
   CopilotPopup
-} from "./chunk-N6GQ4WV4.mjs";
-import "./chunk-PGJGIYRW.mjs";
+} from "./chunk-GHMYWL42.mjs";
+import "./chunk-3YESXHJH.mjs";
 import "./chunk-FO7Z5LAL.mjs";
 import "./chunk-FLV3J3VX.mjs";
 import "./chunk-YOH25I6N.mjs";
 import {
   CopilotChat
-} from "./chunk-I454U2HM.mjs";
+} from "./chunk-BTOVRBBW.mjs";
 import "./chunk-V7W6IM2V.mjs";
+import "./chunk-YH2STM73.mjs";
+import "./chunk-U42OB2S3.mjs";
+import "./chunk-GOTHQ665.mjs";
+import "./chunk-MA5B5ELM.mjs";
 import "./chunk-WCPLXRZX.mjs";
 import "./chunk-I4QG2ZZU.mjs";
 import "./chunk-H7TM5JE6.mjs";
 import "./chunk-OTPAZXVR.mjs";
 import "./chunk-U6J5DGOE.mjs";
 import "./chunk-YQFVRDNC.mjs";
-import "./chunk-4K36ATCD.mjs";
 import "./chunk-YQ3D5IQV.mjs";
+import "./chunk-GDNJRSD4.mjs";
 import "./chunk-XSUSSWDS.mjs";
 import {
   useChatContext

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.3.2",
+  "version": "1.3.3-pre.0",
   "sideEffects": [
     "**/*.css"
   ],
@@ -40,9 +40,9 @@
     "ts-jest": "^29.1.1",
     "tsup": "^6.7.0",
     "typescript": "^5.2.3",
-    "eslint-config-custom": "1.3.2",
-    "tailwind-config": "1.3.2",
-    "tsconfig": "1.3.2"
+    "eslint-config-custom": "1.3.3-pre.0",
+    "tailwind-config": "1.3.3-pre.0",
+    "tsconfig": "1.3.3-pre.0"
   },
   "dependencies": {
     "@headlessui/react": "^2.1.3",
@@ -50,9 +50,9 @@
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
-    "@copilotkit/react-core": "1.3.2",
-    "@copilotkit/runtime-client-gql": "1.3.2",
-    "@copilotkit/shared": "1.3.2"
+    "@copilotkit/react-core": "1.3.3-pre.0",
+    "@copilotkit/runtime-client-gql": "1.3.3-pre.0",
+    "@copilotkit/shared": "1.3.3-pre.0"
   },
   "keywords": [
     "copilotkit",

package/src/components/chat/Chat.tsx

@@ -30,9 +30,9 @@
  * ### Look & Feel
  *
  * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
- * ```tsx fileName="YourRootComponent.tsx" {2}
+ * ```tsx title="YourRootComponent.tsx"
  * ...
- * import "@copilotkit/react-ui/styles.css";
+ * import "@copilotkit/react-ui/styles.css"; // [!code highlight]
  *
  * export function YourRootComponent() {
  *   return (
@@ -54,13 +54,17 @@ import {
 import { Messages as DefaultMessages } from "./Messages";
 import { Input as DefaultInput } from "./Input";
 import { ResponseButton as DefaultResponseButton } from "./Response";
+import { RenderTextMessage as DefaultRenderTextMessage } from "./messages/RenderTextMessage";
+import { RenderActionExecutionMessage as DefaultRenderActionExecutionMessage } from "./messages/RenderActionExecutionMessage";
+import { RenderResultMessage as DefaultRenderResultMessage } from "./messages/RenderResultMessage";
+import { RenderAgentStateMessage as DefaultRenderAgentStateMessage } from "./messages/RenderAgentStateMessage";
 import { Suggestion } from "./Suggestion";
 import React, { useEffect, useRef, useState } from "react";
 import { SystemMessageFunction, useCopilotChat, useCopilotContext } from "@copilotkit/react-core";
 import { reloadSuggestions } from "./Suggestion";
 import { CopilotChatSuggestion } from "../../types/suggestions";
 import { Message, Role, TextMessage } from "@copilotkit/runtime-client-gql";
-import { InputProps, MessagesProps, ResponseButtonProps } from "./props";
+import { InputProps, MessagesProps, RenderMessageProps, ResponseButtonProps } from "./props";
 import { randomId } from "@copilotkit/shared";
 
 import { CopilotDevConsole } from "../dev-console";
@@ -118,6 +122,26 @@ export interface CopilotChatProps {
    */
   Messages?: React.ComponentType<MessagesProps>;
 
+  /**
+   * A custom RenderTextMessage component to use instead of the default.
+   */
+  RenderTextMessage?: React.ComponentType<RenderMessageProps>;
+
+  /**
+   * A custom RenderActionExecutionMessage component to use instead of the default.
+   */
+  RenderActionExecutionMessage?: React.ComponentType<RenderMessageProps>;
+
+  /**
+   * A custom RenderAgentStateMessage component to use instead of the default.
+   */
+  RenderAgentStateMessage?: React.ComponentType<RenderMessageProps>;
+
+  /**
+   * A custom RenderResultMessage component to use instead of the default.
+   */
+  RenderResultMessage?: React.ComponentType<RenderMessageProps>;
+
   /**
    * A custom Input component to use instead of the default.
    */
@@ -146,6 +170,10 @@ export function CopilotChat({
   showResponseButton = true,
   onInProgress,
   Messages = DefaultMessages,
+  RenderTextMessage = DefaultRenderTextMessage,
+  RenderActionExecutionMessage = DefaultRenderActionExecutionMessage,
+  RenderAgentStateMessage = DefaultRenderAgentStateMessage,
+  RenderResultMessage = DefaultRenderResultMessage,
   Input = DefaultInput,
   ResponseButton = DefaultResponseButton,
   className,
@@ -173,7 +201,14 @@ export function CopilotChat({
   return (
     <WrappedCopilotChat icons={icons} labels={labels} className={className}>
       <CopilotDevConsole />
-      <Messages messages={visibleMessages} inProgress={isLoading}>
+      <Messages
+        RenderTextMessage={RenderTextMessage}
+        RenderActionExecutionMessage={RenderActionExecutionMessage}
+        RenderAgentStateMessage={RenderAgentStateMessage}
+        RenderResultMessage={RenderResultMessage}
+        messages={visibleMessages}
+        inProgress={isLoading}
+      >
         {currentSuggestions.length > 0 && (
           <div>
             <h6>Suggested:</h6>

package/src/components/chat/Messages.tsx

@@ -1,10 +1,7 @@
 import React, { useEffect, useMemo } from "react";
 import { MessagesProps } from "./props";
 import { useChatContext } from "./ChatContext";
-import { Markdown } from "./Markdown";
-import { RenderFunctionStatus, useCopilotContext } from "@copilotkit/react-core";
 import {
-  MessageStatusCode,
   ActionExecutionMessage,
   Message,
   ResultMessage,
@@ -12,11 +9,16 @@ import {
   Role,
   AgentStateMessage,
 } from "@copilotkit/runtime-client-gql";
-import { CoagentInChatRenderFunction } from "@copilotkit/react-core/dist/context/copilot-context";
-
-export const Messages = ({ messages, inProgress, children }: MessagesProps) => {
-  const { chatComponentsCache } = useCopilotContext();
 
+export const Messages = ({
+  messages,
+  inProgress,
+  children,
+  RenderTextMessage,
+  RenderActionExecutionMessage,
+  RenderAgentStateMessage,
+  RenderResultMessage,
+}: MessagesProps) => {
   const context = useChatContext();
   const initialMessages = useMemo(
     () => makeInitialMessages(context.labels.initial),
@@ -24,7 +26,7 @@ export const Messages = ({ messages, inProgress, children }: MessagesProps) => {
   );
   messages = [...initialMessages, ...messages];
 
-  const functionResults: Record<string, string> = {};
+  const actionResults: Record<string, string> = {};
 
   for (let i = 0; i < messages.length; i++) {
     if (messages[i] instanceof ActionExecutionMessage) {
@@ -34,7 +36,7 @@ export const Messages = ({ messages, inProgress, children }: MessagesProps) => {
       ) as ResultMessage | undefined;
 
       if (resultMessage) {
-        functionResults[id] = ResultMessage.decodeResult(resultMessage.result || "");
+        actionResults[id] = ResultMessage.decodeResult(resultMessage.result || "");
       }
     }
   }
@@ -58,178 +60,46 @@ export const Messages = ({ messages, inProgress, children }: MessagesProps) => {
       {messages.map((message, index) => {
         const isCurrentMessage = index === messages.length - 1;
 
-        if (message instanceof TextMessage && message.role === "user") {
+        if (message instanceof TextMessage) {
           return (
-            <div key={index} className="copilotKitMessage copilotKitUserMessage">
-              {message.content}
-            </div>
+            <RenderTextMessage
+              key={index}
+              message={message}
+              inProgress={inProgress}
+              index={index}
+              isCurrentMessage={isCurrentMessage}
+            />
           );
-        } else if (message instanceof TextMessage && message.role == "assistant") {
+        } else if (message instanceof ActionExecutionMessage) {
           return (
-            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
-              {isCurrentMessage && inProgress && !message.content ? (
-                context.icons.spinnerIcon
-              ) : (
-                <Markdown content={message.content} />
-              )}
-            </div>
+            <RenderActionExecutionMessage
+              key={index}
+              message={message}
+              inProgress={inProgress}
+              index={index}
+              isCurrentMessage={isCurrentMessage}
+              actionResult={actionResults[message.id]}
+            />
           );
-        } else if (message instanceof ActionExecutionMessage) {
-          if (
-            chatComponentsCache.current !== null &&
-            chatComponentsCache.current.actions[message.name]
-          ) {
-            const render = chatComponentsCache.current.actions[message.name];
-            // render a static string
-            if (typeof render === "string") {
-              // when render is static, we show it only when in progress
-              if (isCurrentMessage && inProgress) {
-                return (
-                  <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
-                    {context.icons.spinnerIcon} <span className="inProgressLabel">{render}</span>
-                  </div>
-                );
-              }
-              // Done - silent by default to avoid a series of "done" messages
-              else {
-                return null;
-              }
-            }
-            // render is a function
-            else {
-              const args = message.arguments;
-
-              let status: RenderFunctionStatus = "inProgress";
-
-              if (functionResults[message.id] !== undefined) {
-                status = "complete";
-              } else if (message.status.code !== MessageStatusCode.Pending) {
-                status = "executing";
-              }
-
-              try {
-                const toRender = render({
-                  status: status as any,
-                  args,
-                  result: functionResults[message.id],
-                });
-                // No result and complete: stay silent
-                if (!toRender && status === "complete") {
-                  return null;
-                }
-                if (typeof toRender === "string") {
-                  return (
-                    <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
-                      {isCurrentMessage && inProgress && context.icons.spinnerIcon} {toRender}
-                    </div>
-                  );
-                } else {
-                  return (
-                    <div key={index} className="copilotKitCustomAssistantMessage">
-                      {toRender}
-                    </div>
-                  );
-                }
-              } catch (e) {
-                console.error(`Error executing render function for action ${message.name}: ${e}`);
-                return (
-                  <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
-                    {isCurrentMessage && inProgress && context.icons.spinnerIcon}
-                    <b>❌ Error executing render: {message.name}</b>
-                    <br />
-                    {e instanceof Error ? e.message : String(e)}
-                  </div>
-                );
-              }
-            }
-          }
-          // No render function found- show the default message
-          else if (!inProgress || !isCurrentMessage) {
-            // Done - silent by default to avoid a series of "done" messages
-            return null;
-          } else {
-            // In progress
-            return (
-              <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
-                {context.icons.spinnerIcon}
-              </div>
-            );
-          }
         } else if (message instanceof AgentStateMessage) {
-          let render: string | CoagentInChatRenderFunction | undefined;
-
-          if (chatComponentsCache.current !== null) {
-            render =
-              chatComponentsCache.current.coagentActions[
-                `${message.agentName}-${message.nodeName}`
-              ] || chatComponentsCache.current.coagentActions[`${message.agentName}-global`];
-          }
-
-          if (render) {
-            // render a static string
-            if (typeof render === "string") {
-              // when render is static, we show it only when in progress
-              if (isCurrentMessage && inProgress) {
-                return (
-                  <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
-                    {context.icons.spinnerIcon} <span className="inProgressLabel">{render}</span>
-                  </div>
-                );
-              }
-              // Done - silent by default to avoid a series of "done" messages
-              else {
-                return null;
-              }
-            }
-            // render is a function
-            else {
-              const state = message.state;
-
-              let status = message.active ? "inProgress" : "complete";
-
-              const toRender = render({
-                status: status as any,
-                state,
-                nodeName: message.nodeName,
-              });
-
-              // No result and complete: stay silent
-              if (!toRender && status === "complete") {
-                return null;
-              }
-
-              if (typeof toRender === "string") {
-                return (
-                  <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
-                    {isCurrentMessage && inProgress && context.icons.spinnerIcon} {toRender}
-                  </div>
-                );
-              } else {
-                return (
-                  <div key={index} className="copilotKitCustomAssistantMessage">
-                    {toRender}
-                  </div>
-                );
-              }
-            }
-          }
-          // No render function found- show the default message
-          else if (!inProgress || !isCurrentMessage) {
-            // Done - silent by default to avoid a series of "done" messages
-            return null;
-          } else {
-            // In progress
-            return (
-              <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
-                {context.icons.spinnerIcon}
-              </div>
-            );
-          }
-        } else if (message instanceof ResultMessage && inProgress && isCurrentMessage) {
           return (
-            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
-              {context.icons.spinnerIcon}
-            </div>
+            <RenderAgentStateMessage
+              key={index}
+              message={message}
+              inProgress={inProgress}
+              index={index}
+              isCurrentMessage={isCurrentMessage}
+            />
+          );
+        } else if (message instanceof ResultMessage) {
+          return (
+            <RenderResultMessage
+              key={index}
+              message={message}
+              inProgress={inProgress}
+              index={index}
+              isCurrentMessage={isCurrentMessage}
+            />
           );
         }
       })}

package/src/components/chat/Popup.tsx

@@ -31,9 +31,9 @@
  * ### Look & Feel
  *
  * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
- * ```tsx fileName="YourRootComponent.tsx" {2}
+ * ```tsx title="YourRootComponent.tsx"
  * ...
- * import "@copilotkit/react-ui/styles.css";
+ * import "@copilotkit/react-ui/styles.css"; // [!code highlight]
  *
  * export function YourRootComponent() {
  *   return (

package/src/components/chat/Sidebar.tsx

@@ -33,9 +33,9 @@
  * ### Look & Feel
  *
  * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
- * ```tsx fileName="YourRootComponent.tsx" {2}
+ * ```tsx title="YourRootComponent.tsx"
  * ...
- * import "@copilotkit/react-ui/styles.css";
+ * import "@copilotkit/react-ui/styles.css"; // [!code highlight]
  *
  * export function YourRootComponent() {
  *   return (

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

@@ -0,0 +1,90 @@
+import { ActionExecutionMessage, MessageStatusCode } from "@copilotkit/runtime-client-gql";
+import { RenderMessageProps } from "../props";
+import { useChatContext } from "../ChatContext";
+import { RenderFunctionStatus, useCopilotContext } from "@copilotkit/react-core";
+
+export function RenderActionExecutionMessage(props: RenderMessageProps) {
+  const { message, inProgress, index, isCurrentMessage, actionResult } = props;
+  const { chatComponentsCache } = useCopilotContext();
+  const { icons } = useChatContext();
+
+  if (message instanceof ActionExecutionMessage) {
+    if (chatComponentsCache.current !== null && chatComponentsCache.current.actions[message.name]) {
+      const render = chatComponentsCache.current.actions[message.name];
+      // render a static string
+      if (typeof render === "string") {
+        // when render is static, we show it only when in progress
+        if (isCurrentMessage && inProgress) {
+          return (
+            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+              {icons.spinnerIcon} <span className="inProgressLabel">{render}</span>
+            </div>
+          );
+        }
+        // Done - silent by default to avoid a series of "done" messages
+        else {
+          return null;
+        }
+      }
+      // render is a function
+      else {
+        const args = message.arguments;
+
+        let status: RenderFunctionStatus = "inProgress";
+
+        if (actionResult !== undefined) {
+          status = "complete";
+        } else if (message.status.code !== MessageStatusCode.Pending) {
+          status = "executing";
+        }
+
+        try {
+          const toRender = render({
+            status: status as any,
+            args,
+            result: actionResult,
+          });
+          // No result and complete: stay silent
+          if (!toRender && status === "complete") {
+            return null;
+          }
+          if (typeof toRender === "string") {
+            return (
+              <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+                {isCurrentMessage && inProgress && icons.spinnerIcon} {toRender}
+              </div>
+            );
+          } else {
+            return (
+              <div key={index} className="copilotKitCustomAssistantMessage">
+                {toRender}
+              </div>
+            );
+          }
+        } catch (e) {
+          console.error(`Error executing render function for action ${message.name}: ${e}`);
+          return (
+            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+              {isCurrentMessage && inProgress && icons.spinnerIcon}
+              <b>❌ Error executing render: {message.name}</b>
+              <br />
+              {e instanceof Error ? e.message : String(e)}
+            </div>
+          );
+        }
+      }
+    }
+    // No render function found- show the default message
+    else if (!inProgress || !isCurrentMessage) {
+      // Done - silent by default to avoid a series of "done" messages
+      return null;
+    } else {
+      // In progress
+      return (
+        <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+          {icons.spinnerIcon}
+        </div>
+      );
+    }
+  }
+}

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

@@ -0,0 +1,81 @@
+import { AgentStateMessage } from "@copilotkit/runtime-client-gql";
+import { RenderMessageProps } from "../props";
+import { useChatContext } from "../ChatContext";
+import { CoagentInChatRenderFunction, useCopilotContext } from "@copilotkit/react-core";
+
+export function RenderAgentStateMessage(props: RenderMessageProps) {
+  const { message, inProgress, index, isCurrentMessage } = props;
+  const { chatComponentsCache } = useCopilotContext();
+  const { icons } = useChatContext();
+
+  if (message instanceof AgentStateMessage) {
+    let render: string | CoagentInChatRenderFunction | undefined;
+
+    if (chatComponentsCache.current !== null) {
+      render =
+        chatComponentsCache.current.coagentActions[`${message.agentName}-${message.nodeName}`] ||
+        chatComponentsCache.current.coagentActions[`${message.agentName}-global`];
+    }
+
+    if (render) {
+      // render a static string
+      if (typeof render === "string") {
+        // when render is static, we show it only when in progress
+        if (isCurrentMessage && inProgress) {
+          return (
+            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+              {icons.spinnerIcon} <span className="inProgressLabel">{render}</span>
+            </div>
+          );
+        }
+        // Done - silent by default to avoid a series of "done" messages
+        else {
+          return null;
+        }
+      }
+      // render is a function
+      else {
+        const state = message.state;
+
+        let status = message.active ? "inProgress" : "complete";
+
+        const toRender = render({
+          status: status as any,
+          state,
+          nodeName: message.nodeName,
+        });
+
+        // No result and complete: stay silent
+        if (!toRender && status === "complete") {
+          return null;
+        }
+
+        if (typeof toRender === "string") {
+          return (
+            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+              {isCurrentMessage && inProgress && icons.spinnerIcon} {toRender}
+            </div>
+          );
+        } else {
+          return (
+            <div key={index} className="copilotKitCustomAssistantMessage">
+              {toRender}
+            </div>
+          );
+        }
+      }
+    }
+    // No render function found- show the default message
+    else if (!inProgress || !isCurrentMessage) {
+      // Done - silent by default to avoid a series of "done" messages
+      return null;
+    } else {
+      // In progress
+      return (
+        <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+          {icons.spinnerIcon}
+        </div>
+      );
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import { ResultMessage } from "@copilotkit/runtime-client-gql";
+import { RenderMessageProps } from "../props";
+import { useChatContext } from "../ChatContext";
+
+export function RenderResultMessage(props: RenderMessageProps) {
+  const { message, inProgress, index, isCurrentMessage } = props;
+  const { icons } = useChatContext();
+  if (message instanceof ResultMessage && inProgress && isCurrentMessage) {
+    return (
+      <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+        {icons.spinnerIcon}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,28 @@
+import { TextMessage } from "@copilotkit/runtime-client-gql";
+import { RenderMessageProps } from "../props";
+import { Markdown } from "../Markdown";
+import { useChatContext } from "../ChatContext";
+
+export function RenderTextMessage(props: RenderMessageProps) {
+  const { message, inProgress, index, isCurrentMessage } = props;
+  const { icons } = useChatContext();
+  if (message instanceof TextMessage) {
+    if (message.role === "user") {
+      return (
+        <div key={index} className="copilotKitMessage copilotKitUserMessage">
+          {message.content}
+        </div>
+      );
+    } else if (message.role == "assistant") {
+      return (
+        <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+          {isCurrentMessage && inProgress && !message.content ? (
+            icons.spinnerIcon
+          ) : (
+            <Markdown content={message.content} />
+          )}
+        </div>
+      );
+    }
+  }
+}

package/src/components/chat/props.ts

@@ -23,6 +23,18 @@ export interface MessagesProps {
   messages: Message[];
   inProgress: boolean;
   children?: React.ReactNode;
+  RenderTextMessage: React.ComponentType<RenderMessageProps>;
+  RenderActionExecutionMessage: React.ComponentType<RenderMessageProps>;
+  RenderAgentStateMessage: React.ComponentType<RenderMessageProps>;
+  RenderResultMessage: React.ComponentType<RenderMessageProps>;
+}
+
+export interface RenderMessageProps {
+  message: Message;
+  inProgress: boolean;
+  index: number;
+  isCurrentMessage: boolean;
+  actionResult?: string;
 }
 
 export interface InputProps {