Skip to content

feat(chat): improved text input/send money experience #1075

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

Merged
bmc08gt merged 1 commit into from
Jul 14, 2026
Merged

feat(chat): improved text input/send money experience #1075

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions apps/flipcash/core/src/main/res/values/strings.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -800,6 +800,7 @@
<string name="action_swipeToSend">Swipe to Send</string>

<string name="action_sendCash">Send Cash</string>
<string name="action_sendCashViaSymbol">Send %1$s</string>
<string name="action_sendMessage">Send Message</string>

<string name="subtitle_chatNoLongerAvailable">This user unlinked their phone number and this conversation is no longer available</string>
Expand Down
14 changes: 6 additions & 8 deletions ...h/features/messenger/src/main/kotlin/com/flipcash/app/messenger/internal/ChatViewModel.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,16 +105,10 @@ internal class ChatViewModel @Inject constructor(
data object Failed : ResolveState
}

sealed interface UserState {
data object Reading: UserState
data object Typing: UserState
}

data class State(
val separatorConfig: SeparatorConfig= SeparatorConfig.Continuous(),
val chatId: ChatId? = null,
val chattingWith: DeviceContact? = null,
val userState: UserState = UserState.Reading,
val chatInputState: TextFieldState = TextFieldState(),
val typists: Set<ActiveTypist> = emptySet(),
val resolveState: ResolveState = ResolveState.Pending,
Expand All @@ -124,11 +118,13 @@ internal class ChatViewModel @Inject constructor(
val token: Token? = null,
val limits: Limits? = null,
val isAnonymous: Boolean = false,
val cashSymbol: String = "$",
)

sealed interface Event {
data class OnChatOpened(val identifier: ChatIdentifier) : Event
data class OnContactFound(val contact: DeviceContact): Event
data class OnCurrencySymbolUpdated(val symbol: String): Event
data object RefreshContact : Event
data class ChatFound(val chatId: ChatId) : Event
data object OnSendCash: Event
Expand Down Expand Up @@ -381,6 +377,7 @@ internal class ChatViewModel @Inject constructor(
val currency = exchange.getCurrency(rate.currency.name)
if (currency != null) {
amountDelegate.onCurrencyChanged(currency)
dispatchEvent(Event.OnCurrencySymbolUpdated(currency.symbol))
}
}.launchIn(viewModelScope)

Expand Down Expand Up @@ -755,11 +752,12 @@ internal class ChatViewModel @Inject constructor(
chattingWith = event.contact
)
}
is Event.OnCurrencySymbolUpdated -> { state -> state.copy(cashSymbol = event.symbol) }
is Event.RefreshContact -> { state -> state }
is Event.ChatFound -> { state -> state.copy(chatId = event.chatId) }
Event.OnSendCash -> { state -> state }
Event.OnStartMessageInput -> { state -> state.copy(userState = UserState.Typing) }
Event.OnStopMessageInput -> { state -> state.copy(userState = UserState.Reading) }
Event.OnStartMessageInput -> { state -> state }
Event.OnStopMessageInput -> { state -> state }
is Event.TypistsUpdated -> { state -> state.copy(typists = event.typists) }
is Event.ResolveCompleted -> { state ->
state.copy(resolveState = ResolveState.Resolved(event.authority))
Expand Down
284 changes: 14 additions & 270 deletions .../messenger/src/main/kotlin/com/flipcash/app/messenger/internal/screens/MessengerScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,23 @@
package com.flipcash.app.messenger.internal.screens

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.animation.togetherWith
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TransformOrigin
import androidx.compose.ui.layout.SubcomposeLayout
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.paging.compose.collectAsLazyPagingItems
import com.flipcash.app.contacts.ui.ContactAvatar
import com.flipcash.app.core.AppRoute
import com.flipcash.app.core.contacts.DeviceContact
import com.flipcash.app.messenger.internal.ChatViewModel
import com.flipcash.app.messenger.internal.screens.components.ChatTopBar
import com.flipcash.app.messenger.internal.screens.components.MessageList
import com.flipcash.app.messenger.internal.screens.components.UserControlBottomBar
import com.flipcash.shared.chat.ui.ChatAction
import com.flipcash.features.messenger.R
import com.getcode.navigation.core.CodeNavigator
import com.getcode.navigation.core.LocalCodeNavigator
import com.getcode.theme.CodeTheme
import com.getcode.ui.components.AppBarDefaults
import com.getcode.ui.components.AppBarWithTitle
import com.getcode.ui.components.chat.ChatInput
import com.getcode.ui.components.chat.TypingIndicator
import com.getcode.ui.core.drawWithGradient
import com.getcode.ui.core.measured
import com.getcode.ui.theme.ButtonState
import com.getcode.ui.theme.CodeButton
import com.getcode.ui.utils.rememberKeyboardController
import dev.chrisbanes.haze.HazeState
import dev.chrisbanes.haze.blur.blurEffect
import dev.chrisbanes.haze.blur.materials.HazeMaterials
import dev.chrisbanes.haze.hazeEffect
import dev.chrisbanes.haze.hazeSource
import dev.chrisbanes.haze.rememberHazeState

Expand All @@ -81,15 +34,11 @@ internal fun MessengerScreen(viewModel: ChatViewModel) {
ChatInputScaffold(
topBar = { ChatTopBar(navigator, state.chattingWith) },
bottomBar = {
if (state.isAnonymous) {
DeactivatedChatBottomBar()
} else {
UserControlBottomBar(
state = state,
hazeState = hazeState,
dispatch = viewModel::dispatchEvent,
)
}
UserControlBottomBar(
state = state,
hazeState = hazeState,
dispatch = viewModel::dispatchEvent,
)
},
) { overlapPadding ->
MessageList(
Expand All @@ -107,16 +56,22 @@ internal fun MessengerScreen(viewModel: ChatViewModel) {
is ChatAction.AdvanceReadPointer -> {
viewModel.dispatchEvent(ChatViewModel.Event.AdvanceReadPointer(action.messageId))
}

ChatAction.RefreshContact -> {
viewModel.dispatchEvent(ChatViewModel.Event.RefreshContact)
}

is ChatAction.RetryMessage -> {
keyboard.hideIfVisible {
viewModel.dispatchEvent(
ChatViewModel.Event.RetryMessage(action.bubble.pendingClientIdHex, action.bubble.content)
ChatViewModel.Event.RetryMessage(
action.bubble.pendingClientIdHex,
action.bubble.content
)
)
}
}

is ChatAction.ViewToken -> {
keyboard.hideIfVisible {
viewModel.dispatchEvent(
Expand All @@ -130,217 +85,6 @@ internal fun MessengerScreen(viewModel: ChatViewModel) {
}
}

@Composable
private fun ChatTopBar(
navigator: CodeNavigator,
chattingWith: DeviceContact?,
) {
var titleHeight by remember { mutableStateOf(0.dp) }
val bgColor = CodeTheme.colors.background
Box {
Box(
modifier = Modifier
.fillMaxWidth()
.height(titleHeight + 24.dp)
.background(
Brush.verticalGradient(
colorStops = arrayOf(
0f to bgColor,
1f to Color.Transparent,
)
)
)
)
AppBarWithTitle(
modifier = Modifier.measured { titleHeight = it.height },
leftIcon = {
AppBarDefaults.UpNavigation { navigator.pop() }
},
title = {
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(CodeTheme.dimens.grid.x2),
) {
ContactAvatar(
contact = chattingWith,
modifier = Modifier
.requiredSize(CodeTheme.dimens.staticGrid.x8)
.clip(CircleShape),
)

Text(
modifier = Modifier.weight(1f),
text = chattingWith?.displayName.orEmpty(),
style = CodeTheme.typography.textMedium,
color = CodeTheme.colors.textMain,
)
}
}
)
}
}

@Composable
private fun UserControlBottomBar(
state: ChatViewModel.State,
hazeState: HazeState,
dispatch: (ChatViewModel.Event) -> Unit,
) {
val keyboard = rememberKeyboardController()
val focusRequester = remember { FocusRequester() }
var buttonHeight by remember { mutableStateOf(0.dp) }
val material = HazeMaterials.ultraThin(
containerColor = CodeTheme.colors.background
)

LaunchedEffect(keyboard.visible) {
if (!keyboard.visible) {
dispatch(ChatViewModel.Event.OnStopMessageInput)
}
}

Column(
modifier = Modifier
.fillMaxWidth(),
) {
// Typing indicator entry/exit — scale from 0.95 anchored leading + opacity
// (same as message bubble insertion, no vertical slide)
AnimatedContent(
modifier = Modifier.padding(horizontal = CodeTheme.dimens.inset),
targetState = state.typists.isNotEmpty(),
transitionSpec = {
(scaleIn(ChatAnimations.typingIndicator, initialScale = 0.95f, transformOrigin = TransformOrigin(0f, 0.5f))
+ fadeIn(ChatAnimations.typingIndicator)) togetherWith
(scaleOut(ChatAnimations.typingIndicator, targetScale = 0.95f, transformOrigin = TransformOrigin(0f, 0.5f))
+ fadeOut(ChatAnimations.typingIndicator))
}
) { show ->
if (show) {
TypingIndicator(
modifier = Modifier
.hazeEffect(hazeState) {
blurEffect { style = material }
},
)
}
}
Box {
Box(
modifier = Modifier
.fillMaxWidth()
.height(buttonHeight)
.align(Alignment.BottomCenter)
.drawWithGradient(
color = CodeTheme.colors.background,
startY = { 0f },
),
)
AnimatedContent(
modifier = Modifier
.measured { buttonHeight = it.height }
.padding(horizontal = CodeTheme.dimens.inset)
.padding(vertical = CodeTheme.dimens.grid.x3)
.navigationBarsPadding(),
targetState = state.userState,
transitionSpec = {
// Action bar <-> composer swap
// Buttons: scale from 0.95 + opacity; Composer: opacity only
val swapSpec = ChatAnimations.composerSwap
when (targetState) {
ChatViewModel.UserState.Typing ->
// Composer fades in; buttons scale+fade out
fadeIn(swapSpec) togetherWith
(scaleOut(swapSpec, targetScale = 0.95f) + fadeOut(swapSpec))

ChatViewModel.UserState.Reading ->
// Buttons scale+fade in; composer fades out
(scaleIn(swapSpec, initialScale = 0.95f) + fadeIn(swapSpec)) togetherWith
fadeOut(swapSpec)
}
},
) { s ->
when (s) {
ChatViewModel.UserState.Reading -> {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(CodeTheme.dimens.grid.x2),
) {
CodeButton(
modifier = Modifier.weight(1f),
buttonState = ButtonState.Filled,
text = stringResource(R.string.action_sendCash),
) { dispatch(ChatViewModel.Event.OnSendCash) }
if (state.typingConstraints.enabled) {
CodeButton(
modifier = Modifier
.weight(1f)
.testTag("chat_send_message_button")
.hazeEffect(hazeState) {
blurEffect {
style = material
}
},
buttonState = ButtonState.Filled10,
text = stringResource(R.string.action_sendMessage),
) { dispatch(ChatViewModel.Event.OnStartMessageInput) }
}
}
}

ChatViewModel.UserState.Typing -> {
ChatInput(
modifier = Modifier
.testTag("chat_message_input")
.fillMaxWidth()
.border(
CodeTheme.dimens.border,
CodeTheme.colors.divider,
CodeTheme.shapes.medium,
)
.hazeEffect(hazeState) {
blurEffect {
style = material
}
},
focusRequester = focusRequester,
hint = "Message",
state = state.chatInputState,
onSendMessage = {
dispatch(ChatViewModel.Event.SendMessage)
keyboard.restartInput()
},
)

LaunchedEffect(Unit) {
focusRequester.requestFocus()
}
}
}
}
}
}
}

@Composable
private fun DeactivatedChatBottomBar() {
Box(
modifier = Modifier
.fillMaxWidth()
.navigationBarsPadding()
.padding(horizontal = CodeTheme.dimens.inset)
.padding(vertical = CodeTheme.dimens.grid.x3),
contentAlignment = Alignment.Center,
) {
Text(
text = stringResource(R.string.subtitle_chatNoLongerAvailable),
style = CodeTheme.typography.textSmall,
color = CodeTheme.colors.textSecondary,
textAlign = TextAlign.Center,
)
}
}

@Composable
private fun ChatInputScaffold(
topBar: @Composable () -> Unit = {},
Expand Down
Loading
Loading