Update command input layout in composer thread mode as per designer review

[andremion]

Goal

Update the layout in the thread mode message composer when a command is active:

1. The command chip (e.g. GIPHY) was misaligned — it sat below the text input instead of beside it.
2. The "Also send in Channel" checkbox was squeezed between the chip and the send button instead of anchoring at the bottom-left.

Implementation

Layout restructure (MessageInput.kt):

• Move LeadingContent (command chip) and CenterContent (text field) into an inner Row inside the existing weighted Column. This ensures the chip aligns with the text field, not with the bottom content.
• BottomContent (checkbox) stays below that inner Row, and TrailingContent (send button) stays in the outer Row aligned to the bottom — matching the Figma design.

Rename CenterBottomContent → BottomContent (breaking API change):

• MessageComposerInputCenterBottomContent → MessageComposerInputBottomContent
• MessageComposerInputCenterBottomContentParams → MessageComposerInputBottomContentParams
• The "Center" prefix was misleading since this content is not centered — it sits at the bottom of the input area, offset left by the trailing content.

Bottom padding adjustment (MessageComposerInputBottomContent.kt):

• Reduce bottom padding from spacingMd to spacingSm so the checkbox row sits closer to the send button vertically.

Checkbox improvements:

• Reduce checkbox size from 24dp to 20dp to match Figma specs.
• Extract CheckboxStates() internal composable for preview/test reuse.
• Add CheckboxTest Paparazzi snapshot test.

Preview improvements (MessageInput.kt):

• Add input text to the thread mode "also send to channel" preview for more realistic rendering.
• Use named parentMessage parameter in thread mode previews.

🎨 UI Changes

Please check the snapshot files

Testing

1. Open a thread in the sample app, type /giphy to activate the GIPHY command — verify the chip aligns with the text input field, not below it.
2. In the same thread composer, verify "Also send in Channel" sits at the bottom-left below the text field, with the send button to the right at a similar vertical level.
3. Toggle the "Also send in Channel" checkbox — verify it works correctly.
4. Check the non-thread composer still looks and behaves normally (no command chip, send button beside the text field).
5. Run ./gradlew :stream-chat-android-compose:test — all Paparazzi snapshot tests pass.

Summary by CodeRabbit

• UI Updates

  • Adjusted checkbox sizing for improved visual consistency.
  • Refined message composer input layout and spacing organization.
  • Enhanced thread mode message composer experience with updated UI refinements.

• Tests

  • Added snapshot tests to validate checkbox and message composer UI states.

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

[github-actions]

SDK Size Comparison 📏

SDK	Before	After	Difference	Status
stream-chat-android-client	5.25 MB	5.82 MB	0.57 MB	🔴
stream-chat-android-ui-components	10.60 MB	10.96 MB	0.36 MB	🟡
stream-chat-android-compose	12.81 MB	12.25 MB	-0.56 MB	🚀

[coderabbitai]

Walkthrough

This change renames the message composer's "center bottom content" API to "bottom content" across the SDK, adjusts the checkbox component size from 24.dp to 20.dp, restructures the message input layout to reorganize leading and center content into a shared row, and adds new thread-mode specific test composables for active command states.

Changes

Cohort / File(s)	Summary
API & Component Factory Refactoring api/stream-chat-android-compose.api, src/main/java/io/getstream/chat/android/compose/ui/theme/ChatComponentFactory.kt, src/main/java/io/getstream/chat/android/compose/ui/theme/ChatComponentFactoryParams.kt	Renamed MessageComposerInputCenterBottomContent API contract and params classes to MessageComposerInputBottomContent and MessageComposerInputBottomContentParams. Updated KDoc references and internal factory hook implementations. Added new lambda members to composer singleton.
Message Composer Implementation Updates src/main/java/io/getstream/chat/android/compose/ui/messages/composer/internal/MessageComposerInputBottomContent.kt, src/main/java/io/getstream/chat/android/compose/ui/components/composer/MessageInput.kt	Renamed MessageComposerInputCenterBottomContent composable function to MessageComposerInputBottomContent. Adjusted padding from spacingMd to spacingSm. Restructured message input layout to place leading content alongside center content in a shared row, while bottom content remains in the column below. Added new thread-mode specific preview composables for active command placeholder and filled states.
Checkbox Component src/main/java/io/getstream/chat/android/compose/ui/components/common/Checkbox.kt	Reduced checkbox rendered size from 24.dp to 20.dp. Extracted checkbox preview states into a new internal CheckboxStates() composable displaying four state variants.
Test Suite Additions src/test/kotlin/io/getstream/chat/android/compose/ui/components/common/CheckboxTest.kt, src/test/kotlin/io/getstream/chat/android/compose/ui/messages/MessageComposerInputTest.kt	Added new checkbox snapshot test file with Paparazzi configuration. Extended message composer input tests with two new snapshot tests for active command placeholder and filled states in thread mode.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~28 minutes

Poem

🐰 A composer once named its bottoms with care,
"Center" it said, but the center wasn't there!
So we renamed it simply, removed the middle pretense,
Checkboxes shrank to twenty—it all makes more sense! ✨
New threads now have commands, and tests catch them all,
This refactor hops onward, the cleanest of calls! 🌿

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 11.11% 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: updating the command input layout in the composer thread mode based on designer feedback.
Description check	✅ Passed	The description covers all major template sections: Goal explains the problem, Implementation details the solution, UI Changes references snapshots, Testing provides step-by-step instructions, and Contributor Checklist is partially filled.

_{✏️ 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 redesign/command-input-in-composer-thread-mode

---

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 (1)

stream-chat-android-compose/api/stream-chat-android-compose.api (1)

3407-3407: Consider documenting the migration path for this public API rename.

Lines 3407, 3595, and 4478-4486 introduce a breaking rename (MessageComposerInputCenterBottomContent → MessageComposerInputBottomContent and corresponding params type). This is acceptable on the v7 branch, but migration documentation does not currently exist in the repository. For downstream SDK consumers who override ChatComponentFactory or reference these symbols directly, consider adding a migration guide or changelog entry that maps the old names to the new ones.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@stream-chat-android-compose/api/stream-chat-android-compose.api` at line
3407, Add a migration guide/changelog entry documenting the breaking rename of
MessageComposerInputCenterBottomContent → MessageComposerInputBottomContent and
the params type rename (the new ctor signature shown as
MessageComposerInputBottomContent(Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputBottomContentParams;Landroidx/compose/runtime/Composer;I)V);
update any public API docs and the ChatComponentFactory documentation to show
the old symbol names and the new equivalents, include a brief code snippet or
mapping showing how to update overrides/references (e.g., replace
MessageComposerInputCenterBottomContent with MessageComposerInputBottomContent
and the corresponding params class), and add a note in the v7 changelog stating
this breaking change and suggested migration steps for downstream SDK consumers.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatComponentFactory.kt`:
- Around line 1476-1483: The default factory MessageComposerInputBottomContent
drops params.modifier when delegating to the internal composable; update the
call inside MessageComposerInputBottomContent to forward params.modifier to
io.getstream.chat.android.compose.ui.messages.composer.internal.MessageComposerInputBottomContent
so caller-supplied modifiers are applied (keep existing parameters like
alsoSendToChannel and onAlsoSendToChannelChange and add modifier =
params.modifier).

---

Nitpick comments:
In `@stream-chat-android-compose/api/stream-chat-android-compose.api`:
- Line 3407: Add a migration guide/changelog entry documenting the breaking
rename of MessageComposerInputCenterBottomContent →
MessageComposerInputBottomContent and the params type rename (the new ctor
signature shown as
MessageComposerInputBottomContent(Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputBottomContentParams;Landroidx/compose/runtime/Composer;I)V);
update any public API docs and the ChatComponentFactory documentation to show
the old symbol names and the new equivalents, include a brief code snippet or
mapping showing how to update overrides/references (e.g., replace
MessageComposerInputCenterBottomContent with MessageComposerInputBottomContent
and the corresponding params class), and add a note in the v7 changelog stating
this breaking change and suggested migration steps for downstream SDK consumers.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 5c2fe246-3edb-40cd-b211-0485bca8af8f

📥 Commits

Reviewing files that changed from the base of the PR and between 84ada32 and d1a3157.

⛔ Files ignored due to path filters (5)

• stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.components.common_CheckboxTest_checkbox_states.png is excluded by !**/*.png
• stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.messages_MessageComposerInputTest_active_command_filled_in_thread_mode.png is excluded by !**/*.png
• stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.messages_MessageComposerInputTest_active_command_placeholder_in_thread_mode.png is excluded by !**/*.png
• stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.messages_MessageComposerInputTest_thread_mode.png is excluded by !**/*.png
• stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.messages_MessageComposerInputTest_thread_mode_also_send_to_channel.png is excluded by !**/*.png

📒 Files selected for processing (8)

• stream-chat-android-compose/api/stream-chat-android-compose.api
• stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/common/Checkbox.kt
• stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/composer/MessageInput.kt
• stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/composer/internal/MessageComposerInputBottomContent.kt
• stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatComponentFactory.kt
• stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatComponentFactoryParams.kt
• stream-chat-android-compose/src/test/kotlin/io/getstream/chat/android/compose/ui/components/common/CheckboxTest.kt
• stream-chat-android-compose/src/test/kotlin/io/getstream/chat/android/compose/ui/messages/MessageComposerInputTest.kt

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
88.2% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud