@copilotz/chat-ui 0.1.10 → 0.1.12

package/dist/index.d.cts

@@ -592,6 +592,7 @@ declare const configUtils: {
 
 declare function cn(...inputs: ClassValue[]): string;
 declare const formatDate: (timestamp: number, labels?: ChatConfig["labels"]) => string;
+declare const createObjectUrlFromDataUrl: (dataUrl: string) => string | null;
 
 declare const chatUtils: {
     generateId: () => string;
@@ -602,4 +603,4 @@ declare const chatUtils: {
     generateThreadTitle: (firstMessage: string) => string;
 };
 
-export { type AgentOption, type ChatCallbacks, type ChatConfig, ChatHeader, type ChatHeaderConfig, type ChatHeaderProps, ChatInput, type ChatMessage, type ChatState, type ChatThread, ChatUI, type ChatUserContext, ChatUserContextProvider, type ChatV2Props, type CustomField, type FileUploadProgress, type MediaAttachment, type MemoryItem, Message, type MessageAction, type MessageActionEvent, Sidebar, type SidebarConfig, type SidebarProps, type StateCallback, type StreamingUpdate, ThreadManager, type ToolCall, type UserCustomField, UserMenu, type UserMenuCallbacks, type UserMenuConfig, type UserMenuProps, type UserMenuUser, UserProfile, type UserProfileConfig, type UserProfileProps, type UserProfileUser, chatConfigPresets, chatUtils, cn, configUtils, defaultChatConfig, featureFlags, formatDate, mergeConfig, themeUtils, useChatUserContext, validateConfig };
+export { type AgentOption, type ChatCallbacks, type ChatConfig, ChatHeader, type ChatHeaderConfig, type ChatHeaderProps, ChatInput, type ChatMessage, type ChatState, type ChatThread, ChatUI, type ChatUserContext, ChatUserContextProvider, type ChatV2Props, type CustomField, type FileUploadProgress, type MediaAttachment, type MemoryItem, Message, type MessageAction, type MessageActionEvent, Sidebar, type SidebarConfig, type SidebarProps, type StateCallback, type StreamingUpdate, ThreadManager, type ToolCall, type UserCustomField, UserMenu, type UserMenuCallbacks, type UserMenuConfig, type UserMenuProps, type UserMenuUser, UserProfile, type UserProfileConfig, type UserProfileProps, type UserProfileUser, chatConfigPresets, chatUtils, cn, configUtils, createObjectUrlFromDataUrl, defaultChatConfig, featureFlags, formatDate, mergeConfig, themeUtils, useChatUserContext, validateConfig };

package/dist/index.d.ts

@@ -592,6 +592,7 @@ declare const configUtils: {
 
 declare function cn(...inputs: ClassValue[]): string;
 declare const formatDate: (timestamp: number, labels?: ChatConfig["labels"]) => string;
+declare const createObjectUrlFromDataUrl: (dataUrl: string) => string | null;
 
 declare const chatUtils: {
     generateId: () => string;
@@ -602,4 +603,4 @@ declare const chatUtils: {
     generateThreadTitle: (firstMessage: string) => string;
 };
 
-export { type AgentOption, type ChatCallbacks, type ChatConfig, ChatHeader, type ChatHeaderConfig, type ChatHeaderProps, ChatInput, type ChatMessage, type ChatState, type ChatThread, ChatUI, type ChatUserContext, ChatUserContextProvider, type ChatV2Props, type CustomField, type FileUploadProgress, type MediaAttachment, type MemoryItem, Message, type MessageAction, type MessageActionEvent, Sidebar, type SidebarConfig, type SidebarProps, type StateCallback, type StreamingUpdate, ThreadManager, type ToolCall, type UserCustomField, UserMenu, type UserMenuCallbacks, type UserMenuConfig, type UserMenuProps, type UserMenuUser, UserProfile, type UserProfileConfig, type UserProfileProps, type UserProfileUser, chatConfigPresets, chatUtils, cn, configUtils, defaultChatConfig, featureFlags, formatDate, mergeConfig, themeUtils, useChatUserContext, validateConfig };
+export { type AgentOption, type ChatCallbacks, type ChatConfig, ChatHeader, type ChatHeaderConfig, type ChatHeaderProps, ChatInput, type ChatMessage, type ChatState, type ChatThread, ChatUI, type ChatUserContext, ChatUserContextProvider, type ChatV2Props, type CustomField, type FileUploadProgress, type MediaAttachment, type MemoryItem, Message, type MessageAction, type MessageActionEvent, Sidebar, type SidebarConfig, type SidebarProps, type StateCallback, type StreamingUpdate, ThreadManager, type ToolCall, type UserCustomField, UserMenu, type UserMenuCallbacks, type UserMenuConfig, type UserMenuProps, type UserMenuUser, UserProfile, type UserProfileConfig, type UserProfileProps, type UserProfileUser, chatConfigPresets, chatUtils, cn, configUtils, createObjectUrlFromDataUrl, defaultChatConfig, featureFlags, formatDate, mergeConfig, themeUtils, useChatUserContext, validateConfig };

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/chat/ChatUI.tsx
-import { useState as useState8, useEffect as useEffect9, useRef as useRef7, useCallback as useCallback4, useMemo as useMemo4 } from "react";
+import { useState as useState8, useEffect as useEffect10, useRef as useRef6, useCallback as useCallback4, useMemo as useMemo4 } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/config/chatConfig.ts
@@ -245,7 +245,7 @@ var configUtils = {
 };
 
 // src/components/chat/Message.tsx
-import React, { useState, useRef, useMemo, memo } from "react";
+import React, { useState, useMemo, useEffect, memo } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
@@ -278,6 +278,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
 import { jsx } from "react/jsx-runtime";
@@ -668,26 +686,22 @@ var StreamingText = memo(function StreamingText2({
   ] });
 });
 var MediaRenderer = memo(function MediaRenderer2({ attachment }) {
-  const [isPlaying, setIsPlaying] = useState(false);
-  const audioRef = useRef(null);
-  const videoRef = 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] = useState(attachment.dataUrl);
+  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);
@@ -712,13 +726,10 @@ var MediaRenderer = memo(function MediaRenderer2({ attachment }) {
       return /* @__PURE__ */ jsx7("div", { className: "flex w-full max-w-md py-0 min-w-64 items-center gap-3", children: /* @__PURE__ */ jsx7(
         "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__ */ jsx7("source", { src: audioPlaybackSrc, type: attachment.mimeType })
         }
       ) });
     case "video":
@@ -726,14 +737,10 @@ var MediaRenderer = memo(function MediaRenderer2({ attachment }) {
         /* @__PURE__ */ jsx7(
           "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__ */ jsx7("div", { className: "absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-2", children: attachment.fileName })
@@ -889,6 +896,7 @@ var Message = 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);
@@ -944,7 +952,7 @@ var Message = memo(({
             message.isEdited && /* @__PURE__ */ jsx7(Badge, { variant: "outline", className: "text-xs", children: "editado" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx7("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__ */ jsxs2("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__ */ jsx7("div", { className: `flex-1 min-w-0 ${messageIsUser ? "text-right" : "text-left"} ${horizontalOffsetClass}`, children: /* @__PURE__ */ jsxs2("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__ */ jsxs2("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsx7(
               Textarea,
@@ -1040,7 +1048,7 @@ var Message = memo(({
 }, arePropsEqual);
 
 // src/components/chat/Sidebar.tsx
-import { useState as useState4, useRef as useRef5, useEffect as useEffect6 } from "react";
+import { useState as useState4, useRef as useRef4, useEffect as useEffect7 } from "react";
 
 // src/components/ui/input.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
@@ -2289,9 +2297,9 @@ var Sidebar2 = ({
   const [deleteThreadId, setDeleteThreadId] = useState4(null);
   const [editingThreadId, setEditingThreadId] = useState4(null);
   const [editTitle, setEditTitle] = useState4("");
-  const inputRef = useRef5(null);
+  const inputRef = useRef4(null);
   const { setOpen } = useSidebar();
-  useEffect6(() => {
+  useEffect7(() => {
     if (editingThreadId && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
@@ -2708,10 +2716,10 @@ var ChatHeader = ({
 };
 
 // src/components/chat/ChatInput.tsx
-import { useState as useState6, useRef as useRef6, useCallback as useCallback3, useEffect as useEffect8, memo as memo2 } from "react";
+import { useState as useState6, useRef as useRef5, useCallback as useCallback3, useEffect as useEffect9, memo as memo2 } from "react";
 
 // src/components/chat/UserContext.tsx
-import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect as useEffect7, useMemo as useMemo3, useState as useState5 } from "react";
+import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect as useEffect8, useMemo as useMemo3, useState as useState5 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var Ctx = createContext2(void 0);
 var ChatUserContextProvider = ({ children, initial }) => {
@@ -2719,7 +2727,7 @@ var ChatUserContextProvider = ({ children, initial }) => {
     updatedAt: Date.now(),
     ...initial ?? {}
   }));
-  useEffect7(() => {
+  useEffect8(() => {
     if (!initial) return;
     setCtx((prev) => ({
       ...prev,
@@ -2785,8 +2793,8 @@ import {
   FileText,
   X as X2,
   Square,
-  Play as Play2,
-  Pause as Pause2,
+  Play,
+  Pause,
   Loader2
 } from "lucide-react";
 import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
@@ -2851,7 +2859,23 @@ var FileUploadItem = memo2(function FileUploadItem2({ file, progress, onCancel }
 });
 var AttachmentPreview = memo2(function AttachmentPreview2({ attachment, onRemove }) {
   const [isPlaying, setIsPlaying] = useState6(false);
-  const audioRef = useRef6(null);
+  const [audioPlaybackSrc, setAudioPlaybackSrc] = useState6(attachment.dataUrl);
+  const audioRef = useRef5(null);
+  useEffect9(() => {
+    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) {
@@ -2919,7 +2943,7 @@ var AttachmentPreview = memo2(function AttachmentPreview2({ attachment, onRemove
           size: "icon",
           className: "h-8 w-8",
           onClick: handlePlayPause,
-          children: isPlaying ? /* @__PURE__ */ jsx21(Pause2, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx21(Play2, { className: "h-3 w-3" })
+          children: isPlaying ? /* @__PURE__ */ jsx21(Pause, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx21(Play, { className: "h-3 w-3" })
         }
       ),
       /* @__PURE__ */ jsxs11("div", { className: "flex-1", children: [
@@ -2930,10 +2954,11 @@ var AttachmentPreview = memo2(function AttachmentPreview2({ attachment, onRemove
         "audio",
         {
           ref: audioRef,
-          src: attachment.dataUrl,
           onPlay: () => setIsPlaying(true),
           onPause: () => setIsPlaying(false),
-          onEnded: () => setIsPlaying(false)
+          onEnded: () => setIsPlaying(false),
+          preload: "metadata",
+          children: /* @__PURE__ */ jsx21("source", { src: audioPlaybackSrc, type: attachment.mimeType })
         }
       ),
       /* @__PURE__ */ jsx21(
@@ -3028,13 +3053,13 @@ var ChatInput = memo2(function ChatInput2({
   const { setContext } = useChatUserContext();
   const [recordingDuration, setRecordingDuration] = useState6(0);
   const [uploadProgress, setUploadProgress] = useState6(/* @__PURE__ */ new Map());
-  const textareaRef = useRef6(null);
-  const fileInputRef = useRef6(null);
-  const mediaRecorderRef = useRef6(null);
-  const recordingStartTime = useRef6(0);
-  const recordingInterval = useRef6(null);
-  const mediaStreamRef = useRef6(null);
-  useEffect8(() => {
+  const textareaRef = useRef5(null);
+  const fileInputRef = useRef5(null);
+  const mediaRecorderRef = useRef5(null);
+  const recordingStartTime = useRef5(0);
+  const recordingInterval = useRef5(null);
+  const mediaStreamRef = useRef5(null);
+  useEffect9(() => {
     return () => {
       if (mediaStreamRef.current) {
         mediaStreamRef.current.getTracks().forEach((track) => track.stop());
@@ -3892,30 +3917,30 @@ var ChatUI = ({
     isSidebarCollapsed: false
     // No longer used for main sidebar
   });
-  useEffect9(() => {
+  useEffect10(() => {
     if (currentThreadId !== state.selectedThreadId) {
       setState((prev) => ({ ...prev, selectedThreadId: currentThreadId }));
     }
   }, [currentThreadId]);
-  const initialInputApplied = useRef7(false);
-  const initialInputConsumedRef = useRef7(false);
-  useEffect9(() => {
+  const initialInputApplied = useRef6(false);
+  const initialInputConsumedRef = useRef6(false);
+  useEffect10(() => {
     if (initialInput && !initialInputApplied.current) {
       setInputValue(initialInput);
       initialInputApplied.current = true;
     }
   }, [initialInput]);
-  const scrollAreaRef = useRef7(null);
-  const stateRef = useRef7(state);
-  const inputValueRef = useRef7(inputValue);
-  const attachmentsRef = useRef7(attachments);
-  useEffect9(() => {
+  const scrollAreaRef = useRef6(null);
+  const stateRef = useRef6(state);
+  const inputValueRef = useRef6(inputValue);
+  const attachmentsRef = useRef6(attachments);
+  useEffect10(() => {
     stateRef.current = state;
   }, [state]);
-  useEffect9(() => {
+  useEffect10(() => {
     inputValueRef.current = inputValue;
   }, [inputValue]);
-  useEffect9(() => {
+  useEffect10(() => {
     attachmentsRef.current = attachments;
   }, [attachments]);
   const [isCustomMounted, setIsCustomMounted] = useState8(false);
@@ -3938,7 +3963,7 @@ var ChatUI = ({
     []
     // No dependencies - uses refs for latest state
   );
-  useEffect9(() => {
+  useEffect10(() => {
     const checkMobile = () => {
       setIsMobile(globalThis.innerWidth < 1024);
     };
@@ -3946,7 +3971,7 @@ var ChatUI = ({
     globalThis.addEventListener("resize", checkMobile);
     return () => globalThis.removeEventListener("resize", checkMobile);
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!isMobile || !config.customComponent?.component) return;
     if (state.showSidebar) {
       setIsCustomMounted(true);
@@ -3957,8 +3982,8 @@ var ChatUI = ({
       return () => clearTimeout(t);
     }
   }, [state.showSidebar, isMobile, config.customComponent]);
-  const prevMessageCountRef = useRef7(0);
-  useEffect9(() => {
+  const prevMessageCountRef = useRef6(0);
+  useEffect10(() => {
     if (messages.length === 0) {
       prevMessageCountRef.current = 0;
       return;
@@ -3984,10 +4009,10 @@ var ChatUI = ({
       }
     });
   }, [messages, state.isAtBottom, virtualizer]);
-  useEffect9(() => {
+  useEffect10(() => {
     virtualizer.measure();
   }, [expandedMessageIds, virtualizer]);
-  useEffect9(() => {
+  useEffect10(() => {
     const validMessageIds = new Set(messages.map((message) => message.id));
     setExpandedMessageIds((prev) => {
       const activeIds = Object.keys(prev);
@@ -4109,7 +4134,8 @@ var ChatUI = ({
   const renderInlineSuggestions = (messageId) => {
     const items = messageSuggestions?.[messageId];
     if (!items || items.length === 0) return null;
-    return /* @__PURE__ */ jsx24("div", { className: "flex flex-wrap gap-2 mt-2 ml-11", children: items.map((suggestion, index) => /* @__PURE__ */ jsxs14(
+    const inlineSuggestionOffsetClass = config.ui.showAvatars ? config.ui.compactMode ? "ml-9" : "ml-11" : "";
+    return /* @__PURE__ */ jsx24("div", { className: `flex flex-wrap gap-2 mt-2 ${inlineSuggestionOffsetClass}`, children: items.map((suggestion, index) => /* @__PURE__ */ jsxs14(
       "button",
       {
         type: "button",
@@ -4369,7 +4395,7 @@ var ChatUI = ({
 };
 
 // src/components/chat/ThreadManager.tsx
-import { useState as useState9, useRef as useRef8, useEffect as useEffect10 } from "react";
+import { useState as useState9, useRef as useRef7, useEffect as useEffect11 } from "react";
 import {
   Plus as Plus4,
   MessageSquare as MessageSquare2,
@@ -4388,8 +4414,8 @@ import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-r
 var ThreadItem = ({ thread, isActive, config, onSelect, onRename, onDelete, onArchive }) => {
   const [isEditing, setIsEditing] = useState9(false);
   const [editTitle, setEditTitle] = useState9(thread.title);
-  const inputRef = useRef8(null);
-  useEffect10(() => {
+  const inputRef = useRef7(null);
+  useEffect11(() => {
     if (isEditing && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
@@ -4683,6 +4709,7 @@ export {
   chatUtils,
   cn,
   configUtils,
+  createObjectUrlFromDataUrl,
   defaultChatConfig,
   featureFlags,
   formatDate,