@copilotkit/react-ui 1.51.4-next.7 → 1.51.4-next.8

package/dist/index.js

@@ -132,7 +132,14 @@ var CloseIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     stroke: "currentColor",
     width: "24",
     height: "24",
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
+      }
+    )
   }
 );
 var HeaderCloseIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -145,7 +152,14 @@ var HeaderCloseIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     stroke: "currentColor",
     width: "24",
     height: "24",
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M6 18L18 6M6 6l12 12"
+      }
+    )
   }
 );
 var SendIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -158,7 +172,14 @@ var SendIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     stroke: "currentColor",
     width: "24",
     height: "24",
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 19V5m0 0l-7 7m7-7l7 7" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M12 19V5m0 0l-7 7m7-7l7 7"
+      }
+    )
   }
 );
 var MicrophoneIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -243,12 +264,42 @@ var CopyIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     )
   }
 );
-var SmallSpinnerIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "copilotKitSpinner", style: { width: "13px", height: "13px" } });
-var SpinnerIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "copilotKitSpinner", style: { width: "24px", height: "24px" } });
+var SmallSpinnerIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "span",
+  {
+    className: "copilotKitSpinner",
+    style: { width: "13px", height: "13px" }
+  }
+);
+var SpinnerIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "span",
+  {
+    className: "copilotKitSpinner",
+    style: { width: "24px", height: "24px" }
+  }
+);
 var ActivityIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "copilotKitActivityDot", style: { animationDelay: "0s" } }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "copilotKitActivityDot", style: { animationDelay: "0.2s" } }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "copilotKitActivityDot", style: { animationDelay: "0.4s" } })
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: "copilotKitActivityDot",
+      style: { animationDelay: "0s" }
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: "copilotKitActivityDot",
+      style: { animationDelay: "0.2s" }
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: "copilotKitActivityDot",
+      style: { animationDelay: "0.4s" }
+    }
+  )
 ] });
 var ThumbsUpIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "svg",
@@ -323,7 +374,14 @@ var UploadIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     stroke: "currentColor",
     width: "24",
     height: "24",
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4.5v15m7.5-7.5h-15" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M12 4.5v15m7.5-7.5h-15"
+      }
+    )
   }
 );
 var CheckIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -337,13 +395,22 @@ var CheckIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     width: "16",
     height: "16",
     style: { minWidth: "16px", minHeight: "16px" },
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 12.75l6 6 9-13.5" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M4.5 12.75l6 6 9-13.5"
+      }
+    )
   }
 );
 
 // src/components/chat/ChatContext.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var ChatContext = import_react.default.createContext(void 0);
+var ChatContext = import_react.default.createContext(
+  void 0
+);
 function useChatContext() {
   const context = import_react.default.useContext(ChatContext);
   if (context === void 0) {
@@ -551,24 +618,30 @@ function getPublishedCopilotKitVersion(current, forceCheck = false) {
           return parsedVersion;
         }
       } catch (error) {
-        console.error("Failed to parse CopilotKitVersion from localStorage", error);
+        console.error(
+          "Failed to parse CopilotKitVersion from localStorage",
+          error
+        );
       }
     }
     try {
-      const response = yield fetch("https://api.cloud.copilotkit.ai/check-for-updates", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-          packages: [
-            {
-              packageName: "@copilotkit/shared",
-              packageVersion: current
-            }
-          ]
-        })
-      });
+      const response = yield fetch(
+        "https://api.cloud.copilotkit.ai/check-for-updates",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            packages: [
+              {
+                packageName: "@copilotkit/shared",
+                packageVersion: current
+              }
+            ]
+          })
+        }
+      );
       const data = yield response.json();
       const version = {
         current,
@@ -722,13 +795,22 @@ var CheckIcon2 = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     viewBox: "0 0 14 14",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("g", { id: "Group-2", transform: "translate(-118, 0)", fill: "#1BC030", fillRule: "nonzero", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("g", { id: "Group", transform: "translate(118, 0)", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "path",
+    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "g",
       {
-        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",
-        id: "Shape"
+        id: "Group-2",
+        transform: "translate(-118, 0)",
+        fill: "#1BC030",
+        fillRule: "nonzero",
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("g", { id: "Group", transform: "translate(118, 0)", children: /* @__PURE__ */ (0, import_jsx_runtime5.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",
+            id: "Shape"
+          }
+        ) })
       }
-    ) }) }) })
+    ) })
   }
 );
 
