@mieweb/ui 0.6.1 → 0.7.0-dev.178

package/dist/chunk-UM6NA7HL.js

@@ -0,0 +1,1145 @@
+import { useAnchoredPosition } from './chunk-QA6ZDHFP.js';
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React2 from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+import { cva } from 'class-variance-authority';
+
+function getFileType(mimeType) {
+  if (mimeType.startsWith("image/")) return "image";
+  if (mimeType.startsWith("video/")) return "video";
+  if (mimeType.startsWith("audio/")) return "audio";
+  if (mimeType.includes("pdf") || mimeType.includes("document") || mimeType.includes("text")) {
+    return "document";
+  }
+  return "file";
+}
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function validateFile(file, acceptedTypes, maxSize) {
+  if (acceptedTypes && acceptedTypes.length > 0) {
+    const isAccepted = acceptedTypes.some((type) => {
+      if (type.startsWith(".")) {
+        return file.name.toLowerCase().endsWith(type.toLowerCase());
+      }
+      if (type.endsWith("/*")) {
+        return file.type.startsWith(type.replace("/*", "/"));
+      }
+      return file.type === type;
+    });
+    if (!isAccepted) {
+      return { valid: false, error: "File type not supported" };
+    }
+  }
+  if (maxSize && file.size > maxSize) {
+    return {
+      valid: false,
+      error: `File too large (max ${formatFileSize(maxSize)})`
+    };
+  }
+  return { valid: true };
+}
+function generateAttachmentId() {
+  return `attachment-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+function AttachmentPreviewItem({
+  attachment,
+  onRemove,
+  onRetry,
+  className
+}) {
+  const { file, previewUrl, type, state, progress } = attachment;
+  const isImage = type === "image";
+  const isVideo = type === "video";
+  const isUploading = state === "uploading";
+  const isFailed = state === "failed";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group relative overflow-hidden rounded-lg",
+        "bg-neutral-100 dark:bg-neutral-800",
+        "border border-neutral-200 dark:border-neutral-700",
+        isFailed && "border-red-500",
+        className
+      ),
+      children: [
+        (isImage || isVideo) && previewUrl ? /* @__PURE__ */ jsxs("div", { className: "relative h-20 w-20", children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: previewUrl,
+              alt: file.name,
+              className: cn(
+                "h-full w-full object-cover",
+                (isUploading || isFailed) && "opacity-50"
+              )
+            }
+          ),
+          isVideo && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "h-6 w-6 text-white drop-shadow",
+              fill: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
+            }
+          ) })
+        ] }) : (
+          /* File preview */
+          /* @__PURE__ */ jsxs("div", { className: "flex h-20 w-20 flex-col items-center justify-center p-2", children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                "aria-hidden": "true",
+                className: "h-8 w-8 text-neutral-500",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "mt-1 max-w-full truncate px-1 text-xs text-neutral-500", children: file.name.split(".").pop()?.toUpperCase() })
+          ] })
+        ),
+        isUploading && progress !== void 0 && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs("div", { className: "text-center text-white", children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "mx-auto h-6 w-6 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__ */ jsxs("span", { className: "mt-1 text-xs", children: [
+            progress,
+            "%"
+          ] })
+        ] }) }),
+        isFailed && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "mx-auto h-6 w-6 text-red-400",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  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"
+                }
+              )
+            }
+          ),
+          onRetry && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onRetry,
+              className: "mt-1 text-xs text-white underline hover:no-underline",
+              children: "Retry"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRemove,
+            className: cn(
+              "absolute -top-1 -right-1 z-10",
+              "rounded-full p-1",
+              "bg-neutral-900 text-white",
+              "opacity-0 group-hover:opacity-100",
+              "focus:ring-primary-500 focus:opacity-100 focus:ring-2 focus:outline-none",
+              "transition-opacity"
+            ),
+            "aria-label": `Remove ${file.name}`,
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                "aria-hidden": "true",
+                className: "h-3 w-3",
+                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"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute right-0 bottom-0 left-0",
+              "bg-black/70 px-1 py-0.5",
+              "opacity-0 group-hover:opacity-100",
+              "transition-opacity"
+            ),
+            children: /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-white", children: file.name })
+          }
+        )
+      ]
+    }
+  );
+}
+AttachmentPreviewItem.displayName = "AttachmentPreviewItem";
+var AttachmentPicker = React2.forwardRef(
+  ({
+    onFilesSelected,
+    acceptedTypes = ["image/*", "video/*", ".pdf", ".doc", ".docx"],
+    maxFileSize = 25 * 1024 * 1024,
+    // 25MB
+    maxFiles = 10,
+    multiple = true,
+    disabled = false,
+    onError,
+    className,
+    children
+  }, ref) => {
+    const inputRef = React2.useRef(null);
+    React2.useImperativeHandle(ref, () => inputRef.current);
+    const handleClick = () => {
+      inputRef.current?.click();
+    };
+    const handleChange = (event) => {
+      const files = Array.from(event.target.files || []);
+      if (files.length === 0) return;
+      const validFiles = [];
+      for (const file of files.slice(0, maxFiles)) {
+        const validation = validateFile(file, acceptedTypes, maxFileSize);
+        if (validation.valid) {
+          validFiles.push(file);
+        } else if (onError) {
+          onError(`${file.name}: ${validation.error}`);
+        }
+      }
+      if (files.length > maxFiles && onError) {
+        onError(`Maximum ${maxFiles} files allowed`);
+      }
+      if (validFiles.length > 0) {
+        onFilesSelected(validFiles);
+      }
+      event.target.value = "";
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "file",
+          accept: acceptedTypes.join(","),
+          multiple,
+          onChange: handleChange,
+          disabled,
+          className: "sr-only",
+          "aria-label": "Select files to attach"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleClick,
+          disabled,
+          "data-slot": "attachment-picker-button",
+          className: cn(
+            "inline-flex items-center justify-center",
+            "rounded-full p-2",
+            "text-neutral-500 hover:text-neutral-700",
+            "dark:text-neutral-400 dark:hover:text-neutral-200",
+            "hover:bg-neutral-100 dark:hover:bg-neutral-800",
+            "focus:ring-primary-500 focus:ring-2 focus:outline-none",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            "transition-colors",
+            className
+          ),
+          "aria-label": "Attach files",
+          children: children || /* @__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: "M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
+                }
+              )
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+AttachmentPicker.displayName = "AttachmentPicker";
+function DragDropZone({
+  onFilesDropped,
+  acceptedTypes,
+  maxFileSize,
+  maxFiles = 10,
+  disabled = false,
+  onError,
+  children,
+  className
+}) {
+  const [isDragging, setIsDragging] = React2.useState(false);
+  const dragCounterRef = React2.useRef(0);
+  const handleDragEnter = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (disabled) return;
+    dragCounterRef.current++;
+    if (event.dataTransfer.items && event.dataTransfer.items.length > 0) {
+      setIsDragging(true);
+    }
+  };
+  const handleDragLeave = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (disabled) return;
+    dragCounterRef.current--;
+    if (dragCounterRef.current === 0) {
+      setIsDragging(false);
+    }
+  };
+  const handleDragOver = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (disabled) return;
+    setIsDragging(false);
+    dragCounterRef.current = 0;
+    const files = Array.from(event.dataTransfer.files);
+    if (files.length === 0) return;
+    const validFiles = [];
+    for (const file of files.slice(0, maxFiles)) {
+      const validation = validateFile(file, acceptedTypes, maxFileSize);
+      if (validation.valid) {
+        validFiles.push(file);
+      } else if (onError) {
+        onError(`${file.name}: ${validation.error}`);
+      }
+    }
+    if (files.length > maxFiles && onError) {
+      onError(`Maximum ${maxFiles} files allowed`);
+    }
+    if (validFiles.length > 0) {
+      onFilesDropped(validFiles);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      className: cn("relative", className),
+      children: [
+        children,
+        isDragging && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute inset-0 z-50",
+              "flex items-center justify-center",
+              "bg-primary-50/90 dark:bg-primary-900/90",
+              "border-primary-500 border-2 border-dashed",
+              "rounded-lg"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  className: "text-primary-800 mx-auto h-12 w-12",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-primary-700 dark:text-primary-300 mt-2 text-sm font-medium", children: "Drop files here" })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+DragDropZone.displayName = "DragDropZone";
+function CameraButton({
+  onCapture,
+  useFrontCamera = false,
+  disabled = false,
+  className
+}) {
+  const inputRef = React2.useRef(null);
+  const handleClick = () => {
+    inputRef.current?.click();
+  };
+  const handleChange = (event) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      onCapture(file);
+    }
+    event.target.value = "";
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: "image/*",
+        capture: useFrontCamera ? "user" : "environment",
+        onChange: handleChange,
+        disabled,
+        className: "sr-only",
+        "aria-label": "Take a photo"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleClick,
+        disabled,
+        className: cn(
+          "inline-flex items-center justify-center",
+          "rounded-full p-2",
+          "text-neutral-500 hover:text-neutral-700",
+          "dark:text-neutral-400 dark:hover:text-neutral-200",
+          "hover:bg-neutral-100 dark:hover:bg-neutral-800",
+          "focus:ring-primary-500 focus:ring-2 focus:outline-none",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "transition-colors",
+          className
+        ),
+        "aria-label": "Take a photo",
+        children: /* @__PURE__ */ jsxs(
+          "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: "M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M15 13a3 3 0 11-6 0 3 3 0 016 0z"
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+CameraButton.displayName = "CameraButton";
+function activeMentionQuery(value, caret) {
+  const upToCaret = value.slice(0, caret);
+  const match = /(^|\s)@([^\s@]*)$/.exec(upToCaret);
+  if (!match) return null;
+  const query = match[2];
+  return { query, start: caret - query.length - 1 };
+}
+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"
+  ],
+  {
+    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 = React2.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 = React2.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 = React2.useRef(null);
+    const [internalContent, setInternalContent] = React2.useState("");
+    const isControlled = controlledValue !== void 0;
+    const content = isControlled ? controlledValue : internalContent;
+    const setContent = React2.useCallback(
+      (val) => {
+        if (isControlled) {
+          const newVal = typeof val === "function" ? val(controlledValue) : val;
+          onValueChange?.(newVal);
+        } else {
+          setInternalContent(val);
+        }
+      },
+      [isControlled, controlledValue, onValueChange]
+    );
+    const [attachments, setAttachments] = React2.useState(
+      []
+    );
+    const [isTyping, setIsTyping] = React2.useState(false);
+    const typingTimeoutRef = React2.useRef(null);
+    React2.useImperativeHandle(ref, () => textareaRef.current);
+    React2.useEffect(() => {
+      const textarea = textareaRef.current;
+      if (textarea) {
+        textarea.style.height = "auto";
+        textarea.style.height = `${Math.min(textarea.scrollHeight, 150)}px`;
+      }
+    }, [content]);
+    React2.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]);
+    React2.useEffect(() => {
+      if (autoFocus) {
+        textareaRef.current?.focus();
+      }
+    }, [autoFocus]);
+    React2.useEffect(() => {
+      if (replyTo) {
+        textareaRef.current?.focus();
+      }
+    }, [replyTo]);
+    const mentionsEnabled = !!mentionOptions && mentionOptions.length > 0;
+    const [mention, setMention] = React2.useState(null);
+    const [mentionHighlight, setMentionHighlight] = React2.useState(0);
+    const mentionListId = React2.useId();
+    const mentionOptionId = (i) => `${mentionListId}-option-${i}`;
+    const mentionSuggestions = React2.useMemo(() => {
+      if (!mention || !mentionOptions) return [];
+      const q = mention.query.toLowerCase();
+      return mentionOptions.filter((o) => o.label.toLowerCase().includes(q));
+    }, [mention, mentionOptions]);
+    const mentionMenuOpen = mentionsEnabled && mention !== null && mentionSuggestions.length > 0;
+    const {
+      anchorRef: mentionAnchorRef,
+      floatingRef: mentionFloatingRef,
+      style: mentionStyle
+    } = useAnchoredPosition({
+      open: mentionMenuOpen,
+      placement: "top-start",
+      maxHeight: 224
+    });
+    const clampedMentionHighlight = mentionMenuOpen ? Math.min(mentionHighlight, mentionSuggestions.length - 1) : -1;
+    const activeMentionOptionId = mentionMenuOpen ? mentionOptionId(clampedMentionHighlight) : void 0;
+    const syncMention = React2.useCallback(
+      (value, caret) => {
+        if (!mentionsEnabled) return;
+        setMention(activeMentionQuery(value, caret));
+        setMentionHighlight(0);
+      },
+      [mentionsEnabled]
+    );
+    const insertMention = (option) => {
+      if (!mention) return;
+      const insertValue = option.value ?? option.label.split(" ")[0];
+      const before = content.slice(0, mention.start);
+      const after = content.slice(mention.start + 1 + mention.query.length);
+      const insert = `@${insertValue} `;
+      setContent(before + insert + after);
+      setMention(null);
+      const caret = before.length + insert.length;
+      requestAnimationFrame(() => {
+        const el = textareaRef.current;
+        if (el) {
+          el.focus();
+          el.setSelectionRange(caret, caret);
+        }
+      });
+    };
+    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 (mentionMenuOpen) {
+        if (event.key === "ArrowDown") {
+          event.preventDefault();
+          setMentionHighlight((h) => (h + 1) % mentionSuggestions.length);
+          return;
+        }
+        if (event.key === "ArrowUp") {
+          event.preventDefault();
+          setMentionHighlight(
+            (h) => (h - 1 + mentionSuggestions.length) % mentionSuggestions.length
+          );
+          return;
+        }
+        if (event.key === "Enter" || event.key === "Tab") {
+          event.preventDefault();
+          const chosen = mentionSuggestions[mentionHighlight] ?? mentionSuggestions[0];
+          if (chosen) insertMention(chosen);
+          return;
+        }
+        if (event.key === "Escape") {
+          event.preventDefault();
+          setMention(null);
+          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);
+      });
+    };
+    React2.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-l-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: mentionAnchorRef,
+                        children: [
+                          mentionMenuOpen && createPortal(
+                            /* @__PURE__ */ jsx(
+                              "ul",
+                              {
+                                ref: mentionFloatingRef,
+                                style: mentionStyle,
+                                id: mentionListId,
+                                role: "listbox",
+                                "aria-label": "Mention",
+                                "data-slot": "composer-mention-list",
+                                className: "w-64 overflow-y-auto rounded-lg border border-neutral-200 bg-white py-1 shadow-lg dark:border-neutral-700 dark:bg-neutral-800",
+                                children: mentionSuggestions.map((option, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    id: mentionOptionId(i),
+                                    role: "option",
+                                    "aria-selected": i === clampedMentionHighlight,
+                                    onMouseDown: (e) => {
+                                      e.preventDefault();
+                                      insertMention(option);
+                                    },
+                                    onMouseEnter: () => setMentionHighlight(i),
+                                    className: cn(
+                                      "flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm",
+                                      i === clampedMentionHighlight ? "bg-primary-100 text-primary-900 dark:bg-primary-900/40 dark:text-primary-100" : "text-neutral-700 dark:text-neutral-200"
+                                    ),
+                                    children: [
+                                      option.icon,
+                                      /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate", children: [
+                                        /* @__PURE__ */ jsx("span", { className: "font-medium", children: option.label }),
+                                        option.description && /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs text-neutral-400", children: option.description })
+                                      ] }),
+                                      option.meta && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: option.meta })
+                                    ]
+                                  }
+                                ) }, option.id))
+                              }
+                            ),
+                            document.body
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "textarea",
+                            {
+                              ref: textareaRef,
+                              "data-slot": "composer-input",
+                              value: content,
+                              onChange: (e) => {
+                                setContent(e.target.value);
+                                syncMention(
+                                  e.target.value,
+                                  e.target.selectionStart ?? e.target.value.length
+                                );
+                              },
+                              onClick: (e) => {
+                                const el = e.currentTarget;
+                                syncMention(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 ? "pr-10 pl-4" : "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,
+                              ...mentionsEnabled ? {
+                                "aria-controls": mentionMenuOpen ? mentionListId : void 0,
+                                "aria-activedescendant": activeMentionOptionId,
+                                "aria-autocomplete": "list"
+                              } : {}
+                            }
+                          ),
+                          inputTrailing && /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              "data-slot": "composer-input-trailing",
+                              className: "pointer-events-none absolute top-0 right-1 flex h-[44px] items-center [&>*]:pointer-events-auto",
+                              children: inputTrailing
+                            }
+                          ),
+                          showCharacterCount && /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              "data-slot": "composer-char-count",
+                              id: "char-count",
+                              className: "absolute right-3 bottom-1.5",
+                              children: /* @__PURE__ */ jsx(CharacterCounter, { current: content.length, max: maxLength })
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      SendButton,
+                      {
+                        canSend,
+                        isLoading: isSending,
+                        disabled
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+MessageComposer.displayName = "MessageComposer";
+
+export { AttachmentPicker, AttachmentPreviewItem, CameraButton, CharacterCounter, DragDropZone, MessageComposer, SendButton, generateAttachmentId, getFileType, sendButtonVariants, validateFile };
+//# sourceMappingURL=chunk-UM6NA7HL.js.map
+//# sourceMappingURL=chunk-UM6NA7HL.js.map