@scalemule/chat 0.0.5 → 0.0.8

package/dist/react.js

@@ -1,8 +1,1067 @@
-import { ChatClient } from './chunk-ZLMMNFZL.js';
-export { ChatClient } from './chunk-ZLMMNFZL.js';
-import { createContext, useState, useEffect, useCallback, useRef, useContext } from 'react';
-import { jsx } from 'react/jsx-runtime';
+import { ChatClient } from './chunk-5O5YLRJL.js';
+export { ChatClient } from './chunk-5O5YLRJL.js';
+import React4, { createContext, useState, useRef, useMemo, useEffect, useCallback, useContext } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
 
+function ChatInput({
+  onSend,
+  onTypingChange,
+  onUploadAttachment,
+  placeholder = "Type a message..."
+}) {
+  const [content, setContent] = useState("");
+  const [attachments, setAttachments] = useState([]);
+  const [isSending, setIsSending] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef(null);
+  const typingTimeoutRef = useRef(null);
+  const readyAttachments = useMemo(
+    () => attachments.filter((attachment) => attachment.attachment).map((attachment) => attachment.attachment),
+    [attachments]
+  );
+  const uploadingCount = attachments.filter((attachment) => !attachment.attachment && !attachment.error).length;
+  const emitTyping = () => {
+    onTypingChange?.(true);
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+    typingTimeoutRef.current = setTimeout(() => {
+      onTypingChange?.(false);
+    }, 2500);
+  };
+  const handleFiles = async (fileList) => {
+    if (!onUploadAttachment) return;
+    const files = Array.from(fileList);
+    for (const file of files) {
+      const id = `${file.name}:${file.size}:${Date.now()}:${Math.random().toString(36).slice(2)}`;
+      setAttachments((current) => [
+        ...current,
+        {
+          id,
+          fileName: file.name,
+          progress: 0
+        }
+      ]);
+      const result = await onUploadAttachment(file, (progress) => {
+        setAttachments(
+          (current) => current.map(
+            (attachment) => attachment.id === id ? { ...attachment, progress } : attachment
+          )
+        );
+      });
+      setAttachments(
+        (current) => current.map((attachment) => {
+          if (attachment.id !== id) return attachment;
+          if (result?.data) {
+            return {
+              ...attachment,
+              progress: 100,
+              attachment: result.data
+            };
+          }
+          return {
+            ...attachment,
+            error: result?.error?.message ?? "Upload failed"
+          };
+        })
+      );
+    }
+  };
+  const handleSubmit = async () => {
+    const trimmed = content.trim();
+    if (!trimmed && !readyAttachments.length || isSending || uploadingCount > 0) return;
+    setIsSending(true);
+    try {
+      await onSend(trimmed, readyAttachments);
+      setContent("");
+      setAttachments([]);
+      onTypingChange?.(false);
+    } finally {
+      setIsSending(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onDragOver: (event) => {
+        event.preventDefault();
+        if (onUploadAttachment) {
+          setIsDragging(true);
+        }
+      },
+      onDragLeave: () => setIsDragging(false),
+      onDrop: (event) => {
+        event.preventDefault();
+        setIsDragging(false);
+        void handleFiles(event.dataTransfer.files);
+      },
+      style: {
+        borderTop: "1px solid var(--sm-border-color, #e5e7eb)",
+        background: isDragging ? "rgba(37, 99, 235, 0.06)" : "var(--sm-surface, #fff)",
+        padding: 12,
+        display: "flex",
+        flexDirection: "column",
+        gap: 10
+      },
+      children: [
+        attachments.length ? /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: attachments.map((attachment) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "6px 10px",
+              borderRadius: 999,
+              background: "var(--sm-surface-muted, #f8fafc)",
+              border: "1px solid var(--sm-border-color, #e5e7eb)",
+              fontSize: 12
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { children: attachment.fileName }),
+              /* @__PURE__ */ jsx("span", { style: { color: attachment.error ? "#dc2626" : "var(--sm-muted-text, #6b7280)" }, children: attachment.error ?? `${attachment.progress}%` }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setAttachments((current) => current.filter((item) => item.id !== attachment.id));
+                  },
+                  style: {
+                    border: "none",
+                    background: "transparent",
+                    cursor: "pointer",
+                    color: "var(--sm-muted-text, #6b7280)"
+                  },
+                  children: "x"
+                }
+              )
+            ]
+          },
+          attachment.id
+        )) }) : null,
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 10, alignItems: "flex-end" }, children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              value: content,
+              onChange: (event) => {
+                setContent(event.target.value);
+                emitTyping();
+              },
+              onKeyDown: (event) => {
+                if (event.key === "Enter" && !event.shiftKey) {
+                  event.preventDefault();
+                  void handleSubmit();
+                }
+              },
+              rows: 1,
+              placeholder,
+              style: {
+                flex: 1,
+                minHeight: 44,
+                maxHeight: 120,
+                resize: "vertical",
+                borderRadius: 14,
+                border: "1px solid var(--sm-border-color, #e5e7eb)",
+                padding: "12px 14px",
+                font: "inherit",
+                color: "var(--sm-text-color, #111827)"
+              }
+            }
+          ),
+          onUploadAttachment ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                hidden: true,
+                multiple: true,
+                accept: "image/*,video/*,audio/*",
+                onChange: (event) => {
+                  if (event.target.files) {
+                    void handleFiles(event.target.files);
+                    event.target.value = "";
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => fileInputRef.current?.click(),
+                "aria-label": "Attach files",
+                style: {
+                  width: 44,
+                  height: 44,
+                  borderRadius: 14,
+                  border: "1px solid var(--sm-border-color, #e5e7eb)",
+                  background: "var(--sm-surface, #fff)",
+                  cursor: "pointer",
+                  color: "var(--sm-text-color, #111827)"
+                },
+                children: "+"
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => void handleSubmit(),
+              disabled: isSending || uploadingCount > 0 || !content.trim() && !readyAttachments.length,
+              style: {
+                height: 44,
+                padding: "0 16px",
+                borderRadius: 14,
+                border: "none",
+                background: "var(--sm-primary, #2563eb)",
+                color: "#fff",
+                cursor: isSending ? "wait" : "pointer",
+                opacity: isSending || uploadingCount > 0 ? 0.75 : 1
+              },
+              children: "Send"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var QUICK_REACTIONS = ["\u2764\uFE0F", "\u{1F602}", "\u{1F44D}", "\u{1F525}", "\u{1F62E}", "\u{1F622}", "\u{1F44F}", "\u{1F64C}"];
+function EmojiPicker({
+  onSelect,
+  onClose,
+  anchorRef,
+  emojis = QUICK_REACTIONS
+}) {
+  const ref = useRef(null);
+  const [position, setPosition] = useState(null);
+  useEffect(() => {
+    const anchor = anchorRef.current;
+    if (!anchor) return;
+    const rect = anchor.getBoundingClientRect();
+    const pickerWidth = emojis.length * 36 + 16;
+    let left = rect.left + rect.width / 2 - pickerWidth / 2;
+    if (left < 8) left = 8;
+    if (left + pickerWidth > window.innerWidth - 8)
+      left = window.innerWidth - 8 - pickerWidth;
+    setPosition({ top: rect.top - 8, left });
+  }, [anchorRef, emojis.length]);
+  useEffect(() => {
+    function handleClickOutside(e) {
+      if (ref.current && !ref.current.contains(e.target) && anchorRef.current && !anchorRef.current.contains(e.target)) {
+        onClose();
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [onClose, anchorRef]);
+  if (!position) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        style: {
+          position: "fixed",
+          top: position.top,
+          left: position.left,
+          transform: "translateY(-100%)",
+          background: "var(--sm-surface, #fff)",
+          border: "1px solid var(--sm-border-color, #e5e7eb)",
+          borderRadius: 12,
+          boxShadow: "0 10px 25px rgba(15, 23, 42, 0.12)",
+          padding: 8,
+          display: "flex",
+          gap: 4,
+          zIndex: 9999
+        },
+        children: emojis.map((emoji) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              onSelect(emoji);
+              onClose();
+            },
+            type: "button",
+            "aria-label": `React with ${emoji}`,
+            style: {
+              width: 32,
+              height: 32,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: 8,
+              border: "none",
+              background: "transparent",
+              cursor: "pointer",
+              fontSize: 18,
+              transition: "background 0.15s ease"
+            },
+            onMouseEnter: (e) => {
+              e.target.style.background = "var(--sm-surface-muted, #f8fafc)";
+            },
+            onMouseLeave: (e) => {
+              e.target.style.background = "transparent";
+            },
+            children: emoji
+          },
+          emoji
+        ))
+      }
+    ),
+    document.body
+  );
+}
+
+// src/react-components/utils.ts
+var timeFormatter = new Intl.DateTimeFormat(void 0, {
+  hour: "numeric",
+  minute: "2-digit"
+});
+var dateFormatter = new Intl.DateTimeFormat(void 0, {
+  month: "short",
+  day: "numeric",
+  year: "numeric"
+});
+function formatMessageTime(value) {
+  if (!value) return "";
+  return timeFormatter.format(new Date(value));
+}
+function formatDayLabel(value) {
+  if (!value) return "";
+  return dateFormatter.format(new Date(value));
+}
+function isSameDay(left, right) {
+  if (!left || !right) return false;
+  const leftDate = new Date(left);
+  const rightDate = new Date(right);
+  return leftDate.getFullYear() === rightDate.getFullYear() && leftDate.getMonth() === rightDate.getMonth() && leftDate.getDate() === rightDate.getDate();
+}
+function renderAttachment(messageId, attachment) {
+  const key = `${messageId}:${attachment.file_id}`;
+  const url = attachment.presigned_url;
+  if (!url) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          padding: "10px 12px",
+          borderRadius: 12,
+          background: "rgba(255,255,255,0.16)",
+          fontSize: 13
+        },
+        children: attachment.file_name
+      },
+      key
+    );
+  }
+  if (attachment.mime_type.startsWith("image/")) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: url,
+        alt: attachment.file_name,
+        loading: "lazy",
+        style: {
+          display: "block",
+          maxWidth: "100%",
+          borderRadius: 12,
+          marginTop: 8
+        }
+      },
+      key
+    );
+  }
+  if (attachment.mime_type.startsWith("video/")) {
+    return /* @__PURE__ */ jsx(
+      "video",
+      {
+        controls: true,
+        src: url,
+        style: {
+          display: "block",
+          width: "100%",
+          maxWidth: 320,
+          borderRadius: 12,
+          marginTop: 8
+        }
+      },
+      key
+    );
+  }
+  if (attachment.mime_type.startsWith("audio/")) {
+    return /* @__PURE__ */ jsx(
+      "audio",
+      {
+        controls: true,
+        src: url,
+        style: {
+          display: "block",
+          width: "100%",
+          marginTop: 8
+        }
+      },
+      key
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: url,
+      target: "_blank",
+      rel: "noreferrer",
+      style: {
+        display: "inline-block",
+        marginTop: 8,
+        color: "inherit",
+        fontSize: 13
+      },
+      children: attachment.file_name
+    },
+    key
+  );
+}
+function ChatMessageItem({
+  message,
+  currentUserId,
+  onAddReaction,
+  onRemoveReaction,
+  onReport,
+  highlight = false
+}) {
+  const [showPicker, setShowPicker] = useState(false);
+  const isOwn = Boolean(currentUserId && message.sender_id === currentUserId);
+  const canReact = Boolean(onAddReaction || onRemoveReaction);
+  const reactionEntries = useMemo(() => message.reactions ?? [], [message.reactions]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: isOwn ? "flex-end" : "flex-start",
+        gap: 6
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              maxWidth: "min(82%, 560px)",
+              padding: message.attachments?.length ? 10 : "10px 12px",
+              borderRadius: "var(--sm-border-radius, 16px)",
+              background: isOwn ? "var(--sm-own-bubble, #2563eb)" : "var(--sm-other-bubble, #f3f4f6)",
+              color: isOwn ? "var(--sm-own-text, #fff)" : "var(--sm-other-text, #111827)",
+              boxShadow: highlight ? "0 0 0 2px rgba(37, 99, 235, 0.22)" : "none",
+              transition: "box-shadow 0.2s ease"
+            },
+            children: [
+              message.content ? /* @__PURE__ */ jsx("div", { style: { whiteSpace: "pre-wrap", wordBreak: "break-word", fontSize: 14 }, children: message.content }) : null,
+              message.attachments?.map((attachment) => renderAttachment(message.id, attachment))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              color: "var(--sm-muted-text, #6b7280)",
+              fontSize: 12
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { children: formatMessageTime(message.created_at) }),
+              message.is_edited ? /* @__PURE__ */ jsx("span", { children: "edited" }) : null,
+              onReport && !isOwn ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => void onReport(message.id),
+                  style: {
+                    border: "none",
+                    background: "transparent",
+                    color: "inherit",
+                    cursor: "pointer",
+                    fontSize: 12,
+                    padding: 0
+                  },
+                  children: "Report"
+                }
+              ) : null,
+              canReact ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowPicker((value) => !value),
+                  style: {
+                    border: "none",
+                    background: "transparent",
+                    color: "inherit",
+                    cursor: "pointer",
+                    fontSize: 12,
+                    padding: 0
+                  },
+                  children: "React"
+                }
+              ) : null
+            ]
+          }
+        ),
+        showPicker && canReact ? /* @__PURE__ */ jsx(
+          EmojiPicker,
+          {
+            onSelect: (emoji) => {
+              setShowPicker(false);
+              void onAddReaction?.(message.id, emoji);
+            }
+          }
+        ) : null,
+        reactionEntries.length ? /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: reactionEntries.map((reaction) => {
+          const reacted = Boolean(currentUserId && reaction.user_ids.includes(currentUserId));
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                if (reacted) {
+                  void onRemoveReaction?.(message.id, reaction.emoji);
+                  return;
+                }
+                void onAddReaction?.(message.id, reaction.emoji);
+              },
+              style: {
+                border: reacted ? "1px solid rgba(37, 99, 235, 0.4)" : "1px solid var(--sm-border-color, #e5e7eb)",
+                background: reacted ? "rgba(37, 99, 235, 0.08)" : "var(--sm-surface, #fff)",
+                color: "var(--sm-text-color, #111827)",
+                borderRadius: 999,
+                padding: "4px 8px",
+                cursor: "pointer",
+                fontSize: 12
+              },
+              children: [
+                reaction.emoji,
+                " ",
+                reaction.count
+              ]
+            },
+            `${message.id}:${reaction.emoji}`
+          );
+        }) }) : null
+      ]
+    }
+  );
+}
+function getUnreadIndex(messages, unreadSince) {
+  if (!unreadSince) return -1;
+  return messages.findIndex((message) => new Date(message.created_at).getTime() > new Date(unreadSince).getTime());
+}
+function ChatMessageList({
+  messages,
+  currentUserId,
+  unreadSince,
+  scrollToUnreadOnMount = true,
+  onAddReaction,
+  onRemoveReaction,
+  onReport,
+  emptyState
+}) {
+  const containerRef = useRef(null);
+  const unreadMarkerRef = useRef(null);
+  const lastMessageCountRef = useRef(messages.length);
+  const didScrollToUnreadRef = useRef(false);
+  const [showJumpToLatest, setShowJumpToLatest] = useState(false);
+  const unreadIndex = useMemo(() => getUnreadIndex(messages, unreadSince), [messages, unreadSince]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+    const shouldStickToBottom = distanceFromBottom < 80;
+    if (messages.length > lastMessageCountRef.current && shouldStickToBottom) {
+      container.scrollTo({ top: container.scrollHeight, behavior: "smooth" });
+      setShowJumpToLatest(false);
+    } else if (messages.length > lastMessageCountRef.current) {
+      setShowJumpToLatest(true);
+    }
+    lastMessageCountRef.current = messages.length;
+  }, [messages]);
+  useEffect(() => {
+    if (!scrollToUnreadOnMount || unreadIndex < 0 || didScrollToUnreadRef.current) {
+      return;
+    }
+    unreadMarkerRef.current?.scrollIntoView({ block: "center" });
+    didScrollToUnreadRef.current = true;
+  }, [scrollToUnreadOnMount, unreadIndex, messages.length]);
+  if (!messages.length) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "var(--sm-muted-text, #6b7280)",
+          fontSize: 14,
+          padding: 24
+        },
+        children: emptyState ?? "No messages yet"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", flex: 1, minHeight: 0 }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        onScroll: (event) => {
+          const element = event.currentTarget;
+          const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
+          setShowJumpToLatest(distanceFromBottom > 120);
+        },
+        style: {
+          height: "100%",
+          overflowY: "auto",
+          padding: 16,
+          display: "flex",
+          flexDirection: "column",
+          gap: 12,
+          background: "var(--sm-surface-muted, #f8fafc)"
+        },
+        children: messages.map((message, index) => {
+          const previousMessage = messages[index - 1];
+          const showDateDivider = !previousMessage || !isSameDay(previousMessage.created_at, message.created_at);
+          const showUnreadDivider = unreadIndex === index;
+          return /* @__PURE__ */ jsxs(React4.Fragment, { children: [
+            showDateDivider ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  alignSelf: "center",
+                  fontSize: 12,
+                  color: "var(--sm-muted-text, #6b7280)",
+                  padding: "4px 10px",
+                  borderRadius: 999,
+                  background: "rgba(148, 163, 184, 0.12)"
+                },
+                children: formatDayLabel(message.created_at)
+              }
+            ) : null,
+            showUnreadDivider ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: unreadMarkerRef,
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 10,
+                  color: "var(--sm-primary, #2563eb)",
+                  fontSize: 12,
+                  fontWeight: 600
+                },
+                children: [
+                  /* @__PURE__ */ jsx("div", { style: { flex: 1, height: 1, background: "rgba(37, 99, 235, 0.28)" } }),
+                  /* @__PURE__ */ jsx("span", { children: "New messages" }),
+                  /* @__PURE__ */ jsx("div", { style: { flex: 1, height: 1, background: "rgba(37, 99, 235, 0.28)" } })
+                ]
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              ChatMessageItem,
+              {
+                message,
+                currentUserId,
+                onAddReaction,
+                onRemoveReaction,
+                onReport,
+                highlight: showUnreadDivider
+              }
+            )
+          ] }, message.id);
+        })
+      }
+    ),
+    showJumpToLatest ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          containerRef.current?.scrollTo({
+            top: containerRef.current.scrollHeight,
+            behavior: "smooth"
+          });
+          setShowJumpToLatest(false);
+        },
+        style: {
+          position: "absolute",
+          right: 16,
+          bottom: 16,
+          border: "none",
+          borderRadius: 999,
+          background: "var(--sm-primary, #2563eb)",
+          color: "#fff",
+          padding: "10px 14px",
+          cursor: "pointer",
+          boxShadow: "0 12px 28px rgba(37, 99, 235, 0.28)"
+        },
+        children: "New messages"
+      }
+    ) : null
+  ] });
+}
+
+// src/react-components/theme.ts
+function themeToStyle(theme) {
+  return {
+    "--sm-primary": theme?.primary ?? "#2563eb",
+    "--sm-own-bubble": theme?.ownBubble ?? theme?.primary ?? "#2563eb",
+    "--sm-own-text": theme?.ownText ?? "#ffffff",
+    "--sm-other-bubble": theme?.otherBubble ?? "#f3f4f6",
+    "--sm-other-text": theme?.otherText ?? "#111827",
+    "--sm-surface": theme?.surface ?? "#ffffff",
+    "--sm-surface-muted": theme?.surfaceMuted ?? "#f8fafc",
+    "--sm-border-color": theme?.borderColor ?? "#e5e7eb",
+    "--sm-text-color": theme?.textColor ?? "#111827",
+    "--sm-muted-text": theme?.mutedText ?? "#6b7280",
+    "--sm-border-radius": typeof theme?.borderRadius === "number" ? `${theme.borderRadius}px` : theme?.borderRadius ?? "16px",
+    "--sm-font-family": theme?.fontFamily ?? 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+  };
+}
+function inferMessageType(content, attachments) {
+  if (!attachments.length) return "text";
+  if (!content && attachments.every((attachment) => attachment.mime_type.startsWith("image/"))) {
+    return "image";
+  }
+  return "file";
+}
+function ChatThread({
+  conversationId,
+  theme,
+  currentUserId,
+  title = "Chat",
+  subtitle
+}) {
+  const client = useChatClient();
+  const resolvedUserId = currentUserId ?? client.userId;
+  const {
+    messages,
+    readStatuses,
+    isLoading,
+    error,
+    sendMessage,
+    markRead,
+    addReaction,
+    removeReaction,
+    reportMessage,
+    uploadAttachment
+  } = useChat(conversationId);
+  const { typingUsers, sendTyping } = useTyping(conversationId);
+  const { members } = usePresence(conversationId);
+  const ownReadStatus = useMemo(
+    () => resolvedUserId ? readStatuses.find((status) => status.user_id === resolvedUserId)?.last_read_at : void 0,
+    [readStatuses, resolvedUserId]
+  );
+  const otherTypingUsers = useMemo(
+    () => typingUsers.filter((userId) => userId !== resolvedUserId),
+    [typingUsers, resolvedUserId]
+  );
+  const activeMembers = useMemo(
+    () => members.filter((member) => member.userId !== resolvedUserId),
+    [members, resolvedUserId]
+  );
+  useEffect(() => {
+    if (!messages.length) return;
+    void markRead();
+  }, [markRead, messages.length, messages[messages.length - 1]?.id]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-scalemule-chat": "",
+      style: {
+        ...themeToStyle(theme),
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: 320,
+        borderRadius: "var(--sm-border-radius, 16px)",
+        border: "1px solid var(--sm-border-color, #e5e7eb)",
+        background: "var(--sm-surface, #fff)",
+        color: "var(--sm-text-color, #111827)",
+        fontFamily: "var(--sm-font-family)",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "16px 18px",
+              borderBottom: "1px solid var(--sm-border-color, #e5e7eb)",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              gap: 16
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { style: { fontSize: 16, fontWeight: 700 }, children: title }),
+                /* @__PURE__ */ jsx("div", { style: { fontSize: 13, color: "var(--sm-muted-text, #6b7280)" }, children: otherTypingUsers.length ? "Typing..." : subtitle ?? (activeMembers.length ? `${activeMembers.length} online` : "No one online") })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 8,
+                    fontSize: 12,
+                    color: "var(--sm-muted-text, #6b7280)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          width: 10,
+                          height: 10,
+                          borderRadius: 999,
+                          background: activeMembers.length ? "#22c55e" : "#94a3b8"
+                        }
+                      }
+                    ),
+                    activeMembers.length ? "Online" : "Away"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        error ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: "10px 16px",
+              fontSize: 13,
+              color: "#b91c1c",
+              background: "#fef2f2",
+              borderBottom: "1px solid #fecaca"
+            },
+            children: error
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          ChatMessageList,
+          {
+            messages,
+            currentUserId: resolvedUserId,
+            unreadSince: ownReadStatus,
+            onAddReaction: (messageId, emoji) => void addReaction(messageId, emoji),
+            onRemoveReaction: (messageId, emoji) => void removeReaction(messageId, emoji),
+            onReport: (messageId) => void reportMessage(messageId, "other"),
+            emptyState: isLoading ? "Loading messages..." : "Start the conversation"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              minHeight: otherTypingUsers.length ? 28 : 0,
+              padding: otherTypingUsers.length ? "0 16px 8px" : 0,
+              fontSize: 12,
+              color: "var(--sm-muted-text, #6b7280)"
+            },
+            children: otherTypingUsers.length ? "Someone is typing..." : null
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ChatInput,
+          {
+            onSend: async (content, attachments) => {
+              await sendMessage(content, {
+                attachments,
+                message_type: inferMessageType(content, attachments)
+              });
+            },
+            onTypingChange: (isTyping) => {
+              sendTyping(isTyping);
+            },
+            onUploadAttachment: uploadAttachment
+          }
+        )
+      ]
+    }
+  );
+}
+function formatPreview(conversation) {
+  if (conversation.last_message_preview) {
+    return conversation.last_message_preview;
+  }
+  return conversation.name ?? conversation.id;
+}
+function ConversationList({
+  conversationType,
+  selectedConversationId,
+  onSelect,
+  theme,
+  title = "Conversations"
+}) {
+  const { conversations, isLoading } = useConversations({
+    conversationType
+  });
+  const [search, setSearch] = useState("");
+  const filtered = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    if (!query) return conversations;
+    return conversations.filter((conversation) => {
+      const haystack = [
+        conversation.name,
+        conversation.last_message_preview,
+        conversation.counterparty_user_id
+      ].filter(Boolean).join(" ").toLowerCase();
+      return haystack.includes(query);
+    });
+  }, [conversations, search]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-scalemule-chat": "",
+      style: {
+        ...themeToStyle(theme),
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: 280,
+        borderRadius: "var(--sm-border-radius, 16px)",
+        border: "1px solid var(--sm-border-color, #e5e7eb)",
+        background: "var(--sm-surface, #fff)",
+        color: "var(--sm-text-color, #111827)",
+        fontFamily: "var(--sm-font-family)",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: 16,
+              borderBottom: "1px solid var(--sm-border-color, #e5e7eb)",
+              display: "flex",
+              flexDirection: "column",
+              gap: 10
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { style: { fontSize: 16, fontWeight: 700 }, children: title }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  value: search,
+                  onChange: (event) => setSearch(event.target.value),
+                  placeholder: "Search conversations",
+                  style: {
+                    width: "100%",
+                    borderRadius: 12,
+                    border: "1px solid var(--sm-border-color, #e5e7eb)",
+                    padding: "10px 12px",
+                    font: "inherit"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, overflowY: "auto" }, children: isLoading ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: 24,
+              fontSize: 14,
+              color: "var(--sm-muted-text, #6b7280)"
+            },
+            children: "Loading conversations..."
+          }
+        ) : !filtered.length ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: 24,
+              fontSize: 14,
+              color: "var(--sm-muted-text, #6b7280)"
+            },
+            children: "No conversations found"
+          }
+        ) : filtered.map((conversation) => {
+          const selected = conversation.id === selectedConversationId;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => onSelect?.(conversation),
+              style: {
+                width: "100%",
+                border: "none",
+                borderBottom: "1px solid var(--sm-border-color, #e5e7eb)",
+                padding: 16,
+                textAlign: "left",
+                background: selected ? "rgba(37, 99, 235, 0.08)" : "transparent",
+                cursor: "pointer",
+                display: "flex",
+                flexDirection: "column",
+                gap: 6
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }, children: [
+                  /* @__PURE__ */ jsx("div", { style: { fontSize: 14, fontWeight: 600 }, children: conversation.name ?? conversation.counterparty_user_id ?? "Conversation" }),
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                    conversation.is_muted ? /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--sm-muted-text, #6b7280)" }, children: "Muted" }) : null,
+                    conversation.unread_count ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          minWidth: 22,
+                          height: 22,
+                          borderRadius: 999,
+                          background: "var(--sm-primary, #2563eb)",
+                          color: "#fff",
+                          display: "inline-flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          fontSize: 12,
+                          fontWeight: 700,
+                          padding: "0 6px"
+                        },
+                        children: conversation.unread_count
+                      }
+                    ) : null
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: 13,
+                      color: "var(--sm-muted-text, #6b7280)",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: formatPreview(conversation)
+                  }
+                )
+              ]
+            },
+            conversation.id
+          );
+        }) })
+      ]
+    }
+  );
+}
 var ChatContext = createContext(null);
 function useChatContext() {
   const ctx = useContext(ChatContext);
@@ -16,11 +1075,14 @@ function ChatProvider({ config, children }) {
       client.destroy();
     };
   }, [client]);
