feat: last message markdown [WPB-7413] (#2893)

wireapp · Apr 16, 2024 · 1486bba · 1486bba
1 parent 2a1f8f0
commit 1486bba
Show file tree

Hide file tree

Showing 32 changed files with 277 additions and 122 deletions.
diff --git a/app/src/main/kotlin/com/wire/android/mapper/MessagePreviewContentMapper.kt b/app/src/main/kotlin/com/wire/android/mapper/MessagePreviewContentMapper.kt
@@ -21,7 +21,9 @@ package com.wire.android.mapper
 import com.wire.android.R
 import com.wire.android.ui.home.conversations.model.MessageBody
 import com.wire.android.ui.home.conversations.model.UILastMessageContent
+import com.wire.android.ui.markdown.MarkdownConstants
 import com.wire.android.util.ui.UIText
+import com.wire.android.util.ui.toUIText
 import com.wire.kalium.logic.data.conversation.UnreadEventCount
 import com.wire.kalium.logic.data.message.AssetType
 import com.wire.kalium.logic.data.message.MessagePreview
@@ -254,7 +256,7 @@ fun MessagePreview.uiLastMessageContent(): UILastMessageContent {
                 is WithUser.Text -> UILastMessageContent.SenderWithMessage(
                     sender = userUIText,
                     message = (content as WithUser.Text).messageBody.let { UIText.DynamicString(it) },
-                    separator = ": "
+                    separator = ":${MarkdownConstants.NON_BREAKING_SPACE}"
                 )
 
                 is WithUser.Composite -> {
@@ -263,7 +265,7 @@ fun MessagePreview.uiLastMessageContent(): UILastMessageContent {
                     UILastMessageContent.SenderWithMessage(
                         sender = userUIText,
                         message = text,
-                        separator = ": "
+                        separator = ":${MarkdownConstants.NON_BREAKING_SPACE}"
                     )
                 }
 
@@ -335,6 +337,12 @@ fun MessagePreview.uiLastMessageContent(): UILastMessageContent {
         MessagePreviewContent.VerificationChanged.DegradedProteus ->
             UILastMessageContent.VerificationChanged(R.string.last_message_conversations_verification_degraded_proteus)
 
+        is MessagePreviewContent.Draft -> UILastMessageContent.SenderWithMessage(
+            UIText.StringResource(R.string.label_draft),
+            (content as MessagePreviewContent.Draft).message.toUIText(),
+            separator = ":${MarkdownConstants.NON_BREAKING_SPACE}"
+        )
+
         Unknown -> UILastMessageContent.None
     }
 }
diff --git a/app/src/main/kotlin/com/wire/android/ui/home/conversations/ConversationScreen.kt b/app/src/main/kotlin/com/wire/android/ui/home/conversations/ConversationScreen.kt
@@ -1103,8 +1103,9 @@ private fun CoroutineScope.withSmoothScreenLoad(block: () -> Unit) = launch {
 @Preview
 @Composable
 fun PreviewConversationScreen() {
+    val conversationId = ConversationId("value", "domain")
     val messageComposerViewState = remember { mutableStateOf(MessageComposerViewState()) }
-    val messageCompositionState = remember { mutableStateOf(MessageComposition.DEFAULT) }
+    val messageCompositionState = remember { mutableStateOf(MessageComposition(conversationId)) }
     val conversationScreenState = rememberConversationScreenState()
     val messageComposerStateHolder = rememberMessageComposerStateHolder(
         messageComposerViewState = messageComposerViewState,
@@ -1117,7 +1118,7 @@ fun PreviewConversationScreen() {
         messageComposerViewState = messageComposerViewState,
         conversationCallViewState = ConversationCallViewState(),
         conversationInfoViewState = ConversationInfoViewState(
-            conversationId = ConversationId("value", "domain"),
+            conversationId = conversationId,
             conversationName = UIText.DynamicString("Some test conversation")
         ),
         conversationMessagesViewState = ConversationMessagesViewState(),

diff --git a/...c/main/kotlin/com/wire/android/ui/home/conversations/composer/MessageComposerViewModel.kt b/...c/main/kotlin/com/wire/android/ui/home/conversations/composer/MessageComposerViewModel.kt
@@ -202,7 +202,7 @@ class MessageComposerViewModel @Inject constructor(
 
     fun saveDraft(messageDraft: MessageDraft) {
         viewModelScope.launch {
-            saveMessageDraft(conversationId, messageDraft)
+            saveMessageDraft(messageDraft)
         }
     }
 }
diff --git a/...ain/kotlin/com/wire/android/ui/home/conversations/messages/draft/MessageDraftViewModel.kt b/...ain/kotlin/com/wire/android/ui/home/conversations/messages/draft/MessageDraftViewModel.kt
@@ -45,7 +45,7 @@ class MessageDraftViewModel @Inject constructor(
     private val conversationNavArgs: ConversationNavArgs = savedStateHandle.navArgs()
     val conversationId: QualifiedID = conversationNavArgs.conversationId
 
-    var state = mutableStateOf(MessageComposition.DEFAULT.copy(messageTextFieldValue = TextFieldValue("")))
+    var state = mutableStateOf(MessageComposition(conversationId))
         private set
 
     init {

diff --git a/app/src/main/kotlin/com/wire/android/ui/home/conversations/model/MessageTypes.kt b/app/src/main/kotlin/com/wire/android/ui/home/conversations/model/MessageTypes.kt
@@ -56,9 +56,9 @@ import com.wire.android.ui.home.conversations.model.messagetypes.image.ImportedI
 import com.wire.android.ui.markdown.DisplayMention
 import com.wire.android.ui.markdown.MarkdownConstants.MENTION_MARK
 import com.wire.android.ui.markdown.MarkdownDocument
-import com.wire.android.ui.markdown.MarkdownNode
+import com.wire.android.ui.markdown.NodeActions
 import com.wire.android.ui.markdown.NodeData
-import com.wire.android.ui.markdown.toContent
+import com.wire.android.ui.markdown.toMarkdownDocument
 import com.wire.android.ui.theme.wireColorScheme
 import com.wire.android.ui.theme.wireDimensions
 import com.wire.android.ui.theme.wireTypography
@@ -71,11 +71,6 @@ import com.wire.kalium.logic.data.asset.AssetTransferStatus.NOT_FOUND
 import com.wire.kalium.logic.data.asset.AssetTransferStatus.UPLOAD_IN_PROGRESS
 import kotlinx.collections.immutable.PersistentList
 import okio.Path
-import org.commonmark.Extension
-import org.commonmark.ext.gfm.strikethrough.StrikethroughExtension
-import org.commonmark.ext.gfm.tables.TablesExtension
-import org.commonmark.node.Document
-import org.commonmark.parser.Parser
 
 // TODO: Here we actually need to implement some logic that will distinguish MentionLabel with Body of the message,
 //       waiting for the backend to implement mapping logic for the MessageBody
@@ -103,19 +98,16 @@ internal fun MessageBody(
         typography = MaterialTheme.wireTypography,
         searchQuery = searchQuery,
         mentions = displayMentions,
-        onLongClick = onLongClick,
-        onOpenProfile = onOpenProfile,
-        onLinkClick = onLinkClick
+        actions = NodeActions(
+            onLongClick = onLongClick,
+            onOpenProfile = onOpenProfile,
+            onLinkClick = onLinkClick
+        )
     )
 
-    val extensions: List<Extension> = listOf(
-        StrikethroughExtension.builder().requireTwoTildes(true).build(),
-        TablesExtension.create()
-    )
     text?.also {
-        val document = (Parser.builder().extensions(extensions).build().parse(it) as Document).toContent() as MarkdownNode.Document
         MarkdownDocument(
-            document,
+            it.toMarkdownDocument(),
             nodeData,
             clickable
         )

diff --git a/app/src/main/kotlin/com/wire/android/ui/home/conversations/model/UIMessage.kt b/app/src/main/kotlin/com/wire/android/ui/home/conversations/model/UIMessage.kt
@@ -28,6 +28,7 @@ import com.wire.android.model.ImageAsset
 import com.wire.android.model.UserAvatarData
 import com.wire.android.ui.home.conversationslist.model.Membership
 import com.wire.android.ui.home.messagecomposer.SelfDeletionDuration
+import com.wire.android.ui.markdown.MarkdownConstants
 import com.wire.android.ui.theme.Accent
 import com.wire.android.util.Copyable
 import com.wire.android.util.MessageDateTime
@@ -195,9 +196,16 @@ sealed class UILastMessageContent {
 
     data class TextMessage(val messageBody: MessageBody) : UILastMessageContent()
 
-    data class SenderWithMessage(val sender: UIText, val message: UIText, val separator: String = " ") : UILastMessageContent()
+    data class SenderWithMessage(
+        val sender: UIText,
+        val message: UIText,
+        val separator: String = MarkdownConstants.NON_BREAKING_SPACE
+    ) : UILastMessageContent()
 
-    data class MultipleMessage(val messages: List<UIText>, val separator: String = " ") : UILastMessageContent()
+    data class MultipleMessage(
+        val messages: List<UIText>,
+        val separator: String = MarkdownConstants.NON_BREAKING_SPACE
+    ) : UILastMessageContent()
 
     data class Connection(val connectionState: ConnectionState, val userId: UserId) : UILastMessageContent()
 

diff --git a/app/src/main/kotlin/com/wire/android/ui/home/conversationslist/common/LastMessageSubtitle.kt b/app/src/main/kotlin/com/wire/android/ui/home/conversationslist/common/LastMessageSubtitle.kt
@@ -21,44 +21,59 @@ package com.wire.android.ui.home.conversationslist.common
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.style.TextOverflow
+import com.wire.android.ui.markdown.MarkdownConstants
+import com.wire.android.ui.markdown.MarkdownInline
+import com.wire.android.ui.markdown.NodeData
+import com.wire.android.ui.markdown.getFirstInlines
+import com.wire.android.ui.markdown.toMarkdownDocument
 import com.wire.android.ui.theme.wireColorScheme
 import com.wire.android.ui.theme.wireTypography
 import com.wire.android.util.ui.UIText
+import kotlinx.collections.immutable.persistentListOf
 
 @Composable
 fun LastMessageSubtitle(text: UIText) {
-    Text(
-        text = text.asString(LocalContext.current.resources),
-        style = MaterialTheme.wireTypography.subline01.copy(
-            color = MaterialTheme.wireColorScheme.secondaryText
-        ),
-        maxLines = 1,
-        overflow = TextOverflow.Ellipsis
-    )
+    LastMessageMarkdown(text = text.asString())
 }
 
 @Composable
 fun LastMessageSubtitleWithAuthor(author: UIText, text: UIText, separator: String) {
-    Text(
-        text = "${author.asString(LocalContext.current.resources)}$separator${text.asString(LocalContext.current.resources)}",
-        style = MaterialTheme.wireTypography.subline01.copy(
-            color = MaterialTheme.wireColorScheme.secondaryText
-        ),
-        maxLines = 1,
-        overflow = TextOverflow.Ellipsis
-    )
+    LastMessageMarkdown(text = text.asString(), leadingText = "${author.asString()}$separator")
 }
 
 @Composable
 fun LastMultipleMessages(messages: List<UIText>, separator: String) {
-    Text(
-        text = messages.map { it.asString() }.joinToString(separator = separator),
-        style = MaterialTheme.wireTypography.subline01.copy(
-            color = MaterialTheme.wireColorScheme.secondaryText
-        ),
-        maxLines = 1,
-        overflow = TextOverflow.Ellipsis
+    LastMessageMarkdown(text = messages.map { it.asString() }.joinToString(separator = separator))
+}
+
+@Composable
+private fun LastMessageMarkdown(text: String, leadingText: String = "") {
+    val nodeData = NodeData(
+        color = MaterialTheme.wireColorScheme.secondaryText,
+        style = MaterialTheme.wireTypography.subline01,
+        colorScheme = MaterialTheme.wireColorScheme,
+        typography = MaterialTheme.wireTypography,
+        searchQuery = "",
+        mentions = listOf(),
+        disableLinks = true
     )
+
+    val markdownPreview = text.toMarkdownDocument().getFirstInlines()
+    val leadingInlines = leadingText.toMarkdownDocument().getFirstInlines()?.children ?: persistentListOf()
+
+    if (markdownPreview != null) {
+        MarkdownInline(
+            inlines = leadingInlines.plus(markdownPreview.children),
+            nodeData = nodeData
+        )
+    } else {
+        Text(
+            text = leadingText.replace(MarkdownConstants.NON_BREAKING_SPACE, " ") + text,
+            style = nodeData.style,
+            color = nodeData.color,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis
+        )
+    }
 }
diff --git a/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/MessageComposer.kt b/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/MessageComposer.kt
@@ -255,7 +255,7 @@ private fun BaseComposerPreview(
             )
         )
     }
-    val messageComposition = remember { mutableStateOf(MessageComposition.DEFAULT) }
+    val messageComposition = remember { mutableStateOf(MessageComposition(ConversationId("value", "domain"))) }
     val selfDeletionTimer = remember { mutableStateOf(SelfDeletionTimer.Enabled(Duration.ZERO)) }
 
     MessageComposer(

diff --git a/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/model/MessageComposition.kt b/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/model/MessageComposition.kt
@@ -30,19 +30,13 @@ import com.wire.kalium.logic.data.id.ConversationId
 import com.wire.kalium.logic.data.message.draft.MessageDraft
 
 data class MessageComposition(
+    val conversationId: ConversationId,
     val messageTextFieldValue: TextFieldValue = TextFieldValue(""),
     val editMessageId: String? = null,
     val quotedMessage: UIQuotedMessage.UIQuotedData? = null,
     val quotedMessageId: String? = null,
     val selectedMentions: List<UIMention> = emptyList(),
 ) {
-    companion object {
-        val DEFAULT = MessageComposition(
-            messageTextFieldValue = TextFieldValue(text = ""),
-            quotedMessage = null,
-            selectedMentions = emptyList()
-        )
-    }
 
     val messageText: String
         get() = messageTextFieldValue.text
@@ -152,6 +146,7 @@ fun MutableState<MessageComposition>.update(block: (MessageComposition) -> Messa
 
 fun MessageComposition.toDraft(): MessageDraft {
     return MessageDraft(
+        conversationId = conversationId,
         text = messageTextFieldValue.text,
         editMessageId = editMessageId,
         quotedMessageId = quotedMessageId,

diff --git a/app/src/main/kotlin/com/wire/android/ui/markdown/MarkdownBlockQuote.kt b/app/src/main/kotlin/com/wire/android/ui/markdown/MarkdownBlockQuote.kt
@@ -60,8 +60,8 @@ fun MarkdownBlockQuote(blockQuote: MarkdownNode.Block.BlockQuote, nodeData: Node
                     }
                     MarkdownText(
                         text,
-                        onLongClick = nodeData.onLongClick,
-                        onOpenProfile = nodeData.onOpenProfile
+                        onLongClick = nodeData.actions?.onLongClick,
+                        onOpenProfile = nodeData.actions?.onOpenProfile
                     )
                 }
 

diff --git a/app/src/main/kotlin/com/wire/android/ui/markdown/MarkdownCodeBlock.kt b/app/src/main/kotlin/com/wire/android/ui/markdown/MarkdownCodeBlock.kt
@@ -18,7 +18,6 @@
 package com.wire.android.ui.markdown
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -39,13 +38,9 @@ fun MarkdownIndentedCodeBlock(indentedCodeBlock: MarkdownNode.Block.IntendedCode
         fontFamily = FontFamily.Monospace,
         modifier = Modifier
             .fillMaxWidth()
-            .padding(dimensions().spacing4x)
-            .background(MaterialTheme.wireColorScheme.outlineVariant)
-            .border(
-                dimensions().spacing1x, MaterialTheme.wireColorScheme.outline,
-                shape = RoundedCornerShape(dimensions().spacing4x)
-            )
-            .padding(dimensions().spacing4x)
+            .padding(vertical = dimensions().spacing4x)
+            .background(MaterialTheme.wireColorScheme.surfaceVariant, shape = RoundedCornerShape(dimensions().spacing16x))
+            .padding(dimensions().spacing8x)
     )
 }
 
@@ -57,12 +52,8 @@ fun MarkdownFencedCodeBlock(fencedCodeBlock: MarkdownNode.Block.FencedCode, node
         fontFamily = FontFamily.Monospace,
         modifier = Modifier
             .fillMaxWidth()
-            .padding(dimensions().spacing4x)
-            .background(MaterialTheme.wireColorScheme.outlineVariant)
-            .border(
-                dimensions().spacing1x, MaterialTheme.wireColorScheme.outline,
-                shape = RoundedCornerShape(dimensions().spacing4x)
-            )
-            .padding(dimensions().spacing4x)
+            .padding(vertical = dimensions().spacing4x)
+            .background(MaterialTheme.wireColorScheme.surfaceVariant, shape = RoundedCornerShape(dimensions().spacing16x))
+            .padding(dimensions().spacing8x)
     )
 }