@liveblocks/react 1.10.0-beta2 → 1.10.0-beta4

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { detectDupes } from "@liveblocks/core";
 
 // src/version.ts
 var PKG_NAME = "@liveblocks/react";
-var PKG_VERSION = "1.10.0-beta2";
+var PKG_VERSION = "1.10.0-beta4";
 var PKG_FORMAT = "esm";
 
 // src/ClientSideSuspense.tsx
@@ -34,7 +34,10 @@ import { useSyncExternalStoreWithSelector as useSyncExternalStoreWithSelector2 }
 import { applyOptimisticUpdates } from "@liveblocks/core";
 function selectedInboxNotifications(state) {
   const result = applyOptimisticUpdates(state);
-  return Object.values(result.inboxNotifications);
+  return Object.values(result.inboxNotifications).sort(
+    // Sort so that the most recent notifications are first
+    (a, b) => b.notifiedAt.getTime() - a.notifiedAt.getTime()
+  );
 }
 
 // src/shared.ts
@@ -45,8 +48,10 @@ import { useSyncExternalStore as useSyncExternalStore2 } from "use-sync-external
 // src/room.tsx
 import { shallow } from "@liveblocks/client";
 import {
+  addReaction,
   CommentsApiError,
   console as console2,
+  deleteComment,
   deprecateIf,
   errorIf,
   isLiveNode,
@@ -54,8 +59,10 @@ import {
   makeEventSource,
   makePoller,
   NotificationsApiError,
+  removeReaction,
   ServerMsgCode,
-  stringify
+  stringify,
+  upsertComment
 } from "@liveblocks/core";
 import { nanoid as nanoid2 } from "nanoid";
 import * as React2 from "react";
@@ -151,11 +158,12 @@ function createCommentId() {
 
 // src/comments/lib/select-notification-settings.ts
 import {
-  applyOptimisticUpdates as applyOptimisticUpdates2
+  applyOptimisticUpdates as applyOptimisticUpdates2,
+  nn
 } from "@liveblocks/core";
 function selectNotificationSettings(roomId, state) {
   const { notificationSettings } = applyOptimisticUpdates2(state);
-  return notificationSettings[roomId];
+  return nn(notificationSettings[roomId]);
 }
 
 // src/comments/lib/selected-threads.ts
@@ -167,6 +175,9 @@ function selectedThreads(roomId, state, options) {
   const threads = Object.values(result.threads).filter((thread) => {
     if (thread.roomId !== roomId)
       return false;
+    if (thread.deletedAt !== void 0) {
+      return false;
+    }
     const query = options.query;
     if (!query)
       return true;
@@ -180,34 +191,6 @@ function selectedThreads(roomId, state, options) {
   return threads.sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime());
 }
 
-// src/comments/lib/upsert-comment.ts
-function upsertComment(threads, newComment) {
-  const thread = threads[newComment.threadId];
-  if (thread === void 0) {
-    return threads;
-  }
-  const newComments = [];
-  let updated = false;
-  for (const comment of thread.comments) {
-    if (comment.id === newComment.id) {
-      updated = true;
-      newComments.push(newComment);
-    } else {
-      newComments.push(comment);
-    }
-  }
-  if (!updated) {
-    newComments.push(newComment);
-  }
-  return {
-    ...threads,
-    [thread.id]: {
-      ...thread,
-      comments: newComments
-    }
-  };
-}
-
 // src/lib/use-initial.ts
 import { useState as useState2 } from "react";
 function useInitial(value) {
@@ -376,7 +359,9 @@ function createRoomContext(client, options) {
     );
     React2.useEffect(() => {
       async function handleCommentEvent(message) {
-        const info = await room.getThread({ threadId: message.threadId });
+        const info = await room[kInternal].comments.getThread({
+          threadId: message.threadId
+        });
         if (!info) {
           store.deleteThread(message.threadId);
           return;
@@ -404,6 +389,9 @@ function createRoomContext(client, options) {
         (message) => void handleCommentEvent(message)
       );
     }, [room]);
+    React2.useEffect(() => {
+      void getThreadsUpdates(room.id);
+    }, [room.id]);
     React2.useEffect(() => {
       const pair = stableEnterRoom(roomId, frozenProps);
       setRoomLeavePair(pair);
@@ -786,15 +774,46 @@ function createRoomContext(client, options) {
   const requestsCache = /* @__PURE__ */ new Map();
   const poller = makePoller(refreshThreadsAndNotifications);
   async function refreshThreadsAndNotifications() {
-    await Promise.allSettled(
-      Array.from(requestsCache.entries()).filter(([_, requestCache]) => requestCache.subscribers > 0).map(async ([_, requestCache]) => {
-        return requestCache.requestFactory().then(
-          (result) => requestCache.onSuccess(result),
-          () => {
-          }
+    const requests = [];
+    client[kInternal].getRoomIds().map((roomId) => {
+      const room = client.getRoom(roomId);
+      if (room === null)
+        return;
+      const notificationSettingsQuery = makeNotificationSettingsQueryKey(
+        room.id
+      );
+      if (requestsCache.has(notificationSettingsQuery)) {
+        requests.push(
+          room[kInternal].notifications.getRoomNotificationSettings().then((settings) => {
+            store.updateRoomInboxNotificationSettings(
+              room.id,
+              settings,
+              notificationSettingsQuery
+            );
+          }).catch(() => {
+          })
         );
-      })
-    );
+      }
+      const lastRequestedAt = lastRequestedAtByRoom.get(room.id);
+      if (lastRequestedAt === void 0)
+        return;
+      requests.push(
+        room[kInternal].comments.getThreads({ since: lastRequestedAt }).then((result) => {
+          store.updateThreadsAndNotifications(
+            result.threads,
+            result.inboxNotifications,
+            result.deletedThreads,
+            result.deletedInboxNotifications
+          );
+          const room2 = client.getRoom(roomId);
+          if (room2 === null)
+            return;
+          lastRequestedAtByRoom.set(room2.id, result.meta.requestedAt);
+        }).catch(() => {
+        })
+      );
+    });
+    await Promise.allSettled(requests);
   }
   function incrementQuerySubscribers(queryKey) {
     const requestCache = requestsCache.get(queryKey);
@@ -824,16 +843,14 @@ function createRoomContext(client, options) {
       poller.stop();
     }
   }
-  async function getOrInitRequest(queryKey, requestFactory, onSuccess) {
+  async function getThreadsAndInboxNotifications(room, queryKey, options2) {
     const requestInfo = requestsCache.get(queryKey);
     if (requestInfo !== void 0) {
       return requestInfo.promise;
     }
-    const promise = requestFactory();
+    const promise = room[kInternal].comments.getThreads(options2);
     requestsCache.set(queryKey, {
       promise,
-      requestFactory,
-      onSuccess,
       subscribers: 0
     });
     store.setQueryState(queryKey, {
@@ -841,36 +858,53 @@ function createRoomContext(client, options) {
     });
     try {
       const result = await promise;
-      onSuccess(result);
-    } catch (er) {
+      store.updateThreadsAndNotifications(
+        result.threads,
+        result.inboxNotifications,
+        result.deletedThreads,
+        result.deletedInboxNotifications,
+        queryKey
+      );
+      const lastRequestedAt = lastRequestedAtByRoom.get(room.id);
+      if (lastRequestedAt === void 0 || lastRequestedAt > result.meta.requestedAt) {
+        lastRequestedAtByRoom.set(room.id, result.meta.requestedAt);
+      }
+    } catch (err) {
       store.setQueryState(queryKey, {
         isLoading: false,
-        error: er
+        error: err
       });
     }
     poller.start(POLLING_INTERVAL);
   }
-  async function getThreadsAndInboxNotifications(room, queryKey, options2) {
-    const roomId = room.id;
-    return getOrInitRequest(
-      queryKey,
-      async () => {
-        const room2 = client.getRoom(roomId);
-        if (room2 === null) {
-          return;
-        }
-        return room2.getThreads(options2);
-      },
-      (result) => {
-        if (result !== void 0) {
-          store.updateThreadsAndNotifications(
-            result.threads,
-            result.inboxNotifications,
-            queryKey
-          );
-        }
-      }
-    );
+  const DEFAULT_DEDUPING_INTERVAL = 2e3;
+  const lastRequestedAtByRoom = /* @__PURE__ */ new Map();
+  let isFetchingThreadsUpdates = false;
+  async function getThreadsUpdates(roomId) {
+    const room = client.getRoom(roomId);
+    if (room === null)
+      return;
+    const since = lastRequestedAtByRoom.get(room.id);
+    if (since === void 0)
+      return;
+    if (isFetchingThreadsUpdates)
+      return;
+    try {
+      isFetchingThreadsUpdates = true;
+      const updates = await room[kInternal].comments.getThreads({ since });
+      setTimeout(() => {
+        isFetchingThreadsUpdates = false;
+      }, DEFAULT_DEDUPING_INTERVAL);
+      store.updateThreadsAndNotifications(
+        updates.threads,
+        updates.inboxNotifications,
+        updates.deletedThreads,
+        updates.deletedInboxNotifications
+      );
+      lastRequestedAtByRoom.set(room.id, updates.meta.requestedAt);
+    } catch (err) {
+      isFetchingThreadsUpdates = false;
+    }
   }
   function useThreads(options2 = { query: { metadata: {} } }) {
     const room = useRoom();
@@ -885,7 +919,8 @@ function createRoomContext(client, options) {
     }, [room, queryKey]);
     const selector = React2.useCallback(
       (state) => {
-        if (state.queries[queryKey] === void 0 || state.queries[queryKey].isLoading) {
+        const query = state.queries[queryKey];
+        if (query === void 0 || query.isLoading) {
           return {
             isLoading: true
           };
@@ -893,7 +928,7 @@ function createRoomContext(client, options) {
         return {
           threads: selectedThreads(room.id, state, options2),
           isLoading: false,
-          error: state.queries[queryKey].error
+          error: query.error
         };
       },
       [room, queryKey]
@@ -934,7 +969,7 @@ function createRoomContext(client, options) {
       return () => {
         decrementQuerySubscribers(queryKey);
       };
-    }, [room, queryKey]);
+    }, [queryKey]);
     return useSyncExternalStoreWithSelector(
       store.subscribe,
       store.get,
@@ -950,12 +985,12 @@ function createRoomContext(client, options) {
         const metadata = "metadata" in options2 ? options2.metadata : {};
         const threadId = createThreadId();
         const commentId = createCommentId();
-        const now = /* @__PURE__ */ new Date();
+        const createdAt = /* @__PURE__ */ new Date();
         const newComment = {
           id: commentId,
           threadId,
           roomId: room.id,
-          createdAt: now,
+          createdAt,
           type: "comment",
           userId: getCurrentUserId(room),
           body,
@@ -964,7 +999,8 @@ function createRoomContext(client, options) {
         const newThread = {
           id: threadId,
           type: "thread",
-          createdAt: now,
+          createdAt,
+          updatedAt: createdAt,
           roomId: room.id,
           metadata,
           comments: [newComment]
@@ -975,7 +1011,7 @@ function createRoomContext(client, options) {
           thread: newThread,
           id: optimisticUpdateId
         });
-        room.createThread({ threadId, commentId, body, metadata }).then(
+        room[kInternal].comments.createThread({ threadId, commentId, body, metadata }).then(
           (thread) => {
             store.set((state) => ({
               ...state,
@@ -1014,31 +1050,55 @@ function createRoomContext(client, options) {
         }
         const threadId = options2.threadId;
         const metadata = options2.metadata;
+        const updatedAt = /* @__PURE__ */ new Date();
         const optimisticUpdateId = nanoid2();
         store.pushOptimisticUpdate({
           type: "edit-thread-metadata",
           metadata,
           id: optimisticUpdateId,
-          threadId
+          threadId,
+          updatedAt
         });
-        room.editThreadMetadata({ metadata, threadId }).then(
+        room[kInternal].comments.editThreadMetadata({ metadata, threadId }).then(
           (metadata2) => {
-            store.set((state) => ({
-              ...state,
-              threads: {
-                ...state.threads,
-                [threadId]: {
-                  ...state.threads[threadId],
-                  metadata: {
-                    ...state.threads[threadId].metadata,
-                    ...metadata2
-                  }
-                }
-              },
-              optimisticUpdates: state.optimisticUpdates.filter(
+            store.set((state) => {
+              const existingThread = state.threads[threadId];
+              const updatedOptimisticUpdates = state.optimisticUpdates.filter(
                 (update) => update.id !== optimisticUpdateId
-              )
-            }));
+              );
+              if (existingThread === void 0) {
+                return {
+                  ...state,
+                  optimisticUpdates: updatedOptimisticUpdates
+                };
+              }
+              if (existingThread.deletedAt !== void 0) {
+                return {
+                  ...state,
+                  optimisticUpdates: updatedOptimisticUpdates
+                };
+              }
+              if (existingThread.updatedAt && existingThread.updatedAt > updatedAt) {
+                return {
+                  ...state,
+                  optimisticUpdates: updatedOptimisticUpdates
+                };
+              }
+              return {
+                ...state,
+                threads: {
+                  ...state.threads,
+                  [threadId]: {
+                    ...existingThread,
+                    metadata: {
+                      ...existingThread.metadata,
+                      ...metadata2
+                    }
+                  }
+                },
+                optimisticUpdates: updatedOptimisticUpdates
+              };
+            });
           },
           (err) => onMutationFailure(
             err,
@@ -1058,55 +1118,46 @@ function createRoomContext(client, options) {
     const room = useRoom();
     return React2.useCallback(
       ({ threadId, commentId, emoji }) => {
-        const now = /* @__PURE__ */ new Date();
+        const createdAt = /* @__PURE__ */ new Date();
         const userId = getCurrentUserId(room);
         const optimisticUpdateId = nanoid2();
         store.pushOptimisticUpdate({
           type: "add-reaction",
           threadId,
           commentId,
-          emoji,
-          userId,
-          createdAt: now,
+          reaction: {
+            emoji,
+            userId,
+            createdAt
+          },
           id: optimisticUpdateId
         });
-        room.addReaction({ threadId, commentId, emoji }).then(
+        room[kInternal].comments.addReaction({ threadId, commentId, emoji }).then(
           (addedReaction) => {
-            store.set((state) => ({
-              ...state,
-              threads: {
-                ...state.threads,
-                [threadId]: {
-                  ...state.threads[threadId],
-                  comments: state.threads[threadId].comments.map(
-                    (comment) => comment.id === commentId ? {
-                      ...comment,
-                      reactions: comment.reactions.some(
-                        (reaction) => reaction.emoji === addedReaction.emoji
-                      ) ? comment.reactions.map(
-                        (reaction) => reaction.emoji === addedReaction.emoji ? {
-                          ...reaction,
-                          users: [
-                            ...reaction.users,
-                            { id: addedReaction.userId }
-                          ]
-                        } : reaction
-                      ) : [
-                        ...comment.reactions,
-                        {
-                          emoji: addedReaction.emoji,
-                          createdAt: addedReaction.createdAt,
-                          users: [{ id: addedReaction.userId }]
-                        }
-                      ]
-                    } : comment
-                  )
-                }
-              },
-              optimisticUpdates: state.optimisticUpdates.filter(
+            store.set((state) => {
+              const existingThread = state.threads[threadId];
+              const updatedOptimisticUpdates = state.optimisticUpdates.filter(
                 (update) => update.id !== optimisticUpdateId
-              )
-            }));
+              );
+              if (existingThread === void 0) {
+                return {
+                  ...state,
+                  optimisticUpdates: updatedOptimisticUpdates
+                };
+              }
+              return {
+                ...state,
+                threads: {
+                  ...state.threads,
+                  [threadId]: addReaction(
+                    existingThread,
+                    commentId,
+                    addedReaction
+                  )
+                },
+                optimisticUpdates: updatedOptimisticUpdates
+              };
+            });
           },
           (err) => onMutationFailure(
             err,
@@ -1128,6 +1179,7 @@ function createRoomContext(client, options) {
     return React2.useCallback(
       ({ threadId, commentId, emoji }) => {
         const userId = getCurrentUserId(room);
+        const removedAt = /* @__PURE__ */ new Date();
         const optimisticUpdateId = nanoid2();
         store.pushOptimisticUpdate({
           type: "remove-reaction",
@@ -1135,50 +1187,37 @@ function createRoomContext(client, options) {
           commentId,
           emoji,
           userId,
+          removedAt,
           id: optimisticUpdateId
         });
-        room.removeReaction({ threadId, commentId, emoji }).then(
+        room[kInternal].comments.removeReaction({ threadId, commentId, emoji }).then(
           () => {
-            store.set((state) => ({
-              ...state,
-              threads: {
-                ...state.threads,
-                [threadId]: {
-                  ...state.threads[threadId],
-                  comments: state.threads[threadId].comments.map((comment) => {
-                    if (comment.id !== commentId) {
-                      return comment;
-                    }
-                    const reactionIndex = comment.reactions.findIndex(
-                      (reaction) => reaction.emoji === emoji
-                    );
-                    let reactions = comment.reactions;
-                    if (reactionIndex >= 0 && comment.reactions[reactionIndex].users.some(
-                      (user) => user.id === userId
-                    )) {
-                      if (comment.reactions[reactionIndex].users.length <= 1) {
-                        reactions = [...comment.reactions];
-                        reactions.splice(reactionIndex, 1);
-                      } else {
-                        reactions[reactionIndex] = {
-                          ...reactions[reactionIndex],
-                          users: reactions[reactionIndex].users.filter(
-                            (user) => user.id !== userId
-                          )
-                        };
-                      }
-                    }
-                    return {
-                      ...comment,
-                      reactions
-                    };
-                  })
-                }
-              },
-              optimisticUpdates: state.optimisticUpdates.filter(
+            store.set((state) => {
+              const existingThread = state.threads[threadId];
+              const updatedOptimisticUpdates = state.optimisticUpdates.filter(
                 (update) => update.id !== optimisticUpdateId
-              )
-            }));
+              );
+              if (existingThread === void 0) {
+                return {
+                  ...state,
+                  optimisticUpdates: updatedOptimisticUpdates
+                };
+              }
+              return {
+                ...state,
+                threads: {
+                  ...state.threads,
+                  [threadId]: removeReaction(
+                    existingThread,
+                    commentId,
+                    emoji,
+                    userId,
+                    removedAt
+                  )
+                },
+                optimisticUpdates: updatedOptimisticUpdates
+              };
+            });
           },
           (err) => onMutationFailure(
             err,
@@ -1200,44 +1239,58 @@ function createRoomContext(client, options) {
     return React2.useCallback(
       ({ threadId, body }) => {
         const commentId = createCommentId();
-        const now = /* @__PURE__ */ new Date();
+        const createdAt = /* @__PURE__ */ new Date();
         const comment = {
           id: commentId,
           threadId,
           roomId: room.id,
           type: "comment",
-          createdAt: now,
+          createdAt,
           userId: getCurrentUserId(room),
           body,
           reactions: []
         };
         const optimisticUpdateId = nanoid2();
-        const inboxNotification = Object.values(
-          store.get().inboxNotifications
-        ).find((inboxNotification2) => inboxNotification2.threadId === threadId);
         store.pushOptimisticUpdate({
           type: "create-comment",
           comment,
-          id: optimisticUpdateId,
-          inboxNotificationId: inboxNotification?.id
+          id: optimisticUpdateId
         });
-        room.createComment({ threadId, commentId, body }).then(
+        room[kInternal].comments.createComment({ threadId, commentId, body }).then(
           (newComment) => {
-            store.set((state) => ({
-              ...state,
-              threads: upsertComment(state.threads, newComment),
-              inboxNotifications: inboxNotification ? {
+            store.set((state) => {
+              const existingThread = state.threads[threadId];
+              const updatedOptimisticUpdates = state.optimisticUpdates.filter(
+                (update) => update.id !== optimisticUpdateId
+              );
+              if (existingThread === void 0) {
+                return {
+                  ...state,
+                  optimisticUpdates: updatedOptimisticUpdates
+                };
+              }
+              const inboxNotification = Object.values(
+                state.inboxNotifications
+              ).find((notification) => notification.threadId === threadId);
+              const updatedInboxNotifications = inboxNotification !== void 0 ? {
                 ...state.inboxNotifications,
                 [inboxNotification.id]: {
                   ...inboxNotification,
                   notifiedAt: newComment.createdAt,
                   readAt: newComment.createdAt
                 }
-              } : state.inboxNotifications,
-              optimisticUpdates: state.optimisticUpdates.filter(
-                (update) => update.id !== optimisticUpdateId
-              )
-            }));
+              } : state.inboxNotifications;
+              return {
+                ...state,
+                threads: {
+                  ...state.threads,
+                  [threadId]: upsertComment(existingThread, newComment)
+                  // Upsert the new comment into the thread comments list (if applicable)
+                },
+                inboxNotifications: updatedInboxNotifications,
+                optimisticUpdates: updatedOptimisticUpdates
+              };
+            });
           },
           (err) => onMutationFailure(
             err,
@@ -1259,25 +1312,56 @@ function createRoomContext(client, options) {
     const room = useRoom();
     return React2.useCallback(
       ({ threadId, commentId, body }) => {
-        const now = /* @__PURE__ */ new Date();
+        const editedAt = /* @__PURE__ */ new Date();
         const optimisticUpdateId = nanoid2();
+        const thread = store.get().threads[threadId];
+        if (thread === void 0) {
+          console2.warn(
+            `Internal unexpected behavior. Cannot edit comment in thread "${threadId}" because the thread does not exist in the cache.`
+          );
+          return;
+        }
+        const comment = thread.comments.find(
+          (comment2) => comment2.id === commentId
+        );
+        if (comment === void 0 || comment.deletedAt !== void 0) {
+          console2.warn(
+            `Internal unexpected behavior. Cannot edit comment "${commentId}" in thread "${threadId}" because the comment does not exist in the cache.`
+          );
+          return;
+        }
         store.pushOptimisticUpdate({
           type: "edit-comment",
-          threadId,
-          commentId,
-          body,
-          editedAt: now,
+          comment: {
+            ...comment,
+            editedAt,
+            body
+          },
           id: optimisticUpdateId
         });
-        room.editComment({ threadId, commentId, body }).then(
+        room[kInternal].comments.editComment({ threadId, commentId, body }).then(
           (editedComment) => {
-            store.set((state) => ({
-              ...state,
-              threads: upsertComment(state.threads, editedComment),
-              optimisticUpdates: state.optimisticUpdates.filter(
+            store.set((state) => {
+              const existingThread = state.threads[threadId];
+              const updatedOptimisticUpdates = state.optimisticUpdates.filter(
                 (update) => update.id !== optimisticUpdateId
-              )
-            }));
+              );
+              if (existingThread === void 0) {
+                return {
+                  ...state,
+                  optimisticUpdates: updatedOptimisticUpdates
+                };
+              }
+              return {
+                ...state,
+                threads: {
+                  ...state.threads,
+                  [threadId]: upsertComment(existingThread, editedComment)
+                  // Upsert the edited comment into the thread comments list (if applicable)
+                },
+                optimisticUpdates: updatedOptimisticUpdates
+              };
+            });
           },
           (err) => onMutationFailure(
             err,
@@ -1298,43 +1382,41 @@ function createRoomContext(client, options) {
     const room = useRoom();
     return React2.useCallback(
       ({ threadId, commentId }) => {
-        const now = /* @__PURE__ */ new Date();
+        const deletedAt = /* @__PURE__ */ new Date();
         const optimisticUpdateId = nanoid2();
         store.pushOptimisticUpdate({
           type: "delete-comment",
           threadId,
           commentId,
-          deletedAt: now,
+          deletedAt,
           id: optimisticUpdateId
         });
-        room.deleteComment({ threadId, commentId }).then(
+        room[kInternal].comments.deleteComment({ threadId, commentId }).then(
           () => {
-            const newThreads = { ...store.get().threads };
-            const thread = newThreads[threadId];
-            if (thread === void 0)
-              return;
-            newThreads[thread.id] = {
-              ...thread,
-              comments: thread.comments.map(
-                (comment) => comment.id === commentId ? {
-                  ...comment,
-                  deletedAt: now,
-                  body: void 0
-                } : comment
-              )
-            };
-            if (!newThreads[thread.id].comments.some(
-              (comment) => comment.deletedAt === void 0
-            )) {
-              delete newThreads[thread.id];
-            }
-            store.set((state) => ({
-              ...state,
-              threads: newThreads,
-              optimisticUpdates: state.optimisticUpdates.filter(
+            store.set((state) => {
+              const existingThread = state.threads[threadId];
+              const updatedOptimisticUpdates = state.optimisticUpdates.filter(
                 (update) => update.id !== optimisticUpdateId
-              )
-            }));
+              );
+              if (existingThread === void 0) {
+                return {
+                  ...state,
+                  optimisticUpdates: updatedOptimisticUpdates
+                };
+              }
+              return {
+                ...state,
+                threads: {
+                  ...state.threads,
+                  [threadId]: deleteComment(
+                    existingThread,
+                    commentId,
+                    deletedAt
+                  )
+                },
+                optimisticUpdates: updatedOptimisticUpdates
+              };
+            });
           },
           (err) => onMutationFailure(
             err,
@@ -1402,10 +1484,7 @@ function createRoomContext(client, options) {
     return mentionSuggestions;
   }
   function useThreadSubscription(threadId) {
-    return useSyncExternalStoreWithSelector(
-      store.subscribe,
-      store.get,
-      store.get,
+    const selector = React2.useCallback(
       (state) => {
         const inboxNotification = selectedInboxNotifications(state).find(
           (inboxNotification2) => inboxNotification2.threadId === threadId
@@ -1420,85 +1499,90 @@ function createRoomContext(client, options) {
           status: "subscribed",
           unreadSince: inboxNotification.readAt
         };
-      }
+      },
+      [threadId]
+    );
+    return useSyncExternalStoreWithSelector(
+      store.subscribe,
+      store.get,
+      store.get,
+      selector
     );
   }
   function useMarkThreadAsRead() {
-    return React2.useCallback((threadId) => {
-      const inboxNotification = Object.values(
-        store.get().inboxNotifications
-      ).find((inboxNotification2) => inboxNotification2.threadId === threadId);
-      if (!inboxNotification)
-        return;
-      const optimisticUpdateId = nanoid2();
-      const now = /* @__PURE__ */ new Date();
-      store.pushOptimisticUpdate({
-        type: "mark-inbox-notification-as-read",
-        id: optimisticUpdateId,
-        inboxNotificationId: inboxNotification.id,
-        readAt: now
-      });
-      client.markInboxNotificationAsRead(inboxNotification.id).then(
-        () => {
-          store.set((state) => ({
-            ...state,
-            inboxNotifications: {
-              ...state.inboxNotifications,
-              [inboxNotification.id]: {
-                ...inboxNotification,
-                readAt: now
-              }
-            },
-            optimisticUpdates: state.optimisticUpdates.filter(
-              (update) => update.id !== optimisticUpdateId
-            )
-          }));
-        },
-        (err) => {
-          onMutationFailure(
-            err,
-            optimisticUpdateId,
-            (error) => new MarkInboxNotificationAsReadError(error, {
-              inboxNotificationId: inboxNotification.id
-            })
-          );
+    const room = useRoom();
+    return React2.useCallback(
+      (threadId) => {
+        const inboxNotification = Object.values(
+          store.get().inboxNotifications
+        ).find((inboxNotification2) => inboxNotification2.threadId === threadId);
+        if (!inboxNotification)
           return;
-        }
-      );
-    }, []);
+        const optimisticUpdateId = nanoid2();
+        const now = /* @__PURE__ */ new Date();
+        store.pushOptimisticUpdate({
+          type: "mark-inbox-notification-as-read",
+          id: optimisticUpdateId,
+          inboxNotificationId: inboxNotification.id,
+          readAt: now
+        });
+        room[kInternal].notifications.markInboxNotificationAsRead(inboxNotification.id).then(
+          () => {
+            store.set((state) => ({
+              ...state,
+              inboxNotifications: {
+                ...state.inboxNotifications,
+                [inboxNotification.id]: {
+                  ...inboxNotification,
+                  readAt: now
+                }
+              },
+              optimisticUpdates: state.optimisticUpdates.filter(
+                (update) => update.id !== optimisticUpdateId
+              )
+            }));
+          },
+          (err) => {
+            onMutationFailure(
+              err,
+              optimisticUpdateId,
+              (error) => new MarkInboxNotificationAsReadError(error, {
+                inboxNotificationId: inboxNotification.id
+              })
+            );
+            return;
+          }
+        );
+      },
+      [room]
+    );
   }
   function makeNotificationSettingsQueryKey(roomId) {
     return `${roomId}:NOTIFICATION_SETTINGS`;
   }
   async function getInboxNotificationSettings(room, queryKey) {
-    const roomId = room.id;
-    return getOrInitRequest(
-      queryKey,
-      async () => {
-        const room2 = client.getRoom(roomId);
-        if (room2 === null) {
-          return;
-        }
-        return room2.getRoomNotificationSettings();
-      },
-      (settings) => {
-        if (settings !== void 0) {
-          store.set((state) => ({
-            ...state,
-            notificationSettings: {
-              ...state.notificationSettings,
-              [room.id]: settings
-            },
-            queries: {
-              ...state.queries,
-              [queryKey]: {
-                isLoading: false
-              }
-            }
-          }));
-        }
-      }
-    );
+    const requestInfo = requestsCache.get(queryKey);
+    if (requestInfo !== void 0) {
+      return requestInfo.promise;
+    }
+    const promise = room[kInternal].notifications.getRoomNotificationSettings();
+    requestsCache.set(queryKey, {
+      promise,
+      subscribers: 0
+    });
+    store.setQueryState(queryKey, {
+      isLoading: true
+    });
+    try {
+      const settings = await promise;
+      store.updateRoomInboxNotificationSettings(room.id, settings, queryKey);
+    } catch (err) {
+      store.setQueryState(queryKey, {
+        isLoading: false,
+        error: err
+      });
+    }
+    poller.start(POLLING_INTERVAL);
   }
   function useRoomNotificationSettings() {
     const room = useRoom();
@@ -1509,27 +1593,31 @@ function createRoomContext(client, options) {
       return () => decrementQuerySubscribers(queryKey);
     }, [room]);
     const updateRoomNotificationSettings = useUpdateRoomNotificationSettings();
-    return [
-      useSyncExternalStoreWithSelector(
-        store.subscribe,
-        store.get,
-        store.get,
-        (state) => {
-          const query = state.queries[makeNotificationSettingsQueryKey(room.id)];
-          if (query === void 0 || query.isLoading) {
-            return { isLoading: true };
-          }
-          if (query.error !== void 0) {
-            return { isLoading: false, error: query.error };
-          }
-          return {
-            isLoading: false,
-            settings: selectNotificationSettings(room.id, state)
-          };
+    const selector = React2.useCallback(
+      (state) => {
+        const query = state.queries[makeNotificationSettingsQueryKey(room.id)];
+        if (query === void 0 || query.isLoading) {
+          return { isLoading: true };
         }
-      ),
-      updateRoomNotificationSettings
-    ];
+        if (query.error !== void 0) {
+          return { isLoading: false, error: query.error };
+        }
+        return {
+          isLoading: false,
+          settings: selectNotificationSettings(room.id, state)
+        };
+      },
+      [room]
+    );
+    const settings = useSyncExternalStoreWithSelector(
+      store.subscribe,
+      store.get,
+      store.get,
+      selector
+    );
+    return React2.useMemo(() => {
+      return [settings, updateRoomNotificationSettings];
+    }, [settings, updateRoomNotificationSettings]);
   }
   function useRoomNotificationSettingsSuspense() {
     const updateRoomNotificationSettings = useUpdateRoomNotificationSettings();
@@ -1547,20 +1635,24 @@ function createRoomContext(client, options) {
       incrementQuerySubscribers(queryKey2);
       return () => decrementQuerySubscribers(queryKey2);
     }, [room]);
-    return [
-      useSyncExternalStoreWithSelector(
-        store.subscribe,
-        store.get,
-        store.get,
-        (state) => {
-          return {
-            isLoading: false,
-            settings: selectNotificationSettings(room.id, state)
-          };
-        }
-      ),
-      updateRoomNotificationSettings
-    ];
+    const selector = React2.useCallback(
+      (state) => {
+        return {
+          isLoading: false,
+          settings: selectNotificationSettings(room.id, state)
+        };
+      },
+      [room]
+    );
+    const settings = useSyncExternalStoreWithSelector(
+      store.subscribe,
+      store.get,
+      store.get,
+      selector
+    );
+    return React2.useMemo(() => {
+      return [settings, updateRoomNotificationSettings];
+    }, [settings, updateRoomNotificationSettings]);
   }
   function useUpdateRoomNotificationSettings() {
     const room = useRoom();
@@ -1573,7 +1665,7 @@ function createRoomContext(client, options) {
           roomId: room.id,
           settings
         });
-        room.updateRoomNotificationSettings(settings).then(
+        room[kInternal].notifications.updateRoomNotificationSettings(settings).then(
           (settings2) => {
             store.set((state) => ({
               ...state,
@@ -1799,13 +1891,13 @@ function createSharedContext(client) {
     );
     const roomInfoState = getRoomInfoState();
     if (!roomInfoState || roomInfoState.isLoading) {
-      throw usersStore.get(roomId);
+      throw roomsInfoStore.get(roomId);
     }
     if (roomInfoState.error) {
       throw roomInfoState.error;
     }
     const state = useSyncExternalStore2(
-      usersStore.subscribe,
+      roomsInfoStore.subscribe,
       getRoomInfoState,
       getRoomInfoState
     );
@@ -1834,9 +1926,12 @@ function useLiveblocksContextBundle() {
   }
   return bundle;
 }
+var POLLING_INTERVAL2 = 60 * 1e3;
+var INBOX_NOTIFICATIONS_QUERY = "INBOX_NOTIFICATIONS";
 function createLiveblocksContext(client) {
   const shared = createSharedContext(client);
   const store = client[kInternal3].cacheStore;
+  const notifications = client[kInternal3].notifications;
   function LiveblocksProvider(props) {
     return /* @__PURE__ */ React3.createElement(
       ContextBundle2.Provider,
@@ -1848,15 +1943,17 @@ function createLiveblocksContext(client) {
   }
   let fetchInboxNotificationsRequest = null;
   let inboxNotificationsSubscribers = 0;
-  const INBOX_NOTIFICATIONS_QUERY = "INBOX_NOTIFICATIONS";
-  const POLLING_INTERVAL2 = 60 * 1e3;
+  let lastRequestedAt;
   const poller = makePoller2(refreshThreadsAndNotifications);
   function refreshThreadsAndNotifications() {
-    return client.getInboxNotifications().then(
-      ({ threads, inboxNotifications }) => {
+    return notifications.getInboxNotifications({ since: lastRequestedAt }).then(
+      (result) => {
+        lastRequestedAt = result.meta.requestedAt;
         store.updateThreadsAndNotifications(
-          threads,
-          inboxNotifications,
+          result.threads,
+          result.inboxNotifications,
+          result.deletedThreads,
+          result.deletedInboxNotifications,
           INBOX_NOTIFICATIONS_QUERY
         );
       },
@@ -1888,13 +1985,18 @@ function createLiveblocksContext(client) {
       isLoading: true
     });
     try {
-      fetchInboxNotificationsRequest = client.getInboxNotifications();
-      const { inboxNotifications, threads } = await fetchInboxNotificationsRequest;
+      fetchInboxNotificationsRequest = notifications.getInboxNotifications();
+      const result = await fetchInboxNotificationsRequest;
       store.updateThreadsAndNotifications(
-        threads,
-        inboxNotifications,
+        result.threads,
+        result.inboxNotifications,
+        result.deletedThreads,
+        result.deletedInboxNotifications,
         INBOX_NOTIFICATIONS_QUERY
       );
+      if (lastRequestedAt === void 0 || lastRequestedAt > result.meta.requestedAt) {
+        lastRequestedAt = result.meta.requestedAt;
+      }
     } catch (er) {
       store.setQueryState(INBOX_NOTIFICATIONS_QUERY, {
         isLoading: false,
@@ -1903,39 +2005,47 @@ function createLiveblocksContext(client) {
     }
     return;
   }
+  function useInboxNotificationsSelectorCallback(state) {
+    const query = state.queries[INBOX_NOTIFICATIONS_QUERY];
+    if (query === void 0 || query.isLoading) {
+      return {
+        isLoading: true
+      };
+    }
+    if (query.error !== void 0) {
+      return {
+        error: query.error,
+        isLoading: false
+      };
+    }
+    return {
+      inboxNotifications: selectedInboxNotifications(state),
+      isLoading: false
+    };
+  }
   function useInboxNotifications() {
     useEffect5(() => {
       void fetchInboxNotifications();
       incrementInboxNotificationsSubscribers();
       return () => decrementInboxNotificationsSubscribers();
-    });
+    }, []);
     const result = useSyncExternalStoreWithSelector2(
       store.subscribe,
       store.get,
       store.get,
-      (state) => {
-        const query = state.queries[INBOX_NOTIFICATIONS_QUERY];
-        if (query === void 0 || query.isLoading) {
-          return {
-            isLoading: true
-          };
-        }
-        if (query.error !== void 0) {
-          return {
-            error: query.error,
-            isLoading: false
-          };
-        }
-        return {
-          inboxNotifications: selectedInboxNotifications(state),
-          isLoading: false
-        };
-      }
+      useInboxNotificationsSelectorCallback
     );
     return result;
   }
+  function useInboxNotificationsSuspenseSelector(state) {
+    return {
+      inboxNotifications: selectedInboxNotifications(state),
+      isLoading: false
+    };
+  }
   function useInboxNotificationsSuspense() {
-    if (store.get().queries[INBOX_NOTIFICATIONS_QUERY] === void 0 || store.get().queries[INBOX_NOTIFICATIONS_QUERY].isLoading) {
+    const query = store.get().queries[INBOX_NOTIFICATIONS_QUERY];
+    if (query === void 0 || query.isLoading) {
       throw fetchInboxNotifications();
     }
     React3.useEffect(() => {
@@ -1948,12 +2058,7 @@ function createLiveblocksContext(client) {
       store.subscribe,
       store.get,
       store.get,
-      (state) => {
-        return {
-          inboxNotifications: selectedInboxNotifications(state),
-          isLoading: false
-        };
-      }
+      useInboxNotificationsSuspenseSelector
     );
   }
   function selectUnreadInboxNotificationsCount(state) {
@@ -1965,38 +2070,46 @@ function createLiveblocksContext(client) {
     }
     return count;
   }
+  function useUnreadInboxNotificationsCountSelector(state) {
+    const query = state.queries[INBOX_NOTIFICATIONS_QUERY];
+    if (query === void 0 || query.isLoading) {
+      return {
+        isLoading: true
+      };
+    }
+    if (query.error !== void 0) {
+      return {
+        error: query.error,
+        isLoading: false
+      };
+    }
+    return {
+      isLoading: false,
+      count: selectUnreadInboxNotificationsCount(state)
+    };
+  }
   function useUnreadInboxNotificationsCount() {
     useEffect5(() => {
       void fetchInboxNotifications();
       incrementInboxNotificationsSubscribers();
       return () => decrementInboxNotificationsSubscribers();
-    });
+    }, []);
     return useSyncExternalStoreWithSelector2(
       store.subscribe,
       store.get,
       store.get,
-      (state) => {
-        const query = store.get().queries[INBOX_NOTIFICATIONS_QUERY];
-        if (query === void 0 || query.isLoading) {
-          return {
-            isLoading: true
-          };
-        }
-        if (query.error !== void 0) {
-          return {
-            error: query.error,
-            isLoading: false
-          };
-        }
-        return {
-          isLoading: false,
-          count: selectUnreadInboxNotificationsCount(state)
-        };
-      }
+      useUnreadInboxNotificationsCountSelector
     );
   }
+  function useUnreadInboxNotificationsCountSuspenseSelector(state) {
+    return {
+      isLoading: false,
+      count: selectUnreadInboxNotificationsCount(state)
+    };
+  }
   function useUnreadInboxNotificationsCountSuspense() {
-    if (store.get().queries[INBOX_NOTIFICATIONS_QUERY] === void 0 || store.get().queries[INBOX_NOTIFICATIONS_QUERY].isLoading) {
+    const query = store.get().queries[INBOX_NOTIFICATIONS_QUERY];
+    if (query === void 0 || query.isLoading) {
       throw fetchInboxNotifications();
     }
     React3.useEffect(() => {
@@ -2009,12 +2122,7 @@ function createLiveblocksContext(client) {
       store.subscribe,
       store.get,
       store.get,
-      (state) => {
-        return {
-          isLoading: false,
-          count: selectUnreadInboxNotificationsCount(state)
-        };
-      }
+      useUnreadInboxNotificationsCountSuspenseSelector
     );
   }
   function useMarkInboxNotificationAsRead() {
@@ -2027,22 +2135,32 @@ function createLiveblocksContext(client) {
         inboxNotificationId,
         readAt
       });
-      client.markInboxNotificationAsRead(inboxNotificationId).then(
+      notifications.markInboxNotificationAsRead(inboxNotificationId).then(
         () => {
-          store.set((state) => ({
-            ...state,
-            inboxNotifications: {
-              ...state.inboxNotifications,
-              [inboxNotificationId]: {
-                // TODO: Handle potential deleted inbox notification
-                ...state.inboxNotifications[inboxNotificationId],
-                readAt
-              }
-            },
-            optimisticUpdates: state.optimisticUpdates.filter(
-              (update) => update.id !== optimisticUpdateId
-            )
-          }));
+          store.set((state) => {
+            const existingNotification = state.inboxNotifications[inboxNotificationId];
+            if (existingNotification === void 0) {
+              return {
+                ...state,
+                optimisticUpdates: state.optimisticUpdates.filter(
+                  (update) => update.id !== optimisticUpdateId
+                )
+              };
+            }
+            return {
+              ...state,
+              inboxNotifications: {
+                ...state.inboxNotifications,
+                [inboxNotificationId]: {
+                  ...existingNotification,
+                  readAt
+                }
+              },
+              optimisticUpdates: state.optimisticUpdates.filter(
+                (update) => update.id !== optimisticUpdateId
+              )
+            };
+          });
         },
         () => {
           store.set((state) => ({
@@ -2064,7 +2182,7 @@ function createLiveblocksContext(client) {
         id: optimisticUpdateId,
         readAt
       });
-      client.markAllInboxNotificationsAsRead().then(
+      notifications.markAllInboxNotificationsAsRead().then(
         () => {
           store.set((state) => ({
             ...state,
@@ -2093,10 +2211,7 @@ function createLiveblocksContext(client) {
     }, []);
   }
   function useThreadFromCache(threadId) {
-    return useSyncExternalStoreWithSelector2(
-      store.subscribe,
-      store.get,
-      store.get,
+    const selector = useCallback3(
       (state) => {
         const thread = state.threads[threadId];
         if (thread === void 0) {
@@ -2105,7 +2220,14 @@ function createLiveblocksContext(client) {
           );
         }
         return thread;
-      }
+      },
+      [threadId]
+    );
+    return useSyncExternalStoreWithSelector2(
+      store.subscribe,
+      store.get,
+      store.get,
+      selector
     );
   }
   const currentUserIdStore = client[kInternal3].currentUserIdStore;