This November, we’ve added new features to Comments.

- [Search through comments](#search-through-comments): New hook for finding
  comments within the room.
- [Comment dropdown customization](#comment-dropdown-customization): Add custom
  menu items to threads.
- [Yjs guides](#yjs-guides): Best practices when using Yjs, how tombstones work,
  and more.

## Upgrade now

To use the latest features, update your packages with the following command.

```bash
npx create-liveblocks-app@latest --upgrade
```

If you were previously on Liveblocks 3.10 or below, make sure to follow our
[upgrade guides](/docs/platform/upgrading) before updating.

## Search through comments [#search-through-comments]

When using [Comments](/comments), you can now add a search bar to your
application in a few lines of code. The new feature allows you to search
comments semantically, meaning that results are found based on meaning, not
exact words—for example a query for “marketing” will bring up results for “email
campaign.”

<Figure>
  <MuxVideo
    playbackId="s01vjE76T01v00agtlY8JPTJow4OZ6eB2mJrHmsgoK9g5U"
    alt="Comments search blog"
  />
</Figure>

Set it up by using the new
[`useSearchComments`](/docs/api-reference/liveblocks-react#useSearchComments)
hook, passing the user’s query to `query.text`. The hooks returns a list of
matching comments that are _inside the current room_.

```tsx
const { results, error, isLoading } = useSearchComments({
  query: { text: "fruit" },
});

// [{ content: "I like apples", threadId: "th_xxx", commentId: "cm_xxx"  }, ...]
console.log(results);
```

You can also use more advanced filters to narrow down results, such as
`threadMetadata`, `hasAttachments`, and more. Here’s a snippet showing a full
search component with a “Resolved threads” toggle option.

```tsx
function Search() {
  const [text, setText] = useState("");
  const [threadResolved, setThreadResolved] = useState(false);

  const { results, error, isLoading } = useSearchComments({
    query: { text, threadResolved },
  });

  return (
    <>
      {/* Search terms */}
      <input value={text} onChange={(e) => setInput(e.target.value)} />

      {/* Toggle resolved threads */}
      <label>
        <input
          type="checkbox"
          checked={threadResolved}
          onChange={(e) => setThreadResolved(e.target.checked)}
        />
        Resolved threads
      </label>

      {/* Search results */}
      {results.map((result) => (
        <a href={"#" + result.commentId}>{result.content}</a>
      ))}
    </>
  );
}
```

Learn more in our documentation under
[`useSearchComments`](/docs/api-reference/liveblocks-react#useSearchComments).

## Comment dropdown customization [#comment-dropdown-customization]

You can now customize the dropdown menu alongside comments. Add new actions,
links, or replace default items entirely. Below you can see an example of
this—the “Ask AI” and “Copy link” items have been added.

<Figure>
  <MuxVideo
    playbackId="gnUJCA3YL6ondX924qOS5zOfIykK500A557lAB3wLvTY"
    alt="Comments dropdown blog"
  />
</Figure>

To add items, use the
[`commentDropdownItems`](/docs/api-reference/liveblocks-react-ui#Custom-dropdown-items)
prop on `Thread`, or
[`dropdownItems`](/docs/api-reference/liveblocks-react-ui#Comment-props) on
`Comment`. Inserting `children` into the JSX places the default dropdown
components, so you can extend instead of replace them, as we are below.

```tsx
<Thread
  thread={thread}
  // +++
  commentDropdownItems={({ children, comment }) => (
    <>
      {/* Custom "Copy link" item */}
      <Comment.DropdownItem
        onSelect={() => {
          navigator.clipboard.writeText(
            `${window.location.href}#${comment.id}`
          );
        }}
        icon=<Icon.Copy />
      >
        Copy link
      </Comment.DropdownItem>

      {/* Default items */}
      {children}
    </>
  )}
  // +++
/>
```

You can find a live example of a custom dropdown item on our
[Linear-like issue tracker](/examples/linear-like-issue-tracker). To learn more,
read our docs section on
[`commentDropdownItems`](/docs/api-reference/liveblocks-react-ui#Custom-dropdown-items).

## Yjs guides [#yjs-guides]

We’ve added four new guides to help you better understand Yjs and how it works
with Liveblocks.

- [Yjs best practices and tips](/docs/guides/yjs-best-practices-and-tips): Build
  your app in an efficient, error-free way.
- [Tiptap best practices and tips](/docs/guides/tiptap-best-practices-and-tips):
  Catch problems and avoid common pitfalls.
- [Why you can’t delete Yjs documents](/docs/guides/why-you-cant-delete-yjs-documents):
  The role of tombstones in Yjs.
- [Can I use my own database with Yjs?](/docs/guides/can-i-use-my-own-database-with-yjs):
  Synching with webhook events.

## Minor improvements

- Update type definitions for provider models to support GPT-5.1 variants.
- Fix regression: handle rejection messages from the server again.
- Updated Next.js Starter Kit to use Tiptap v3 and BlockNote 0.42.
- Fix a bug where a fresh provider is required by Lexical in order to initialize
  properly by always requesting a new provider in the factory function.
- Tweak reconnection logic to not retry on specific 400 level error codes.
- Prevents certain 400 level errors from being reported as a 403.
- Fix scroll issues in some scenarios where `AiChat` would be rendered but
  hidden.
- Support for Tiptap v3 in `@liveblocks/react-tiptap`.
- Renamed "Liveblocks notifications" to "Collaboration notifications" to better
  reflect that these are notifications about collaboration activity (like
  threads and mentions) that Liveblocks sends on your behalf. Notification kinds
  `thread` and `textMention` are now called "Collaboration" kinds.

### Upgrade

To use these latest features, update your packages with:

```bash
npx create-liveblocks-app@latest --upgrade
```

## Contributors

<Contributors
  gitHubUsernames={[
    "ctnicholas",
    "nvie",
    "nimeshnayaju",
    "ofoucherot",
    "marcbouchenoire",
    "pierrelevaillant",
    "jrowny",
    "mmavko",
  ]}
/>