feat: support message formatting

src/app/chat/views/message_format.nim

@@ -0,0 +1,35 @@
+proc sectionIdentifier(message: Message): string =
+  result = message.fromAuthor
+  # Force section change, because group status messages are sent with the
+  # same fromAuthor, and ends up causing the header to not be shown
+  if message.contentType == ContentType.Group:
+    result = "GroupChatMessage"
+
+
+
+# See render-inline in status-react/src/status_im/ui/screens/chat/message/message.cljs
+proc renderInline(elem: TextItem): string =
+  case elem.textType:
+  of "": result = elem.literal
+  of "code": result = fmt("<span style=\"background-color: #1a356b; color: #FFFFFF\">{elem.literal}</span> ")
+  of "emph": result = fmt("<span style=\"font-style: italic;\">{elem.literal}</span> ")
+  of "strong": result = fmt("<span style=\"font-weight: bold;\">{elem.literal}</span> ")
+  of "link": result = "TODO: write safe link here: " & elem.destination
+  of "mention": result = elem.literal  
+
+# See render-block in status-react/src/status_im/ui/screens/chat/message/message.cljs
+proc renderBlock(message: Message): string =
+  # TODO: find out how to extract the css styles
+  for pMsg in message.parsedText:
+    case pMsg.textType:
+      of "paragraph": 
+        result = "<p>"
+        for children in pMsg.children:
+          result = result & renderInline(children)
+        result = result & "</p>"
+      of "blockquote":
+        # TODO: extract this from the theme somehow
+        var color = if message.isCurrentUser: "#FFFFFF" else: "#666666" 
+        result = result & fmt("<span style=\"color: {color}\">▍ ") & pMsg.literal[1 .. ^1] & "</span>"
+      of "codeblock":
+        result = "<table style=\"background-color: #1a356b;\"><tr><td style=\"padding: 5px;\"><code style=\"color: #ffffff\">" & pMsg.literal & "</code></td></tr></table>"

src/app/chat/views/message_list.nim

@@ -3,6 +3,8 @@ import ../../../status/chat
 import ../../../status/chat/[message,stickers]
 import ../../../status/profile/profile
 import ../../../status/ens
+import strformat
+include message_format
 
 type
   ChatMessageRoles {.pure.} = enum
@@ -44,13 +46,6 @@ QtObject:
   method rowCount(self: ChatMessageList, index: QModelIndex = nil): int =
     return self.messages.len
 
-  proc sectionIdentifier(message: Message): string =
-    result = message.fromAuthor
-    # Force section change, because group status messages are sent with the
-    # same fromAuthor, and ends up causing the header to not be shown
-    if message.contentType == ContentType.Group:
-      result = "GroupChatMessage"
-
   method data(self: ChatMessageList, index: QModelIndex, role: int): QVariant =
     if not index.isValid:
       return
@@ -60,7 +55,7 @@ QtObject:
     let chatMessageRole = role.ChatMessageRoles
     case chatMessageRole:
       of ChatMessageRoles.UserName: result = newQVariant(message.alias)
-      of ChatMessageRoles.Message: result = newQVariant(message.text)
+      of ChatMessageRoles.Message: result = newQVariant(renderBlock(message))
       of ChatMessageRoles.Timestamp: result = newQVariant(message.timestamp)
       of ChatMessageRoles.Clock: result = newQVariant($message.clock)
       of ChatMessageRoles.Identicon: result = newQVariant(message.identicon)

src/signals/messages.nim

@@ -107,6 +107,19 @@ proc toChat*(jsonChat: JsonNode): Chat =
     for jsonMember in jsonChat["membershipUpdateEvents"]:
       result.membershipUpdateEvents.add(jsonMember.toChatMembershipEvent)
 
+proc toTextItem*(jsonText: JsonNode): TextItem =
+  result = TextItem(
+    literal: jsonText{"literal"}.getStr,
+    textType: jsonText{"type"}.getStr,
+    destination: jsonText{"destination"}.getStr,
+    children: @[]
+  )
+
+  if jsonText.hasKey("children") and jsonText["children"].kind != JNull:
+    for child in jsonText["children"]:
+      result.children.add(child.toTextItem)
+
+
 proc toMessage*(jsonMsg: JsonNode): Message =
   result = Message(
       alias: jsonMsg{"alias"}.getStr,
@@ -128,9 +141,14 @@ proc toMessage*(jsonMsg: JsonNode): Message =
       timestamp: $jsonMsg{"timestamp"}.getInt,
       whisperTimestamp: $jsonMsg{"whisperTimestamp"}.getInt,
       isCurrentUser: $jsonMsg{"outgoingStatus"}.getStr == "sending",
-      stickerHash: ""
+      stickerHash: "",
+      parsedText: @[]
     )
 
+  if jsonMsg["parsedText"].kind != JNull: 
+    for text in jsonMsg["parsedText"]:
+      result.parsedText.add(text.toTextItem)
+
   if result.contentType == ContentType.Sticker:
     result.stickerHash = jsonMsg["sticker"]["hash"].getStr
 

src/status/chat/message.nim

@@ -10,25 +10,31 @@ type ContentType* {.pure.} = enum
   Transaction = 5,
   Group = 6
 
+type TextItem* = object
+  textType*: string
+  children*: seq[TextItem]
+  literal*: string
+  destination*: string
+
 type Message* = object
   alias*: string
   chatId*: string
   clock*: int
   # commandParameters*:   # ???
-  contentType*: ContentType      # ???
+  contentType*: ContentType
-  ensName*: string        # ???
+  ensName*: string
   fromAuthor*: string
   id*: string
   identicon*: string
   lineCount*: int
   localChatId*: string
   messageType*: string    # ???
-  # parsedText:          # ???
+  parsedText*: seq[TextItem] 
   # quotedMessage:       # ???
   replace*: string        # ???
   responseTo*: string     # ???
   rtl*: bool              # ???
-  seen*: bool
+  seen*: bool             # ???
   sticker*: string
   text*: string
   timestamp*: string

ui/app/AppLayouts/Chat/ChatColumn/Message.qml

@@ -249,6 +249,7 @@ Item {
             selectByMouse: true
             color: !isCurrentUser ? Theme.black : Theme.white
             visible: contentType == Constants.messageType
+            textFormat: TextEdit.RichText
         }
 
         Image {