Skip to content

Commit 4535092

Browse files
andremionandremion
authored
Update command input layout in composer thread mode as per designer review (#6355)
* Add snapshots and previews for MessageComposerInput with active commands in thread mode. * Add screenshot tests for Checkbox component * Update Checkbox size from 24dp to 20dp * Adjust "Also send in Channel" layout position as per designer review. * Pass the modifier to MessageComposerInputBottomContent in ChatComponentFactory * apiDump * Fix focus when selecting a command
1 parent a71f41d commit 4535092

14 files changed

Lines changed: 160 additions & 48 deletions

‎stream-chat-android-compose/api/stream-chat-android-compose.api‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1353,8 +1353,10 @@ public final class io/getstream/chat/android/compose/ui/components/composer/Comp
13531353
public fun <init> ()V
13541354
public final fun getLambda$-1141807280$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
13551355
public final fun getLambda$-1150438384$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
1356+
public final fun getLambda$-120349014$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
13561357
public final fun getLambda$-1240289060$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
13571358
public final fun getLambda$-1320161390$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
1359+
public final fun getLambda$-132642371$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
13581360
public final fun getLambda$-1355851382$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
13591361
public final fun getLambda$-148308776$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
13601362
public final fun getLambda$-1789505997$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
@@ -2008,11 +2010,11 @@ public final class io/getstream/chat/android/compose/ui/messages/composer/intern
20082010
public final fun getLambda$1901566342$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
20092011
}
20102012

