Chat UI (#147)

* Chat - Basic UI with loads of TODOs

* - Chat FAB in Tradeflow; Create Offer FAB in Market; TopBar - Improvement for backBehavior, backConfirmation flags check

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/presentation/di/PresentationModule.kt

@@ -5,7 +5,9 @@ import network.bisq.mobile.presentation.MainPresenter
 import network.bisq.mobile.presentation.ui.AppPresenter
 import network.bisq.mobile.presentation.ui.components.molecules.ITopBarPresenter
 import network.bisq.mobile.presentation.ui.components.molecules.TopBarPresenter
+import network.bisq.mobile.presentation.ui.uicases.ChatPresenter
 import network.bisq.mobile.presentation.ui.uicases.GettingStartedPresenter
+import network.bisq.mobile.presentation.ui.uicases.IChatPresenter
 import network.bisq.mobile.presentation.ui.uicases.offer.MarketListPresenter
 import network.bisq.mobile.presentation.ui.uicases.offer.create_offer.CreateOfferAmountPresenter
 import network.bisq.mobile.presentation.ui.uicases.offer.create_offer.CreateOfferDirectionPresenter
@@ -57,7 +59,7 @@ val presentationModule = module {
     }
 
     single { OnBoardingPresenter(get(), get(), get()) } bind IOnboardingPresenter::class
-    single { TabContainerPresenter(get()) } bind ITabContainerPresenter::class
+    single { TabContainerPresenter(get(), get()) } bind ITabContainerPresenter::class
 
     single<SettingsPresenter> { SettingsPresenter(get(), get()) } bind ISettingsPresenter::class
 
@@ -110,4 +112,6 @@ val presentationModule = module {
     single { CreateOfferAmountPresenter(get(), get(), get()) }
     single { CreateOfferPaymentMethodPresenter(get(), get()) }
     single { CreateOfferReviewPresenter(get(), get()) }
+
+    single { ChatPresenter(get()) } bind IChatPresenter::class
 }

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/presentation/ui/components/atoms/TextField.kt

@@ -35,19 +35,21 @@ import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import network.bisq.mobile.presentation.ui.components.atoms.button.CopyIconButton
 import network.bisq.mobile.presentation.ui.components.atoms.icons.CopyIcon
 import network.bisq.mobile.presentation.ui.components.atoms.icons.SearchIcon
 import network.bisq.mobile.presentation.ui.theme.BisqTheme
 
 @Composable
 fun BisqTextField(
-    label: String,
+    label: String = "",
     value: String,
     onValueChanged: (String) -> Unit = {},
     placeholder: String = "",
     labelRightSuffix: (@Composable () -> Unit)? = null,
     leftSuffix: (@Composable () -> Unit)? = null,
     rightSuffix: (@Composable () -> Unit)? = null,
+    rightSuffixModifier: Modifier = Modifier.width(50.dp),
     isSearch: Boolean = false,
     helperText: String = "",
     indicatorColor: Color = BisqTheme.colors.primary,
@@ -143,9 +145,9 @@ fun BisqTextField(
                         if (showCopy) {
                             CopyIconButton(value)
                         }
-                        
+
                         if (rightSuffix != null) {
-                            Box(modifier = Modifier.width(50.dp)) {
+                            Box(modifier = rightSuffixModifier) {
                                 rightSuffix()
                             }
                         }

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/presentation/ui/components/atoms/button/CloseIconButton.kt

@@ -0,0 +1,20 @@
+package network.bisq.mobile.presentation.ui.components.atoms.button
+
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.IconButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalClipboardManager
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.unit.dp
+import network.bisq.mobile.presentation.ui.components.atoms.icons.CloseIcon
+
+@Composable
+fun CloseIconButton(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier.size(20.dp)
+) {
+    IconButton(onClick = onClick, modifier = modifier) {
+        CloseIcon()
+    }
+}

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/presentation/ui/components/atoms/CopyIconButton.kt → shared/presentation/src/commonMain/kotlin/network/bisq/mobile/presentation/ui/components/atoms/button/CopyIconButton.kt

@@ -1,4 +1,4 @@
-package network.bisq.mobile.presentation.ui.components.atoms
+package network.bisq.mobile.presentation.ui.components.atoms.button
 
 import androidx.compose.material3.IconButton
 import androidx.compose.runtime.Composable

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/presentation/ui/components/atoms/icons/Icons.kt

@@ -43,6 +43,16 @@ fun CloseIcon(modifier: Modifier = Modifier.size(24.dp)) {
         modifier = modifier,
         tint = Color.White
     )
+//    Icon(
+//        Icons.Default.Close,
+//        tint = Color.White,
+//        contentDescription = null
+//    )
+}
+
+@Composable
+fun ClosedEyeIcon(modifier: Modifier = Modifier.size(24.dp)) {
+    Image(painterResource(Res.drawable.icon_closed_eye), "Closed eye icon", modifier = modifier)
 }
 
 @Composable
@@ -61,7 +71,7 @@ fun BellIcon(modifier: Modifier = Modifier.size(30.dp)) {
 }
 
 @Composable
-fun ChatIcon(modifier: Modifier = Modifier) {
+fun ChatIcon(modifier: Modifier = Modifier.size(24.dp)) {
     Image(painterResource(Res.drawable.icon_chat_outlined), "Chat icon", modifier = modifier)
 }
 
@@ -70,6 +80,11 @@ fun CopyIcon(modifier: Modifier = Modifier) {
     Image(painterResource(Res.drawable.icon_copy), "Copy icon", modifier = modifier)
 }
 
+@Composable
+fun FlagIcon(modifier: Modifier = Modifier.size(24.dp)) {
+    Image(painterResource(Res.drawable.icon_flag), "Flag icon", modifier = modifier)
+}
+
 @Composable
 fun FlashLightIcon(modifier: Modifier = Modifier.size(24.dp)) {
     Image(painterResource(Res.drawable.icon_flash_light), "Flash light icon", modifier = modifier)
@@ -105,11 +120,21 @@ fun QuestionIcon(modifier: Modifier = Modifier) {
     Image(painterResource(Res.drawable.icon_question_mark), "Question icon", modifier = modifier)
 }
 
+@Composable
+fun ReplyIcon(modifier: Modifier = Modifier.size(24.dp)) {
+    Image(painterResource(Res.drawable.icon_reply), "Reply icon", modifier = modifier)
+}
+
 @Composable
 fun ScanIcon(modifier: Modifier = Modifier) {
     Image(painterResource(Res.drawable.icon_qr), "Scan icon", modifier = modifier)
 }
 
+@Composable
+fun SendIcon(modifier: Modifier = Modifier.size(24.dp)) {
+    Image(painterResource(Res.drawable.icon_send), "Send icon", modifier = modifier)
+}
+
 @Composable
 fun SearchIcon(modifier: Modifier = Modifier.size(16.dp)) {
     Image(painterResource(Res.drawable.icon_search_dimmed), "Search icon", modifier = modifier)

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/presentation/ui/components/layout/StaticScaffold.kt

@@ -2,6 +2,7 @@ package network.bisq.mobile.presentation.ui.components.layout
 
 import androidx.compose.foundation.layout.*
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.ScaffoldDefaults
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/presentation/ui/components/molecules/MyOfferCard.kt

@@ -110,7 +110,7 @@ fun MyOfferCard(
                     modifier = Modifier.width(36.dp).height(108.dp).background(color = BisqTheme.colors.dark4)
                 ) {
                     IconButton(onClick = onChatClick) {
-                        ChatIcon(modifier = Modifier.size(24.dp))
+                        ChatIcon()
                     }
                 }
             }

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/presentation/ui/components/molecules/OfferCard.kt

@@ -111,7 +111,7 @@ fun OfferCard(
                     modifier = Modifier.width(36.dp).height(108.dp).background(color = BisqTheme.colors.dark4)
                 ) {
                     IconButton(onClick = onChatClick) {
-                        ChatIcon(modifier = Modifier.size(24.dp))
+                        ChatIcon()
                     }
                 }
             }

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/presentation/ui/components/molecules/TopBar.kt

@@ -47,7 +47,7 @@ fun TopBar(
     backConfirmation: Boolean = false,
     backBehavior: (() -> Unit)? = null,
     isFlowScreen: Boolean = false,
-    stepText: String = ""
+    stepText: String = "",
 ) {
     val presenter: ITopBarPresenter = koinInject()
     val navController: NavHostController = presenter.getRootNavController()
@@ -60,6 +60,9 @@ fun TopBar(
 
     val showBackButton = customBackButton == null && navController.previousBackStackEntry != null
 
+    val topBarState = rememberTopAppBarState()
+    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(topBarState, canScroll = { false })
+
     val defaultBackButton: @Composable () -> Unit = {
         IconButton(onClick = {
             if (navController.previousBackStackEntry != null) {
@@ -139,14 +142,11 @@ fun TopBar(
         },
     )
 
-    // TODO: What if both backBehavior and backConfirmation are set
     if (backBehavior != null) {
         BackHandler(onBackPressed = {
             backBehavior.invoke()
         })
-    }
-
-    if (backConfirmation) {
+    } else if (backConfirmation) {
         BackHandler(onBackPressed = {
             showBackConfirmationDialog = true
         })

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/presentation/ui/components/molecules/chat/AuthorNameTimestamp.kt

@@ -0,0 +1,36 @@
+package network.bisq.mobile.presentation.ui.components.molecules.chat
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.LastBaseline
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.unit.dp
+import network.bisq.mobile.presentation.ui.components.atoms.BisqText
+import network.bisq.mobile.presentation.ui.composeModels.ChatMessage
+import network.bisq.mobile.presentation.ui.theme.BisqTheme
+
+@Composable
+fun ChatAuthorNameTimestamp(msg: ChatMessage) {
+    Row(
+        modifier = Modifier.semantics(mergeDescendants = true) {},
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(12.dp)
+    ) {
+        if (msg.author != "me") {
+            BisqText.baseMedium(
+                text = msg.author,
+                modifier = Modifier
+                    .alignBy(LastBaseline)
+                    .paddingFrom(LastBaseline, after = 8.dp)
+            )
+        }
+        BisqText.baseMedium(
+            text = msg.timestamp,
+            color = BisqTheme.colors.grey1
+        )
+    }
+}
+
+

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/presentation/ui/components/molecules/chat/InnerBubble.kt

@@ -0,0 +1,34 @@
+package network.bisq.mobile.presentation.ui.components.molecules.chat
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import network.bisq.mobile.presentation.ui.components.atoms.BisqText
+import network.bisq.mobile.presentation.ui.components.atoms.DynamicImage
+import network.bisq.mobile.presentation.ui.composeModels.ChatMessage
+import network.bisq.mobile.presentation.ui.theme.BisqUIConstants
+
+@Composable
+fun ChatInnerBubble(
+    message: ChatMessage,
+    isUserMe: Boolean,
+) {
+    Row(
+        verticalAlignment = Alignment.Top,
+        modifier = Modifier.padding(
+            vertical = BisqUIConstants.ScreenPaddingHalf,
+            horizontal = BisqUIConstants.ScreenPadding
+        ),
+        horizontalArrangement = Arrangement.spacedBy(BisqUIConstants.ScreenPadding)
+    ) {
+        if (!isUserMe) {
+            DynamicImage(
+                "drawable/img_bot_image.png",
+                modifier = Modifier.size(24.dp)
+            )
+        }
+        BisqText.baseRegular(text = message.content)
+    }
+}