@copilotkit/react-ui 1.8.6 → 1.8.7

package/dist/components/chat/Chat.d.ts

@@ -59,6 +59,15 @@ interface CopilotChatProps {
      * Labels can be used to set custom labels for the chat window.
      */
     labels?: CopilotChatLabels;
+    /**
+     * Enable image upload button (image inputs only supported on some models)
+     */
+    imageUploadsEnabled?: boolean;
+    /**
+     * The 'accept' attribute for the file input used for image uploads.
+     * Defaults to "image/*".
+     */
+    inputFileAccept?: string;
     /**
      * A function that takes in context string and instructions and returns
      * the system message to include in the chat request.
@@ -94,6 +103,10 @@ interface CopilotChatProps {
      * A custom RenderResultMessage component to use instead of the default.
      */
     RenderResultMessage?: React__default.ComponentType<RenderMessageProps>;
+    /**
+     * A custom RenderImageMessage component to use instead of the default.
+     */
+    RenderImageMessage?: React__default.ComponentType<RenderMessageProps>;
     /**
      * A custom Input component to use instead of the default.
      */
@@ -149,7 +162,11 @@ type OnReloadMessagesArguments = OnStopGenerationArguments & {
 };
 type OnStopGeneration = (args: OnStopGenerationArguments) => void;
 type OnReloadMessages = (args: OnReloadMessagesArguments) => void;
-declare function CopilotChat({ instructions, onSubmitMessage, makeSystemMessage, onInProgress, onStopGeneration, onReloadMessages, onRegenerate, onCopy, onThumbsUp, onThumbsDown, Messages, RenderTextMessage, RenderActionExecutionMessage, RenderAgentStateMessage, RenderResultMessage, Input, className, icons, labels, AssistantMessage, UserMessage, }: CopilotChatProps): react_jsx_runtime.JSX.Element;
+type ImageUpload = {
+    contentType: string;
+    bytes: string;
+};
+declare function CopilotChat({ instructions, onSubmitMessage, makeSystemMessage, onInProgress, onStopGeneration, onReloadMessages, onRegenerate, onCopy, onThumbsUp, onThumbsDown, Messages, RenderTextMessage, RenderActionExecutionMessage, RenderAgentStateMessage, RenderResultMessage, RenderImageMessage, Input, className, icons, labels, AssistantMessage, UserMessage, imageUploadsEnabled, inputFileAccept, }: CopilotChatProps): react_jsx_runtime.JSX.Element;
 declare function WrappedCopilotChat({ children, icons, labels, className, }: {
     children: React__default.ReactNode;
     icons?: CopilotChatIcons;
@@ -160,9 +177,12 @@ declare const useCopilotChatLogic: (makeSystemMessage?: SystemMessageFunction, o
     visibleMessages: Message[];
     isLoading: boolean;
     currentSuggestions: CopilotChatSuggestion[];
-    sendMessage: (messageContent: string) => Promise<Message>;
+    sendMessage: (messageContent: string, imagesToUse?: Array<{
+        contentType: string;
+        bytes: string;
+    }>) => Promise<Message>;
     stopGeneration: () => void;
     reloadMessages: (messageId: string) => void;
 };
 
-export { CopilotChat, CopilotChatProps, OnReloadMessages, OnReloadMessagesArguments, OnStopGeneration, WrappedCopilotChat, useCopilotChatLogic };
+export { CopilotChat, CopilotChatProps, ImageUpload, OnReloadMessages, OnReloadMessagesArguments, OnStopGeneration, WrappedCopilotChat, useCopilotChatLogic };

package/dist/components/chat/Chat.js

@@ -299,6 +299,19 @@ var DownloadIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     )
   }
 );
+var UploadIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    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" })
+  }
+);
 var CheckIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "svg",
   {
@@ -364,7 +377,8 @@ var ChatContextProvider = ({
       pushToTalkIcon: MicrophoneIcon,
       copyIcon: CopyIcon,
       thumbsUpIcon: ThumbsUpIcon,
-      thumbsDownIcon: ThumbsDownIcon
+      thumbsDownIcon: ThumbsDownIcon,
+      uploadIcon: UploadIcon
     }), icons),
     [icons]
   );
