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

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

@@ -1,9 +1,288 @@
-import { useMentionAutocomplete, DragDropZone, AttachmentPreviewItem, AttachmentPicker, CameraButton, MentionMenu, getFileType, generateAttachmentId } from './chunk-MD3ZY4UO.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 React6 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 = React6.forwardRef(
+var MessageBubble = React.forwardRef(
   ({
     className,
     message,
@@ -859,7 +1138,7 @@ function LoadMoreButton({
   );
 }
 LoadMoreButton.displayName = "LoadMoreButton";
-var MessageList = React6.forwardRef(
+var MessageList = React.forwardRef(
   ({
     messages,
     currentUser,
@@ -878,19 +1157,19 @@ var MessageList = React6.forwardRef(
     className,
     autoScroll = "onNewMessage"
   }, ref) => {
-    const scrollContainerRef = React6.useRef(null);
-    const bottomRef = React6.useRef(null);
-    const [isUserScrolled, setIsUserScrolled] = React6.useState(false);
-    const prevMessageCountRef = React6.useRef(messages.length);
-    React6.useImperativeHandle(ref, () => scrollContainerRef.current);
-    const handleScroll = React6.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);
     }, []);
-    React6.useEffect(() => {
+    React.useEffect(() => {
       const container = scrollContainerRef.current;
       const bottom = bottomRef.current;
       if (!container || !bottom) return;
@@ -906,7 +1185,7 @@ var MessageList = React6.forwardRef(
         }
       }
     }, [messages, currentUser.id, autoScroll, isUserScrolled]);
-    React6.useEffect(() => {
+    React.useEffect(() => {
       const bottom = bottomRef.current;
       if (bottom && !isLoading) {
         bottom.scrollIntoView();
@@ -959,7 +1238,7 @@ var MessageList = React6.forwardRef(
             {
               "data-slot": "message-list-content",
               className: "flex flex-col gap-1 p-4",
-              children: messageGroups.map((group) => /* @__PURE__ */ jsxs(React6.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];
@@ -1039,516 +1318,11 @@ var MessageList = React6.forwardRef(
   }
 );
 MessageList.displayName = "MessageList";
-function isFileAccepted(file, accepted) {
-  if (!accepted || accepted.length === 0) return true;
-  const mime = file.type;
-  const name = file.name.toLowerCase();
-  return accepted.some((token) => {
-    if (token.startsWith(".")) return name.endsWith(token.toLowerCase());
-    if (token.endsWith("/*")) return mime.startsWith(token.slice(0, -1));
-    if (token.includes("/")) return mime === token;
-    return false;
-  });
-}
-function CharacterCounter({
-  current,
-  max,
-  showWarningAt = 0.9,
-  className
-}) {
-  const percentage = current / max;
-  const isWarning = percentage >= showWarningAt && percentage < 1;
-  const isOver = current > max;
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: cn(
-        "text-xs tabular-nums",
-        isOver ? "font-medium text-red-700 dark:text-red-400" : isWarning ? "text-amber-700 dark:text-amber-400" : "text-neutral-600 dark:text-neutral-400",
-        className
-      ),
-      "aria-live": "polite",
-      "aria-label": `${current} of ${max} characters`,
-      children: [
-        current,
-        "/",
-        max
-      ]
-    }
-  );
-}
-CharacterCounter.displayName = "CharacterCounter";
-var sendButtonVariants = cva(
+var headerVariants = cva(
   [
-    "inline-flex items-center justify-center",
-    "rounded-full p-3 self-start",
-    "transition-all duration-200",
-    "focus:outline-none focus:ring-2 focus:ring-primary-500",
-    "disabled:opacity-50 disabled:cursor-not-allowed"
-  ],
-  {
-    variants: {
-      variant: {
-        primary: [
-          "bg-primary-800 text-white",
-          "hover:bg-primary-900",
-          "active:scale-95"
-        ],
-        subtle: [
-          "bg-transparent text-primary-800",
-          "hover:bg-primary-50 dark:hover:bg-primary-900/20"
-        ]
-      },
-      canSend: {
-        true: "",
-        false: "opacity-50 cursor-not-allowed"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      canSend: false
-    }
-  }
-);
-var SendButton = React6.forwardRef(
-  ({ className, variant, canSend, isLoading, disabled, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref,
-        type: "submit",
-        disabled: disabled || !canSend || isLoading,
-        "data-slot": "composer-send-button",
-        className: cn(sendButtonVariants({ variant, canSend }), className),
-        "aria-label": isLoading ? "Sending message" : "Send message",
-        ...props,
-        children: isLoading ? /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            "aria-hidden": "true",
-            className: "h-5 w-5 animate-spin",
-            fill: "none",
-            viewBox: "0 0 24 24",
-            children: [
-              /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  className: "opacity-25",
-                  cx: "12",
-                  cy: "12",
-                  r: "10",
-                  stroke: "currentColor",
-                  strokeWidth: "4"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  className: "opacity-75",
-                  fill: "currentColor",
-                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                }
-              )
-            ]
-          }
-        ) : /* @__PURE__ */ jsx(
-          "svg",
-          {
-            "aria-hidden": "true",
-            className: "h-5 w-5",
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "currentColor",
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
-              }
-            )
-          }
-        )
-      }
-    );
-  }
-);
-SendButton.displayName = "SendButton";
-var MessageComposer = React6.forwardRef(
-  ({
-    onSend,
-    onTypingStart,
-    onTypingStop,
-    value: controlledValue,
-    onValueChange,
-    placeholder = "Type a message...",
-    maxLength = 1600,
-    showCharacterCount = false,
-    disabled = false,
-    isSending = false,
-    showAttachmentPicker = true,
-    showCameraButton = false,
-    acceptedFileTypes = ["image/*", "video/*", ".pdf", ".doc", ".docx"],
-    maxFileSize = 25 * 1024 * 1024,
-    maxAttachments = 10,
-    onError,
-    autoFocus = false,
-    replyTo = null,
-    onCancelReply,
-    variant = "default",
-    inputTrailing,
-    mentionOptions,
-    className
-  }, ref) => {
-    const textareaRef = React6.useRef(null);
-    const [internalContent, setInternalContent] = React6.useState("");
-    const isControlled = controlledValue !== void 0;
-    const content = isControlled ? controlledValue : internalContent;
-    const setContent = React6.useCallback(
-      (val) => {
-        if (isControlled) {
-          const newVal = typeof val === "function" ? val(controlledValue) : val;
-          onValueChange?.(newVal);
-        } else {
-          setInternalContent(val);
-        }
-      },
-      [isControlled, controlledValue, onValueChange]
-    );
-    const [attachments, setAttachments] = React6.useState(
-      []
-    );
-    const [isTyping, setIsTyping] = React6.useState(false);
-    const typingTimeoutRef = React6.useRef(null);
-    React6.useImperativeHandle(ref, () => textareaRef.current);
-    React6.useEffect(() => {
-      const textarea = textareaRef.current;
-      if (textarea) {
-        textarea.style.height = "auto";
-        textarea.style.height = `${Math.min(textarea.scrollHeight, 150)}px`;
-      }
-    }, [content]);
-    React6.useEffect(() => {
-      if (content.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);
-        }
-      };
-    }, [content, isTyping, onTypingStart, onTypingStop]);
-    React6.useEffect(() => {
-      if (autoFocus) {
-        textareaRef.current?.focus();
-      }
-    }, [autoFocus]);
-    const replyToId = replyTo?.id;
-    React6.useEffect(() => {
-      if (replyToId !== void 0) {
-        textareaRef.current?.focus();
-      }
-    }, [replyToId]);
-    const mention = useMentionAutocomplete({
-      options: mentionOptions,
-      value: content,
-      setValue: setContent,
-      textareaRef
-    });
-    const canSend = (content.trim().length > 0 || attachments.length > 0) && content.length <= maxLength && !disabled && !isSending;
-    const handleSubmit = async (event) => {
-      event.preventDefault();
-      if (!canSend) return;
-      const message = {
-        content: content.trim(),
-        attachments: attachments.map((a) => a.file),
-        replyToId: replyTo?.id
-      };
-      setContent("");
-      setAttachments([]);
-      setIsTyping(false);
-      onTypingStop?.();
-      try {
-        await onSend(message);
-      } catch {
-        setContent(message.content);
-        onError?.("Failed to send message");
-      }
-    };
-    const handleKeyDown = (event) => {
-      if (mention.handleKeyDown(event)) return;
-      if (event.key === "Enter" && !event.shiftKey) {
-        event.preventDefault();
-        if (canSend) {
-          handleSubmit(event);
-        }
-      }
-    };
-    const handleFilesSelected = (files) => {
-      const remainingSlots = maxAttachments - attachments.length;
-      const filesToAdd = files.slice(0, remainingSlots);
-      if (files.length > remainingSlots) {
-        onError?.(`Maximum ${maxAttachments} attachments allowed`);
-      }
-      const newAttachments = filesToAdd.map((file) => {
-        const type = getFileType(file.type);
-        let previewUrl;
-        if (type === "image" || type === "video") {
-          previewUrl = URL.createObjectURL(file);
-        }
-        return {
-          id: generateAttachmentId(),
-          file,
-          previewUrl,
-          type,
-          state: "pending"
-        };
-      });
-      setAttachments((prev) => [...prev, ...newAttachments]);
-    };
-    const handlePaste = (event) => {
-      if (!showAttachmentPicker || disabled) return;
-      const pasted = Array.from(event.clipboardData.items).filter((item) => item.kind === "file").map((item) => item.getAsFile()).filter((f) => f !== null).filter((f) => isFileAccepted(f, acceptedFileTypes));
-      if (pasted.length === 0) return;
-      event.preventDefault();
-      handleFilesSelected(pasted);
-    };
-    const handleRemoveAttachment = (attachmentId) => {
-      setAttachments((prev) => {
-        const attachment = prev.find((a) => a.id === attachmentId);
-        if (attachment?.previewUrl) {
-          URL.revokeObjectURL(attachment.previewUrl);
-        }
-        return prev.filter((a) => a.id !== attachmentId);
-      });
-    };
-    React6.useEffect(() => {
-      const currentAttachments = attachments;
-      return () => {
-        currentAttachments.forEach((a) => {
-          if (a.previewUrl) {
-            URL.revokeObjectURL(a.previewUrl);
-          }
-        });
-      };
-    }, [attachments]);
-    return /* @__PURE__ */ jsx(
-      DragDropZone,
-      {
-        onFilesDropped: handleFilesSelected,
-        acceptedTypes: acceptedFileTypes,
-        maxFileSize,
-        maxFiles: maxAttachments - attachments.length,
-        disabled: disabled || attachments.length >= maxAttachments,
-        onError,
-        className: cn("w-full", className),
-        children: /* @__PURE__ */ jsxs(
-          "form",
-          {
-            onSubmit: handleSubmit,
-            "data-slot": "message-composer",
-            className: "w-full",
-            children: [
-              replyTo && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  "data-slot": "composer-reply-preview",
-                  className: cn(
-                    "flex items-center gap-2 px-4 py-2",
-                    "bg-neutral-50 dark:bg-neutral-800/50",
-                    "border-primary-500 border-s-4"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsxs("span", { className: "text-primary-800 dark:text-primary-400 text-xs font-medium", children: [
-                        "Replying to ",
-                        replyTo.senderName
-                      ] }),
-                      /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-neutral-600 dark:text-neutral-300", children: replyTo.content })
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: onCancelReply,
-                        className: cn(
-                          "shrink-0 rounded p-1",
-                          "text-neutral-500 hover:text-neutral-700",
-                          "dark:text-neutral-400 dark:hover:text-neutral-200",
-                          "focus:ring-primary-500 focus:ring-2 focus:outline-none"
-                        ),
-                        "aria-label": "Cancel reply",
-                        children: /* @__PURE__ */ jsx(
-                          "svg",
-                          {
-                            "aria-hidden": "true",
-                            className: "h-4 w-4",
-                            fill: "none",
-                            viewBox: "0 0 24 24",
-                            stroke: "currentColor",
-                            children: /* @__PURE__ */ jsx(
-                              "path",
-                              {
-                                strokeLinecap: "round",
-                                strokeLinejoin: "round",
-                                strokeWidth: 2,
-                                d: "M6 18L18 6M6 6l12 12"
-                              }
-                            )
-                          }
-                        )
-                      }
-                    )
-                  ]
-                }
-              ),
-              attachments.length > 0 && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-slot": "composer-attachments",
-                  className: cn(
-                    "flex flex-wrap gap-2 p-3",
-                    "border-t border-neutral-200 dark:border-neutral-700"
-                  ),
-                  children: attachments.map((attachment) => /* @__PURE__ */ jsx(
-                    AttachmentPreviewItem,
-                    {
-                      attachment,
-                      onRemove: () => handleRemoveAttachment(attachment.id)
-                    },
-                    attachment.id
-                  ))
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  "data-slot": "composer-input-area",
-                  className: cn(
-                    "flex items-center gap-2 p-3",
-                    "bg-white dark:bg-neutral-900",
-                    variant === "default" && "border-t border-neutral-200 dark:border-neutral-700"
-                  ),
-                  children: [
-                    showAttachmentPicker && /* @__PURE__ */ jsx(
-                      AttachmentPicker,
-                      {
-                        onFilesSelected: handleFilesSelected,
-                        acceptedTypes: acceptedFileTypes,
-                        maxFileSize,
-                        maxFiles: maxAttachments - attachments.length,
-                        disabled: disabled || attachments.length >= maxAttachments,
-                        onError
-                      }
-                    ),
-                    showCameraButton && /* @__PURE__ */ jsx(
-                      CameraButton,
-                      {
-                        onCapture: (file) => handleFilesSelected([file]),
-                        disabled: disabled || attachments.length >= maxAttachments
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        "data-slot": "composer-input-wrapper",
-                        className: "relative flex-1",
-                        ref: mention.anchorRef,
-                        children: [
-                          /* @__PURE__ */ jsx(MentionMenu, { mention }),
-                          /* @__PURE__ */ jsx(
-                            "textarea",
-                            {
-                              ref: textareaRef,
-                              "data-slot": "composer-input",
-                              value: content,
-                              onChange: (e) => {
-                                setContent(e.target.value);
-                                mention.sync(
-                                  e.target.value,
-                                  e.target.selectionStart ?? e.target.value.length
-                                );
-                              },
-                              onClick: (e) => {
-                                const el = e.currentTarget;
-                                mention.sync(el.value, el.selectionStart ?? el.value.length);
-                              },
-                              onKeyDown: handleKeyDown,
-                              onPaste: handlePaste,
-                              placeholder,
-                              disabled: disabled || isSending,
-                              rows: 1,
-                              className: cn(
-                                "w-full resize-none rounded-2xl py-2.5",
-                                inputTrailing ? "ps-4 pe-10" : "px-4",
-                                "bg-neutral-100 dark:bg-neutral-800",
-                                "text-neutral-900 dark:text-neutral-100",
-                                "placeholder:text-neutral-400 dark:placeholder:text-neutral-500",
-                                "focus:ring-primary-500 focus:ring-2 focus:outline-none",
-                                "disabled:cursor-not-allowed disabled:opacity-50",
-                                "transition-colors",
-                                "max-h-[150px]"
-                              ),
-                              "aria-label": "Message",
-                              "aria-describedby": showCharacterCount ? "char-count" : void 0,
-                              ...mention.inputProps
-                            }
-                          ),
-                          inputTrailing && /* @__PURE__ */ jsx(
-                            "div",
-                            {
-                              "data-slot": "composer-input-trailing",
-                              className: "pointer-events-none absolute end-1 top-0 flex h-[44px] items-center [&>*]:pointer-events-auto",
-                              children: inputTrailing
-                            }
-                          ),
-                          showCharacterCount && /* @__PURE__ */ jsx(
-                            "div",
-                            {
-                              "data-slot": "composer-char-count",
-                              id: "char-count",
-                              className: "absolute end-3 bottom-1.5",
-                              children: /* @__PURE__ */ jsx(CharacterCounter, { current: content.length, max: maxLength })
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      SendButton,
-                      {
-                        canSend,
-                        isLoading: isSending,
-                        disabled
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
-  }
-);
-MessageComposer.displayName = "MessageComposer";
-var headerVariants = cva(
-  [
-    "flex items-center gap-3 px-4 py-3",
-    "bg-white dark:bg-neutral-900",
-    "border-b border-neutral-200 dark:border-neutral-700"
+    "flex items-center gap-3 px-4 py-3",
+    "bg-white dark:bg-neutral-900",
+    "border-b border-neutral-200 dark:border-neutral-700"
   ],
   {
     variants: {
@@ -1603,7 +1377,7 @@ function formatLastSeen(date) {
   if (diffDays < 7) return `${diffDays}d ago`;
   return date.toLocaleDateString();
 }
-var ConversationHeader = React6.forwardRef(
+var ConversationHeader = React.forwardRef(
   ({
     className,
     size,
@@ -1725,7 +1499,7 @@ var ConversationHeader = React6.forwardRef(
   }
 );
 ConversationHeader.displayName = "ConversationHeader";
-var ConversationListItem = React6.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;
@@ -1933,7 +1707,7 @@ function ConversationListSkeleton({
 }
 ConversationListSkeleton.displayName = "ConversationListSkeleton";
 function LightboxModal({ attachment, onClose }) {
-  React6.useEffect(() => {
+  React.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -2030,7 +1804,7 @@ function LightboxModal({ attachment, onClose }) {
   );
 }
 LightboxModal.displayName = "LightboxModal";
-var MessageThread = React6.forwardRef(
+var MessageThread = React.forwardRef(
   ({
     conversation,
     messages,
@@ -2061,8 +1835,23 @@ var MessageThread = React6.forwardRef(
     onError,
     className
   }, ref) => {
-    const [lightboxAttachment, setLightboxAttachment] = React6.useState(null);
-    const [replyTo, setReplyTo] = React6.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") {
@@ -2071,12 +1860,21 @@ var MessageThread = React6.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",
@@ -2102,9 +1900,11 @@ var MessageThread = React6.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(
@@ -2130,23 +1930,38 @@ var MessageThread = React6.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(
@@ -2226,250 +2041,7 @@ function MessagingSplitView({
   );
 }
 MessagingSplitView.displayName = "MessagingSplitView";
-function useMessages(options) {
-  const {
-    initialMessages = [],
-    currentUser,
-    onSend,
-    onRetry,
-    onLoadMore
-  } = options;
-  const [messages, setMessages] = React6.useState(initialMessages);
-  const [isSending, setIsSending] = React6.useState(false);
-  const [isLoadingMore, setIsLoadingMore] = React6.useState(false);
-  React6.useEffect(() => {
-    setMessages(initialMessages);
-  }, [initialMessages]);
-  const addMessage = React6.useCallback((message) => {
-    setMessages((prev) => {
-      if (prev.some((m) => m.id === message.id)) {
-        return prev;
-      }
-      return [...prev, message];
-    });
-  }, []);
-  const updateMessage = React6.useCallback(
-    (messageId, updates) => {
-      setMessages(
-        (prev) => prev.map((m) => m.id === messageId ? { ...m, ...updates } : m)
-      );
-    },
-    []
-  );
-  const removeMessage = React6.useCallback((messageId) => {
-    setMessages((prev) => prev.filter((m) => m.id !== messageId));
-  }, []);
-  const updateStatus = React6.useCallback(
-    (messageId, status) => {
-      updateMessage(messageId, { status });
-    },
-    [updateMessage]
-  );
-  const markAsRead = React6.useCallback(
-    (messageId) => {
-      updateStatus(messageId, "read");
-    },
-    [updateStatus]
-  );
-  const sendMessage = React6.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.useCallback(
-    async (messageId) => {
-      updateStatus(messageId, "sending");
-      try {
-        if (onRetry) {
-          await onRetry(messageId);
-          updateStatus(messageId, "sent");
-        }
-      } catch {
-        updateStatus(messageId, "failed");
-      }
-    },
-    [onRetry, updateStatus]
-  );
-  const loadMore = React6.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.useState(initialParticipants);
-  const [isLocalTyping, setIsLocalTyping] = React6.useState(false);
-  const typingTimeoutRef = React6.useRef(null);
-  React6.useEffect(() => {
-    setParticipants(initialParticipants);
-  }, [initialParticipants]);
-  const startTyping = React6.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.useCallback(() => {
-    if (typingTimeoutRef.current) {
-      clearTimeout(typingTimeoutRef.current);
-    }
-    setIsLocalTyping(false);
-    onTypingStop?.();
-  }, [onTypingStop]);
-  React6.useEffect(() => {
-    return () => {
-      if (typingTimeoutRef.current) {
-        clearTimeout(typingTimeoutRef.current);
-      }
-    };
-  }, []);
-  const typingState = React6.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.useRef(null);
-  const bottomRef = React6.useRef(null);
-  const [isScrolledUp, setIsScrolledUp] = React6.useState(false);
-  const prevMessageCountRef = React6.useRef(messages.length);
-  React6.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.useCallback((smooth = true) => {
-    bottomRef.current?.scrollIntoView({
-      behavior: smooth ? "smooth" : "auto"
-    });
-  }, []);
-  React6.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.useRef(null);
-  const observedMessagesRef = React6.useRef(/* @__PURE__ */ new Set());
-  React6.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.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, CharacterCounter, ConversationHeader, ConversationListItem, ConversationListSkeleton, DateSeparator, EmptyState, LightboxModal, LoadMoreButton, MessageBubble, MessageComposer, MessageList, MessageStatusIcon, MessageThread, MessagingSplitView, ReadReceiptIndicator, SendButton, SkeletonMessage, TypingIndicator, bubbleVariants, formatDateLabel, formatFileSize, formatLastSeen, getConversationSubtitle, getConversationTitle, groupMessagesByDate, headerVariants, isSameSenderGroup, sendButtonVariants, useMessageScroll, useMessages, useReadReceipts, useTypingIndicator };
-//# sourceMappingURL=chunk-PL6TFCYR.js.map
-//# sourceMappingURL=chunk-PL6TFCYR.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