2011-
public final class io/getstream/chat/android/compose/ui/messages/composer/internal/ComposableSingletons$MessageComposerInputCenterBottomContentKt {
2012-
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/messages/composer/internal/ComposableSingletons$MessageComposerInputCenterBottomContentKt;
2013+
public final class io/getstream/chat/android/compose/ui/messages/composer/internal/ComposableSingletons$MessageComposerInputBottomContentKt {
2014+
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/messages/composer/internal/ComposableSingletons$MessageComposerInputBottomContentKt;
20132015
public fun <init> ()V
2014-
public final fun getLambda$-251225122$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
2015-
public final fun getLambda$-914010537$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
2016+
public final fun getLambda$-1649672542$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
2017+
public final fun getLambda$494648681$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
20162018
}
20172019

20182020
public final class io/getstream/chat/android/compose/ui/messages/composer/internal/ComposableSingletons$MessageComposerInputTrailingContentKt {
@@ -3414,7 +3416,7 @@ public abstract interface class io/getstream/chat/android/compose/ui/theme/ChatC
34143416
public fun MessageComposerCoolDownIndicator (Lio/getstream/chat/android/compose/ui/theme/MessageComposerCoolDownIndicatorParams;Landroidx/compose/runtime/Composer;I)V
34153417
public fun MessageComposerEditIndicator (Lio/getstream/chat/android/compose/ui/theme/MessageComposerEditIndicatorParams;Landroidx/compose/runtime/Composer;I)V
34163418
public fun MessageComposerInput (Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputParams;Landroidx/compose/runtime/Composer;I)V
3417-
public fun MessageComposerInputCenterBottomContent (Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputCenterBottomContentParams;Landroidx/compose/runtime/Composer;I)V
3419+
public fun MessageComposerInputBottomContent (Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputBottomContentParams;Landroidx/compose/runtime/Composer;I)V
34183420
public fun MessageComposerInputCenterContent (Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputCenterContentParams;Landroidx/compose/runtime/Composer;I)V
34193421
public fun MessageComposerInputLeadingContent (Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputLeadingContentParams;Landroidx/compose/runtime/Composer;I)V
34203422
public fun MessageComposerInputTrailingContent (Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputTrailingContentParams;Landroidx/compose/runtime/Composer;I)V
@@ -3602,7 +3604,7 @@ public final class io/getstream/chat/android/compose/ui/theme/ChatComponentFacto
36023604
public static fun MessageComposerCoolDownIndicator (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/MessageComposerCoolDownIndicatorParams;Landroidx/compose/runtime/Composer;I)V
36033605
public static fun MessageComposerEditIndicator (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/MessageComposerEditIndicatorParams;Landroidx/compose/runtime/Composer;I)V
36043606
public static fun MessageComposerInput (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputParams;Landroidx/compose/runtime/Composer;I)V
3605-
public static fun MessageComposerInputCenterBottomContent (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputCenterBottomContentParams;Landroidx/compose/runtime/Composer;I)V
3607+
public static fun MessageComposerInputBottomContent (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputBottomContentParams;Landroidx/compose/runtime/Composer;I)V
36063608
public static fun MessageComposerInputCenterContent (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputCenterContentParams;Landroidx/compose/runtime/Composer;I)V
36073609
public static fun MessageComposerInputLeadingContent (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputLeadingContentParams;Landroidx/compose/runtime/Composer;I)V
36083610
public static fun MessageComposerInputTrailingContent (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputTrailingContentParams;Landroidx/compose/runtime/Composer;I)V
@@ -4485,15 +4487,15 @@ public final class io/getstream/chat/android/compose/ui/theme/MessageComposerEdi
44854487
public fun toString ()Ljava/lang/String;
44864488
}
44874489

4488-
public final class io/getstream/chat/android/compose/ui/theme/MessageComposerInputCenterBottomContentParams {
4490+
public final class io/getstream/chat/android/compose/ui/theme/MessageComposerInputBottomContentParams {
44894491
public static final field $stable I
44904492
public fun <init> (Lio/getstream/chat/android/ui/common/state/messages/composer/MessageComposerState;Lkotlin/jvm/functions/Function1;Landroidx/compose/ui/Modifier;)V
44914493
public synthetic fun <init> (Lio/getstream/chat/android/ui/common/state/messages/composer/MessageComposerState;Lkotlin/jvm/functions/Function1;Landroidx/compose/ui/Modifier;ILkotlin/jvm/internal/DefaultConstructorMarker;)V
44924494
public final fun component1 ()Lio/getstream/chat/android/ui/common/state/messages/composer/MessageComposerState;
44934495
public final fun component2 ()Lkotlin/jvm/functions/Function1;
44944496
public final fun component3 ()Landroidx/compose/ui/Modifier;
4495-
public final fun copy (Lio/getstream/chat/android/ui/common/state/messages/composer/MessageComposerState;Lkotlin/jvm/functions/Function1;Landroidx/compose/ui/Modifier;)Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputCenterBottomContentParams;
4496-
public static synthetic fun copy$default (Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputCenterBottomContentParams;Lio/getstream/chat/android/ui/common/state/messages/composer/MessageComposerState;Lkotlin/jvm/functions/Function1;Landroidx/compose/ui/Modifier;ILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputCenterBottomContentParams;
4497+
public final fun copy (Lio/getstream/chat/android/ui/common/state/messages/composer/MessageComposerState;Lkotlin/jvm/functions/Function1;Landroidx/compose/ui/Modifier;)Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputBottomContentParams;
4498+
public static synthetic fun copy$default (Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputBottomContentParams;Lio/getstream/chat/android/ui/common/state/messages/composer/MessageComposerState;Lkotlin/jvm/functions/Function1;Landroidx/compose/ui/Modifier;ILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/MessageComposerInputBottomContentParams;
44974499
public fun equals (Ljava/lang/Object;)Z
44984500
public final fun getModifier ()Landroidx/compose/ui/Modifier;
44994501
public final fun getOnAlsoSendToChannelChange ()Lkotlin/jvm/functions/Function1;

‎stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/common/Checkbox.kt‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ internal fun Checkbox(
5454
val colors = ChatTheme.colors
5555
Box(
5656
modifier = modifier
57-
.size(24.dp)
57+
.size(20.dp)
5858
.run {
5959
when {
6060
!checked && enabled -> border(1.dp, borderColor, CheckboxShape)
@@ -92,14 +92,19 @@ private val CheckboxShape = RoundedCornerShape(StreamTokens.radiusSm)
9292
@Composable
9393
private fun CheckboxPreview() {
9494
ChatTheme {
95-
Row(
96-
modifier = Modifier.padding(16.dp),
97-
horizontalArrangement = Arrangement.spacedBy(16.dp),
98-
) {
99-
Checkbox(checked = false, enabled = true, onCheckedChange = {})
100-
Checkbox(checked = true, enabled = true, onCheckedChange = {})
101-
Checkbox(checked = false, enabled = false, onCheckedChange = {})
102-
Checkbox(checked = true, enabled = false, onCheckedChange = {})
103-
}
95+
CheckboxStates()
96+
}
97+
}
98+
99+
@Composable
100+
internal fun CheckboxStates() {
101+
Row(
102+
modifier = Modifier.padding(16.dp),
103+
horizontalArrangement = Arrangement.spacedBy(16.dp),
104+
) {
105+
Checkbox(checked = false, enabled = true, onCheckedChange = {})
106+
Checkbox(checked = true, enabled = true, onCheckedChange = {})
107+
Checkbox(checked = false, enabled = false, onCheckedChange = {})
108+
Checkbox(checked = true, enabled = false, onCheckedChange = {})
104109
}
105110
}

‎stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/composer/MessageInput.kt‎

Lines changed: 60 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ import io.getstream.chat.android.compose.ui.theme.ComposerConfig
4242
import io.getstream.chat.android.compose.ui.theme.LocalChatUiConfig
4343
import io.getstream.chat.android.compose.ui.theme.MessageComposerAttachmentsParams
4444
import io.getstream.chat.android.compose.ui.theme.MessageComposerEditIndicatorParams
45-
import io.getstream.chat.android.compose.ui.theme.MessageComposerInputCenterBottomContentParams
45+
import io.getstream.chat.android.compose.ui.theme.MessageComposerInputBottomContentParams
4646
import io.getstream.chat.android.compose.ui.theme.MessageComposerInputCenterContentParams
4747
import io.getstream.chat.android.compose.ui.theme.MessageComposerInputLeadingContentParams
4848
import io.getstream.chat.android.compose.ui.theme.MessageComposerInputTrailingContentParams
@@ -130,25 +130,26 @@ public fun MessageInput(
130130
.minimumInteractiveComponentSize(),
131131
verticalAlignment = Alignment.Bottom,
132132
) {
133-
ChatTheme.componentFactory.MessageComposerInputLeadingContent(
134-
params = MessageComposerInputLeadingContentParams(
135-
state = messageComposerState,
136-
onActiveCommandDismiss = onActiveCommandDismiss,
137-
),
138-
)
139-
140133
val isRecording = messageComposerState.recording !is RecordingState.Idle
141134
if (!isRecording) {
142135
Column(modifier = Modifier.weight(1f)) {
143-
ChatTheme.componentFactory.MessageComposerInputCenterContent(
144-
params = MessageComposerInputCenterContentParams(
145-
modifier = Modifier.fillMaxWidth(),
146-
state = messageComposerState,
147-
onValueChange = onValueChange,
148-
),
149-
)
150-
ChatTheme.componentFactory.MessageComposerInputCenterBottomContent(
151-
params = MessageComposerInputCenterBottomContentParams(
136+
Row(verticalAlignment = Alignment.Bottom) {
137+
ChatTheme.componentFactory.MessageComposerInputLeadingContent(
138+
params = MessageComposerInputLeadingContentParams(
139+
state = messageComposerState,
140+
onActiveCommandDismiss = onActiveCommandDismiss,
141+
),
142+
)
143+
ChatTheme.componentFactory.MessageComposerInputCenterContent(
144+
params = MessageComposerInputCenterContentParams(
145+
modifier = Modifier.weight(1f),
146+
state = messageComposerState,
147+
onValueChange = onValueChange,
148+
),
149+
)
150+
}
151+
ChatTheme.componentFactory.MessageComposerInputBottomContent(
152+
params = MessageComposerInputBottomContentParams(
152153
state = messageComposerState,
153154
onAlsoSendToChannelChange = onAlsoSendToChannelChange,
154155
),
@@ -346,6 +347,7 @@ internal fun MessageComposerInputThreadModeAlsoSendToChannel() {
346347
messageMode = MessageMode.MessageThread(
347348
parentMessage = PreviewMessageData.message1,
348349
),
350+
inputValue = "Great, thanks! \uD83D\uDE4C Let me also share it in the channel",
349351
alsoSendToChannel = true,
350352
),
351353
)
@@ -368,6 +370,26 @@ internal fun MessageComposerInputActiveCommandPlaceholder() {
368370
)
369371
}
370372

373+
@Preview
374+
@Composable
375+
private fun MessageComposerInputActiveCommandPlaceholderInThreadModePreview() {
376+
ChatTheme {
377+
MessageComposerInputActiveCommandPlaceholderInThreadMode()
378+
}
379+
}
380+
381+
@Composable
382+
internal fun MessageComposerInputActiveCommandPlaceholderInThreadMode() {
383+
MessageInput(
384+
messageComposerState = PreviewMessageComposerState.copy(
385+
messageMode = MessageMode.MessageThread(
386+
parentMessage = PreviewMessageData.message1,
387+
),
388+
activeCommand = PreviewCommandData.command1,
389+
),
390+
)
391+
}
392+
371393
@Preview
372394
@Composable
373395
private fun MessageComposerInputActiveCommandFilledPreview() {
@@ -386,6 +408,27 @@ internal fun MessageComposerInputActiveCommandFilled() {
386408
)
387409
}
388410

411+
@Preview
412+
@Composable
413+
private fun MessageComposerInputActiveCommandFilledInThreadModePreview() {
414+
ChatTheme {
415+
MessageComposerInputActiveCommandFilledInThreadMode()
416+
}
417+
}
418+
419+
@Composable
420+
internal fun MessageComposerInputActiveCommandFilledInThreadMode() {
421+
MessageInput(
422+
messageComposerState = PreviewMessageComposerState.copy(
423+
messageMode = MessageMode.MessageThread(
424+
parentMessage = PreviewMessageData.message1,
425+
),
426+
activeCommand = PreviewCommandData.command1,
427+
inputValue = "The Office",
428+
),
429+
)
430+
}
431+
389432
@Preview
390433
@Composable
391434
private fun MessageComposerInputAttachmentsPreview() {

‎stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/composer/MessageComposer.kt‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import androidx.compose.ui.Alignment
3737
import androidx.compose.ui.Alignment.Companion.Bottom
3838
import androidx.compose.ui.Modifier
3939
import androidx.compose.ui.focus.FocusRequester
40+
import androidx.compose.ui.focus.focusRequester
4041
import androidx.compose.ui.platform.LocalContext
4142
import androidx.compose.ui.res.stringResource
4243
import androidx.compose.ui.tooling.preview.Preview
@@ -123,7 +124,9 @@ public fun MessageComposer(
123124

124125
ChatTheme.componentFactory.MessageComposerInput(
125126
params = MessageComposerInputParams(
126-
modifier = Modifier.weight(1f),
127+
modifier = Modifier
128+
.weight(1f)
129+
.focusRequester(inputFocusRequester),
127130
state = state,
128131
onInputChanged = onValueChange,
129132
onAttachmentRemoved = onAttachmentRemoved,

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/composer/internal/MessageComposerInputCenterBottomContent.kt renamed to stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/composer/internal/MessageComposerInputBottomContent.kt

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ import io.getstream.chat.android.compose.ui.theme.ChatTheme
3535
import io.getstream.chat.android.compose.ui.theme.StreamTokens
3636

3737
@Composable
38-
internal fun MessageComposerInputCenterBottomContent(
38+
internal fun MessageComposerInputBottomContent(
3939
alsoSendToChannel: Boolean,
4040
onAlsoSendToChannelChange: (Boolean) -> Unit,
4141
modifier: Modifier = Modifier,
@@ -51,7 +51,7 @@ internal fun MessageComposerInputCenterBottomContent(
5151
.padding(
5252
start = StreamTokens.spacingMd,
5353
end = StreamTokens.spacingMd,
54-
bottom = StreamTokens.spacingMd,
54+
bottom = StreamTokens.spacingSm,
5555
),
5656
verticalAlignment = Alignment.CenterVertically,
5757
horizontalArrangement = Arrangement.spacedBy(StreamTokens.spacingXs),
@@ -78,7 +78,7 @@ internal fun MessageComposerInputCenterBottomContent(
7878
@Composable
7979
private fun SelectedPreview() {
8080
ChatTheme {
81-
MessageComposerInputCenterBottomContent(
81+
MessageComposerInputBottomContent(
8282
alsoSendToChannel = true,
8383
onAlsoSendToChannelChange = {},
8484
)
@@ -89,7 +89,7 @@ private fun SelectedPreview() {
8989
@Composable
9090
private fun UnselectedPreview() {
9191
ChatTheme {
92-
MessageComposerInputCenterBottomContent(
92+
MessageComposerInputBottomContent(
9393
alsoSendToChannel = false,
9494
onAlsoSendToChannelChange = {},
9595
)

‎stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatComponentFactory.kt‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1465,19 +1465,22 @@ public interface ChatComponentFactory {
14651465
}
14661466

14671467
/**
1468-
* The default center bottom content of the message composer input.
1469-
* Shown at the bottom of the composer input.
1468+
* The default bottom content of the message composer input.
1469+
* Shown at the bottom of the composer input, below the text field.
14701470
*
14711471
* Used as part of [MessageComposerInput].
14721472
*
14731473
* @param params Parameters for this component.
14741474
*/
14751475
@Composable
1476-
public fun MessageComposerInputCenterBottomContent(params: MessageComposerInputCenterBottomContentParams) {
1476+
public fun MessageComposerInputBottomContent(params: MessageComposerInputBottomContentParams) {
14771477
val inThreadMode = params.state.messageMode is MessageMode.MessageThread
1478-
AnimatedContent(targetState = inThreadMode) { visible ->
1478+
AnimatedContent(
1479+
modifier = params.modifier,
1480+
targetState = inThreadMode,
1481+
) { visible ->
14791482
if (visible) {
1480-
io.getstream.chat.android.compose.ui.messages.composer.internal.MessageComposerInputCenterBottomContent(
1483+
io.getstream.chat.android.compose.ui.messages.composer.internal.MessageComposerInputBottomContent(
14811484
alsoSendToChannel = params.state.alsoSendToChannel,
14821485
onAlsoSendToChannelChange = params.onAlsoSendToChannelChange,
14831486
)

‎stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatComponentFactoryParams.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1115,13 +1115,13 @@ public data class MessageComposerInputCenterContentParams(
11151115
)
11161116

11171117
/**
1118-
* Parameters for [ChatComponentFactory.MessageComposerInputCenterBottomContent].
1118+
* Parameters for [ChatComponentFactory.MessageComposerInputBottomContent].
11191119
*
11201120
* @param state The current state of the message composer.
11211121
* @param onAlsoSendToChannelChange Action invoked when also-send-to-channel is changed.
11221122
* @param modifier Modifier for styling.
11231123
*/
1124-
public data class MessageComposerInputCenterBottomContentParams(
1124+
public data class MessageComposerInputBottomContentParams(
11251125
val state: MessageComposerState,
11261126
val onAlsoSendToChannelChange: (Boolean) -> Unit,
11271127
val modifier: Modifier = Modifier,

0 commit comments

Comments
 (0)