feat(Reactions): send emoji_code with reactions for push notification rendering

[oliverlaz]

🎯 Goal

Reactions sent via channel.sendReaction did not include emoji_code, so mobile push notification templates (e.g. for reaction.new) had no emoji to render. This wires the React SDK to include emoji_code in the reaction request payload so mobile SDKs can render the correct emoji in push notifications.

Linear: REACT-880

🛠 Implementation details

• New exported helper getEmojiCodeByReactionType(reactionOptions, type) in reactionOptions.tsx resolves the native emoji character (e.g. 👍) for a reaction type from the option's existing unicode field via unicodeToEmoji(). Returns undefined for legacy array options or options that omit unicode, so we never send a garbage code.
• useReactionHandler now reads reactionOptions from ComponentContext (falling back to defaultReactionOptions, like other consumers) and includes emoji_code in the sendReaction payload when one resolves:

  channel.sendReaction(id, { type, ...(emojiCode && { emoji_code: emojiCode }) });

  The optimistic reaction preview is stamped with the same value for consistency. The public handleReaction(type, event) signature is unchanged.
• mapEmojiMartData now stores unicode on each mapped entry, so emoji picked from the extended (emoji-mart) list also resolve an emoji_code.
• The stream-chat Reaction type already supports the optional emoji_code field — only stream-chat-react needed to populate it.

Behavior: default reactions (like, love, haha, sad, wow, fire) and any custom reactions defining unicode now ship emoji_code automatically. Legacy array-form reaction options carry no unicode data and continue to send no emoji_code (graceful, unchanged otherwise).

Tests: new reactionOptions.test.ts covering the helper (quick/extended/legacy-array/unknown/missing-unicode) and mapEmojiMartData; useReactionHandler tests for default/custom/no-unicode payloads and the optimistic preview; updated the existing Message.test.tsx send assertion to the new contract.

🎨 UI Changes

None — this only affects the network payload sent with reactions (and the local optimistic reaction object). No visual changes.

Summary by CodeRabbit

Release Notes

• New Features

  • Reactions now support and transmit emoji code data for improved emoji handling.

• Tests

  • Expanded test coverage for reaction emoji code derivation with custom reaction options.

[github-actions]

Size Change: +659 B (+0.1%)

Total Size: 656 kB

📦 View Changed

Filename	Size	Change
dist/cjs/index.js	255 kB	+312 B (+0.12%)
dist/es/index.mjs	252 kB	+347 B (+0.14%)

ℹ️ View Unchanged

Filename	Size
dist/cjs/audioProcessing.js	1.74 kB
dist/cjs/emojis.js	2.54 kB
dist/cjs/mp3-encoder.js	814 B
dist/cjs/ReactPlayerWrapper.js	545 B
dist/cjs/useNotificationApi.js	49.8 kB
dist/css/emoji-picker.css	178 B
dist/css/emoji-replacement.css	456 B
dist/css/index.css	39.7 kB
dist/es/audioProcessing.mjs	1.65 kB
dist/es/emojis.mjs	2.47 kB
dist/es/mp3-encoder.mjs	768 B
dist/es/ReactPlayerWrapper.mjs	485 B
dist/es/useNotificationApi.mjs	48.6 kB

_{compressed-size-action}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: cb410d11-e7c4-4b45-8f42-9637f27e6995

📥 Commits

Reviewing files that changed from the base of the PR and between 7ad98fa and dcc1431.

📒 Files selected for processing (5)

• src/components/Message/__tests__/Message.test.tsx
• src/components/Message/hooks/__tests__/useReactionHandler.test.tsx
• src/components/Message/hooks/useReactionHandler.ts
• src/components/Reactions/__tests__/reactionOptions.test.ts
• src/components/Reactions/reactionOptions.tsx

---

📝 Walkthrough

Walkthrough

This PR adds emoji code support to message reactions by introducing emoji lookup helpers, integrating them into the reaction handler hook, and verifying the payload changes end-to-end. The flow reads reaction options from context, derives emoji codes for each reaction type, and includes them when sending reactions.

Changes

Emoji Code Support in Reactions

Layer / File(s)	Summary
Emoji code lookup contract and helpers src/components/Reactions/reactionOptions.tsx, src/components/Reactions/__tests__/reactionOptions.test.ts	mapEmojiMartData now stores computed unicode values in extended reaction option objects. New exported function getEmojiCodeByReactionType converts reaction option unicode to native emoji strings, returning undefined for legacy array options or missing unicode. Comprehensive tests cover quick and extended type lookups, unknown types, and edge cases.
Hook integration of emoji code resolution src/components/Message/hooks/useReactionHandler.ts, src/components/Message/hooks/__tests__/useReactionHandler.test.tsx	useReactionHandler reads reaction options from component context and computes emoji codes per reaction type using the new helper. Hook now includes emoji_code in sendReaction payloads and builds optimistic previews with both emoji code and type. Test helper wraps in ComponentProvider to inject custom reaction options; expanded test suite verifies emoji derivation from defaults, context overrides, and unmapped type handling.
Message test emoji code assertion src/components/Message/__tests__/Message.test.tsx	Updated test expectation to assert sendReaction calls include both type and emoji_code fields, confirming emoji codes propagate end-to-end.

Sequence Diagram

sequenceDiagram
  participant Sender as Reaction Sender
  participant Handler as useReactionHandler
  participant Context as ComponentContext
  participant Emoji as getEmojiCodeByReactionType
  participant API as sendReaction
  Sender->>Handler: toggleReaction(reactionType)
  Handler->>Context: read reactionOptions
  Handler->>Emoji: resolve emoji code by type
  Emoji-->>Handler: emoji_code: string | undefined
  Handler->>API: sendReaction({ type, emoji_code })
  API-->>Sender: reaction sent

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A rabbit hops through emoji fields,
Where reaction codes now unlock hearts,
Each ❤️ and 😂 joined with their type,
The message flow stitched whole and bright,
Native emojis in every sendReaction call! 🎉

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The pull request title clearly and concisely describes the main change: adding emoji_code to reactions for push notification rendering.
Description check	✅ Passed	The pull request description follows the template with complete Goal, Implementation details, and UI Changes sections, providing clear rationale, technical approach, and test coverage.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/react-880-reaction-emoji-code

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.92%. Comparing base (7ad98fa) to head (dcc1431).

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3209      +/-   ##
==========================================
+ Coverage   83.84%   83.92%   +0.08%     
==========================================
  Files         439      439              
  Lines       13212    13222      +10     
  Branches     4286     4293       +7     
==========================================
+ Hits        11077    11097      +20     
+ Misses       2135     2125      -10     

☔ 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.

[stream-ci-bot]

🎉 This PR is included in version 14.4.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