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

package/dist/components/chat/Popup.js

@@ -536,7 +536,9 @@ var Messages = ({
   RenderTextMessage: RenderTextMessage2,
   RenderActionExecutionMessage: RenderActionExecutionMessage2,
   RenderAgentStateMessage: RenderAgentStateMessage2,
-  RenderResultMessage: RenderResultMessage2
+  RenderResultMessage: RenderResultMessage2,
+  AssistantMessage: AssistantMessage2,
+  UserMessage: UserMessage2
 }) => {
   const context = useChatContext();
   const initialMessages = (0, import_react3.useMemo)(
@@ -567,7 +569,9 @@ var Messages = ({
             message,
             inProgress,
             index,
-            isCurrentMessage
+            isCurrentMessage,
+            AssistantMessage: AssistantMessage2,
+            UserMessage: UserMessage2
           },
           index
         );
@@ -579,7 +583,9 @@ var Messages = ({
             inProgress,
             index,
             isCurrentMessage,
-            actionResult: actionResults[message.id]
+            actionResult: actionResults[message.id],
+            AssistantMessage: AssistantMessage2,
+            UserMessage: UserMessage2
           },
           index
         );
@@ -590,7 +596,9 @@ var Messages = ({
             message,
             inProgress,
             index,
-            isCurrentMessage
+            isCurrentMessage,
+            AssistantMessage: AssistantMessage2,
+            UserMessage: UserMessage2
           },
           index
         );
@@ -601,7 +609,9 @@ var Messages = ({
             message,
             inProgress,
             index,
-            isCurrentMessage
+            isCurrentMessage,
+            AssistantMessage: AssistantMessage2,
+            UserMessage: UserMessage2
           },
           index
         );
@@ -934,6 +944,259 @@ var ResponseButton = ({ onClick, inProgress }) => {
   ] });
 };
 
