@mieweb/ui 0.9.0 → 0.10.0

package/dist/{chunk-MXQ7J4BB.js → chunk-VSVGMMNO.js}

@@ -1,9 +1,288 @@
-import { DragDropZone, MessageComposer } from './chunk-O6GJ4IYS.js';
+import { notifyComposerMigrationOnce, DragDropZone, ChatComposer, DEFAULT_MAX_FILE_SIZE, DEFAULT_ACCEPTED_FILE_TYPES, CameraButton } from './chunk-IIFQ6BSJ.js';
 import { cn } from './chunk-TQONQSJO.js';
-import * as React5 from 'react';
+import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+function useMessages(options) {
+  const {
+    initialMessages = [],
+    currentUser,
+    onSend,
+    onRetry,
+    onLoadMore
+  } = options;
+  const [messages, setMessages] = React.useState(initialMessages);
+  const [isSending, setIsSending] = React.useState(false);
+  const [isLoadingMore, setIsLoadingMore] = React.useState(false);
+  React.useEffect(() => {
+    setMessages(initialMessages);
+  }, [initialMessages]);
+  const addMessage = React.useCallback((message) => {
+    setMessages((prev) => {
+      if (prev.some((m) => m.id === message.id)) {
+        return prev;
+      }
+      return [...prev, message];
+    });
+  }, []);
+  const updateMessage = React.useCallback(
+    (messageId, updates) => {
+      setMessages(
+        (prev) => prev.map((m) => m.id === messageId ? { ...m, ...updates } : m)
+      );
+    },
+    []
+  );
+  const removeMessage = React.useCallback((messageId) => {
+    setMessages((prev) => prev.filter((m) => m.id !== messageId));
+  }, []);
+  const updateStatus = React.useCallback(
+    (messageId, status) => {
+      updateMessage(messageId, { status });
+    },
+    [updateMessage]
+  );
+  const markAsRead = React.useCallback(
+    (messageId) => {
+      updateStatus(messageId, "read");
+    },
+    [updateStatus]
+  );
+  const sendMessage = React.useCallback(
+    async (newMessage) => {
+      const optimisticId = `optimistic-${Date.now()}`;
+      const optimisticMessage = {
+        id: optimisticId,
+        type: "text",
+        content: newMessage.content,
+        sender: currentUser,
+        timestamp: /* @__PURE__ */ new Date(),
+        status: "sending",
+        attachments: []
+        // Would handle attachment uploads here
+      };
+      addMessage(optimisticMessage);
+      setIsSending(true);
+      try {
+        if (onSend) {
+          const sentMessage = await onSend(newMessage);
+          setMessages(
+            (prev) => prev.map((m) => m.id === optimisticId ? sentMessage : m)
+          );
+        } else {
+          updateStatus(optimisticId, "sent");
+        }
+      } catch {
+        updateStatus(optimisticId, "failed");
+      } finally {
+        setIsSending(false);
+      }
+    },
+    [currentUser, onSend, addMessage, updateStatus]
+  );
+  const retryMessage = React.useCallback(
+    async (messageId) => {
+      updateStatus(messageId, "sending");
+      try {
+        if (onRetry) {
+          await onRetry(messageId);
+          updateStatus(messageId, "sent");
+        }
+      } catch {
+        updateStatus(messageId, "failed");
+      }
+    },
+    [onRetry, updateStatus]
+  );
+  const loadMore = React.useCallback(async () => {
+    if (isLoadingMore || !onLoadMore) return;
+    setIsLoadingMore(true);
+    try {
+      const olderMessages = await onLoadMore();
+      setMessages((prev) => [...olderMessages, ...prev]);
+    } finally {
+      setIsLoadingMore(false);
+    }
+  }, [isLoadingMore, onLoadMore]);
+  return {
+    messages,
+    addMessage,
+    updateMessage,
+    removeMessage,
+    sendMessage,
+    retryMessage,
+    loadMore,
+    isSending,
+    isLoadingMore,
+    markAsRead,
+    updateStatus
+  };
+}
+function useTypingIndicator(options = {}) {
+  const {
+    typingParticipants: initialParticipants = [],
+    debounceTime = 2e3,
+    onTypingStart,
+    onTypingStop
+  } = options;
+  const [participants, setParticipants] = React.useState(initialParticipants);
+  const [isLocalTyping, setIsLocalTyping] = React.useState(false);
+  const typingTimeoutRef = React.useRef(null);
+  React.useEffect(() => {
+    setParticipants(initialParticipants);
+  }, [initialParticipants]);
+  const startTyping = React.useCallback(() => {
+    if (!isLocalTyping) {
+      setIsLocalTyping(true);
+      onTypingStart?.();
+    }
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+    typingTimeoutRef.current = setTimeout(() => {
+      setIsLocalTyping(false);
+      onTypingStop?.();
+    }, debounceTime);
+  }, [isLocalTyping, debounceTime, onTypingStart, onTypingStop]);
+  const stopTyping = React.useCallback(() => {
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+    setIsLocalTyping(false);
+    onTypingStop?.();
+  }, [onTypingStop]);
+  React.useEffect(() => {
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+    };
+  }, []);
+  const typingState = React.useMemo(
+    () => ({
+      participants,
+      lastUpdated: /* @__PURE__ */ new Date()
+    }),
+    [participants]
+  );
+  return {
+    typingState,
+    startTyping,
+    stopTyping,
+    setTypingParticipants: setParticipants
+  };
+}
+function useMessageScroll(options) {
+  const { messages, currentUserId, threshold = 100 } = options;
+  const scrollContainerRef = React.useRef(null);
+  const bottomRef = React.useRef(null);
+  const [isScrolledUp, setIsScrolledUp] = React.useState(false);
+  const prevMessageCountRef = React.useRef(messages.length);
+  React.useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      const isAtBottom = scrollHeight - scrollTop - clientHeight < threshold;
+      setIsScrolledUp(!isAtBottom);
+    };
+    container.addEventListener("scroll", handleScroll);
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [threshold]);
+  const scrollToBottom = React.useCallback((smooth = true) => {
+    bottomRef.current?.scrollIntoView({
+      behavior: smooth ? "smooth" : "auto"
+    });
+  }, []);
+  React.useEffect(() => {
+    const messageCountChanged = messages.length !== prevMessageCountRef.current;
+    prevMessageCountRef.current = messages.length;
+    if (!messageCountChanged) return;
+    const lastMessage = messages[messages.length - 1];
+    const isOutgoing = lastMessage?.sender.id === currentUserId;
+    if (isOutgoing || !isScrolledUp) {
+      scrollToBottom(true);
+    }
+  }, [messages, currentUserId, isScrolledUp, scrollToBottom]);
+  return {
+    scrollContainerRef,
+    bottomRef,
+    isScrolledUp,
+    scrollToBottom
+  };
+}
+function useReadReceipts(options) {
+  const { currentUserId, onMarkRead, threshold = 0.5 } = options;
+  const observerRef = React.useRef(null);
+  const observedMessagesRef = React.useRef(/* @__PURE__ */ new Set());
+  React.useEffect(() => {
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const messageId = entry.target.getAttribute("data-message-id");
+            if (messageId && !observedMessagesRef.current.has(messageId)) {
+              observedMessagesRef.current.add(messageId);
+              onMarkRead?.(messageId);
+            }
+          }
+        });
+      },
+      { threshold }
+    );
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, [onMarkRead, threshold]);
+  const observeMessage = React.useCallback(
+    (element, message) => {
+      if (!element || !observerRef.current) return;
+      if (message.sender.id !== currentUserId && message.status !== "read" && !observedMessagesRef.current.has(message.id)) {
+        element.setAttribute("data-message-id", message.id);
+        observerRef.current.observe(element);
+      }
+    },
+    [currentUserId]
+  );
+  return { observeMessage };
+}
+function useTypingEmulation({
+  value,
+  onTypingStart,
+  onTypingStop
+}) {
+  const [isTyping, setIsTyping] = React.useState(false);
+  const typingTimeoutRef = React.useRef(
+    null
+  );
+  React.useEffect(() => {
+    if (!onTypingStart && !onTypingStop) return;
+    if (value.length > 0 && !isTyping) {
+      setIsTyping(true);
+      onTypingStart?.();
+    }
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+    typingTimeoutRef.current = setTimeout(() => {
+      if (isTyping) {
+        setIsTyping(false);
+        onTypingStop?.();
+      }
+    }, 2e3);
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+    };
+  }, [value, isTyping, onTypingStart, onTypingStop]);
+  const stopTyping = React.useCallback(() => {
+    setIsTyping(false);
+    onTypingStop?.();
+  }, [onTypingStop]);
+  return { stopTyping };
+}
 var statusIconVariants = cva(
   "inline-flex items-center gap-0.5 text-current",
   {
@@ -384,7 +663,7 @@ function defaultFormatTimestamp(timestamp) {
     minute: "2-digit"
   });
 }
