@copilotz/chat-ui 0.1.10 → 0.1.11

package/dist/index.cjs

@@ -43,6 +43,7 @@ __export(index_exports, {
   chatUtils: () => chatUtils,
   cn: () => cn,
   configUtils: () => configUtils,
+  createObjectUrlFromDataUrl: () => createObjectUrlFromDataUrl,
   defaultChatConfig: () => defaultChatConfig,
   featureFlags: () => featureFlags,
   formatDate: () => formatDate,
@@ -333,6 +334,24 @@ var formatDate = (timestamp, labels) => {
     });
   }
 };
+var createObjectUrlFromDataUrl = (dataUrl) => {
+  const match = dataUrl.match(/^data:(.+?);base64,(.+)$/s);
+  if (!match) {
+    return null;
+  }
+  try {
+    const [, mimeType, base64] = match;
+    const binary = atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i += 1) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    const blob = new Blob([bytes], { type: mimeType || "application/octet-stream" });
+    return URL.createObjectURL(blob);
+  } catch {
+    return null;
+  }
+};
 
 // src/components/ui/button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -713,26 +732,22 @@ var StreamingText = (0, import_react.memo)(function StreamingText2({
   ] });
 });
 var MediaRenderer = (0, import_react.memo)(function MediaRenderer2({ attachment }) {
-  const [isPlaying, setIsPlaying] = (0, import_react.useState)(false);
-  const audioRef = (0, import_react.useRef)(null);
-  const videoRef = (0, import_react.useRef)(null);
-  const togglePlayback = () => {
-    if (attachment.kind === "audio" && audioRef.current) {
-      if (isPlaying) {
-        audioRef.current.pause();
-      } else {
-        audioRef.current.play();
-      }
-      setIsPlaying(!isPlaying);
-    } else if (attachment.kind === "video" && videoRef.current) {
-      if (isPlaying) {
-        videoRef.current.pause();
-      } else {
-        videoRef.current.play();
-      }
-      setIsPlaying(!isPlaying);
+  const [audioPlaybackSrc, setAudioPlaybackSrc] = (0, import_react.useState)(attachment.dataUrl);
+  (0, import_react.useEffect)(() => {
+    if (attachment.kind !== "audio" || !attachment.dataUrl.startsWith("data:")) {
+      setAudioPlaybackSrc(attachment.dataUrl);
+      return;
     }
-  };
+    const objectUrl = createObjectUrlFromDataUrl(attachment.dataUrl);
+    if (!objectUrl) {
+      setAudioPlaybackSrc(attachment.dataUrl);
+      return;
+    }
+    setAudioPlaybackSrc(objectUrl);
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [attachment.kind, attachment.dataUrl]);
   const formatDuration = (ms) => {
     if (!ms) return "";
     const seconds = Math.floor(ms / 1e3);
@@ -757,13 +772,10 @@ var MediaRenderer = (0, import_react.memo)(function MediaRenderer2({ attachment
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex w-full max-w-md py-0 min-w-64 items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "audio",
         {
-          ref: audioRef,
-          src: attachment.dataUrl,
-          onPlay: () => setIsPlaying(true),
-          onPause: () => setIsPlaying(false),
-          onEnded: () => setIsPlaying(false),
           className: "w-full mt-2",
-          controls: true
+          preload: "metadata",
+          controls: true,
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("source", { src: audioPlaybackSrc, type: attachment.mimeType })
         }
       ) });
     case "video":
@@ -771,14 +783,10 @@ var MediaRenderer = (0, import_react.memo)(function MediaRenderer2({ attachment
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "video",
           {
-            ref: videoRef,
             src: attachment.dataUrl,
             poster: attachment.poster,
             controls: true,
-            className: "w-full h-auto",
-            onPlay: () => setIsPlaying(true),
-            onPause: () => setIsPlaying(false),
-            onEnded: () => setIsPlaying(false)
+            className: "w-full h-auto"
           }
         ),
         attachment.fileName && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-2", children: attachment.fileName })
@@ -2855,7 +2863,23 @@ var FileUploadItem = (0, import_react5.memo)(function FileUploadItem2({ file, pr
 });
 var AttachmentPreview = (0, import_react5.memo)(function AttachmentPreview2({ attachment, onRemove }) {
   const [isPlaying, setIsPlaying] = (0, import_react5.useState)(false);
+  const [audioPlaybackSrc, setAudioPlaybackSrc] = (0, import_react5.useState)(attachment.dataUrl);
   const audioRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    if (attachment.kind !== "audio" || !attachment.dataUrl.startsWith("data:")) {
+      setAudioPlaybackSrc(attachment.dataUrl);
+      return;
+    }
+    const objectUrl = createObjectUrlFromDataUrl(attachment.dataUrl);
+    if (!objectUrl) {
+      setAudioPlaybackSrc(attachment.dataUrl);
+      return;
+    }
+    setAudioPlaybackSrc(objectUrl);
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [attachment.kind, attachment.dataUrl]);
   const handlePlayPause = () => {
     if (audioRef.current) {
       if (isPlaying) {
@@ -2934,10 +2958,11 @@ var AttachmentPreview = (0, import_react5.memo)(function AttachmentPreview2({ at
         "audio",
         {
           ref: audioRef,
-          src: attachment.dataUrl,
           onPlay: () => setIsPlaying(true),
           onPause: () => setIsPlaying(false),
-          onEnded: () => setIsPlaying(false)
+          onEnded: () => setIsPlaying(false),
+          preload: "metadata",
+          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("source", { src: audioPlaybackSrc, type: attachment.mimeType })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -4649,6 +4674,7 @@ var chatUtils = {
   chatUtils,
   cn,
   configUtils,
+  createObjectUrlFromDataUrl,
   defaultChatConfig,
   featureFlags,
   formatDate,