@@ -751,7 +833,14 @@ var CloseIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     stroke: "currentColor",
     width: "20",
     height: "20",
-    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M6 18L18 6M6 6l12 12"
+      }
+    )
   }
 );
 
@@ -856,7 +945,9 @@ function CopilotDevConsole() {
   const [versionStatus, setVersionStatus] = (0, import_react4.useState)("unknown");
   const [latestVersion, setLatestVersion] = (0, import_react4.useState)("");
   const consoleRef = (0, import_react4.useRef)(null);
-  const [debugButtonMode, setDebugButtonMode] = (0, import_react4.useState)("full");
+  const [debugButtonMode, setDebugButtonMode] = (0, import_react4.useState)(
+    "full"
+  );
   const checkForUpdates = (force = false) => {
     setVersionStatus("checking");
     getPublishedCopilotKitVersion(currentVersion, force).then((v) => {
@@ -997,8 +1088,22 @@ function DebugMenuButton({
         className: "copilotKitDebugMenu",
         style: { zIndex: 40 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react5.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logReadables(context), children: "Log Readables" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react5.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logActions(context), children: "Log Actions" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react5.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              className: "copilotKitDebugMenuItem",
+              onClick: () => logReadables(context),
+              children: "Log Readables"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react5.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              className: "copilotKitDebugMenuItem",
+              onClick: () => logActions(context),
+              children: "Log Actions"
+            }
+          ) }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react5.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
@@ -1007,9 +1112,23 @@ function DebugMenuButton({
               children: "Log Messages"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react5.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => checkForUpdates(true), children: "Check for Updates" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react5.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              className: "copilotKitDebugMenuItem",
+              onClick: () => checkForUpdates(true),
+              children: "Check for Updates"
+            }
+          ) }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("hr", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react5.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => setShowDevConsole(false), children: "Hide Dev Console" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react5.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              className: "copilotKitDebugMenuItem",
+              onClick: () => setShowDevConsole(false),
+              children: "Hide Dev Console"
+            }
+          ) })
         ]
       }
     )
@@ -1055,7 +1174,9 @@ var getTextContent = (content) => {
       return part.text;
     }
     return void 0;
