@poolse/react 2.0.12 → 2.1.0

package/dist/index.d.ts

@@ -181,6 +181,15 @@ interface UseMessagesState {
      * "tell the server we read up to here".
      */
     markReadUpTo: (messageId: Uuid) => Promise<void>;
+    /**
+     * Re-fetch the newest page (PAGE_SIZE) and replace the cached
+     * messages. Useful when the app returns from background or the
+     * realtime socket reconnects after a drop — any messages we missed
+     * while disconnected are pulled in via REST. Pagination resets:
+     * `hasMore` becomes true again so `loadMore()` will walk back from
+     * the new tail.
+     */
+    refetch: () => Promise<void>;
 }
 /**
  * Live message list for `conversationId`. Combines:
@@ -303,8 +312,15 @@ interface UseTypingState {
 }
 /**
  * Tracks who's typing in `conversationId`. Subscribes to the
- * `typing:start` / `typing:stop` broadcasts; auto-cleans up entries
- * when stop fires.
+ * `typing:start` / `typing:stop` broadcasts, plus two purely
+ * client-side eviction paths that keep the chip from lingering when
+ * the server is slow (or never) to send `typing:stop`:
+ *
+ *   1. Per-user inactivity timer — each `typing:start` resets a 4 s
+ *      timeout for that `external_id`; when it fires we drop them
+ *      from the set. Covers "they stopped typing without sending".
+ *   2. `message:new` from the same sender — if a typing user sends a
+ *      message, we evict them immediately. Covers "they just sent".
  */
 declare function useTyping(conversationId: string): UseTypingState;
 
