Skip to content

Add spacing between composer snackbar and input row #6423

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
andremion wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

Add spacing between composer snackbar and input row #6423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
140dceb
Add 16 dp gap between snackbar and composer input
andremion May 7, 2026
3bb700f
Drop redundant outer padding around composer input row
andremion May 7, 2026
5202b9e
Expose composer snackbar via ChatComponentFactory
andremion May 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions stream-chat-android-compose/api/stream-chat-android-compose.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1932,6 +1932,7 @@ public final class io/getstream/chat/android/compose/ui/messages/composer/Compos
public final fun getLambda$-1206314464$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-1267828661$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-1344661276$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-1407581416$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
public final fun getLambda$-173232017$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$1180759242$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$1309976052$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
Expand Down Expand Up @@ -3421,6 +3422,7 @@ public abstract interface class io/getstream/chat/android/compose/ui/theme/ChatC
public fun MessageComposerQuotedMessage (Lio/getstream/chat/android/compose/ui/theme/MessageComposerQuotedMessageParams;Landroidx/compose/runtime/Composer;I)V
public fun MessageComposerSaveButton (Lio/getstream/chat/android/compose/ui/theme/MessageComposerSaveButtonParams;Landroidx/compose/runtime/Composer;I)V
public fun MessageComposerSendButton (Lio/getstream/chat/android/compose/ui/theme/MessageComposerSendButtonParams;Landroidx/compose/runtime/Composer;I)V
public fun MessageComposerSnackbar (Lio/getstream/chat/android/compose/ui/theme/MessageComposerSnackbarParams;Landroidx/compose/runtime/Composer;I)V
public fun MessageComposerTrailingContent (Lio/getstream/chat/android/compose/ui/theme/MessageComposerTrailingContentParams;Landroidx/compose/runtime/Composer;I)V
public fun MessageComposerUserSuggestionItem (Lio/getstream/chat/android/compose/ui/theme/MessageComposerUserSuggestionItemParams;Landroidx/compose/runtime/Composer;I)V
public fun MessageComposerUserSuggestionItemCenterContent (Lio/getstream/chat/android/compose/ui/theme/MessageComposerUserSuggestionItemCenterContentParams;Landroidx/compose/runtime/Composer;I)V
Expand Down Expand Up @@ -3611,6 +3613,7 @@ public final class io/getstream/chat/android/compose/ui/theme/ChatComponentFacto
public static fun MessageComposerQuotedMessage (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/MessageComposerQuotedMessageParams;Landroidx/compose/runtime/Composer;I)V
public static fun MessageComposerSaveButton (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/MessageComposerSaveButtonParams;Landroidx/compose/runtime/Composer;I)V
public static fun MessageComposerSendButton (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/MessageComposerSendButtonParams;Landroidx/compose/runtime/Composer;I)V
public static fun MessageComposerSnackbar (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/MessageComposerSnackbarParams;Landroidx/compose/runtime/Composer;I)V
public static fun MessageComposerTrailingContent (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/MessageComposerTrailingContentParams;Landroidx/compose/runtime/Composer;I)V
public static fun MessageComposerUserSuggestionItem (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/MessageComposerUserSuggestionItemParams;Landroidx/compose/runtime/Composer;I)V
public static fun MessageComposerUserSuggestionItemCenterContent (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/MessageComposerUserSuggestionItemCenterContentParams;Landroidx/compose/runtime/Composer;I)V
Expand Down Expand Up @@ -4810,6 +4813,18 @@ public final class io/getstream/chat/android/compose/ui/theme/MessageComposerSen
public fun toString ()Ljava/lang/String;
}

public final class io/getstream/chat/android/compose/ui/theme/MessageComposerSnackbarParams {
public static final field $stable I
public fun <init> (Landroidx/compose/material3/SnackbarData;)V
public final fun component1 ()Landroidx/compose/material3/SnackbarData;
public final fun copy (Landroidx/compose/material3/SnackbarData;)Lio/getstream/chat/android/compose/ui/theme/MessageComposerSnackbarParams;
public static synthetic fun copy$default (Lio/getstream/chat/android/compose/ui/theme/MessageComposerSnackbarParams;Landroidx/compose/material3/SnackbarData;ILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/MessageComposerSnackbarParams;
public fun equals (Ljava/lang/Object;)Z
public final fun getData ()Landroidx/compose/material3/SnackbarData;
public fun hashCode ()I
public fun toString ()Ljava/lang/String;
}

public final class io/getstream/chat/android/compose/ui/theme/MessageComposerTrailingContentParams {
public static final field $stable I
public fun <init> (Lio/getstream/chat/android/ui/common/state/messages/composer/MessageComposerState;)V
Expand Down
5 changes: 1 addition & 4 deletions ...roid-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/ChannelScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.ime
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeDrawingPadding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarDuration
Expand Down Expand Up @@ -367,9 +366,7 @@ internal fun DefaultBottomBarContent(

Column {
MessageComposer(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight(),
modifier = Modifier.fillMaxWidth(),
viewModel = composerViewModel,
isAttachmentPickerVisible = attachmentsPickerViewModel.isPickerVisible,
onAttachmentsClick = attachmentsPickerViewModel::togglePickerVisibility,
Expand Down
8 changes: 6 additions & 2 deletions ...e/src/main/java/io/getstream/chat/android/compose/ui/messages/composer/MessageComposer.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ import io.getstream.chat.android.compose.ui.theme.LocalChatUiConfig
import io.getstream.chat.android.compose.ui.theme.MessageComposerInputParams
import io.getstream.chat.android.compose.ui.theme.MessageComposerLeadingContentParams
import io.getstream.chat.android.compose.ui.theme.MessageComposerParams
import io.getstream.chat.android.compose.ui.theme.MessageComposerSnackbarParams
import io.getstream.chat.android.compose.ui.theme.MessageComposerTrailingContentParams
import io.getstream.chat.android.compose.ui.theme.StreamTokens
import io.getstream.chat.android.compose.ui.util.SnackbarPopup
Expand Down Expand Up @@ -299,7 +300,6 @@ public fun MessageComposer(

Row(
modifier = Modifier
.padding(vertical = StreamTokens.spacing2xs)
.fillMaxWidth()
.padding(
start = StreamTokens.spacingMd,
Expand Down Expand Up @@ -330,7 +330,11 @@ public fun MessageComposer(
)

if (snackbarHostState.currentSnackbarData != null) {
SnackbarPopup(hostState = snackbarHostState)
SnackbarPopup(hostState = snackbarHostState) { snackbarData ->
ChatTheme.componentFactory.MessageComposerSnackbar(
params = MessageComposerSnackbarParams(data = snackbarData),
)
}
Comment thread
andremion marked this conversation as resolved.
}
}
}
Expand Down
16 changes: 16 additions & 0 deletions ...-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatComponentFactory.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1705,6 +1705,22 @@ public interface ChatComponentFactory {
StreamSnackbar(snackbarData = params.data)
}

/**
* The snackbar shown above the message composer for validation errors and command-related
* events.
*
* Override this method to provide a custom snackbar appearance for the composer.
*
* @param params Parameters for this component.
*/
@Composable
public fun MessageComposerSnackbar(params: MessageComposerSnackbarParams) {
StreamSnackbar(
modifier = Modifier.padding(bottom = StreamTokens.spacingMd),
Copy link
Copy Markdown
Contributor

@VelikovPetar VelikovPetar May 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it OK to always pass Modifier.padding(bottom = StreamTokens.spacingMd) here? Mostly concerned about a case where we would need to provide a different bottom spacing in a new feature.
I am thinking if it would be ok to pass the padding modifier from outside, giving us more flexibility to style the snackbar.

snackbarData = params.data,
)
}

/**
* The default avatar component that displays an image from a URL or falls back to a placeholder.
* This component serves as the foundational UI for all avatar types.
Expand Down
9 changes: 9 additions & 0 deletions ...se/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatComponentFactoryParams.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1282,6 +1282,15 @@ public data class MessageComposerAudioRecordingHintParams(
val data: SnackbarData,
)

/**
* Parameters for [ChatComponentFactory.MessageComposerSnackbar].
*
* @param data The snackbar data containing the message, variant, and optional action.
*/
public data class MessageComposerSnackbarParams(
val data: SnackbarData,
Copy link
Copy Markdown
Contributor

@VelikovPetar VelikovPetar May 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it make sense to pass a Modifier here as well?

)

/**
* Parameters for [ChatComponentFactory.Avatar].
*
Expand Down
6 changes: 3 additions & 3 deletions ...android-compose/src/main/java/io/getstream/chat/android/compose/ui/util/StreamSnackbar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ internal data class StreamSnackbarVisuals(
* snackbar's variant), and an optional action button.
*
* @param snackbarData The [SnackbarData] driving the message, variant, and optional action.
* @param modifier Modifier applied to the inner [Surface] (e.g. to control width or padding).
* @param modifier Modifier for styling.
*/
@Composable
internal fun StreamSnackbar(
Expand All @@ -85,9 +85,9 @@ internal fun StreamSnackbar(
val actionLabel = snackbarData.visuals.actionLabel
val variant = (snackbarData.visuals as? StreamSnackbarVisuals)?.variant
?: StreamSnackbarVariant.Default
Box(modifier = Modifier.padding(StreamTokens.spacingMd)) {
Box(modifier = modifier.padding(StreamTokens.spacingMd)) {
Surface(
modifier = modifier.shadow(4.dp, shape = SnackbarShape),
modifier = Modifier.shadow(elevation = StreamTokens.elevation3, shape = SnackbarShape),
shape = SnackbarShape,
color = ChatTheme.colors.backgroundCoreInverse,
contentColor = ChatTheme.colors.textOnInverse,
Expand Down
Binary file modified ....getstream.chat.android.compose.ui.messages_MessageComposerTest_fixed_style.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ompose.ui.messages_MessageComposerTest_fixed_style_with_command_suggestions.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...d.compose.ui.messages_MessageComposerTest_fixed_style_with_user_suggestions.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ....ui.messages_MessageComposerTest_fixed_style_with_visible_attachment_picker.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...tstream.chat.android.compose.ui.messages_MessageComposerTest_floating_style.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...es_MessageComposerTest_floating_style_with_command_suggestions_in_dark_mode.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...s_MessageComposerTest_floating_style_with_command_suggestions_in_light_mode.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...sages_MessageComposerTest_floating_style_with_user_suggestions_in_dark_mode.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ages_MessageComposerTest_floating_style_with_user_suggestions_in_light_mode.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ....messages_MessageComposerTest_floating_style_with_visible_attachment_picker.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading