@copilotkit/react-ui 1.8.12-next.4 → 1.8.12-next.6

package/dist/components/chat/Modal.js

@@ -396,15 +396,6 @@ var ChatContextProvider = ({
 // src/components/chat/Window.tsx
 var import_react2 = __toESM(require("react"));
 var import_react_core = require("@copilotkit/react-core");
-
-// src/hooks/use-dark-mode.ts
-var useDarkMode = () => {
-  if (typeof window === "undefined")
-    return false;
-  return document.documentElement.classList.contains("dark") || document.body.classList.contains("dark") || document.documentElement.getAttribute("data-theme") === "dark" || document.body.getAttribute("data-theme") === "dark" || window.matchMedia("(prefers-color-scheme: dark)").matches;
-};
-
-// src/components/chat/Window.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Window = ({
   children,
@@ -412,17 +403,16 @@ var Window = ({
   shortcut,
   hitEscapeToClose
 }) => {
-  var _a;
   const windowRef = import_react2.default.useRef(null);
   const context = (0, import_react_core.useCopilotContext)();
   const { open, setOpen } = useChatContext();
   const handleClickOutside = (0, import_react2.useCallback)(
     (event) => {
-      var _a2;
+      var _a;
       if (!clickOutsideToClose) {
         return;
       }
-      const parentElement = (_a2 = windowRef.current) == null ? void 0 : _a2.parentElement;
+      const parentElement = (_a = windowRef.current) == null ? void 0 : _a.parentElement;
       let className = "";
       if (event.target instanceof HTMLElement) {
         className = event.target.className;
@@ -436,10 +426,10 @@ var Window = ({
   );
   const handleKeyDown = (0, import_react2.useCallback)(
     (event) => {
-      var _a2;
+      var _a;
       const target = event.target;
       const isInput = target.tagName === "INPUT" || target.tagName === "SELECT" || target.tagName === "TEXTAREA" || target.isContentEditable;
-      const isDescendantOfWrapper = (_a2 = windowRef.current) == null ? void 0 : _a2.contains(target);
+      const isDescendantOfWrapper = (_a = windowRef.current) == null ? void 0 : _a.contains(target);
       if (open && event.key === "Escape" && (!isInput || isDescendantOfWrapper) && hitEscapeToClose) {
         setOpen(false);
       } else if (event.key === shortcut && (isMacOS() && event.metaKey || !isMacOS() && event.ctrlKey) && (!isInput || isDescendantOfWrapper)) {
@@ -494,29 +484,7 @@ var Window = ({
       }
     };
   }, [adjustForMobile, handleClickOutside, handleKeyDown]);
-  const isDark = useDarkMode();
-  const showPoweredBy = !((_a = context.copilotApiConfig) == null ? void 0 : _a.publicApiKey);
-  const poweredByStyle = {
-    visibility: "visible",
-    display: "block",
-    position: "static",
-    textAlign: "center",
-    fontSize: "12px",
-    padding: "3px 0",
-    color: isDark ? "rgb(69, 69, 69)" : "rgb(214, 214, 214)"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "div",
-    {
-      className: `copilotKitWindow ${showPoweredBy ? " poweredByContainer" : ""} ${open ? " open" : ""}`,
-      ref: windowRef,
-      children: [
-        children,
-        showPoweredBy && // @ts-expect-error -- expecting position not to be a string, but it can be.
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "poweredBy", style: poweredByStyle, children: "Powered by CopilotKit" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `copilotKitWindow ${open ? " open" : ""}`, ref: windowRef, children });
 };
 var preventScroll = (event) => {
   let targetElement = event.target;
@@ -1427,30 +1395,60 @@ var usePushToTalk = ({
 
 // src/components/chat/Input.tsx
 var import_react_core6 = require("@copilotkit/react-core");
+
+// src/hooks/use-dark-mode.ts
+var useDarkMode = () => {
+  if (typeof window === "undefined")
+    return false;
+  return document.documentElement.classList.contains("dark") || document.body.classList.contains("dark") || document.documentElement.getAttribute("data-theme") === "dark" || document.body.getAttribute("data-theme") === "dark" || window.matchMedia("(prefers-color-scheme: dark)").matches;
+};
+
+// src/components/chat/PoweredByTag.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
+function PoweredByTag({ showPoweredBy = true }) {
+  const isDark = useDarkMode();
+  if (!showPoweredBy) {
+    return null;
+  }
+  const poweredByStyle = {
+    visibility: "visible",
+    display: "block",
+    position: "static",
+    textAlign: "center",
+    fontSize: "12px",
+    padding: "3px 0",
+    color: isDark ? "rgb(69, 69, 69)" : "rgb(214, 214, 214)"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "poweredBy", style: poweredByStyle, children: "Powered by CopilotKit" }) });
+}
+
+// src/components/chat/Input.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var MAX_NEWLINES = 6;
 var Input = ({ inProgress, onSend, isVisible = false, onStop, onUpload }) => {
+  var _a;
   const context = useChatContext();
   const copilotContext = (0, import_react_core6.useCopilotContext)();
+  const showPoweredBy = !((_a = copilotContext.copilotApiConfig) == null ? void 0 : _a.publicApiKey);
   const pushToTalkConfigured = copilotContext.copilotApiConfig.textToSpeechUrl !== void 0 && copilotContext.copilotApiConfig.transcribeAudioUrl !== void 0;
   const textareaRef = (0, import_react9.useRef)(null);
   const handleDivClick = (event) => {
-    var _a;
+    var _a2;
     const target = event.target;
     if (target.closest("button"))
       return;
     if (target.tagName === "TEXTAREA")
       return;
-    (_a = textareaRef.current) == null ? void 0 : _a.focus();
+    (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
   };
   const [text, setText] = (0, import_react9.useState)("");
   const send = () => {
-    var _a;
+    var _a2;
     if (inProgress)
       return;
     onSend(text);
     setText("");
-    (_a = textareaRef.current) == null ? void 0 : _a.focus();
+    (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
   };
   const { pushToTalkState, setPushToTalkState } = usePushToTalk({
     sendFunction: onSend,
@@ -1460,62 +1458,65 @@ var Input = ({ inProgress, onSend, isVisible = false, onStop, onUpload }) => {
   const buttonIcon = isInProgress ? context.icons.stopIcon : context.icons.sendIcon;
   const showPushToTalk = pushToTalkConfigured && (pushToTalkState === "idle" || pushToTalkState === "recording") && !inProgress;
   const canSend = () => {
-    var _a;
-    const interruptEvent = (_a = copilotContext.langGraphInterruptAction) == null ? void 0 : _a.event;
+    var _a2;
+    const interruptEvent = (_a2 = copilotContext.langGraphInterruptAction) == null ? void 0 : _a2.event;
     const interruptInProgress = (interruptEvent == null ? void 0 : interruptEvent.name) === "LangGraphInterruptEvent" && !(interruptEvent == null ? void 0 : interruptEvent.response);
     return (isInProgress || !isInProgress && text.trim().length > 0) && pushToTalkState === "idle" && !interruptInProgress;
   };
   const sendDisabled = !canSend();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "copilotKitInputContainer", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      Textarea_default,
-      {
-        ref: textareaRef,
-        placeholder: context.labels.placeholder,
-        autoFocus: false,
-        maxRows: MAX_NEWLINES,
-        value: text,
-        onChange: (event) => setText(event.target.value),
-        onKeyDown: (event) => {
-          if (event.key === "Enter" && !event.shiftKey) {
-            event.preventDefault();
-            if (canSend()) {
-              send();
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `copilotKitInputContainer ${showPoweredBy ? "poweredByContainer" : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        Textarea_default,
+        {
+          ref: textareaRef,
+          placeholder: context.labels.placeholder,
+          autoFocus: false,
+          maxRows: MAX_NEWLINES,
+          value: text,
+          onChange: (event) => setText(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Enter" && !event.shiftKey) {
+              event.preventDefault();
+              if (canSend()) {
+                send();
+              }
             }
           }
         }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "copilotKitInputControls", children: [
-      onUpload && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { onClick: onUpload, className: "copilotKitInputControlButton", children: context.icons.uploadIcon }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { flexGrow: 1 } }),
-      showPushToTalk && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        "button",
-        {
-          onClick: () => setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing"),
-          className: pushToTalkState === "recording" ? "copilotKitInputControlButton copilotKitPushToTalkRecording" : "copilotKitInputControlButton",
-          children: context.icons.pushToTalkIcon
-        }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        "button",
-        {
-          disabled: sendDisabled,
-          onClick: isInProgress ? onStop : send,
-          "data-copilotkit-in-progress": inProgress,
-          "data-test-id": inProgress ? "copilot-chat-request-in-progress" : "copilot-chat-ready",
-          className: "copilotKitInputControlButton",
-          children: buttonIcon
-        }
-      )
-    ] })
-  ] }) });
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "copilotKitInputControls", children: [
+        onUpload && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { onClick: onUpload, className: "copilotKitInputControlButton", children: context.icons.uploadIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { flexGrow: 1 } }),
+        showPushToTalk && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            onClick: () => setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing"),
+            className: pushToTalkState === "recording" ? "copilotKitInputControlButton copilotKitPushToTalkRecording" : "copilotKitInputControlButton",
+            children: context.icons.pushToTalkIcon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            disabled: sendDisabled,
+            onClick: isInProgress ? onStop : send,
+            "data-copilotkit-in-progress": inProgress,
+            "data-test-id": inProgress ? "copilot-chat-request-in-progress" : "copilot-chat-ready",
+            className: "copilotKitInputControlButton",
+            children: buttonIcon
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PoweredByTag, { showPoweredBy })
+  ] });
 };
 
 // src/components/chat/messages/UserMessage.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var UserMessage = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: props.subComponent || props.message });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: props.subComponent || props.message });
 };
 
 // src/components/chat/Markdown.tsx
@@ -1549,7 +1550,7 @@ function useCopyToClipboard({ timeout = 2e3 }) {
 }
 
 // src/components/chat/CodeBlock.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var programmingLanguages = {
   javascript: ".js",
   python: ".py",
@@ -1612,15 +1613,15 @@ var CodeBlock = (0, import_react10.memo)(({ language, value }) => {
       return;
     copyToClipboard(value);
   };
-  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.jsx)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: downloadAsFile, children: DownloadIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: onCopy, children: isCopied ? CheckIcon : CopyIcon })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "copilotKitCodeBlock", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "copilotKitCodeBlockToolbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "copilotKitCodeBlockToolbarLanguage", children: language }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "copilotKitCodeBlockToolbarButtons", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: downloadAsFile, children: DownloadIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: onCopy, children: isCopied ? CheckIcon : CopyIcon })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       import_react_syntax_highlighter.Prism,
       {
         language,
@@ -1923,18 +1924,18 @@ 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_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var MemoizedReactMarkdown = (0, import_react11.memo)(
   import_react_markdown.default,
   (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className
 );
 var Markdown = ({ 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 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "copilotKitMarkdown", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MemoizedReactMarkdown, { components, remarkPlugins: [import_remark_gfm.default, import_remark_math.default], children: content }) });
 };
 var components = {
   a(_a) {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "a",
       __spreadProps(__spreadValues({
         style: { color: "blue", textDecoration: "underline" }
@@ -1949,7 +1950,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_runtime15.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "span",
           {
             style: {
@@ -1964,9 +1965,9 @@ var components = {
     }
     const match = /language-(\w+)/.exec(className || "");
     if (inline) {
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("code", __spreadProps(__spreadValues({ className }, props), { children }));
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("code", __spreadProps(__spreadValues({ className }, props), { children }));
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       CodeBlock,
       __spreadValues({
         language: match && match[1] || "",
@@ -1979,7 +1980,7 @@ var components = {
 
 // src/components/chat/messages/AssistantMessage.tsx
 var import_react12 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var AssistantMessage = (props) => {
   const { icons, labels } = useChatContext();
   const {
@@ -2020,17 +2021,17 @@ var AssistantMessage = (props) => {
       onThumbsDown(message);
     }
   };
-  const LoadingIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: icons.activityIcon });
-  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 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(LoadingIcon, {}),
-      message && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  const LoadingIcon = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: icons.activityIcon });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    (message || isLoading) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "copilotKitMessage copilotKitAssistantMessage", children: [
+      message && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Markdown, { content: message || "" }),
+      isLoading && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LoadingIcon, {}),
+      message && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
         "div",
         {
           className: `copilotKitMessageControls ${isCurrentMessage ? "currentMessage" : ""}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "button",
               {
                 className: "copilotKitMessageControlButton",
@@ -2040,17 +2041,17 @@ var AssistantMessage = (props) => {
                 children: icons.regenerateIcon
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "button",
               {
                 className: "copilotKitMessageControlButton",
                 onClick: handleCopy,
                 "aria-label": labels.copyToClipboard,
                 title: labels.copyToClipboard,
-                children: copied ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontSize: "10px", fontWeight: "bold" }, children: "\u2713" }) : icons.copyIcon
+                children: copied ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { fontSize: "10px", fontWeight: "bold" }, children: "\u2713" }) : icons.copyIcon
               }
             ),
-            onThumbsUp && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            onThumbsUp && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "button",
               {
                 className: "copilotKitMessageControlButton",
@@ -2060,7 +2061,7 @@ var AssistantMessage = (props) => {
                 children: icons.thumbsUpIcon
               }
             ),
-            onThumbsDown && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            onThumbsDown && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "button",
               {
                 className: "copilotKitMessageControlButton",
@@ -2074,12 +2075,12 @@ var AssistantMessage = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { marginBottom: "0.5rem" }, children: subComponent })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { marginBottom: "0.5rem" }, children: subComponent })
   ] });
 };
 
 // src/components/chat/messages/RenderTextMessage.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function RenderTextMessage(_a) {
   var _b = _a, {
     UserMessage: UserMessage2 = UserMessage,
@@ -2100,7 +2101,7 @@ function RenderTextMessage(_a) {
   } = props;
   if (message.isTextMessage()) {
     if (message.role === "user") {
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         UserMessage2,
         {
           "data-message-role": "user",
@@ -2110,7 +2111,7 @@ function RenderTextMessage(_a) {
         index
       );
     } else if (message.role == "assistant") {
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         AssistantMessage2,
         {
           "data-message-role": "assistant",
@@ -2133,7 +2134,7 @@ function RenderTextMessage(_a) {
 // src/components/chat/messages/RenderActionExecutionMessage.tsx
 var import_runtime_client_gql2 = require("@copilotkit/runtime-client-gql");
 var import_react_core7 = require("@copilotkit/react-core");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function RenderActionExecutionMessage(_a) {
   var _b = _a, {
     AssistantMessage: AssistantMessage2 = AssistantMessage
@@ -2147,7 +2148,7 @@ function RenderActionExecutionMessage(_a) {
       const render = chatComponentsCache.current.actions[message.name] || chatComponentsCache.current.actions["*"];
       if (typeof render === "string") {
         if (isCurrentMessage && inProgress) {
-          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             AssistantMessage2,
             {
               rawData: message,
@@ -2180,7 +2181,7 @@ function RenderActionExecutionMessage(_a) {
             return null;
           }
           if (typeof toRender === "string") {
-            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               AssistantMessage2,
               {
                 rawData: message,
@@ -2192,7 +2193,7 @@ function RenderActionExecutionMessage(_a) {
               index
             );
           } else {
-            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               AssistantMessage2,
               {
                 rawData: message,
@@ -2206,20 +2207,20 @@ function RenderActionExecutionMessage(_a) {
           }
         } catch (e) {
           console.error(`Error executing render function for action ${message.name}: ${e}`);
-          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             AssistantMessage2,
             {
               rawData: message,
               "data-message-role": "assistant",
               isLoading: false,
               isGenerating: false,
-              subComponent: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "copilotKitMessage copilotKitAssistantMessage", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("b", { children: [
+              subComponent: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "copilotKitMessage copilotKitAssistantMessage", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("b", { children: [
                   "\u274C Error executing render function for action ",
                   message.name,
                   ":"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("pre", { children: e instanceof Error ? e.message : String(e) })
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("pre", { children: e instanceof Error ? e.message : String(e) })
               ] })
             },
             index
@@ -2229,7 +2230,7 @@ function RenderActionExecutionMessage(_a) {
     } else if (!inProgress || !isCurrentMessage) {
       return null;
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         AssistantMessage2,
         {
           rawData: message,
@@ -2244,7 +2245,7 @@ function RenderActionExecutionMessage(_a) {
 }
 
 // src/components/chat/messages/RenderResultMessage.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function RenderResultMessage(_a) {
   var _b = _a, {
     AssistantMessage: AssistantMessage2 = AssistantMessage
@@ -2253,7 +2254,7 @@ function RenderResultMessage(_a) {
   ]);
   const { message, inProgress, index, isCurrentMessage } = props;
   if (message.isResultMessage() && inProgress && isCurrentMessage) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       AssistantMessage2,
       {
         "data-message-role": "assistant",
@@ -2270,7 +2271,7 @@ function RenderResultMessage(_a) {
 
 // src/components/chat/messages/RenderAgentStateMessage.tsx
 var import_react_core8 = require("@copilotkit/react-core");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function RenderAgentStateMessage(_a) {
   var _b = _a, {
     AssistantMessage: AssistantMessage2 = AssistantMessage
@@ -2287,7 +2288,7 @@ function RenderAgentStateMessage(_a) {
     if (render) {
       if (typeof render === "string") {
         if (isCurrentMessage && inProgress) {
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             AssistantMessage2,
             {
               rawData: message,
@@ -2313,7 +2314,7 @@ function RenderAgentStateMessage(_a) {
           return null;
         }
         if (!toRender && isCurrentMessage && inProgress) {
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             AssistantMessage2,
             {
               "data-message-role": "assistant",
@@ -2327,7 +2328,7 @@ function RenderAgentStateMessage(_a) {
           return null;
         }
         if (typeof toRender === "string") {
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             AssistantMessage2,
             {
               rawData: message,
@@ -2339,7 +2340,7 @@ function RenderAgentStateMessage(_a) {
             index
           );
         } else {
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             AssistantMessage2,
             {
               rawData: message,
@@ -2355,7 +2356,7 @@ function RenderAgentStateMessage(_a) {
     } else if (!inProgress || !isCurrentMessage) {
       return null;
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         AssistantMessage2,
         {
           rawData: message,
@@ -2370,7 +2371,7 @@ function RenderAgentStateMessage(_a) {
 }
 
 // src/components/chat/messages/RenderImageMessage.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function RenderImageMessage(_a) {
   var _b = _a, {
     UserMessage: UserMessage2 = UserMessage,
@@ -2391,7 +2392,7 @@ function RenderImageMessage(_a) {
   } = props;
   if (message.isImageMessage()) {
     const imageData = `data:${message.format};base64,${message.bytes}`;
-    const imageComponent = /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "copilotKitImage", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    const imageComponent = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "copilotKitImage", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "img",
       {
         src: imageData,
@@ -2400,7 +2401,7 @@ function RenderImageMessage(_a) {
       }
     ) });
     if (message.role === "user") {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         UserMessage2,
         {
           "data-message-role": "user",
@@ -2411,7 +2412,7 @@ function RenderImageMessage(_a) {
         index
       );
     } else if (message.role === "assistant") {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         AssistantMessage2,
         {
           "data-message-role": "assistant",
@@ -2437,9 +2438,9 @@ function RenderImageMessage(_a) {
 var import_react_core9 = require("@copilotkit/react-core");
 var import_shared2 = require("@copilotkit/shared");
 var import_runtime_client_gql3 = require("@copilotkit/runtime-client-gql");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function Suggestion({ title, message, onClick, partial, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "button",
     {
       disabled: partial,
@@ -2449,7 +2450,7 @@ function Suggestion({ title, message, onClick, partial, className }) {
       },
       className: className || (partial ? "suggestion loading" : "suggestion"),
       "data-test-id": "suggestion",
-      children: partial ? SmallSpinnerIcon : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: title })
+      children: partial ? SmallSpinnerIcon : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: title })
     }
   );
 }
@@ -2531,7 +2532,7 @@ var import_shared3 = require("@copilotkit/shared");
 var import_react_core11 = require("@copilotkit/react-core");
 
 // src/components/chat/ImageUploadQueue.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var ImageUploadQueue = ({
   images,
   onRemoveImage,
@@ -2539,7 +2540,7 @@ var ImageUploadQueue = ({
 }) => {
   if (images.length === 0)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
       className: `copilotKitImageUploadQueue ${className}`,
@@ -2550,7 +2551,7 @@ var ImageUploadQueue = ({
         margin: "8px",
         padding: "8px"
       },
-      children: images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      children: images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         "div",
         {
           className: "copilotKitImageUploadQueueItem",
@@ -2563,7 +2564,7 @@ var ImageUploadQueue = ({
             overflow: "hidden"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "img",
               {
                 src: `data:${image.contentType};base64,${image.bytes}`,
@@ -2575,7 +2576,7 @@ var ImageUploadQueue = ({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "button",
               {
                 onClick: () => onRemoveImage(index),
@@ -2609,7 +2610,7 @@ var ImageUploadQueue = ({
 };
 
 // src/components/chat/Chat.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function CopilotChat({
   instructions,
   onSubmitMessage,
@@ -2766,8 +2767,8 @@ function CopilotChat({
   const removeSelectedImage = (index) => {
     setSelectedImages((prev) => prev.filter((_, i) => i !== index));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Messages2,
       {
         AssistantMessage: AssistantMessage2,
@@ -2783,7 +2784,7 @@ function CopilotChat({
         onCopy: handleCopy,
         onThumbsUp,
         onThumbsDown,
-        children: currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "suggestions", children: currentSuggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        children: currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "suggestions", children: currentSuggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Suggestion,
           {
             title: suggestion.title,
@@ -2796,9 +2797,9 @@ function CopilotChat({
         )) })
       }
     ),
-    imageUploadsEnabled && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ImageUploadQueue, { images: selectedImages, onRemoveImage: removeSelectedImage }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    imageUploadsEnabled && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ImageUploadQueue, { images: selectedImages, onRemoveImage: removeSelectedImage }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "input",
         {
           type: "file",
@@ -2810,7 +2811,7 @@ function CopilotChat({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Input2,
       {
         inProgress: isLoading,
@@ -2833,10 +2834,10 @@ function WrappedCopilotChat({
 }) {
   const chatContext = import_react13.default.useContext(ChatContext);
   if (!chatContext) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChatContextProvider, { icons, labels, open: true, setOpen: () => {
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `copilotKitChat ${className}`, children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChatContextProvider, { icons, labels, open: true, setOpen: () => {
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `copilotKitChat ${className != null ? className : ""}`, children }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children });
 }
 var SUGGESTIONS_DEBOUNCE_TIMEOUT = 1e3;
 var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onStopGeneration, onReloadMessages) => {
@@ -3021,7 +3022,7 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onS
 };
 
 // src/components/chat/Modal.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var CopilotModal = ({
   instructions,
   defaultOpen = false,
@@ -3055,19 +3056,19 @@ var CopilotModal = ({
     onSetOpen == null ? void 0 : onSetOpen(open);
     setOpenState(open);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(ChatContextProvider, { icons, labels, open: openState, setOpen, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(ChatContextProvider, { icons, labels, open: openState, setOpen, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button2, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button2, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
         Window2,
         {
           clickOutsideToClose,
           shortcut,
           hitEscapeToClose,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Header2, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Header2, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               CopilotChat,
               {
                 instructions,