+// src/components/chat/messages/RenderTextMessage.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function RenderTextMessage(props) {
+  const { message, inProgress, index, isCurrentMessage, UserMessage: UserMessage2, AssistantMessage: AssistantMessage2 } = props;
+  if (message.isTextMessage()) {
+    if (message.role === "user") {
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        UserMessage2,
+        {
+          "data-message-role": "user",
+          message: message.content,
+          rawData: message
+        },
+        index
+      );
+    } else if (message.role == "assistant") {
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        AssistantMessage2,
+        {
+          "data-message-role": "assistant",
+          message: message.content,
+          rawData: message,
+          isLoading: inProgress && isCurrentMessage && !message.content,
+          isGenerating: inProgress && isCurrentMessage && !!message.content
+        },
+        index
+      );
+    }
+  }
+}
+
+// src/components/chat/messages/RenderActionExecutionMessage.tsx
+var import_runtime_client_gql2 = require("@copilotkit/runtime-client-gql");
+var import_react_core3 = require("@copilotkit/react-core");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function RenderActionExecutionMessage(props) {
+  const { chatComponentsCache } = (0, import_react_core3.useCopilotContext)();
+  const { message, inProgress, index, isCurrentMessage, actionResult, AssistantMessage: AssistantMessage2 } = props;
+  if (message.isActionExecutionMessage()) {
+    if (chatComponentsCache.current !== null && (chatComponentsCache.current.actions[message.name] || chatComponentsCache.current.actions["*"])) {
+      const render = chatComponentsCache.current.actions[message.name] || chatComponentsCache.current.actions["*"];
+      if (typeof render === "string") {
+        if (isCurrentMessage && inProgress) {
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            AssistantMessage2,
+            {
+              rawData: message,
+              "data-message-role": "assistant",
+              isLoading: false,
+              isGenerating: true,
+              message: render
+            },
+            index
+          );
+        } else {
+          return null;
+        }
+      } else {
+        const args = message.arguments;
+        let status = "inProgress";
+        if (actionResult !== void 0) {
+          status = "complete";
+        } else if (message.status.code !== import_runtime_client_gql2.MessageStatusCode.Pending) {
+          status = "executing";
+        }
+        try {
+          const toRender = render({
+            status,
+            args,
+            result: actionResult,
+            name: message.name
+          });
+          if (!toRender && status === "complete") {
+            return null;
+          }
+          if (typeof toRender === "string") {
+            return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              AssistantMessage2,
+              {
+                rawData: message,
+                "data-message-role": "assistant",
+                isLoading: false,
+                isGenerating: false,
+                message: toRender
+              },
+              index
+            );
+          } else {
+            return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              AssistantMessage2,
+              {
+                rawData: message,
+                "data-message-role": "action-render",
+                isLoading: false,
+                isGenerating: false,
+                subComponent: toRender
+              },
+              index
+            );
+          }
+        } catch (e) {
+          console.error(`Error executing render function for action ${message.name}: ${e}`);
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            AssistantMessage2,
+            {
+              rawData: message,
+              "data-message-role": "assistant",
+              isLoading: false,
+              isGenerating: false,
+              subComponent: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("b", { children: [
+                  "\u274C Error executing render: ",
+                  message.name
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("br", {}),
+                e instanceof Error ? e.message : String(e)
+              ] })
+            },
+            index
+          );
+        }
+      }
+    } else if (!inProgress || !isCurrentMessage) {
+      return null;
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        AssistantMessage2,
+        {
+          rawData: message,
+          "data-message-role": "assistant",
+          isLoading: true,
+          isGenerating: true
+        },
+        index
+      );
+    }
+  }
+}
+
+// src/components/chat/messages/RenderResultMessage.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function RenderResultMessage(props) {
+  const { message, inProgress, index, isCurrentMessage, AssistantMessage: AssistantMessage2 } = props;
+  if (message.isResultMessage() && inProgress && isCurrentMessage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      AssistantMessage2,
+      {
+        "data-message-role": "assistant",
+        rawData: message,
+        isLoading: true,
+        isGenerating: true
+      },
+      index
+    );
+  }
+}
+
+// src/components/chat/messages/RenderAgentStateMessage.tsx
+var import_react_core4 = require("@copilotkit/react-core");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function RenderAgentStateMessage(props) {
+  const { chatComponentsCache } = (0, import_react_core4.useCopilotContext)();
+  const { message, inProgress, index, isCurrentMessage, AssistantMessage: AssistantMessage2 } = props;
+  if (message.isAgentStateMessage()) {
+    let render;
+    if (chatComponentsCache.current !== null) {
+      render = chatComponentsCache.current.coAgentStateRenders[`${message.agentName}-${message.nodeName}`] || chatComponentsCache.current.coAgentStateRenders[`${message.agentName}-global`];
+    }
+    if (render) {
+      if (typeof render === "string") {
+        if (isCurrentMessage && inProgress) {
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            AssistantMessage2,
+            {
+              rawData: message,
+              message: render,
+              "data-message-role": "assistant",
+              isLoading: true,
+              isGenerating: true
+            },
+            index
+          );
+        } else {
+          return null;
+        }
+      } else {
+        const state = message.state;
+        let status = message.active ? "inProgress" : "complete";
+        const toRender = render({
+          status,
+          state,
+          nodeName: message.nodeName
+        });
+        if (!toRender && status === "complete") {
+          return null;
+        }
+        if (!toRender && isCurrentMessage && inProgress) {
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            AssistantMessage2,
+            {
+              "data-message-role": "assistant",
+              rawData: message,
+              isLoading: true,
+              isGenerating: true
+            },
+            index
+          );
+        } else if (!toRender) {
+          return null;
+        }
+        if (typeof toRender === "string") {
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            AssistantMessage2,
+            {
+              rawData: message,
+              message: toRender,
+              isLoading: true,
+              isGenerating: true,
+              "data-message-role": "assistant"
+            },
+            index
+          );
+        } else {
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            AssistantMessage2,
+            {
+              rawData: message,
+              "data-message-role": "agent-state-render",
+              isLoading: false,
+              isGenerating: false,
+              subComponent: toRender
+            },
+            index
+          );
+        }
+      }
+    } else if (!inProgress || !isCurrentMessage) {
+      return null;
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        AssistantMessage2,
+        {
+          rawData: message,
+          isLoading: true,
+          isGenerating: true,
+          "data-message-role": "assistant"
+        },
+        index
+      );
+    }
+  }
+}
+
 // src/components/chat/Markdown.tsx
 var import_react8 = require("react");
 var import_react_markdown = __toESM(require("react-markdown"));
@@ -965,7 +1228,7 @@ function useCopyToClipboard({ timeout = 2e3 }) {
 }
 
 // src/components/chat/CodeBlock.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var programmingLanguages = {
   javascript: ".js",
   python: ".py",
@@ -1028,21 +1291,21 @@ var CodeBlock = (0, import_react7.memo)(({ language, value }) => {
       return;
     copyToClipboard(value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "copilotKitCodeBlock", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "copilotKitCodeBlockToolbar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "copilotKitCodeBlockToolbarLanguage", children: language }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "copilotKitCodeBlockToolbarButtons", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: downloadAsFile, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DownloadIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "sr-only", children: "Download" })
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "copilotKitCodeBlock", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "copilotKitCodeBlockToolbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "copilotKitCodeBlockToolbarLanguage", children: language }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "copilotKitCodeBlockToolbarButtons", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: downloadAsFile, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DownloadIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sr-only", children: "Download" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: onCopy, children: [
-          isCopied ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CopyIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "sr-only", children: "Copy code" })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: onCopy, children: [
+          isCopied ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CopyIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sr-only", children: "Copy code" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_react_syntax_highlighter.Prism,
       {
         language,
@@ -1345,21 +1608,21 @@ var highlightStyle = {
 // src/components/chat/Markdown.tsx
 var import_remark_gfm = __toESM(require("remark-gfm"));
 var import_remark_math = __toESM(require("remark-math"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var MemoizedReactMarkdown = (0, import_react8.memo)(
   import_react_markdown.default,
   (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className
 );
 var Markdown = ({ content }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "copilotKitMarkdown", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MemoizedReactMarkdown, { components, remarkPlugins: [import_remark_gfm.default, import_remark_math.default], children: content }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "copilotKitMarkdown", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MemoizedReactMarkdown, { components, remarkPlugins: [import_remark_gfm.default, import_remark_math.default], children: content }) });
 };
 var components = {
   p({ children }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { children });
   },
   a(_a) {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "a",
       __spreadProps(__spreadValues({
         style: { color: "blue", textDecoration: "underline" }
@@ -1374,7 +1637,7 @@ var components = {
     var _d = _c, { children, className, inline } = _d, props = __objRest(_d, ["children", "className", "inline"]);
     if (children.length) {
       if (children[0] == "\u258D") {
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "span",
           {
             style: {
@@ -1389,9 +1652,9 @@ var components = {
     }
     const match = /language-(\w+)/.exec(className || "");
     if (inline) {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("code", __spreadProps(__spreadValues({ className }, props), { children }));
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("code", __spreadProps(__spreadValues({ className }, props), { children }));
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       CodeBlock,
       __spreadValues({
         language: match && match[1] || "",
@@ -1402,187 +1665,33 @@ var components = {
   }
 };
 
-// src/components/chat/messages/RenderTextMessage.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function RenderTextMessage(props) {
-  const { message, inProgress, index, isCurrentMessage } = props;
-  const { icons } = useChatContext();
-  if (message.isTextMessage()) {
-    if (message.role === "user") {
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        "div",
-        {
-          "data-message-role": "user",
-          className: "copilotKitMessage copilotKitUserMessage",
-          children: message.content
-        },
-        index
-      );
-    } else if (message.role == "assistant") {
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        "div",
-        {
-          "data-message-role": "assistant",
-          className: `copilotKitMessage copilotKitAssistantMessage`,
-          children: isCurrentMessage && inProgress && !message.content ? icons.spinnerIcon : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Markdown, { content: message.content })
-        },
-        index
-      );
-    }
-  }
-}
-
-// src/components/chat/messages/RenderActionExecutionMessage.tsx
-var import_runtime_client_gql2 = require("@copilotkit/runtime-client-gql");
-var import_react_core3 = require("@copilotkit/react-core");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-function RenderActionExecutionMessage(props) {
-  const { message, inProgress, index, isCurrentMessage, actionResult } = props;
-  const { chatComponentsCache } = (0, import_react_core3.useCopilotContext)();
-  const { icons } = useChatContext();
-  if (message.isActionExecutionMessage()) {
-    if (chatComponentsCache.current !== null && (chatComponentsCache.current.actions[message.name] || chatComponentsCache.current.actions["*"])) {
-      const render = chatComponentsCache.current.actions[message.name] || chatComponentsCache.current.actions["*"];
-      if (typeof render === "string") {
-        if (isCurrentMessage && inProgress) {
-          return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-            icons.spinnerIcon,
-            " ",
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "inProgressLabel", children: render })
-          ] }, index);
-        } else {
-          return null;
-        }
-      } else {
-        const args = message.arguments;
-        let status = "inProgress";
-        if (actionResult !== void 0) {
-          status = "complete";
-        } else if (message.status.code !== import_runtime_client_gql2.MessageStatusCode.Pending) {
-          status = "executing";
-        }
-        try {
-          const toRender = render({
-            status,
-            args,
-            result: actionResult,
-            name: message.name
-          });
-          if (!toRender && status === "complete") {
-            return null;
-          }
-          if (typeof toRender === "string") {
-            return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-              isCurrentMessage && inProgress && icons.spinnerIcon,
-              " ",
-              toRender
-            ] }, index);
-          } else {
-            return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              "div",
-              {
-                "data-message-type": "action-render",
-                className: "copilotKitCustomAssistantMessage",
-                children: toRender
-              },
-              index
-            );
-          }
-        } catch (e) {
-          console.error(`Error executing render function for action ${message.name}: ${e}`);
-          return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-            isCurrentMessage && inProgress && icons.spinnerIcon,
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("b", { children: [
-              "\u274C Error executing render: ",
-              message.name
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("br", {}),
-            e instanceof Error ? e.message : String(e)
-          ] }, index);
-        }
-      }
-    } else if (!inProgress || !isCurrentMessage) {
-      return null;
-    } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: icons.spinnerIcon }, index);
-    }
-  }
-}
-
-// src/components/chat/messages/RenderResultMessage.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-function RenderResultMessage(props) {
-  const { message, inProgress, index, isCurrentMessage } = props;
+// src/components/chat/messages/AssistantMessage.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var AssistantMessage = (props) => {
   const { icons } = useChatContext();
-  if (message.isResultMessage() && inProgress && isCurrentMessage) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: icons.spinnerIcon }, index);
-  }
-}
+  const { message, isLoading, subComponent } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    (message || isLoading) && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "copilotKitMessage copilotKitAssistantMessage", children: [
+      message && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Markdown, { content: message || "" }),
+      isLoading && icons.spinnerIcon
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { marginBottom: "0.5rem" }, children: subComponent })
+  ] });
+};
 
-// src/components/chat/messages/RenderAgentStateMessage.tsx
-var import_react_core4 = require("@copilotkit/react-core");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-function RenderAgentStateMessage(props) {
-  const { message, inProgress, index, isCurrentMessage } = props;
-  const { chatComponentsCache } = (0, import_react_core4.useCopilotContext)();
-  const { icons } = useChatContext();
-  if (message.isAgentStateMessage()) {
-    let render;
-    if (chatComponentsCache.current !== null) {
-      render = chatComponentsCache.current.coAgentStateRenders[`${message.agentName}-${message.nodeName}`] || chatComponentsCache.current.coAgentStateRenders[`${message.agentName}-global`];
-    }
-    if (render) {
-      if (typeof render === "string") {
-        if (isCurrentMessage && inProgress) {
-          return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-            icons.spinnerIcon,
-            " ",
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "inProgressLabel", children: render })
-          ] }, index);
-        } else {
-          return null;
-        }
-      } else {
-        const state = message.state;
-        let status = message.active ? "inProgress" : "complete";
-        const toRender = render({
-          status,
-          state,
-          nodeName: message.nodeName
-        });
-        if (!toRender && status === "complete") {
-          return null;
-        }
-        if (!toRender && isCurrentMessage && inProgress) {
-          return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: icons.spinnerIcon }, index);
-        } else if (!toRender) {
-          return null;
-        }
-        if (typeof toRender === "string") {
-          return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-            isCurrentMessage && inProgress && icons.spinnerIcon,
-            " ",
-            toRender
-          ] }, index);
-        } else {
-          return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "copilotKitCustomAssistantMessage", children: toRender }, index);
-        }
-      }
-    } else if (!inProgress || !isCurrentMessage) {
-      return null;
-    } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: icons.spinnerIcon }, index);
-    }
-  }
-}
+// src/components/chat/messages/UserMessage.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var UserMessage = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: props.message });
+};
 
 // src/components/chat/Suggestion.tsx
 var import_react_core5 = require("@copilotkit/react-core");
 var import_shared = require("@copilotkit/shared");
 var import_runtime_client_gql3 = require("@copilotkit/runtime-client-gql");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Suggestion({ title, message, onClick, partial, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "button",
     {
       disabled: partial,
@@ -1593,7 +1702,7 @@ function Suggestion({ title, message, onClick, partial, className }) {
       className: className || "suggestion",
       children: [
         partial && SmallSpinnerIcon,
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: title })
       ]
     }
   );
@@ -1811,8 +1920,8 @@ var import_react_core7 = require("@copilotkit/react-core");
 var import_react10 = require("react");
 
 // src/components/dev-console/icons.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var ExclamationMarkTriangleIcon = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var ExclamationMarkTriangleIcon = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   "svg",
   {
     width: "13.3967723px",
@@ -1820,7 +1929,7 @@ var ExclamationMarkTriangleIcon = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     viewBox: "0 0 13.3967723 12",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { id: "exclamation-triangle", fill: "#CD2121", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("g", { id: "exclamation-triangle", fill: "#CD2121", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "path",
       {
         d: "M5.39935802,0.75 C5.97670802,-0.25 7.42007802,-0.25 7.99742802,0.75 L13.193588,9.75 C13.770888,10.75 13.049288,12 11.894588,12 L1.50223802,12 C0.34753802,12 -0.37414898,10.75 0.20319802,9.75 L5.39935802,0.75 Z M6.69838802,2.5 C7.11260802,2.5 7.44838802,2.83579 7.44838802,3.25 L7.44838802,6.25 C7.44838802,6.66421 7.11260802,7 6.69838802,7 C6.28417802,7 5.94838802,6.66421 5.94838802,6.25 L5.94838802,3.25 C5.94838802,2.83579 6.28417802,2.5 6.69838802,2.5 Z M6.69838802,10.5 C7.25067802,10.5 7.69838802,10.0523 7.69838802,9.5 C7.69838802,8.9477 7.25067802,8.5 6.69838802,8.5 C6.14610802,8.5 5.69838802,8.9477 5.69838802,9.5 C5.69838802,10.0523 6.14610802,10.5 6.69838802,10.5 Z",
@@ -1829,7 +1938,7 @@ var ExclamationMarkTriangleIcon = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     ) }) })
   }
 );
