@copilotkit/react-ui 1.8.6 → 1.8.7-next.0

package/dist/index.mjs

@@ -1,55 +1,59 @@
 "use client";
 import "./chunk-EFZPSZWO.mjs";
+import "./chunk-IU3WTXLQ.mjs";
 import "./chunk-MMVDU6DF.mjs";
-import "./chunk-SQMEPWVT.mjs";
+import "./chunk-PXEVB7IK.mjs";
+import {
+  CopilotPopup
+} from "./chunk-T7N77F5Y.mjs";
 import {
   CopilotSidebar
-} from "./chunk-X6EFGEBJ.mjs";
+} from "./chunk-JOL7NS2W.mjs";
 import "./chunk-WB3YULQ4.mjs";
-import {
-  CopilotPopup
-} from "./chunk-SMJ3QQCE.mjs";
-import "./chunk-GOAED4H6.mjs";
-import "./chunk-HIORSNVD.mjs";
-import "./chunk-2OTVZXDX.mjs";
+import "./chunk-Y7UO3RPW.mjs";
+import "./chunk-Q2NFQTCQ.mjs";
+import "./chunk-UH2UFL5W.mjs";
 import "./chunk-V7W6IM2V.mjs";
 import {
   CopilotDevConsole
-} from "./chunk-D5XIJNXQ.mjs";
+} from "./chunk-VGPQYMKJ.mjs";
+import "./chunk-Q5V6S67N.mjs";
 import {
   shouldShowDevConsole
 } from "./chunk-6TCUJ3B7.mjs";
 import "./chunk-KXE2JCUH.mjs";
 import "./chunk-NRA3CFEE.mjs";
 import "./chunk-BH6PCAAL.mjs";
