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

package/dist/components/index.js

@@ -407,15 +407,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,
@@ -423,17 +414,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;
@@ -447,10 +437,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)) {
@@ -505,29 +495,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;
@@ -1438,30 +1406,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,
@@ -1471,62 +1469,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
@@ -1560,7 +1561,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",
@@ -1623,15 +1624,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,
@@ -1934,18 +1935,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" }
@@ -1960,7 +1961,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: {
@@ -1975,9 +1976,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] || "",
@@ -1990,7 +1991,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 {
@@ -2031,17 +2032,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",
@@ -2051,17 +2052,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",
@@ -2071,7 +2072,7 @@ var AssistantMessage = (props) => {
                 children: icons.thumbsUpIcon
               }
             ),
-            onThumbsDown && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            onThumbsDown && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "button",
               {
                 className: "copilotKitMessageControlButton",
@@ -2085,12 +2086,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,
@@ -2111,7 +2112,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",
@@ -2121,7 +2122,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",
@@ -2144,7 +2145,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
@@ -2158,7 +2159,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,
@@ -2191,7 +2192,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,
@@ -2203,7 +2204,7 @@ function RenderActionExecutionMessage(_a) {
               index
             );
           } else {
-            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               AssistantMessage2,
               {
                 rawData: message,
@@ -2217,20 +2218,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
@@ -2240,7 +2241,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,
@@ -2255,7 +2256,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
@@ -2264,7 +2265,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",
@@ -2281,7 +2282,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
@@ -2298,7 +2299,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,
@@ -2324,7 +2325,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",
@@ -2338,7 +2339,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,
@@ -2350,7 +2351,7 @@ function RenderAgentStateMessage(_a) {
             index
           );
         } else {
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             AssistantMessage2,
             {
               rawData: message,
@@ -2366,7 +2367,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,
@@ -2381,7 +2382,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,
@@ -2402,7 +2403,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,
@@ -2411,7 +2412,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",
@@ -2422,7 +2423,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",
@@ -2448,9 +2449,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,
@@ -2460,7 +2461,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 })
     }
   );
 }
@@ -2542,7 +2543,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,
@@ -2550,7 +2551,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}`,
@@ -2561,7 +2562,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",
@@ -2574,7 +2575,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}`,
@@ -2586,7 +2587,7 @@ var ImageUploadQueue = ({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "button",
               {
                 onClick: () => onRemoveImage(index),
@@ -2620,7 +2621,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,
@@ -2777,8 +2778,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,
@@ -2794,7 +2795,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,
@@ -2807,9 +2808,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",
@@ -2821,7 +2822,7 @@ function CopilotChat({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Input2,
       {
         inProgress: isLoading,
@@ -2844,10 +2845,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) => {
@@ -3032,7 +3033,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,
@@ -3066,19 +3067,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,
@@ -3105,17 +3106,17 @@ var CopilotModal = ({
 };
 
 // src/components/chat/Popup.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function CopilotPopup(props) {
   props = __spreadProps(__spreadValues({}, props), {
     className: props.className ? props.className + " copilotKitPopup" : "copilotKitPopup"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CopilotModal, __spreadProps(__spreadValues({}, props), { children: props.children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CopilotModal, __spreadProps(__spreadValues({}, props), { children: props.children }));
 }
 
 // src/components/chat/Sidebar.tsx
 var import_react15 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function CopilotSidebar(props) {
   props = __spreadProps(__spreadValues({}, props), {
     className: props.className ? props.className + " copilotKitSidebar" : "copilotKitSidebar"
@@ -3128,7 +3129,7 @@ function CopilotSidebar(props) {
     (_a = props.onSetOpen) == null ? void 0 : _a.call(props, open);
     setExpandedClassName(open ? "sidebarExpanded" : "");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: `copilotKitSidebarContentWrapper ${expandedClassName}`, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CopilotModal, __spreadProps(__spreadValues(__spreadValues({}, props), { onSetOpen }), { children: props.children })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `copilotKitSidebarContentWrapper ${expandedClassName}`, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CopilotModal, __spreadProps(__spreadValues(__spreadValues({}, props), { onSetOpen }), { children: props.children })) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {