Display voice recordings above other attachments in composer

[VelikovPetar]

Goal

Voice recording attachments in the message composer had a fixed 290dp width and were rendered inline in the horizontal attachment row, which could overflow the input field. This change separates voice recordings from other attachments so they span the full width of the composer.

Implementation

• MessageComposerAttachments.kt: Split attachments via partition { isAudioRecording() }. Audio recordings are rendered full-width above the horizontal LazyRow of other attachments (images, videos, files). Test tag moved to the outer Column.
• MessageComposerAttachmentAudioRecordItem.kt: Changed from fixed .size(width = 290.dp, height = 72.dp) to .fillMaxWidth().height(72.dp) so it fills available width.

UI Changes

Before	After
vr-before.mp4	vr-after.mp4

Testing

• Add a voice recording attachment in the composer — it should span the full width
• Add additional image/file attachments alongside the voice recording — they should appear in a separate horizontal row below
• Verify the voice recording playback controls (play/pause, scrubbing, speed) still work

Summary by CodeRabbit

• Style
  • Audio recording attachments now expand to fill the available width in the message composer
  • Message composer attachment layout has been reorganized to display audio recordings separately from other media attachments such as images, videos, and files, with each attachment type presented in its designated section

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

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 5767e92d-8f24-4fb2-8260-2eb54b7d59d5

📥 Commits

Reviewing files that changed from the base of the PR and between a264e34 and 5006271.

⛔ Files ignored due to path filters (2)

• stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.messages.composer.internal.attachments_MessageComposerAttachmentsTest_audio_record_attachment_item.png is excluded by !**/*.png
• stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.messages.composer.internal.attachments_MessageComposerAttachmentsTest_message_composer_attachments.png is excluded by !**/*.png

📒 Files selected for processing (2)

• stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/composer/internal/attachments/MessageComposerAttachmentAudioRecordItem.kt
• stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/composer/internal/attachments/MessageComposerAttachments.kt

---

Walkthrough

The message composer attachment layout is reorganized to separate audio recordings from other attachments. Audio items now display at full width in a vertical column, while images, videos, and files are rendered in a horizontally scrolling row below, with each section managing its own spacing and dimensions.

Changes

Cohort / File(s)	Summary
Audio Record Item Layout MessageComposerAttachmentAudioRecordItem.kt	Changed audio attachment container from fixed width (290.dp) to fillMaxWidth(), maintaining consistent 72.dp height for the UI component.
Attachments Container Restructure MessageComposerAttachments.kt	Partitions attachments into audio and non-audio groups; audio items render directly in a column with full width, while other attachments display in a separate conditionally-rendered horizontally scrolling row with independent padding and spacing.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Attachments dance in a new design,
Audio takes center stage, stretching just fine,
Other media scrolls to the side,
Each with its space, with bunny-approved pride!

🚥 Pre-merge checks | ✅ 2 | ❌ 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 (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: voice recordings are now displayed above other attachments in the composer.
Description check	✅ Passed	The description includes Goal, Implementation, UI Changes with before/after videos, and Testing sections. Some checklist items are unchecked, but core documentation is complete and follows the template structure.

_{✏️ 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 feature/display_voice_recordings_above_other_attachments

---

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

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud