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

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

@@ -1,97 +1,39 @@
-import { useMentionAutocomplete, DragDropZone, AttachmentPreviewItem, AttachmentPicker, CameraButton, MentionMenu, getFileType, generateAttachmentId } from './chunk-IF3X2WZP.js';
+import { useMentionAutocomplete, DragDropZone, AttachmentPreviewItem, AttachmentPicker, CameraButton, MentionMenu, getFileType, generateAttachmentId } from './chunk-MD3ZY4UO.js';
 import { cn } from './chunk-TQONQSJO.js';
 import * as React6 from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-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(
-  [
-    "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"
-  ],
+var statusIconVariants = cva(
+  "inline-flex items-center gap-0.5 text-current",
   {
     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"
+      status: {
+        sending: "text-neutral-500",
+        sent: "text-neutral-500",
+        delivered: "text-muted-foreground",
+        read: "text-primary-800 dark:text-primary-300",
+        failed: "text-red-500"
       }
     },
     defaultVariants: {
-      variant: "primary",
-      canSend: false
+      status: "sent"
     }
   }
 );
-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(
+function MessageStatusIcon({ status, className }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(statusIconVariants({ status }), className),
+      role: "img",
+      "aria-label": `Message ${status}`,
+      children: [
+        status === "sending" && /* @__PURE__ */ jsxs(
           "svg",
           {
             "aria-hidden": "true",
-            className: "h-5 w-5 animate-spin",
+            className: "h-3.5 w-3.5 animate-spin",
             fill: "none",
             viewBox: "0 0 24 24",
             children: [
@@ -116,517 +58,71 @@ var SendButton = React6.forwardRef(
               )
             ]
           }
-        ) : /* @__PURE__ */ jsx(
+        ),
+        status === "sent" && /* @__PURE__ */ jsx(
           "svg",
           {
             "aria-hidden": "true",
-            className: "h-5 w-5",
+            className: "h-3.5 w-3.5",
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
+            strokeWidth: "2",
             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]);
-    React6.useEffect(() => {
-      if (replyTo) {
-        textareaRef.current?.focus();
-      }
-    }, [replyTo]);
-    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 statusIconVariants = cva(
-  "inline-flex items-center gap-0.5 text-current",
-  {
-    variants: {
-      status: {
-        sending: "text-neutral-500",
-        sent: "text-neutral-500",
-        delivered: "text-muted-foreground",
-        read: "text-primary-800 dark:text-primary-300",
-        failed: "text-red-500"
-      }
-    },
-    defaultVariants: {
-      status: "sent"
-    }
-  }
-);
-function MessageStatusIcon({ status, className }) {
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: cn(statusIconVariants({ status }), className),
-      role: "img",
-      "aria-label": `Message ${status}`,
-      children: [
-        status === "sending" && /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            "aria-hidden": "true",
-            className: "h-3.5 w-3.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"
-                }
-              )
-            ]
-          }
-        ),
-        status === "sent" && /* @__PURE__ */ jsx(
-          "svg",
-          {
-            "aria-hidden": "true",
-            className: "h-3.5 w-3.5",
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                d: "M5 13l4 4L19 7"
-              }
-            )
-          }
-        ),
-        (status === "delivered" || status === "read") && /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            "aria-hidden": "true",
-            className: "h-4 w-4",
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            children: [
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  d: "M5 13l4 4L19 7"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  d: "M12 13l4 4L26 7",
-                  transform: "translate(-5, 0)"
-                }
-              )
-            ]
-          }
-        ),
-        status === "failed" && /* @__PURE__ */ jsx(
-          "svg",
-          {
-            "aria-hidden": "true",
-            className: "h-3.5 w-3.5",
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                d: "M5 13l4 4L19 7"
+              }
+            )
+          }
+        ),
+        (status === "delivered" || status === "read") && /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            "aria-hidden": "true",
+            className: "h-4 w-4",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M5 13l4 4L19 7"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M12 13l4 4L26 7",
+                  transform: "translate(-5, 0)"
+                }
+              )
+            ]
+          }
+        ),
+        status === "failed" && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            className: "h-3.5 w-3.5",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
               }
             )
           }
@@ -1181,368 +677,873 @@ function SkeletonMessage({
     }
   );
 }
-SkeletonMessage.displayName = "SkeletonMessage";
-function TypingIndicator({ typingState, className }) {
-  const { participants } = typingState;
-  if (participants.length === 0) return null;
-  const typingText = participants.length === 1 ? `${participants[0].name} is typing` : participants.length === 2 ? `${participants[0].name} and ${participants[1].name} are typing` : `${participants[0].name} and ${participants.length - 1} others are typing`;
-  return /* @__PURE__ */ jsxs(
+SkeletonMessage.displayName = "SkeletonMessage";
+function TypingIndicator({ typingState, className }) {
+  const { participants } = typingState;
+  if (participants.length === 0) return null;
+  const typingText = participants.length === 1 ? `${participants[0].name} is typing` : participants.length === 2 ? `${participants[0].name} and ${participants[1].name} are typing` : `${participants[0].name} and ${participants.length - 1} others are typing`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "typing-indicator",
+      className: cn("flex items-center gap-2 px-4 py-2", className),
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": typingText,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-2xl rounded-es-md bg-neutral-200 px-4 py-3 dark:bg-neutral-700", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "h-2 w-2 animate-bounce rounded-full bg-neutral-500",
+              style: { animationDelay: "0ms" }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "h-2 w-2 animate-bounce rounded-full bg-neutral-500",
+              style: { animationDelay: "150ms" }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "h-2 w-2 animate-bounce rounded-full bg-neutral-500",
+              style: { animationDelay: "300ms" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: typingText })
+      ]
+    }
+  );
+}
+TypingIndicator.displayName = "TypingIndicator";
+function DateSeparator({ label, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "date-separator",
+      className: cn("flex items-center justify-center py-4", className),
+      role: "separator",
+      "aria-label": label,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "rounded-full px-3 py-1 text-xs font-medium",
+            "bg-neutral-100 text-neutral-600",
+            "dark:bg-neutral-800 dark:text-neutral-400"
+          ),
+          children: label
+        }
+      )
+    }
+  );
+}
+DateSeparator.displayName = "DateSeparator";
+function EmptyState({
+  title = "No messages yet",
+  description = "Start the conversation by sending a message below.",
+  icon,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "message-empty-state",
+      className: cn(
+        "flex flex-1 flex-col items-center justify-center p-8 text-center",
+        className
+      ),
+      role: "status",
+      "aria-label": title,
+      children: [
+        icon || /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "message-empty-state-icon",
+            className: "mb-4 rounded-full bg-neutral-100 p-4 dark:bg-neutral-800",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                "aria-hidden": "true",
+                className: "h-12 w-12 text-neutral-500",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 1.5,
+                    d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-semibold text-neutral-900 dark:text-neutral-100", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-4 max-w-sm text-sm", children: description }),
+        action
+      ]
+    }
+  );
+}
+EmptyState.displayName = "EmptyState";
+function LoadMoreButton({
+  isLoading,
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-slot": "typing-indicator",
-      className: cn("flex items-center gap-2 px-4 py-2", className),
-      role: "status",
-      "aria-live": "polite",
-      "aria-label": typingText,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-2xl rounded-es-md bg-neutral-200 px-4 py-3 dark:bg-neutral-700", children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "h-2 w-2 animate-bounce rounded-full bg-neutral-500",
-              style: { animationDelay: "0ms" }
-            }
+      "data-slot": "load-more-button",
+      className: cn("flex justify-center py-4", className),
+      children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick,
+          disabled: isLoading,
+          className: cn(
+            "rounded-full px-4 py-2 text-sm font-medium",
+            "bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-300",
+            "hover:bg-neutral-200 dark:hover:bg-neutral-700",
+            "focus:ring-primary-500 focus:ring-2 focus:outline-none",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            "transition-colors"
+          ),
+          "aria-label": isLoading ? "Loading more messages" : "Load more messages",
+          children: isLoading ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                "aria-hidden": "true",
+                className: "h-4 w-4 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"
+                    }
+                  )
+                ]
+              }
+            ),
+            "Loading..."
+          ] }) : "Load earlier messages"
+        }
+      )
+    }
+  );
+}
+LoadMoreButton.displayName = "LoadMoreButton";
+var MessageList = React6.forwardRef(
+  ({
+    messages,
+    currentUser,
+    isLoading = false,
+    hasMore = false,
+    isLoadingMore = false,
+    typingState,
+    showAvatars = true,
+    showSenderNames = false,
+    groupByDate = true,
+    onLoadMore,
+    onRetryMessage,
+    onAttachmentClick,
+    emptyState,
+    formatTimestamp,
+    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 container = scrollContainerRef.current;
+      if (!container) return;
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      const isAtBottom = scrollHeight - scrollTop - clientHeight < 100;
+      setIsUserScrolled(!isAtBottom);
+    }, []);
+    React6.useEffect(() => {
+      const container = scrollContainerRef.current;
+      const bottom = bottomRef.current;
+      if (!container || !bottom) return;
+      const messageCountChanged = messages.length !== prevMessageCountRef.current;
+      prevMessageCountRef.current = messages.length;
+      if (autoScroll === "always") {
+        bottom.scrollIntoView({ behavior: "smooth" });
+      } else if (autoScroll === "onNewMessage" && messageCountChanged) {
+        const lastMessage = messages[messages.length - 1];
+        const isOutgoing = lastMessage?.sender.id === currentUser.id;
+        if (isOutgoing || !isUserScrolled) {
+          bottom.scrollIntoView({ behavior: "smooth" });
+        }
+      }
+    }, [messages, currentUser.id, autoScroll, isUserScrolled]);
+    React6.useEffect(() => {
+      const bottom = bottomRef.current;
+      if (bottom && !isLoading) {
+        bottom.scrollIntoView();
+      }
+    }, [isLoading]);
+    const messageGroups = groupByDate ? groupMessagesByDate(messages) : [{ date: "all", label: "", messages }];
+    if (isLoading) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "status",
+          className: cn(
+            "flex flex-1 flex-col gap-3 overflow-y-auto p-4",
+            className
           ),
+          "aria-busy": "true",
+          "aria-label": "Loading messages",
+          children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(
+            SkeletonMessage,
+            {
+              isOutgoing: i % 3 === 0,
+              showAvatar: showAvatars
+            },
+            i
+          ))
+        }
+      );
+    }
+    if (messages.length === 0) {
+      return emptyState || /* @__PURE__ */ jsx(EmptyState, {});
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: scrollContainerRef,
+        "data-slot": "message-list",
+        className: cn(
+          "flex flex-1 flex-col overflow-y-auto",
+          "scroll-smooth",
+          className
+        ),
+        onScroll: handleScroll,
+        role: "log",
+        "aria-label": "Message history",
+        "aria-live": "polite",
+        children: [
+          hasMore && onLoadMore && /* @__PURE__ */ jsx(LoadMoreButton, { isLoading: isLoadingMore, onClick: onLoadMore }),
           /* @__PURE__ */ jsx(
-            "span",
+            "div",
             {
-              className: "h-2 w-2 animate-bounce rounded-full bg-neutral-500",
-              style: { animationDelay: "150ms" }
+              "data-slot": "message-list-content",
+              className: "flex flex-col gap-1 p-4",
+              children: messageGroups.map((group) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
+                groupByDate && group.label && /* @__PURE__ */ jsx(DateSeparator, { label: group.label }),
+                group.messages.map((message, index) => {
+                  const prevMessage = group.messages[index - 1];
+                  const isOutgoing = message.sender.id === currentUser.id;
+                  const isSameGroup = isSameSenderGroup(prevMessage, message);
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "transition-opacity duration-200",
+                        isSameGroup ? "mt-0.5" : "mt-3",
+                        index === 0 && "mt-0"
+                      ),
+                      children: /* @__PURE__ */ jsx(
+                        MessageBubble,
+                        {
+                          message,
+                          isOutgoing,
+                          showAvatar: showAvatars && !isSameGroup && !isOutgoing,
+                          showSenderName: showSenderNames && !isSameGroup && !isOutgoing,
+                          showTimestamp: !isSameGroup,
+                          onRetry: message.status === "failed" && onRetryMessage ? () => onRetryMessage(message.id) : void 0,
+                          onAttachmentClick: (attachment) => onAttachmentClick?.(attachment, message),
+                          formatTimestamp
+                        }
+                      )
+                    },
+                    message.id
+                  );
+                })
+              ] }, group.date))
             }
           ),
-          /* @__PURE__ */ jsx(
-            "span",
+          typingState && typingState.participants.length > 0 && /* @__PURE__ */ jsx(TypingIndicator, { typingState }),
+          /* @__PURE__ */ jsx("div", { ref: bottomRef, className: "h-0", "aria-hidden": "true" }),
+          isUserScrolled && /* @__PURE__ */ jsx(
+            "button",
             {
-              className: "h-2 w-2 animate-bounce rounded-full bg-neutral-500",
-              style: { animationDelay: "300ms" }
+              type: "button",
+              onClick: () => {
+                bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+              },
+              className: cn(
+                "fixed end-4 bottom-24 z-10",
+                "rounded-full p-3 shadow-lg",
+                "bg-white dark:bg-neutral-800",
+                "border border-neutral-200 dark:border-neutral-700",
+                "hover:bg-neutral-50 dark:hover:bg-neutral-700",
+                "focus:ring-primary-500 focus:ring-2 focus:outline-none",
+                "transition-all"
+              ),
+              "aria-label": "Scroll to bottom",
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  className: "h-5 w-5 text-neutral-600 dark:text-neutral-300",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M19 14l-7 7m0 0l-7-7m7 7V3"
+                    }
+                  )
+                }
+              )
             }
           )
-        ] }),
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: typingText })
-      ]
-    }
-  );
-}
-TypingIndicator.displayName = "TypingIndicator";
-function DateSeparator({ label, className }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "date-separator",
-      className: cn("flex items-center justify-center py-4", className),
-      role: "separator",
-      "aria-label": label,
-      children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn(
-            "rounded-full px-3 py-1 text-xs font-medium",
-            "bg-neutral-100 text-neutral-600",
-            "dark:bg-neutral-800 dark:text-neutral-400"
-          ),
-          children: label
-        }
-      )
-    }
-  );
+        ]
+      }
+    );
+  }
+);
+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;
+  });
 }
-DateSeparator.displayName = "DateSeparator";
-function EmptyState({
-  title = "No messages yet",
-  description = "Start the conversation by sending a message below.",
-  icon,
-  action,
+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(
-    "div",
+    "span",
     {
-      "data-slot": "message-empty-state",
       className: cn(
-        "flex flex-1 flex-col items-center justify-center p-8 text-center",
+        "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
       ),
-      role: "status",
-      "aria-label": title,
+      "aria-live": "polite",
+      "aria-label": `${current} of ${max} characters`,
       children: [
-        icon || /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-slot": "message-empty-state-icon",
-            className: "mb-4 rounded-full bg-neutral-100 p-4 dark:bg-neutral-800",
-            children: /* @__PURE__ */ jsx(
-              "svg",
-              {
-                "aria-hidden": "true",
-                className: "h-12 w-12 text-neutral-500",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: 1.5,
-                    d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-                  }
-                )
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-semibold text-neutral-900 dark:text-neutral-100", children: title }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-4 max-w-sm text-sm", children: description }),
-        action
+        current,
+        "/",
+        max
       ]
     }
   );
 }
-EmptyState.displayName = "EmptyState";
-function LoadMoreButton({
-  isLoading,
-  onClick,
-  className
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "load-more-button",
-      className: cn("flex justify-center py-4", className),
-      children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick,
-          disabled: isLoading,
-          className: cn(
-            "rounded-full px-4 py-2 text-sm font-medium",
-            "bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-300",
-            "hover:bg-neutral-200 dark:hover:bg-neutral-700",
-            "focus:ring-primary-500 focus:ring-2 focus:outline-none",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            "transition-colors"
-          ),
-          "aria-label": isLoading ? "Loading more messages" : "Load more messages",
-          children: isLoading ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxs(
-              "svg",
+CharacterCounter.displayName = "CharacterCounter";
+var sendButtonVariants = 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",
               {
-                "aria-hidden": "true",
-                className: "h-4 w-4 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"
-                    }
-                  )
-                ]
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
               }
-            ),
-            "Loading..."
-          ] }) : "Load earlier messages"
-        }
-      )
-    }
-  );
-}
-LoadMoreButton.displayName = "LoadMoreButton";
-var MessageList = React6.forwardRef(
+            )
+          }
+        )
+      }
+    );
+  }
+);
+SendButton.displayName = "SendButton";
+var MessageComposer = React6.forwardRef(
   ({
-    messages,
-    currentUser,
-    isLoading = false,
-    hasMore = false,
-    isLoadingMore = false,
-    typingState,
-    showAvatars = true,
-    showSenderNames = false,
-    groupByDate = true,
-    onLoadMore,
-    onRetryMessage,
-    onAttachmentClick,
-    emptyState,
-    formatTimestamp,
-    className,
-    autoScroll = "onNewMessage"
+    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 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 container = scrollContainerRef.current;
-      if (!container) return;
-      const { scrollTop, scrollHeight, clientHeight } = container;
-      const isAtBottom = scrollHeight - scrollTop - clientHeight < 100;
-      setIsUserScrolled(!isAtBottom);
-    }, []);
+    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 container = scrollContainerRef.current;
-      const bottom = bottomRef.current;
-      if (!container || !bottom) return;
-      const messageCountChanged = messages.length !== prevMessageCountRef.current;
-      prevMessageCountRef.current = messages.length;
-      if (autoScroll === "always") {
-        bottom.scrollIntoView({ behavior: "smooth" });
-      } else if (autoScroll === "onNewMessage" && messageCountChanged) {
-        const lastMessage = messages[messages.length - 1];
-        const isOutgoing = lastMessage?.sender.id === currentUser.id;
-        if (isOutgoing || !isUserScrolled) {
-          bottom.scrollIntoView({ behavior: "smooth" });
+      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();
       }
-    }, [messages, currentUser.id, autoScroll, isUserScrolled]);
+    }, [autoFocus]);
+    const replyToId = replyTo?.id;
     React6.useEffect(() => {
-      const bottom = bottomRef.current;
-      if (bottom && !isLoading) {
-        bottom.scrollIntoView();
+      if (replyToId !== void 0) {
+        textareaRef.current?.focus();
       }
-    }, [isLoading]);
-    const messageGroups = groupByDate ? groupMessagesByDate(messages) : [{ date: "all", label: "", messages }];
-    if (isLoading) {
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          role: "status",
-          className: cn(
-            "flex flex-1 flex-col gap-3 overflow-y-auto p-4",
-            className
-          ),
-          "aria-busy": "true",
-          "aria-label": "Loading messages",
-          children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(
-            SkeletonMessage,
-            {
-              isOutgoing: i % 3 === 0,
-              showAvatar: showAvatars
-            },
-            i
-          ))
+    }, [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);
         }