@@ -448,4 +464,25 @@ interface UseUserState {
  */
 declare function useUser(externalId: string | null | undefined): UseUserState;
 
-export { PoolseProvider, type PoolseProviderProps, type ReactionMap, type UploadItem, type UploadItemStatus, type UseUserState, useAttachmentUpload, useAttachmentUrl, useConversation, useConversations, useMe, useMembers, useMessages, usePoolse, usePresence, useReactions, useRealtimeStatus, useThread, useTyping, useUser };
+/**
+ * Where this message sits inside a same-sender, same-day, in-window
+ * cluster. Drives the bubble's corner treatment + the row's
+ * inter-cluster margin.
+ *
+ *   * `standalone`  — single bubble, gets the tail
+ *   * `first`       — first of multi; all corners rounded
+ *   * `middle`      — interior; all corners rounded
+ *   * `last`        — last of multi; gets the tail
+ */
+type GroupPosition = 'first' | 'middle' | 'last' | 'standalone';
+declare function computeGroupPosition(msg: Message, prev: Message | null, next: Message | null, windowMs: number): GroupPosition;
+declare function sameGroup(a: Message | null, b: Message | null, windowMs: number): boolean;
+declare function sameDay(a: string, b: string): boolean;
+/**
+ * "Today" / "Yesterday" / "Mon, 26 May" / "26 May 2024" — same
+ * convention as iMessage / WhatsApp / Telegram. `now` is exposed
+ * for deterministic testing; defaults to the current wall clock.
+ */
+declare function formatDayLabel(iso: string, now?: Date): string;
+
+export { type GroupPosition, PoolseProvider, type PoolseProviderProps, type ReactionMap, type UploadItem, type UploadItemStatus, type UseUserState, computeGroupPosition, formatDayLabel, sameDay, sameGroup, useAttachmentUpload, useAttachmentUrl, useConversation, useConversations, useMe, useMembers, useMessages, usePoolse, usePresence, useReactions, useRealtimeStatus, useThread, useTyping, useUser };

package/dist/index.js

@@ -315,6 +315,7 @@ function useMessages(conversationId) {
   const [error, setError] = useState(null);
   const [hasMore, setHasMore] = useState(true);
   const oldestSequenceRef = useRef(null);
+  const refetchRef = useRef(null);
   const meIdRef = useRef(me?.id ?? null);
   meIdRef.current = me?.id ?? null;
   const meExternalIdRef = useRef(me?.external_id ?? null);
@@ -339,6 +340,13 @@ function useMessages(conversationId) {
       setError(err instanceof Error ? err : new Error(String(err)));
       setLoading(false);
     });
+    refetchRef.current = async () => {
+      const page = await handle.list({ limit: PAGE_SIZE });
+      const ordered = [...page.data].reverse();
+      setMessages(ordered);
+      setHasMore(page.data.length === PAGE_SIZE);
+      oldestSequenceRef.current = ordered[0]?.sequence ?? null;
+    };
     const conv = chat.realtime.conversation(conversationId);
     const offNew = conv.onMessage((msg) => {
       if (msg.thread_root_id) {
@@ -488,6 +496,11 @@ function useMessages(conversationId) {
     },
     [chat, conversationId]
   );
+  const refetch = useCallback(async () => {
+    const fn = refetchRef.current;
+    if (!fn) return;
+    await fn();
+  }, []);
   return {
     messages,
     loading,
@@ -497,7 +510,8 @@ function useMessages(conversationId) {
     send,
     edit,
     delete: deleteMessage,
-    markReadUpTo
+    markReadUpTo,
+    refetch
   };
 }
 function upsertById(prev, msg) {
@@ -734,6 +748,7 @@ function upsertById2(prev, msg) {
   next[idx] = msg;
   return next;
 }
+var TYPING_TIMEOUT_MS = 4e3;
 function useTyping(conversationId) {
   const chat = usePoolse();
   const { me } = useMe();
@@ -743,11 +758,31 @@ function useTyping(conversationId) {
   meExtRef.current = me?.external_id ?? null;
   useEffect(() => {
     setTyping(/* @__PURE__ */ new Set());
+    const timers = /* @__PURE__ */ new Map();
+    const evict = (ext) => {
+      const t = timers.get(ext);
+      if (t) {
+        clearTimeout(t);
+        timers.delete(ext);
+      }
+      setTyping((prev) => {
+        if (!prev.has(ext)) return prev;
+        const next = new Set(prev);
+        next.delete(ext);
+        return next;
+      });
+    };
     const conv = chat.realtime.conversation(conversationId);
     const offStart = conv.onTypingStart((evt) => {
       const ext = evt.external_id;
       if (!ext) return;
       if (meExtRef.current && ext === meExtRef.current) return;
+      const existing = timers.get(ext);
+      if (existing) clearTimeout(existing);
+      timers.set(
+        ext,
+        setTimeout(() => evict(ext), TYPING_TIMEOUT_MS)
+      );
       setTyping((prev) => {
         if (prev.has(ext)) return prev;
         const next = new Set(prev);
@@ -759,16 +794,20 @@ function useTyping(conversationId) {
       const ext = evt.external_id;
       if (!ext) return;
       if (meExtRef.current && ext === meExtRef.current) return;
-      setTyping((prev) => {
-        if (!prev.has(ext)) return prev;
-        const next = new Set(prev);
-        next.delete(ext);
-        return next;
-      });
+      evict(ext);
+    });
+    const offMessage = conv.onMessage((msg) => {
+      const ext = msg.sender_external_id;
+      if (!ext) return;
+      if (meExtRef.current && ext === meExtRef.current) return;
+      evict(ext);
     });
     return () => {
       offStart();
       offStop();
+      offMessage();
+      for (const t of timers.values()) clearTimeout(t);
+      timers.clear();
     };
   }, [chat, conversationId]);
   const signalTyping = useCallback(() => {
@@ -985,6 +1024,43 @@ function useUser(externalId) {
   return state;
 }
 
-export { PoolseProvider, useAttachmentUpload, useAttachmentUrl, useConversation, useConversations, useMe, useMembers, useMessages, usePoolse, usePresence, useReactions, useRealtimeStatus, useThread, useTyping, useUser };
+// src/grouping.ts
+function computeGroupPosition(msg, prev, next, windowMs) {
+  const continuesPrev = sameGroup(msg, prev, windowMs);
+  const continuesNext = sameGroup(next, msg, windowMs);
+  if (continuesPrev && continuesNext) return "middle";
+  if (continuesPrev) return "last";
+  if (continuesNext) return "first";
+  return "standalone";
+}
+function sameGroup(a, b, windowMs) {
+  if (!a || !b) return false;
+  if (a.sender_id !== b.sender_id) return false;
+  if (!sameDay(a.inserted_at, b.inserted_at)) return false;
+  const ta = new Date(a.inserted_at).getTime();
+  const tb = new Date(b.inserted_at).getTime();
+  return Math.abs(ta - tb) <= windowMs;
+}
+function sameDay(a, b) {
+  const da = new Date(a);
+  const db = new Date(b);
+  return da.getFullYear() === db.getFullYear() && da.getMonth() === db.getMonth() && da.getDate() === db.getDate();
+}
+function formatDayLabel(iso, now = /* @__PURE__ */ new Date()) {
+  const d = new Date(iso);
+  const startOfDay = (x) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
+  const diffDays = Math.floor((startOfDay(now) - startOfDay(d)) / 864e5);
+  if (diffDays === 0) return "Today";
+  if (diffDays === 1) return "Yesterday";
+  if (diffDays < 7) {
+    return d.toLocaleDateString(void 0, { weekday: "long" });
+  }
+  if (d.getFullYear() === now.getFullYear()) {
+    return d.toLocaleDateString(void 0, { weekday: "short", day: "numeric", month: "short" });
+  }
+  return d.toLocaleDateString(void 0, { day: "numeric", month: "short", year: "numeric" });
+}
+
+export { PoolseProvider, computeGroupPosition, formatDayLabel, sameDay, sameGroup, useAttachmentUpload, useAttachmentUrl, useConversation, useConversations, useMe, useMembers, useMessages, usePoolse, usePresence, useReactions, useRealtimeStatus, useThread, useTyping, useUser };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map