@copilotkit/react-ui 1.5.11 → 1.5.12-next.1

package/dist/index.mjs

@@ -1,26 +1,32 @@
 "use client";
 import "./chunk-EFZPSZWO.mjs";
 import "./chunk-MMVDU6DF.mjs";
-import "./chunk-MRFF7GSQ.mjs";
+import "./chunk-SQMEPWVT.mjs";
 import {
   CopilotSidebar
-} from "./chunk-WSMMTZCM.mjs";
+} from "./chunk-B23XDGH4.mjs";
 import "./chunk-WB3YULQ4.mjs";
 import {
   CopilotPopup
-} from "./chunk-375NVWZM.mjs";
-import "./chunk-UWVGLGFQ.mjs";
+} from "./chunk-O6JFOQQA.mjs";
+import "./chunk-VKVNMHM5.mjs";
 import "./chunk-YAGE7RCE.mjs";
 import "./chunk-VEC45H6Q.mjs";
 import "./chunk-RQNJNK2W.mjs";
 import {
   CopilotChat
-} from "./chunk-DCNCY2PL.mjs";
-import "./chunk-6INMITFA.mjs";
-import "./chunk-RU73BEZM.mjs";
+} from "./chunk-I7MG52I5.mjs";
+import "./chunk-UWWMAJ7R.mjs";
+import "./chunk-F7VWGY77.mjs";
+import "./chunk-OFYI4UU4.mjs";
+import {
+  UserMessage
+} from "./chunk-HEIDCT7I.mjs";
 import "./chunk-V7W6IM2V.mjs";