-  return /* @__PURE__ */ jsx(ChatContext.Provider, { value: { client }, children });
+  return /* @__PURE__ */ jsx(ChatContext.Provider, { value: { client, config }, children });
 }
 function useChatClient() {
   return useChatContext().client;
 }
+function useChatConfig() {
+  return useChatContext().config;
+}
 function useConnection() {
   const { client } = useChatContext();
   const [status, setStatus] = useState(client.status);
@@ -40,6 +1102,7 @@ function useConnection() {
 function useChat(conversationId) {
   const { client } = useChatContext();
   const [messages, setMessages] = useState([]);
+  const [readStatuses, setReadStatuses] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
   const [hasMore, setHasMore] = useState(false);
@@ -60,6 +1123,11 @@ function useChat(conversationId) {
       } else if (result.error) {
         setError(result.error.message);
       }
+      const readStatusResult = await client.getReadStatus(conversationId);
+      if (cancelled) return;
+      if (readStatusResult.data?.statuses) {
+        setReadStatuses(readStatusResult.data.statuses);
+      }
       setIsLoading(false);
       unsub = client.subscribeToConversation(conversationId);
       client.connect();
@@ -73,10 +1141,7 @@ function useChat(conversationId) {
     if (!conversationId) return;
     return client.on("message", ({ message, conversationId: convId }) => {
       if (convId === conversationId) {
-        setMessages((prev) => {
-          if (prev.some((m) => m.id === message.id)) return prev;
-          return [...prev, message];
-        });
+        setMessages([...client.getCachedMessages(conversationId)]);
       }
     });
   }, [client, conversationId]);
@@ -84,7 +1149,7 @@ function useChat(conversationId) {
     if (!conversationId) return;
     return client.on("message:updated", ({ message, conversationId: convId }) => {
       if (convId === conversationId) {
-        setMessages((prev) => prev.map((m) => m.id === message.id ? message : m));
+        setMessages([...client.getCachedMessages(conversationId)]);
       }
     });
   }, [client, conversationId]);
@@ -92,10 +1157,33 @@ function useChat(conversationId) {
     if (!conversationId) return;
     return client.on("message:deleted", ({ messageId, conversationId: convId }) => {
       if (convId === conversationId) {
-        setMessages((prev) => prev.filter((m) => m.id !== messageId));
+        setMessages([...client.getCachedMessages(conversationId)]);
+      }
+    });
+  }, [client, conversationId]);
+  useEffect(() => {
+    if (!conversationId) return;
+    return client.on("reaction", ({ conversationId: convId }) => {
+      if (convId === conversationId) {
+        setMessages([...client.getCachedMessages(conversationId)]);
       }
     });
   }, [client, conversationId]);
+  useEffect(() => {
+    if (!conversationId) return;
+    return client.on("read", ({ conversationId: convId, userId, lastReadAt }) => {
+      if (convId !== conversationId) return;
+      setReadStatuses((prev) => {
+        const existingIndex = prev.findIndex((status) => status.user_id === userId);
+        if (existingIndex < 0) {
+          return [...prev, { user_id: userId, last_read_at: lastReadAt }];
+        }
+        return prev.map(
+          (status) => status.user_id === userId ? { ...status, last_read_at: lastReadAt } : status
+        );
+      });
+    });
+  }, [client, conversationId]);
   const sendMessage = useCallback(
     async (content, options) => {
       if (!conversationId) return;
@@ -112,17 +1200,128 @@ function useChat(conversationId) {
       setHasMore(result.data.has_more ?? false);
     }
   }, [client, conversationId, messages]);
+  const editMessage = useCallback(
+    async (messageId, content) => {
+      const result = await client.editMessage(messageId, content);
+      if (result.error) {
+        setError(result.error.message);
+      }
+      return result;
+    },
+    [client]
+  );
+  const deleteMessage = useCallback(
+    async (messageId) => {
+      const result = await client.deleteMessage(messageId);
+      if (result.error) {
+        setError(result.error.message);
+      }
+      return result;
+    },
+    [client]
+  );
+  const addReaction = useCallback(
+    async (messageId, emoji) => {
+      const result = await client.addReaction(messageId, emoji);
+      if (result.error) {
+        setError(result.error.message);
+      }
+      return result;
+    },
+    [client]
+  );
+  const removeReaction = useCallback(
+    async (messageId, emoji) => {
+      const result = await client.removeReaction(messageId, emoji);
+      if (result.error) {
+        setError(result.error.message);
+      }
+      return result;
+    },
+    [client]
+  );
+  const uploadAttachment = useCallback(
+    async (file, onProgress, signal) => {
+      const result = await client.uploadAttachment(file, onProgress, signal);
+      if (result.error) {
+        setError(result.error.message);
+      }
+      return result;
+    },
+    [client]
+  );
+  const refreshAttachmentUrl = useCallback(
+    async (messageId, fileId) => {
+      const result = await client.refreshAttachmentUrl(messageId, fileId);
+      if (result.error) {
+        setError(result.error.message);
+      }
+      return result;
+    },
+    [client]
+  );
+  const reportMessage = useCallback(
+    async (messageId, reason, description) => {
+      const result = await client.reportMessage(messageId, reason, description);
+      if (result.error) {
+        setError(result.error.message);
+      }
+      return result;
+    },
+    [client]
+  );
+  const muteConversation = useCallback(
+    async (mutedUntil) => {
+      if (!conversationId) return;
+      const result = await client.muteConversation(conversationId, mutedUntil);
+      if (result.error) {
+        setError(result.error.message);
+      }
+      return result;
+    },
+    [client, conversationId]
+  );
+  const unmuteConversation = useCallback(async () => {
+    if (!conversationId) return;
+    const result = await client.unmuteConversation(conversationId);
+    if (result.error) {
+      setError(result.error.message);
+    }
+    return result;
+  }, [client, conversationId]);
+  const getReadStatus = useCallback(async () => {
+    if (!conversationId) return;
+    const result = await client.getReadStatus(conversationId);
+    if (result.data?.statuses) {
+      setReadStatuses(result.data.statuses);
+    } else if (result.error) {
+      setError(result.error.message);
+    }
+    return result;
+  }, [client, conversationId]);
   const markRead = useCallback(async () => {
     if (!conversationId) return;
     await client.markRead(conversationId);
-  }, [client, conversationId]);
+    await getReadStatus();
+  }, [client, conversationId, getReadStatus]);
   return {
     messages,
+    readStatuses,
     isLoading,
     error,
     hasMore,
     sendMessage,
     loadMore,
+    editMessage,
+    deleteMessage,
+    addReaction,
+    removeReaction,
+    uploadAttachment,
+    refreshAttachmentUrl,
+    reportMessage,
+    muteConversation,
+    unmuteConversation,
+    getReadStatus,
     markRead
   };
 }
@@ -298,4 +1497,4 @@ function useUnreadCount() {
   return { totalUnread };
 }
 
-export { ChatProvider, useChat, useChatClient, useConnection, useConversations, usePresence, useTyping, useUnreadCount };
+export { ChatInput, ChatMessageItem, ChatMessageList, ChatProvider, ChatThread, ConversationList, EmojiPicker, useChat, useChatClient, useChatConfig, useConnection, useConversations, usePresence, useTyping, useUnreadCount };