@@ -393,6 +407,7 @@ var Messages = ({
   RenderActionExecutionMessage: RenderActionExecutionMessage2,
   RenderAgentStateMessage: RenderAgentStateMessage2,
   RenderResultMessage: RenderResultMessage2,
+  RenderImageMessage: RenderImageMessage2,
   AssistantMessage: AssistantMessage2,
   UserMessage: UserMessage2,
   onRegenerate,
@@ -481,6 +496,23 @@ var Messages = ({
             },
             index
           );
+        } else if (message.isImageMessage && message.isImageMessage()) {
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            RenderImageMessage2,
+            {
+              message,
+              inProgress,
+              index,
+              isCurrentMessage,
+              AssistantMessage: AssistantMessage2,
+              UserMessage: UserMessage2,
+              onRegenerate,
+              onCopy,
+              onThumbsUp,
+              onThumbsDown
+            },
+            index
+          );
         }
       }),
       interrupt
@@ -723,7 +755,7 @@ var usePushToTalk = ({
 // src/components/chat/Input.tsx
 var import_react_core3 = require("@copilotkit/react-core");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Input = ({ inProgress, onSend, isVisible = false, onStop }) => {
+var Input = ({ inProgress, onSend, isVisible = false, onStop, onUpload }) => {
   const context = useChatContext();
   const copilotContext = (0, import_react_core3.useCopilotContext)();
   const pushToTalkConfigured = copilotContext.copilotApiConfig.textToSpeechUrl !== void 0 && copilotContext.copilotApiConfig.transcribeAudioUrl !== void 0;
@@ -787,6 +819,7 @@ var Input = ({ inProgress, onSend, isVisible = false, onStop }) => {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "copilotKitInputControls", children: [
+      onUpload && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: onUpload, className: "copilotKitInputControlButton", children: context.icons.uploadIcon }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flexGrow: 1 } }),
       showPushToTalk && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
@@ -814,7 +847,7 @@ var Input = ({ inProgress, onSend, isVisible = false, onStop }) => {
 // src/components/chat/messages/UserMessage.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var UserMessage = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: props.message });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: props.subComponent || props.message });
 };
 
 // src/components/chat/Markdown.tsx
@@ -1668,13 +1701,77 @@ function RenderAgentStateMessage(_a) {
   }
 }
 
+// src/components/chat/messages/RenderImageMessage.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function RenderImageMessage(_a) {
+  var _b = _a, {
+    UserMessage: UserMessage2 = UserMessage,
+    AssistantMessage: AssistantMessage2 = AssistantMessage
+  } = _b, props = __objRest(_b, [
+    "UserMessage",
+    "AssistantMessage"
+  ]);
+  const {
+    message,
+    inProgress,
+    index,
+    isCurrentMessage,
+    onRegenerate,
+    onCopy,
+    onThumbsUp,
+    onThumbsDown
+  } = props;
+  if (message.isImageMessage()) {
+    const imageData = `data:${message.format};base64,${message.bytes}`;
+    const imageComponent = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "copilotKitImage", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "img",
+      {
+        src: imageData,
+        alt: "User uploaded image",
+        style: { maxWidth: "100%", maxHeight: "300px", borderRadius: "8px" }
+      }
+    ) });
+    if (message.role === "user") {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        UserMessage2,
+        {
+          "data-message-role": "user",
+          message: "",
+          rawData: message,
+          subComponent: imageComponent
+        },
+        index
+      );
+    } else if (message.role === "assistant") {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        AssistantMessage2,
+        {
+          "data-message-role": "assistant",
+          message: "",
+          rawData: message,
+          subComponent: imageComponent,
+          isLoading: inProgress && isCurrentMessage && !message.bytes,
+          isGenerating: inProgress && isCurrentMessage && !!message.bytes,
+          isCurrentMessage,
+          onRegenerate: () => onRegenerate == null ? void 0 : onRegenerate(message.id),
+          onCopy,
+          onThumbsUp,
+          onThumbsDown
+        },
+        index
+      );
+    }
+  }
+  return null;
+}
+
 // src/components/chat/Suggestion.tsx
 var import_react_core6 = require("@copilotkit/react-core");
 var import_shared = require("@copilotkit/shared");
 var import_runtime_client_gql3 = require("@copilotkit/runtime-client-gql");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function Suggestion({ title, message, onClick, partial, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "button",
     {
       disabled: partial,
@@ -1684,7 +1781,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_runtime14.jsx)("span", { children: title })
+      children: partial ? SmallSpinnerIcon : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: title })
     }
   );
 }
@@ -1764,7 +1861,87 @@ var import_react_core7 = require("@copilotkit/react-core");
 var import_runtime_client_gql4 = require("@copilotkit/runtime-client-gql");
 var import_shared2 = require("@copilotkit/shared");
 var import_react_core8 = require("@copilotkit/react-core");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+
