Comments – Users and mentions

When a comment is posted, Liveblocks doesn’t store any user metadata, for example their avatar or name. Instead, it only saves their user ID, which you manually set when authenticating. To fetch user metadata, we provide functions that allow you to return the correct data.

Authenticate your users

You can set a user’s ID when authenticating your application, for example with liveblocks.prepareSession. This ID is then used inside Comments to represent the current user, for example we’re using an email address as a user ID below.

const session = liveblocks.prepareSession("charlie.layne@example.com", {  userInfo: {    // Custom user info to be used in Presence    // This is NOT used in Comments    // ...  },});

There are two different authentication methods—make sure to follow an authentication guide for your framework to get started.

Adding user information to Comments

In Comments, user information is retrieved from a list of user IDs, for example here’s a userIds array and the information you need to return. You should return the same number of users as the number of user IDs, in the same order.

# If this is `userIds`["marc@example.com", "pierre@example.com"]
# Return `users`[{ name: "Marc", avatar: "https://example.com/marc.png" }, { name: "Pierre", avatar: "https://example.com/pierre.png" }]

In your Liveblocks config file, you’ll find a function named resolveUsers where you can return this information.

// ...
const client = createClient({  // ...  async resolveUsers({ userIds }) {    // ["marc@example.com", ...]    console.log(userIds);
    // Get users from your back end    const users = await __fetchUsers__(userIds);
    // [{ name: "Marc", avatar: "https://example.com/marc.png" }, ...]    console.log(users);
    // Return a list of users    return users;  },});

The name, and avatar are required for the default components, but you can also return custom metadata here. For example, each user may have a color property. You can retrieve these properties in your app with useUser.

function Component() {  const { user } = useUser("marc@example.com");
  // { color: "red", name: "Marc", avatar: "https://example.com/marc.png" }  console.log(user);
  // ...}

Resolving user mentions suggestions

Comments allows you to search for a user after typing the "@" character.

When a user types "@" and searches for a user, Comments will pass you a text property which you can use to return matching user IDs.

# If "@mar" has been typed, this is `text`"mar"
# Return matching `usersIds`["marc@example.com", "marissa@example.com"]

You can resolve these search results by editing a function named resolveMentionSuggestions in your Liveblocks config file. Here’s what the function might look like if the user has typed "@mar" into the input.

// ...
const client = createClient({  // ...  async resolveUsers({ userIds }) {    // ...  },  async resolveMentionSuggestions({ text, roomId }) {    // "mar"    console.log(text);
    // Return an array of user IDs for the query "mar"    let userIds;
    if (text) {      // If there's a query, get user IDs from your back end that match      userIds = await __queryUserIds__(text);    } else {      // If there's no query, get all of the room's user IDs      userIds = await __getAllUserIds__();    }
    // ["marc@example.com", "marissa@example.com"]    console.log(userIds);    return userIds;  },});

If a user has only typed "@", text is an empty string, and it’s recommended to return every user.