@copilotz/chat-ui 0.1.10 → 0.1.12

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 })
@@ -934,6 +942,7 @@ var Message = (0, import_react.memo)(({
     contentVisibility: "auto",
     containIntrinsicSize: "1px 400px"
   } : void 0;
+  const horizontalOffsetClass = showAvatar ? messageIsUser ? compactMode ? "mr-9" : "mr-11" : compactMode ? "ml-9" : "ml-11" : "";
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(message.content);
@@ -989,7 +998,7 @@ var Message = (0, import_react.memo)(({
             message.isEdited && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Badge, { variant: "outline", className: "text-xs", children: "editado" })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `flex-1 min-w-0 ${messageIsUser ? "text-right" : "text-left"} ${isGrouped && showAvatar && !messageIsUser ? compactMode ? "ml-9" : "ml-11" : ""} ${isGrouped && showAvatar && messageIsUser ? compactMode ? "mr-9" : "mr-11" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `relative inline-flex flex-col overflow-hidden text-left ${messageIsUser ? "rounded-lg p-3 bg-primary text-primary-foreground ml-auto max-w-[85%]" : "max-w-full"}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `flex-1 min-w-0 ${messageIsUser ? "text-right" : "text-left"} ${horizontalOffsetClass}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `relative inline-flex flex-col overflow-hidden text-left ${messageIsUser ? "rounded-lg p-3 bg-primary text-primary-foreground ml-auto max-w-[85%]" : "max-w-full"}`, children: [
           isEditing ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               Textarea,
@@ -2855,7 +2864,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 +2959,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)(
@@ -4087,7 +4113,8 @@ var ChatUI = ({
   const renderInlineSuggestions = (messageId) => {
     const items = messageSuggestions?.[messageId];
     if (!items || items.length === 0) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-wrap gap-2 mt-2 ml-11", children: items.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    const inlineSuggestionOffsetClass = config.ui.showAvatars ? config.ui.compactMode ? "ml-9" : "ml-11" : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `flex flex-wrap gap-2 mt-2 ${inlineSuggestionOffsetClass}`, children: items.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "button",
       {
         type: "button",
@@ -4649,6 +4676,7 @@ var chatUtils = {
   chatUtils,
   cn,
   configUtils,
+  createObjectUrlFromDataUrl,
   defaultChatConfig,
   featureFlags,
   formatDate,