@scalemule/chat 0.0.7 → 0.0.8

package/dist/react.cjs

@@ -1,12 +1,13 @@
 'use strict';
 
 var chunkW2PWFS3E_cjs = require('./chunk-W2PWFS3E.cjs');
-var React3 = require('react');
+var React4 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React3__default = /*#__PURE__*/_interopDefault(React3);
+var React4__default = /*#__PURE__*/_interopDefault(React4);
 
 function ChatInput({
   onSend,
@@ -14,13 +15,13 @@ function ChatInput({
   onUploadAttachment,
   placeholder = "Type a message..."
 }) {
-  const [content, setContent] = React3.useState("");
-  const [attachments, setAttachments] = React3.useState([]);
-  const [isSending, setIsSending] = React3.useState(false);
-  const [isDragging, setIsDragging] = React3.useState(false);
-  const fileInputRef = React3.useRef(null);
-  const typingTimeoutRef = React3.useRef(null);
-  const readyAttachments = React3.useMemo(
+  const [content, setContent] = React4.useState("");
+  const [attachments, setAttachments] = React4.useState([]);
+  const [isSending, setIsSending] = React4.useState(false);
+  const [isDragging, setIsDragging] = React4.useState(false);
+  const fileInputRef = React4.useRef(null);
+  const typingTimeoutRef = React4.useRef(null);
+  const readyAttachments = React4.useMemo(
     () => attachments.filter((attachment) => attachment.attachment).map((attachment) => attachment.attachment),
     [attachments]
   );
@@ -235,43 +236,90 @@ function ChatInput({
     }
   );
 }
-var DEFAULT_EMOJIS = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F389}", "\u{1F62E}", "\u{1F440}"];
+var QUICK_REACTIONS = ["\u2764\uFE0F", "\u{1F602}", "\u{1F44D}", "\u{1F525}", "\u{1F62E}", "\u{1F622}", "\u{1F44F}", "\u{1F64C}"];
 function EmojiPicker({
   onSelect,
-  emojis = DEFAULT_EMOJIS
+  onClose,
+  anchorRef,
+  emojis = QUICK_REACTIONS
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      style: {
-        display: "inline-flex",
-        gap: 6,
-        padding: 6,
-        borderRadius: 999,
-        background: "var(--sm-surface, #fff)",
-        border: "1px solid var(--sm-border-color, #e5e7eb)",
-        boxShadow: "0 10px 25px rgba(15, 23, 42, 0.12)"
-      },
-      children: emojis.map((emoji) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => onSelect(emoji),
-          "aria-label": `React with ${emoji}`,
-          style: {
-            width: 32,
-            height: 32,
-            border: "none",
-            background: "transparent",
-            borderRadius: 999,
-            cursor: "pointer",
-            fontSize: 18
-          },
-          children: emoji
-        },
-        emoji
-      ))
+  const ref = React4.useRef(null);
+  const [position, setPosition] = React4.useState(null);
+  React4.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]);
+  React4.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 reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
   );
 }
 
