Introduce ReactionIcon and ReactionToggle components

[gpunto]

Goal

Introduce ReactionIcon and ReactionToggle components. They will be used later for displaying reactions in the SDK instead of the current implementations.

Implementation

They are simple components rendering an emoji (ReactionIcon) + a checked state (ReactionToggle). We only support emojis as that's the direction we're taking going forward as emojis is the standard in chat apps. If customers want image-based reactions, they will be able to replace ReactionIcon.

🎨 UI Changes

Figma

Figma

Testing

They aren't in use yet, so they can only be checked in previews.

Summary by CodeRabbit

• New Features
  • Added customizable reaction icon component for displaying emoji reactions across five size options (Small, Medium, Large, ExtraLarge, ExtraExtraLarge)
  • Added interactive reaction toggle component with three size options and visual feedback for checked/unchecked states
  • Extended theme factory to support new reaction components, ensuring design consistency

[github-actions]

PR checklist ✅

All required conditions are satisfied:

• Title length is OK (or ignored by label).
• At least one pr: label exists.
• Sections ### Goal, ### Implementation, and ### Testing are filled.

🎉 Great job! This PR is ready for review.

[gpunto]

@coderabbitai review

[github-actions]

SDK Size Comparison 📏

SDK	Before	After	Difference	Status
stream-chat-android-client	5.26 MB	5.26 MB	0.00 MB	🟢
stream-chat-android-offline	5.48 MB	5.48 MB	0.00 MB	🟢
stream-chat-android-ui-components	10.63 MB	10.62 MB	-0.01 MB	🚀
stream-chat-android-compose	12.85 MB	11.67 MB	-1.18 MB	🚀

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Walkthrough

Introduces two new Compose UI components for rendering reaction emojis: ReactionIcon for static emoji display and ReactionToggle for clickable emoji toggles with visual feedback. Each component supports multiple size variations and is integrated into ChatComponentFactory via new public factory methods.

Changes

Cohort / File(s)	Summary
New Reaction Components ReactionIcon.kt, ReactionToggle.kt	Introduces ReactionIcon composable with five size variants (Small to ExtraExtraLarge) and ReactionToggle composable with three size variants (Medium to ExtraLarge). ReactionToggle includes checked state styling and optional click handler.
Factory Integration ChatComponentFactory.kt	Adds two new public methods ReactionIcon and ReactionToggle that delegate to the new composable components, enabling size-based customization through the factory pattern.
Public API Declaration stream-chat-android-compose.api	Updates public API surface with new enum classes ReactionIconSize and ReactionToggleSize, composable singleton classes, and abstract/default implementations for factory methods.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 With emojis both tiny and tall,
Reactions now answer the call,
Toggle and icon in sizes divine,
Small to ExtraExtra—they sparkle and shine! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

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

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: introducing two new UI components (ReactionIcon and ReactionToggle) for rendering reactions.
Description check	✅ Passed	The PR description covers Goal, Implementation, and UI Changes with Figma links and screenshots. Testing section explains limitations. Missing: contributor checklist items, patch details, and reviewer checklist.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch redesign/reactions-components

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (4)

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/reactions/ReactionIcon.kt (2)

32-44: KDoc is incomplete — @param type and @param emoji are missing.

The KDoc documents size and modifier but omits type and emoji. Since this is an internal function exposed via the public ChatComponentFactory, documenting all parameters helps maintainers understand the contract.

Also, type is accepted but unused in the function body. It's presumably kept so custom ChatComponentFactory overrides can use it — consider adding a brief note in the KDoc to clarify its purpose (e.g., "reserved for custom factory implementations").

---

67-68: Preview should use @StreamPreview helpers instead of @Preview.

Based on learnings: "Compose previews should use StreamPreview helpers."

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/reactions/ReactionToggle.kt (2)

89-93: Large maps to ReactionIconSize.Medium — verify this is intentional.

Both Medium and Large toggle sizes map to ReactionIconSize.Medium (lines 90-91). This means increasing from Medium to Large only grows the container (32dp → 40dp) without changing the icon font size. If this is intentional (more padding around the emoji at Large), a brief comment would help future maintainers understand the design decision.

---

95-96: Preview should use @StreamPreview helpers instead of @Preview.

Same as in ReactionIcon.kt. Based on learnings: "Compose previews should use StreamPreview helpers."

[sonarqubecloud]

Quality Gate failed

Failed conditions
3.9% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud