@mieweb/ui 0.9.0-dev.5 → 0.9.0-dev.6

package/dist/{chunk-ZXRVVNT5.cjs → chunk-XCNDZNY7.cjs}

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunkH3GRO43Z_cjs = require('./chunk-H3GRO43Z.cjs');
+var chunkT6PTKWM6_cjs = require('./chunk-T6PTKWM6.cjs');
 var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
-var React6 = require('react');
+var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -24,8 +24,287 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+function useMessages(options) {
+  const {
+    initialMessages = [],
+    currentUser,
+    onSend,
+    onRetry,
+    onLoadMore
+  } = options;
+  const [messages, setMessages] = React__namespace.useState(initialMessages);
+  const [isSending, setIsSending] = React__namespace.useState(false);
+  const [isLoadingMore, setIsLoadingMore] = React__namespace.useState(false);
+  React__namespace.useEffect(() => {
+    setMessages(initialMessages);
+  }, [initialMessages]);
+  const addMessage = React__namespace.useCallback((message) => {
+    setMessages((prev) => {
+      if (prev.some((m) => m.id === message.id)) {
+        return prev;
+      }
+      return [...prev, message];
+    });
+  }, []);
+  const updateMessage = React__namespace.useCallback(
+    (messageId, updates) => {
+      setMessages(
+        (prev) => prev.map((m) => m.id === messageId ? { ...m, ...updates } : m)
+      );
+    },
+    []
+  );
+  const removeMessage = React__namespace.useCallback((messageId) => {
+    setMessages((prev) => prev.filter((m) => m.id !== messageId));
+  }, []);
+  const updateStatus = React__namespace.useCallback(
+    (messageId, status) => {
+      updateMessage(messageId, { status });
+    },
+    [updateMessage]
+  );
+  const markAsRead = React__namespace.useCallback(
+    (messageId) => {
+      updateStatus(messageId, "read");
+    },
+    [updateStatus]
+  );
+  const sendMessage = React__namespace.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__namespace.useCallback(
+    async (messageId) => {
+      updateStatus(messageId, "sending");
+      try {
+        if (onRetry) {
+          await onRetry(messageId);
+          updateStatus(messageId, "sent");
+        }
+      } catch {
+        updateStatus(messageId, "failed");
+      }
+    },
+    [onRetry, updateStatus]
+  );
+  const loadMore = React__namespace.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__namespace.useState(initialParticipants);
+  const [isLocalTyping, setIsLocalTyping] = React__namespace.useState(false);
+  const typingTimeoutRef = React__namespace.useRef(null);
+  React__namespace.useEffect(() => {
+    setParticipants(initialParticipants);
+  }, [initialParticipants]);
+  const startTyping = React__namespace.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__namespace.useCallback(() => {
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+    setIsLocalTyping(false);
+    onTypingStop?.();
+  }, [onTypingStop]);
+  React__namespace.useEffect(() => {
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+    };
+  }, []);
+  const typingState = React__namespace.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__namespace.useRef(null);
+  const bottomRef = React__namespace.useRef(null);
+  const [isScrolledUp, setIsScrolledUp] = React__namespace.useState(false);
+  const prevMessageCountRef = React__namespace.useRef(messages.length);
+  React__namespace.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__namespace.useCallback((smooth = true) => {
+    bottomRef.current?.scrollIntoView({
+      behavior: smooth ? "smooth" : "auto"
+    });
+  }, []);
+  React__namespace.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__namespace.useRef(null);
+  const observedMessagesRef = React__namespace.useRef(/* @__PURE__ */ new Set());
+  React__namespace.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__namespace.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__namespace.useState(false);
+  const typingTimeoutRef = React__namespace.useRef(
+    null
+  );
+  React__namespace.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__namespace.useCallback(() => {
+    setIsTyping(false);
+    onTypingStop?.();
+  }, [onTypingStop]);
+  return { stopTyping };
+}
 var statusIconVariants = classVarianceAuthority.cva(
   "inline-flex items-center gap-0.5 text-current",
   {
@@ -406,7 +685,7 @@ function defaultFormatTimestamp(timestamp) {
     minute: "2-digit"
   });
 }
-var MessageBubble = React6__namespace.forwardRef(
+var MessageBubble = React__namespace.forwardRef(
   ({
     className,
     message,
@@ -881,7 +1160,7 @@ function LoadMoreButton({
   );
 }
 LoadMoreButton.displayName = "LoadMoreButton";
-var MessageList = React6__namespace.forwardRef(
+var MessageList = React__namespace.forwardRef(
   ({
     messages,
     currentUser,
@@ -900,19 +1179,19 @@ var MessageList = React6__namespace.forwardRef(
     className,
     autoScroll = "onNewMessage"
   }, ref) => {
-    const scrollContainerRef = React6__namespace.useRef(null);
-    const bottomRef = React6__namespace.useRef(null);
-    const [isUserScrolled, setIsUserScrolled] = React6__namespace.useState(false);
-    const prevMessageCountRef = React6__namespace.useRef(messages.length);
-    React6__namespace.useImperativeHandle(ref, () => scrollContainerRef.current);
-    const handleScroll = React6__namespace.useCallback(() => {
+    const scrollContainerRef = React__namespace.useRef(null);
+    const bottomRef = React__namespace.useRef(null);
+    const [isUserScrolled, setIsUserScrolled] = React__namespace.useState(false);
+    const prevMessageCountRef = React__namespace.useRef(messages.length);
+    React__namespace.useImperativeHandle(ref, () => scrollContainerRef.current);
+    const handleScroll = React__namespace.useCallback(() => {
       const container = scrollContainerRef.current;
       if (!container) return;
       const { scrollTop, scrollHeight, clientHeight } = container;
       const isAtBottom = scrollHeight - scrollTop - clientHeight < 100;
       setIsUserScrolled(!isAtBottom);
     }, []);
-    React6__namespace.useEffect(() => {
+    React__namespace.useEffect(() => {
       const container = scrollContainerRef.current;
       const bottom = bottomRef.current;
       if (!container || !bottom) return;
@@ -928,7 +1207,7 @@ var MessageList = React6__namespace.forwardRef(
         }
       }
     }, [messages, currentUser.id, autoScroll, isUserScrolled]);
-    React6__namespace.useEffect(() => {
+    React__namespace.useEffect(() => {
       const bottom = bottomRef.current;
       if (bottom && !isLoading) {
         bottom.scrollIntoView();
@@ -981,7 +1260,7 @@ var MessageList = React6__namespace.forwardRef(
             {
               "data-slot": "message-list-content",
               className: "flex flex-col gap-1 p-4",
-              children: messageGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs(React6__namespace.Fragment, { children: [
+              children: messageGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
                 groupByDate && group.label && /* @__PURE__ */ jsxRuntime.jsx(DateSeparator, { label: group.label }),
                 group.messages.map((message, index) => {
                   const prevMessage = group.messages[index - 1];
@@ -1132,7 +1411,7 @@ var sendButtonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var SendButton = React6__namespace.forwardRef(
+var SendButton = React__namespace.forwardRef(
   ({ className, variant, canSend, isLoading, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -1197,7 +1476,7 @@ var SendButton = React6__namespace.forwardRef(
   }
 );
 SendButton.displayName = "SendButton";
-var MessageComposer = React6__namespace.forwardRef(
+var MessageComposer = React__namespace.forwardRef(
   ({
     onSend,
     onTypingStart,
@@ -1211,8 +1490,8 @@ var MessageComposer = React6__namespace.forwardRef(
     isSending = false,
     showAttachmentPicker = true,
     showCameraButton = false,
-    acceptedFileTypes = ["image/*", "video/*", ".pdf", ".doc", ".docx"],
-    maxFileSize = 25 * 1024 * 1024,
+    acceptedFileTypes = chunkT6PTKWM6_cjs.DEFAULT_ACCEPTED_FILE_TYPES,
+    maxFileSize = chunkT6PTKWM6_cjs.DEFAULT_MAX_FILE_SIZE,
     maxAttachments = 10,
     onError,
     autoFocus = false,
@@ -1223,11 +1502,11 @@ var MessageComposer = React6__namespace.forwardRef(
     mentionOptions,
     className
   }, ref) => {
-    const textareaRef = React6__namespace.useRef(null);
-    const [internalContent, setInternalContent] = React6__namespace.useState("");
+    const textareaRef = React__namespace.useRef(null);
+    const [internalContent, setInternalContent] = React__namespace.useState("");
     const isControlled = controlledValue !== void 0;
     const content = isControlled ? controlledValue : internalContent;
-    const setContent = React6__namespace.useCallback(
+    const setContent = React__namespace.useCallback(
       (val) => {
         if (isControlled) {
           const newVal = typeof val === "function" ? val(controlledValue) : val;
@@ -1238,20 +1517,20 @@ var MessageComposer = React6__namespace.forwardRef(
       },
       [isControlled, controlledValue, onValueChange]
     );
-    const [attachments, setAttachments] = React6__namespace.useState(
+    const [attachments, setAttachments] = React__namespace.useState(
       []
     );
-    const [isTyping, setIsTyping] = React6__namespace.useState(false);
-    const typingTimeoutRef = React6__namespace.useRef(null);
-    React6__namespace.useImperativeHandle(ref, () => textareaRef.current);
-    React6__namespace.useEffect(() => {
+    const [isTyping, setIsTyping] = React__namespace.useState(false);
+    const typingTimeoutRef = React__namespace.useRef(null);
+    React__namespace.useImperativeHandle(ref, () => textareaRef.current);
+    React__namespace.useEffect(() => {
       const textarea = textareaRef.current;
       if (textarea) {
         textarea.style.height = "auto";
         textarea.style.height = `${Math.min(textarea.scrollHeight, 150)}px`;
       }
     }, [content]);
-    React6__namespace.useEffect(() => {
+    React__namespace.useEffect(() => {
       if (content.length > 0 && !isTyping) {
         setIsTyping(true);
         onTypingStart?.();
@@ -1271,18 +1550,18 @@ var MessageComposer = React6__namespace.forwardRef(
         }
       };
     }, [content, isTyping, onTypingStart, onTypingStop]);
-    React6__namespace.useEffect(() => {
+    React__namespace.useEffect(() => {
       if (autoFocus) {
         textareaRef.current?.focus();
       }
     }, [autoFocus]);
     const replyToId = replyTo?.id;
-    React6__namespace.useEffect(() => {
+    React__namespace.useEffect(() => {
       if (replyToId !== void 0) {
         textareaRef.current?.focus();
       }
     }, [replyToId]);
-    const mention = chunkH3GRO43Z_cjs.useMentionAutocomplete({
+    const mention = chunkT6PTKWM6_cjs.useMentionAutocomplete({
       options: mentionOptions,
       value: content,
       setValue: setContent,
@@ -1324,13 +1603,13 @@ var MessageComposer = React6__namespace.forwardRef(
         onError?.(`Maximum ${maxAttachments} attachments allowed`);
       }
       const newAttachments = filesToAdd.map((file) => {
-        const type = chunkH3GRO43Z_cjs.getFileType(file.type);
+        const type = chunkT6PTKWM6_cjs.getFileType(file.type);
         let previewUrl;
         if (type === "image" || type === "video") {
           previewUrl = URL.createObjectURL(file);
         }
         return {
-          id: chunkH3GRO43Z_cjs.generateAttachmentId(),
+          id: chunkT6PTKWM6_cjs.generateAttachmentId(),
           file,
           previewUrl,
           type,
@@ -1355,7 +1634,7 @@ var MessageComposer = React6__namespace.forwardRef(
         return prev.filter((a) => a.id !== attachmentId);
       });
     };
-    React6__namespace.useEffect(() => {
+    React__namespace.useEffect(() => {
       const currentAttachments = attachments;
       return () => {
         currentAttachments.forEach((a) => {
@@ -1366,7 +1645,7 @@ var MessageComposer = React6__namespace.forwardRef(
       };
     }, [attachments]);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      chunkH3GRO43Z_cjs.DragDropZone,
+      chunkT6PTKWM6_cjs.DragDropZone,
       {
         onFilesDropped: handleFilesSelected,
         acceptedTypes: acceptedFileTypes,
@@ -1444,7 +1723,7 @@ var MessageComposer = React6__namespace.forwardRef(
                     "border-t border-neutral-200 dark:border-neutral-700"
                   ),
                   children: attachments.map((attachment) => /* @__PURE__ */ jsxRuntime.jsx(
-                    chunkH3GRO43Z_cjs.AttachmentPreviewItem,
+                    chunkT6PTKWM6_cjs.AttachmentPreviewItem,
                     {
                       attachment,
                       onRemove: () => handleRemoveAttachment(attachment.id)
@@ -1464,7 +1743,7 @@ var MessageComposer = React6__namespace.forwardRef(
                   ),
                   children: [
                     showAttachmentPicker && /* @__PURE__ */ jsxRuntime.jsx(
-                      chunkH3GRO43Z_cjs.AttachmentPicker,
+                      chunkT6PTKWM6_cjs.AttachmentPicker,
                       {
                         onFilesSelected: handleFilesSelected,
                         acceptedTypes: acceptedFileTypes,
@@ -1475,7 +1754,7 @@ var MessageComposer = React6__namespace.forwardRef(
                       }
                     ),
                     showCameraButton && /* @__PURE__ */ jsxRuntime.jsx(
-                      chunkH3GRO43Z_cjs.CameraButton,
+                      chunkT6PTKWM6_cjs.CameraButton,
                       {
                         onCapture: (file) => handleFilesSelected([file]),
                         disabled: disabled || attachments.length >= maxAttachments
@@ -1488,7 +1767,7 @@ var MessageComposer = React6__namespace.forwardRef(
                         className: "relative flex-1",
                         ref: mention.anchorRef,
                         children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(chunkH3GRO43Z_cjs.MentionMenu, { mention }),
+                          /* @__PURE__ */ jsxRuntime.jsx(chunkT6PTKWM6_cjs.MentionMenu, { mention }),
                           /* @__PURE__ */ jsxRuntime.jsx(
                             "textarea",
                             {
@@ -1625,7 +1904,7 @@ function formatLastSeen(date) {
   if (diffDays < 7) return `${diffDays}d ago`;
   return date.toLocaleDateString();
 }
-var ConversationHeader = React6__namespace.forwardRef(
+var ConversationHeader = React__namespace.forwardRef(
   ({
     className,
     size,
@@ -1747,7 +2026,7 @@ var ConversationHeader = React6__namespace.forwardRef(
   }
 );
 ConversationHeader.displayName = "ConversationHeader";
-var ConversationListItem = React6__namespace.forwardRef(({ className, conversation, isSelected, onSelect, ...props }, ref) => {
+var ConversationListItem = React__namespace.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;
@@ -1955,7 +2234,7 @@ function ConversationListSkeleton({
 }
 ConversationListSkeleton.displayName = "ConversationListSkeleton";
 function LightboxModal({ attachment, onClose }) {
-  React6__namespace.useEffect(() => {
+  React__namespace.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -2052,7 +2331,7 @@ function LightboxModal({ attachment, onClose }) {
   );
 }
 LightboxModal.displayName = "LightboxModal";
-var MessageThread = React6__namespace.forwardRef(
+var MessageThread = React__namespace.forwardRef(
   ({
     conversation,
     messages,
@@ -2083,8 +2362,20 @@ var MessageThread = React6__namespace.forwardRef(
     onError,
     className
   }, ref) => {
-    const [lightboxAttachment, setLightboxAttachment] = React6__namespace.useState(null);
-    const [replyTo, setReplyTo] = React6__namespace.useState(null);
+    const [lightboxAttachment, setLightboxAttachment] = React__namespace.useState(null);
+    const [replyTo, setReplyTo] = React__namespace.useState(null);
+    const composerRef = React__namespace.useRef(null);
+    const [draft, setDraft] = React__namespace.useState("");
+    const draftEpochRef = React__namespace.useRef(0);
+    const handleDraftChange = React__namespace.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") {
@@ -2093,12 +2384,21 @@ var MessageThread = React6__namespace.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__ */ jsxRuntime.jsxs(
       "div",
@@ -2122,11 +2422,13 @@ var MessageThread = React6__namespace.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkH3GRO43Z_cjs.DragDropZone,
+            chunkT6PTKWM6_cjs.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__ */ jsxRuntime.jsx(
@@ -2152,23 +2454,38 @@ var MessageThread = React6__namespace.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                chunkT6PTKWM6_cjs.ChatComposer,
+                {
+                  ref: composerRef,
+                  value: draft,
+                  onValueChange: handleDraftChange,
+                  onSend: handleSendMessage,
+                  placeholder,
+                  maxLength: maxMessageLength,
+                  showCharacterCount,
+                  isSending,
+                  allowAttachments: showAttachmentPicker,
+                  acceptedFileTypes: acceptedFileTypes ?? chunkT6PTKWM6_cjs.DEFAULT_ACCEPTED_FILE_TYPES,
+                  maxFileSize: maxFileSize ?? chunkT6PTKWM6_cjs.DEFAULT_MAX_FILE_SIZE,
+                  maxAttachments,
+                  onError,
+                  replyTo,
+                  onCancelReply: () => setReplyTo(null),
+                  inputLabel: "Message",
+                  micSlot: showCameraButton ? /* @__PURE__ */ jsxRuntime.jsx(
+                    chunkT6PTKWM6_cjs.CameraButton,
+                    {
+                      onCapture: (file) => composerRef.current?.addFiles([file]),
+                      disabled: isSending
+                    }
+                  ) : void 0
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2248,249 +2565,6 @@ function MessagingSplitView({
   );
 }
 MessagingSplitView.displayName = "MessagingSplitView";
-function useMessages(options) {
-  const {
-    initialMessages = [],
-    currentUser,
-    onSend,
-    onRetry,
-    onLoadMore
-  } = options;
-  const [messages, setMessages] = React6__namespace.useState(initialMessages);
-  const [isSending, setIsSending] = React6__namespace.useState(false);
-  const [isLoadingMore, setIsLoadingMore] = React6__namespace.useState(false);
-  React6__namespace.useEffect(() => {
-    setMessages(initialMessages);
-  }, [initialMessages]);
-  const addMessage = React6__namespace.useCallback((message) => {
-    setMessages((prev) => {
-      if (prev.some((m) => m.id === message.id)) {
-        return prev;
-      }
-      return [...prev, message];
-    });
-  }, []);
-  const updateMessage = React6__namespace.useCallback(
-    (messageId, updates) => {
-      setMessages(
-        (prev) => prev.map((m) => m.id === messageId ? { ...m, ...updates } : m)
-      );
-    },
-    []
-  );
-  const removeMessage = React6__namespace.useCallback((messageId) => {
-    setMessages((prev) => prev.filter((m) => m.id !== messageId));
-  }, []);
-  const updateStatus = React6__namespace.useCallback(
-    (messageId, status) => {
-      updateMessage(messageId, { status });
-    },
-    [updateMessage]
-  );
-  const markAsRead = React6__namespace.useCallback(
-    (messageId) => {
-      updateStatus(messageId, "read");
-    },
-    [updateStatus]
-  );
-  const sendMessage = React6__namespace.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 = React6__namespace.useCallback(
-    async (messageId) => {
-      updateStatus(messageId, "sending");
-      try {
-        if (onRetry) {
-          await onRetry(messageId);
-          updateStatus(messageId, "sent");
-        }
-      } catch {
-        updateStatus(messageId, "failed");
-      }
-    },
-    [onRetry, updateStatus]
-  );
-  const loadMore = React6__namespace.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] = React6__namespace.useState(initialParticipants);
-  const [isLocalTyping, setIsLocalTyping] = React6__namespace.useState(false);
-  const typingTimeoutRef = React6__namespace.useRef(null);
-  React6__namespace.useEffect(() => {
-    setParticipants(initialParticipants);
-  }, [initialParticipants]);
-  const startTyping = React6__namespace.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 = React6__namespace.useCallback(() => {
-    if (typingTimeoutRef.current) {
-      clearTimeout(typingTimeoutRef.current);
-    }
-    setIsLocalTyping(false);
-    onTypingStop?.();
-  }, [onTypingStop]);
-  React6__namespace.useEffect(() => {
-    return () => {
-      if (typingTimeoutRef.current) {
-        clearTimeout(typingTimeoutRef.current);
-      }
-    };
-  }, []);
-  const typingState = React6__namespace.useMemo(
-    () => ({
-      participants,
-      lastUpdated: /* @__PURE__ */ new Date()
-    }),
-    [participants]
-  );
-  return {
-    typingState,
-    startTyping,
-    stopTyping,
-    setTypingParticipants: setParticipants
-  };
-}
-function useMessageScroll(options) {
-  const { messages, currentUserId, threshold = 100 } = options;
-  const scrollContainerRef = React6__namespace.useRef(null);
-  const bottomRef = React6__namespace.useRef(null);
-  const [isScrolledUp, setIsScrolledUp] = React6__namespace.useState(false);
-  const prevMessageCountRef = React6__namespace.useRef(messages.length);
-  React6__namespace.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 = React6__namespace.useCallback((smooth = true) => {
-    bottomRef.current?.scrollIntoView({
-      behavior: smooth ? "smooth" : "auto"
-    });
-  }, []);
-  React6__namespace.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 = React6__namespace.useRef(null);
-  const observedMessagesRef = React6__namespace.useRef(/* @__PURE__ */ new Set());
-  React6__namespace.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 = React6__namespace.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 };
-}
 
 exports.AttachmentPreview = AttachmentPreview;
 exports.CharacterCounter = CharacterCounter;
@@ -2524,6 +2598,7 @@ exports.sendButtonVariants = sendButtonVariants;
 exports.useMessageScroll = useMessageScroll;
 exports.useMessages = useMessages;
 exports.useReadReceipts = useReadReceipts;
+exports.useTypingEmulation = useTypingEmulation;
 exports.useTypingIndicator = useTypingIndicator;
-//# sourceMappingURL=chunk-ZXRVVNT5.cjs.map
-//# sourceMappingURL=chunk-ZXRVVNT5.cjs.map
+//# sourceMappingURL=chunk-XCNDZNY7.cjs.map
+//# sourceMappingURL=chunk-XCNDZNY7.cjs.map