-var ExclamationMarkIcon = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var ExclamationMarkIcon = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   "svg",
   {
     width: "14px",
@@ -1837,7 +1946,7 @@ var ExclamationMarkIcon = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     viewBox: "0 0 14 14",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { id: "exclamation-circle", fill: "#EC662C", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("g", { id: "exclamation-circle", fill: "#EC662C", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "path",
       {
         d: "M7,14 C10.866,14 14,10.866 14,7 C14,3.13401 10.866,0 7,0 C3.13401,0 0,3.13401 0,7 C0,10.866 3.13401,14 7,14 Z M7,3 C7.41421,3 7.75,3.33579 7.75,3.75 L7.75,6.75 C7.75,7.16421 7.41421,7.5 7,7.5 C6.58579,7.5 6.25,7.16421 6.25,6.75 L6.25,3.75 C6.25,3.33579 6.58579,3 7,3 Z M7,11 C7.55228,11 8,10.5523 8,10 C8,9.4477 7.55228,9 7,9 C6.44772,9 6,9.4477 6,10 C6,10.5523 6.44772,11 7,11 Z",
@@ -1846,14 +1955,14 @@ var ExclamationMarkIcon = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     ) }) })
   }
 );
-var ChevronDownIcon = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: "7px", height: "4px", viewBox: "0 0 7 4", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { id: "Group", fill: "#000000", fillRule: "nonzero", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var ChevronDownIcon = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: "7px", height: "4px", viewBox: "0 0 7 4", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("g", { id: "Group", fill: "#000000", fillRule: "nonzero", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   "path",
   {
     d: "M3.71690723,3.90271086 C3.59268176,4.03242971 3.39143629,4.03242971 3.26721082,3.90271086 L0.0853966595,0.57605615 C-0.0314221035,0.444981627 -0.0279751448,0.240725043 0.0931934622,0.114040675 C0.214362069,-0.0126436935 0.409725445,-0.0162475626 0.535093061,0.105888951 L3.49205902,3.19746006 L6.44902499,0.105888951 C6.52834574,0.0168884389 6.64780588,-0.0197473458 6.7605411,0.0103538404 C6.87327633,0.0404550266 6.96130636,0.132492308 6.99009696,0.250359396 C7.01888756,0.368226483 6.98384687,0.493124608 6.89872139,0.57605615 L3.71690723,3.90271086 Z",
     id: "Path"
   }
 ) }) }) });
-var CheckIcon2 = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var CheckIcon2 = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   "svg",
   {
     width: "14px",
@@ -1861,7 +1970,7 @@ var CheckIcon2 = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     viewBox: "0 0 14 14",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { id: "Group-2", transform: "translate(-118, 0)", fill: "#1BC030", fillRule: "nonzero", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { id: "Group", transform: "translate(118, 0)", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("g", { id: "Group-2", transform: "translate(-118, 0)", fill: "#1BC030", fillRule: "nonzero", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("g", { id: "Group", transform: "translate(118, 0)", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "path",
       {
         d: "M0,7 C0,3.13384615 3.13384615,0 7,0 C10.8661538,0 14,3.13384615 14,7 C14,10.8661538 10.8661538,14 7,14 C3.13384615,14 0,10.8661538 0,7 Z M9.59179487,5.69764103 C9.70905818,5.54139023 9.73249341,5.33388318 9.65303227,5.15541491 C9.57357113,4.97694665 9.40367989,4.85551619 9.20909814,4.83811118 C9.01451638,4.82070616 8.82577109,4.91005717 8.71589744,5.07158974 L6.39261538,8.32389744 L5.22666667,7.15794872 C5.01450582,6.96025518 4.68389046,6.9660885 4.47883563,7.17114332 C4.27378081,7.37619815 4.26794748,7.70681351 4.46564103,7.91897436 L6.08102564,9.53435897 C6.19289944,9.64614839 6.3482622,9.70310251 6.50588106,9.69010587 C6.66349993,9.67710922 6.80743532,9.59547613 6.89948718,9.46687179 L9.59179487,5.69764103 L9.59179487,5.69764103 Z",
@@ -1870,7 +1979,7 @@ var CheckIcon2 = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     ) }) }) })
   }
 );
