fix: show replies and do not trigger an activeChannelChanged event on init

src/app/chat/event_handling.nim

@@ -18,6 +18,11 @@ proc handleChatEvents(self: ChatController) =
     var args = ChannelArgs(e)
     self.view.clearMessages(args.chat.id)
 
+  self.status.events.on("channelLoaded") do(e: Args):
+    var channel = ChannelArgs(e)
+    discard self.view.chats.addChatItemToList(channel.chat)
+    self.status.chat.chatMessages(channel.chat.id)
+
   self.status.events.on("channelJoined") do(e: Args):
     var channel = ChannelArgs(e)
     discard self.view.chats.addChatItemToList(channel.chat)

src/app/chat/views/message_list.nim

@@ -22,15 +22,18 @@ type
     SectionIdentifier = UserRole + 11
     Id = UserRole + 12
     OutgoingStatus = UserRole + 13
+    ResponseTo = UserRole + 14
 
 QtObject:
   type
     ChatMessageList* = ref object of QAbstractListModel
       messages*: seq[Message]
       status: Status
+      messageIndex: Table[string, int]
 
   proc delete(self: ChatMessageList) =
     self.messages = @[]
+    self.messageIndex = initTable[string, int]()
     self.QAbstractListModel.delete
 
   proc setup(self: ChatMessageList) =
@@ -46,6 +49,7 @@ QtObject:
   proc newChatMessageList*(chatId: string, status: Status): ChatMessageList =
     new(result, delete)
     result.messages = @[result.chatIdentifier(chatId)]
+    result.messageIndex = initTable[string, int]()
     result.status = status
     result.setup
 
@@ -73,6 +77,7 @@ QtObject:
       of ChatMessageRoles.SectionIdentifier: result = newQVariant(sectionIdentifier(message))
       of ChatMessageRoles.Id: result = newQVariant(message.id)
       of ChatMessageRoles.OutgoingStatus: result = newQVariant(message.outgoingStatus)
+      of ChatMessageRoles.ResponseTo: result = newQVariant(message.responseTo)
 
   method roleNames(self: ChatMessageList): Table[int, string] =
     {
@@ -88,17 +93,34 @@ QtObject:
       ChatMessageRoles.ChatId.int:"chatId",
       ChatMessageRoles.SectionIdentifier.int: "sectionIdentifier",
       ChatMessageRoles.Id.int: "messageId",
-      ChatMessageRoles.OutgoingStatus.int: "outgoingStatus"
+      ChatMessageRoles.OutgoingStatus.int: "outgoingStatus",
+      ChatMessageRoles.ResponseTo.int: "responseTo"
     }.toTable
 
+  proc getMessageIndex(self: ChatMessageList, messageId: string): int {.slot.} =
+    if not self.messageIndex.hasKey(messageId): return -1
+    result = self.messageIndex[messageId]
+
+  proc getReplyData(self: ChatMessageList, index: int, data: string): string {.slot.} =
+    let message = self.messages[index]
+    case data:
+    of "userName": result = message.alias
+    of "message": result = message.text
+    else: result = ""
+
   proc add*(self: ChatMessageList, message: Message) =
+    if self.messageIndex.hasKey(message.id): return # duplicated msg
+
     self.beginInsertRows(newQModelIndex(), self.messages.len, self.messages.len)
+    self.messageIndex[message.id] = self.messages.len
     self.messages.add(message)
     self.endInsertRows()
 
   proc add*(self: ChatMessageList, messages: seq[Message]) =
     self.beginInsertRows(newQModelIndex(), self.messages.len, self.messages.len)
     for message in messages:
+      if self.messageIndex.hasKey(message.id): continue
+      self.messageIndex[message.id] = self.messages.len
       self.messages.add(message)
     self.endInsertRows()
 

src/status/chat.nim

@@ -111,7 +111,7 @@ proc init*(self: ChatModel) =
     if self.hasChannel(chat.id): continue
     filters.add status_chat.buildFilter(chat)
     self.channels[chat.id] = chat
-    self.events.emit("channelJoined", ChannelArgs(chat: chat))
+    self.events.emit("channelLoaded", ChannelArgs(chat: chat))
 
   if filters.len == 0: return
 

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

@@ -123,6 +123,7 @@ ScrollView {
             sticker: model.sticker
             contentType: model.contentType
             outgoingStatus: model.outgoingStatus
+            responseTo: model.responseTo
             authorCurrentMsg: msgDelegate.ListView.section
             authorPrevMsg: msgDelegate.ListView.previousSection
             profileClick: profilePopup.openPopup.bind(profilePopup)

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

@@ -19,6 +19,7 @@ Item {
     property int contentType: 1 // constants don't work in default props
     property string chatId: "chatId"
     property string outgoingStatus: ""
+    property string responseTo: ""
 
     property string authorCurrentMsg: "authorCurrentMsg"
     property string authorPrevMsg: "authorPrevMsg"
@@ -27,6 +28,10 @@ Item {
     property bool isMessage: contentType === Constants.messageType || contentType === Constants.stickerType 
     property bool isStatusMessage: contentType === Constants.systemMessagePrivateGroupType
 
+    property int replyMessageIndex: chatsModel.messageList.getMessageIndex(responseTo);
+    property string repliedMessageAuthor: replyMessageIndex > -1 ? chatsModel.messageList.getReplyData(replyMessageIndex, "userName") : "";
+    property string repliedMessageContent: replyMessageIndex > -1 ? chatsModel.messageList.getReplyData(replyMessageIndex, "message") : "";
+
     property var profileClick: function () {}
 
     width: parent.width
@@ -37,7 +42,7 @@ Item {
             case Constants.stickerType:
                 return stickerId.height + 50
             default:
-                return (isCurrentUser || (!isCurrentUser && authorCurrentMsg == authorPrevMsg) ? chatBox.height : 24 + chatBox.height) + 10
+                return (isCurrentUser || (!isCurrentUser && authorCurrentMsg == authorPrevMsg) ? chatBox.height : 24 + chatBox.height) + 20
         }
     }
 
@@ -230,10 +235,18 @@ Item {
         property int chatHorizontalPadding: 12
 
         id: chatBox
-        height: (2 * chatVerticalPadding) + (contentType == Constants.stickerType ? stickerId.height : chatText.height)
+        height: (3 * chatVerticalPadding) + (contentType == Constants.stickerType ? stickerId.height : (chatText.height + chatReply.height))
         color: isCurrentUser ? Style.current.blue : Style.current.lightBlue
         border.color: Style.current.transparent
-        width: contentType === Constants.stickerType ? (stickerId.width + (2 * chatHorizontalPadding)) : (message.length > 52 ? 380 : chatText.width + 2 * chatHorizontalPadding)
+        width: {
+            switch(contentType){
+                case Constants.stickerType:
+                    return stickerId.width + (2 * chatBox.chatHorizontalPadding);
+                default:
+                    return 400;
+            }
+        }
+
         radius: 16
         anchors.left: !isCurrentUser ? chatImage.right : undefined
         anchors.leftMargin: !isCurrentUser ? 8 : 0
@@ -243,19 +256,51 @@ Item {
         anchors.topMargin: 0
         visible: isMessage || isEmoji
 
-        // Thi`s rectangle's only job is to mask the corner to make it less rounded... yep
         Rectangle {
-            color: parent.color
+            id: chatReply
-            width: 18
+            color:  isCurrentUser ? Style.current.blue : Style.current.lightBlue
-            height: 18
+            visible: responseTo != ""
-            anchors.bottom: parent.bottom
+            height: chatReply.visible ? childrenRect.height : 0
-            anchors.bottomMargin: 0
+            anchors.top: parent.top
-            anchors.left: !isCurrentUser ? parent.left : undefined
+            anchors.topMargin: chatReply.visible ? chatBox.chatVerticalPadding : 0
-            anchors.leftMargin: 0
+            anchors.left: parent.left
-            anchors.right: !isCurrentUser ? undefined : parent.right
+            anchors.leftMargin: Style.current.padding
-            anchors.rightMargin: 0
+            anchors.right: parent.right
-            radius: 4
+            anchors.rightMargin: chatBox.chatHorizontalPadding
-            z: -1
+
+            StyledTextEdit {
+                id: lblReplyAuthor
+                text: "↳" + repliedMessageAuthor
+                color: Style.current.darkGrey
+                readOnly: true
+                selectByMouse: true
+                wrapMode: Text.Wrap
+                anchors.left: parent.left
+                anchors.right: parent.right
+            }
+
+            StyledTextEdit {
+                id: lblReplyMessage
+                anchors.top: lblReplyAuthor.bottom
+                anchors.topMargin: 5
+                text: Emoji.parse(linkify(repliedMessageContent), "26x26");
+                textFormat: Text.RichText
+                color: Style.current.darkGrey
+                readOnly: true
+                selectByMouse: true
+                wrapMode: Text.Wrap
+                anchors.left: parent.left
+                anchors.right: parent.right
+            }
+
+            Separator {
+                anchors.top: lblReplyMessage.bottom
+                anchors.topMargin: 8
+                anchors.left: lblReplyMessage.left
+                anchors.right: lblReplyMessage.right
+                anchors.rightMargin: chatBox.chatHorizontalPadding
+                color: Style.current.darkGrey
+            }
         }
 
         StyledTextEdit {
@@ -271,11 +316,11 @@ Item {
             }
             anchors.left: parent.left
             anchors.leftMargin: parent.chatHorizontalPadding
-            anchors.right: message.length > 52 ? parent.right : undefined
+            anchors.right: parent.right
-            anchors.rightMargin: message.length > 52 ? parent.chatHorizontalPadding : 0
+            anchors.rightMargin: parent.chatHorizontalPadding
             horizontalAlignment: !isCurrentUser ? Text.AlignLeft : Text.AlignRight
             wrapMode: Text.Wrap
-            anchors.top: parent.top
+            anchors.top: chatReply.bottom
             anchors.topMargin: chatBox.chatVerticalPadding
             font.pixelSize: 15
             readOnly: true
@@ -315,6 +360,7 @@ Item {
             source: contentType === Constants.stickerType ? ("https://ipfs.infura.io/ipfs/" + sticker) : ""
             visible: contentType === Constants.stickerType
         }
+    }
 
     StyledTextEdit {
         id: chatTime
@@ -325,18 +371,18 @@ Item {
             let hours = messageDate.getHours();
             return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes)
         }
-            anchors.top: contentType === Constants.stickerType ? stickerId.bottom : chatText.bottom
+        anchors.top: chatBox.bottom
-            anchors.topMargin: 8
+        anchors.topMargin: 4
         anchors.bottomMargin: Style.current.padding
-            anchors.right: parent.right
+        anchors.right: chatBox.right
         anchors.rightMargin: isCurrentUser ? 5 : Style.current.padding
         font.pixelSize: 10
         readOnly: true
         selectByMouse: true
-            // Probably only want to show this when clicking?
         visible: true
     }
 
+    
     StyledTextEdit {
         id: sentMessage
         color: Style.current.darkGrey
@@ -353,6 +399,20 @@ Item {
         readOnly: true
         visible: isCurrentUser
     }
+
+    // Thi`s rectangle's only job is to mask the corner to make it less rounded... yep
+    Rectangle {
+        color: chatBox.color
+        width: 18
+        height: 18
+        anchors.bottom: chatBox.bottom
+        anchors.bottomMargin: 0
+        anchors.left: !isCurrentUser ? chatBox.left : undefined
+        anchors.leftMargin: 0
+        anchors.right: !isCurrentUser ? undefined : chatBox.right
+        anchors.rightMargin: 0
+        radius: 4
+        z: -1
     }
 }