-      );
-    }
-    if (messages.length === 0) {
-      return emptyState || /* @__PURE__ */ jsx(EmptyState, {});
-    }
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: scrollContainerRef,
-        "data-slot": "message-list",
-        className: cn(
-          "flex flex-1 flex-col overflow-y-auto",
-          "scroll-smooth",
-          className
-        ),
-        onScroll: handleScroll,
-        role: "log",
-        "aria-label": "Message history",
-        "aria-live": "polite",
-        children: [
-          hasMore && onLoadMore && /* @__PURE__ */ jsx(LoadMoreButton, { isLoading: isLoadingMore, onClick: onLoadMore }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-slot": "message-list-content",
-              className: "flex flex-col gap-1 p-4",
-              children: messageGroups.map((group) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
-                groupByDate && group.label && /* @__PURE__ */ jsx(DateSeparator, { label: group.label }),
-                group.messages.map((message, index) => {
-                  const prevMessage = group.messages[index - 1];
-                  const isOutgoing = message.sender.id === currentUser.id;
-                  const isSameGroup = isSameSenderGroup(prevMessage, message);
-                  return /* @__PURE__ */ jsx(
-                    "div",
+      }
+    };
+    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,
                     {
-                      className: cn(
-                        "transition-opacity duration-200",
-                        isSameGroup ? "mt-0.5" : "mt-3",
-                        index === 0 && "mt-0"
-                      ),
-                      children: /* @__PURE__ */ jsx(
-                        MessageBubble,
-                        {
-                          message,
-                          isOutgoing,
-                          showAvatar: showAvatars && !isSameGroup && !isOutgoing,
-                          showSenderName: showSenderNames && !isSameGroup && !isOutgoing,
-                          showTimestamp: !isSameGroup,
-                          onRetry: message.status === "failed" && onRetryMessage ? () => onRetryMessage(message.id) : void 0,
-                          onAttachmentClick: (attachment) => onAttachmentClick?.(attachment, message),
-                          formatTimestamp
-                        }
-                      )
+                      attachment,
+                      onRemove: () => handleRemoveAttachment(attachment.id)
                     },
-                    message.id
-                  );
-                })
-              ] }, group.date))
-            }
-          ),
-          typingState && typingState.participants.length > 0 && /* @__PURE__ */ jsx(TypingIndicator, { typingState }),
-          /* @__PURE__ */ jsx("div", { ref: bottomRef, className: "h-0", "aria-hidden": "true" }),
-          isUserScrolled && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-              },
-              className: cn(
-                "fixed end-4 bottom-24 z-10",
-                "rounded-full p-3 shadow-lg",
-                "bg-white dark:bg-neutral-800",
-                "border border-neutral-200 dark:border-neutral-700",
-                "hover:bg-neutral-50 dark:hover:bg-neutral-700",
-                "focus:ring-primary-500 focus:ring-2 focus:outline-none",
-                "transition-all"
+                    attachment.id
+                  ))
+                }
               ),
-              "aria-label": "Scroll to bottom",
-              children: /* @__PURE__ */ jsx(
-                "svg",
+              /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  "aria-hidden": "true",
-                  className: "h-5 w-5 text-neutral-600 dark:text-neutral-300",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  stroke: "currentColor",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2,
-                      d: "M19 14l-7 7m0 0l-7-7m7 7V3"
-                    }
-                  )
+                  "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
+                      }
+                    )
+                  ]
                 }
               )
-            }
-          )
-        ]
+            ]
+          }
+        )
       }
     );
   }
 );
-MessageList.displayName = "MessageList";
+MessageComposer.displayName = "MessageComposer";
 var headerVariants = cva(
   [
     "flex items-center gap-3 px-4 py-3",
@@ -2470,5 +2471,5 @@ function useReadReceipts(options) {
 }
 
 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-RPG2ZP2T.js.map
-//# sourceMappingURL=chunk-RPG2ZP2T.js.map
+//# sourceMappingURL=chunk-PL6TFCYR.js.map
+//# sourceMappingURL=chunk-PL6TFCYR.js.map