-import "./chunk-Q5V6S67N.mjs";
-import "./chunk-YOEL33HG.mjs";
+import "./chunk-UFN2VWSR.mjs";
 import {
   CopilotChat
-} from "./chunk-ZLRUNNS7.mjs";
-import "./chunk-Q2YY2NX3.mjs";
-import "./chunk-WNC6OCIB.mjs";
-import "./chunk-62QMTKMJ.mjs";
+} from "./chunk-O34Z4XM2.mjs";
+import "./chunk-DSQGQJI4.mjs";
+import "./chunk-24TDU7MY.mjs";
+import {
+  RenderImageMessage
+} from "./chunk-SLTG4L62.mjs";
+import "./chunk-XFCMZH2H.mjs";
+import "./chunk-POWCBXRY.mjs";
 import {
   UserMessage
-} from "./chunk-HEIDCT7I.mjs";
-import "./chunk-NMNC4ROZ.mjs";
+} from "./chunk-HWMFMBJC.mjs";
 import {
   AssistantMessage
-} from "./chunk-5M7ODWKH.mjs";
-import "./chunk-TOQ7P4DO.mjs";
-import "./chunk-QJKMOGWN.mjs";
+} from "./chunk-OZXUB3V7.mjs";
+import "./chunk-XZNY26GH.mjs";
+import "./chunk-PLHTVHUW.mjs";
+import "./chunk-BDNHZ3GW.mjs";
 import "./chunk-YQFVRDNC.mjs";
 import {
   Markdown
-} from "./chunk-XNQO5AZZ.mjs";
-import "./chunk-PCTCOQK2.mjs";
-import "./chunk-ZY25LVYR.mjs";
+} from "./chunk-ABHUX6T6.mjs";
+import "./chunk-KENCH7RN.mjs";
+import "./chunk-IJADIQAR.mjs";
 import {
   useChatContext
-} from "./chunk-UN2E3HCK.mjs";
-import "./chunk-ORSMX3SE.mjs";
-import "./chunk-IU3WTXLQ.mjs";
+} from "./chunk-IEMQ2SQW.mjs";
+import "./chunk-XWG3L6QC.mjs";
 import "./chunk-T26KLXLH.mjs";
 import {
   useCopilotChatSuggestions
@@ -65,6 +69,7 @@ export {
   CopilotPopup,
   CopilotSidebar,
   Markdown,
+  RenderImageMessage,
   UserMessage,
   shouldShowDevConsole,
   useChatContext,

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.8.6",
+  "version": "1.8.7-next.0",
   "sideEffects": [
     "**/*.css"
   ],
@@ -40,9 +40,9 @@
     "ts-jest": "^29.1.1",
     "tsup": "^6.7.0",
     "typescript": "^5.2.3",
+    "eslint-config-custom": "1.4.6",
     "tailwind-config": "1.4.6",
-    "tsconfig": "1.4.6",
-    "eslint-config-custom": "1.4.6"
+    "tsconfig": "1.4.6"
   },
   "dependencies": {
     "@headlessui/react": "^2.1.3",
@@ -50,9 +50,9 @@
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
-    "@copilotkit/react-core": "1.8.6",
-    "@copilotkit/runtime-client-gql": "1.8.6",
-    "@copilotkit/shared": "1.8.6"
+    "@copilotkit/react-core": "1.8.7-next.0",
+    "@copilotkit/runtime-client-gql": "1.8.7-next.0",
+    "@copilotkit/shared": "1.8.7-next.0"
   },
   "keywords": [
     "copilotkit",

package/src/components/chat/Chat.tsx

@@ -57,6 +57,7 @@ import { RenderTextMessage as DefaultRenderTextMessage } from "./messages/Render
 import { RenderActionExecutionMessage as DefaultRenderActionExecutionMessage } from "./messages/RenderActionExecutionMessage";
 import { RenderResultMessage as DefaultRenderResultMessage } from "./messages/RenderResultMessage";
 import { RenderAgentStateMessage as DefaultRenderAgentStateMessage } from "./messages/RenderAgentStateMessage";
+import { RenderImageMessage as DefaultRenderImageMessage } from "./messages/RenderImageMessage";
 import { AssistantMessage as DefaultAssistantMessage } from "./messages/AssistantMessage";
 import { UserMessage as DefaultUserMessage } from "./messages/UserMessage";
 import { Suggestion } from "./Suggestion";
@@ -69,7 +70,7 @@ import {
 } from "@copilotkit/react-core";
 import { reloadSuggestions } from "./Suggestion";
 import { CopilotChatSuggestion } from "../../types/suggestions";
-import { Message, Role, TextMessage } from "@copilotkit/runtime-client-gql";
+import { Message, Role, TextMessage, ImageMessage } from "@copilotkit/runtime-client-gql";
 import { randomId } from "@copilotkit/shared";
 import {
   AssistantMessageProps,
@@ -80,6 +81,7 @@ import {
 } from "./props";
 
 import { HintFunction, runAgent, stopAgent } from "@copilotkit/react-core";
+import { ImageUploadQueue } from "./ImageUploadQueue";
 
 /**
  * Props for CopilotChat component.
@@ -145,6 +147,17 @@ export interface CopilotChatProps {
    */
   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.
@@ -188,6 +201,11 @@ export interface CopilotChatProps {
    */
   RenderResultMessage?: React.ComponentType<RenderMessageProps>;
 
+  /**
+   * A custom RenderImageMessage component to use instead of the default.
+   */
+  RenderImageMessage?: React.ComponentType<RenderMessageProps>;
+
   /**
    * A custom Input component to use instead of the default.
    */
@@ -257,6 +275,11 @@ export type OnStopGeneration = (args: OnStopGenerationArguments) => void;
 
 export type OnReloadMessages = (args: OnReloadMessagesArguments) => void;
 
+export type ImageUpload = {
+  contentType: string;
+  bytes: string;
+};
+
 export function CopilotChat({
   instructions,
   onSubmitMessage,
@@ -273,14 +296,69 @@ export function CopilotChat({
   RenderActionExecutionMessage = DefaultRenderActionExecutionMessage,
   RenderAgentStateMessage = DefaultRenderAgentStateMessage,
   RenderResultMessage = DefaultRenderResultMessage,
+  RenderImageMessage = DefaultRenderImageMessage,
   Input = DefaultInput,
   className,
   icons,
   labels,
   AssistantMessage = DefaultAssistantMessage,
   UserMessage = DefaultUserMessage,
+  imageUploadsEnabled,
+  inputFileAccept = "image/*",
 }: CopilotChatProps) {
   const { additionalInstructions, setChatInstructions } = useCopilotContext();
+  const [selectedImages, setSelectedImages] = useState<Array<ImageUpload>>([]);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Clipboard paste handler
+  useEffect(() => {
+    if (!imageUploadsEnabled) return;
+
+    const handlePaste = async (e: ClipboardEvent) => {
+      const target = e.target as HTMLElement;
+      if (!target.parentElement?.classList.contains("copilotKitInput")) return;
+
+      const items = Array.from(e.clipboardData?.items || []);
+      const imageItems = items.filter((item) => item.type.startsWith("image/"));
+
+      if (imageItems.length === 0) return;
+
+      e.preventDefault(); // Prevent default paste behavior for images
+
+      const imagePromises: Promise<ImageUpload | null>[] = imageItems.map((item) => {
+        const file = item.getAsFile();
+        if (!file) return Promise.resolve(null);
+
+        return new Promise<ImageUpload | null>((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            const base64String = (e.target?.result as string)?.split(",")[1];
+            if (base64String) {
+              resolve({
+                contentType: file.type,
+                bytes: base64String,
+              });
+            } else {
+              resolve(null);
+            }
+          };
+          reader.onerror = reject;
+          reader.readAsDataURL(file);
+        });
+      });
+
+      try {
+        const loadedImages = (await Promise.all(imagePromises)).filter((img) => img !== null);
+        setSelectedImages((prev) => [...prev, ...loadedImages]);
+      } catch (error) {
+        // TODO: Show an error message to the user
+        console.error("Error processing pasted images:", error);
+      }
+    };
+
+    document.addEventListener("paste", handlePaste);
+    return () => document.removeEventListener("paste", handlePaste);
+  }, [imageUploadsEnabled]);
 
   useEffect(() => {
     if (!additionalInstructions?.length) {
@@ -322,6 +400,17 @@ export function CopilotChat({
     onReloadMessages,
   );
 
+  // Wrapper for sendMessage to clear selected images
+  const handleSendMessage = (text: string) => {
+    const images = selectedImages;
+    setSelectedImages([]);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+
+    return sendMessage(text, images);
+  };
+
   const chatContext = React.useContext(ChatContext);
   const isVisible = chatContext ? chatContext.open : true;
 
@@ -339,6 +428,44 @@ export function CopilotChat({
     }
   };
 
+  const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    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<{ contentType: string; bytes: string }>((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          const base64String = (e.target?.result as string)?.split(",")[1] || "";
+          if (base64String) {
+            resolve({
+              contentType: file.type,
+              bytes: base64String,
+            });
+          }
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+      });
+    });
+
+    try {
+      const loadedImages = await Promise.all(fileReadPromises);
+      setSelectedImages((prev) => [...prev, ...loadedImages]);
+    } catch (error) {
+      // TODO: Show an error message to the user
+      console.error("Error reading files:", error);
+    }
+  };
+
+  const removeSelectedImage = (index: number) => {
+    setSelectedImages((prev) => prev.filter((_, i) => i !== index));
+  };
+
   return (
     <WrappedCopilotChat icons={icons} labels={labels} className={className}>
       <Messages
@@ -348,6 +475,7 @@ export function CopilotChat({
         RenderActionExecutionMessage={RenderActionExecutionMessage}
         RenderAgentStateMessage={RenderAgentStateMessage}
         RenderResultMessage={RenderResultMessage}
+        RenderImageMessage={RenderImageMessage}
         messages={visibleMessages}
         inProgress={isLoading}
         onRegenerate={handleRegenerate}
@@ -364,17 +492,33 @@ export function CopilotChat({
                 message={suggestion.message}
                 partial={suggestion.partial}
                 className={suggestion.className}
-                onClick={(message) => sendMessage(message)}
+                onClick={(message) => handleSendMessage(message)}
               />
             ))}
           </div>
         )}
       </Messages>
+
+      {imageUploadsEnabled && (
+        <>
+          <ImageUploadQueue images={selectedImages} onRemoveImage={removeSelectedImage} />
+          <input
+            type="file"
+            multiple
+            ref={fileInputRef}
+            onChange={handleImageUpload}
+            accept={inputFileAccept}
+            style={{ display: "none" }}
+          />
+        </>
+      )}
+
       <Input
         inProgress={isLoading}
-        onSend={sendMessage}
+        onSend={handleSendMessage}
         isVisible={isVisible}
         onStop={stopGeneration}
+        onUpload={imageUploadsEnabled ? () => fileInputRef.current?.click() : undefined}
       />
     </WrappedCopilotChat>
   );
@@ -467,28 +611,64 @@ export const useCopilotChatLogic = (
     visibleMessages.length == 0,
   ]);
 
-  const sendMessage = async (messageContent: string) => {
+  const sendMessage = async (
+    messageContent: string,
+    imagesToUse?: Array<{ contentType: string; bytes: string }>,
+  ) => {
+    // Use images passed in the call OR the ones from the state (passed via props)
+    const images = imagesToUse || [];
+
     abortSuggestions();
     setCurrentSuggestions([]);
 
-    const message: Message = new TextMessage({
-      content: messageContent,
-      role: Role.User,
-    });
+    let firstMessage: Message | null = null;
 
-    if (onSubmitMessage) {
-      try {
-        await onSubmitMessage(messageContent);
-      } catch (error) {
-        console.error("Error in onSubmitMessage:", error);
+    // If there's text content, send a text message first
+    if (messageContent.trim().length > 0) {
+      const textMessage = new TextMessage({
+        content: messageContent,
+        role: Role.User,
+      });
+
+      if (onSubmitMessage) {
+        try {
+          // Call onSubmitMessage only with text, as image handling is internal right now
+          await onSubmitMessage(messageContent);
+        } catch (error) {
+          console.error("Error in onSubmitMessage:", error);
+        }
+      }
+
+      await appendMessage(textMessage, { followUp: images.length === 0 });
+
+      if (!firstMessage) {
+        firstMessage = textMessage;
       }
     }
-    // this needs to happen after onSubmitMessage, because it will trigger submission
-    // of the message to the endpoint. Some users depend on performing some actions
-    // before the message is submitted.
-    appendMessage(message);
 
-    return message;
+    // Send image messages
+    if (images.length > 0) {
+      for (let i = 0; i < images.length; i++) {
+        const imageMessage = new ImageMessage({
+          format: images[i].contentType.replace("image/", ""),
+          bytes: images[i].bytes,
+          role: Role.User,
+        });
+        await appendMessage(imageMessage, { followUp: i === images.length - 1 });
+        if (!firstMessage) {
+          firstMessage = imageMessage;
+        }
+      }
+    }
+
+    if (!firstMessage) {
+      // Should not happen if send button is properly disabled, but handle just in case
+      return new TextMessage({ content: "", role: Role.User }); // Return a dummy message
+    }
+
+    // The hook implicitly triggers API call on appendMessage.
+    // We return the first message sent (either text or first image)
+    return firstMessage;
   };
 
   const messages = visibleMessages;

package/src/components/chat/ChatContext.tsx

@@ -81,6 +81,12 @@ export interface CopilotChatIcons {
    */
 
   thumbsDownIcon?: React.ReactNode;
+
+  /**
+   * The icon to use for the upload button.
+   * @default <UploadIcon />
+   */
+  uploadIcon?: React.ReactNode;
 }
 
 /**
@@ -221,6 +227,7 @@ export const ChatContextProvider = ({
         copyIcon: DefaultIcons.CopyIcon,
         thumbsUpIcon: DefaultIcons.ThumbsUpIcon,
         thumbsDownIcon: DefaultIcons.ThumbsDownIcon,
+        uploadIcon: DefaultIcons.UploadIcon,
       },
       ...icons,
     }),

package/src/components/chat/Icons.tsx

@@ -207,6 +207,20 @@ export const DownloadIcon = (
   </svg>
 );
 
+export const UploadIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="currentColor"
+    width="24"
+    height="24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+  </svg>
+);
+
 export const CheckIcon = (
   <svg
     xmlns="http://www.w3.org/2000/svg"

package/src/components/chat/ImageUploadQueue.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+
+interface ImageUploadQueueProps {
+  images: Array<{ contentType: string; bytes: string }>;
+  onRemoveImage: (index: number) => void;
+  className?: string;
+}
+
+export const ImageUploadQueue: React.FC<ImageUploadQueueProps> = ({
+  images,
+  onRemoveImage,
+  className = "",
+}) => {
+  if (images.length === 0) return null;
+
+  return (
+    <div
+      className={`copilotKitImageUploadQueue ${className}`}
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "8px",
+        margin: "8px",
+        padding: "8px",
+      }}
+    >
+      {images.map((image, index) => (
+        <div
+          key={index}
+          className="copilotKitImageUploadQueueItem"
+          style={{
+            position: "relative",
+            display: "inline-block",
+            width: "60px",
+            height: "60px",
+            borderRadius: "4px",
+            overflow: "hidden",
+          }}
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={`data:${image.contentType};base64,${image.bytes}`}
+            alt={`Selected image ${index + 1}`}
+            style={{
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+            }}
+          />
+          <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,
+            }}
+          >
+            ✕
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/chat/Input.tsx

@@ -5,7 +5,7 @@ import AutoResizingTextarea from "./Textarea";
 import { usePushToTalk } from "../../hooks/use-push-to-talk";
 import { useCopilotContext } from "@copilotkit/react-core";
 
-export const Input = ({ inProgress, onSend, isVisible = false, onStop }: InputProps) => {
+export const Input = ({ inProgress, onSend, isVisible = false, onStop, onUpload }: InputProps) => {
   const context = useChatContext();
   const copilotContext = useCopilotContext();
 
@@ -89,7 +89,14 @@ export const Input = ({ inProgress, onSend, isVisible = false, onStop }: InputPr
           }}
         />
         <div className="copilotKitInputControls">
+          {onUpload && (
+            <button onClick={onUpload} className="copilotKitInputControlButton">
+              {context.icons.uploadIcon}
+            </button>
+          )}
+
           <div style={{ flexGrow: 1 }} />
+
           {showPushToTalk && (
             <button
               onClick={() =>

package/src/components/chat/Messages.tsx

@@ -12,6 +12,7 @@ export const Messages = ({
   RenderActionExecutionMessage,
   RenderAgentStateMessage,
   RenderResultMessage,
+  RenderImageMessage,
   AssistantMessage,
   UserMessage,
   onRegenerate,
@@ -105,6 +106,22 @@ export const Messages = ({
                 UserMessage={UserMessage}
               />
             );
+          } else if (message.isImageMessage && message.isImageMessage()) {
+            return (
+              <RenderImageMessage
+                key={index}
+                message={message}
+                inProgress={inProgress}
+                index={index}
+                isCurrentMessage={isCurrentMessage}
+                AssistantMessage={AssistantMessage}
+                UserMessage={UserMessage}
+                onRegenerate={onRegenerate}
+                onCopy={onCopy}
+                onThumbsUp={onThumbsUp}
+                onThumbsDown={onThumbsDown}
+              />
+            );
           }
         })}
         {interrupt}

package/src/components/chat/index.tsx

@@ -6,3 +6,4 @@ export { Markdown } from "./Markdown";
 export { AssistantMessage } from "./messages/AssistantMessage";
 export { UserMessage } from "./messages/UserMessage";
 export { useChatContext } from "./ChatContext";
+export { RenderImageMessage } from "./messages/RenderImageMessage";

package/src/components/chat/messages/RenderImageMessage.tsx

@@ -0,0 +1,64 @@
+import { RenderMessageProps } from "../props";
+import { UserMessage as DefaultUserMessage } from "./UserMessage";
+import { AssistantMessage as DefaultAssistantMessage } from "./AssistantMessage";
+
+export function RenderImageMessage({
+  UserMessage = DefaultUserMessage,
+  AssistantMessage = DefaultAssistantMessage,
+  ...props
+}: RenderMessageProps) {
+  const {
+    message,
+    inProgress,
+    index,
+    isCurrentMessage,
+    onRegenerate,
+    onCopy,
+    onThumbsUp,
+    onThumbsDown,
+  } = props;
+
+  if (message.isImageMessage()) {
+    const imageData = `data:${message.format};base64,${message.bytes}`;
+    const imageComponent = (
+      <div className="copilotKitImage">
+        <img
+          src={imageData}
+          alt="User uploaded image"
+          style={{ maxWidth: "100%", maxHeight: "300px", borderRadius: "8px" }}
+        />
+      </div>
+    );
+
+    if (message.role === "user") {
+      return (
+        <UserMessage
+          key={index}
+          data-message-role="user"
+          message=""
+          rawData={message}
+          subComponent={imageComponent}
+        />
+      );
+    } else if (message.role === "assistant") {
+      return (
+        <AssistantMessage
+          key={index}
+          data-message-role="assistant"
+          message=""
+          rawData={message}
+          subComponent={imageComponent}
+          isLoading={inProgress && isCurrentMessage && !message.bytes}
+          isGenerating={inProgress && isCurrentMessage && !!message.bytes}
+          isCurrentMessage={isCurrentMessage}
+          onRegenerate={() => onRegenerate?.(message.id)}
+          onCopy={onCopy}
+          onThumbsUp={onThumbsUp}
+          onThumbsDown={onThumbsDown}
+        />
+      );
+    }
+  }
+
+  return null;
+}