@@ -391,10 +439,10 @@ function ChatMessageItem({
   onReport,
   highlight = false
 }) {
-  const [showPicker, setShowPicker] = React3.useState(false);
+  const [showPicker, setShowPicker] = React4.useState(false);
   const isOwn = Boolean(currentUserId && message.sender_id === currentUserId);
   const canReact = Boolean(onAddReaction || onRemoveReaction);
-  const reactionEntries = React3.useMemo(() => message.reactions ?? [], [message.reactions]);
+  const reactionEntries = React4.useMemo(() => message.reactions ?? [], [message.reactions]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -529,13 +577,13 @@ function ChatMessageList({
   onReport,
   emptyState
 }) {
-  const containerRef = React3.useRef(null);
-  const unreadMarkerRef = React3.useRef(null);
-  const lastMessageCountRef = React3.useRef(messages.length);
-  const didScrollToUnreadRef = React3.useRef(false);
-  const [showJumpToLatest, setShowJumpToLatest] = React3.useState(false);
-  const unreadIndex = React3.useMemo(() => getUnreadIndex(messages, unreadSince), [messages, unreadSince]);
-  React3.useEffect(() => {
+  const containerRef = React4.useRef(null);
+  const unreadMarkerRef = React4.useRef(null);
+  const lastMessageCountRef = React4.useRef(messages.length);
+  const didScrollToUnreadRef = React4.useRef(false);
+  const [showJumpToLatest, setShowJumpToLatest] = React4.useState(false);
+  const unreadIndex = React4.useMemo(() => getUnreadIndex(messages, unreadSince), [messages, unreadSince]);
+  React4.useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
     const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
@@ -548,7 +596,7 @@ function ChatMessageList({
     }
     lastMessageCountRef.current = messages.length;
   }, [messages]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!scrollToUnreadOnMount || unreadIndex < 0 || didScrollToUnreadRef.current) {
       return;
     }
@@ -595,7 +643,7 @@ function ChatMessageList({
           const previousMessage = messages[index - 1];
           const showDateDivider = !previousMessage || !isSameDay(previousMessage.created_at, message.created_at);
           const showUnreadDivider = unreadIndex === index;
-          return /* @__PURE__ */ jsxRuntime.jsxs(React3__default.default.Fragment, { children: [
+          return /* @__PURE__ */ jsxRuntime.jsxs(React4__default.default.Fragment, { children: [
             showDateDivider ? /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -720,19 +768,19 @@ function ChatThread({
   } = useChat(conversationId);
   const { typingUsers, sendTyping } = useTyping(conversationId);
   const { members } = usePresence(conversationId);
-  const ownReadStatus = React3.useMemo(
+  const ownReadStatus = React4.useMemo(
     () => resolvedUserId ? readStatuses.find((status) => status.user_id === resolvedUserId)?.last_read_at : void 0,
     [readStatuses, resolvedUserId]
   );
-  const otherTypingUsers = React3.useMemo(
+  const otherTypingUsers = React4.useMemo(
     () => typingUsers.filter((userId) => userId !== resolvedUserId),
     [typingUsers, resolvedUserId]
   );
-  const activeMembers = React3.useMemo(
+  const activeMembers = React4.useMemo(
     () => members.filter((member) => member.userId !== resolvedUserId),
     [members, resolvedUserId]
   );
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!messages.length) return;
     void markRead();
   }, [markRead, messages.length, messages[messages.length - 1]?.id]);
@@ -871,8 +919,8 @@ function ConversationList({
   const { conversations, isLoading } = useConversations({
     conversationType
   });
-  const [search, setSearch] = React3.useState("");
-  const filtered = React3.useMemo(() => {
+  const [search, setSearch] = React4.useState("");
+  const filtered = React4.useMemo(() => {
     const query = search.trim().toLowerCase();
     if (!query) return conversations;
     return conversations.filter((conversation) => {
@@ -1019,15 +1067,15 @@ function ConversationList({
     }
   );
 }
-var ChatContext = React3.createContext(null);
+var ChatContext = React4.createContext(null);
 function useChatContext() {
-  const ctx = React3.useContext(ChatContext);
+  const ctx = React4.useContext(ChatContext);
   if (!ctx) throw new Error("useChatContext must be used within a ChatProvider");
   return ctx;
 }
 function ChatProvider({ config, children }) {
-  const [client] = React3.useState(() => new chunkW2PWFS3E_cjs.ChatClient(config));
-  React3.useEffect(() => {
+  const [client] = React4.useState(() => new chunkW2PWFS3E_cjs.ChatClient(config));
+  React4.useEffect(() => {
     return () => {
       client.destroy();
     };
@@ -1042,28 +1090,28 @@ function useChatConfig() {
 }
 function useConnection() {
   const { client } = useChatContext();
-  const [status, setStatus] = React3.useState(client.status);
-  React3.useEffect(() => {
+  const [status, setStatus] = React4.useState(client.status);
+  React4.useEffect(() => {
     return client.on("connected", () => setStatus("connected"));
   }, [client]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     return client.on("disconnected", () => setStatus("disconnected"));
   }, [client]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     return client.on("reconnecting", () => setStatus("reconnecting"));
   }, [client]);
-  const connect = React3.useCallback(() => client.connect(), [client]);
-  const disconnect = React3.useCallback(() => client.disconnect(), [client]);
+  const connect = React4.useCallback(() => client.connect(), [client]);
+  const disconnect = React4.useCallback(() => client.disconnect(), [client]);
   return { status, connect, disconnect };
 }
 function useChat(conversationId) {
   const { client } = useChatContext();
-  const [messages, setMessages] = React3.useState([]);
-  const [readStatuses, setReadStatuses] = React3.useState([]);
-  const [isLoading, setIsLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const [hasMore, setHasMore] = React3.useState(false);
-  React3.useEffect(() => {
+  const [messages, setMessages] = React4.useState([]);
+  const [readStatuses, setReadStatuses] = React4.useState([]);
+  const [isLoading, setIsLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const [hasMore, setHasMore] = React4.useState(false);
+  React4.useEffect(() => {
     if (!conversationId) return;
     setIsLoading(true);
     setError(null);
@@ -1094,7 +1142,7 @@ function useChat(conversationId) {
       unsub?.();
     };
   }, [client, conversationId]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!conversationId) return;
     return client.on("message", ({ message, conversationId: convId }) => {
       if (convId === conversationId) {
@@ -1102,7 +1150,7 @@ function useChat(conversationId) {
       }
     });
   }, [client, conversationId]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!conversationId) return;
     return client.on("message:updated", ({ message, conversationId: convId }) => {
       if (convId === conversationId) {
@@ -1110,7 +1158,7 @@ function useChat(conversationId) {
       }
     });
   }, [client, conversationId]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!conversationId) return;
     return client.on("message:deleted", ({ messageId, conversationId: convId }) => {
       if (convId === conversationId) {
@@ -1118,7 +1166,7 @@ function useChat(conversationId) {
       }
     });
   }, [client, conversationId]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!conversationId) return;
     return client.on("reaction", ({ conversationId: convId }) => {
       if (convId === conversationId) {
@@ -1126,7 +1174,7 @@ function useChat(conversationId) {
       }
     });
   }, [client, conversationId]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!conversationId) return;
     return client.on("read", ({ conversationId: convId, userId, lastReadAt }) => {
       if (convId !== conversationId) return;
@@ -1141,14 +1189,14 @@ function useChat(conversationId) {
       });
     });
   }, [client, conversationId]);
-  const sendMessage = React3.useCallback(
+  const sendMessage = React4.useCallback(
     async (content, options) => {
       if (!conversationId) return;
       return client.sendMessage(conversationId, { content, ...options });
     },
     [client, conversationId]
   );
-  const loadMore = React3.useCallback(async () => {
+  const loadMore = React4.useCallback(async () => {
     if (!conversationId || !messages.length) return;
     const oldestId = messages[0]?.id;
     const result = await client.getMessages(conversationId, { before: oldestId });
@@ -1157,7 +1205,7 @@ function useChat(conversationId) {
       setHasMore(result.data.has_more ?? false);
     }
   }, [client, conversationId, messages]);
-  const editMessage = React3.useCallback(
+  const editMessage = React4.useCallback(
     async (messageId, content) => {
       const result = await client.editMessage(messageId, content);
       if (result.error) {
@@ -1167,7 +1215,7 @@ function useChat(conversationId) {
     },
     [client]
   );
-  const deleteMessage = React3.useCallback(
+  const deleteMessage = React4.useCallback(
     async (messageId) => {
       const result = await client.deleteMessage(messageId);
       if (result.error) {
@@ -1177,7 +1225,7 @@ function useChat(conversationId) {
     },
     [client]
   );
-  const addReaction = React3.useCallback(
+  const addReaction = React4.useCallback(
     async (messageId, emoji) => {
       const result = await client.addReaction(messageId, emoji);
       if (result.error) {
@@ -1187,7 +1235,7 @@ function useChat(conversationId) {
     },
     [client]
   );
-  const removeReaction = React3.useCallback(
+  const removeReaction = React4.useCallback(
     async (messageId, emoji) => {
       const result = await client.removeReaction(messageId, emoji);
       if (result.error) {
@@ -1197,7 +1245,7 @@ function useChat(conversationId) {
     },
     [client]
   );
-  const uploadAttachment = React3.useCallback(
+  const uploadAttachment = React4.useCallback(
     async (file, onProgress, signal) => {
       const result = await client.uploadAttachment(file, onProgress, signal);
       if (result.error) {
@@ -1207,7 +1255,7 @@ function useChat(conversationId) {
     },
     [client]
   );
-  const refreshAttachmentUrl = React3.useCallback(
+  const refreshAttachmentUrl = React4.useCallback(
     async (messageId, fileId) => {
       const result = await client.refreshAttachmentUrl(messageId, fileId);
       if (result.error) {
@@ -1217,7 +1265,7 @@ function useChat(conversationId) {
     },
     [client]
   );
-  const reportMessage = React3.useCallback(
+  const reportMessage = React4.useCallback(
     async (messageId, reason, description) => {
       const result = await client.reportMessage(messageId, reason, description);
       if (result.error) {
@@ -1227,7 +1275,7 @@ function useChat(conversationId) {
     },
     [client]
   );
-  const muteConversation = React3.useCallback(
+  const muteConversation = React4.useCallback(
     async (mutedUntil) => {
       if (!conversationId) return;
       const result = await client.muteConversation(conversationId, mutedUntil);
@@ -1238,7 +1286,7 @@ function useChat(conversationId) {
     },
     [client, conversationId]
   );
-  const unmuteConversation = React3.useCallback(async () => {
+  const unmuteConversation = React4.useCallback(async () => {
     if (!conversationId) return;
     const result = await client.unmuteConversation(conversationId);
     if (result.error) {
@@ -1246,7 +1294,7 @@ function useChat(conversationId) {
     }
     return result;
   }, [client, conversationId]);
-  const getReadStatus = React3.useCallback(async () => {
+  const getReadStatus = React4.useCallback(async () => {
     if (!conversationId) return;
     const result = await client.getReadStatus(conversationId);
     if (result.data?.statuses) {
@@ -1256,7 +1304,7 @@ function useChat(conversationId) {
     }
     return result;
   }, [client, conversationId]);
-  const markRead = React3.useCallback(async () => {
+  const markRead = React4.useCallback(async () => {
     if (!conversationId) return;
     await client.markRead(conversationId);
     await getReadStatus();
@@ -1284,8 +1332,8 @@ function useChat(conversationId) {
 }
 function usePresence(conversationId) {
   const { client } = useChatContext();
-  const [members, setMembers] = React3.useState([]);
-  React3.useEffect(() => {
+  const [members, setMembers] = React4.useState([]);
+  React4.useEffect(() => {
     if (!conversationId) return;
     let cancelled = false;
     (async () => {
@@ -1342,9 +1390,9 @@ function usePresence(conversationId) {
 }
 function useTyping(conversationId) {
   const { client } = useChatContext();
-  const [typingUsers, setTypingUsers] = React3.useState([]);
-  const typingTimers = React3.useRef(/* @__PURE__ */ new Map());
-  React3.useEffect(() => {
+  const [typingUsers, setTypingUsers] = React4.useState([]);
+  const typingTimers = React4.useRef(/* @__PURE__ */ new Map());
+  React4.useEffect(() => {
     if (!conversationId) return;
     const unsubTyping = client.on("typing", ({ conversationId: convId, userId }) => {
       if (convId !== conversationId) return;
@@ -1377,7 +1425,7 @@ function useTyping(conversationId) {
       typingTimers.current.clear();
     };
   }, [client, conversationId]);
-  const sendTyping = React3.useCallback(
+  const sendTyping = React4.useCallback(
     (isTyping = true) => {
       if (!conversationId) return;
       client.sendTyping(conversationId, isTyping);
@@ -1388,10 +1436,10 @@ function useTyping(conversationId) {
 }
 function useConversations(options) {
   const { client } = useChatContext();
-  const [conversations, setConversations] = React3.useState([]);
-  const [isLoading, setIsLoading] = React3.useState(true);
-  const refreshTimer = React3.useRef(null);
-  const fetchConversations = React3.useCallback(async () => {
+  const [conversations, setConversations] = React4.useState([]);
+  const [isLoading, setIsLoading] = React4.useState(true);
+  const refreshTimer = React4.useRef(null);
+  const fetchConversations = React4.useCallback(async () => {
     const result = await client.listConversations({
       conversation_type: options?.conversationType
     });
@@ -1400,10 +1448,10 @@ function useConversations(options) {
     }
     setIsLoading(false);
   }, [client, options?.conversationType]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     fetchConversations();
   }, [fetchConversations]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     return client.on("inbox:update", () => {
       if (refreshTimer.current) clearTimeout(refreshTimer.current);
       refreshTimer.current = setTimeout(() => {
@@ -1411,14 +1459,14 @@ function useConversations(options) {
       }, 500);
     });
   }, [client, fetchConversations]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     return client.on("read", ({ conversationId }) => {
       setConversations(
         (prev) => prev.map((c) => c.id === conversationId ? { ...c, unread_count: 0 } : c)
       );
     });
   }, [client]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     return () => {
       if (refreshTimer.current) clearTimeout(refreshTimer.current);
     };
@@ -1427,8 +1475,8 @@ function useConversations(options) {
 }
 function useUnreadCount() {
   const { client } = useChatContext();
-  const [totalUnread, setTotalUnread] = React3.useState(0);
-  React3.useEffect(() => {
+  const [totalUnread, setTotalUnread] = React4.useState(0);
+  React4.useEffect(() => {
     (async () => {
       const result = await client.getUnreadTotal();
       if (result.data) {
@@ -1436,12 +1484,12 @@ function useUnreadCount() {
       }
     })();
   }, [client]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     return client.on("inbox:update", () => {
       setTotalUnread((prev) => prev + 1);
     });
   }, [client]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     return client.on("read", () => {
       (async () => {
         const result = await client.getUnreadTotal();