-import "./chunk-3E7HY2UN.mjs";
-import "./chunk-ZABXREBH.mjs";
+import {
+  AssistantMessage
+} from "./chunk-3VNMQWGT.mjs";
+import "./chunk-P5A3A5FO.mjs";
 import "./chunk-RJCZRKTV.mjs";
 import {
   CopilotDevConsole
@@ -34,8 +40,10 @@ import "./chunk-BH6PCAAL.mjs";
 import "./chunk-OTPAZXVR.mjs";
 import "./chunk-EMQEEXUB.mjs";
 import "./chunk-YQFVRDNC.mjs";
-import "./chunk-YQ3D5IQV.mjs";
-import "./chunk-7II4YL7R.mjs";
+import {
+  Markdown
+} from "./chunk-YQ3D5IQV.mjs";
+import "./chunk-34FREWVK.mjs";
 import "./chunk-3XAXY2Z3.mjs";
 import {
   useChatContext
@@ -51,10 +59,13 @@ import "./chunk-54JAUBUJ.mjs";
 import "./chunk-S5MBUNGN.mjs";
 import "./chunk-MRXNTQOX.mjs";
 export {
+  AssistantMessage,
   CopilotChat,
   CopilotDevConsole,
   CopilotPopup,
   CopilotSidebar,
+  Markdown,
+  UserMessage,
   shouldShowDevConsole,
   useChatContext,
   useCopilotChatSuggestions

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.5.11",
+  "version": "1.5.12-next.1",
   "sideEffects": [
     "**/*.css"
   ],
@@ -50,9 +50,9 @@
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
-    "@copilotkit/react-core": "1.5.11",
-    "@copilotkit/runtime-client-gql": "1.5.11",
-    "@copilotkit/shared": "1.5.11"
+    "@copilotkit/react-core": "1.5.12-next.1",
+    "@copilotkit/runtime-client-gql": "1.5.12-next.1",
+    "@copilotkit/shared": "1.5.12-next.1"
   },
   "keywords": [
     "copilotkit",

package/src/components/chat/Chat.tsx

@@ -58,6 +58,9 @@ import { RenderTextMessage as DefaultRenderTextMessage } from "./messages/Render
 import { RenderActionExecutionMessage as DefaultRenderActionExecutionMessage } from "./messages/RenderActionExecutionMessage";
 import { RenderResultMessage as DefaultRenderResultMessage } from "./messages/RenderResultMessage";
 import { RenderAgentStateMessage as DefaultRenderAgentStateMessage } from "./messages/RenderAgentStateMessage";
+import { AssistantMessage as DefaultAssistantMessage } from "./messages/AssistantMessage";
+import { UserMessage as DefaultUserMessage } from "./messages/UserMessage";
+import { Markdown as DefaultRenderer } from "./Markdown";
 import { Suggestion } from "./Suggestion";
 import React, { useEffect, useRef, useState } from "react";
 import {
@@ -69,8 +72,15 @@ import {
 import { reloadSuggestions } from "./Suggestion";
 import { CopilotChatSuggestion } from "../../types/suggestions";
 import { Message, Role, TextMessage } from "@copilotkit/runtime-client-gql";
-import { InputProps, MessagesProps, RenderMessageProps, ResponseButtonProps } from "./props";
 import { randomId } from "@copilotkit/shared";
+import {
+  AssistantMessageProps,
+  InputProps,
+  MessagesProps,
+  RenderMessageProps,
+  ResponseButtonProps,
+  UserMessageProps,
+} from "./props";
 
 import { CopilotDevConsole } from "../dev-console";
 import { HintFunction, runAgent, stopAgent } from "@copilotkit/react-core";
@@ -133,6 +143,16 @@ export interface CopilotChatProps {
    */
   showResponseButton?: boolean;
 
+  /**
+   * A custom assistant message component to use instead of the default.
+   */
+  AssistantMessage?: React.ComponentType<AssistantMessageProps>;
+
+  /**
+   * A custom user message component to use instead of the default.
+   */
+  UserMessage?: React.ComponentType<UserMessageProps>;
+
   /**
    * A custom Messages component to use instead of the default.
    */
@@ -245,6 +265,8 @@ export function CopilotChat({
   className,
   icons,
   labels,
+  AssistantMessage = DefaultAssistantMessage,
+  UserMessage = DefaultUserMessage,
 }: CopilotChatProps) {
   const context = useCopilotContext();
 
@@ -274,6 +296,8 @@ export function CopilotChat({
     <WrappedCopilotChat icons={icons} labels={labels} className={className}>
       <CopilotDevConsole />
       <Messages
+        AssistantMessage={AssistantMessage}
+        UserMessage={UserMessage}
         RenderTextMessage={RenderTextMessage}
         RenderActionExecutionMessage={RenderActionExecutionMessage}
         RenderAgentStateMessage={RenderAgentStateMessage}

package/src/components/chat/Messages.tsx

@@ -11,6 +11,8 @@ export const Messages = ({
   RenderActionExecutionMessage,
   RenderAgentStateMessage,
   RenderResultMessage,
+  AssistantMessage,
+  UserMessage,
 }: MessagesProps) => {
   const context = useChatContext();
   const initialMessages = useMemo(
@@ -49,6 +51,8 @@ export const Messages = ({
               inProgress={inProgress}
               index={index}
               isCurrentMessage={isCurrentMessage}
+              AssistantMessage={AssistantMessage}
+              UserMessage={UserMessage}
             />
           );
         } else if (message.isActionExecutionMessage()) {
@@ -60,6 +64,8 @@ export const Messages = ({
               index={index}
               isCurrentMessage={isCurrentMessage}
               actionResult={actionResults[message.id]}
+              AssistantMessage={AssistantMessage}
+              UserMessage={UserMessage}
             />
           );
         } else if (message.isAgentStateMessage()) {
@@ -70,6 +76,8 @@ export const Messages = ({
               inProgress={inProgress}
               index={index}
               isCurrentMessage={isCurrentMessage}
+              AssistantMessage={AssistantMessage}
+              UserMessage={UserMessage}
             />
           );
         } else if (message.isResultMessage()) {
@@ -80,6 +88,8 @@ export const Messages = ({
               inProgress={inProgress}
               index={index}
               isCurrentMessage={isCurrentMessage}
+              AssistantMessage={AssistantMessage}
+              UserMessage={UserMessage}
             />
           );
         }

package/src/components/chat/Modal.tsx

@@ -8,6 +8,9 @@ import { Messages as DefaultMessages } from "./Messages";
 import { Input as DefaultInput } from "./Input";
 import { ResponseButton as DefaultResponseButton } from "./Response";
 import { CopilotChat, CopilotChatProps } from "./Chat";
+import { Markdown as DefaultRenderer } from "./Markdown";
+import { AssistantMessage as DefaultAssistantMessage } from "./messages/AssistantMessage";
+import { UserMessage as DefaultUserMessage } from "./messages/UserMessage";
 
 export interface CopilotModalProps extends CopilotChatProps {
   /**
@@ -77,6 +80,8 @@ export const CopilotModal = ({
   Messages = DefaultMessages,
   Input = DefaultInput,
   ResponseButton = DefaultResponseButton,
+  AssistantMessage = DefaultAssistantMessage,
+  UserMessage = DefaultUserMessage,
   className,
   children,
 }: CopilotModalProps) => {
@@ -109,6 +114,8 @@ export const CopilotModal = ({
             Messages={Messages}
             Input={Input}
             ResponseButton={ResponseButton}
+            AssistantMessage={AssistantMessage}
+            UserMessage={UserMessage}
           />
         </Window>
       </div>

package/src/components/chat/index.tsx

@@ -2,4 +2,7 @@ export * from "./props";
 export { CopilotPopup } from "./Popup";
 export { CopilotSidebar } from "./Sidebar";
 export { CopilotChat } from "./Chat";
+export { Markdown } from "./Markdown";
+export { AssistantMessage } from "./messages/AssistantMessage";
+export { UserMessage } from "./messages/UserMessage";
 export { useChatContext } from "./ChatContext";

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

@@ -0,0 +1,20 @@
+import { AssistantMessageProps } from "../props";
+import { useChatContext } from "../ChatContext";
+import { Markdown } from "../Markdown";
+
+export const AssistantMessage = (props: AssistantMessageProps) => {
+  const { icons } = useChatContext();
+  const { message, isLoading, subComponent } = props;
+
+  return (
+    <>
+      {(message || isLoading) && (
+        <div className="copilotKitMessage copilotKitAssistantMessage">
+          {message && <Markdown content={message || ""} />}
+          {isLoading && icons.spinnerIcon}
+        </div>
+      )}
+      <div style={{ marginBottom: "0.5rem" }}>{subComponent}</div>
+    </>
+  );
+};

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

@@ -1,12 +1,10 @@
 import { 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();
+  const { message, inProgress, index, isCurrentMessage, actionResult, AssistantMessage } = props;
 
   if (message.isActionExecutionMessage()) {
     if (
@@ -22,9 +20,14 @@ export function RenderActionExecutionMessage(props: RenderMessageProps) {
         // 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>
+            <AssistantMessage
+              rawData={message}
+              key={index}
+              data-message-role="assistant"
+              isLoading={false}
+              isGenerating={true}
+              message={render}
+            />
           );
         }
         // Done - silent by default to avoid a series of "done" messages
@@ -57,30 +60,44 @@ export function RenderActionExecutionMessage(props: RenderMessageProps) {
           }
           if (typeof toRender === "string") {
             return (
-              <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
-                {isCurrentMessage && inProgress && icons.spinnerIcon} {toRender}
-              </div>
+              <AssistantMessage
+                rawData={message}
+                data-message-role="assistant"
+                key={index}
+                isLoading={false}
+                isGenerating={false}
+                message={toRender}
+              />
             );
           } else {
             return (
-              <div
+              <AssistantMessage
+                rawData={message}
+                data-message-role="action-render"
                 key={index}
-                data-message-type="action-render"
-                className="copilotKitCustomAssistantMessage"
-              >
-                {toRender}
-              </div>
+                isLoading={false}
+                isGenerating={false}
+                subComponent={toRender}
+              />
             );
           }
         } 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>
+            <AssistantMessage
+              rawData={message}
+              data-message-role="assistant"
+              key={index}
+              isLoading={false}
+              isGenerating={false}
+              subComponent={
+                <div>
+                  <b>❌ Error executing render: {message.name}</b>
+                  <br />
+                  {e instanceof Error ? e.message : String(e)}
+                </div>
+              }
+            />
           );
         }
       }
@@ -92,9 +109,13 @@ export function RenderActionExecutionMessage(props: RenderMessageProps) {
     } else {
       // In progress
       return (
-        <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
-          {icons.spinnerIcon}
-        </div>
+        <AssistantMessage
+          rawData={message}
+          key={index}
+          data-message-role="assistant"
+          isLoading={true}
+          isGenerating={true}
+        />
       );
     }
   }

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

@@ -1,12 +1,9 @@
-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();
+  const { message, inProgress, index, isCurrentMessage, AssistantMessage } = props;
 
   if (message.isAgentStateMessage()) {
     let render: string | CoagentInChatRenderFunction | undefined;
@@ -24,9 +21,14 @@ export function RenderAgentStateMessage(props: RenderMessageProps) {
         // 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>
+            <AssistantMessage
+              rawData={message}
+              message={render}
+              data-message-role="assistant"
+              key={index}
+              isLoading={true}
+              isGenerating={true}
+            />
           );
         }
         // Done - silent by default to avoid a series of "done" messages
@@ -53,9 +55,13 @@ export function RenderAgentStateMessage(props: RenderMessageProps) {
 
         if (!toRender && isCurrentMessage && inProgress) {
           return (
-            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
-              {icons.spinnerIcon}
-            </div>
+            <AssistantMessage
+              data-message-role="assistant"
+              key={index}
+              rawData={message}
+              isLoading={true}
+              isGenerating={true}
+            />
           );
         } else if (!toRender) {
           return null;
@@ -63,15 +69,25 @@ export function RenderAgentStateMessage(props: RenderMessageProps) {
 
         if (typeof toRender === "string") {
           return (
-            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
-              {isCurrentMessage && inProgress && icons.spinnerIcon} {toRender}
-            </div>
+            <AssistantMessage
+              rawData={message}
+              message={toRender}
+              isLoading={true}
+              isGenerating={true}
+              data-message-role="assistant"
+              key={index}
+            />
           );
         } else {
           return (
-            <div key={index} className="copilotKitCustomAssistantMessage">
-              {toRender}
-            </div>
+            <AssistantMessage
+              rawData={message}
+              data-message-role="agent-state-render"
+              key={index}
+              isLoading={false}
+              isGenerating={false}
+              subComponent={toRender}
+            />
           );
         }
       }
@@ -83,9 +99,13 @@ export function RenderAgentStateMessage(props: RenderMessageProps) {
     } else {
       // In progress
       return (
-        <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
-          {icons.spinnerIcon}
-        </div>
+        <AssistantMessage
+          rawData={message}
+          isLoading={true}
+          isGenerating={true}
+          data-message-role="assistant"
+          key={index}
+        />
       );
     }
   }

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

@@ -1,15 +1,17 @@
-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();
+  const { message, inProgress, index, isCurrentMessage, AssistantMessage } = props;
+
   if (message.isResultMessage() && inProgress && isCurrentMessage) {
     return (
-      <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
-        {icons.spinnerIcon}
-      </div>
+      <AssistantMessage
+        key={index}
+        data-message-role="assistant"
+        rawData={message}
+        isLoading={true}
+        isGenerating={true}
+      />
     );
   }
 }

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

@@ -1,35 +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();
+  const { message, inProgress, index, isCurrentMessage, UserMessage, AssistantMessage } = props;
+
   if (message.isTextMessage()) {
     if (message.role === "user") {
       return (
-        <div
+        <UserMessage
           key={index}
           data-message-role="user"
-          className="copilotKitMessage copilotKitUserMessage"
-        >
-          {message.content}
-        </div>
+          message={message.content}
+          rawData={message}
+        />
       );
     } else if (message.role == "assistant") {
       return (
-        <div
+        <AssistantMessage
           key={index}
           data-message-role="assistant"
-          className={`copilotKitMessage copilotKitAssistantMessage`}
-        >
-          {isCurrentMessage && inProgress && !message.content ? (
-            icons.spinnerIcon
-          ) : (
-            <Markdown content={message.content} />
-          )}
-        </div>
+          message={message.content}
+          rawData={message}
+          isLoading={inProgress && isCurrentMessage && !message.content}
+          isGenerating={inProgress && isCurrentMessage && !!message.content}
+        />
       );
     }
   }

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

@@ -0,0 +1,5 @@
+import { UserMessageProps } from "../props";
+
+export const UserMessage = (props: UserMessageProps) => {
+  return <div className="copilotKitMessage copilotKitUserMessage">{props.message}</div>;
+};

package/src/components/chat/props.ts

@@ -23,18 +23,61 @@ export interface MessagesProps {
   messages: Message[];
   inProgress: boolean;
   children?: React.ReactNode;
+  AssistantMessage: React.ComponentType<AssistantMessageProps>;
+  UserMessage: React.ComponentType<UserMessageProps>;
   RenderTextMessage: React.ComponentType<RenderMessageProps>;
   RenderActionExecutionMessage: React.ComponentType<RenderMessageProps>;
   RenderAgentStateMessage: React.ComponentType<RenderMessageProps>;
   RenderResultMessage: React.ComponentType<RenderMessageProps>;
 }
 
+export interface Renderer {
+  content: string;
+}
+
+export interface UserMessageProps {
+  message?: string;
+  rawData: any;
+}
+
+export interface AssistantMessageProps {
+  /**
+   * The message content from the assistant
+   */
+
+  message?: string;
+
+  /**
+   * The raw data from the assistant's response
+   */
+  rawData: any;
+
+  /**
+   * A component that was decided to render by the LLM.
+   * When working with useCopilotActions and useCoAgentStateRender, this will be
+   * the render component that was specified.
+   */
+  subComponent?: React.JSX.Element;
+
+  /**
+   * Whether a response is loading, this is when the LLM is thinking of a response but hasn't finished yet.
+   */
+  isLoading: boolean;
+
+  /**
+   * Whether a response is generating, this is when the LLM is actively generating and streaming content.
+   */
+  isGenerating: boolean;
+}
+
 export interface RenderMessageProps {
   message: Message;
   inProgress: boolean;
   index: number;
   isCurrentMessage: boolean;
   actionResult?: string;
+  AssistantMessage: React.ComponentType<AssistantMessageProps>;
+  UserMessage: React.ComponentType<UserMessageProps>;
 }
 
 export interface InputProps {

package/dist/chunk-3E7HY2UN.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/chat/messages/RenderActionExecutionMessage.tsx"],"sourcesContent":["import { MessageStatusCode } from \"@copilotkit/runtime-client-gql\";\nimport { RenderMessageProps } from \"../props\";\nimport { useChatContext } from \"../ChatContext\";\nimport { RenderFunctionStatus, useCopilotContext } from \"@copilotkit/react-core\";\n\nexport function RenderActionExecutionMessage(props: RenderMessageProps) {\n  const { message, inProgress, index, isCurrentMessage, actionResult } = props;\n  const { chatComponentsCache } = useCopilotContext();\n  const { icons } = useChatContext();\n\n  if (message.isActionExecutionMessage()) {\n    if (\n      chatComponentsCache.current !== null &&\n      (chatComponentsCache.current.actions[message.name] ||\n        chatComponentsCache.current.actions[\"*\"])\n    ) {\n      const render =\n        chatComponentsCache.current.actions[message.name] ||\n        chatComponentsCache.current.actions[\"*\"];\n      // render a static string\n      if (typeof render === \"string\") {\n        // when render is static, we show it only when in progress\n        if (isCurrentMessage && inProgress) {\n          return (\n            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>\n              {icons.spinnerIcon} <span className=\"inProgressLabel\">{render}</span>\n            </div>\n          );\n        }\n        // Done - silent by default to avoid a series of \"done\" messages\n        else {\n          return null;\n        }\n      }\n      // render is a function\n      else {\n        const args = message.arguments;\n\n        let status: RenderFunctionStatus = \"inProgress\";\n\n        if (actionResult !== undefined) {\n          status = \"complete\";\n        } else if (message.status.code !== MessageStatusCode.Pending) {\n          status = \"executing\";\n        }\n\n        try {\n          const toRender = render({\n            status: status as any,\n            args,\n            result: actionResult,\n            name: message.name,\n          });\n          // No result and complete: stay silent\n          if (!toRender && status === \"complete\") {\n            return null;\n          }\n          if (typeof toRender === \"string\") {\n            return (\n              <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>\n                {isCurrentMessage && inProgress && icons.spinnerIcon} {toRender}\n              </div>\n            );\n          } else {\n            return (\n              <div\n                key={index}\n                data-message-type=\"action-render\"\n                className=\"copilotKitCustomAssistantMessage\"\n              >\n                {toRender}\n              </div>\n            );\n          }\n        } catch (e) {\n          console.error(`Error executing render function for action ${message.name}: ${e}`);\n          return (\n            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>\n              {isCurrentMessage && inProgress && icons.spinnerIcon}\n              <b>❌ Error executing render: {message.name}</b>\n              <br />\n              {e instanceof Error ? e.message : String(e)}\n            </div>\n          );\n        }\n      }\n    }\n    // No render function found- show the default message\n    else if (!inProgress || !isCurrentMessage) {\n      // Done - silent by default to avoid a series of \"done\" messages\n      return null;\n    } else {\n      // In progress\n      return (\n        <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>\n          {icons.spinnerIcon}\n        </div>\n      );\n    }\n  }\n}\n"],"mappings":";;;;;AAAA,SAAS,yBAAyB;AAGlC,SAA+B,yBAAyB;AAqB5C,SACsB,KADtB;AAnBL,SAAS,6BAA6B,OAA2B;AACtE,QAAM,EAAE,SAAS,YAAY,OAAO,kBAAkB,aAAa,IAAI;AACvE,QAAM,EAAE,oBAAoB,IAAI,kBAAkB;AAClD,QAAM,EAAE,MAAM,IAAI,eAAe;AAEjC,MAAI,QAAQ,yBAAyB,GAAG;AACtC,QACE,oBAAoB,YAAY,SAC/B,oBAAoB,QAAQ,QAAQ,QAAQ,IAAI,KAC/C,oBAAoB,QAAQ,QAAQ,GAAG,IACzC;AACA,YAAM,SACJ,oBAAoB,QAAQ,QAAQ,QAAQ,IAAI,KAChD,oBAAoB,QAAQ,QAAQ,GAAG;AAEzC,UAAI,OAAO,WAAW,UAAU;AAE9B,YAAI,oBAAoB,YAAY;AAClC,iBACE,qBAAC,SAAgB,WAAW,gDACzB;AAAA,kBAAM;AAAA,YAAY;AAAA,YAAC,oBAAC,UAAK,WAAU,mBAAmB,kBAAO;AAAA,eADtD,KAEV;AAAA,QAEJ,OAEK;AACH,iBAAO;AAAA,QACT;AAAA,MACF,OAEK;AACH,cAAM,OAAO,QAAQ;AAErB,YAAI,SAA+B;AAEnC,YAAI,iBAAiB,QAAW;AAC9B,mBAAS;AAAA,QACX,WAAW,QAAQ,OAAO,SAAS,kBAAkB,SAAS;AAC5D,mBAAS;AAAA,QACX;AAEA,YAAI;AACF,gBAAM,WAAW,OAAO;AAAA,YACtB;AAAA,YACA;AAAA,YACA,QAAQ;AAAA,YACR,MAAM,QAAQ;AAAA,UAChB,CAAC;AAED,cAAI,CAAC,YAAY,WAAW,YAAY;AACtC,mBAAO;AAAA,UACT;AACA,cAAI,OAAO,aAAa,UAAU;AAChC,mBACE,qBAAC,SAAgB,WAAW,gDACzB;AAAA,kCAAoB,cAAc,MAAM;AAAA,cAAY;AAAA,cAAE;AAAA,iBAD/C,KAEV;AAAA,UAEJ,OAAO;AACL,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,qBAAkB;AAAA,gBAClB,WAAU;AAAA,gBAET;AAAA;AAAA,cAJI;AAAA,YAKP;AAAA,UAEJ;AAAA,QACF,SAAS,GAAP;AACA,kBAAQ,MAAM,8CAA8C,QAAQ,SAAS,GAAG;AAChF,iBACE,qBAAC,SAAgB,WAAW,gDACzB;AAAA,gCAAoB,cAAc,MAAM;AAAA,YACzC,qBAAC,OAAE;AAAA;AAAA,cAA2B,QAAQ;AAAA,eAAK;AAAA,YAC3C,oBAAC,QAAG;AAAA,YACH,aAAa,QAAQ,EAAE,UAAU,OAAO,CAAC;AAAA,eAJlC,KAKV;AAAA,QAEJ;AAAA,MACF;AAAA,IACF,WAES,CAAC,cAAc,CAAC,kBAAkB;AAEzC,aAAO;AAAA,IACT,OAAO;AAEL,aACE,oBAAC,SAAgB,WAAW,gDACzB,gBAAM,eADC,KAEV;AAAA,IAEJ;AAAA,EACF;AACF;","names":[]}

package/dist/chunk-6INMITFA.mjs

@@ -1,18 +0,0 @@
-import {
-  useChatContext
-} from "./chunk-CBBFRI3Q.mjs";
-
-// src/components/chat/messages/RenderResultMessage.tsx
-import { jsx } from "react/jsx-runtime";
-function RenderResultMessage(props) {
-  const { message, inProgress, index, isCurrentMessage } = props;
-  const { icons } = useChatContext();
-  if (message.isResultMessage() && inProgress && isCurrentMessage) {
-    return /* @__PURE__ */ jsx("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: icons.spinnerIcon }, index);
-  }
-}
-
-export {
-  RenderResultMessage
-};
-//# sourceMappingURL=chunk-6INMITFA.mjs.map

package/dist/chunk-6INMITFA.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/chat/messages/RenderResultMessage.tsx"],"sourcesContent":["import { ResultMessage } from \"@copilotkit/runtime-client-gql\";\nimport { RenderMessageProps } from \"../props\";\nimport { useChatContext } from \"../ChatContext\";\n\nexport function RenderResultMessage(props: RenderMessageProps) {\n  const { message, inProgress, index, isCurrentMessage } = props;\n  const { icons } = useChatContext();\n  if (message.isResultMessage() && inProgress && isCurrentMessage) {\n    return (\n      <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>\n        {icons.spinnerIcon}\n      </div>\n    );\n  }\n}\n"],"mappings":";;;;;AASM;AALC,SAAS,oBAAoB,OAA2B;AAC7D,QAAM,EAAE,SAAS,YAAY,OAAO,iBAAiB,IAAI;AACzD,QAAM,EAAE,MAAM,IAAI,eAAe;AACjC,MAAI,QAAQ,gBAAgB,KAAK,cAAc,kBAAkB;AAC/D,WACE,oBAAC,SAAgB,WAAW,gDACzB,gBAAM,eADC,KAEV;AAAA,EAEJ;AACF;","names":[]}

package/dist/chunk-7II4YL7R.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/chat/Messages.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\nimport { MessagesProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\nimport { Message, ResultMessage, TextMessage, Role } from \"@copilotkit/runtime-client-gql\";\n\nexport const Messages = ({\n  messages,\n  inProgress,\n  children,\n  RenderTextMessage,\n  RenderActionExecutionMessage,\n  RenderAgentStateMessage,\n  RenderResultMessage,\n}: MessagesProps) => {\n  const context = useChatContext();\n  const initialMessages = useMemo(\n    () => makeInitialMessages(context.labels.initial),\n    [context.labels.initial],\n  );\n  messages = [...initialMessages, ...messages];\n\n  const actionResults: Record<string, string> = {};\n\n  for (let i = 0; i < messages.length; i++) {\n    if (messages[i].isActionExecutionMessage()) {\n      const id = messages[i].id;\n      const resultMessage: ResultMessage | undefined = messages.find(\n        (message) => message.isResultMessage() && message.actionExecutionId === id,\n      ) as ResultMessage | undefined;\n\n      if (resultMessage) {\n        actionResults[id] = ResultMessage.decodeResult(resultMessage.result || \"\");\n      }\n    }\n  }\n\n  const { messagesEndRef, messagesContainerRef } = useScrollToBottom(messages);\n\n  return (\n    <div className=\"copilotKitMessages\" ref={messagesContainerRef}>\n      {messages.map((message, index) => {\n        const isCurrentMessage = index === messages.length - 1;\n\n        if (message.isTextMessage()) {\n          return (\n            <RenderTextMessage\n              key={index}\n              message={message}\n              inProgress={inProgress}\n              index={index}\n              isCurrentMessage={isCurrentMessage}\n            />\n          );\n        } else if (message.isActionExecutionMessage()) {\n          return (\n            <RenderActionExecutionMessage\n              key={index}\n              message={message}\n              inProgress={inProgress}\n              index={index}\n              isCurrentMessage={isCurrentMessage}\n              actionResult={actionResults[message.id]}\n            />\n          );\n        } else if (message.isAgentStateMessage()) {\n          return (\n            <RenderAgentStateMessage\n              key={index}\n              message={message}\n              inProgress={inProgress}\n              index={index}\n              isCurrentMessage={isCurrentMessage}\n            />\n          );\n        } else if (message.isResultMessage()) {\n          return (\n            <RenderResultMessage\n              key={index}\n              message={message}\n              inProgress={inProgress}\n              index={index}\n              isCurrentMessage={isCurrentMessage}\n            />\n          );\n        }\n      })}\n      <footer ref={messagesEndRef}>{children}</footer>\n    </div>\n  );\n};\n\nfunction makeInitialMessages(initial?: string | string[]): Message[] {\n  let initialArray: string[] = [];\n  if (initial) {\n    if (Array.isArray(initial)) {\n      initialArray.push(...initial);\n    } else {\n      initialArray.push(initial);\n    }\n  }\n\n  return initialArray.map(\n    (message) =>\n      new TextMessage({\n        role: Role.Assistant,\n        content: message,\n      }),\n  );\n}\nexport function useScrollToBottom(messages: any[]) {\n  const messagesEndRef = useRef<HTMLDivElement>(null);\n  const messagesContainerRef = useRef<HTMLDivElement | null>(null);\n  const isProgrammaticScrollRef = useRef(false);\n  const isUserScrollUpRef = useRef(false);\n\n  const scrollToBottom = () => {\n    if (messagesEndRef.current) {\n      isProgrammaticScrollRef.current = true;\n      messagesEndRef.current.scrollIntoView({\n        behavior: \"auto\",\n      });\n    }\n  };\n\n  const handleScroll = () => {\n    if (isProgrammaticScrollRef.current) {\n      isProgrammaticScrollRef.current = false;\n      return;\n    }\n\n    if (messagesContainerRef.current) {\n      const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;\n      isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;\n    }\n  };\n\n  useEffect(() => {\n    const container = messagesContainerRef.current;\n    if (container) {\n      container.addEventListener(\"scroll\", handleScroll);\n    }\n    return () => {\n      if (container) {\n        container.removeEventListener(\"scroll\", handleScroll);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    const container = messagesContainerRef.current;\n    if (!container) {\n      return;\n    }\n\n    const mutationObserver = new MutationObserver(() => {\n      if (!isUserScrollUpRef.current) {\n        scrollToBottom();\n      }\n    });\n\n    mutationObserver.observe(container, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n\n    return () => {\n      mutationObserver.disconnect();\n    };\n  }, []);\n\n  useEffect(() => {\n    isUserScrollUpRef.current = false;\n    scrollToBottom();\n  }, [messages.filter((m) => m.isTextMessage() && m.role === Role.User).length]);\n\n  return { messagesEndRef, messagesContainerRef };\n}\n"],"mappings":"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","names":[]}