-var CopilotKitIcon = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+var CopilotKitIcon = /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
   "svg",
   {
     width: "33px",
@@ -1879,8 +1988,8 @@ var CopilotKitIcon = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("title", { children: "bd5c9079-929b-4d55-bdc9-16d1c8181b71" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("title", { children: "bd5c9079-929b-4d55-bdc9-16d1c8181b71" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "image",
         {
           x: "0",
@@ -1902,8 +2011,8 @@ var import_shared2 = require("@copilotkit/shared");
 var import_react9 = require("react");
 
 // src/components/help-modal/icons.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var CloseIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var CloseIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1913,10 +2022,10 @@ var CloseIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     stroke: "currentColor",
     width: "20",
     height: "20",
-    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
   }
 );
-var LoadingSpinnerIcon = ({ color = "rgb(107 114 128)" }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+var LoadingSpinnerIcon = ({ color = "rgb(107 114 128)" }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
   "svg",
   {
     style: {
@@ -1929,7 +2038,7 @@ var LoadingSpinnerIcon = ({ color = "rgb(107 114 128)" }) => /* @__PURE__ */ (0,
     fill: "none",
     viewBox: "0 0 24 24",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "circle",
         {
           style: { opacity: 0.25 },
@@ -1940,7 +2049,7 @@ var LoadingSpinnerIcon = ({ color = "rgb(107 114 128)" }) => /* @__PURE__ */ (0,
           strokeWidth: "4"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "path",
         {
           style: { opacity: 0.75 },
@@ -1953,7 +2062,7 @@ var LoadingSpinnerIcon = ({ color = "rgb(107 114 128)" }) => /* @__PURE__ */ (0,
 );
 
 // src/components/help-modal/modal.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function CopilotKitHelpModal() {
   const [showHelpModal, setShowHelpModal] = (0, import_react9.useState)(false);
   const [issueDescription, setIssueDescription] = (0, import_react9.useState)("");
@@ -1989,7 +2098,7 @@ function CopilotKitHelpModal() {
     setSubmitting(false);
     setShowHelpModal(false);
   });
-  const HelpButton = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  const HelpButton = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "button",
     {
       onClick: () => setShowHelpModal(true),
@@ -2003,27 +2112,27 @@ function CopilotKitHelpModal() {
     () => submitting || !!emailError || issueDescription == null || (issueDescription == null ? void 0 : issueDescription.length) == 0,
     [submitting, emailError, issueDescription]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(HelpButton, {}),
-    showHelpModal && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(HelpButton, {}),
+    showHelpModal && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "div",
       {
         className: "fixed inset-0 flex items-center justify-center p-4",
         style: { backgroundColor: "rgba(11, 15, 26, 0.5)", zIndex: 99 },
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "bg-white rounded-lg shadow-xl max-w-md w-full p-4 flex-col relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "bg-white rounded-lg shadow-xl max-w-md w-full p-4 flex-col relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "button",
             {
               className: "absolute text-gray-400 hover:text-gray-600 focus:outline-none",
               style: { top: "10px", right: "10px" },
               onClick: () => setShowHelpModal(false),
               "aria-label": "Close",
-              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CloseIcon2, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CloseIcon2, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-full flex mb-6 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "text-2xl font-bold", children: "Help Options" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-4 mb-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-full flex mb-6 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: "text-2xl font-bold", children: "Help Options" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "space-y-4 mb-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "a",
               {
                 href: "https://docs.copilotkit.ai/coagents/troubleshooting/common-issues",
@@ -2032,7 +2141,7 @@ function CopilotKitHelpModal() {
                 children: "Visit the Troubleshooting and FAQ section in the docs"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "a",
               {
                 href: "https://go.copilotkit.ai/dev-console-support-discord",
@@ -2041,7 +2150,7 @@ function CopilotKitHelpModal() {
                 children: "Go to Discord Support Channel (Community Support)"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "a",
               {
                 href: "https://go.copilotkit.ai/dev-console-support-slack",
@@ -2051,10 +2160,10 @@ function CopilotKitHelpModal() {
               }
             ) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("form", { onSubmit: handleSubmit, className: "flex flex-col space-y-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { htmlFor: "feedback", className: "block text-sm font-medium text-gray-700 mb-1", children: "Let us know what your issue is:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("form", { onSubmit: handleSubmit, className: "flex flex-col space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { htmlFor: "feedback", className: "block text-sm font-medium text-gray-700 mb-1", children: "Let us know what your issue is:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "textarea",
                 {
                   id: "feedback",
@@ -2067,9 +2176,9 @@ function CopilotKitHelpModal() {
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700 mb-1", children: "Email (optional):" }),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700 mb-1", children: "Email (optional):" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "input",
                 {
                   type: "email",
@@ -2083,9 +2192,9 @@ function CopilotKitHelpModal() {
                   value: email
                 }
               ),
-              emailError && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-red-500 text-sm mt-1", children: emailError })
+              emailError && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-red-500 text-sm mt-1", children: emailError })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "bg-gray-50 px-4 py-4 sm:px-6 sm:flex sm:flex-row-reverse rounded-b-lg", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "bg-gray-50 px-4 py-4 sm:px-6 sm:flex sm:flex-row-reverse rounded-b-lg", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 type: "submit",
@@ -2093,7 +2202,7 @@ function CopilotKitHelpModal() {
                 disabled: submitButtonDisabled,
                 style: submitButtonDisabled ? { backgroundColor: "rgb(216, 216, 216)", color: "rgb(129, 129, 129)" } : void 0,
                 className: "w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-500 text-base font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm disabled:shadow-none",
-                children: submitting ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LoadingSpinnerIcon, { color: "white" }) : "Submit"
+                children: submitting ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LoadingSpinnerIcon, { color: "white" }) : "Submit"
               }
             ) })
           ] })
@@ -2104,7 +2213,7 @@ function CopilotKitHelpModal() {
 }
 
 // src/components/dev-console/console.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function CopilotDevConsole() {
   const currentVersion = import_shared2.COPILOTKIT_VERSION;
   const context = (0, import_react_core7.useCopilotContext)();
@@ -2178,14 +2287,14 @@ function CopilotDevConsole() {
   if (!showDevConsole) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       ref: consoleRef,
       className: "copilotKitDevConsole " + (versionStatus === "update-available" ? "copilotKitDevConsoleUpgrade" : "") + (versionStatus === "outdated" ? "copilotKitDevConsoleWarnOutdated" : ""),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "copilotKitDevConsoleLogo", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("a", { href: "https://copilotkit.ai", target: "_blank", children: CopilotKitIcon }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "copilotKitDevConsoleLogo", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { href: "https://copilotkit.ai", target: "_blank", children: CopilotKitIcon }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           VersionInfo,
           {
             showDevConsole: context.showDevConsole,
@@ -2194,8 +2303,8 @@ function CopilotDevConsole() {
             latestVersion
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CopilotKitHelpModal, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CopilotKitHelpModal, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           DebugMenuButton,
           {
             setShowDevConsole,
@@ -2250,12 +2359,12 @@ function VersionInfo({
       setTimeout(() => setCopyStatus(""), 1e3);
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "copilotKitVersionInfo", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("header", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "copilotKitVersionInfo", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("header", { children: [
       "COPILOTKIT DEV CONSOLE",
-      showDevConsole === "auto" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("aside", { children: asideLabel })
+      showDevConsole === "auto" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("aside", { children: asideLabel })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("section", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { children: [
       "Version: ",
       versionLabel,
       " (",
@@ -2263,7 +2372,7 @@ function VersionInfo({
       ") ",
       versionIcon
     ] }),
-    (versionStatus === "update-available" || versionStatus === "outdated") && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("footer", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: handleCopyClick, children: copyStatus || installCommand }) })
+    (versionStatus === "update-available" || versionStatus === "outdated") && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("footer", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: handleCopyClick, children: copyStatus || installCommand }) })
   ] });
 }
 function DebugMenuButton({
@@ -2273,12 +2382,12 @@ function DebugMenuButton({
 }) {
   const context = (0, import_react_core7.useCopilotContext)();
   const messagesContext = (0, import_react_core7.useCopilotMessagesContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "bg-black top-24 w-52 text-right", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react11.Menu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react11.MenuButton, { className: `copilotKitDebugMenuButton ${mode === "compact" ? "compact" : ""}`, children: mode == "compact" ? "Debug" : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "bg-black top-24 w-52 text-right", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react11.Menu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react11.MenuButton, { className: `copilotKitDebugMenuButton ${mode === "compact" ? "compact" : ""}`, children: mode == "compact" ? "Debug" : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
       "Debug ",
       ChevronDownIcon
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       import_react11.MenuItems,
       {
         transition: true,
@@ -2286,9 +2395,9 @@ function DebugMenuButton({
         className: "copilotKitDebugMenu",
         style: { zIndex: 40 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react11.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logReadables(context), children: "Log Readables" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react11.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logActions(context), children: "Log Actions" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react11.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react11.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logReadables(context), children: "Log Readables" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react11.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logActions(context), children: "Log Actions" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react11.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "button",
             {
               className: "copilotKitDebugMenuItem",
@@ -2296,9 +2405,9 @@ function DebugMenuButton({
               children: "Log Messages"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react11.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => checkForUpdates(true), children: "Check for Updates" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("hr", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react11.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => setShowDevConsole(false), children: "Hide Dev Console" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react11.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => checkForUpdates(true), children: "Check for Updates" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("hr", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react11.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => setShowDevConsole(false), children: "Hide Dev Console" }) })
         ]
       }
     )
@@ -2307,7 +2416,7 @@ function DebugMenuButton({
 
 // src/components/chat/Chat.tsx
 var import_react_core9 = require("@copilotkit/react-core");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function CopilotChat({
   instructions,
   onSubmitMessage,
@@ -2325,7 +2434,9 @@ function CopilotChat({
   ResponseButton: ResponseButton2 = ResponseButton,
   className,
   icons,
-  labels
+  labels,
+  AssistantMessage: AssistantMessage2 = AssistantMessage,
+  UserMessage: UserMessage2 = UserMessage
 }) {
   const context = (0, import_react_core8.useCopilotContext)();
   (0, import_react12.useEffect)(() => {
@@ -2347,11 +2458,13 @@ function CopilotChat({
   );
   const chatContext = import_react12.default.useContext(ChatContext);
   const isVisible = chatContext ? chatContext.open : true;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CopilotDevConsole, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CopilotDevConsole, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       Messages2,
       {
+        AssistantMessage: AssistantMessage2,
+        UserMessage: UserMessage2,
         RenderTextMessage: RenderTextMessage2,
         RenderActionExecutionMessage: RenderActionExecutionMessage2,
         RenderAgentStateMessage: RenderAgentStateMessage2,
@@ -2359,9 +2472,9 @@ function CopilotChat({
         messages: visibleMessages,
         inProgress: isLoading,
         children: [
-          currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h6", { children: "Suggested:" }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "suggestions", children: currentSuggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h6", { children: "Suggested:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "suggestions", children: currentSuggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               Suggestion,
               {
                 title: suggestion.title,
@@ -2373,7 +2486,7 @@ function CopilotChat({
               index
             )) })
           ] }),
-          showResponseButton && visibleMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          showResponseButton && visibleMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             ResponseButton2,
             {
               onClick: isLoading ? stopGeneration : reloadMessages,
@@ -2383,7 +2496,7 @@ function CopilotChat({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Input2, { inProgress: isLoading, onSend: sendMessage, isVisible })
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Input2, { inProgress: isLoading, onSend: sendMessage, isVisible })
   ] });
 }
 function WrappedCopilotChat({
@@ -2394,10 +2507,10 @@ function WrappedCopilotChat({
 }) {
   const chatContext = import_react12.default.useContext(ChatContext);
   if (!chatContext) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChatContextProvider, { icons, labels, open: true, setOpen: () => {
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `copilotKitChat ${className}`, children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChatContextProvider, { icons, labels, open: true, setOpen: () => {
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: `copilotKitChat ${className}`, children }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children });
 }
 var SUGGESTIONS_DEBOUNCE_TIMEOUT = 1e3;
 var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onStopGeneration, onReloadMessages) => {
@@ -2558,7 +2671,7 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onS
 };
 
 // src/components/chat/Modal.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var CopilotModal = ({
   instructions,
   defaultOpen = false,
@@ -2580,6 +2693,8 @@ var CopilotModal = ({
   Messages: Messages2 = Messages,
   Input: Input2 = Input,
   ResponseButton: ResponseButton2 = ResponseButton,
+  AssistantMessage: AssistantMessage2 = AssistantMessage,
+  UserMessage: UserMessage2 = UserMessage,
   className,
   children
 }) => {
@@ -2588,19 +2703,19 @@ var CopilotModal = ({
     onSetOpen == null ? void 0 : onSetOpen(open);
     setOpenState(open);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ChatContextProvider, { icons, labels, open: openState, setOpen, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ChatContextProvider, { icons, labels, open: openState, setOpen, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button2, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button2, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         Window2,
         {
           clickOutsideToClose,
           shortcut,
           hitEscapeToClose,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Header2, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Header2, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               CopilotChat,
               {
                 instructions,
@@ -2612,7 +2727,9 @@ var CopilotModal = ({
                 onInProgress,
                 Messages: Messages2,
                 Input: Input2,
-                ResponseButton: ResponseButton2
+                ResponseButton: ResponseButton2,
+                AssistantMessage: AssistantMessage2,
+                UserMessage: UserMessage2
               }
             )
           ]
@@ -2623,12 +2740,12 @@ var CopilotModal = ({
 };
 
 // src/components/chat/Popup.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function CopilotPopup(props) {
   props = __spreadProps(__spreadValues({}, props), {
     className: props.className ? props.className + " copilotKitPopup" : "copilotKitPopup"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CopilotModal, __spreadProps(__spreadValues({}, props), { children: props.children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CopilotModal, __spreadProps(__spreadValues({}, props), { children: props.children }));
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {