@copilotkit/react-ui 1.55.0-next.8 → 1.55.0

package/src/components/chat/AttachmentQueue.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+import type { Attachment } from "./props";
+import {
+  formatFileSize,
+  getSourceUrl,
+  getDocumentIcon,
+} from "@copilotkit/shared";
+
+interface AttachmentQueueProps {
+  attachments: Attachment[];
+  onRemoveAttachment: (id: string) => void;
+  className?: string;
+}
+
+export const AttachmentQueue: React.FC<AttachmentQueueProps> = ({
+  attachments,
+  onRemoveAttachment,
+  className = "",
+}) => {
+  if (attachments.length === 0) return null;
+
+  return (
+    <div className={`copilotKitAttachmentQueue ${className}`}>
+      {attachments.map((attachment) => (
+        <div
+          key={attachment.id}
+          className={`copilotKitAttachmentQueueItem copilotKitAttachmentQueueItem--${attachment.type}`}
+        >
+          {attachment.status === "uploading" && (
+            <div className="copilotKitAttachmentQueueOverlay">
+              <div className="copilotKitAttachmentQueueSpinner" />
+            </div>
+          )}
+          <AttachmentPreview attachment={attachment} />
+          <button
+            onClick={() => onRemoveAttachment(attachment.id)}
+            className="copilotKitAttachmentQueueRemoveButton"
+            aria-label="Remove attachment"
+          >
+            ✕
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+function AttachmentPreview({ attachment }: { attachment: Attachment }) {
+  if (attachment.status === "uploading") {
+    return <div className="copilotKitAttachmentQueuePreviewPlaceholder" />;
+  }
+
+  const src = getSourceUrl(attachment.source);
+
+  switch (attachment.type) {
+    case "image":
+      return (
+        <img
+          src={src}
+          alt={attachment.filename || "Image attachment"}
+          className="copilotKitAttachmentQueuePreviewImage"
+        />
+      );
+
+    case "audio":
+      return (
+        <div className="copilotKitAttachmentQueuePreviewAudio">
+          <audio src={src} controls preload="metadata" />
+          {attachment.filename && (
+            <span className="copilotKitAttachmentQueueFilename">
+              {attachment.filename}
+            </span>
+          )}
+        </div>
+      );
+
+    case "video":
+      return (
+        <div className="copilotKitAttachmentQueuePreviewVideo">
+          {attachment.thumbnail ? (
+            <img
+              src={attachment.thumbnail}
+              alt={attachment.filename || "Video thumbnail"}
+              className="copilotKitAttachmentQueuePreviewImage"
+            />
+          ) : (
+            <video
+              src={src}
+              preload="metadata"
+              muted
+              className="copilotKitAttachmentQueuePreviewImage"
+            />
+          )}
+        </div>
+      );
+
+    case "document":
+      return (
+        <div className="copilotKitAttachmentQueuePreviewDocument">
+          <div className="copilotKitAttachmentQueueDocIcon">
+            {getDocumentIcon(attachment.source.mimeType ?? "")}
+          </div>
+          <div className="copilotKitAttachmentQueueDocInfo">
+            <span className="copilotKitAttachmentQueueFilename">
+              {attachment.filename || "Document"}
+            </span>
+            {attachment.size != null && (
+              <span className="copilotKitAttachmentQueueFileSize">
+                {formatFileSize(attachment.size)}
+              </span>
+            )}
+          </div>
+        </div>
+      );
+  }
+}
+
+/**
+ * @deprecated Use `AttachmentQueue` from `@copilotkit/react-ui` instead.
+ * `ImageUploadQueue` only displayed image previews. `AttachmentQueue` supports
+ * images, audio, video, and documents.
+ * See https://docs.copilotkit.ai/migration-guides/migrate-attachments
+ * @since 1.56.0
+ */
+export { AttachmentQueue as ImageUploadQueue };

package/src/components/chat/AttachmentRenderer.tsx

@@ -0,0 +1,133 @@
+import React, { memo, useState } from "react";
+import type { InputContentSource } from "@copilotkit/shared";
+import { getSourceUrl, getDocumentIcon } from "@copilotkit/shared";
+
+interface AttachmentRendererProps {
+  type: "image" | "audio" | "video" | "document";
+  source: InputContentSource;
+  filename?: string;
+  className?: string;
+}
+
+const ImageAttachment = memo(function ImageAttachment({
+  src,
+  className,
+}: {
+  src: string;
+  className?: string;
+}) {
+  const [error, setError] = useState(false);
+
+  if (error) {
+    return (
+      <div
+        className={`copilotKitImageRendering copilotKitImageRenderingError ${className ?? ""}`}
+      >
+        <div className="copilotKitImageRenderingErrorMessage">
+          Failed to load image
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`copilotKitImageRendering ${className ?? ""}`}>
+      <img
+        src={src}
+        alt="Image attachment"
+        className="copilotKitImageRenderingImage"
+        onError={() => setError(true)}
+      />
+    </div>
+  );
+});
+
+const AudioAttachment = memo(function AudioAttachment({
+  src,
+  filename,
+  className,
+}: {
+  src: string;
+  filename?: string;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`copilotKitAttachment copilotKitAttachmentAudio ${className ?? ""}`}
+    >
+      <audio src={src} controls preload="metadata" />
+      {filename && (
+        <span className="copilotKitAttachmentFilename">{filename}</span>
+      )}
+    </div>
+  );
+});
+
+const VideoAttachment = memo(function VideoAttachment({
+  src,
+  className,
+}: {
+  src: string;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`copilotKitAttachment copilotKitAttachmentVideo ${className ?? ""}`}
+    >
+      <video src={src} controls preload="metadata" />
+    </div>
+  );
+});
+
+const DocumentAttachment = memo(function DocumentAttachment({
+  source,
+  filename,
+  className,
+}: {
+  source: InputContentSource;
+  filename?: string;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`copilotKitAttachment copilotKitAttachmentDocument ${className ?? ""}`}
+    >
+      <div className="copilotKitAttachmentDocIcon">
+        {getDocumentIcon(source.mimeType ?? "")}
+      </div>
+      <div className="copilotKitAttachmentDocInfo">
+        <span className="copilotKitAttachmentDocName">
+          {filename || source.mimeType || "Unknown type"}
+        </span>
+      </div>
+    </div>
+  );
+});
+
+export const AttachmentRenderer: React.FC<AttachmentRendererProps> = ({
+  type,
+  source,
+  filename,
+  className,
+}) => {
+  const src = getSourceUrl(source);
+
+  switch (type) {
+    case "image":
+      return <ImageAttachment src={src} className={className} />;
+    case "audio":
+      return (
+        <AudioAttachment src={src} filename={filename} className={className} />
+      );
+    case "video":
+      return <VideoAttachment src={src} className={className} />;
+    case "document":
+      return (
+        <DocumentAttachment
+          source={source}
+          filename={filename}
+          className={className}
+        />
+      );
+  }
+};