-  }).filter((value) => typeof value === "string" && value.length > 0).join(" ").trim() || void 0;
+  }).filter(
+    (value) => typeof value === "string" && value.length > 0
+  ).join(" ").trim() || void 0;
 };
 var UserMessage = (props) => {
   const { message, ImageRenderer: ImageRenderer2 } = props;
@@ -1079,7 +1200,9 @@ var import_react_syntax_highlighter = require("react-syntax-highlighter");
 
 // src/hooks/use-copy-to-clipboard.tsx
 var React5 = __toESM(require("react"));
-function useCopyToClipboard({ timeout = 2e3 }) {
+function useCopyToClipboard({
+  timeout = 2e3
+}) {
   const [isCopied, setIsCopied] = React5.useState(false);
   const copyToClipboard = (value) => {
     var _a;
@@ -1137,9 +1260,7 @@ var generateRandomString = (length, lowercase = false) => {
 };
 var CodeBlock = (0, import_react6.memo)(({ language, value }) => {
   const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2e3 });
-  const [SyntaxHighlighter, setSyntaxHighlighter] = (0, import_react6.useState)(
-    () => import_react_syntax_highlighter.Light
-  );
+  const [SyntaxHighlighter, setSyntaxHighlighter] = (0, import_react6.useState)(() => import_react_syntax_highlighter.Light);
   (0, import_react6.useEffect)(() => {
     try {
       new RegExp("(?<=#)\\w+");
@@ -1178,7 +1299,14 @@ var CodeBlock = (0, import_react6.memo)(({ language, value }) => {
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "copilotKitCodeBlockToolbar", children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "copilotKitCodeBlockToolbarLanguage", children: language }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "copilotKitCodeBlockToolbarButtons", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: downloadAsFile, children: DownloadIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "button",
+          {
+            className: "copilotKitCodeBlockToolbarButton",
+            onClick: downloadAsFile,
+            children: DownloadIcon
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: onCopy, children: isCopied ? CheckIcon : CopyIcon })
       ] })
     ] }),
@@ -1490,7 +1618,16 @@ var import_jsx_runtime12 = require("react/jsx-runtime");
 var defaultComponents = {
   a(_a) {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("a", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { target: "_blank", rel: "noopener noreferrer", children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "a",
+      __spreadProps(__spreadValues({
+        className: "copilotKitMarkdownElement"
+      }, props), {
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children
+      })
+    );
   },
   // @ts-expect-error -- inline
   code(_c) {
@@ -1588,7 +1725,10 @@ var Markdown = ({ content, components }) => {
     MemoizedReactMarkdown,
     {
       components: __spreadValues(__spreadValues({}, defaultComponents), components),
-      remarkPlugins: [import_remark_gfm.default, [import_remark_math.default, { singleDollarTextMath: false }]],
+      remarkPlugins: [
+        import_remark_gfm.default,
+        [import_remark_math.default, { singleDollarTextMath: false }]
+      ],
       rehypePlugins: [import_rehype_raw.default],
       children: content
     }
@@ -1707,7 +1847,11 @@ var AssistantMessage = (props) => {
 // src/components/chat/messages/ImageRenderer.tsx
 var import_react9 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var ImageRenderer = ({ image, content, className = "" }) => {
+var ImageRenderer = ({
+  image,
+  content,
+  className = ""
+}) => {
   const [imageError, setImageError] = (0, import_react9.useState)(false);
   const imageSrc = `data:image/${image.format};base64,${image.bytes}`;
   const altText = content || "User uploaded image";
@@ -1715,10 +1859,16 @@ var ImageRenderer = ({ image, content, className = "" }) => {
     setImageError(true);
   };
   if (imageError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `copilotKitImageRendering copilotKitImageRenderingError ${className}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "copilotKitImageRenderingErrorMessage", children: "Failed to load image" }),
-      content && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "copilotKitImageRenderingContent", children: content })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        className: `copilotKitImageRendering copilotKitImageRenderingError ${className}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "copilotKitImageRenderingErrorMessage", children: "Failed to load image" }),
+          content && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "copilotKitImageRenderingContent", children: content })
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `copilotKitImageRendering ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -1951,7 +2101,10 @@ var Messages = ({
   var _a;
   const { labels, icons } = useChatContext();
   const { messages: visibleMessages, interrupt } = (0, import_react_core5.useCopilotChatInternal)();
-  const initialMessages = (0, import_react10.useMemo)(() => makeInitialMessages(labels.initial), [labels.initial]);
+  const initialMessages = (0, import_react10.useMemo)(
+    () => makeInitialMessages(labels.initial),
+    [labels.initial]
+  );
   const messages = [...initialMessages, ...visibleMessages];
   const { messagesContainerRef, messagesEndRef } = useScrollToBottom(messages);
   const hasLegacyProps = !!(RenderTextMessage || RenderActionExecutionMessage || RenderAgentStateMessage || RenderResultMessage || RenderImageMessage);
@@ -2109,7 +2262,10 @@ var AutoResizingTextarea = (0, import_react11.forwardRef)(
   }, ref) => {
     const internalTextareaRef = (0, import_react11.useRef)(null);
     const [maxHeight, setMaxHeight] = (0, import_react11.useState)(0);
-    (0, import_react11.useImperativeHandle)(ref, () => internalTextareaRef.current);
+    (0, import_react11.useImperativeHandle)(
+      ref,
+      () => internalTextareaRef.current
+    );
     (0, import_react11.useEffect)(() => {
       const calculateMaxHeight = () => {
         const textarea = internalTextareaRef.current;
@@ -2159,7 +2315,9 @@ var import_runtime_client_gql2 = require("@copilotkit/runtime-client-gql");
 var import_react12 = require("react");
 var startRecording = (mediaStreamRef, mediaRecorderRef, audioContextRef, recordedChunks, onStop) => __async(void 0, null, function* () {
   if (!mediaStreamRef.current || !audioContextRef.current) {
-    mediaStreamRef.current = yield navigator.mediaDevices.getUserMedia({ audio: true });
+    mediaStreamRef.current = yield navigator.mediaDevices.getUserMedia({
+      audio: true
+    });
     audioContextRef.current = new window.AudioContext();
     yield audioContextRef.current.resume();
   }
@@ -2228,14 +2386,15 @@ var usePushToTalk = ({
     } else {
       stopRecording(mediaRecorderRef);
       if (pushToTalkState === "transcribing") {
-        transcribeAudio(recordedChunks.current, context.copilotApiConfig.transcribeAudioUrl).then(
-          (transcription) => __async(void 0, null, function* () {
-            recordedChunks.current = [];
-            setPushToTalkState("idle");
-            const message = yield sendFunction(transcription);
-            setStartReadingFromMessageId(message.id);
-          })
-        );
+        transcribeAudio(
+          recordedChunks.current,
+          context.copilotApiConfig.transcribeAudioUrl
+        ).then((transcription) => __async(void 0, null, function* () {
+          recordedChunks.current = [];
+          setPushToTalkState("idle");
+          const message = yield sendFunction(transcription);
+          setStartReadingFromMessageId(message.id);
+        }));
       }
     }
     return () => {
@@ -2250,7 +2409,11 @@ var usePushToTalk = ({
       const aguiMessages = (0, import_runtime_client_gql2.gqlToAGUI)(context.messages);
       const messagesAfterLast = aguiMessages.slice(lastMessageIndex + 1).filter((message) => message.role === "assistant");
       const text = messagesAfterLast.map((message) => message.content).join("\n");
-      playAudioResponse(text, context.copilotApiConfig.textToSpeechUrl, audioContextRef.current);
+      playAudioResponse(
+        text,
+        context.copilotApiConfig.textToSpeechUrl,
+        audioContextRef.current
+      );
       setStartReadingFromMessageId(null);
     }
   }, [startReadingFromMessageId, inProgress]);
@@ -2272,7 +2435,9 @@ var useDarkMode = () => {
 
 // src/components/chat/PoweredByTag.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
-function PoweredByTag({ showPoweredBy = true }) {
+function PoweredByTag({
+  showPoweredBy = true
+}) {
   const [mounted, setMounted] = (0, import_react13.useState)(false);
   const isDark = useDarkMode();
   (0, import_react13.useEffect)(() => {
@@ -2338,7 +2503,13 @@ var Input = ({
     if (!chatReady)
       return { buttonIcon: context.icons.spinnerIcon, buttonAlt: "Loading" };
     return isInProgress && !hideStopButton && chatReady ? { buttonIcon: context.icons.stopIcon, buttonAlt: "Stop" } : { buttonIcon: context.icons.sendIcon, buttonAlt: "Send" };
-  }, [isInProgress, chatReady, hideStopButton, context.icons.stopIcon, context.icons.sendIcon]);
+  }, [
+    isInProgress,
+    chatReady,
+    hideStopButton,
+    context.icons.stopIcon,
+    context.icons.sendIcon
+  ]);
   const showPushToTalk = pushToTalkConfigured && (pushToTalkState === "idle" || pushToTalkState === "recording") && !inProgress;
   const { interrupt } = (0, import_react_core7.useCopilotChatInternal)();
   const canSend = (0, import_react14.useMemo)(() => {
@@ -2348,56 +2519,64 @@ var Input = ({
     return isInProgress && !hideStopButton;
   }, [isInProgress, hideStopButton]);
   const sendDisabled = !canSend && !canStop;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `copilotKitInputContainer ${showPoweredBy ? "poweredByContainer" : ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        Textarea_default,
-        {
-          ref: textareaRef,
-          placeholder: context.labels.placeholder,
-          autoFocus: false,
-          maxRows: MAX_NEWLINES,
-          value: text,
-          onChange: (event) => setText(event.target.value),
-          onCompositionStart: () => setIsComposing(true),
-          onCompositionEnd: () => setIsComposing(false),
-          onKeyDown: (event) => {
-            if (event.key === "Enter" && !event.shiftKey && !isComposing) {
-              event.preventDefault();
-              if (canSend) {
-                send();
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "div",
+    {
+      className: `copilotKitInputContainer ${showPoweredBy ? "poweredByContainer" : ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            Textarea_default,
+            {
+              ref: textareaRef,
+              placeholder: context.labels.placeholder,
+              autoFocus: false,
+              maxRows: MAX_NEWLINES,
+              value: text,
+              onChange: (event) => setText(event.target.value),
+              onCompositionStart: () => setIsComposing(true),
+              onCompositionEnd: () => setIsComposing(false),
+              onKeyDown: (event) => {
+                if (event.key === "Enter" && !event.shiftKey && !isComposing) {
+                  event.preventDefault();
+                  if (canSend) {
+                    send();
+                  }
+                }
               }
             }
-          }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "copilotKitInputControls", children: [
-        onUpload && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: onUpload, className: "copilotKitInputControlButton", children: context.icons.uploadIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { flexGrow: 1 } }),
-        showPushToTalk && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          "button",
-          {
-            onClick: () => setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing"),
-            className: pushToTalkState === "recording" ? "copilotKitInputControlButton copilotKitPushToTalkRecording" : "copilotKitInputControlButton",
-            children: context.icons.pushToTalkIcon
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          "button",
-          {
-            disabled: sendDisabled,
-            onClick: isInProgress && !hideStopButton ? onStop : send,
-            "data-copilotkit-in-progress": inProgress,
-            "data-test-id": inProgress ? "copilot-chat-request-in-progress" : "copilot-chat-ready",
-            className: "copilotKitInputControlButton",
-            "aria-label": buttonAlt,
-            children: buttonIcon
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PoweredByTag, { showPoweredBy })
-  ] });
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "copilotKitInputControls", children: [
+            onUpload && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: onUpload, className: "copilotKitInputControlButton", children: context.icons.uploadIcon }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { flexGrow: 1 } }),
+            showPushToTalk && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "button",
+              {
+                onClick: () => setPushToTalkState(
+                  pushToTalkState === "idle" ? "recording" : "transcribing"
+                ),
+                className: pushToTalkState === "recording" ? "copilotKitInputControlButton copilotKitPushToTalkRecording" : "copilotKitInputControlButton",
+                children: context.icons.pushToTalkIcon
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "button",
+              {
+                disabled: sendDisabled,
+                onClick: isInProgress && !hideStopButton ? onStop : send,
+                "data-copilotkit-in-progress": inProgress,
+                "data-test-id": inProgress ? "copilot-chat-request-in-progress" : "copilot-chat-ready",
+                className: "copilotKitInputControlButton",
+                "aria-label": buttonAlt,
+                children: buttonIcon
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PoweredByTag, { showPoweredBy })
+      ]
+    }
+  );
 };
 
 // src/components/chat/Chat.tsx
@@ -2486,7 +2665,12 @@ var ImageUploadQueue = ({
 // src/components/chat/Suggestion.tsx
 var import_react_core8 = require("@copilotkit/react-core");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-function Suggestion({ title, onClick, partial, className }) {
+function Suggestion({
+  title,
+  onClick,
+  partial,
+  className
+}) {
   const { isLoading } = (0, import_react_core8.useCopilotChatInternal)();
   if (!title)
     return null;
@@ -2580,9 +2764,7 @@ function CopilotChat({
   const { publicApiKey, chatApiEndpoint } = copilotApiConfig;
   const [selectedImages, setSelectedImages] = (0, import_react15.useState)([]);
   const [chatError, setChatError] = (0, import_react15.useState)(null);
-  const [messageFeedback, setMessageFeedback] = (0, import_react15.useState)(
-    {}
-  );
+  const [messageFeedback, setMessageFeedback] = (0, import_react15.useState)({});
   const fileInputRef = (0, import_react15.useRef)(null);
   const triggerObservabilityHook = (0, import_react15.useCallback)(
     (hookName, ...args) => {
@@ -2675,30 +2857,34 @@ function CopilotChat({
       if (imageItems.length === 0)
         return;
       e.preventDefault();
-      const imagePromises = imageItems.map((item) => {
-        const file = item.getAsFile();
-        if (!file)
-          return Promise.resolve(null);
-        return new Promise((resolve, reject) => {
-          const reader = new FileReader();
-          reader.onload = (e2) => {
-            var _a2, _b2;
-            const base64String = (_b2 = (_a2 = e2.target) == null ? void 0 : _a2.result) == null ? void 0 : _b2.split(",")[1];
-            if (base64String) {
-              resolve({
-                contentType: file.type,
-                bytes: base64String
-              });
-            } else {
-              resolve(null);
-            }
-          };
-          reader.onerror = reject;
-          reader.readAsDataURL(file);
-        });
-      });
+      const imagePromises = imageItems.map(
+        (item) => {
+          const file = item.getAsFile();
+          if (!file)
+            return Promise.resolve(null);
+          return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = (e2) => {
+              var _a2, _b2;
+              const base64String = (_b2 = (_a2 = e2.target) == null ? void 0 : _a2.result) == null ? void 0 : _b2.split(",")[1];
+              if (base64String) {
+                resolve({
+                  contentType: file.type,
+                  bytes: base64String
+                });
+              } else {
+                resolve(null);
+              }
+            };
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
+          });
+        }
+      );
       try {
-        const loadedImages = (yield Promise.all(imagePromises)).filter((img) => img !== null);
+        const loadedImages = (yield Promise.all(imagePromises)).filter(
+          (img) => img !== null
+        );
         setSelectedImages((prev) => [...prev, ...loadedImages]);
       } catch (error) {
         triggerChatError(error, "processClipboardImages", error);
@@ -2779,25 +2965,29 @@ function CopilotChat({
     if (!event.target.files || event.target.files.length === 0) {
       return;
     }
-    const files = Array.from(event.target.files).filter((file) => file.type.startsWith("image/"));
+    const files = Array.from(event.target.files).filter(
+      (file) => file.type.startsWith("image/")
+    );
     if (files.length === 0)
       return;
     const fileReadPromises = files.map((file) => {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          var _a, _b;
-          const base64String = ((_b = (_a = e.target) == null ? void 0 : _a.result) == null ? void 0 : _b.split(",")[1]) || "";
-          if (base64String) {
-            resolve({
-              contentType: file.type,
-              bytes: base64String
-            });
-          }
-        };
-        reader.onerror = reject;
-        reader.readAsDataURL(file);
-      });
+      return new Promise(
+        (resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            var _a, _b;
+            const base64String = ((_b = (_a = e.target) == null ? void 0 : _a.result) == null ? void 0 : _b.split(",")[1]) || "";
+            if (base64String) {
+              resolve({
+                contentType: file.type,
+                bytes: base64String
+              });
+            }
+          };
+          reader.onerror = reject;
+          reader.readAsDataURL(file);
+        }
+      );
     });
     try {
       const loadedImages = yield Promise.all(fileReadPromises);
@@ -2868,7 +3058,13 @@ 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)(
+        ImageUploadQueue,
+        {
+          images: selectedImages,
+          onRemoveImage: removeSelectedImage
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "input",
         {
@@ -2906,8 +3102,17 @@ function WrappedCopilotChat({
 }) {
   const chatContext = import_react15.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 != null ? className : ""}`, children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      ChatContextProvider,
+      {
+        icons,
+        labels,
+        open: true,
+        setOpen: () => {
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `copilotKitChat ${className != null ? className : ""}`, children })
+      }
+    );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children });
 }
@@ -3056,37 +3261,46 @@ var CopilotModal = (_a) => {
     "observabilityHooks"
   ]);
   const [openState, setOpenState] = import_react16.default.useState(defaultOpen);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChatContextProvider, { icons, labels, open: openState, setOpen: setOpenState, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    CopilotModalInner,
-    __spreadProps(__spreadValues({
-      observabilityHooks,
-      onSetOpen,
-      clickOutsideToClose: clickOutsideToClose != null ? clickOutsideToClose : true,
-      hitEscapeToClose: hitEscapeToClose != null ? hitEscapeToClose : true,
-      shortcut: shortcut != null ? shortcut : "/",
-      className,
-      Window: Window2,
-      Button: Button2,
-      Header: Header2,
-      instructions,
-      onSubmitMessage,
-      onStopGeneration,
-      onReloadMessages,
-      makeSystemMessage,
-      onInProgress,
-      Messages: Messages2,
-      Input: Input2,
-      AssistantMessage: AssistantMessage2,
-      UserMessage: UserMessage2,
-      onThumbsUp,
-      onThumbsDown,
-      onCopy,
-      onRegenerate,
-      markdownTagRenderers
-    }, props), {
-      children
-    })
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    ChatContextProvider,
+    {
+      icons,
+      labels,
+      open: openState,
+      setOpen: setOpenState,
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        CopilotModalInner,
+        __spreadProps(__spreadValues({
+          observabilityHooks,
+          onSetOpen,
+          clickOutsideToClose: clickOutsideToClose != null ? clickOutsideToClose : true,
+          hitEscapeToClose: hitEscapeToClose != null ? hitEscapeToClose : true,
+          shortcut: shortcut != null ? shortcut : "/",
+          className,
+          Window: Window2,
+          Button: Button2,
+          Header: Header2,
+          instructions,
+          onSubmitMessage,
+          onStopGeneration,
+          onReloadMessages,
+          makeSystemMessage,
+          onInProgress,
+          Messages: Messages2,
+          Input: Input2,
+          AssistantMessage: AssistantMessage2,
+          UserMessage: UserMessage2,
+          onThumbsUp,
+          onThumbsDown,
+          onCopy,
+          onRegenerate,
+          markdownTagRenderers
+        }, props), {
+          children
+        })
+      )
+    }
+  );
 };
 
 // src/components/chat/Popup.tsx