+// src/components/chat/ImageUploadQueue.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var ImageUploadQueue = ({
+  images,
+  onRemoveImage,
+  className = ""
+}) => {
+  if (images.length === 0)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    {
+      className: `copilotKitImageUploadQueue ${className}`,
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "8px",
+        margin: "8px",
+        padding: "8px"
+      },
+      children: images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        "div",
+        {
+          className: "copilotKitImageUploadQueueItem",
+          style: {
+            position: "relative",
+            display: "inline-block",
+            width: "60px",
+            height: "60px",
+            borderRadius: "4px",
+            overflow: "hidden"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "img",
+              {
+                src: `data:${image.contentType};base64,${image.bytes}`,
+                alt: `Selected image ${index + 1}`,
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "button",
+              {
+                onClick: () => onRemoveImage(index),
+                className: "copilotKitImageUploadQueueRemoveButton",
+                style: {
+                  position: "absolute",
+                  top: "2px",
+                  right: "2px",
+                  background: "rgba(0,0,0,0.6)",
+                  color: "white",
+                  border: "none",
+                  borderRadius: "50%",
+                  width: "18px",
+                  height: "18px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  cursor: "pointer",
+                  fontSize: "10px",
+                  padding: 0
+                },
+                children: "\u2715"
+              }
+            )
+          ]
+        },
+        index
+      ))
+    }
+  );
+};
+
+// src/components/chat/Chat.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function CopilotChat({
   instructions,
   onSubmitMessage,
@@ -1781,14 +1958,64 @@ function CopilotChat({
   RenderActionExecutionMessage: RenderActionExecutionMessage2 = RenderActionExecutionMessage,
   RenderAgentStateMessage: RenderAgentStateMessage2 = RenderAgentStateMessage,
   RenderResultMessage: RenderResultMessage2 = RenderResultMessage,
+  RenderImageMessage: RenderImageMessage2 = RenderImageMessage,
   Input: Input2 = Input,
   className,
   icons,
   labels,
   AssistantMessage: AssistantMessage2 = AssistantMessage,
-  UserMessage: UserMessage2 = UserMessage
+  UserMessage: UserMessage2 = UserMessage,
+  imageUploadsEnabled,
+  inputFileAccept = "image/*"
 }) {
   const { additionalInstructions, setChatInstructions } = (0, import_react_core7.useCopilotContext)();
+  const [selectedImages, setSelectedImages] = (0, import_react9.useState)([]);
+  const fileInputRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
+    if (!imageUploadsEnabled)
+      return;
+    const handlePaste = (e) => __async(this, null, function* () {
+      var _a, _b;
+      const target = e.target;
+      if (!((_a = target.parentElement) == null ? void 0 : _a.classList.contains("copilotKitInput")))
+        return;
+      const items = Array.from(((_b = e.clipboardData) == null ? void 0 : _b.items) || []);
+      const imageItems = items.filter((item) => item.type.startsWith("image/"));
+      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);
+        });
+      });
+      try {
+        const loadedImages = (yield Promise.all(imagePromises)).filter((img) => img !== null);
+        setSelectedImages((prev) => [...prev, ...loadedImages]);
+      } catch (error) {
+        console.error("Error processing pasted images:", error);
+      }
+    });
+    document.addEventListener("paste", handlePaste);
+    return () => document.removeEventListener("paste", handlePaste);
+  }, [imageUploadsEnabled]);
   (0, import_react9.useEffect)(() => {
     if (!(additionalInstructions == null ? void 0 : additionalInstructions.length)) {
       setChatInstructions(instructions || "");
@@ -1816,6 +2043,14 @@ function CopilotChat({
     onStopGeneration,
     onReloadMessages
   );
+  const handleSendMessage = (text) => {
+    const images = selectedImages;
+    setSelectedImages([]);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+    return sendMessage(text, images);
+  };
   const chatContext = import_react9.default.useContext(ChatContext);
   const isVisible = chatContext ? chatContext.open : true;
   const handleRegenerate = (messageId) => {
@@ -1829,8 +2064,42 @@ function CopilotChat({
       onCopy(message);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  const handleImageUpload = (event) => __async(this, null, function* () {
+    if (!event.target.files || event.target.files.length === 0) {
+      return;
+    }
+    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);
+      });
+    });
+    try {
+      const loadedImages = yield Promise.all(fileReadPromises);
+      setSelectedImages((prev) => [...prev, ...loadedImages]);
+    } catch (error) {
+      console.error("Error reading files:", error);
+    }
+  });
+  const removeSelectedImage = (index) => {
+    setSelectedImages((prev) => prev.filter((_, i) => i !== index));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       Messages2,
       {
         AssistantMessage: AssistantMessage2,
@@ -1839,32 +2108,51 @@ function CopilotChat({
         RenderActionExecutionMessage: RenderActionExecutionMessage2,
         RenderAgentStateMessage: RenderAgentStateMessage2,
         RenderResultMessage: RenderResultMessage2,
+        RenderImageMessage: RenderImageMessage2,
         messages: visibleMessages,
         inProgress: isLoading,
         onRegenerate: handleRegenerate,
         onCopy: handleCopy,
         onThumbsUp,
         onThumbsDown,
-        children: currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "suggestions", children: currentSuggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        children: currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "suggestions", children: currentSuggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           Suggestion,
           {
             title: suggestion.title,
             message: suggestion.message,
             partial: suggestion.partial,
             className: suggestion.className,
-            onClick: (message) => sendMessage(message)
+            onClick: (message) => handleSendMessage(message)
           },
           index
         )) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    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)(
+        "input",
+        {
+          type: "file",
+          multiple: true,
+          ref: fileInputRef,
+          onChange: handleImageUpload,
+          accept: inputFileAccept,
+          style: { display: "none" }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       Input2,
       {
         inProgress: isLoading,
-        onSend: sendMessage,
+        onSend: handleSendMessage,
         isVisible,
-        onStop: stopGeneration
+        onStop: stopGeneration,
+        onUpload: imageUploadsEnabled ? () => {
+          var _a;
+          return (_a = fileInputRef.current) == null ? void 0 : _a.click();
+        } : void 0
       }
     )
   ] });
@@ -1877,10 +2165,10 @@ function WrappedCopilotChat({
 }) {
   const chatContext = import_react9.default.useContext(ChatContext);
   if (!chatContext) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChatContextProvider, { icons, labels, open: true, setOpen: () => {
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `copilotKitChat ${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}`, children }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children });
 }
 var SUGGESTIONS_DEBOUNCE_TIMEOUT = 1e3;
 var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onStopGeneration, onReloadMessages) => {
@@ -1934,22 +2222,45 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onS
     // global context
     visibleMessages.length == 0
   ]);
