Update design of composer link preview #6066

gpunto · 2026-01-02T16:02:52Z

🎯 Goal

AND-996: Update composer link preview design

Adapt design of the component displaying link previews in the composer.

🛠 Implementation details

Move display of the link previews from above to inside the message input
Update ComposerLinkPreview and CancelIcon to new design

🎨 UI Changes

Figma: https://www.figma.com/design/Us73erK1xFNcB5EH3hyq6Y/%F0%9F%9A%A7-Chat-SDK-Design-System?node-id=322-9605

Note: given that the rest of the composer design isn't yet update, the complete result isn't perfect, e.g.:

the preview feels crammed because there's less horizontal space than in the final design and vertical padding is still to adjust
the cancel icon border doesn't blend into the background

Before	After

🧪 Testing

Launch the compose sample, open a chat and add a link in the composer

☑️Contributor Checklist

General

I have signed the Stream CLA (required)
Assigned a person / code owner group (required)
Thread with the PR link started in a respective Slack channel (#android-chat-core or #android-chat-ui) (required)
PR is linked to the GitHub issue it resolves

Code & documentation

Changelog is updated with client-facing changes
New code is covered by unit tests
Comparison screenshots added for visual changes
Affected documentation updated (KDocs, docusaurus, tutorial)

☑️Reviewer Checklist

UI Components sample runs & works
Compose sample runs & works
UI Changes correct (before & after images)
Bugs validated (bugfixes)
New feature tested and works
Release notes and docs clearly describe changes
All code we touched has new or updated KDocs
Check the SDK Size Comparison table in the CI logs

🎉 GIF

Please provide a suitable gif that describes your work on this pull request

Summary by CodeRabbit

New Features
- Added link preview click handling to the message composer, allowing users to interact with previewed links.
Style
- Enhanced link preview appearance with borders, backgrounds, and rounded corners.
- Added border styling to the message composer's cancel icon.
- Refined attachment shape corners for improved visual consistency.
- Expanded design system with new semantic colors for borders and controls.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

github-actions · 2026-01-02T16:24:53Z

SDK Size Comparison 📏

SDK	Before	After	Difference	Status
stream-chat-android-client	5.25 MB	5.25 MB	0.00 MB	🟢
stream-chat-android-offline	5.48 MB	5.48 MB	0.00 MB	🟢
stream-chat-android-ui-components	10.60 MB	10.60 MB	0.00 MB	🟢
stream-chat-android-compose	12.81 MB	11.66 MB	-1.15 MB	🚀

gpunto · 2026-01-02T16:15:14Z

...hat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamColors.kt

    @Deprecated("Use MessageTheme.quotedTextStyle.color instead", level = DeprecationLevel.ERROR)
    public val otherMessageQuotedText: Color = textHighEmphasis,
+
+    // Design System semantic colors


The objective is to end up with none of the already-existing colors above and just have the semantic colors as defined in Figma. Hopefully they'll be autogenerated too. Similarly for StreamPrimitiveColors below

gpunto · 2026-01-02T16:22:41Z

...oid-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/MessageComposerTheme.kt

@@ -112,9 +116,10 @@ public data class ComposerCancelIconStyle(
        ): ComposerCancelIconStyle {
            return ComposerCancelIconStyle(


For now, I changed the existing styles to adapt them to the new designs. However, I'd really love if we could simplify/remove them altogether as they add complexity just to allow very granular customization of really simple components. To me, it would make more sense for an integrator to just replace the component in such simple cases.

I'll discuss this next week with the rest of the folks working on the redesign

gpunto · 2026-01-02T16:23:03Z

...mpose/src/main/java/io/getstream/chat/android/compose/ui/components/composer/MessageInput.kt

    messageComposerState: MessageComposerState,
    onValueChange: (String) -> Unit,
    onAttachmentRemoved: (Attachment) -> Unit,
+    onLinkPreviewClick: ((LinkPreview) -> Unit)?,


In new design, the message input gains more components to be displayed above the actual input, like the link preview in this PR. For the time being, I've just put the invocation of the link preview inside the input itself below and added this callback here, like it already works for quoted message & attachments.

However, later we may consider if it's worth changing the approach and expose a @Composable slot here for what goes above the input and then we pass a column with the default composables we want.

gpunto · 2026-01-05T12:24:38Z

@coderabbitai review

coderabbitai · 2026-01-05T12:24:46Z

✅ 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 · 2026-01-05T12:30:23Z

Walkthrough

This PR refactors the message composer's link preview functionality and styling. It introduces a new onLinkPreviewClick callback parameter throughout the composer pipeline, redesigns the link preview UI layout, enhances visual styling with borders and semantic colors, and implements centralized click handling for link previews.

Changes

Cohort / File(s)	Summary
Link Preview Click Handling `stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/composer/MessageInput.kt`, `MessageComposer.kt`, `ChatComponentFactory.kt`	Added `onLinkPreviewClick: ((LinkPreview) -> Unit)?` parameter across message composer APIs and wired it to link preview rendering. MessageInput now conditionally renders MessageComposerLinkPreview with the callback when link previews exist and feature is enabled.
Link Preview Click Handling (Testing) `stream-chat-android-compose/src/test/kotlin/io/getstream/chat/android/compose/ui/components/composer/HandleLinkPreviewClickTest.kt`	Added unit tests for `handleLinkPreviewClick` function covering callback delegation and fallback ACTION_VIEW intent behavior.
Link Preview UI Refactor `stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/composer/ComposerLinkPreview.kt`	Major redesign from Row-based to Box-based layout with dedicated text composables, centralized click handling via new internal `handleLinkPreviewClick` function, URL resolution via extension, and CancelIcon integration. ComposerLinkPreview marked internal; error handling added for ACTION_VIEW intent failures.
Cancel Icon Styling `stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/CancelIcon.kt`	Reworked to derive all visual properties (border, shape, background, painter, tint) from style object instead of direct theme usage. Added conditional border application via `Modifier.border` and fixed 2.dp padding.
Composer Theme Updates `stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/MessageComposerTheme.kt`	ComposerCancelIconStyle now includes `border: BorderStroke?` parameter and cross painter. ComposerLinkPreviewTheme restructured with `background`, `shape`, `imageBorder`, `url` styling; removed separator properties. Default theme factory signature expanded to accept `shapes: StreamShapes`.
Color System Expansion `stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamColors.kt`	Added semantic design colors: `borderCoreOnDark`, `borderCoreImage`, `chatBgIncoming`, `chatBgOutgoing`, `controlRemoveBg`, `controlRemoveBorder`, `controlRemoveIcon`. New internal `StreamPrimitiveColors` object provides palette foundation.
Shape Adjustments `stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamShapes.kt`	Changed default attachment shape corner radius from 16.dp to 12.dp.
Vector Assets `stream-chat-android-compose/src/main/res/drawable/stream_compose_ic_cross.xml`	New cross icon drawable (16x16dp, white stroke, round caps) for cancel/close actions.
API Declarations `stream-chat-android-compose/api/stream-chat-android-compose.api`	Updated public signatures for MessageInput, ComposerCancelIconStyle, ComposerLinkPreviewTheme, StreamColors, and related theme classes. Added new ComposableSingletons class. Expanded constructor and copy method signatures.
Documentation & Samples `stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/MessagesActivity.kt`, `stream-chat-android-docs/src/main/kotlin/io/getstream/chat/docs/kotlin/compose/messages/MessageComposer.kt`, `CustomComposerAndAttachmentsPicker.kt`	Updated sample and documentation code to pass `onLinkPreviewClick = null` to MessageInput. Removed explicit attachmentCancelIcon customization.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant MessageInput as MessageInput<br/>(Composable)
    participant ComposerLP as ComposerLinkPreview<br/>(Composable)
    participant Handler as handleLinkPreviewClick<br/>(Function)
    participant Callback as onLinkPreviewClick<br/>(Optional Callback)
    participant Context as Context/<br/>Activity
    
    User->>ComposerLP: clicks link preview
    ComposerLP->>Handler: invokes with onClick callback
    
    alt onClick callback provided
        Handler->>Callback: invokes onClick(linkPreview)
        Callback-->>User: handles click
    else onClick is null (default)
        Handler->>Context: startActivity with ACTION_VIEW intent
        Note over Handler: logs and toasts on error
        Context-->>User: opens URL in browser
    end

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Poem

🐰 A hop through the preview so fine,
New borders and shapes all align,
From click to callback it flows,
Where each link preview glows,
With colors semantic—a designer's design! 🎨✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 32.14% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Update design of composer link preview' directly and clearly summarizes the main change: updating the visual design of the composer link preview component.
Description check	✅ Passed	The description includes the required sections (Goal, Implementation details, UI Changes with before/after screenshots, and Testing), though the Contributor Checklist items remain unchecked.
Linked Issues check	✅ Passed	The PR implements AND-996 objectives: it updates ComposerLinkPreview and CancelIcon design, moves link preview display into the message input, and provides UI changes with Figma reference and screenshots.
Out of Scope Changes check	✅ Passed	All changes are scoped to the AND-996 objective: ComposerLinkPreview redesign, CancelIcon styling, link preview placement in MessageInput, theme updates, and supporting test coverage.

✨ Finishing touches

📝 Generate docstrings

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 and usage tips.}

coderabbitai

Actionable comments posted: 3

Fix all issues with AI Agents 🤖

In @stream-chat-android-compose/api/stream-chat-android-compose.api:
- Line 1687: The new onLinkPreviewClick parameter was inserted before modifier
in MessageInput and ChatComponentFactory.MessageComposerInput breaking
source/binary compatibility; move the onLinkPreviewClick parameter to the end of
each function’s parameter list (after innerTrailingContent) and keep its default
value ((LinkPreview) -> Unit)? = null so existing positional callers continue to
work, then update any corresponding overloads/signatures and generated API
metadata to reflect the new parameter order.

In
@stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/CancelIcon.kt:
- Around line 70-76: Replace the standard Compose preview annotation with the
project's preview helper: change the CancelIconPreview function's annotation
from @Preview to @StreamPreview so the preview follows project guidelines;
update the annotation above the CancelIconPreview composable (which calls
CancelIcon) accordingly.

In
@stream-chat-android-docs/src/main/kotlin/io/getstream/chat/docs/kotlin/cookbook/ui/CustomComposerAndAttachmentsPicker.kt:
- Line 45: Remove the unused import OnlineIndicator from the top of the file;
locate the import statement "import
io.getstream.chat.android.compose.ui.components.OnlineIndicator" in
CustomComposerAndAttachmentsPicker.kt and delete that line so there are no
unused imports remaining.

🧹 Nitpick comments (6)

stream-chat-android-compose/src/test/kotlin/io/getstream/chat/android/compose/ui/components/composer/HandleLinkPreviewClickTest.kt (1)

28-59: Consider adding edge case tests.

The tests cover the main happy paths well. Consider adding tests for:

ActivityNotFoundException handling (toast displayed, error logged)

Null URL scenario (when both titleLink and ogUrl are null) to verify the checkNotNull behavior

These would improve coverage of error handling paths in handleLinkPreviewClick.

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/composer/ComposerLinkPreview.kt (1)

211-217: Consider using @StreamPreview helper.

Per coding guidelines, Compose previews should use StreamPreview helpers instead of the standard @Preview annotation for consistency across the SDK.

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

3709-3757: StreamColors growth is acceptable but getting unwieldy; consider future grouping

You’ve extended StreamColors with several new fields (e.g., borderCoreImage, borderCoreOnDark, chatBgIncoming, chatBgOutgoing, and the controlRemove* colors). This is a reasonable way to support the updated composer/link‑preview visuals from the design system, and the constructor/copy/getter set appears consistent.

However, the constructor and copy(...) for StreamColors are now extremely long and increasingly hard to maintain without mistakes.

For this PR, I’d just suggest:

Double‑check that defaultColors / defaultDarkColors initialize all new fields coherently and that the new colors are actually consumed by the new composer/link‑preview components.

Longer term, consider grouping related colors into smaller value objects (e.g., a ComposerColors or BorderColors struct) to keep the API surface from becoming too error‑prone to evolve.

Also applies to: 3760-3767
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamColors.kt (2)
117-125: New semantic colors added without KDoc documentation.

The new design system colors (borderCoreOnDark, borderCoreImage, chatBgIncoming, chatBgOutgoing, controlRemoveBg, controlRemoveBorder, controlRemoveIcon) are public API but lack documentation in the class-level KDoc. Consider adding @param entries to maintain documentation consistency with existing properties.

214-219: Consider explicitly setting controlRemoveBorder for clarity.

Unlike defaultColors() which explicitly sets controlRemoveBorder, this relies on the default value. While functionally equivalent (both resolve to baseWhite), explicit initialization would improve readability and make the dark theme configuration self-documenting.
Suggested change
 controlRemoveBg = StreamPrimitiveColors.neutral800,
 controlRemoveIcon = StreamPrimitiveColors.baseWhite,
+controlRemoveBorder = StreamPrimitiveColors.baseWhite,
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/composer/MessageComposer.kt (1)

410-426: Unused onLinkPreviewClick parameter in DefaultMessageComposerHeaderContent.

The onLinkPreviewClick parameter is added to the function signature but not used in the implementation body. Since link previews have been moved to the input area, consider either:

Removing this parameter if it's not needed for API compatibility

Adding a clarifying comment if it's kept intentionally for custom implementations

📜 Review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between bf3e3d1 and 24cee0b.

📒 Files selected for processing (14)

stream-chat-android-compose-sample/src/main/java/io/getstream/chat/android/compose/sample/ui/MessagesActivity.kt
stream-chat-android-compose/api/stream-chat-android-compose.api
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/CancelIcon.kt
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/composer/ComposerLinkPreview.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/MessageComposer.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/MessageComposerTheme.kt
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamColors.kt
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamShapes.kt
stream-chat-android-compose/src/main/res/drawable/stream_compose_ic_cross.xml
stream-chat-android-compose/src/test/kotlin/io/getstream/chat/android/compose/ui/components/composer/HandleLinkPreviewClickTest.kt
stream-chat-android-docs/src/main/kotlin/io/getstream/chat/docs/kotlin/compose/messages/MessageComposer.kt
stream-chat-android-docs/src/main/kotlin/io/getstream/chat/docs/kotlin/cookbook/ui/CustomComposerAndAttachmentsPicker.kt

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{kt,kts}