@copilotkit/react-ui 1.55.0-next.9 → 1.55.1-next.0

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

@@ -2,21 +2,33 @@ import React, { useState } from "react";
 import { ImageRendererProps } from "../props";
 
 /**
- * Default image rendering component that can be customized by users.
- * Uses CSS classes for styling so users can override styles.
+ * @deprecated Use `CopilotChatAttachmentRenderer` from `@copilotkit/react-core/v2` instead.
+ * `ImageRenderer` only handles images. The v2 attachment renderer supports images, audio, video, and documents.
+ * See https://docs.copilotkit.ai/migration-guides/migrate-attachments
+ * @since 1.56.0
  */
 export const ImageRenderer: React.FC<ImageRendererProps> = ({
   image,
+  source,
   content,
   className = "",
 }) => {
   const [imageError, setImageError] = useState(false);
-  const imageSrc = `data:image/${image.format};base64,${image.bytes}`;
-  const altText = content || "User uploaded image";
 
-  const handleImageError = () => {
-    setImageError(true);
-  };
+  // Determine image src from either legacy ImageData or new InputContentSource
+  let imageSrc: string;
+  if (source) {
+    imageSrc =
+      source.type === "url"
+        ? source.value
+        : `data:${source.mimeType};base64,${source.value}`;
+  } else if (image) {
+    imageSrc = `data:image/${image.format};base64,${image.bytes}`;
+  } else {
+    return null;
+  }
+
+  const altText = content || "User uploaded image";
 
   if (imageError) {
     return (
@@ -39,7 +51,7 @@ export const ImageRenderer: React.FC<ImageRendererProps> = ({
         src={imageSrc}
         alt={altText}
         className="copilotKitImageRenderingImage"
-        onError={handleImageError}
+        onError={() => setImageError(true)}
       />
       {content && (
         <div className="copilotKitImageRenderingContent">{content}</div>

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

@@ -1,4 +1,5 @@
 import { UserMessageProps } from "../props";
+import { AttachmentRenderer } from "../AttachmentRenderer";
 
 type UserMessageContent = NonNullable<UserMessageProps["message"]>["content"];
 
@@ -30,25 +31,58 @@ const getTextContent = (
   );
 };
 
+const getMediaParts = (content: UserMessageContent | undefined) => {
+  if (!content || typeof content === "string") return [];
+
+  return content.filter(
+    (part) =>
+      part.type === "image" ||
+      part.type === "audio" ||
+      part.type === "video" ||
+      part.type === "document",
+  ) as Array<{
+    type: "image" | "audio" | "video" | "document";
+    source:
+      | { type: "data"; value: string; mimeType: string }
+      | { type: "url"; value: string; mimeType?: string };
+  }>;
+};
+
 export const UserMessage = (props: UserMessageProps) => {
   const { message, ImageRenderer } = props;
-  const isImageMessage =
-    message && "image" in message && Boolean(message.image);
+  const content = message?.content;
 
-  if (isImageMessage) {
-    const imageMessage = message!;
-    const content = getTextContent(imageMessage?.content);
+  // Legacy path: old-style image field on message
+  const isLegacyImageMessage =
+    message && "image" in message && Boolean((message as any).image);
 
+  if (isLegacyImageMessage) {
+    const legacyImage = (message as any).image;
+    const textContent = getTextContent(content);
     return (
       <div className="copilotKitMessage copilotKitUserMessage">
-        <ImageRenderer image={imageMessage.image!} content={content} />
+        <ImageRenderer image={legacyImage} content={textContent} />
       </div>
     );
   }
 
-  const content = getTextContent(message?.content);
+  const textContent = getTextContent(content);
+  const mediaParts = getMediaParts(content);
+
+  if (mediaParts.length === 0) {
+    return (
+      <div className="copilotKitMessage copilotKitUserMessage">
+        {textContent}
+      </div>
+    );
+  }
 
   return (
-    <div className="copilotKitMessage copilotKitUserMessage">{content}</div>
+    <div className="copilotKitMessage copilotKitUserMessage">
+      {textContent && <div>{textContent}</div>}
+      {mediaParts.map((part, index) => (
+        <AttachmentRenderer key={index} type={part.type} source={part.source} />
+      ))}
+    </div>
   );
 };

package/src/components/chat/props.ts

@@ -7,6 +7,15 @@ import {
 import { CopilotChatSuggestion } from "../../types/suggestions";
 import { ReactNode } from "react";
 import { ImageData } from "@copilotkit/shared";
+import type { InputContentSource } from "@copilotkit/shared";
+import type {
+  AttachmentsConfig,
+  Attachment,
+  AttachmentModality,
+} from "@copilotkit/shared";
+
+// Re-export for backward compat
+export type { AttachmentsConfig, Attachment, AttachmentModality };
 
 /**
  * Event hooks for CopilotKit chat events.
@@ -339,11 +348,25 @@ export interface RenderSuggestionsListProps {
   isLoading: boolean;
 }
 
+/**
+ * @deprecated Use `CopilotChatAttachmentRenderer` from `@copilotkit/react-core/v2` instead.
+ * See https://docs.copilotkit.ai/migration-guides/migrate-attachments
+ * @since 1.56.0
+ */
 export interface ImageRendererProps {
   /**
-   * The image data containing format and bytes
+   * @deprecated Use `source` (type `InputContentSource`) instead.
+   * `image` only carried base64 image data. `source` supports both data and URL
+   * sources for any modality.
+   * See https://docs.copilotkit.ai/migration-guides/migrate-attachments
+   * @since 1.56.0
+   */
+  image?: ImageData;
+
+  /**
+   * The content source for the image (new AG-UI format)
    */
-  image: ImageData;
+  source?: InputContentSource;
 
   /**
    * Optional content to display alongside the image

package/src/css/attachments.css

@@ -0,0 +1,227 @@
+/* Attachment Queue */
+.copilotKitAttachmentQueue {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 8px;
+  padding: 8px;
+}
+
+.copilotKitAttachmentQueueItem {
+  position: relative;
+  display: inline-flex;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--copilot-kit-separator-color);
+  background: var(--copilot-kit-input-background-color);
+}
+
+.copilotKitAttachmentQueueItem--image,
+.copilotKitAttachmentQueueItem--video {
+  width: 72px;
+  height: 72px;
+}
+
+.copilotKitAttachmentQueueItem--audio {
+  min-width: 200px;
+  max-width: 280px;
+  flex-direction: column;
+  padding: 4px;
+}
+
+.copilotKitAttachmentQueueItem--document {
+  padding: 8px 12px;
+  max-width: 200px;
+}
+
+.copilotKitAttachmentQueueOverlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 1;
+}
+
+.copilotKitAttachmentQueueSpinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: copilotKitSpin 0.6s linear infinite;
+}
+
+@keyframes copilotKitSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.copilotKitAttachmentQueueRemoveButton {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 10px;
+  padding: 0;
+  z-index: 2;
+  line-height: 1;
+}
+
+.copilotKitAttachmentQueueRemoveButton:hover {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.copilotKitAttachmentQueuePreviewPlaceholder {
+  width: 100%;
+  height: 100%;
+  background: var(--copilot-kit-input-background-color);
+}
+
+.copilotKitAttachmentQueuePreviewImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Audio preview in queue */
+.copilotKitAttachmentQueuePreviewAudio {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+.copilotKitAttachmentQueuePreviewAudio audio {
+  width: 100%;
+  height: 32px;
+}
+
+/* Video preview in queue */
+.copilotKitAttachmentQueuePreviewVideo {
+  width: 100%;
+  height: 100%;
+}
+
+/* Document preview in queue */
+.copilotKitAttachmentQueuePreviewDocument {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.copilotKitAttachmentQueueDocIcon {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  background: var(--copilot-kit-primary-color, #6366f1);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.copilotKitAttachmentQueueDocInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.copilotKitAttachmentQueueFilename {
+  font-size: 12px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.copilotKitAttachmentQueueFileSize {
+  font-size: 11px;
+  color: var(--copilot-kit-secondary-contrast-color);
+}
+
+/* Drag-and-drop overlay */
+.copilotKitDragOver {
+  outline: 2px dashed var(--copilot-kit-primary-color, #6366f1);
+  outline-offset: -4px;
+  border-radius: 8px;
+}
+
+/* Attachment Rendering in Messages */
+.copilotKitAttachment {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: 100%;
+}
+
+.copilotKitAttachmentAudio audio {
+  max-width: 300px;
+  width: 100%;
+  height: 40px;
+}
+
+.copilotKitAttachmentVideo video {
+  max-width: 400px;
+  width: 100%;
+  border-radius: 8px;
+}
+
+.copilotKitAttachmentDocument {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border: 1px solid var(--copilot-kit-separator-color);
+  border-radius: 8px;
+  background: var(--copilot-kit-input-background-color);
+}
+
+.copilotKitAttachmentDocIcon {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  background: var(--copilot-kit-primary-color, #6366f1);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.copilotKitAttachmentDocInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.copilotKitAttachmentDocName {
+  font-size: 13px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.copilotKitAttachmentDocMeta {
+  font-size: 11px;
+  color: var(--copilot-kit-secondary-contrast-color);
+}

package/src/css/colors.css

@@ -32,9 +32,11 @@ WHEN MAKING ANY CHANGE, MAKE SURE TO INCLUDE IT IN ALL DUPLICATIONS.
   /* Small shadow for subtle elevation */
   --copilot-kit-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   /* Medium shadow for cards */
-  --copilot-kit-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --copilot-kit-shadow-md:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   /* Large shadow for modals */
-  --copilot-kit-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --copilot-kit-shadow-lg:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 
   --copilot-kit-dev-console-bg: #f8f8fa;
   --copilot-kit-dev-console-text: black;
@@ -72,7 +74,9 @@ body[style*="color-scheme: dark"] :root {
   /* Small shadow for subtle elevation */
   --copilot-kit-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   /* Medium shadow for cards */
-  --copilot-kit-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  --copilot-kit-shadow-md:
+    0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
   /* Large shadow for modals */
-  --copilot-kit-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
+  --copilot-kit-shadow-lg:
+    0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
 }

package/src/css/console.css

@@ -75,7 +75,11 @@
 }
 
 .copilotKitDevConsole .copilotKitDebugMenuTriggerButton:hover {
-  background-color: color-mix(in srgb, var(--copilot-kit-dev-console-bg) 85%, black);
+  background-color: color-mix(
+    in srgb,
+    var(--copilot-kit-dev-console-bg) 85%,
+    black
+  );
   color: var(--copilot-kit-dev-console-text);
 }
 
@@ -84,7 +88,9 @@ html.dark,
 body.dark,
 [data-theme="dark"],
 html[style*="color-scheme: dark"],
-body[style*="color-scheme: dark"] .copilotKitDevConsole .copilotKitDebugMenuTriggerButton {
+body[style*="color-scheme: dark"]
+  .copilotKitDevConsole
+  .copilotKitDebugMenuTriggerButton {
   color: white;
 }
 
@@ -93,8 +99,14 @@ html.dark,
 body.dark,
 [data-theme="dark"],
 html[style*="color-scheme: dark"],
-body[style*="color-scheme: dark"] .copilotKitDevConsole .copilotKitDebugMenuTriggerButton:hover {
-  background-color: color-mix(in srgb, var(--copilot-kit-dev-console-bg) 20%, black);
+body[style*="color-scheme: dark"]
+  .copilotKitDevConsole
+  .copilotKitDebugMenuTriggerButton:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--copilot-kit-dev-console-bg) 20%,
+    black
+  );
 }
 
 .copilotKitDevConsole .copilotKitDebugMenuTriggerButton > svg {
@@ -102,7 +114,11 @@ body[style*="color-scheme: dark"] .copilotKitDevConsole .copilotKitDebugMenuTrig
 }
 
 .copilotKitDebugMenu {
-  --copilot-kit-dev-console-border: color-mix(in srgb, var(--copilot-kit-dev-console-bg) 80%, black);
+  --copilot-kit-dev-console-border: color-mix(
+    in srgb,
+    var(--copilot-kit-dev-console-bg) 80%,
+    black
+  );
   margin-top: 2px;
   border-radius: 6px;
   background-color: var(--copilot-kit-dev-console-bg);
@@ -127,7 +143,11 @@ body[style*="color-scheme: dark"] .copilotKitDevConsole .copilotKitDebugMenuTrig
 }
 
 .copilotKitDebugMenuItem:hover {
-  background-color: color-mix(in srgb, var(--copilot-kit-dev-console-bg) 95%, black);
+  background-color: color-mix(
+    in srgb,
+    var(--copilot-kit-dev-console-bg) 95%,
+    black
+  );
   border-radius: 4px;
 }
 
@@ -157,10 +177,15 @@ body[style*="color-scheme: dark"] .copilotKitDevConsole .copilotKitDebugMenuTrig
   font-size: 0.8rem;
   border: 1px solid var(--copilot-kit-muted-color);
   color: var(--copilot-kit-dev-console-text);
-  box-shadow: 0 5px 5px 0px rgba(0,0,0,.01),0 2px 3px 0px rgba(0,0,0,.02);
+  box-shadow:
+    0 5px 5px 0px rgba(0, 0, 0, 0.01),
+    0 2px 3px 0px rgba(0, 0, 0, 0.02);
   background-color: var(--copilot-kit-dev-console-bg);
 }
 .copilotKitHelpItemButton:hover {
-  background-color: color-mix(in srgb, var(--copilot-kit-dev-console-bg) 95%, black);
+  background-color: color-mix(
+    in srgb,
+    var(--copilot-kit-dev-console-bg) 95%,
+    black
+  );
 }
-

package/src/css/input.css

@@ -122,7 +122,11 @@
 }
 
 .copilotKitInput textarea::-webkit-scrollbar-thumb:hover {
-  background-color: color-mix(in srgb, rgb(200 200 200) 80%, black); /* Darker color on hover */
+  background-color: color-mix(
+    in srgb,
+    rgb(200 200 200) 80%,
+    black
+  ); /* Darker color on hover */
 }
 
 .poweredByContainer {
@@ -149,4 +153,3 @@ html[style*="color-scheme: dark"],
 body[style*="color-scheme: dark"] .poweredBy {
   color: rgb(69, 69, 69) !important;
 }
-

package/src/css/markdown.css

@@ -147,4 +147,4 @@ li.copilotKitMarkdownElement {
   border-radius: 0.375rem;
   padding: 0.05rem 0.4rem;
   font-size: 15px;
-}
+}

package/src/css/messages.css

@@ -128,7 +128,11 @@
 }
 
 .copilotKitMessageControlButton.active:hover {
-  background-color: color-mix(in srgb, var(--copilot-kit-primary-color) 90%, black);
+  background-color: color-mix(
+    in srgb,
+    var(--copilot-kit-primary-color) 90%,
+    black
+  );
   color: var(--copilot-kit-contrast-color);
 }
 
@@ -139,7 +143,8 @@
   pointer-events: none;
 }
 
-.copilotKitMessage.copilotKitAssistantMessage + .copilotKitMessage.copilotKitUserMessage {
+.copilotKitMessage.copilotKitAssistantMessage
+  + .copilotKitMessage.copilotKitUserMessage {
   margin-top: 1.5rem;
 }
 
@@ -173,7 +178,9 @@
 }
 
 @keyframes copilotKitActivityDotAnimation {
-  0%, 80%, 100% {
+  0%,
+  80%,
+  100% {
     transform: scale(0.5);
     opacity: 0.5;
   }
@@ -241,4 +248,4 @@
 .copilotKitImageRenderingErrorMessage::before {
   content: "⚠️";
   font-size: 1rem;
-}
+}

package/src/css/popup.css

@@ -8,9 +8,21 @@
   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol", "Noto Color Emoji";
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
   font-feature-settings: normal;
   font-variation-settings: normal;
   touch-action: manipulation;

package/src/css/sidebar.css

@@ -8,9 +8,21 @@
   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol", "Noto Color Emoji";
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
   font-feature-settings: normal;
   font-variation-settings: normal;
   touch-action: manipulation;
@@ -25,6 +37,19 @@
   overflow: visible;
   margin-right: 0px;
   transition: margin-right 0.3s ease;
+  min-height: 100vh;
+  min-height: 100dvh;
+  height: 100%;
+}
+
+.copilotKitSidebarContentWrapper > .copilotKitModalChildrenWrapper {
+  min-height: 100%;
+  height: 100%;
+}
+
+.copilotKitSidebarContentWrapper > .copilotKitModalChildrenWrapper > * {
+  min-height: 100%;
+  height: 100%;
 }
 
 @media (min-width: 640px) {

package/src/css/suggestions.css

@@ -16,7 +16,9 @@
   border-radius: 15px;
   border: 1px solid var(--copilot-kit-muted-color);
   color: var(--copilot-kit-secondary-contrast-color);
-  box-shadow: 0 5px 5px 0px rgba(0,0,0,.01),0 2px 3px 0px rgba(0,0,0,.02);
+  box-shadow:
+    0 5px 5px 0px rgba(0, 0, 0, 0.01),
+    0 2px 3px 0px rgba(0, 0, 0, 0.02);
 }
 
 .copilotKitMessages footer .suggestions .suggestion.loading {
@@ -40,4 +42,4 @@
 
 .copilotKitMessages footer .suggestions button svg {
   margin-right: 6px;
-}
+}

package/src/styles.css

@@ -5,10 +5,11 @@
 @import "./css/header.css";
 @import "./css/input.css";
 @import "./css/messages.css";
+@import "./css/attachments.css";
 @import "./css/window.css";
 @import "./css/animations.css";
 @import "./css/markdown.css";
 @import "./css/suggestions.css";
 @import "./css/panel.css";
 @import "./css/console.css";
-@import "./css/crew.css";
+@import "./css/crew.css";