@liveblocks/react 1.2.4 → 1.3.1

package/dist/index.mjs

@@ -1,9 +1,11 @@
+"use client";
+
 // src/index.ts
 import { detectDupes } from "@liveblocks/core";
 
 // src/version.ts
 var PKG_NAME = "@liveblocks/react";
-var PKG_VERSION = "1.2.4";
+var PKG_VERSION = "1.3.1";
 var PKG_FORMAT = "esm";
 
 // src/ClientSideSuspense.tsx
@@ -19,15 +21,484 @@ function ClientSideSuspense(props) {
 // src/factory.tsx
 import { shallow } from "@liveblocks/client";
 import {
-  asArrayWithLegacyMethods,
+  createAsyncCache,
   deprecateIf,
-  errorIf
+  errorIf,
+  makeEventSource as makeEventSource2
 } from "@liveblocks/core";
 import * as React2 from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector.js";
 
-// src/hooks.ts
-import { useReducer, useRef } from "react";
+// src/comments/CommentsRoom.ts
+import { makePoller } from "@liveblocks/core";
+import { nanoid } from "nanoid";
+import { useEffect as useEffect2 } from "react";
+import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
+
+// src/comments/errors.ts
+var CreateThreadError = class extends Error {
+  constructor(cause, context) {
+    super("Create thread failed.");
+    this.cause = cause;
+    this.context = context;
+    this.name = "CreateThreadError";
+  }
+};
+var EditThreadMetadataError = class extends Error {
+  constructor(cause, context) {
+    super("Edit thread metadata failed.");
+    this.cause = cause;
+    this.context = context;
+    this.name = "EditThreadMetadataError";
+  }
+};
+var CreateCommentError = class extends Error {
+  constructor(cause, context) {
+    super("Create comment failed.");
+    this.cause = cause;
+    this.context = context;
+    this.name = "CreateCommentError";
+  }
+};
+var EditCommentError = class extends Error {
+  constructor(cause, context) {
+    super("Edit comment failed.");
+    this.cause = cause;
+    this.context = context;
+    this.name = "EditCommentError";
+  }
+};
+var DeleteCommentError = class extends Error {
+  constructor(cause, context) {
+    super("Delete comment failed.");
+    this.cause = cause;
+    this.context = context;
+    this.name = "DeleteCommentError";
+  }
+};
+
+// src/comments/lib/store.ts
+import { makeEventSource } from "@liveblocks/core";
+function createStore(initialState) {
+  let state = initialState;
+  const eventSource = makeEventSource();
+  return {
+    get() {
+      return state;
+    },
+    set(newState) {
+      state = newState;
+      eventSource.notify(state);
+    },
+    subscribe(callback) {
+      return eventSource.subscribe(callback);
+    },
+    subscribeOnce(callback) {
+      return eventSource.subscribeOnce(callback);
+    },
+    subscribersCount() {
+      return eventSource.count();
+    },
+    destroy() {
+      return eventSource.clear();
+    }
+  };
+}
+
+// src/comments/CommentsRoom.ts
+var POLLING_INTERVAL_REALTIME = 3e4;
+var POLLING_INTERVAL = 5e3;
+var THREAD_ID_PREFIX = "th";
+var COMMENT_ID_PREFIX = "cm";
+function createOptimisticId(prefix) {
+  return `${prefix}_${nanoid()}`;
+}
+function createCommentsRoom(room, errorEventSource) {
+  const store = createStore({
+    isLoading: true
+  });
+  let fetchThreadsPromise = null;
+  let numberOfMutations = 0;
+  function endMutation() {
+    numberOfMutations--;
+    if (numberOfMutations === 0) {
+      void revalidateThreads();
+    }
+  }
+  function startMutation() {
+    pollingHub.threads.stop();
+    numberOfMutations++;
+  }
+  const pollingHub = {
+    // TODO: If there's an error, it will currently infinitely retry at the current polling rate → add retry logic
+    threads: makePoller(revalidateThreads)
+  };
+  let unsubscribeRealtimeEvents;
+  let unsubscribeRealtimeConnection;
+  let realtimeClientConnected = false;
+  function getPollingInterval() {
+    return realtimeClientConnected ? POLLING_INTERVAL_REALTIME : POLLING_INTERVAL;
+  }
+  function ensureThreadsAreLoadedForMutations() {
+    const state = store.get();
+    if (state.isLoading || state.error) {
+      throw new Error(
+        "Cannot update threads or comments before they are loaded"
+      );
+    }
+    return state.threads;
+  }
+  async function revalidateThreads() {
+    pollingHub.threads.pause();
+    if (numberOfMutations === 0) {
+      if (fetchThreadsPromise === null) {
+        fetchThreadsPromise = room.getThreads();
+      }
+      setThreads(await fetchThreadsPromise);
+      fetchThreadsPromise = null;
+    }
+    pollingHub.threads.resume();
+  }
+  function subscribe() {
+    if (!unsubscribeRealtimeEvents) {
+      unsubscribeRealtimeEvents = room.events.comments.subscribe(() => {
+        pollingHub.threads.restart(getPollingInterval());
+        void revalidateThreads();
+      });
+    }
+    if (!unsubscribeRealtimeConnection) {
+      unsubscribeRealtimeConnection = room.events.status.subscribe((status) => {
+        const nextRealtimeClientConnected = status === "connected";
+        if (nextRealtimeClientConnected !== realtimeClientConnected) {
+          realtimeClientConnected = nextRealtimeClientConnected;
+          pollingHub.threads.restart(getPollingInterval());
+        }
+      });
+    }
+    pollingHub.threads.start(getPollingInterval());
+    return () => {
+      if (store.subscribersCount() > 1) {
+        return;
+      }
+      pollingHub.threads.stop();
+      unsubscribeRealtimeEvents?.();
+      unsubscribeRealtimeEvents = void 0;
+      unsubscribeRealtimeConnection?.();
+      unsubscribeRealtimeConnection = void 0;
+    };
+  }
+  function setThreads(newThreads) {
+    store.set({
+      threads: newThreads,
+      isLoading: false
+    });
+  }
+  function useThreadsInternal() {
+    useEffect2(subscribe, []);
+    return useSyncExternalStore(
+      store.subscribe,
+      store.get,
+      store.get
+    );
+  }
+  function useThreads() {
+    useEffect2(() => {
+      void revalidateThreads();
+    }, []);
+    return useThreadsInternal();
+  }
+  function useThreadsSuspense() {
+    const result = useThreadsInternal();
+    if (result.isLoading) {
+      throw revalidateThreads();
+    }
+    if (result.error) {
+      throw result.error;
+    }
+    return result.threads;
+  }
+  function getCurrentUserId() {
+    const self = room.getSelf();
+    if (self === null || self.id === void 0) {
+      return "anonymous";
+    } else {
+      return self.id;
+    }
+  }
+  function createThread(options) {
+    const body = options.body;
+    const metadata = "metadata" in options ? options.metadata : {};
+    const threads = ensureThreadsAreLoadedForMutations();
+    const threadId = createOptimisticId(THREAD_ID_PREFIX);
+    const commentId = createOptimisticId(COMMENT_ID_PREFIX);
+    const now = (/* @__PURE__ */ new Date()).toISOString();
+    const newThread = {
+      id: threadId,
+      type: "thread",
+      createdAt: now,
+      roomId: room.id,
+      metadata,
+      comments: [
+        {
+          id: commentId,
+          createdAt: now,
+          type: "comment",
+          userId: getCurrentUserId(),
+          body
+        }
+      ]
+    };
+    setThreads([...threads, newThread]);
+    startMutation();
+    room.createThread({ threadId, commentId, body, metadata }).catch(
+      (er) => errorEventSource.notify(
+        new CreateThreadError(er, {
+          roomId: room.id,
+          threadId,
+          commentId,
+          body,
+          metadata
+        })
+      )
+    ).finally(endMutation);
+    return newThread;
+  }
+  function editThreadMetadata(options) {
+    const threadId = options.threadId;
+    const metadata = "metadata" in options ? options.metadata : {};
+    const threads = ensureThreadsAreLoadedForMutations();
+    setThreads(
+      threads.map(
+        (thread) => thread.id === threadId ? {
+          ...thread,
+          metadata: {
+            ...thread.metadata,
+            ...metadata
+          }
+        } : thread
+      )
+    );
+    startMutation();
+    room.editThreadMetadata({ metadata, threadId }).catch(
+      (er) => errorEventSource.notify(
+        new EditThreadMetadataError(er, {
+          roomId: room.id,
+          threadId,
+          metadata
+        })
+      )
+    ).finally(endMutation);
+  }
+  function createComment({
+    threadId,
+    body
+  }) {
+    const threads = ensureThreadsAreLoadedForMutations();
+    const commentId = createOptimisticId(COMMENT_ID_PREFIX);
+    const now = (/* @__PURE__ */ new Date()).toISOString();
+    const comment = {
+      id: commentId,
+      threadId,
+      roomId: room.id,
+      type: "comment",
+      createdAt: now,
+      userId: getCurrentUserId(),
+      body
+    };
+    setThreads(
+      threads.map(
+        (thread) => thread.id === threadId ? {
+          ...thread,
+          comments: [...thread.comments, comment]
+        } : thread
+      )
+    );
+    startMutation();
+    room.createComment({ threadId, commentId, body }).catch(
+      (er) => errorEventSource.notify(
+        new CreateCommentError(er, {
+          roomId: room.id,
+          threadId,
+          commentId,
+          body
+        })
+      )
+    ).finally(endMutation);
+    return comment;
+  }
+  function editComment({ threadId, commentId, body }) {
+    const threads = ensureThreadsAreLoadedForMutations();
+    const now = (/* @__PURE__ */ new Date()).toISOString();
+    setThreads(
+      threads.map(
+        (thread) => thread.id === threadId ? {
+          ...thread,
+          comments: thread.comments.map(
+            (comment) => comment.id === commentId ? {
+              ...comment,
+              editedAt: now,
+              body
+            } : comment
+          )
+        } : thread
+      )
+    );
+    startMutation();
+    room.editComment({ threadId, commentId, body }).catch(
+      (er) => errorEventSource.notify(
+        new EditCommentError(er, {
+          roomId: room.id,
+          threadId,
+          commentId,
+          body
+        })
+      )
+    ).finally(endMutation);
+  }
+  function deleteComment({ threadId, commentId }) {
+    const threads = ensureThreadsAreLoadedForMutations();
+    const now = (/* @__PURE__ */ new Date()).toISOString();
+    const newThreads = [];
+    for (const thread of threads) {
+      if (thread.id === threadId) {
+        const newThread = {
+          ...thread,
+          comments: thread.comments.map(
+            (comment) => comment.id === commentId ? {
+              ...comment,
+              deletedAt: now,
+              body: void 0
+            } : comment
+          )
+        };
+        if (newThread.comments.some((comment) => comment.deletedAt === void 0)) {
+          newThreads.push(newThread);
+        }
+      } else {
+        newThreads.push(thread);
+      }
+    }
+    setThreads(newThreads);
+    startMutation();
+    room.deleteComment({ threadId, commentId }).catch(
+      (er) => errorEventSource.notify(
+        new DeleteCommentError(er, {
+          roomId: room.id,
+          threadId,
+          commentId
+        })
+      )
+    ).finally(endMutation);
+  }
+  return {
+    useThreads,
+    useThreadsSuspense,
+    createThread,
+    editThreadMetadata,
+    createComment,
+    editComment,
+    deleteComment
+  };
+}
+
+// src/comments/lib/use-debounce.ts
+import { useEffect as useEffect3, useRef, useState as useState2 } from "react";
+var DEFAULT_DELAY = 500;
+function useDebounce(value, delay = DEFAULT_DELAY) {
+  const timeout = useRef();
+  const [debouncedValue, setDebouncedValue] = useState2(value);
+  useEffect3(() => {
+    if (delay === false) {
+      return;
+    }
+    if (timeout.current === void 0) {
+      setDebouncedValue(value);
+    }
+    timeout.current = window.setTimeout(() => {
+      setDebouncedValue(value);
+      timeout.current = void 0;
+    }, delay);
+    return () => {
+      window.clearTimeout(timeout.current);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+// src/lib/stable-stringify.ts
+function stableStringify(object, ...args) {
+  const sortedObject = Object.keys(object).sort().reduce(
+    (sortedObject2, key) => {
+      sortedObject2[key] = object[key];
+      return sortedObject2;
+    },
+    {}
+  );
+  return JSON.stringify(sortedObject, ...args);
+}
+
+// src/lib/use-async-cache.ts
+import { useCallback, useEffect as useEffect4, useMemo, useRef as useRef3 } from "react";
+import { useSyncExternalStore as useSyncExternalStore2 } from "use-sync-external-store/shim/index.js";
+
+// src/lib/use-initial.ts
+import { useRef as useRef2 } from "react";
+function useInitial(value) {
+  return useRef2(value).current;
+}
+
+// src/lib/use-async-cache.ts
+var INITIAL_ASYNC_STATE = {
+  isLoading: false,
+  data: void 0,
+  error: void 0
+};
+var noop = () => {
+};
+function useAsyncCache(cache, key, options) {
+  const frozenOptions = useInitial(options);
+  const cacheItem = useMemo(() => {
+    if (key === null || !cache) {
+      return null;
+    }
+    const cacheItem2 = cache.create(key, frozenOptions?.overrideFunction);
+    void cacheItem2.get();
+    return cacheItem2;
+  }, [cache, frozenOptions, key]);
+  const subscribe = useCallback(
+    (callback) => cacheItem?.subscribe(callback) ?? noop,
+    [cacheItem]
+  );
+  const getState = useCallback(
+    () => cacheItem?.getState() ?? INITIAL_ASYNC_STATE,
+    [cacheItem]
+  );
+  const revalidate = useCallback(() => cacheItem?.revalidate(), [cacheItem]);
+  const state = useSyncExternalStore2(subscribe, getState, getState);
+  const previousData = useRef3();
+  let data = state.data;
+  useEffect4(() => {
+    previousData.current = { key, data: state.data };
+  }, [key, state]);
+  if (frozenOptions?.suspense && state.isLoading && cacheItem) {
+    throw new Promise((resolve) => {
+      cacheItem.subscribeOnce(() => resolve());
+    });
+  }
+  if (state.isLoading && frozenOptions?.keepPreviousDataWhileLoading && typeof state.data === "undefined" && previousData.current?.key !== key && typeof previousData.current?.data !== "undefined") {
+    data = previousData.current.data;
+  }
+  return {
+    isLoading: state.isLoading,
+    data,
+    error: state.error,
+    getState,
+    revalidate
+  };
+}
+
+// src/lib/use-rerender.ts
+import { useReducer } from "react";
 function useRerender() {
   const [, update] = useReducer(
     // This implementation works by incrementing a hidden counter value that is
@@ -38,12 +509,9 @@ function useRerender() {
   );
   return update;
 }
-function useInitial(value) {
-  return useRef(value).current;
-}
 
 // src/factory.tsx
-var noop = () => {
+var noop2 = () => {
 };
 var identity = (x) => x;
 var missing_unstable_batchedUpdates = (reactVersion, roomId) => `We noticed you\u2019re using React ${reactVersion}. Please pass unstable_batchedUpdates at the RoomProvider level until you\u2019re ready to upgrade to React 18:
@@ -58,15 +526,11 @@ var missing_unstable_batchedUpdates = (reactVersion, roomId) => `We noticed you\
 
 Why? Please see https://liveblocks.io/docs/guides/troubleshooting#stale-props-zombie-child for more information`;
 var superfluous_unstable_batchedUpdates = "You don\u2019t need to pass unstable_batchedUpdates to RoomProvider anymore, since you\u2019re on React 18+ already.";
-function useSyncExternalStore(s, gs, gss) {
+function useSyncExternalStore3(s, gs, gss) {
   return useSyncExternalStoreWithSelector(s, gs, gss, identity);
 }
-var EMPTY_OTHERS = (
-  // NOTE: asArrayWithLegacyMethods() wrapping should no longer be necessary in 0.19
-  asArrayWithLegacyMethods([])
-);
 function getEmptyOthers() {
-  return EMPTY_OTHERS;
+  return [];
 }
 function makeMutationContext(room) {
   const errmsg = "This mutation cannot be used until connected to the Liveblocks room";
@@ -95,7 +559,33 @@ function makeMutationContext(room) {
     setMyPresence: room.updatePresence
   };
 }
-function createRoomContext(client) {
+var hasWarnedIfNoResolveUser = false;
+function warnIfNoResolveUser(usersCache) {
+  if (!hasWarnedIfNoResolveUser && !usersCache && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "Set the resolveUser option in createRoomContext to specify user info."
+    );
+    hasWarnedIfNoResolveUser = true;
+  }
+}
+var hasWarnedAboutCommentsBeta = false;
+function warnIfBetaCommentsHook() {
+  if (!hasWarnedAboutCommentsBeta && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "Comments is currently in private beta. Learn more at https://liveblocks.io/docs/products/comments."
+    );
+    hasWarnedAboutCommentsBeta = true;
+  }
+}
+var ContextBundle = React2.createContext(null);
+function useRoomContextBundle() {
+  const bundle = React2.useContext(ContextBundle);
+  if (bundle === null) {
+    throw new Error("RoomProvider is missing from the React tree.");
+  }
+  return bundle;
+}
+function createRoomContext(client, options) {
   const RoomContext = React2.createContext(null);
   function RoomProvider(props) {
     const {
@@ -140,19 +630,31 @@ function createRoomContext(client) {
       })
     );
     React2.useEffect(() => {
-      setRoom(
-        client.enter(roomId, {
+      const room2 = client.enter(
+        roomId,
+        {
           initialPresence: frozen.initialPresence,
           initialStorage: frozen.initialStorage,
           shouldInitiallyConnect: frozen.shouldInitiallyConnect,
           unstable_batchedUpdates: frozen.unstable_batchedUpdates
-        })
+        }
       );
+      setRoom(room2);
       return () => {
+        const commentsRoom = commentsRooms.get(roomId);
+        if (commentsRoom) {
+          commentsRooms.delete(roomId);
+        }
         client.leave(roomId);
       };
     }, [roomId, frozen]);
-    return /* @__PURE__ */ React2.createElement(RoomContext.Provider, { value: room }, props.children);
+    return /* @__PURE__ */ React2.createElement(RoomContext.Provider, { value: room }, /* @__PURE__ */ React2.createElement(
+      ContextBundle.Provider,
+      {
+        value: internalBundle
+      },
+      props.children
+    ));
   }
   function connectionIdSelector(others) {
     return others.map((user) => user.connectionId);
@@ -160,7 +662,7 @@ function createRoomContext(client) {
   function useRoom() {
     const room = React2.useContext(RoomContext);
     if (room === null) {
-      throw new Error("RoomProvider is missing from the react tree");
+      throw new Error("RoomProvider is missing from the React tree.");
     }
     return room;
   }
@@ -168,13 +670,13 @@ function createRoomContext(client) {
     const room = useRoom();
     const subscribe = room.events.status.subscribe;
     const getSnapshot = room.getStatus;
-    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+    return useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
   }
   function useMyPresence() {
     const room = useRoom();
     const subscribe = room.events.myPresence.subscribe;
     const getSnapshot = room.getPresence;
-    const presence = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+    const presence = useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
     const setPresence = room.updatePresence;
     return [presence, setPresence];
   }
@@ -248,8 +750,8 @@ function createRoomContext(client) {
   function useBroadcastEvent() {
     const room = useRoom();
     return React2.useCallback(
-      (event, options = { shouldQueueEventIfNotReady: false }) => {
-        room.broadcastEvent(event, options);
+      (event, options2 = { shouldQueueEventIfNotReady: false }) => {
+        room.broadcastEvent(event, options2);
       },
       [room]
     );
@@ -314,7 +816,7 @@ function createRoomContext(client) {
     const subscribe = room.events.storageDidLoad.subscribeOnce;
     const getSnapshot = room.getStorageSnapshot;
     const getServerSnapshot = React2.useCallback(() => null, []);
-    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+    return useSyncExternalStore3(subscribe, getSnapshot, getServerSnapshot);
   }
   function useStorageRoot() {
     return [useMutableStorageRoot()];
@@ -332,13 +834,13 @@ function createRoomContext(client) {
     const room = useRoom();
     const subscribe = room.events.history.subscribe;
     const canUndo = room.history.canUndo;
-    return useSyncExternalStore(subscribe, canUndo, canUndo);
+    return useSyncExternalStore3(subscribe, canUndo, canUndo);
   }
   function useCanRedo() {
     const room = useRoom();
     const subscribe = room.events.history.subscribe;
     const canRedo = room.history.canRedo;
-    return useSyncExternalStore(subscribe, canRedo, canRedo);
+    return useSyncExternalStore3(subscribe, canRedo, canRedo);
   }
   function useBatch() {
     return useRoom().batch;
@@ -395,7 +897,7 @@ function createRoomContext(client) {
       [selector]
     );
     const subscribe = React2.useCallback(
-      (onStoreChange) => rootOrNull !== null ? room.subscribe(rootOrNull, onStoreChange, { isDeep: true }) : noop,
+      (onStoreChange) => rootOrNull !== null ? room.subscribe(rootOrNull, onStoreChange, { isDeep: true }) : noop2,
       [room, rootOrNull]
     );
     const getSnapshot = React2.useCallback(() => {
@@ -501,7 +1003,140 @@ function createRoomContext(client) {
     useSuspendUntilStorageLoaded();
     return useLegacyKey(key);
   }
-  return {
+  const commentsErrorEventSource = makeEventSource2();
+  const commentsRooms = /* @__PURE__ */ new Map();
+  function getCommentsRoom(room) {
+    let commentsRoom = commentsRooms.get(room.id);
+    if (commentsRoom === void 0) {
+      commentsRoom = createCommentsRoom(room, commentsErrorEventSource);
+      commentsRooms.set(room.id, commentsRoom);
+    }
+    return commentsRoom;
+  }
+  function useThreads() {
+    const room = useRoom();
+    React2.useEffect(() => {
+      warnIfBetaCommentsHook();
+    }, []);
+    return getCommentsRoom(room).useThreads();
+  }
+  function useThreadsSuspense() {
+    const room = useRoom();
+    React2.useEffect(() => {
+      warnIfBetaCommentsHook();
+    }, []);
+    return getCommentsRoom(room).useThreadsSuspense();
+  }
+  function useCreateThread() {
+    const room = useRoom();
+    React2.useEffect(() => {
+      warnIfBetaCommentsHook();
+    }, []);
+    return React2.useCallback(
+      (options2) => getCommentsRoom(room).createThread(options2),
+      [room]
+    );
+  }
+  function useEditThreadMetadata() {
+    const room = useRoom();
+    React2.useEffect(() => {
+      warnIfBetaCommentsHook();
+    }, []);
+    return React2.useCallback(
+      (options2) => getCommentsRoom(room).editThreadMetadata(options2),
+      [room]
+    );
+  }
+  function useCreateComment() {
+    const room = useRoom();
+    React2.useEffect(() => {
+      warnIfBetaCommentsHook();
+    }, []);
+    return React2.useCallback(
+      (options2) => getCommentsRoom(room).createComment(options2),
+      [room]
+    );
+  }
+  function useEditComment() {
+    const room = useRoom();
+    React2.useEffect(() => {
+      warnIfBetaCommentsHook();
+    }, []);
+    return React2.useCallback(
+      (options2) => getCommentsRoom(room).editComment(options2),
+      [room]
+    );
+  }
+  function useDeleteComment() {
+    const room = useRoom();
+    React2.useEffect(() => {
+      warnIfBetaCommentsHook();
+    }, []);
+    return React2.useCallback(
+      (options2) => getCommentsRoom(room).deleteComment(options2),
+      [room]
+    );
+  }
+  const { resolveUser, resolveMentionSuggestions } = options ?? {};
+  const usersCache = resolveUser ? createAsyncCache((stringifiedOptions) => {
+    return resolveUser(
+      JSON.parse(stringifiedOptions)
+    );
+  }) : void 0;
+  function useUser(userId) {
+    const resolverKey = React2.useMemo(
+      () => stableStringify({ userId }),
+      [userId]
+    );
+    const state = useAsyncCache(usersCache, resolverKey);
+    React2.useEffect(() => warnIfNoResolveUser(usersCache), []);
+    if (state.isLoading) {
+      return {
+        isLoading: true
+      };
+    } else {
+      return {
+        user: state.data,
+        error: state.error,
+        isLoading: false
+      };
+    }
+  }
+  function useUserSuspense(userId) {
+    const resolverKey = React2.useMemo(
+      () => stableStringify({ userId }),
+      [userId]
+    );
+    const state = useAsyncCache(usersCache, resolverKey, {
+      suspense: true
+    });
+    React2.useEffect(() => warnIfNoResolveUser(usersCache), []);
+    return {
+      user: state.data,
+      error: state.error,
+      isLoading: false
+    };
+  }
+  const mentionSuggestionsCache = createAsyncCache(
+    resolveMentionSuggestions ? (stringifiedOptions) => {
+      return resolveMentionSuggestions(
+        JSON.parse(stringifiedOptions)
+      );
+    } : () => Promise.resolve([])
+  );
+  function useMentionSuggestions(search) {
+    const room = useRoom();
+    const debouncedSearch = useDebounce(search, 500);
+    const resolverKey = React2.useMemo(
+      () => debouncedSearch !== void 0 ? stableStringify({ text: debouncedSearch, roomId: room.id }) : null,
+      [debouncedSearch, room.id]
+    );
+    const { data } = useAsyncCache(mentionSuggestionsCache, resolverKey, {
+      keepPreviousDataWhileLoading: true
+    });
+    return data;
+  }
+  const bundle = {
     RoomContext,
     RoomProvider,
     useRoom,
@@ -530,6 +1165,13 @@ function createRoomContext(client) {
     useOthersConnectionIds,
     useOther,
     useMutation,
+    useThreads,
+    useUser,
+    useCreateThread,
+    useEditThreadMetadata,
+    useCreateComment,
+    useEditComment,
+    useDeleteComment,
     suspense: {
       RoomContext,
       RoomProvider,
@@ -558,9 +1200,22 @@ function createRoomContext(client) {
       useOthersMapped: useOthersMappedSuspense,
       useOthersConnectionIds: useOthersConnectionIdsSuspense,
       useOther: useOtherSuspense,
-      useMutation
+      useMutation,
+      useThreads: useThreadsSuspense,
+      useUser: useUserSuspense,
+      useCreateThread,
+      useEditThreadMetadata,
+      useCreateComment,
+      useEditComment,
+      useDeleteComment
     }
   };
+  const internalBundle = {
+    ...bundle,
+    hasResolveMentionSuggestions: resolveMentionSuggestions !== void 0,
+    useMentionSuggestions
+  };
+  return bundle;
 }
 
 // src/index.ts
@@ -569,6 +1224,7 @@ detectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);
 export {
   ClientSideSuspense,
   createRoomContext,
-  shallow2 as shallow
+  shallow2 as shallow,
+  useRoomContextBundle
 };
 //# sourceMappingURL=index.mjs.map