-var MessageBubble = React5.forwardRef(
+var MessageBubble = React.forwardRef(
   ({
     className,
     message,
@@ -859,7 +1138,7 @@ function LoadMoreButton({
   );
 }
 LoadMoreButton.displayName = "LoadMoreButton";
-var MessageList = React5.forwardRef(
+var MessageList = React.forwardRef(
   ({
     messages,
     currentUser,
@@ -878,19 +1157,19 @@ var MessageList = React5.forwardRef(
     className,
     autoScroll = "onNewMessage"
   }, ref) => {
-    const scrollContainerRef = React5.useRef(null);
-    const bottomRef = React5.useRef(null);
-    const [isUserScrolled, setIsUserScrolled] = React5.useState(false);
-    const prevMessageCountRef = React5.useRef(messages.length);
-    React5.useImperativeHandle(ref, () => scrollContainerRef.current);
-    const handleScroll = React5.useCallback(() => {
+    const scrollContainerRef = React.useRef(null);
+    const bottomRef = React.useRef(null);
+    const [isUserScrolled, setIsUserScrolled] = React.useState(false);
+    const prevMessageCountRef = React.useRef(messages.length);
+    React.useImperativeHandle(ref, () => scrollContainerRef.current);
+    const handleScroll = React.useCallback(() => {
       const container = scrollContainerRef.current;
       if (!container) return;
       const { scrollTop, scrollHeight, clientHeight } = container;
       const isAtBottom = scrollHeight - scrollTop - clientHeight < 100;
       setIsUserScrolled(!isAtBottom);
     }, []);
-    React5.useEffect(() => {
+    React.useEffect(() => {
       const container = scrollContainerRef.current;
       const bottom = bottomRef.current;
       if (!container || !bottom) return;
@@ -906,7 +1185,7 @@ var MessageList = React5.forwardRef(
         }
       }
     }, [messages, currentUser.id, autoScroll, isUserScrolled]);
-    React5.useEffect(() => {
+    React.useEffect(() => {
       const bottom = bottomRef.current;
       if (bottom && !isLoading) {
         bottom.scrollIntoView();
@@ -959,7 +1238,7 @@ var MessageList = React5.forwardRef(
             {
               "data-slot": "message-list-content",
               className: "flex flex-col gap-1 p-4",
-              children: messageGroups.map((group) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+              children: messageGroups.map((group) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
                 groupByDate && group.label && /* @__PURE__ */ jsx(DateSeparator, { label: group.label }),
                 group.messages.map((message, index) => {
                   const prevMessage = group.messages[index - 1];
@@ -1098,7 +1377,7 @@ function formatLastSeen(date) {
   if (diffDays < 7) return `${diffDays}d ago`;
   return date.toLocaleDateString();
 }
-var ConversationHeader = React5.forwardRef(
+var ConversationHeader = React.forwardRef(
   ({
     className,
     size,
@@ -1220,7 +1499,7 @@ var ConversationHeader = React5.forwardRef(
   }
 );
 ConversationHeader.displayName = "ConversationHeader";
-var ConversationListItem = React5.forwardRef(({ className, conversation, isSelected, onSelect, ...props }, ref) => {
+var ConversationListItem = React.forwardRef(({ className, conversation, isSelected, onSelect, ...props }, ref) => {
   const participant = conversation.participants.find((p) => !p.isCurrentUser);
   const title = getConversationTitle(conversation, participant);
   const avatarUrl = conversation.avatarUrl || participant?.avatarUrl;
@@ -1428,7 +1707,7 @@ function ConversationListSkeleton({
 }
 ConversationListSkeleton.displayName = "ConversationListSkeleton";
 function LightboxModal({ attachment, onClose }) {
-  React5.useEffect(() => {
+  React.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -1525,7 +1804,7 @@ function LightboxModal({ attachment, onClose }) {
   );
 }
 LightboxModal.displayName = "LightboxModal";
-var MessageThread = React5.forwardRef(
+var MessageThread = React.forwardRef(
   ({
     conversation,
     messages,
@@ -1556,8 +1835,23 @@ var MessageThread = React5.forwardRef(
     onError,
     className
   }, ref) => {
-    const [lightboxAttachment, setLightboxAttachment] = React5.useState(null);
-    const [replyTo, setReplyTo] = React5.useState(null);
+    const [lightboxAttachment, setLightboxAttachment] = React.useState(null);
+    const [replyTo, setReplyTo] = React.useState(null);
+    const composerRef = React.useRef(null);
+    React.useEffect(() => {
+      notifyComposerMigrationOnce("MessageThread");
+    }, []);
+    const [draft, setDraft] = React.useState("");
+    const draftEpochRef = React.useRef(0);
+    const handleDraftChange = React.useCallback((value) => {
+      draftEpochRef.current += 1;
+      setDraft(value);
+    }, []);
+    const { stopTyping } = useTypingEmulation({
+      value: draft,
+      onTypingStart: eventHandlers.onTypingStart,
+      onTypingStop: eventHandlers.onTypingStop
+    });
     const participant = conversation?.type === "direct" ? conversation.participants.find((p) => p.id !== currentUser.id) : void 0;
     const handleAttachmentClick = (attachment, message) => {
       if (attachment.type === "image" || attachment.type === "video") {
@@ -1566,12 +1860,21 @@ var MessageThread = React5.forwardRef(
       eventHandlers.onAttachmentClick?.(attachment, message);
     };
     const handleSendMessage = async (newMessage) => {
+      stopTyping();
       const messageWithReply = {
         ...newMessage,
         replyToId: replyTo?.id || newMessage.replyToId
       };
       setReplyTo(null);
-      await eventHandlers.onSendMessage?.(messageWithReply);
+      const epoch = draftEpochRef.current;
+      try {
+        await Promise.resolve(eventHandlers.onSendMessage?.(messageWithReply));
+      } catch (error) {
+        if (draftEpochRef.current === epoch) {
+          setDraft(newMessage.content);
+        }
+        throw error;
+      }
     };
     return /* @__PURE__ */ jsxs(
       "div",
@@ -1597,9 +1900,11 @@ var MessageThread = React5.forwardRef(
           /* @__PURE__ */ jsx(
             DragDropZone,
             {
-              onFilesDropped: () => {
-                onError?.("Drop files on the composer to attach them");
+              onFilesDropped: (files) => {
+                composerRef.current?.addFiles(files);
               },
+              maxFiles: maxAttachments,
+              onError,
               disabled: !showAttachmentPicker,
               className: "flex-1 overflow-hidden",
               children: /* @__PURE__ */ jsx(
@@ -1625,23 +1930,38 @@ var MessageThread = React5.forwardRef(
             }
           ),
           /* @__PURE__ */ jsx(
-            MessageComposer,
+            "div",
             {
-              onSend: handleSendMessage,
-              onTypingStart: eventHandlers.onTypingStart,
-              onTypingStop: eventHandlers.onTypingStop,
-              placeholder,
-              maxLength: maxMessageLength,
-              showCharacterCount,
-              isSending,
-              showAttachmentPicker,
-              showCameraButton,
-              acceptedFileTypes,
-              maxFileSize,
-              maxAttachments,
-              onError,
-              replyTo,
-              onCancelReply: () => setReplyTo(null)
+              "data-slot": "message-thread-composer",
+              className: "shrink-0 border-t border-neutral-200 p-3 dark:border-neutral-700",
+              children: /* @__PURE__ */ jsx(
+                ChatComposer,
+                {
+                  ref: composerRef,
+                  value: draft,
+                  onValueChange: handleDraftChange,
+                  onSend: handleSendMessage,
+                  placeholder,
+                  maxLength: maxMessageLength,
+                  showCharacterCount,
+                  isSending,
+                  allowAttachments: showAttachmentPicker,
+                  acceptedFileTypes: acceptedFileTypes ?? DEFAULT_ACCEPTED_FILE_TYPES,
+                  maxFileSize: maxFileSize ?? DEFAULT_MAX_FILE_SIZE,
+                  maxAttachments,
+                  onError,
+                  replyTo,
+                  onCancelReply: () => setReplyTo(null),
+                  inputLabel: "Message",
+                  micSlot: showCameraButton ? /* @__PURE__ */ jsx(
+                    CameraButton,
+                    {
+                      onCapture: (file) => composerRef.current?.addFiles([file]),
+                      disabled: isSending
+                    }
+                  ) : void 0
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsx(
@@ -1721,250 +2041,7 @@ function MessagingSplitView({
   );
 }
 MessagingSplitView.displayName = "MessagingSplitView";
-function useMessages(options) {
-  const {
-    initialMessages = [],
-    currentUser,
-    onSend,
-    onRetry,
-    onLoadMore
-  } = options;
-  const [messages, setMessages] = React5.useState(initialMessages);
-  const [isSending, setIsSending] = React5.useState(false);
-  const [isLoadingMore, setIsLoadingMore] = React5.useState(false);
-  React5.useEffect(() => {
-    setMessages(initialMessages);
-  }, [initialMessages]);
-  const addMessage = React5.useCallback((message) => {
-    setMessages((prev) => {
-      if (prev.some((m) => m.id === message.id)) {
-        return prev;
-      }
-      return [...prev, message];
-    });
-  }, []);
-  const updateMessage = React5.useCallback(
-    (messageId, updates) => {
-      setMessages(
-        (prev) => prev.map((m) => m.id === messageId ? { ...m, ...updates } : m)
-      );
-    },
-    []
-  );
-  const removeMessage = React5.useCallback((messageId) => {
-    setMessages((prev) => prev.filter((m) => m.id !== messageId));
-  }, []);
-  const updateStatus = React5.useCallback(
-    (messageId, status) => {
-      updateMessage(messageId, { status });
-    },
-    [updateMessage]
-  );
-  const markAsRead = React5.useCallback(
-    (messageId) => {
-      updateStatus(messageId, "read");
-    },
-    [updateStatus]
-  );
-  const sendMessage = React5.useCallback(
-    async (newMessage) => {
-      const optimisticId = `optimistic-${Date.now()}`;
-      const optimisticMessage = {
-        id: optimisticId,
-        type: "text",
-        content: newMessage.content,
-        sender: currentUser,
-        timestamp: /* @__PURE__ */ new Date(),
-        status: "sending",
-        attachments: []
-        // Would handle attachment uploads here
-      };
-      addMessage(optimisticMessage);
-      setIsSending(true);
-      try {
-        if (onSend) {
-          const sentMessage = await onSend(newMessage);
-          setMessages(
-            (prev) => prev.map((m) => m.id === optimisticId ? sentMessage : m)
-          );
-        } else {
-          updateStatus(optimisticId, "sent");
-        }
-      } catch {
-        updateStatus(optimisticId, "failed");
-      } finally {
-        setIsSending(false);
-      }
-    },
-    [currentUser, onSend, addMessage, updateStatus]
-  );
-  const retryMessage = React5.useCallback(
-    async (messageId) => {
-      updateStatus(messageId, "sending");
-      try {
-        if (onRetry) {
-          await onRetry(messageId);
-          updateStatus(messageId, "sent");
-        }
-      } catch {
-        updateStatus(messageId, "failed");
-      }
-    },
-    [onRetry, updateStatus]
-  );
-  const loadMore = React5.useCallback(async () => {
-    if (isLoadingMore || !onLoadMore) return;
-    setIsLoadingMore(true);
-    try {
-      const olderMessages = await onLoadMore();
-      setMessages((prev) => [...olderMessages, ...prev]);
-    } finally {
-      setIsLoadingMore(false);
-    }
-  }, [isLoadingMore, onLoadMore]);
-  return {
-    messages,
-    addMessage,
-    updateMessage,
-    removeMessage,
-    sendMessage,
-    retryMessage,
-    loadMore,
-    isSending,
-    isLoadingMore,
-    markAsRead,
-    updateStatus
-  };
-}
-function useTypingIndicator(options = {}) {
-  const {
-    typingParticipants: initialParticipants = [],
-    debounceTime = 2e3,
-    onTypingStart,
-    onTypingStop
-  } = options;
-  const [participants, setParticipants] = React5.useState(initialParticipants);
-  const [isLocalTyping, setIsLocalTyping] = React5.useState(false);
-  const typingTimeoutRef = React5.useRef(null);
-  React5.useEffect(() => {
-    setParticipants(initialParticipants);
-  }, [initialParticipants]);
-  const startTyping = React5.useCallback(() => {
-    if (!isLocalTyping) {
-      setIsLocalTyping(true);
-      onTypingStart?.();
-    }
-    if (typingTimeoutRef.current) {
-      clearTimeout(typingTimeoutRef.current);
-    }
-    typingTimeoutRef.current = setTimeout(() => {
-      setIsLocalTyping(false);
-      onTypingStop?.();
-    }, debounceTime);
-  }, [isLocalTyping, debounceTime, onTypingStart, onTypingStop]);
-  const stopTyping = React5.useCallback(() => {
-    if (typingTimeoutRef.current) {
-      clearTimeout(typingTimeoutRef.current);
-    }
-    setIsLocalTyping(false);
-    onTypingStop?.();
-  }, [onTypingStop]);
-  React5.useEffect(() => {
-    return () => {
-      if (typingTimeoutRef.current) {
-        clearTimeout(typingTimeoutRef.current);
-      }
-    };
-  }, []);
-  const typingState = React5.useMemo(
-    () => ({
-      participants,
-      lastUpdated: /* @__PURE__ */ new Date()
-    }),
-    [participants]
-  );
-  return {
-    typingState,
-    startTyping,
-    stopTyping,
-    setTypingParticipants: setParticipants
-  };
-}
-function useMessageScroll(options) {
-  const { messages, currentUserId, threshold = 100 } = options;
-  const scrollContainerRef = React5.useRef(null);
-  const bottomRef = React5.useRef(null);
-  const [isScrolledUp, setIsScrolledUp] = React5.useState(false);
-  const prevMessageCountRef = React5.useRef(messages.length);
-  React5.useEffect(() => {
-    const container = scrollContainerRef.current;
-    if (!container) return;
-    const handleScroll = () => {
-      const { scrollTop, scrollHeight, clientHeight } = container;
-      const isAtBottom = scrollHeight - scrollTop - clientHeight < threshold;
-      setIsScrolledUp(!isAtBottom);
-    };
-    container.addEventListener("scroll", handleScroll);
-    return () => container.removeEventListener("scroll", handleScroll);
-  }, [threshold]);
-  const scrollToBottom = React5.useCallback((smooth = true) => {
-    bottomRef.current?.scrollIntoView({
-      behavior: smooth ? "smooth" : "auto"
-    });
-  }, []);
-  React5.useEffect(() => {
-    const messageCountChanged = messages.length !== prevMessageCountRef.current;
-    prevMessageCountRef.current = messages.length;
-    if (!messageCountChanged) return;
-    const lastMessage = messages[messages.length - 1];
-    const isOutgoing = lastMessage?.sender.id === currentUserId;
-    if (isOutgoing || !isScrolledUp) {
-      scrollToBottom(true);
-    }
-  }, [messages, currentUserId, isScrolledUp, scrollToBottom]);
-  return {
-    scrollContainerRef,
-    bottomRef,
-    isScrolledUp,
-    scrollToBottom
-  };
-}
-function useReadReceipts(options) {
-  const { currentUserId, onMarkRead, threshold = 0.5 } = options;
-  const observerRef = React5.useRef(null);
-  const observedMessagesRef = React5.useRef(/* @__PURE__ */ new Set());
-  React5.useEffect(() => {
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            const messageId = entry.target.getAttribute("data-message-id");
-            if (messageId && !observedMessagesRef.current.has(messageId)) {
-              observedMessagesRef.current.add(messageId);
-              onMarkRead?.(messageId);
-            }
-          }
-        });
-      },
-      { threshold }
-    );
-    return () => {
-      observerRef.current?.disconnect();
-    };
-  }, [onMarkRead, threshold]);
-  const observeMessage = React5.useCallback(
-    (element, message) => {
-      if (!element || !observerRef.current) return;
-      if (message.sender.id !== currentUserId && message.status !== "read" && !observedMessagesRef.current.has(message.id)) {
-        element.setAttribute("data-message-id", message.id);
-        observerRef.current.observe(element);
-      }
-    },
-    [currentUserId]
-  );
-  return { observeMessage };
-}
 
-export { AttachmentPreview, ConversationHeader, ConversationListItem, ConversationListSkeleton, DateSeparator, EmptyState, LightboxModal, LoadMoreButton, MessageBubble, MessageList, MessageStatusIcon, MessageThread, MessagingSplitView, ReadReceiptIndicator, SkeletonMessage, TypingIndicator, bubbleVariants, formatDateLabel, formatFileSize, formatLastSeen, getConversationSubtitle, getConversationTitle, groupMessagesByDate, headerVariants, isSameSenderGroup, useMessageScroll, useMessages, useReadReceipts, useTypingIndicator };
-//# sourceMappingURL=chunk-MXQ7J4BB.js.map
-//# sourceMappingURL=chunk-MXQ7J4BB.js.map
+export { AttachmentPreview, ConversationHeader, ConversationListItem, ConversationListSkeleton, DateSeparator, EmptyState, LightboxModal, LoadMoreButton, MessageBubble, MessageList, MessageStatusIcon, MessageThread, MessagingSplitView, ReadReceiptIndicator, SkeletonMessage, TypingIndicator, bubbleVariants, formatDateLabel, formatFileSize, formatLastSeen, getConversationSubtitle, getConversationTitle, groupMessagesByDate, headerVariants, isSameSenderGroup, useMessageScroll, useMessages, useReadReceipts, useTypingEmulation, useTypingIndicator };
+//# sourceMappingURL=chunk-VSVGMMNO.js.map
+//# sourceMappingURL=chunk-VSVGMMNO.js.map