@mieweb/ui 0.6.1 → 0.7.0-dev.178

package/dist/chunk-JHYFHEHS.js

@@ -0,0 +1,1967 @@
+import { DragDropZone, MessageComposer } from './chunk-UM6NA7HL.js';
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React5 from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+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"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function ReadReceiptIndicator({
+  receipts,
+  maxAvatars = 3,
+  size = "xs",
+  className
+}) {
+  if (receipts.length === 0) return null;
+  const visibleReceipts = receipts.slice(0, maxAvatars);
+  const remainingCount = receipts.length - maxAvatars;
+  const sizeClasses = {
+    xs: "h-4 w-4 text-[8px]",
+    sm: "h-5 w-5 text-[10px]"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center -space-x-1", className),
+      "aria-label": `Read by ${receipts.map((r) => r.participant.name).join(", ")}`,
+      children: [
+        visibleReceipts.map((receipt) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "rounded-full ring-2 ring-white dark:ring-neutral-900",
+              "bg-primary-800 font-medium text-white",
+              "flex items-center justify-center",
+              sizeClasses[size]
+            ),
+            title: `Read by ${receipt.participant.name}`,
+            children: receipt.participant.avatarUrl ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: receipt.participant.avatarUrl,
+                alt: receipt.participant.name,
+                className: "h-full w-full rounded-full object-cover"
+              }
+            ) : receipt.participant.name.charAt(0).toUpperCase()
+          },
+          receipt.participant.id
+        )),
+        remainingCount > 0 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "rounded-full ring-2 ring-white dark:ring-neutral-900",
+              "bg-neutral-500 font-medium text-white",
+              "flex items-center justify-center",
+              sizeClasses[size]
+            ),
+            children: [
+              "+",
+              remainingCount
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function AttachmentPreview({
+  attachment,
+  onClick,
+  className
+}) {
+  const isImage = attachment.type === "image";
+  const isVideo = attachment.type === "video";
+  if (isImage || isVideo) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick,
+        className: cn(
+          "relative block overflow-hidden rounded-lg",
+          "focus:ring-primary-500 focus:ring-2 focus:outline-none",
+          "transition-transform hover:scale-[1.02]",
+          className
+        ),
+        "aria-label": `View ${attachment.alt || attachment.filename}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: attachment.thumbnailUrl || attachment.url,
+              alt: attachment.alt || attachment.filename,
+              className: "max-h-64 w-auto rounded-lg object-cover",
+              loading: "lazy"
+            }
+          ),
+          isVideo && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30", children: /* @__PURE__ */ jsx("div", { className: "rounded-full bg-white/90 p-3", children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "h-6 w-6 text-neutral-900",
+              fill: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
+            }
+          ) }) }),
+          attachment.state === "uploading" && attachment.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-8 w-8 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-sm", children: [
+              attachment.progress,
+              "%"
+            ] })
+          ] }) }),
+          attachment.state === "failed" && /* @__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__ */ jsx(
+              "svg",
+              {
+                "aria-hidden": "true",
+                className: "mx-auto h-8 w-8 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"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "mt-1 text-sm", children: "Upload failed" })
+          ] }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "flex items-center gap-3 rounded-lg p-3",
+        "bg-white/10 hover:bg-white/20",
+        "transition-colors",
+        "focus:ring-primary-500 focus:ring-2 focus:outline-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-white/20 p-2", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            className: "h-6 w-6",
+            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__ */ jsxs("div", { className: "min-w-0 flex-1 text-left", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: attachment.filename }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs opacity-70", children: formatFileSize(attachment.size) })
+        ] })
+      ]
+    }
+  );
+}
+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`;
+}
+var bubbleVariants = cva(
+  [
+    "relative max-w-[85%] sm:max-w-[70%]",
+    "rounded-2xl px-4 py-2",
+    "transition-all duration-200"
+  ],
+  {
+    variants: {
+      variant: {
+        outgoing: ["bg-primary-800 text-white", "rounded-br-md", "ml-auto"],
+        incoming: [
+          "bg-neutral-100 text-neutral-900",
+          "dark:bg-neutral-800 dark:text-neutral-100",
+          "rounded-bl-md",
+          "mr-auto"
+        ],
+        system: [
+          "mx-auto max-w-none",
+          "bg-transparent text-muted-foreground",
+          "text-center text-sm",
+          "py-1 px-2"
+        ]
+      },
+      status: {
+        sending: "",
+        sent: "",
+        delivered: "",
+        read: "",
+        failed: "ring-2 ring-red-500/50"
+      }
+    },
+    defaultVariants: {
+      variant: "incoming",
+      status: "sent"
+    }
+  }
+);
+function defaultFormatTimestamp(timestamp) {
+  const date = typeof timestamp === "string" ? new Date(timestamp) : timestamp;
+  return date.toLocaleTimeString(void 0, {
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+var MessageBubble = React5.forwardRef(
+  ({
+    className,
+    message,
+    showAvatar = false,
+    showSenderName = false,
+    showTimestamp = true,
+    showStatus = true,
+    showReadReceipts = true,
+    onRetry,
+    onAttachmentClick,
+    isOutgoing,
+    formatTimestamp = defaultFormatTimestamp,
+    ...props
+  }, ref) => {
+    const isSystem = message.type === "system";
+    const variant = isSystem ? "system" : isOutgoing ? "outgoing" : "incoming";
+    const hasAttachments = message.attachments && message.attachments.length > 0;
+    const hasText = message.content && message.content.trim().length > 0;
+    const isFailed = message.status === "failed";
+    if (isSystem) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          "data-slot": "message-system",
+          className: cn(bubbleVariants({ variant: "system" }), className),
+          role: "status",
+          "aria-live": "polite",
+          ...props,
+          children: message.content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "message-bubble",
+        className: cn(
+          "group flex items-end gap-2",
+          isOutgoing ? "flex-row-reverse" : "flex-row",
+          className
+        ),
+        ...props,
+        children: [
+          showAvatar && !isOutgoing && /* @__PURE__ */ jsx("div", { "data-slot": "message-avatar", className: "mb-1 shrink-0", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex h-8 w-8 items-center justify-center rounded-full",
+                "bg-primary-800 text-sm font-medium text-white"
+              ),
+              children: message.sender.avatarUrl ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: message.sender.avatarUrl,
+                  alt: message.sender.name,
+                  className: "h-full w-full rounded-full object-cover"
+                }
+              ) : message.sender.name.charAt(0).toUpperCase()
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex min-w-0 flex-1 flex-col",
+                isOutgoing ? "items-end" : "items-start"
+              ),
+              children: [
+                showSenderName && !isOutgoing && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-slot": "message-sender-name",
+                    className: "text-muted-foreground mb-1 px-1 text-xs font-medium",
+                    children: message.sender.name
+                  }
+                ),
+                message.replyTo && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "data-slot": "message-reply-preview",
+                    className: cn(
+                      "mb-1 max-w-full rounded-lg px-3 py-1.5 text-xs",
+                      isOutgoing ? "bg-primary-700/50 text-white/80" : "bg-neutral-200 text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "font-medium", children: message.replyTo.sender.name }),
+                      /* @__PURE__ */ jsx("p", { className: "truncate", children: message.replyTo.content })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "data-slot": "message-bubble-content",
+                    className: cn(bubbleVariants({ variant, status: message.status })),
+                    role: "article",
+                    "aria-label": `Message from ${message.sender.name}`,
+                    children: [
+                      hasAttachments && /* @__PURE__ */ jsx("div", { className: cn("space-y-2", hasText && "mb-2"), children: message.attachments.map((attachment) => /* @__PURE__ */ jsx(
+                        AttachmentPreview,
+                        {
+                          attachment,
+                          onClick: () => onAttachmentClick?.(attachment)
+                        },
+                        attachment.id
+                      )) }),
+                      hasText && /* @__PURE__ */ jsx("p", { className: "break-words whitespace-pre-wrap", children: message.isDeleted ? /* @__PURE__ */ jsx("span", { className: "italic opacity-60", children: "This message was deleted" }) : message.content }),
+                      message.isEdited && !message.isDeleted && /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs opacity-60", children: "(edited)" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "data-slot": "message-footer",
+                    className: cn(
+                      "mt-1 flex items-center gap-2 px-1",
+                      isOutgoing ? "flex-row-reverse" : "flex-row"
+                    ),
+                    children: [
+                      showTimestamp && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: formatTimestamp(message.timestamp) }),
+                      showStatus && isOutgoing && /* @__PURE__ */ jsx(MessageStatusIcon, { status: message.status }),
+                      showReadReceipts && isOutgoing && message.readReceipts && message.readReceipts.length > 0 && /* @__PURE__ */ jsx(ReadReceiptIndicator, { receipts: message.readReceipts }),
+                      isFailed && onRetry && /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: onRetry,
+                          className: cn(
+                            "flex items-center gap-1 rounded px-2 py-0.5",
+                            "text-xs font-medium text-red-700 dark:text-red-400",
+                            "hover:bg-red-50 dark:hover:bg-red-900/20",
+                            "focus:ring-2 focus:ring-red-500 focus:outline-none"
+                          ),
+                          "aria-label": "Retry sending message",
+                          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: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                                  }
+                                )
+                              }
+                            ),
+                            "Retry"
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                message.reactions && message.reactions.length > 0 && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-slot": "message-reactions",
+                    className: cn(
+                      "-mt-1 flex flex-wrap gap-1",
+                      isOutgoing ? "justify-end" : "justify-start"
+                    ),
+                    children: message.reactions.map((reaction) => /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "inline-flex items-center gap-1 rounded-full px-2 py-0.5",
+                          "bg-neutral-100 text-xs dark:bg-neutral-800",
+                          "border border-neutral-200 dark:border-neutral-700"
+                        ),
+                        title: reaction.participants.map((p) => p.name).join(", "),
+                        children: [
+                          /* @__PURE__ */ jsx("span", { children: reaction.emoji }),
+                          reaction.count > 1 && /* @__PURE__ */ jsx("span", { className: "text-neutral-500", children: reaction.count })
+                        ]
+                      },
+                      reaction.emoji
+                    ))
+                  }
+                )
+              ]
+            }
+          ),
+          showAvatar && isOutgoing && /* @__PURE__ */ jsx("div", { className: "w-8 shrink-0" })
+        ]
+      }
+    );
+  }
+);
+MessageBubble.displayName = "MessageBubble";
+function groupMessagesByDate(messages) {
+  const groups = /* @__PURE__ */ new Map();
+  messages.forEach((message) => {
+    const date = new Date(message.timestamp);
+    const dateKey = date.toDateString();
+    const existing = groups.get(dateKey) || [];
+    groups.set(dateKey, [...existing, message]);
+  });
+  return Array.from(groups.entries()).map(([dateKey, msgs]) => ({
+    date: dateKey,
+    label: formatDateLabel(new Date(dateKey)),
+    messages: msgs
+  }));
+}
+function formatDateLabel(date) {
+  const now = /* @__PURE__ */ new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  const messageDate = new Date(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate()
+  );
+  if (messageDate.getTime() === today.getTime()) {
+    return "Today";
+  }
+  if (messageDate.getTime() === yesterday.getTime()) {
+    return "Yesterday";
+  }
+  if (date.getFullYear() === now.getFullYear()) {
+    return date.toLocaleDateString(void 0, {
+      weekday: "long",
+      month: "long",
+      day: "numeric"
+    });
+  }
+  return date.toLocaleDateString(void 0, {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function isSameSenderGroup(prev, current, thresholdMinutes = 5) {
+  if (!prev) return false;
+  if (prev.sender.id !== current.sender.id) return false;
+  if (prev.type === "system" || current.type === "system") return false;
+  const prevTime = new Date(prev.timestamp).getTime();
+  const currentTime = new Date(current.timestamp).getTime();
+  const diffMinutes = (currentTime - prevTime) / (1e3 * 60);
+  return diffMinutes < thresholdMinutes;
+}
+function SkeletonMessage({
+  isOutgoing = false,
+  showAvatar = true,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "skeleton-message",
+      className: cn(
+        "flex items-end gap-2",
+        isOutgoing ? "flex-row-reverse" : "flex-row",
+        className
+      ),
+      "aria-hidden": "true",
+      children: [
+        showAvatar && !isOutgoing && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "skeleton-avatar",
+            className: "h-8 w-8 animate-pulse rounded-full bg-neutral-200 dark:bg-neutral-700"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "skeleton-bubble",
+            className: cn(
+              "animate-pulse rounded-2xl",
+              isOutgoing ? "bg-primary-800/30 rounded-br-md" : "rounded-bl-md bg-neutral-200 dark:bg-neutral-700",
+              "h-10 w-48"
+            )
+          }
+        ),
+        showAvatar && isOutgoing && /* @__PURE__ */ jsx("div", { "data-slot": "skeleton-spacer", className: "w-8" })
+      ]
+    }
+  );
+}
+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-bl-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": "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 = React5.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 = React5.useRef(null);
+    const bottomRef = React5.useRef(null);
+    const [isUserScrolled, setIsUserScrolled] = React5.useState(false);
+    const prevMessageCountRef = React5.useRef(messages.length);
+    React5.useImperativeHandle(ref, () => scrollContainerRef.current);
+    const handleScroll = React5.useCallback(() => {
+      const container = scrollContainerRef.current;
+      if (!container) return;
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      const isAtBottom = scrollHeight - scrollTop - clientHeight < 100;
+      setIsUserScrolled(!isAtBottom);
+    }, []);
+    React5.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]);
+    React5.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(
+            "div",
+            {
+              "data-slot": "message-list-content",
+              className: "flex flex-col gap-1 p-4",
+              children: messageGroups.map((group) => /* @__PURE__ */ jsxs(React5.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))
+            }
+          ),
+          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 right-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"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+MessageList.displayName = "MessageList";
+var headerVariants = cva(
+  [
+    "flex items-center gap-3 px-4 py-3",
+    "bg-white dark:bg-neutral-900",
+    "border-b border-neutral-200 dark:border-neutral-700"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "py-2",
+        md: "py-3",
+        lg: "py-4"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function getConversationTitle(conversation, participant) {
+  if (conversation?.name) return conversation.name;
+  if (participant?.name) return participant.name;
+  if (conversation?.participants && conversation.participants.length > 0) {
+    const names = conversation.participants.filter((p) => !p.isCurrentUser).map((p) => p.name);
+    if (names.length <= 2) return names.join(" & ");
+    return `${names[0]} and ${names.length - 1} others`;
+  }
+  return "Conversation";
+}
+function getConversationSubtitle(conversation, participant, showOnlineStatus) {
+  if (participant) {
+    if (showOnlineStatus && participant.isOnline) {
+      return "Online";
+    }
+    if (participant.lastSeen) {
+      const lastSeen = new Date(participant.lastSeen);
+      return `Last seen ${formatLastSeen(lastSeen)}`;
+    }
+    if (participant.phoneNumber) {
+      return participant.phoneNumber;
+    }
+  }
+  if (conversation?.type === "group" && conversation.participants) {
+    return `${conversation.participants.length} participants`;
+  }
+  return void 0;
+}
+function formatLastSeen(date) {
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / (1e3 * 60));
+  const diffHours = Math.floor(diffMs / (1e3 * 60 * 60));
+  const diffDays = Math.floor(diffMs / (1e3 * 60 * 60 * 24));
+  if (diffMins < 1) return "just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+}
+var ConversationHeader = React5.forwardRef(
+  ({
+    className,
+    size,
+    conversation,
+    title,
+    subtitle,
+    avatarUrl,
+    participant,
+    showOnlineStatus = true,
+    showBackButton = false,
+    onBack,
+    actions,
+    leftContent,
+    rightContent,
+    ...props
+  }, ref) => {
+    const displayTitle = title || getConversationTitle(conversation, participant);
+    const displaySubtitle = subtitle || getConversationSubtitle(conversation, participant, showOnlineStatus);
+    const displayAvatar = avatarUrl || conversation?.avatarUrl || participant?.avatarUrl;
+    const isOnline = participant?.isOnline;
+    return /* @__PURE__ */ jsxs(
+      "header",
+      {
+        ref,
+        "data-slot": "conversation-header",
+        className: cn(headerVariants({ size }), className),
+        ...props,
+        children: [
+          leftContent || showBackButton && onBack && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onBack,
+              className: cn(
+                "-ml-2 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",
+                "transition-colors"
+              ),
+              "aria-label": "Go back",
+              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 19l-7-7 7-7"
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "conversation-header-avatar",
+              className: "relative shrink-0",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "flex h-10 w-10 items-center justify-center rounded-full",
+                      "bg-primary-800 font-medium text-white"
+                    ),
+                    children: displayAvatar ? /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: displayAvatar,
+                        alt: displayTitle,
+                        className: "h-full w-full rounded-full object-cover"
+                      }
+                    ) : displayTitle.charAt(0).toUpperCase()
+                  }
+                ),
+                showOnlineStatus && isOnline && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "absolute right-0 bottom-0",
+                      "h-3 w-3 rounded-full",
+                      "bg-green-500 ring-2 ring-white dark:ring-neutral-900"
+                    ),
+                    role: "status",
+                    "aria-label": "Online"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { "data-slot": "conversation-header-info", className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("h2", { className: "truncate font-semibold text-neutral-900 dark:text-neutral-100", children: displayTitle }),
+            displaySubtitle && /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "truncate text-sm",
+                  isOnline ? "text-green-700 dark:text-green-400" : "text-muted-foreground"
+                ),
+                children: displaySubtitle
+              }
+            )
+          ] }),
+          rightContent || actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })
+        ]
+      }
+    );
+  }
+);
+ConversationHeader.displayName = "ConversationHeader";
+var ConversationListItem = React5.forwardRef(({ className, conversation, isSelected, onSelect, ...props }, ref) => {
+  const participant = conversation.participants.find((p) => !p.isCurrentUser);
+  const title = getConversationTitle(conversation, participant);
+  const avatarUrl = conversation.avatarUrl || participant?.avatarUrl;
+  const lastMessage = conversation.lastMessage;
+  const isUnread = conversation.unreadCount > 0;
+  const formatTime = (timestamp) => {
+    const date = new Date(timestamp);
+    const now = /* @__PURE__ */ new Date();
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const messageDate = new Date(
+      date.getFullYear(),
+      date.getMonth(),
+      date.getDate()
+    );
+    if (messageDate.getTime() === today.getTime()) {
+      return date.toLocaleTimeString(void 0, {
+        hour: "numeric",
+        minute: "2-digit"
+      });
+    }
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
+    if (messageDate.getTime() === yesterday.getTime()) {
+      return "Yesterday";
+    }
+    return date.toLocaleDateString(void 0, {
+      month: "short",
+      day: "numeric"
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      onClick: () => onSelect?.(conversation),
+      "data-slot": "conversation-list-item",
+      className: cn(
+        "flex w-full items-center gap-3 px-4 py-3",
+        "text-left transition-colors",
+        isSelected ? "bg-primary-50 dark:bg-primary-900/20" : "hover:bg-neutral-50 dark:hover:bg-neutral-800/50",
+        "focus:bg-neutral-50 focus:outline-none dark:focus:bg-neutral-800/50",
+        className
+      ),
+      "aria-current": isSelected ? "true" : void 0,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "conversation-list-item-avatar",
+            className: "relative shrink-0",
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex h-12 w-12 items-center justify-center rounded-full",
+                    "bg-primary-800 font-medium text-white"
+                  ),
+                  children: avatarUrl ? /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: avatarUrl,
+                      alt: title,
+                      className: "h-full w-full rounded-full object-cover"
+                    }
+                  ) : title.charAt(0).toUpperCase()
+                }
+              ),
+              participant?.isOnline && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "absolute right-0 bottom-0",
+                    "h-3 w-3 rounded-full",
+                    "bg-green-500 ring-2 ring-white dark:ring-neutral-900"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "conversation-list-item-content",
+            className: "min-w-0 flex-1",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    className: cn(
+                      "truncate text-sm",
+                      isUnread ? "font-semibold text-neutral-900 dark:text-neutral-100" : "font-medium text-neutral-700 dark:text-neutral-300"
+                    ),
+                    children: title
+                  }
+                ),
+                lastMessage && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-neutral-600 dark:text-neutral-400", children: formatTime(lastMessage.timestamp) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "truncate text-sm",
+                      isUnread ? "text-neutral-700 dark:text-neutral-300" : "text-neutral-600 dark:text-neutral-400"
+                    ),
+                    children: lastMessage?.content || "No messages yet"
+                  }
+                ),
+                isUnread && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-slot": "conversation-list-item-badge",
+                    className: cn(
+                      "flex shrink-0 items-center justify-center",
+                      "h-5 min-w-[20px] rounded-full px-1.5",
+                      "bg-primary-800 text-xs font-medium text-white"
+                    ),
+                    children: conversation.unreadCount > 99 ? "99+" : conversation.unreadCount
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-center gap-1", children: [
+          conversation.isPinned && /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "text-primary-800 h-4 w-4",
+              fill: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx("path", { d: "M16 4v8l2 2v2h-6v6l-1 1-1-1v-6H4v-2l2-2V4c0-1.1.9-2 2-2h6c1.1 0 2 .9 2 2z" })
+            }
+          ),
+          conversation.isMuted && /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "h-4 w-4 text-neutral-500",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2"
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+ConversationListItem.displayName = "ConversationListItem";
+function ConversationListSkeleton({
+  count = 5,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "divide-y divide-neutral-200 dark:divide-neutral-700",
+        className
+      ),
+      children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center gap-3 px-4 py-3",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "h-12 w-12 animate-pulse rounded-full bg-neutral-200 dark:bg-neutral-700" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-4 w-32 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700" }),
+              /* @__PURE__ */ jsx("div", { className: "h-3 w-48 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700" })
+            ] })
+          ]
+        },
+        i
+      ))
+    }
+  );
+}
+ConversationListSkeleton.displayName = "ConversationListSkeleton";
+function LightboxModal({ attachment, onClose }) {
+  React5.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    if (attachment) {
+      document.addEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+    };
+  }, [attachment, onClose]);
+  if (!attachment) return null;
+  const isImage = attachment.type === "image";
+  const isVideo = attachment.type === "video";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "message-lightbox",
+      className: cn("fixed inset-0 z-50", "flex items-center justify-center"),
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": `View ${attachment.filename}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "absolute inset-0 cursor-default bg-black/90",
+            onClick: onClose,
+            "aria-label": "Close lightbox"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: cn(
+              "absolute top-4 right-4 z-10",
+              "rounded-full p-2",
+              "bg-white/10 text-white",
+              "hover:bg-white/20",
+              "focus:ring-2 focus:ring-white focus:outline-none",
+              "transition-colors"
+            ),
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                "aria-hidden": "true",
+                className: "h-6 w-6",
+                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__ */ jsxs("div", { className: "relative z-10 max-h-[90vh] max-w-[90vw]", children: [
+          isImage && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: attachment.url,
+              alt: attachment.alt || attachment.filename,
+              className: "max-h-[90vh] max-w-[90vw] object-contain"
+            }
+          ),
+          isVideo && /* @__PURE__ */ jsx(
+            "video",
+            {
+              src: attachment.url,
+              controls: true,
+              autoPlay: true,
+              className: "max-h-[90vh] max-w-[90vw]",
+              children: /* @__PURE__ */ jsx("track", { kind: "captions" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx("p", { className: "rounded-full bg-black/50 px-4 py-2 text-sm text-white", children: attachment.filename }) })
+      ]
+    }
+  );
+}
+LightboxModal.displayName = "LightboxModal";
+var MessageThread = React5.forwardRef(
+  ({
+    conversation,
+    messages,
+    currentUser,
+    typingState,
+    isLoading = false,
+    hasMore = false,
+    isLoadingMore = false,
+    isSending = false,
+    eventHandlers = {},
+    showHeader = true,
+    showBackButton = false,
+    onBack,
+    headerActions,
+    placeholder = "Type a message...",
+    maxMessageLength = 1600,
+    showCharacterCount = false,
+    showAttachmentPicker = true,
+    showCameraButton = false,
+    acceptedFileTypes,
+    maxFileSize,
+    maxAttachments,
+    showAvatars = true,
+    showSenderNames = false,
+    groupByDate = true,
+    emptyState,
+    formatTimestamp,
+    onError,
+    className
+  }, ref) => {
+    const [lightboxAttachment, setLightboxAttachment] = React5.useState(null);
+    const [replyTo, setReplyTo] = React5.useState(null);
+    const participant = conversation?.type === "direct" ? conversation.participants.find((p) => p.id !== currentUser.id) : void 0;
+    const handleAttachmentClick = (attachment, message) => {
+      if (attachment.type === "image" || attachment.type === "video") {
+        setLightboxAttachment(attachment);
+      }
+      eventHandlers.onAttachmentClick?.(attachment, message);
+    };
+    const handleSendMessage = async (newMessage) => {
+      const messageWithReply = {
+        ...newMessage,
+        replyToId: replyTo?.id || newMessage.replyToId
+      };
+      setReplyTo(null);
+      await eventHandlers.onSendMessage?.(messageWithReply);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "message-thread",
+        className: cn(
+          "flex h-full flex-col",
+          "bg-white dark:bg-neutral-900",
+          className
+        ),
+        children: [
+          showHeader && /* @__PURE__ */ jsx(
+            ConversationHeader,
+            {
+              conversation,
+              participant,
+              showBackButton,
+              onBack,
+              actions: headerActions
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DragDropZone,
+            {
+              onFilesDropped: () => {
+                onError?.("Drop files on the composer to attach them");
+              },
+              disabled: !showAttachmentPicker,
+              className: "flex-1 overflow-hidden",
+              children: /* @__PURE__ */ jsx(
+                MessageList,
+                {
+                  messages,
+                  currentUser,
+                  isLoading,
+                  hasMore,
+                  isLoadingMore,
+                  typingState,
+                  showAvatars,
+                  showSenderNames,
+                  groupByDate,
+                  onLoadMore: eventHandlers.onLoadMore,
+                  onRetryMessage: eventHandlers.onRetryMessage,
+                  onAttachmentClick: handleAttachmentClick,
+                  emptyState,
+                  formatTimestamp,
+                  className: "h-full"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MessageComposer,
+            {
+              onSend: handleSendMessage,
+              onTypingStart: eventHandlers.onTypingStart,
+              onTypingStop: eventHandlers.onTypingStop,
+              placeholder,
+              maxLength: maxMessageLength,
+              showCharacterCount,
+              isSending,
+              showAttachmentPicker,
+              showCameraButton,
+              acceptedFileTypes,
+              maxFileSize,
+              maxAttachments,
+              onError,
+              replyTo,
+              onCancelReply: () => setReplyTo(null)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            LightboxModal,
+            {
+              attachment: lightboxAttachment,
+              onClose: () => setLightboxAttachment(null)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+MessageThread.displayName = "MessageThread";
+function MessagingSplitView({
+  conversationList,
+  messageThread,
+  hasSelectedConversation = false,
+  listWidth = 320,
+  mobileBreakpoint = "md",
+  className
+}) {
+  const breakpointClasses = {
+    sm: "sm:flex",
+    md: "md:flex",
+    lg: "lg:flex"
+  };
+  const hideMobileClasses = {
+    sm: hasSelectedConversation ? "hidden sm:block" : "block sm:block",
+    md: hasSelectedConversation ? "hidden md:block" : "block md:block",
+    lg: hasSelectedConversation ? "hidden lg:block" : "block lg:block"
+  };
+  const showMobileClasses = {
+    sm: hasSelectedConversation ? "block sm:block" : "hidden sm:block",
+    md: hasSelectedConversation ? "block md:block" : "hidden md:block",
+    lg: hasSelectedConversation ? "block lg:block" : "hidden lg:block"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "messaging-split-view",
+      className: cn(
+        "h-full w-full",
+        breakpointClasses[mobileBreakpoint],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "messaging-list-pane",
+            className: cn(
+              "h-full w-full flex-shrink-0",
+              "border-r border-neutral-200 dark:border-neutral-700",
+              hideMobileClasses[mobileBreakpoint]
+            ),
+            style: {
+              width: typeof listWidth === "number" ? `${listWidth}px` : listWidth
+            },
+            children: conversationList
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "messaging-thread-pane",
+            className: cn(
+              "h-full min-w-0 flex-1",
+              showMobileClasses[mobileBreakpoint]
+            ),
+            children: messageThread
+          }
+        )
+      ]
+    }
+  );
+}
+MessagingSplitView.displayName = "MessagingSplitView";
+function useMessages(options) {
+  const {
+    initialMessages = [],
+    currentUser,
+    onSend,
+    onRetry,
+    onLoadMore
+  } = options;
+  const [messages, setMessages] = React5.useState(initialMessages);
+  const [isSending, setIsSending] = React5.useState(false);
+  const [isLoadingMore, setIsLoadingMore] = React5.useState(false);
+  React5.useEffect(() => {
+    setMessages(initialMessages);
+  }, [initialMessages]);
+  const addMessage = React5.useCallback((message) => {
+    setMessages((prev) => {
+      if (prev.some((m) => m.id === message.id)) {
+        return prev;
+      }
+      return [...prev, message];
+    });
+  }, []);
+  const updateMessage = React5.useCallback(
+    (messageId, updates) => {
+      setMessages(
+        (prev) => prev.map((m) => m.id === messageId ? { ...m, ...updates } : m)
+      );
+    },
+    []
+  );
+  const removeMessage = React5.useCallback((messageId) => {
+    setMessages((prev) => prev.filter((m) => m.id !== messageId));
+  }, []);
+  const updateStatus = React5.useCallback(
+    (messageId, status) => {
+      updateMessage(messageId, { status });
+    },
+    [updateMessage]
+  );
+  const markAsRead = React5.useCallback(
+    (messageId) => {
+      updateStatus(messageId, "read");
+    },
+    [updateStatus]
+  );
+  const sendMessage = React5.useCallback(
+    async (newMessage) => {
+      const optimisticId = `optimistic-${Date.now()}`;
+      const optimisticMessage = {
+        id: optimisticId,
+        type: "text",
+        content: newMessage.content,
+        sender: currentUser,
+        timestamp: /* @__PURE__ */ new Date(),
+        status: "sending",
+        attachments: []
+        // Would handle attachment uploads here
+      };
+      addMessage(optimisticMessage);
+      setIsSending(true);
+      try {
+        if (onSend) {
+          const sentMessage = await onSend(newMessage);
+          setMessages(
+            (prev) => prev.map((m) => m.id === optimisticId ? sentMessage : m)
+          );
+        } else {
+          updateStatus(optimisticId, "sent");
+        }
+      } catch {
+        updateStatus(optimisticId, "failed");
+      } finally {
+        setIsSending(false);
+      }
+    },
+    [currentUser, onSend, addMessage, updateStatus]
+  );
+  const retryMessage = React5.useCallback(
+    async (messageId) => {
+      updateStatus(messageId, "sending");
+      try {
+        if (onRetry) {
+          await onRetry(messageId);
+          updateStatus(messageId, "sent");
+        }
+      } catch {
+        updateStatus(messageId, "failed");
+      }
+    },
+    [onRetry, updateStatus]
+  );
+  const loadMore = React5.useCallback(async () => {
+    if (isLoadingMore || !onLoadMore) return;
+    setIsLoadingMore(true);
+    try {
+      const olderMessages = await onLoadMore();
+      setMessages((prev) => [...olderMessages, ...prev]);
+    } finally {
+      setIsLoadingMore(false);
+    }
+  }, [isLoadingMore, onLoadMore]);
+  return {
+    messages,
+    addMessage,
+    updateMessage,
+    removeMessage,
+    sendMessage,
+    retryMessage,
+    loadMore,
+    isSending,
+    isLoadingMore,
+    markAsRead,
+    updateStatus
+  };
+}
+function useTypingIndicator(options = {}) {
+  const {
+    typingParticipants: initialParticipants = [],
+    debounceTime = 2e3,
+    onTypingStart,
+    onTypingStop
+  } = options;
+  const [participants, setParticipants] = React5.useState(initialParticipants);
+  const [isLocalTyping, setIsLocalTyping] = React5.useState(false);
+  const typingTimeoutRef = React5.useRef(null);
+  React5.useEffect(() => {
+    setParticipants(initialParticipants);
+  }, [initialParticipants]);
+  const startTyping = React5.useCallback(() => {
+    if (!isLocalTyping) {
+      setIsLocalTyping(true);
+      onTypingStart?.();
+    }
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+    typingTimeoutRef.current = setTimeout(() => {
+      setIsLocalTyping(false);
+      onTypingStop?.();
+    }, debounceTime);
+  }, [isLocalTyping, debounceTime, onTypingStart, onTypingStop]);
+  const stopTyping = React5.useCallback(() => {
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+    setIsLocalTyping(false);
+    onTypingStop?.();
+  }, [onTypingStop]);
+  React5.useEffect(() => {
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+    };
+  }, []);
+  const typingState = React5.useMemo(
+    () => ({
+      participants,
+      lastUpdated: /* @__PURE__ */ new Date()
+    }),
+    [participants]
+  );
+  return {
+    typingState,
+    startTyping,
+    stopTyping,
+    setTypingParticipants: setParticipants
+  };
+}
+function useMessageScroll(options) {
+  const { messages, currentUserId, threshold = 100 } = options;
+  const scrollContainerRef = React5.useRef(null);
+  const bottomRef = React5.useRef(null);
+  const [isScrolledUp, setIsScrolledUp] = React5.useState(false);
+  const prevMessageCountRef = React5.useRef(messages.length);
+  React5.useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      const isAtBottom = scrollHeight - scrollTop - clientHeight < threshold;
+      setIsScrolledUp(!isAtBottom);
+    };
+    container.addEventListener("scroll", handleScroll);
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [threshold]);
+  const scrollToBottom = React5.useCallback((smooth = true) => {
+    bottomRef.current?.scrollIntoView({
+      behavior: smooth ? "smooth" : "auto"
+    });
+  }, []);
+  React5.useEffect(() => {
+    const messageCountChanged = messages.length !== prevMessageCountRef.current;
+    prevMessageCountRef.current = messages.length;
+    if (!messageCountChanged) return;
+    const lastMessage = messages[messages.length - 1];
+    const isOutgoing = lastMessage?.sender.id === currentUserId;
+    if (isOutgoing || !isScrolledUp) {
+      scrollToBottom(true);
+    }
+  }, [messages, currentUserId, isScrolledUp, scrollToBottom]);
+  return {
+    scrollContainerRef,
+    bottomRef,
+    isScrolledUp,
+    scrollToBottom
+  };
+}
+function useReadReceipts(options) {
+  const { currentUserId, onMarkRead, threshold = 0.5 } = options;
+  const observerRef = React5.useRef(null);
+  const observedMessagesRef = React5.useRef(/* @__PURE__ */ new Set());
+  React5.useEffect(() => {
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const messageId = entry.target.getAttribute("data-message-id");
+            if (messageId && !observedMessagesRef.current.has(messageId)) {
+              observedMessagesRef.current.add(messageId);
+              onMarkRead?.(messageId);
+            }
+          }
+        });
+      },
+      { threshold }
+    );
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, [onMarkRead, threshold]);
+  const observeMessage = React5.useCallback(
+    (element, message) => {
+      if (!element || !observerRef.current) return;
+      if (message.sender.id !== currentUserId && message.status !== "read" && !observedMessagesRef.current.has(message.id)) {
+        element.setAttribute("data-message-id", message.id);
+        observerRef.current.observe(element);
+      }
+    },
+    [currentUserId]
+  );
+  return { observeMessage };
+}
+
+export { AttachmentPreview, ConversationHeader, ConversationListItem, ConversationListSkeleton, DateSeparator, EmptyState, LightboxModal, LoadMoreButton, MessageBubble, MessageList, MessageStatusIcon, MessageThread, MessagingSplitView, ReadReceiptIndicator, SkeletonMessage, TypingIndicator, bubbleVariants, formatDateLabel, formatFileSize, formatLastSeen, getConversationSubtitle, getConversationTitle, groupMessagesByDate, headerVariants, isSameSenderGroup, useMessageScroll, useMessages, useReadReceipts, useTypingIndicator };
+//# sourceMappingURL=chunk-JHYFHEHS.js.map
+//# sourceMappingURL=chunk-JHYFHEHS.js.map