-  const sendMessage = (messageContent) => __async(void 0, null, function* () {
+  const sendMessage = (messageContent, imagesToUse) => __async(void 0, null, function* () {
+    const images = imagesToUse || [];
     abortSuggestions();
     setCurrentSuggestions([]);
-    const message = new import_runtime_client_gql4.TextMessage({
-      content: messageContent,
-      role: import_runtime_client_gql4.Role.User
-    });
-    if (onSubmitMessage) {
-      try {
-        yield onSubmitMessage(messageContent);
-      } catch (error) {
-        console.error("Error in onSubmitMessage:", error);
+    let firstMessage = null;
+    if (messageContent.trim().length > 0) {
+      const textMessage = new import_runtime_client_gql4.TextMessage({
+        content: messageContent,
+        role: import_runtime_client_gql4.Role.User
+      });
+      if (onSubmitMessage) {
+        try {
+          yield onSubmitMessage(messageContent);
+        } catch (error) {
+          console.error("Error in onSubmitMessage:", error);
+        }
+      }
+      yield appendMessage(textMessage, { followUp: images.length === 0 });
+      if (!firstMessage) {
+        firstMessage = textMessage;
+      }
+    }
+    if (images.length > 0) {
+      for (let i = 0; i < images.length; i++) {
+        const imageMessage = new import_runtime_client_gql4.ImageMessage({
+          format: images[i].contentType.replace("image/", ""),
+          bytes: images[i].bytes,
+          role: import_runtime_client_gql4.Role.User
+        });
+        yield appendMessage(imageMessage, { followUp: i === images.length - 1 });
+        if (!firstMessage) {
+          firstMessage = imageMessage;
+        }
       }
     }
-    appendMessage(message);
-    return message;
+    if (!firstMessage) {
+      return new import_runtime_client_gql4.TextMessage({ content: "", role: import_runtime_client_gql4.Role.User });
+    }
+    return firstMessage;
   });
   const messages = visibleMessages;
   const { setMessages } = messagesContext;