Skip to content

feat(example): channel-specific nicknames in mentions - #3262

Draft
MartinCupela wants to merge 1 commit into
masterfrom
chore/demo-nickname-mentions
Draft

feat(example): channel-specific nicknames in mentions#3262
MartinCupela wants to merge 1 commit into
masterfrom
chore/demo-nickname-mentions

Conversation

@MartinCupela

Copy link
Copy Markdown
Contributor

Mentions can be searched and rendered by a per-channel nickname stored on the channel member (member.nickname), while mentioned_users keeps the real user id. Covers the autocomplete dropdown, the composer textarea and the message list. Inert for members without a nickname, so stock behaviour is unchanged.

Built entirely on public API — no patches to stream-chat or stream-chat-react:

  • NicknameMentionsSearchSource subclasses MentionsSearchSource and is injected through createMentionsMiddleware({ searchSource }). It matches on nickname locally and, above the 100-member local-search threshold, server-side via $or over name and nickname. $autocomplete on a custom member field is supported by the API, contrary to the base implementation's comment; note the member sort is a key/value map ({ user_id: 1 }), not { field, direction }. The server response is flattened to member.user by the base, so nicknames are harvested before that to keep them available for suggestions.

  • Suggestion name is set to the nickname, which drives both the dropdown label and the inserted text. This is load-bearing: the composition middleware drops a mention whose id/name is absent from the text, silently.

  • Mention display text is frozen into message.text at send time, so a composition middleware records mention_display_names on the message. The renderer resolves @nickname from that map with no member lookup, which is what makes rendering work past the 100-member threshold. Trade-off: renaming does not rewrite mentions in existing messages.

  • renderText emits two entities per mentioned user (nickname and username) so both tokens highlight, satisfying "mention by nickname OR username".

  • withNicknameMentions wraps the app's existing message UI rather than replacing it, so inline editing and nickname mentions coexist.

Writing a nickname for another member is a server-side operation; updateMemberPartial from a browser client only writes your own membership.

Mentions can be searched and rendered by a per-channel nickname stored on the
channel member (`member.nickname`), while `mentioned_users` keeps the real user
id. Covers the autocomplete dropdown, the composer textarea and the message
list. Inert for members without a nickname, so stock behaviour is unchanged.

Built entirely on public API — no patches to stream-chat or stream-chat-react:

- NicknameMentionsSearchSource subclasses MentionsSearchSource and is injected
  through `createMentionsMiddleware({ searchSource })`. It matches on nickname
  locally and, above the 100-member local-search threshold, server-side via
  `$or` over `name` and `nickname`. `$autocomplete` on a custom member field is
  supported by the API, contrary to the base implementation's comment; note the
  member sort is a key/value map (`{ user_id: 1 }`), not `{ field, direction }`.
  The server response is flattened to `member.user` by the base, so nicknames
  are harvested before that to keep them available for suggestions.

- Suggestion `name` is set to the nickname, which drives both the dropdown label
  and the inserted text. This is load-bearing: the composition middleware drops
  a mention whose `id`/`name` is absent from the text, silently.

- Mention display text is frozen into `message.text` at send time, so a
  composition middleware records `mention_display_names` on the message. The
  renderer resolves `@nickname` from that map with no member lookup, which is
  what makes rendering work past the 100-member threshold. Trade-off: renaming
  does not rewrite mentions in existing messages.

- renderText emits two entities per mentioned user (nickname and username) so
  both tokens highlight, satisfying "mention by nickname OR username".

- `withNicknameMentions` wraps the app's existing message UI rather than
  replacing it, so inline editing and nickname mentions coexist.

Writing a nickname for another member is a server-side operation;
`updateMemberPartial` from a browser client only writes your own membership.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Aug 10, 2026

Copy link
Copy Markdown

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 1d908f2e-bf69-43e0-aaeb-c51a28f57a09

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

Copy link
Copy Markdown

Size Change: 0 B

Total Size: 890 kB

ℹ️ View Unchanged
Filename Size
dist/cjs/audioProcessing.js 1.74 kB
dist/cjs/channel-detail.js 23.2 kB
dist/cjs/emojis.js 2.66 kB
dist/cjs/index.js 242 kB
dist/cjs/mp3-encoder.js 814 B
dist/cjs/NotificationList.js 89.6 kB
dist/cjs/ReactPlayerWrapper.js 542 B
dist/cjs/useChannelHeaderOnlineStatus.js 9.44 kB
dist/cjs/useInertWhenHidden.js 54.7 kB
dist/css/channel-detail.css 2.84 kB
dist/css/emoji-picker.css 178 B
dist/css/emoji-replacement.css 456 B
dist/css/index.css 41.4 kB
dist/es/audioProcessing.mjs 1.65 kB
dist/es/channel-detail.mjs 22.7 kB
dist/es/emojis.mjs 2.6 kB
dist/es/index.mjs 241 kB
dist/es/mp3-encoder.mjs 768 B
dist/es/NotificationList.mjs 87.8 kB
dist/es/ReactPlayerWrapper.mjs 485 B
dist/es/useChannelHeaderOnlineStatus.mjs 9.21 kB
dist/es/useInertWhenHidden.mjs 54.1 kB

compressed-size-action

@codecov

codecov Bot commented Aug 10, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.30%. Comparing base (5776c16) to head (9555a35).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #3262      +/-   ##
==========================================
+ Coverage   85.23%   85.30%   +0.06%     
==========================================
  Files         509      509              
  Lines       15982    15982              
  Branches     5038     5038              
==========================================
+ Hits        13622    13633      +11     
+ Misses       2360     2349      -11     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant