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

package/dist/components/chat/Chat.js

@@ -117,7 +117,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)(
@@ -130,7 +137,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)(
@@ -143,7 +157,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)(
@@ -228,12 +249,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",
@@ -308,7 +359,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)(
@@ -322,13 +380,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) {
@@ -411,7 +478,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;
@@ -435,7 +504,9 @@ var import_react_syntax_highlighter = require("react-syntax-highlighter");
 
 // src/hooks/use-copy-to-clipboard.tsx
 var React2 = __toESM(require("react"));
-function useCopyToClipboard({ timeout = 2e3 }) {
+function useCopyToClipboard({
+  timeout = 2e3
+}) {
   const [isCopied, setIsCopied] = React2.useState(false);
   const copyToClipboard = (value) => {
     var _a;
@@ -493,9 +564,7 @@ var generateRandomString = (length, lowercase = false) => {
 };
 var CodeBlock = (0, import_react2.memo)(({ language, value }) => {
   const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2e3 });
-  const [SyntaxHighlighter, setSyntaxHighlighter] = (0, import_react2.useState)(
-    () => import_react_syntax_highlighter.Light
-  );
+  const [SyntaxHighlighter, setSyntaxHighlighter] = (0, import_react2.useState)(() => import_react_syntax_highlighter.Light);
   (0, import_react2.useEffect)(() => {
     try {
       new RegExp("(?<=#)\\w+");
@@ -534,7 +603,14 @@ var CodeBlock = (0, import_react2.memo)(({ language, value }) => {
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "copilotKitCodeBlockToolbar", children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "copilotKitCodeBlockToolbarLanguage", children: language }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "copilotKitCodeBlockToolbarButtons", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: downloadAsFile, children: DownloadIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            className: "copilotKitCodeBlockToolbarButton",
+            onClick: downloadAsFile,
+            children: DownloadIcon
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: onCopy, children: isCopied ? CheckIcon : CopyIcon })
       ] })
     ] }),
@@ -846,7 +922,16 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var defaultComponents = {
   a(_a) {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { target: "_blank", rel: "noopener noreferrer", children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "a",
+      __spreadProps(__spreadValues({
+        className: "copilotKitMarkdownElement"
+      }, props), {
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children
+      })
+    );
   },
   // @ts-expect-error -- inline
   code(_c) {
@@ -944,7 +1029,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
     }
@@ -1063,7 +1151,11 @@ var AssistantMessage = (props) => {
 // src/components/chat/messages/ImageRenderer.tsx
 var import_react5 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var ImageRenderer = ({ image, content, className = "" }) => {
+var ImageRenderer = ({
+  image,
+  content,
+  className = ""
+}) => {
   const [imageError, setImageError] = (0, import_react5.useState)(false);
   const imageSrc = `data:image/${image.format};base64,${image.bytes}`;
   const altText = content || "User uploaded image";
@@ -1071,10 +1163,16 @@ var ImageRenderer = ({ image, content, className = "" }) => {
     setImageError(true);
   };
   if (imageError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `copilotKitImageRendering copilotKitImageRenderingError ${className}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "copilotKitImageRenderingErrorMessage", children: "Failed to load image" }),
-      content && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "copilotKitImageRenderingContent", children: content })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        className: `copilotKitImageRendering copilotKitImageRenderingError ${className}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "copilotKitImageRenderingErrorMessage", children: "Failed to load image" }),
+          content && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "copilotKitImageRenderingContent", children: content })
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `copilotKitImageRendering ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -1307,7 +1405,10 @@ var Messages = ({
   var _a;
   const { labels, icons } = useChatContext();
   const { messages: visibleMessages, interrupt } = (0, import_react_core.useCopilotChatInternal)();
-  const initialMessages = (0, import_react6.useMemo)(() => makeInitialMessages(labels.initial), [labels.initial]);
+  const initialMessages = (0, import_react6.useMemo)(
+    () => makeInitialMessages(labels.initial),
+    [labels.initial]
+  );
   const messages = [...initialMessages, ...visibleMessages];
   const { messagesContainerRef, messagesEndRef } = useScrollToBottom(messages);
   const hasLegacyProps = !!(RenderTextMessage || RenderActionExecutionMessage || RenderAgentStateMessage || RenderResultMessage || RenderImageMessage);
@@ -1465,7 +1566,10 @@ var AutoResizingTextarea = (0, import_react7.forwardRef)(
   }, ref) => {
     const internalTextareaRef = (0, import_react7.useRef)(null);
     const [maxHeight, setMaxHeight] = (0, import_react7.useState)(0);
-    (0, import_react7.useImperativeHandle)(ref, () => internalTextareaRef.current);
+    (0, import_react7.useImperativeHandle)(
+      ref,
+      () => internalTextareaRef.current
+    );
     (0, import_react7.useEffect)(() => {
       const calculateMaxHeight = () => {
         const textarea = internalTextareaRef.current;
@@ -1515,7 +1619,9 @@ var import_runtime_client_gql2 = require("@copilotkit/runtime-client-gql");
 var import_react8 = 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();
   }
@@ -1584,14 +1690,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 () => {
@@ -1606,7 +1713,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]);
@@ -1628,7 +1739,9 @@ var useDarkMode = () => {
 
 // src/components/chat/PoweredByTag.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-function PoweredByTag({ showPoweredBy = true }) {
+function PoweredByTag({
+  showPoweredBy = true
+}) {
   const [mounted, setMounted] = (0, import_react9.useState)(false);
   const isDark = useDarkMode();
   (0, import_react9.useEffect)(() => {
@@ -1694,7 +1807,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_core3.useCopilotChatInternal)();
   const canSend = (0, import_react10.useMemo)(() => {
@@ -1704,56 +1823,64 @@ var Input = ({
     return isInProgress && !hideStopButton;
   }, [isInProgress, hideStopButton]);
   const sendDisabled = !canSend && !canStop;
-  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),
-          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_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),
+              onCompositionStart: () => setIsComposing(true),
+              onCompositionEnd: () => setIsComposing(false),
+              onKeyDown: (event) => {
+                if (event.key === "Enter" && !event.shiftKey && !isComposing) {
+                  event.preventDefault();
+                  if (canSend) {
+                    send();
+                  }
+                }
               }
             }
-          }
-        }
-      ),
-      /* @__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 && !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_runtime13.jsx)(PoweredByTag, { showPoweredBy })
-  ] });
+          ),
+          /* @__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 && !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_runtime13.jsx)(PoweredByTag, { showPoweredBy })
+      ]
+    }
+  );
 };
 
 // src/components/chat/Chat.tsx
@@ -1842,7 +1969,12 @@ var ImageUploadQueue = ({
 // src/components/chat/Suggestion.tsx
 var import_react_core4 = require("@copilotkit/react-core");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-function Suggestion({ title, onClick, partial, className }) {
+function Suggestion({
+  title,
+  onClick,
+  partial,
+  className
+}) {
   const { isLoading } = (0, import_react_core4.useCopilotChatInternal)();
   if (!title)
     return null;
@@ -1936,9 +2068,7 @@ function CopilotChat({
   const { publicApiKey, chatApiEndpoint } = copilotApiConfig;
   const [selectedImages, setSelectedImages] = (0, import_react11.useState)([]);
   const [chatError, setChatError] = (0, import_react11.useState)(null);
-  const [messageFeedback, setMessageFeedback] = (0, import_react11.useState)(
-    {}
-  );
+  const [messageFeedback, setMessageFeedback] = (0, import_react11.useState)({});
   const fileInputRef = (0, import_react11.useRef)(null);
   const triggerObservabilityHook = (0, import_react11.useCallback)(
     (hookName, ...args) => {
@@ -2031,30 +2161,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);
@@ -2135,25 +2269,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);
@@ -2224,7 +2362,13 @@ function CopilotChat({
       }
     ),
     imageUploadsEnabled && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageUploadQueue, { images: selectedImages, onRemoveImage: removeSelectedImage }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        ImageUploadQueue,
+        {
+          images: selectedImages,
+          onRemoveImage: removeSelectedImage
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "input",
         {
@@ -2262,8 +2406,17 @@ function WrappedCopilotChat({
 }) {
   const chatContext = import_react11.default.useContext(ChatContext);
   if (!chatContext) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChatContextProvider, { icons, labels, open: true, setOpen: () => {
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `copilotKitChat ${className != null ? className : ""}`, children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      ChatContextProvider,
+      {
+        icons,
+        labels,
+        open: true,
+        setOpen: () => {
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `copilotKitChat ${className != null ? className : ""}`, children })
+      }
+    );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children });
 }