From 42a1cf995c9ee283ca8ca8b2b9791504f593171b Mon Sep 17 00:00:00 2001
From: Igor Sirotin <sirotin@status.im>
Date: Tue, 5 Jul 2022 14:12:27 +0400
Subject: [PATCH] fix(ChatMessagesView): Usage of `StatusMessage` WIP

---
 .../modules/main/activity_center/module.nim   |    5 +-
 .../chat_content/messages/module.nim          |   26 +-
 .../main/chat_section/chat_content/module.nim |    8 +-
 .../chat_content/users/module.nim             |    8 +-
 .../profile_section/notifications/module.nim  |    2 +-
 .../modules/shared_models/message_item.nim    |   15 +-
 .../shared_models/message_item_qobject.nim    |    4 +
 .../modules/shared_models/message_model.nim   |   16 +-
 ui/StatusQ                                    |    2 +-
 .../controls/activityCenter/ChannelBadge.qml  |    4 +-
 .../activityCenter/ReplyComponent.qml         |    2 +-
 .../AppLayouts/Chat/panels/ChatTimePanel.qml  |    4 +-
 .../AppLayouts/Chat/panels/UserListPanel.qml  |    4 +-
 .../Chat/popups/PinnedMessagesPopup.qml       |   16 +-
 .../popups/community/CreateCategoryPopup.qml  |    5 +-
 .../popups/community/CreateChannelPopup.qml   |    8 +-
 .../community/TransferOwnershipPopup.qml      |    2 +-
 .../AppLayouts/Chat/stores/MessageStore.qml   |   43 -
 .../Chat/views/ActivityCenterGroupRequest.qml |   15 +-
 .../ActivityCenterMessageComponentView.qml    |    8 +-
 .../AppLayouts/Chat/views/ChatContentView.qml |   27 +-
 .../Chat/views/ChatMessagesView.qml           |  155 +-
 .../Chat/views/CommunitySettingsView.qml      |    9 +-
 .../popups/CreateCommunityPopup.qml           |    9 +-
 .../Profile/views/AppearanceView.qml          |   12 +-
 ui/app/AppLayouts/stores/MessageStore.qml     |   52 -
 .../shared/controls/TransactionDelegate.qml   |    2 +-
 ui/imports/shared/controls/chat/DateGroup.qml |   60 -
 .../controls/chat/FetchMoreMessagesButton.qml |    9 +-
 .../shared/controls/chat/GapComponent.qml     |    4 +-
 .../shared/controls/chat/MessageMouseArea.qml |   53 -
 ui/imports/shared/controls/chat/Retry.qml     |   24 -
 ui/imports/shared/controls/chat/UserImage.qml |    7 -
 .../shared/controls/chat/UsernameLabel.qml    |    7 -
 .../shared/panels/chat/AudioPlayerPanel.qml   |  111 --
 .../shared/panels/chat/ChatButtonsPanel.qml   |  213 ---
 .../shared/panels/chat/ChatReplyPanel.qml     |  192 ---
 .../panels/chat/EmojiReactionsPanel.qml       |  192 ---
 .../ContactVerificationRequestPopup.qml       |    8 +-
 ui/imports/shared/qmldir                      |    1 -
 ui/imports/shared/status/StatusChatInput.qml  |  981 ++++++------
 .../status/StatusChatInputReplyArea.qml       |   12 +-
 .../shared/status/StatusStickersPopup.qml     |    2 +-
 ui/imports/shared/views/ProfileView.qml       |   13 +-
 ui/imports/shared/views/chat/ChatTextView.qml |   10 +-
 .../shared/views/chat/CompactMessageView.qml  |  805 ----------
 .../views/chat/MessageContextMenuView.qml     |   14 +-
 ui/imports/shared/views/chat/MessageView.qml  |  749 ++++++++--
 .../views/chat/TransactionBubbleView.qml      |    2 +-
 ui/imports/shared/xss.js                      | 1318 -----------------
 ui/imports/utils/Constants.qml                |    5 +
 ui/imports/utils/Utils.qml                    |   72 +-
 52 files changed, 1307 insertions(+), 4020 deletions(-)
 delete mode 100644 ui/imports/shared/controls/chat/DateGroup.qml
 delete mode 100644 ui/imports/shared/controls/chat/MessageMouseArea.qml
 delete mode 100644 ui/imports/shared/controls/chat/Retry.qml
 delete mode 100644 ui/imports/shared/panels/chat/AudioPlayerPanel.qml
 delete mode 100644 ui/imports/shared/panels/chat/ChatButtonsPanel.qml
 delete mode 100644 ui/imports/shared/panels/chat/ChatReplyPanel.qml
 delete mode 100644 ui/imports/shared/panels/chat/EmojiReactionsPanel.qml
 delete mode 100644 ui/imports/shared/views/chat/CompactMessageView.qml
 delete mode 100644 ui/imports/shared/xss.js

diff --git a/src/app/modules/main/activity_center/module.nim b/src/app/modules/main/activity_center/module.nim
index bc566d85a2..8834e2777e 100644
--- a/src/app/modules/main/activity_center/module.nim
+++ b/src/app/modules/main/activity_center/module.nim
@@ -75,7 +75,7 @@ proc createMessageItemFromDto(self: Module, message: MessageDto, chatDetails: Ch
     chatDetails.communityId, # we don't received community id via `activityCenterNotifications` api call
     message.responseTo,
     message.`from`,
-    contactDetails.displayName,
+    contactDetails.details.displayName,
     contactDetails.details.localNickname,
     contactDetails.icon,
     contactDetails.isCurrentUser,
@@ -93,7 +93,8 @@ proc createMessageItemFromDto(self: Module, message: MessageDto, chatDetails: Ch
     message.links,
     newTransactionParametersItem("","","","","","",-1,""),
     message.mentionedUsersPks,
-    contactDetails.details.trustStatus
+    contactDetails.details.trustStatus,
+    contactDetails.details.ensVerified
     ))
 
 method convertToItems*(
diff --git a/src/app/modules/main/chat_section/chat_content/messages/module.nim b/src/app/modules/main/chat_section/chat_content/messages/module.nim
index 2e15916cb7..426ffbbc89 100644
--- a/src/app/modules/main/chat_section/chat_content/messages/module.nim
+++ b/src/app/modules/main/chat_section/chat_content/messages/module.nim
@@ -91,10 +91,11 @@ proc createFetchMoreMessagesItem(self: Module): Item =
     messageType = -1,
     sticker = "",
     stickerPack = -1,
-    @[],
-    newTransactionParametersItem("","","","","","",-1,""),
-    @[],
-    TrustStatus.Unknown
+    links = @[],
+    transactionParameters = newTransactionParametersItem("","","","","","",-1,""),
+    mentionedUsersPks = @[],
+    senderTrustStatus = TrustStatus.Unknown,
+    senderEnsVerified = false
   )
 
 proc createChatIdentifierItem(self: Module): Item =
@@ -128,10 +129,11 @@ proc createChatIdentifierItem(self: Module): Item =
     messageType = -1,
     sticker = "",
     stickerPack = -1,
-    @[],
-    newTransactionParametersItem("","","","","","",-1,""),
-    @[],
-    TrustStatus.Unknown
+    links = @[],
+    transactionParameters = newTransactionParametersItem("","","","","","",-1,""),
+    mentionedUsersPks = @[],
+    senderTrustStatus = TrustStatus.Unknown,
+    senderEnsVerified = false
   )
 
 proc checkIfMessageLoadedAndScrollToItIfItIs(self: Module): bool =
@@ -177,7 +179,7 @@ method newMessagesLoaded*(self: Module, messages: seq[MessageDto], reactions: se
         m.communityId,
         m.responseTo,
         m.`from`,
-        sender.displayName,
+        sender.details.displayName,
         sender.details.localNickname,
         sender.icon,
         isCurrentUser,
@@ -203,6 +205,7 @@ method newMessagesLoaded*(self: Module, messages: seq[MessageDto], reactions: se
           m.transactionParameters.signature),
         m.mentionedUsersPks(),
         sender.details.trustStatus,
+        sender.details.ensVerified
         )
 
       for r in reactions:
@@ -265,7 +268,7 @@ method messageAdded*(self: Module, message: MessageDto) =
     message.communityId,
     message.responseTo,
     message.`from`,
-    sender.displayName,
+    sender.details.displayName,
     sender.details.localNickname,
     sender.icon,
     isCurrentUser,
@@ -291,6 +294,7 @@ method messageAdded*(self: Module, message: MessageDto) =
                     message.transactionParameters.signature),
     message.mentionedUsersPks,
     sender.details.trustStatus,
+    sender.details.ensVerified
   )
 
   self.view.model().insertItemBasedOnTimestamp(item)
@@ -399,7 +403,7 @@ method updateContactDetails*(self: Module, contactId: string) =
   let updatedContact = self.controller.getContactDetails(contactId)
   for item in self.view.model().modelContactUpdateIterator(contactId):
     if(item.senderId == contactId):
-      item.senderDisplayName = updatedContact.displayName
+      item.senderDisplayName = updatedContact.details.displayName
       item.senderLocalName = updatedContact.details.localNickname
       item.senderIcon = updatedContact.icon
       item.senderIsAdded = updatedContact.details.added
diff --git a/src/app/modules/main/chat_section/chat_content/module.nim b/src/app/modules/main/chat_section/chat_content/module.nim
index 3b892d4661..9cd44ae5e9 100644
--- a/src/app/modules/main/chat_section/chat_content/module.nim
+++ b/src/app/modules/main/chat_section/chat_content/module.nim
@@ -167,7 +167,7 @@ proc buildPinnedMessageItem(self: Module, messageId: string, actionInitiatedBy:
     m.communityId,
     m.responseTo,
     m.`from`,
-    contactDetails.displayName,
+    contactDetails.details.displayName,
     contactDetails.details.localNickname,
     contactDetails.icon,
     isCurrentUser,
@@ -193,6 +193,7 @@ proc buildPinnedMessageItem(self: Module, messageId: string, actionInitiatedBy:
       m.transactionParameters.signature),
     m.mentionedUsersPks,
     contactDetails.details.trustStatus,
+    contactDetails.details.ensVerified
   )
   item.pinned = true
   item.pinnedBy = actionInitiatedBy
@@ -318,8 +319,9 @@ method onContactDetailsUpdated*(self: Module, contactId: string) =
   let updatedContact = self.controller.getContactDetails(contactId)
   for item in self.view.pinnedModel().modelContactUpdateIterator(contactId):
     if(item.senderId == contactId):
-      item.senderDisplayName = updatedContact.displayName
+      item.senderDisplayName = updatedContact.details.displayName
       item.senderLocalName = updatedContact.details.localNickname
+      item.senderEnsVerified = updatedContact.details.ensVerified
       item.senderIcon = updatedContact.icon
       item.senderTrustStatus = updatedContact.details.trustStatus
     if(item.messageContainsMentions):
@@ -329,7 +331,7 @@ method onContactDetailsUpdated*(self: Module, contactId: string) =
         item.messageContainsMentions = m.containsContactMentions()
 
   if(self.controller.getMyChatId() == contactId):
-    self.view.updateChatDetailsNameAndIcon(updatedContact.displayName, updatedContact.icon)
+    self.view.updateChatDetailsNameAndIcon(updatedContact.details.displayName, updatedContact.icon)
     self.view.updateTrustStatus(updatedContact.details.trustStatus == TrustStatus.Untrustworthy)
 
 method onNotificationsUpdated*(self: Module, hasUnreadMessages: bool, notificationCount: int) =
diff --git a/src/app/modules/main/chat_section/chat_content/users/module.nim b/src/app/modules/main/chat_section/chat_content/users/module.nim
index 188c477788..035ad74799 100644
--- a/src/app/modules/main/chat_section/chat_content/users/module.nim
+++ b/src/app/modules/main/chat_section/chat_content/users/module.nim
@@ -75,7 +75,7 @@ method onNewMessagesLoaded*(self: Module, messages: seq[MessageDto]) =
     let status = toOnlineStatus(statusUpdateDto.statusType)
     self.view.model().addItem(initMemberItem(
       pubKey = m.`from`,
-      displayName = contactDetails.displayName,
+      displayName = contactDetails.details.displayName,
       ensName = contactDetails.details.name, # is it correct?
       localNickname = contactDetails.details.localNickname,
       alias = contactDetails.details.alias,
@@ -132,7 +132,7 @@ method addChatMember*(self: Module,  member: ChatMember) =
   let isMe = member.id == singletonInstance.userProfile.getPubKey()
   let contactDetails = self.controller.getContactDetails(member.id)
   var status = OnlineStatus.Online
-  var displayName = contactDetails.displayName
+  var displayName = contactDetails.details.displayName
   if (isMe):
     let currentUserStatus = intToEnum(singletonInstance.userProfile.getCurrentUserStatus(), StatusType.Unknown)
     status = toOnlineStatus(currentUserStatus)
@@ -142,7 +142,7 @@ method addChatMember*(self: Module,  member: ChatMember) =
   
   self.view.model().addItem(initMemberItem(
     pubKey = member.id,
-    displayName = displayName,
+    displayName = contactDetails.details.displayName,
     ensName = contactDetails.details.name,
     localNickname = contactDetails.details.localNickname,
     alias = contactDetails.details.alias,
@@ -180,7 +180,7 @@ method onChatMemberUpdated*(self: Module, publicKey: string, admin: bool, joined
   let contactDetails = self.controller.getContactDetails(publicKey)
   self.view.model().updateItem(
     pubKey = publicKey,
-    displayName = contactDetails.displayName,
+    displayName = contactDetails.details.displayName,
     ensName = contactDetails.details.name,
     localNickname = contactDetails.details.localNickname,
     alias = contactDetails.details.alias,
diff --git a/src/app/modules/main/profile_section/notifications/module.nim b/src/app/modules/main/profile_section/notifications/module.nim
index 34a75246eb..7ddaee7338 100644
--- a/src/app/modules/main/profile_section/notifications/module.nim
+++ b/src/app/modules/main/profile_section/notifications/module.nim
@@ -65,7 +65,7 @@ proc createChatItem(self: Module, chatDto: ChatDto): Item =
   var itemType = item.Type.GroupChat
   if(chatDto.chatType == ChatType.OneToOne):
     let contactDetails = self.controller.getContactDetails(chatDto.id)
-    chatName = contactDetails.displayName
+    chatName = contactDetails.details.displayName
     chatImage = contactDetails.icon
     itemType = item.Type.OneToOneChat
 
diff --git a/src/app/modules/shared_models/message_item.nim b/src/app/modules/shared_models/message_item.nim
index a6ada2e800..fcbef8d0c9 100644
--- a/src/app/modules/shared_models/message_item.nim
+++ b/src/app/modules/shared_models/message_item.nim
@@ -37,6 +37,7 @@ type
     transactionParameters: TransactionParametersItem
     mentionedUsersPks: seq[string]
     senderTrustStatus: TrustStatus
+    senderEnsVerified: bool
 
 proc initItem*(
     id,
@@ -61,7 +62,8 @@ proc initItem*(
     links: seq[string],
     transactionParameters: TransactionParametersItem,
     mentionedUsersPks: seq[string],
-    senderTrustStatus: TrustStatus
+    senderTrustStatus: TrustStatus,
+    senderEnsVerified: bool
     ): Item =
   result = Item()
   result.id = id
@@ -93,6 +95,7 @@ proc initItem*(
   result.gapFrom = 0
   result.gapTo = 0
   result.senderTrustStatus = senderTrustStatus
+  result.senderEnsVerified = senderEnsVerified
 
 proc `$`*(self: Item): string =
   result = fmt"""Item(
@@ -120,6 +123,7 @@ proc `$`*(self: Item): string =
     transactionParameters:{$self.transactionParameters},
     mentionedUsersPks:{$self.mentionedUsersPks},
     senderTrustStatus:{$self.senderTrustStatus},
+    senderEnsVerified: {self.senderEnsVerified},
     )"""
 
 proc id*(self: Item): string {.inline.} =
@@ -167,6 +171,12 @@ proc senderTrustStatus*(self: Item): TrustStatus {.inline.} =
 proc `senderTrustStatus=`*(self: Item, value: TrustStatus) {.inline.} =
   self.senderTrustStatus = value
 
+proc senderEnsVerified*(self: Item): bool {.inline.} =
+  self.senderEnsVerified
+
+proc `senderEnsVerified=`*(self: Item, value: bool) {.inline.} =
+  self.senderEnsVerified = value
+
 proc outgoingStatus*(self: Item): string {.inline.} =
   self.outgoingStatus
 
@@ -274,7 +284,8 @@ proc toJsonNode*(self: Item): JsonNode =
     "editMode": self.editMode,
     "isEdited": self.isEdited,
     "links": self.links,
-    "mentionedUsersPks": self.mentionedUsersPks
+    "mentionedUsersPks": self.mentionedUsersPks,
+    "senderEnsVerified": self.senderEnsVerified
   }
 
 proc editMode*(self: Item): bool {.inline.} =
diff --git a/src/app/modules/shared_models/message_item_qobject.nim b/src/app/modules/shared_models/message_item_qobject.nim
index cda1eb89d0..f9e68db700 100644
--- a/src/app/modules/shared_models/message_item_qobject.nim
+++ b/src/app/modules/shared_models/message_item_qobject.nim
@@ -49,6 +49,10 @@ QtObject:
   QtProperty[string] senderLocalName:
     read = senderLocalName
 
+  proc senderEnsVerified*(self: MessageItem): bool {.slot.} = result = ?.self.messageItem.senderEnsVerified
+  QtProperty[bool] senderEnsVerified:
+    read = senderEnsVerified
+
   proc amISender*(self: MessageItem): bool {.slot.} = result = ?.self.messageItem.amISender
   QtProperty[bool] amISender:
     read = amISender
diff --git a/src/app/modules/shared_models/message_model.nim b/src/app/modules/shared_models/message_model.nim
index 3e905d0524..d6219854d4 100644
--- a/src/app/modules/shared_models/message_model.nim
+++ b/src/app/modules/shared_models/message_model.nim
@@ -38,6 +38,7 @@ type
     TransactionParameters
     MentionedUsersPks
     SenderTrustStatus
+    SenderEnsVerified
 
 QtObject:
   type
@@ -71,7 +72,7 @@ QtObject:
   proc countChanged(self: Model) {.signal.}
   proc getCount(self: Model): int {.slot.} =
     self.items.len
-  QtProperty[int] count:
+  QtProperty[int]count:
     read = getCount
     notify = countChanged
 
@@ -112,7 +113,8 @@ QtObject:
       ModelRole.Links.int: "links",
       ModelRole.TransactionParameters.int: "transactionParameters",
       ModelRole.MentionedUsersPks.int: "mentionedUsersPks",
-      ModelRole.SenderTrustStatus.int: "senderTrustStatus"
+      ModelRole.SenderTrustStatus.int: "senderTrustStatus",
+      ModelRole.SenderEnsVerified.int: "senderEnsVerified"
     }.toTable
 
   method data(self: Model, index: QModelIndex, role: int): QVariant =
@@ -205,6 +207,8 @@ QtObject:
       }))
     of ModelRole.MentionedUsersPks:
       result = newQVariant(item.mentionedUsersPks.join(" "))
+    of ModelRole.SenderEnsVerified:
+      result = newQVariant(item.senderEnsVerified)
 
   proc updateItemAtIndex(self: Model, index: int) =
     let ind = self.createIndex(index, 0, nil)
@@ -393,8 +397,12 @@ QtObject:
 
       var roles: seq[int]
       if(self.items[i].senderId == contactId):
-        roles = @[ModelRole.SenderDisplayName.int, ModelRole.SenderLocalName.int,
-          ModelRole.SenderIcon.int, ModelRole.SenderIsAdded.int, ModelRole.SenderTrustStatus.int]
+        roles = @[ModelRole.SenderDisplayName.int,
+          ModelRole.SenderLocalName.int,
+          ModelRole.SenderIcon.int,
+          ModelRole.SenderIsAdded.int,
+          ModelRole.SenderTrustStatus.int,
+          ModelRole.SenderEnsVerified.int]
       if(self.items[i].pinnedBy == contactId):
         roles.add(ModelRole.PinnedBy.int)
       if(self.items[i].messageContainsMentions):
diff --git a/ui/StatusQ b/ui/StatusQ
index 9f6f9905e9..6c107b5760 160000
--- a/ui/StatusQ
+++ b/ui/StatusQ
@@ -1 +1 @@
-Subproject commit 9f6f9905e988bb98689a4157dc7ad1fd42ea88c2
+Subproject commit 6c107b5760fe33ef2fea3cee53a8039610d1024d
diff --git a/ui/app/AppLayouts/Chat/controls/activityCenter/ChannelBadge.qml b/ui/app/AppLayouts/Chat/controls/activityCenter/ChannelBadge.qml
index b916506515..0dd6dbee03 100644
--- a/ui/app/AppLayouts/Chat/controls/activityCenter/ChannelBadge.qml
+++ b/ui/app/AppLayouts/Chat/controls/activityCenter/ChannelBadge.qml
@@ -50,8 +50,8 @@ Item {
     StyledText {
         id: contactInfo
         text: realChatType !== Constants.chatType.publicChat ?
-                  StatusQUtils.Emoji.parse(Utils.removeStatusEns(Utils.filterXSS(name))) :
-                  "#" + Utils.filterXSS(name)
+                  StatusQUtils.Emoji.parse(Utils.removeStatusEns(StatusQUtils.Utils.filterXSS(name))) :
+                  "#" + StatusQUtils.Utils.filterXSS(name)
         anchors.left: contactImage.right
         anchors.leftMargin: 4
         color: textColor
diff --git a/ui/app/AppLayouts/Chat/controls/activityCenter/ReplyComponent.qml b/ui/app/AppLayouts/Chat/controls/activityCenter/ReplyComponent.qml
index 0ae8dce3ee..2933c6df82 100644
--- a/ui/app/AppLayouts/Chat/controls/activityCenter/ReplyComponent.qml
+++ b/ui/app/AppLayouts/Chat/controls/activityCenter/ReplyComponent.qml
@@ -24,7 +24,7 @@ Item {
     }
 
     StyledTextEdit {
-        text: Utils.getReplyMessageStyle(StatusQUtils.Emoji.parse(Utils.linkifyAndXSS(repliedMessageContent), StatusQUtils.Emoji.size.small), false)
+        text: Utils.getReplyMessageStyle(StatusQUtils.Emoji.parse(StatusQUtils.Utils.linkifyAndXSS(repliedMessageContent), StatusQUtils.Emoji.size.small), false)
         textFormat: Text.RichText
         height: 18
         width: implicitWidth > 300 ? 300 : implicitWidth
diff --git a/ui/app/AppLayouts/Chat/panels/ChatTimePanel.qml b/ui/app/AppLayouts/Chat/panels/ChatTimePanel.qml
index 4caaca1700..33cf3f51b1 100644
--- a/ui/app/AppLayouts/Chat/panels/ChatTimePanel.qml
+++ b/ui/app/AppLayouts/Chat/panels/ChatTimePanel.qml
@@ -10,11 +10,11 @@ StyledText {
     color: Style.current.secondaryText
     text: Utils.formatShortTime(timestamp)
     font.pixelSize: Style.current.asideTextFontSize
-    property string timestamp
+    property int timestamp
 
     StatusQ.StatusToolTip {
         visible: hhandler.hovered
-        text: Utils.formatLongDateTime(parseInt(chatTime.timestamp, 10), RootStore.accountSensitiveSettings.isDDMMYYDateFormat, RootStore.accountSensitiveSettings.is24hTimeFormat)
+        text: Utils.formatLongDateTime(chatTime.timestamp, RootStore.accountSensitiveSettings.isDDMMYYDateFormat, RootStore.accountSensitiveSettings.is24hTimeFormat)
         maxWidth: 350
     }
 
diff --git a/ui/app/AppLayouts/Chat/panels/UserListPanel.qml b/ui/app/AppLayouts/Chat/panels/UserListPanel.qml
index d470d5d488..8061cc648f 100644
--- a/ui/app/AppLayouts/Chat/panels/UserListPanel.qml
+++ b/ui/app/AppLayouts/Chat/panels/UserListPanel.qml
@@ -101,14 +101,12 @@ Item {
                 if (mouse.button === Qt.RightButton) {
                     // Set parent, X & Y positions for the messageContextMenu
                     messageContextMenu.parent = this
-                    messageContextMenu.setXPosition = function() { return 0; }
-                    messageContextMenu.setYPosition = function() { return mouse.y + (Style.current.halfPadding/2); }
                     messageContextMenu.isProfile = true
                     messageContextMenu.myPublicKey = userProfile.pubKey
                     messageContextMenu.selectedUserPublicKey = model.pubKey
                     messageContextMenu.selectedUserDisplayName = model.displayName
                     messageContextMenu.selectedUserIcon = image.source
-                    messageContextMenu.popup()
+                    messageContextMenu.popup(4, 4)
                 } else if (mouse.button === Qt.LeftButton && !!messageContextMenu) {
                     Global.openProfilePopup(model.pubKey);
                 }
diff --git a/ui/app/AppLayouts/Chat/popups/PinnedMessagesPopup.qml b/ui/app/AppLayouts/Chat/popups/PinnedMessagesPopup.qml
index d7da4e0682..c9fde003c5 100644
--- a/ui/app/AppLayouts/Chat/popups/PinnedMessagesPopup.qml
+++ b/ui/app/AppLayouts/Chat/popups/PinnedMessagesPopup.qml
@@ -98,13 +98,16 @@ ModalPopup {
 
             delegate: Item {
                 id: messageDelegate
-                property var listView: ListView.view
-                width: parent.width
+
+                width: ListView.view.width
                 height: messageItem.height
 
                 MessageView {
                     id: messageItem
-                    store: popup.store
+
+                    width: parent.width
+
+                    rootStore: popup.store
                     messageStore: popup.messageStore
                     messageContextMenu: msgContextMenu
 
@@ -113,9 +116,10 @@ ModalPopup {
                     senderId: model.senderId
                     senderDisplayName: model.senderDisplayName
                     senderLocalName: model.senderLocalName
+                    senderEnsName: model.senderEnsVerified ? model.senderDisplayName : ""
                     senderIcon: model.senderIcon
                     amISender: model.amISender
-                    message: model.messageText
+                    messageText: model.messageText
                     messageImage: model.messageImage
                     messageTimestamp: model.timestamp
                     messageOutgoingStatus: model.outgoingStatus
@@ -125,7 +129,6 @@ ModalPopup {
                     reactionsModel: model.reactions
                     senderTrustStatus: model.senderTrustStatus
                     linkUrls: model.links
-                    isInPinnedPopup: true
                     transactionParams: model.transactionParameters
 
                     // This is possible since we have all data loaded before we load qml.
@@ -136,7 +139,8 @@ ModalPopup {
                     nextMessageAsJsonObj: popup.messageStore? popup.messageStore.getMessageByIndexAsJson(index + 1) : {}
 
                     // Additional params
-                    forceHoverHandler: !popup.messageToPin
+                    isInPinnedPopup: true
+                    disableHover: !!popup.messageToPin
                 }
 
                 MouseArea {
diff --git a/ui/app/AppLayouts/Chat/popups/community/CreateCategoryPopup.qml b/ui/app/AppLayouts/Chat/popups/community/CreateCategoryPopup.qml
index 2f3e941478..ca3fa507f7 100644
--- a/ui/app/AppLayouts/Chat/popups/community/CreateCategoryPopup.qml
+++ b/ui/app/AppLayouts/Chat/popups/community/CreateCategoryPopup.qml
@@ -4,6 +4,7 @@ import QtQuick.Dialogs 1.3
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1 as StatusQUtils
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Controls.Validators 0.1
@@ -220,9 +221,9 @@ StatusModal {
 
                 let error = ""
                 if (isEdit) {
-                    error = root.store.editCommunityCategory(root.categoryId, Utils.filterXSS(root.contentItem.categoryName.input.text), JSON.stringify(channels));
+                    error = root.store.editCommunityCategory(root.categoryId, StatusQUtils.Utils.filterXSS(root.contentItem.categoryName.input.text), JSON.stringify(channels));
                 } else {
-                    error = root.store.createCommunityCategory(Utils.filterXSS(root.contentItem.categoryName.input.text), JSON.stringify(channels));
+                    error = root.store.createCommunityCategory(StatusQUtils.Utils.filterXSS(root.contentItem.categoryName.input.text), JSON.stringify(channels));
                 }
 
                 if (error) {
diff --git a/ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml b/ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml
index 27259fd42c..59f2f46ada 100644
--- a/ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml
+++ b/ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml
@@ -303,14 +303,14 @@ StatusDialog {
 
                     if (!isEdit) {
                         //scrollView.communityColor.color.toString().toUpperCase()
-                        root.createCommunityChannel(Utils.filterXSS(nameInput.input.text),
-                                                     Utils.filterXSS(descriptionTextArea.text),
+                        root.createCommunityChannel(StatusQUtils.Utils.filterXSS(nameInput.input.text),
+                                                     StatusQUtils.Utils.filterXSS(descriptionTextArea.text),
                                                      emoji,
                                                      colorDialog.color.toString().toUpperCase(),
                                                      root.categoryId)
                     } else {
-                        root.editCommunityChannel(Utils.filterXSS(nameInput.input.text),
-                                                   Utils.filterXSS(descriptionTextArea.text),
+                        root.editCommunityChannel(StatusQUtils.Utils.filterXSS(nameInput.input.text),
+                                                   StatusQUtils.Utils.filterXSS(descriptionTextArea.text),
                                                    emoji,
                                                    colorDialog.color.toString().toUpperCase(),
                                                    root.categoryId)
diff --git a/ui/app/AppLayouts/Chat/popups/community/TransferOwnershipPopup.qml b/ui/app/AppLayouts/Chat/popups/community/TransferOwnershipPopup.qml
index f7116d2474..ea6d6d559c 100644
--- a/ui/app/AppLayouts/Chat/popups/community/TransferOwnershipPopup.qml
+++ b/ui/app/AppLayouts/Chat/popups/community/TransferOwnershipPopup.qml
@@ -4,10 +4,10 @@ import QtQuick.Layouts 1.14
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
 
-import utils 1.0
 import shared.controls 1.0
 import shared 1.0
 
diff --git a/ui/app/AppLayouts/Chat/stores/MessageStore.qml b/ui/app/AppLayouts/Chat/stores/MessageStore.qml
index ca298a9825..ac4d3f404f 100644
--- a/ui/app/AppLayouts/Chat/stores/MessageStore.qml
+++ b/ui/app/AppLayouts/Chat/stores/MessageStore.qml
@@ -135,49 +135,6 @@ QtObject {
         return messageModule.toggleReaction(messageId, emojiId)
     }
 
-    function lastTwoItems(nodes) {
-        return nodes.join(qsTr(" and "));
-    }
-
-    function showReactionAuthors(jsonArrayOfUsersReactedWithThisEmoji, emojiId) {
-        let listOfUsers = JSON.parse(jsonArrayOfUsersReactedWithThisEmoji)
-        if (listOfUsers.error) {
-            console.error("error parsing users who reacted to a message, error: ", obj.error)
-            return
-        }
-
-        let tooltip
-        if (listOfUsers.length === 1) {
-            tooltip = listOfUsers[0]
-        } else if (listOfUsers.length === 2) {
-            tooltip = lastTwoItems(listOfUsers);
-        } else {
-            var leftNode = [];
-            var rightNode = [];
-            const maxReactions = 12
-            let maximum = Math.min(maxReactions, listOfUsers.length)
-
-            if (listOfUsers.length > maxReactions) {
-                leftNode = listOfUsers.slice(0, maxReactions);
-                rightNode = listOfUsers.slice(maxReactions, listOfUsers.length);
-                return (rightNode.length === 1) ?
-                            lastTwoItems([leftNode.join(", "), rightNode[0]]) :
-                            lastTwoItems([leftNode.join(", "), qsTr("%1 more").arg(rightNode.length)]);
-            }
-
-            leftNode = listOfUsers.slice(0, maximum - 1);
-            rightNode = listOfUsers.slice(maximum - 1, listOfUsers.length);
-            tooltip = lastTwoItems([leftNode.join(", "), rightNode[0]])
-        }
-
-        tooltip += qsTr(" reacted with ");
-        let emojiHtml = StatusQUtils.Emoji.getEmojiFromId(emojiId);
-        if (emojiHtml) {
-            tooltip += emojiHtml;
-        }
-        return tooltip
-    }
-
     function deleteMessage(messageId) {
         if(!messageModule)
             return
diff --git a/ui/app/AppLayouts/Chat/views/ActivityCenterGroupRequest.qml b/ui/app/AppLayouts/Chat/views/ActivityCenterGroupRequest.qml
index 41673f8652..3a16820a29 100644
--- a/ui/app/AppLayouts/Chat/views/ActivityCenterGroupRequest.qml
+++ b/ui/app/AppLayouts/Chat/views/ActivityCenterGroupRequest.qml
@@ -12,6 +12,7 @@ import "../controls"
 import "../panels"
 
 import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
 import StatusQ.Core.Theme 0.1
 
 Item {
@@ -20,22 +21,26 @@ Item {
     height: childrenRect.height + dateGroupLbl.anchors.topMargin
     property var store
     property int previousNotificationIndex
-    property string previousNotificationTimestamp
+    property int previousNotificationTimestamp
     property bool hideReadNotifications: false
     property bool acCurrentFilterAll: false
 
-    DateGroup {
+    StatusDateGroupLabel {
         id: dateGroupLbl
+        anchors.top: parent.top
+        anchors.topMargin: Style.current.halfPadding
+        anchors.left: parent.left
+        anchors.leftMargin: Style.current.padding
+        height: visible ? implicitHeight : 0
+        visible: text !== ""
         previousMessageIndex: root.previousNotificationIndex
         previousMessageTimestamp: root.previousNotificationTimestamp
         messageTimestamp: model.timestamp
-        isActivityCenterMessage: true
-        height: visible ? implicitHeight : 0
     }
 
     Rectangle {
         id: groupRequestContent
-        property string timestamp: model.timestamp
+        property int timestamp: model.timestamp
 
         visible: {
             if (hideReadNotifications && model.read) {
diff --git a/ui/app/AppLayouts/Chat/views/ActivityCenterMessageComponentView.qml b/ui/app/AppLayouts/Chat/views/ActivityCenterMessageComponentView.qml
index da99b2045e..3b21f190cd 100644
--- a/ui/app/AppLayouts/Chat/views/ActivityCenterMessageComponentView.qml
+++ b/ui/app/AppLayouts/Chat/views/ActivityCenterMessageComponentView.qml
@@ -124,11 +124,11 @@ Item {
         MessageView {
             id: notificationMessage
             anchors.right: undefined
-            store: root.store
+            rootStore: root.store
             messageStore: root.store.messageStore
             messageId: model.id
             senderDisplayName: model.message.senderDisplayName
-            message: model.message.messageText
+            messageText: model.message.messageText
             responseToMessageWithId: model.message.responseToMessageWithId
             senderId: model.message.senderId
             senderLocalName: model.message.senderLocalName
@@ -140,10 +140,10 @@ Item {
             messageContentType: model.message.contentType
             senderTrustStatus: model.message.senderTrustStatus
             activityCenterMessage: true
-            read: model.read
+            activityCenterMessageRead: model.read
             onImageClicked: Global.openImagePopup(image, root.messageContextMenu)
             scrollToBottom: null
-            clickMessage: function (isProfileClick) {
+            messageClickHandler: {
                 if (isProfileClick) {
                     return Global.openProfilePopup(model.message.senderId);
                 }
diff --git a/ui/app/AppLayouts/Chat/views/ChatContentView.qml b/ui/app/AppLayouts/Chat/views/ChatContentView.qml
index ac82d3b503..03628adf11 100644
--- a/ui/app/AppLayouts/Chat/views/ChatContentView.qml
+++ b/ui/app/AppLayouts/Chat/views/ChatContentView.qml
@@ -91,11 +91,10 @@ ColumnLayout {
                 case Constants.chatType.publicChat:
                     return qsTr("Public chat")
                 case Constants.chatType.privateGroupChat:
-                    let cnt = root.usersStore.usersModule.model.count
-                    if(cnt > 1) return qsTr("%1 members").arg(cnt);
-                    return qsTr("1 member");
+                    const cnt = root.usersStore.usersModule.model.count
+                    return qsTr("%n members(s)", "", cnt)
                 case Constants.chatType.communityChat:
-                    return Utils.linkifyAndXSS(chatContentModule.chatDetails.description).trim()
+                    return StatusQUtils.Utils.linkifyAndXSS(chatContentModule.chatDetails.description).trim()
                 default:
                     return ""
                 }
@@ -161,10 +160,11 @@ ColumnLayout {
     Component {
         id: contactsSelector
         GroupChatPanel {
-            sectionModule: root.chatSectionModule
+            sectionModule: chatSectionModule
             chatContentModule: root.chatContentModule
             rootStore: root.rootStore
             maxHeight: root.height
+
             onPanelClosed: topBar.toolbarComponent = statusChatInfoButton
         }
     }
@@ -429,15 +429,16 @@ ColumnLayout {
             id: chatMessages
             Layout.fillWidth: true
             Layout.fillHeight: true
-            store: root.rootStore
+            chatContentModule: root.chatContentModule
+            rootStore: root.rootStore
             contactsStore: root.contactsStore
-            messageContextMenuInst: contextmenu
+            messageContextMenu: contextmenu
             messageStore: messageStore
             emojiPopup: root.emojiPopup
             usersStore: root.usersStore
             stickersLoaded: root.stickersLoaded
             isChatBlocked: root.isBlocked
-            channelEmoji: chatContentModule.chatDetails.emoji || ""
+            channelEmoji: !chatContentModule ? "" : (chatContentModule.chatDetails.emoji || "")
             isActiveChannel: root.isActiveChannel
             onShowReplyArea: {
                 let obj = messageStore.getMessageByIdAsJson(messageId)
@@ -455,9 +456,9 @@ ColumnLayout {
             id: inputArea
             Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
             Layout.fillWidth: true
-            Layout.preferredWidth: parent.width
-            height: chatInput.height
-            Layout.preferredHeight: height
+            Layout.preferredHeight: chatInput.implicitHeight
+                                    + chatInput.anchors.topMargin
+                                    + chatInput.anchors.bottomMargin
 
             Loader {
                 id: loadingMessagesIndicator
@@ -474,6 +475,10 @@ ColumnLayout {
 
             StatusChatInput {
                 id: chatInput
+
+                anchors.fill: parent
+                anchors.margins: Style.current.smallPadding
+
                 store: root.rootStore
                 usersStore: root.usersStore
 
diff --git a/ui/app/AppLayouts/Chat/views/ChatMessagesView.qml b/ui/app/AppLayouts/Chat/views/ChatMessagesView.qml
index 7a8cb7968e..25a3ca98df 100644
--- a/ui/app/AppLayouts/Chat/views/ChatMessagesView.qml
+++ b/ui/app/AppLayouts/Chat/views/ChatMessagesView.qml
@@ -19,12 +19,18 @@ import shared.status 1.0
 import shared.controls 1.0
 import shared.views.chat 1.0
 
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
 import "../controls"
 
 Item {
     id: root
 
-    property var store
+    property var chatContentModule
+    property var rootStore
     property var messageStore
     property var usersStore
     property var contactsStore
@@ -37,7 +43,7 @@ Item {
     property bool isChatBlocked: false
     property bool isActiveChannel: false
 
-    property var messageContextMenuInst
+    property var messageContextMenu
 
     property real scrollY: chatLogView.visibleArea.yPosition * chatLogView.contentHeight
     property int newMessages: 0
@@ -67,23 +73,23 @@ Item {
         }
 
         // Not Refactored Yet
-//            onNewMessagePushed: {
-//                if (!chatLogView.scrollToBottom()) {
-//                    newMessages++
-//                }
-//            }
+        //            onNewMessagePushed: {
+        //                if (!chatLogView.scrollToBottom()) {
+        //                    newMessages++
+        //                }
+        //            }
     }
 
     Item {
         id: loadingMessagesIndicator
-        visible: root.store.loadingHistoryMessagesInProgress
+        visible: root.rootStore.loadingHistoryMessagesInProgress
         anchors.top: parent.top
         anchors.left: parent.left
         height: visible? 20 : 0
         width: parent.width
 
         Loader {
-            active: root.store.loadingHistoryMessagesInProgress
+            active: root.rootStore.loadingHistoryMessagesInProgress
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
             sourceComponent: Component {
@@ -105,14 +111,6 @@ Item {
         spacing: 0
         verticalLayoutDirection: ListView.BottomToTop
 
-        // This header and Connections is to create an invisible padding so that the chat identifier is at the top
-        // The Connections is necessary, because doing the check inside the header created a binding loop (the contentHeight includes the header height
-        // If the content height is smaller than the full height, we "show" the padding so that the chat identifier is at the top, otherwise we disable the Connections
-        header: Item {
-            height: 0
-            width: chatLogView.width
-        }
-
         function checkHeaderHeight() {
             if (!chatLogView.headerItem) {
                 return
@@ -125,30 +123,70 @@ Item {
             }
         }
 
+        function scrollToBottom(force, caller) {
+            if (!force && !chatLogView.atYEnd) {
+                // User has scrolled up, we don't want to scroll back
+                return false
+            }
+            if (caller && caller !== chatLogView.itemAtIndex(chatLogView.count - 1)) {
+                // If we have a caller, only accept its request if it's the last message
+                return false
+            }
+            // Call this twice and with a timer since the first scroll to bottom might have happened before some stuff loads
+            // meaning that the scroll will not actually be at the bottom on switch
+            // Add a small delay because images, even though they say they say they are loaed, they aren't shown yet
+            Qt.callLater(chatLogView.positionViewAtBeginning)
+            timer.setTimeout(function() {
+                Qt.callLater(chatLogView.positionViewAtBeginning)
+            }, 100);
+            return true
+        }
+
+        model: messageStore.messagesModel
+
+        Component.onCompleted: chatLogView.scrollToBottom(true)
+
+        onContentYChanged: {
+            scrollDownButton.visible = contentHeight - (scrollY + height) > 400
+            let loadMore = scrollDownButton.visible && scrollY < 500
+            if(loadMore){
+                messageStore.loadMoreMessages()
+            }
+        }
+
         ScrollBar.vertical: StatusScrollBar {
             visible: chatLogView.visibleArea.heightRatio < 1
         }
 
-//        Connections {
-//            id: contentHeightConnection
-//            enabled: true
-//            target: chatLogView
-//            onContentHeightChanged: {
-//                chatLogView.checkHeaderHeight()
-//            }
-//            onHeightChanged: {
-//                chatLogView.checkHeaderHeight()
-//            }
-//        }
+        // This header and Connections is to create an invisible padding so that the chat identifier is at the top
+        // The Connections is necessary, because doing the check inside the header created a binding loop (the contentHeight includes the header height
+        // If the content height is smaller than the full height, we "show" the padding so that the chat identifier is at the top, otherwise we disable the Connections
+        header: Item {
+            height: 0
+            width: chatLogView.width
+        }
+
+        //        Connections {
+        //            id: contentHeightConnection
+        //            enabled: true
+        //            target: chatLogView
+        //            onContentHeightChanged: {
+        //                chatLogView.checkHeaderHeight()
+        //            }
+        //            onHeightChanged: {
+        //                chatLogView.checkHeaderHeight()
+        //            }
+        //        }
 
         Timer {
             id: timer
         }
 
         Button {
+            id: scrollDownButton
+
             readonly property int buttonPadding: 5
 
-            id: scrollDownButton
             visible: false
             height: 32
             width: nbMessages.width + arrowImage.width + 2 * Style.current.halfPadding + (nbMessages.visible ? scrollDownButton.buttonPadding : 0)
@@ -160,6 +198,7 @@ Item {
                 border.width: 0
                 radius: 16
             }
+
             onClicked: {
                 newMessages = 0
                 scrollDownButton.visible = false
@@ -202,50 +241,23 @@ Item {
             }
         }
 
-        function scrollToBottom(force, caller) {
-            if (!force && !chatLogView.atYEnd) {
-                // User has scrolled up, we don't want to scroll back
-                return false
-            }
-            if (caller && caller !== chatLogView.itemAtIndex(chatLogView.count - 1)) {
-                // If we have a caller, only accept its request if it's the last message
-                return false
-            }
-            // Call this twice and with a timer since the first scroll to bottom might have happened before some stuff loads
-            // meaning that the scroll will not actually be at the bottom on switch
-            // Add a small delay because images, even though they say they say they are loaed, they aren't shown yet
-            Qt.callLater(chatLogView.positionViewAtBeginning)
-            timer.setTimeout(function() {
-                Qt.callLater(chatLogView.positionViewAtBeginning)
-            }, 100);
-            return true
-        }
-
-//        Connections {
+        //        Connections {
         // Not Refactored Yet
-//            target: root.store.chatsModelInst
+        //            target: root.rootStore.chatsModelInst
 
-//            onAppReady: {
-//                chatLogView.scrollToBottom(true)
-//            }
-//        }
-
-        onContentYChanged: {
-            scrollDownButton.visible = contentHeight - (scrollY + height) > 400
-            let loadMore = scrollDownButton.visible && scrollY < 500
-            if(loadMore){
-                messageStore.loadMoreMessages()
-            }
-        }
-
-        model: messageStore.messagesModel
-
-        Component.onCompleted: chatLogView.scrollToBottom(true)
+        //            onAppReady: {
+        //                chatLogView.scrollToBottom(true)
+        //            }
+        //        }
 
         delegate: MessageView {
             id: msgDelegate
+
+            width: ListView.view.width
+            height: implicitHeight
+
             objectName: "chatMessageViewDelegate"
-            store: root.store
+            rootStore: root.rootStore
             messageStore: root.messageStore
             usersStore: root.usersStore
             contactsStore: root.contactsStore
@@ -255,7 +267,7 @@ Item {
 
             isActiveChannel: root.isActiveChannel
             isChatBlocked: root.isChatBlocked
-            messageContextMenu: messageContextMenuInst
+            messageContextMenu: root.messageContextMenu
 
             itemIndex: index
             messageId: model.id
@@ -264,10 +276,11 @@ Item {
             senderId: model.senderId
             senderDisplayName: model.senderDisplayName
             senderLocalName: model.senderLocalName
+            senderEnsName: model.senderEnsVerified ? model.senderDisplayName : ""
             senderIcon: model.senderIcon
             senderIsAdded: model.senderIsAdded
             amISender: model.amISender
-            message: model.messageText
+            messageText: model.messageText
             messageImage: model.messageImage
             messageTimestamp: model.timestamp
             messageOutgoingStatus: model.outgoingStatus
@@ -282,6 +295,7 @@ Item {
             isEdited: model.isEdited
             linkUrls: model.links
             transactionParams: model.transactionParameters
+            hasMention: model.mentionedUsersPks.split(" ").includes(root.rootStore.userProfileInst.pubKey)
 
             gapFrom: model.gapFrom
             gapTo: model.gapTo
@@ -296,6 +310,7 @@ Item {
             prevMsgTimestamp: model.prevMsgTimestamp
             nextMessageIndex: model.nextMsgIndex
             nextMessageAsJsonObj: messageStore.getMessageByIndexAsJson(model.nextMsgIndex)
+
             onOpenStickerPackPopup: {
                 root.openStickerPackPopup(stickerPackId);
             }
@@ -304,7 +319,7 @@ Item {
                 root.showReplyArea(messageId, author)
             }
 
-            onImageClicked: Global.openImagePopup(image, messageContextMenuInst)
+            onImageClicked: Global.openImagePopup(image, messageContextMenu)
 
             stickersLoaded: root.stickersLoaded
 
diff --git a/ui/app/AppLayouts/Chat/views/CommunitySettingsView.qml b/ui/app/AppLayouts/Chat/views/CommunitySettingsView.qml
index 51f237f478..a3c9b07dcc 100644
--- a/ui/app/AppLayouts/Chat/views/CommunitySettingsView.qml
+++ b/ui/app/AppLayouts/Chat/views/CommunitySettingsView.qml
@@ -10,6 +10,7 @@ import shared.popups 1.0
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1 as StatusQUtils
 import StatusQ.Layout 0.1
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
@@ -148,10 +149,10 @@ StatusAppTwoPanelLayout {
 
                 onEdited: {
                     const error = root.chatCommunitySectionModule.editCommunity(
-                        Utils.filterXSS(item.name),
-                        Utils.filterXSS(item.description),
-                        Utils.filterXSS(item.introMessage),
-                        Utils.filterXSS(item.outroMessage),
+                        StatusQUtils.Utils.filterXSS(item.name),
+                        StatusQUtils.Utils.filterXSS(item.description),
+                        StatusQUtils.Utils.filterXSS(item.introMessage),
+                        StatusQUtils.Utils.filterXSS(item.outroMessage),
                         item.options.requestToJoinEnabled ? Constants.communityChatOnRequestAccess : Constants.communityChatPublicAccess,
                         item.color.toString().toUpperCase(),
                         item.selectedTags,
diff --git a/ui/app/AppLayouts/CommunitiesPortal/popups/CreateCommunityPopup.qml b/ui/app/AppLayouts/CommunitiesPortal/popups/CreateCommunityPopup.qml
index efb2e21594..4196adaa30 100644
--- a/ui/app/AppLayouts/CommunitiesPortal/popups/CreateCommunityPopup.qml
+++ b/ui/app/AppLayouts/CommunitiesPortal/popups/CreateCommunityPopup.qml
@@ -9,6 +9,7 @@ import shared.popups 1.0
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1 as StatusQUtils
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Controls.Validators 0.1
@@ -160,10 +161,10 @@ StatusStackModal {
 
         function createCommunity() {
             const error = store.createCommunity({
-                    name: Utils.filterXSS(nameInput.input.text),
-                    description: Utils.filterXSS(descriptionTextInput.input.text),
-                    introMessage: Utils.filterXSS(introMessageInput.input.text),
-                    outroMessage: Utils.filterXSS(outroMessageInput.input.text),
+                    name: StatusQUtils.Utils.filterXSS(nameInput.input.text),
+                    description: StatusQUtils.Utils.filterXSS(descriptionTextInput.input.text),
+                    introMessage: StatusQUtils.Utils.filterXSS(introMessageInput.input.text),
+                    outroMessage: StatusQUtils.Utils.filterXSS(outroMessageInput.input.text),
                     color: colorPicker.color.toString().toUpperCase(),
                     tags: communityTagsPicker.selectedTags,
                     image: {
diff --git a/ui/app/AppLayouts/Profile/views/AppearanceView.qml b/ui/app/AppLayouts/Profile/views/AppearanceView.qml
index 200998a168..89ed5c1190 100644
--- a/ui/app/AppLayouts/Profile/views/AppearanceView.qml
+++ b/ui/app/AppLayouts/Profile/views/AppearanceView.qml
@@ -56,23 +56,25 @@ SettingsContentBase {
             anchors.top: parent.top
             anchors.left: parent.left
             anchors.right: parent.right
-            height: paceholderMessage.height + paceholderMessage.anchors.margins*2
+            height: placeholderMessage.implicitHeight +
+                    placeholderMessage.anchors.leftMargin +
+                    placeholderMessage.anchors.rightMargin
             radius: Style.current.radius
             border.color: Style.current.border
             color: Style.current.transparent
 
             MessageView {
-                id: paceholderMessage
+                id: placeholderMessage
                 anchors.top: parent.top
                 anchors.left: parent.left
-                anchors.right: parent.left
+                anchors.right: parent.right
                 anchors.margins: Style.current.smallPadding
                 isMessage: true
                 shouldRepeatHeader: true
-                messageTimestamp:Date.now()
+                messageTimestamp: Date.now()
                 senderDisplayName: "@vitalik"
                 senderIcon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAb0lEQVR4Ae3UQQqAIBRF0Wj9ba9Bq6l5JBQqfn/ngDMH3YS3AAB/tO3H+XRG3b9bR/+gVoREI2RapVXpfd5+X5oXERKNkHS+rk3tOpWkeREh0QiZVu91ql2zNC8iJBoh0yqtSqt1slpCghICANDPBc0ESPh0bHkHAAAAAElFTkSuQmCC"
-                message: qsTr("Blockchains will drop search costs, causing a kind of decomposition that allows you to have markets of entities that are horizontally segregated and vertically segregated.")
+                messageText: qsTr("Blockchains will drop search costs, causing a kind of decomposition that allows you to have markets of entities that are horizontally segregated and vertically segregated.")
                 messageContentType: Constants.messageContentType.messageType
                 placeholderMessage: true
             }
diff --git a/ui/app/AppLayouts/stores/MessageStore.qml b/ui/app/AppLayouts/stores/MessageStore.qml
index fc5cac6825..d963b999ae 100644
--- a/ui/app/AppLayouts/stores/MessageStore.qml
+++ b/ui/app/AppLayouts/stores/MessageStore.qml
@@ -130,56 +130,4 @@ QtObject {
             return []
         }
     }
-    property var clickMessage: function(isProfileClick, isSticker = false, isImage = false, image = null, isEmoji = false, hideEmojiPicker = false, isReply = false, isRightClickOnImage = false, imageSource = "") {
-        if (placeholderMessage || activityCenterMessage) {
-            return
-        }
-
-        if (!isProfileClick) {
-            SelectedMessage.set(messageId, fromAuthor);
-        }
-
-        messageContextMenu.messageId = messageId
-        messageContextMenu.contentType = contentType
-        messageContextMenu.linkUrls = linkUrls;
-        messageContextMenu.isProfile = !!isProfileClick;
-        messageContextMenu.isCurrentUser = isCurrentUser
-        messageContextMenu.isText = isText
-        messageContextMenu.isSticker = isSticker;
-        messageContextMenu.isEmoji = isEmoji;
-        messageContextMenu.hideEmojiPicker = hideEmojiPicker;
-        messageContextMenu.pinnedMessage = pinnedMessage;
-        messageContextMenu.isCurrentUser = isCurrentUser;
-        messageContextMenu.isRightClickOnImage = isRightClickOnImage
-        messageContextMenu.imageSource = imageSource
-        messageContextMenu.onClickEdit = function() {isEdit = true}
-
-        //TODO remove dynamic scoping
-        if (isReply) {
-            let nickname = appMain.getUserNickname(repliedMessageAuthor)
-            messageContextMenu.show(repliedMessageAuthor, repliedMessageAuthorPubkey, repliedMessageUserImage, plainText, nickname, emojiReactionsModel);
-        } else {
-            let nickname = appMain.getUserNickname(fromAuthor)
-            messageContextMenu.show(userName, fromAuthor, profileImageSource, plainText, nickname, emojiReactionsModel);
-        }
-
-         messageContextMenu.x = messageContextMenu.setXPosition()
-         messageContextMenu.y = messageContextMenu.setYPosition()
-    }
-
-    function setHovered(messageId, hovered) {
-        if (hovered) {
-            hoveredMessage = messageId;
-        } else if (hoveredMessage === messageId) {
-            hoveredMessage = "";
-        }
-    }
-
-    function setMessageActive(messageId, active) {
-        if (active) {
-            activeMessage = messageId;
-        } else if (activeMessage === messageId) {
-            activeMessage = "";
-        }
-    }
 }
diff --git a/ui/imports/shared/controls/TransactionDelegate.qml b/ui/imports/shared/controls/TransactionDelegate.qml
index ce425c3165..82b5b258ab 100644
--- a/ui/imports/shared/controls/TransactionDelegate.qml
+++ b/ui/imports/shared/controls/TransactionDelegate.qml
@@ -140,7 +140,7 @@ Rectangle {
         }
         StyledText {
             id: timeValue
-            text: Utils.formatLongDateTime(parseInt(timestamp) * 1000, RootStore.accountSensitiveSettings.isDDMMYYDateFormat, RootStore.accountSensitiveSettings.is24hTimeFormat)
+            text: Utils.formatLongDateTime(timestamp * 1000, RootStore.accountSensitiveSettings.isDDMMYYDateFormat, RootStore.accountSensitiveSettings.is24hTimeFormat)
             font.pixelSize: Style.current.primaryTextFontSize
             anchors.rightMargin: Style.current.smallPadding
         }
diff --git a/ui/imports/shared/controls/chat/DateGroup.qml b/ui/imports/shared/controls/chat/DateGroup.qml
deleted file mode 100644
index 6efdb76789..0000000000
--- a/ui/imports/shared/controls/chat/DateGroup.qml
+++ /dev/null
@@ -1,60 +0,0 @@
-import QtQuick 2.3
-
-import shared 1.0
-import shared.panels 1.0
-import utils 1.0
-
-StyledText {
-    property bool isActivityCenterMessage: false
-    property int previousMessageIndex: -1
-    property string previousMessageTimestamp
-    property string messageTimestamp
-
-    id: dateGroupLbl
-    font.pixelSize: 13
-    color: Style.current.secondaryText
-    horizontalAlignment: Text.AlignHCenter
-    anchors.horizontalCenter: isActivityCenterMessage ? undefined : parent.horizontalCenter
-    anchors.top: parent.top
-    anchors.topMargin: visible ? (isActivityCenterMessage ? Style.current.halfPadding : 20) : 0
-    anchors.left: parent.left
-    anchors.leftMargin: isActivityCenterMessage ? Style.current.padding : 0
-
-    text: {
-        if (previousMessageIndex === -1) return ""; // identifier
-
-        let now = new Date()
-        let yesterday = new Date()
-        yesterday.setDate(now.getDate()-1)
-
-        let currentMsgDate = new Date(parseInt(messageTimestamp, 10));
-        let prevMsgDate = previousMessageTimestamp === "" ? undefined : new Date(parseInt(previousMessageTimestamp, 10));
-
-        if (!!prevMsgDate && currentMsgDate.getDay() === prevMsgDate.getDay()) {
-            return ""
-        }
-
-        if (now.toDateString() === currentMsgDate.toDateString()) {
-            return qsTr("Today")
-        } else if (yesterday.toDateString() === currentMsgDate.toDateString()) {
-            return qsTr("Yesterday")
-        } else {
-            const monthNames = [
-                qsTr("January"),
-                qsTr("February"),
-                qsTr("March"),
-                qsTr("April"),
-                qsTr("May"),
-                qsTr("June"),
-                qsTr("July"),
-                qsTr("August"),
-                qsTr("September"),
-                qsTr("October"),
-                qsTr("November"),
-                qsTr("December")
-            ];
-            return monthNames[currentMsgDate.getMonth()] + ", " + currentMsgDate.getDate()
-        }
-    }
-    visible: text !== ""
-}
diff --git a/ui/imports/shared/controls/chat/FetchMoreMessagesButton.qml b/ui/imports/shared/controls/chat/FetchMoreMessagesButton.qml
index eb47f4ee24..740b91c984 100644
--- a/ui/imports/shared/controls/chat/FetchMoreMessagesButton.qml
+++ b/ui/imports/shared/controls/chat/FetchMoreMessagesButton.qml
@@ -8,19 +8,18 @@ import utils 1.0
 
 Item {
     id: root
-    height: childrenRect.height + Style.current.smallPadding * 2
-    anchors.left: parent.left
-    anchors.right: parent.right
 
     property int nextMessageIndex
-    property string nextMsgTimestamp
+    property double nextMsgTimestamp
     
     signal clicked()
     signal timerTriggered()
 
+    implicitHeight: childrenRect.height + Style.current.smallPadding * 2
+
     QtObject {
         id: d
-         readonly property string formattedDate: nextMessageIndex > -1 ? Utils.formatLongDate(nextMsgTimestamp * 1, RootStore.accountSensitiveSettings.isDDMMYYDateFormat) :
+         readonly property string formattedDate: nextMessageIndex > -1 ? Utils.formatLongDate(nextMsgTimestamp, RootStore.accountSensitiveSettings.isDDMMYYDateFormat) :
                                                                          Utils.formatLongDate(undefined, RootStore.accountSensitiveSettings.isDDMMYYDateFormat)
     }
 
diff --git a/ui/imports/shared/controls/chat/GapComponent.qml b/ui/imports/shared/controls/chat/GapComponent.qml
index 19347f3717..2d3be63cbc 100644
--- a/ui/imports/shared/controls/chat/GapComponent.qml
+++ b/ui/imports/shared/controls/chat/GapComponent.qml
@@ -12,9 +12,7 @@ Item {
 
     signal clicked()
 
-    height: childrenRect.height + Style.current.smallPadding * 2
-    anchors.left: parent.left
-    anchors.right: parent.right
+    implicitHeight: childrenRect.height + Style.current.smallPadding * 2
 
     Separator {
         id: sep1
diff --git a/ui/imports/shared/controls/chat/MessageMouseArea.qml b/ui/imports/shared/controls/chat/MessageMouseArea.qml
deleted file mode 100644
index 0c5e51d90f..0000000000
--- a/ui/imports/shared/controls/chat/MessageMouseArea.qml
+++ /dev/null
@@ -1,53 +0,0 @@
-import QtQuick 2.13
-
-import utils 1.0
-import shared 1.0
-
-MouseArea {
-    id: mouseArea
-    z: 50
-    enabled: !placeholderMessage
-//TODO remove dynamic scoping
-//    property bool isSticker: false
-//    property bool placeholderMessage: false
-    property bool isHovered: false
-    property bool stickersLoaded: false
-    property bool isMessageActive
-    property bool isActivityCenterMessage: false
-    property var messageContextMenu
-    property var messageContextMenuParent
-    signal openStickerPackPopup()
-    signal setMessageActive(string messageId, bool active)
-    signal clickMessage(bool isProfileClick, bool isSticker, bool isImage)
-
-    cursorShape: !enabled ? Qt.PointingHandCursor : undefined
-
-    acceptedButtons: Qt.LeftButton | Qt.RightButton
-
-    onClicked: {
-        if (isActivityCenterMessage) {
-            mouseArea.clickMessage(false, isSticker, false)
-            return
-        }
-        if (mouse.button === Qt.RightButton) {
-            if (!!mouseArea.messageContextMenu) {
-                // Set parent, X & Y positions for the messageContextMenu
-                messageContextMenu.parent = messageContextMenuParent;
-                messageContextMenu.setXPosition = function() { return (mouse.x)};
-                messageContextMenu.setYPosition = function() { return (mouse.y)};
-            }
-            mouseArea.clickMessage(false, isSticker, false)
-            if (typeof isMessageActive !== "undefined") {
-                setMessageActive(messageId, true)
-            }
-            return;
-        }
-        if (mouse.button === Qt.LeftButton && isSticker && stickersLoaded) {
-            if (isHovered) {
-                isHovered = false;
-            }
-            openStickerPackPopup();
-            return;
-        }
-    }
-}
diff --git a/ui/imports/shared/controls/chat/Retry.qml b/ui/imports/shared/controls/chat/Retry.qml
deleted file mode 100644
index d263a492db..0000000000
--- a/ui/imports/shared/controls/chat/Retry.qml
+++ /dev/null
@@ -1,24 +0,0 @@
-import QtQuick 2.3
-
-import shared 1.0
-import shared.panels 1.0
-import utils 1.0
-
-StyledText {
-    id: retryLbl
-    color: Style.current.red
-    text: qsTr("Resend")
-    font.pixelSize: Style.current.tertiaryTextFontSize
-    visible: isCurrentUser && (timeout || isExpired)
-    property bool isCurrentUser: false
-    property bool isExpired: false
-    property bool timeout: false
-    signal clicked()
-    MouseArea {
-        cursorShape: Qt.PointingHandCursor
-        anchors.fill: parent
-        onClicked: {
-            retryLbl.clicked();
-        }
-    }
-}
diff --git a/ui/imports/shared/controls/chat/UserImage.qml b/ui/imports/shared/controls/chat/UserImage.qml
index e25f104f05..f319471df7 100644
--- a/ui/imports/shared/controls/chat/UserImage.qml
+++ b/ui/imports/shared/controls/chat/UserImage.qml
@@ -18,7 +18,6 @@ Loader {
     property string image
     property bool showRing: true
     property bool interactive: true
-    property var messageContextMenu
 
     property int colorId: Utils.colorIdForPubkey(pubkey)
     property var colorHash: Utils.getColorHashAsJson(pubkey)
@@ -51,12 +50,6 @@ Loader {
                 cursorShape: Qt.PointingHandCursor
                 hoverEnabled: true
                 onClicked: {
-                    if (!!root.messageContextMenu) {
-                        // Set parent, X & Y positions for the messageContextMenu
-                        root.messageContextMenu.parent = root
-                        root.messageContextMenu.setXPosition = function() { return root.width + 4 }
-                        root.messageContextMenu.setYPosition = function() { return 0 }
-                    }
                     root.clicked()
                 }
             }
diff --git a/ui/imports/shared/controls/chat/UsernameLabel.qml b/ui/imports/shared/controls/chat/UsernameLabel.qml
index 1af72d7f2d..c68ec87723 100644
--- a/ui/imports/shared/controls/chat/UsernameLabel.qml
+++ b/ui/imports/shared/controls/chat/UsernameLabel.qml
@@ -12,7 +12,6 @@ Item {
     width: chatName.width + (ensOrAlias.visible ? ensOrAlias.width + ensOrAlias.anchors.leftMargin : 0)
     property alias label: chatName
 
-    property var messageContextMenu
     property string displayName
     property string localName
     property bool amISender
@@ -41,12 +40,6 @@ Item {
                 root.isHovered = false
             }
             onClicked: {
-                if (!!root.messageContextMenu) {
-                    // Set parent, X & Y positions for the messageContextMenu
-                    root.messageContextMenu.parent = root
-                    root.messageContextMenu.setXPosition = function() { return 0}
-                    root.messageContextMenu.setYPosition = function() { return root.height + 4}
-                }
                 root.clickMessage(true);
             }
         }
diff --git a/ui/imports/shared/panels/chat/AudioPlayerPanel.qml b/ui/imports/shared/panels/chat/AudioPlayerPanel.qml
deleted file mode 100644
index a73b34902f..0000000000
--- a/ui/imports/shared/panels/chat/AudioPlayerPanel.qml
+++ /dev/null
@@ -1,111 +0,0 @@
-import QtQuick 2.3
-import QtMultimedia 5.14
-import shared 1.0
-import shared.panels 1.0
-import shared.stores 1.0
-
-import utils 1.0
-
-Item {
-    property string audioSource: ""
-
-    height: 20
-    width: 350
-
-    Audio {
-        id: audioMessage
-        source: audioSource
-        store: RootStore
-        notifyInterval: 150
-    }
-
-    SVGImage {
-        id: playButton
-        source: audioMessage.playbackState == Audio.PlayingState ? Style.svg("icon-pause") : Style.svg("icon-play")
-        width: 15
-        height: 15
-        anchors.left: parent.left
-        anchors.leftMargin: Style.current.padding
-        anchors.verticalCenter: parent.verticalCenter
-        MouseArea {
-              id: playArea
-              anchors.fill: parent
-              cursorShape: Qt.PointingHandCursor
-              onPressed: {
-                  if(audioMessage.playbackState === Audio.PlayingState){
-                      audioMessage.pause();
-                  } else {
-                      audioMessage.play();
-                  }
-
-              }
-          }
-    }
-
-    Rectangle {
-        height: 2
-        width: 300
-        color: Style.current.grey
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.left: playButton.right
-        anchors.leftMargin: 20
-        Rectangle {
-            id: progress
-            height: 2
-            width: {
-                if(audioMessage.duration === 0) return 0;
-                if(audioMessage.playbackState === Audio.StoppedState) return 0;
-                return parent.width * audioMessage.position / audioMessage.duration;
-            }
-            color: Style.current.black
-            anchors.verticalCenter: parent.verticalCenter
-        }
-
-        Rectangle {
-            id: handle
-            width: 10
-            height: 10
-            color: Style.current.black
-            radius: 10
-            anchors.verticalCenter: parent.verticalCenter
-            x: progress.width
-            state: "default"
-
-            states: State {
-                name: "pressed"
-                when: handleMouseArea.pressed
-                PropertyChanges {
-                    target: handle;
-                    scale: 1.2
-                }
-            }
-            transitions: Transition {
-                NumberAnimation {
-                    properties: "scale";
-                    duration: 100;
-                    easing.type: Easing.InOutQuad
-                }
-            }
-
-            MouseArea {
-                id: handleMouseArea
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: parent
-                drag.target: parent
-                drag.axis: Drag.XAxis
-                drag.minimumX: 0
-                drag.maximumX: parent.parent.width
-                onPressed: {
-                    handle.state = "pressed"
-                    if(audioMessage.playbackState === Audio.PlayingState){
-                        audioMessage.pause();
-                    }
-                }
-                onReleased: {
-                    handle.state = "default"
-                    audioMessage.seek(audioMessage.duration * handle.x / parent.parent.width);
-                }
-            }
-        }
-    }
-}
diff --git a/ui/imports/shared/panels/chat/ChatButtonsPanel.qml b/ui/imports/shared/panels/chat/ChatButtonsPanel.qml
deleted file mode 100644
index 2ae47e2611..0000000000
--- a/ui/imports/shared/panels/chat/ChatButtonsPanel.qml
+++ /dev/null
@@ -1,213 +0,0 @@
-import QtQuick 2.13
-import QtGraphicalEffects 1.13
-
-import StatusQ.Controls 0.1
-
-import utils 1.0
-import shared.popups 1.0
-
-Rectangle {
-    id: buttonsContainer
-    property bool parentIsHovered: false
-    property bool isChatBlocked: false
-    property int containerMargin: 2
-    property int contentType: 2
-    property bool isCurrentUser: false
-    property bool isMessageActive: false
-    property var messageContextMenu
-    property bool isInPinnedPopup: false
-    property bool activityCenterMsg
-    property bool placeholderMsg
-    property string fromAuthor
-    property bool editBtnActive: false
-    property bool pinButtonActive: false
-    property bool deleteButtonActive: false
-    property bool pinnedMessage: false
-    property bool canPin: false
-    signal replyClicked(string messageId, string author)
-    signal hoverChanged(bool hovered)
-    signal setMessageActive(string messageId, bool active)
-    signal clickMessage(bool isProfileClick, bool isSticker, bool isImage, var image, bool isEmoji, bool hideEmojiPicker)
-
-    visible: !buttonsContainer.isChatBlocked &&
-             !buttonsContainer.placeholderMsg && !buttonsContainer.activityCenterMsg &&
-             (buttonsContainer.parentIsHovered || isMessageActive)
-             && contentType !== Constants.messageContentType.transactionType
-    width: buttonRow.width + buttonsContainer.containerMargin * 2
-    height: 36
-    radius: Style.current.radius
-    color: Style.current.modalBackground
-    z: 52
-
-    layer.enabled: true
-    layer.effect: DropShadow {
-        width: buttonsContainer.width
-        height: buttonsContainer.height
-        x: buttonsContainer.x
-        y: buttonsContainer.y + 10
-        visible: buttonsContainer.visible
-        source: buttonsContainer
-        horizontalOffset: 0
-        verticalOffset: 2
-        radius: 10
-        samples: 15
-        color: "#22000000"
-    }
-
-    MouseArea {
-        anchors.fill: buttonsContainer
-        acceptedButtons: Qt.NoButton
-        hoverEnabled: true
-        onEntered: {
-            buttonsContainer.hoverChanged(true)
-        }
-        onExited: {
-            buttonsContainer.hoverChanged(false)
-        }
-    }
-
-    Row {
-        id: buttonRow
-        spacing: buttonsContainer.containerMargin
-        anchors.left: parent.left
-        anchors.leftMargin: buttonsContainer.containerMargin
-        anchors.verticalCenter: buttonsContainer.verticalCenter
-        height: parent.height - 2 * buttonsContainer.containerMargin
-
-        Loader {
-            active: !buttonsContainer.isInPinnedPopup
-            sourceComponent: StatusFlatRoundButton {
-                id: emojiBtn
-                width: 32
-                height: 32
-                icon.name: "reaction-b"
-                type: StatusFlatRoundButton.Type.Tertiary
-                tooltip.text: qsTr("Add reaction")
-                onClicked: {
-                    setMessageActive(messageId, true)
-                    // Set parent, X & Y positions for the messageContextMenu
-                    buttonsContainer.messageContextMenu.parent = buttonsContainer
-                    buttonsContainer.messageContextMenu.setXPosition = function() { return (-Math.abs(buttonsContainer.width - buttonsContainer.messageContextMenu.emojiContainer.width))}
-                    buttonsContainer.messageContextMenu.setYPosition = function() { return (-buttonsContainer.messageContextMenu.height - 4)}
-                    buttonsContainer.clickMessage(false, false, false, null, true, false)
-                }
-                onHoveredChanged: buttonsContainer.hoverChanged(this.hovered)
-            }
-        }
-
-        Loader {
-            active: !buttonsContainer.isInPinnedPopup
-            sourceComponent: StatusFlatRoundButton {
-                id: replyBtn
-                objectName: "replyToMessageButton"
-                width: 32
-                height: 32
-                icon.name: "reply"
-                type: StatusFlatRoundButton.Type.Tertiary
-                tooltip.text: qsTr("Reply")
-                onClicked: {
-                    buttonsContainer.replyClicked(messageId, fromAuthor);
-                    if (messageContextMenu.closeParentPopup) {
-                        messageContextMenu.closeParentPopup()
-                    }
-                }
-                onHoveredChanged: buttonsContainer.hoverChanged(this.hovered)
-            }
-        }
-
-        Loader {
-            active: buttonsContainer.editBtnActive && !buttonsContainer.isInPinnedPopup
-            sourceComponent: StatusFlatRoundButton {
-                id: editButton
-                width: 32
-                height: 32
-                icon.source: Style.svg("edit-message")
-                type: StatusFlatRoundButton.Type.Tertiary
-                tooltip.text: qsTr("Edit")
-                onClicked: messageStore.setEditModeOn(messageId)
-                onHoveredChanged: buttonsContainer.hoverChanged(editButton.hovered)
-            }
-        }
-
-        Loader {
-            active: buttonsContainer.pinButtonActive
-            sourceComponent: StatusFlatRoundButton {
-                id: pinButton
-                width: 32
-                height: 32
-                icon.name: buttonsContainer.pinnedMessage ? "unpin" : "pin"
-                type: StatusFlatRoundButton.Type.Tertiary
-                tooltip.text: buttonsContainer.pinnedMessage ? qsTr("Unpin") : qsTr("Pin")
-                onHoveredChanged: buttonsContainer.hoverChanged(pinButton.hovered)
-                onClicked: {
-                    if (buttonsContainer.pinnedMessage) {
-                        messageStore.unpinMessage(messageId)
-                        return;
-                    }
-
-                    if (buttonsContainer.canPin) {
-                        messageStore.pinMessage(messageId)
-                        return;
-                    }
-
-                    if (!chatContentModule) {
-                        console.warn("error on open pinned messages limit reached from message context menu - chat content module is not set")
-                        return;
-                    }
-
-                    Global.openPopup(pinnedMessagesPopupComponent, {
-                                         store: rootStore,
-                                         messageStore: messageStore,
-                                         pinnedMessagesModel: chatContentModule.pinnedMessagesModel,
-                                         messageToPin: buttonsContainer.messageId
-                                     });
-                }
-            }
-        }
-
-        Loader {
-            active: buttonsContainer.deleteButtonActive && !buttonsContainer.isInPinnedPopup
-            sourceComponent: StatusFlatRoundButton {
-                id: deleteButton
-                objectName: "chatDeleteMessageButton"
-                width: 32
-                height: 32
-                type: StatusFlatRoundButton.Type.Tertiary
-                icon.name: "delete"
-                tooltip.text: qsTr("Delete")
-                onHoveredChanged: buttonsContainer.hoverChanged(deleteButton.hovered)
-                onClicked: {
-                    if (!localAccountSensitiveSettings.showDeleteMessageWarning) {
-                        messageStore.deleteMessage(messageId)
-                    }
-                    else {
-                        Global.openPopup(deleteMessageConfirmationDialogComponent)
-                    }
-                }
-            }
-        }
-
-        Component {
-            id: deleteMessageConfirmationDialogComponent
-
-            ConfirmationDialog {
-                confirmButtonObjectName: "chatButtonsPanelConfirmDeleteMessageButton"
-                header.title: qsTr("Confirm deleting this message")
-                confirmationText: qsTr("Are you sure you want to delete this message? Be aware that other clients are not guaranteed to delete the message as well.")
-                height: 260
-                checkbox.visible: true
-                executeConfirm: function () {
-                    if (checkbox.checked) {
-                        localAccountSensitiveSettings.showDeleteMessageWarning = false
-                    }
-
-                    close()
-                    messageStore.deleteMessage(messageId)
-                }
-                onClosed: {
-                    destroy()
-                }
-            }
-        }
-    }
-}
diff --git a/ui/imports/shared/panels/chat/ChatReplyPanel.qml b/ui/imports/shared/panels/chat/ChatReplyPanel.qml
deleted file mode 100644
index d52096e7d3..0000000000
--- a/ui/imports/shared/panels/chat/ChatReplyPanel.qml
+++ /dev/null
@@ -1,192 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Shapes 1.13
-import QtGraphicalEffects 1.13
-
-import utils 1.0
-import shared.controls 1.0
-import shared 1.0
-import shared.panels 1.0
-import shared.status 1.0
-import shared.controls.chat 1.0
-
-import StatusQ.Core.Utils 0.1 as StatusQUtils
-
-Loader {
-    id: root
-
-    property bool amISenderOfTheRepliedMessage
-    property int repliedMessageContentType
-    property string repliedMessageSenderIcon
-    property bool repliedMessageIsEdited
-    property string repliedMessageSender
-    property string repliedMessageSenderPubkey
-    property bool repliedMessageSenderIsAdded
-    property string repliedMessageContent
-    property string repliedMessageImage
-    property bool isCurrentUser: false
-    property int nameMargin: 6
-    property int textFieldWidth: item ? item.textField.width : 0
-    property int textFieldImplicitWidth: 0
-    property int authorWidth: item ? item.authorMetrics.width : 0
-    property bool longReply: false
-    property color elementsColor: amISenderOfTheRepliedMessage ? Style.current.chatReplyCurrentUser : Style.current.secondaryText
-    property var container
-    property int chatHorizontalPadding
-    property string stickerData
-
-    signal clickMessage(bool isProfileClick, bool isSticker, bool isImage, var image, bool isEmoji, bool hideEmojiPicker, bool isReply)
-    signal scrollToBottom(bool isit, var container)
-
-    sourceComponent: Component {
-        Item {
-            property alias textField: lblReplyMessage
-            property alias authorMetrics: txtAuthorMetrics
-
-            id: chatReply
-            // childrenRect.height shows a binding loop for some reason, so we use heights instead
-            height: {
-                const h = userImage.height + 4
-                if (repliedMessageContentType === Constants.messageContentType.imageType) {
-                    return h + imgReplyImage.height
-                }
-                if (repliedMessageContentType === Constants.messageContentType.stickerType) {
-                    return h + stickerLoader.height
-                }
-                return h + lblReplyMessage.height
-            }
-            width: parent.width
-            clip: true
-
-            TextMetrics {
-                id: txtAuthorMetrics
-                font: lblReplyAuthor.font
-                text: lblReplyAuthor.text
-            }
-
-            Shape {
-                id: replyCorner
-                anchors.left: parent.left
-                anchors.leftMargin: 20 - 1
-                anchors.top: parent.top
-                anchors.topMargin: Style.current.smallPadding
-                width: 20
-                height: parent.height - anchors.topMargin
-                asynchronous: true
-                antialiasing: true
-
-                ShapePath {
-                    id: capTest
-
-                    strokeColor: Utils.setColorAlpha(root.elementsColor, 0.4)
-                    strokeWidth: 3
-                    fillColor: "transparent"
-
-                    capStyle: ShapePath.RoundCap
-                    joinStyle: ShapePath.RoundJoin
-
-                    startX: 20
-                    startY: 0
-                    PathLine { x: 10; y: 0 }
-                    PathArc {
-                           x: 0; y: 10
-                           radiusX: 13
-                           radiusY: 13
-                           direction: PathArc.Counterclockwise
-                       }
-                    PathLine { x: 0; y: chatReply.height - replyCorner.anchors.topMargin }
-                }
-            }
-
-            UserImage {
-                id: userImage
-                anchors.left: replyCorner.right
-                anchors.leftMargin: Style.current.halfPadding
-
-                imageHeight: 20
-                imageWidth: 20
-                active: true
-
-                name: repliedMessageSender
-                pubkey: repliedMessageSenderPubkey
-                image: repliedMessageSenderIcon
-
-                onClicked: root.clickMessage(true, false, false, null, false, false, true)
-            }
-
-            StyledTextEdit {
-                id: lblReplyAuthor
-                text: repliedMessageSender
-                color: root.elementsColor
-                readOnly: true
-                font.pixelSize: Style.current.secondaryTextFontSize
-                selectByMouse: true
-                font.weight: Font.Medium
-                anchors.verticalCenter: userImage.verticalCenter
-                anchors.left: userImage.right
-                anchors.leftMargin: 5
-            }
-
-            StatusChatImage {
-                id: imgReplyImage
-                visible: repliedMessageContentType === Constants.messageContentType.imageType
-                imageWidth: 50
-                imageSource: repliedMessageImage
-                anchors.top: lblReplyAuthor.bottom
-                anchors.topMargin: nameMargin
-                anchors.left: userImage.left
-                chatHorizontalPadding: 0
-                container: root.container
-                allCornersRounded: true
-                playing: false
-            }
-
-            Loader {
-                id: stickerLoader
-                active: repliedMessageContentType === Constants.messageContentType.stickerType
-                anchors.top: lblReplyAuthor.bottom
-                anchors.topMargin: nameMargin
-                anchors.left: userImage.left
-                sourceComponent: Component {
-                    StatusSticker {
-                        id: stickerId
-                        imageHeight: 56
-                        imageWidth: 56
-                        stickerData: root.stickerData
-                        contentType: repliedMessageContentType
-                        onLoaded: {
-                            scrollToBottom(true, root.container)
-                        }
-                    }
-                }
-            }
-
-            StyledTextEdit {
-                id: lblReplyMessage
-                visible: repliedMessageContentType !== Constants.messageContentType.imageType && repliedMessageContentType !== Constants.messageContentType.stickerType
-                Component.onCompleted: textFieldImplicitWidth = implicitWidth
-                anchors.top: lblReplyAuthor.bottom
-                anchors.topMargin: nameMargin
-                text: {
-                    if (repliedMessageIsEdited){
-                        let index = repliedMessageContent.length - 4
-                        return Utils.getReplyMessageStyle(StatusQUtils.Emoji.parse(Utils.linkifyAndXSS(repliedMessageContent.slice(0, index) + Constants.editLabel + repliedMessageContent.slice(index)), StatusQUtils.Emoji.size.small), amISenderOfTheRepliedMessage)
-                    } else {
-                        return Utils.getReplyMessageStyle(StatusQUtils.Emoji.parse(Utils.linkifyAndXSS(repliedMessageContent), StatusQUtils.Emoji.size.small), amISenderOfTheRepliedMessage)
-                    }
-                }
-                textFormat: Text.RichText
-                color: root.elementsColor
-                readOnly: true
-                selectByMouse: true
-                font.pixelSize: Style.current.additionalTextSize
-                font.weight: Font.Medium
-                anchors.left: userImage.left
-                width: root.longReply ? parent.width : implicitWidth
-                height: 20
-                clip: true
-                z: 51
-            }
-        }
-    }
-}
-
diff --git a/ui/imports/shared/panels/chat/EmojiReactionsPanel.qml b/ui/imports/shared/panels/chat/EmojiReactionsPanel.qml
deleted file mode 100644
index b6c6bd5955..0000000000
--- a/ui/imports/shared/panels/chat/EmojiReactionsPanel.qml
+++ /dev/null
@@ -1,192 +0,0 @@
-import QtQuick 2.3
-import QtQuick.Controls 2.13
-import QtGraphicalEffects 1.13
-
-import shared 1.0
-import shared.panels 1.0
-
-import StatusQ.Controls 0.1 as StatusQ
-import utils 1.0
-
-Item {
-    id: root
-    height: 20
-    width: childrenRect.width
-
-    property int imageMargin: 4
-    signal addEmojiClicked()
-    signal hoverChanged(bool hovered)
-    signal toggleReaction(int emojiID)
-    signal setMessageActive(string messageId, bool active)
-
-    property var store
-    property bool isCurrentUser
-    property var emojiReactionsModel
-    property bool isMessageActive
-
-    Row {
-        spacing: root.imageMargin
-
-        Repeater {
-            id: reactionRepeater
-            width: childrenRect.width
-            model: root.emojiReactionsModel
-
-            Rectangle {
-                property bool isHovered: false
-
-                id: emojiContainer
-                width: emojiImage.width + emojiCount.width + (root.imageMargin * 2) +  + 8
-                height: 20
-                radius: 10
-                color: model.didIReactWithThisEmoji ?
-                           (isHovered ? Style.current.emojiReactionActiveBackgroundHovered : Style.current.secondaryBackground) :
-                           (isHovered ? Style.current.emojiReactionBackgroundHovered : Style.current.emojiReactionBackground)
-
-                StatusQ.StatusToolTip {
-                    visible: mouseArea.containsMouse
-                    maxWidth: 400
-                    text: root.store.showReactionAuthors(model.jsonArrayOfUsersReactedWithThisEmoji, model.emojiId)
-                }
-
-                // Rounded corner to cover one corner
-                Rectangle {
-                    color: parent.color
-                    width: 10
-                    height: 10
-                    anchors.top: parent.top
-                    anchors.left: !root.isCurrentUser? parent.left : undefined
-                    anchors.leftMargin: 0
-                    anchors.right: !root.isCurrentUser? undefined : parent.right
-                    anchors.rightMargin: 0
-                    radius: 2
-                    z: -1
-                }
-
-                // This is a workaround to get a "border" around the rectangle including the weird rectangle
-                Loader {
-                    active: model.didIReactWithThisEmoji
-                    anchors.top: parent.top
-                    anchors.topMargin: -1
-                    anchors.left: parent.left
-                    anchors.leftMargin: -1
-                    z: -2
-
-                    sourceComponent: Component {
-                        Rectangle {
-                            width: emojiContainer.width + 2
-                            height: emojiContainer.height + 2
-                            radius: emojiContainer.radius
-                            color: Style.current.primary
-
-                            Rectangle {
-                                color: parent.color
-                                width: 10
-                                height: 10
-                                anchors.top: parent.top
-                                anchors.left: !root.isCurrentUser? parent.left : undefined
-                                anchors.leftMargin: 0
-                                anchors.right: !root.isCurrentUser? undefined : parent.right
-                                anchors.rightMargin: 0
-                                radius: 2
-                                z: -1
-                            }
-                        }
-                    }
-                }
-
-                SVGImage {
-                    id: emojiImage
-                    width: 15
-                    height: 15
-                    fillMode: Image.PreserveAspectFit
-                    source: {
-                        switch (model.emojiId) {
-                        case 1: return Style.svg("emojiReactions/heart")
-                        case 2: return Style.svg("emojiReactions/thumbsUp")
-                        case 3: return Style.svg("emojiReactions/thumbsDown")
-                        case 4: return Style.svg("emojiReactions/laughing")
-                        case 5: return Style.svg("emojiReactions/sad")
-                        case 6: return Style.svg("emojiReactions/angry")
-                        default: return ""
-                        }
-                    }
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.left: parent.left
-                    anchors.leftMargin: root.imageMargin
-                }
-
-                StyledText {
-                    id: emojiCount
-                    text: model.numberOfReactions
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.left: emojiImage.right
-                    anchors.leftMargin: root.imageMargin
-                    font.pixelSize: 12
-                    color: model.didIReactWithThisEmoji ? Style.current.textColorTertiary : Style.current.textColor
-                }
-
-                MouseArea {
-                    id: mouseArea
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor
-                    onEntered: {
-                        root.hoverChanged(true)
-                        emojiContainer.isHovered = true
-                    }
-                    onExited: {
-                        root.hoverChanged(false)
-                        emojiContainer.isHovered = false
-                    }
-                    onClicked: {
-                        toggleReaction(model.emojiId)
-                    }
-                }
-            }
-        }
-
-        Item {
-            width: addEmojiBtn.width + addEmojiBtn.anchors.leftMargin // there is more margin between the button and the emojis than between each emoji
-            height: addEmojiBtn.height
-
-            SVGImage {
-                property bool isHovered: false
-
-                id: addEmojiBtn
-                source: Style.svg("emoji")
-                width: 16.5
-                height: 16.5
-                anchors.left: parent.left
-                anchors.leftMargin: 2.5
-
-            }
-
-            ColorOverlay {
-                anchors.fill: addEmojiBtn
-                antialiasing: true
-                source: addEmojiBtn
-                color: addEmojiBtn.isHovered ? Style.current.primary : Style.current.secondaryText
-            }
-
-            MouseArea {
-                anchors.fill: addEmojiBtn
-                cursorShape: Qt.PointingHandCursor
-                hoverEnabled: true
-                onEntered: addEmojiBtn.isHovered = true
-                onExited: addEmojiBtn.isHovered = false
-                onClicked: {
-                    if (typeof root.isMessageActive !== "undefined") {
-                        setMessageActive(messageId, true);
-                    }
-                    root.addEmojiClicked();
-                }
-            }
-
-            StatusQ.StatusToolTip {
-              visible: addEmojiBtn.isHovered
-              text: qsTr("Add reaction")
-            }
-        }
-    }
-}
diff --git a/ui/imports/shared/popups/ContactVerificationRequestPopup.qml b/ui/imports/shared/popups/ContactVerificationRequestPopup.qml
index 2367d1b2fd..e336bc962d 100644
--- a/ui/imports/shared/popups/ContactVerificationRequestPopup.qml
+++ b/ui/imports/shared/popups/ContactVerificationRequestPopup.qml
@@ -63,12 +63,14 @@ StatusModal {
             id: verificationMessage
             anchors.top: description.bottom
             anchors.topMargin: Style.current.padding
+            width: parent.width
             isMessage: true
             shouldRepeatHeader: true
             messageTimestamp: root.messageTimestamp
+            senderId: root.senderPublicKey
             senderDisplayName: root.senderDisplayName
             senderIcon: root.senderIcon
-            message: root.challengeText
+            messageText: root.challengeText
             messageContentType: Constants.messageContentType.messageType
             placeholderMessage: true
         }
@@ -93,12 +95,14 @@ StatusModal {
             id: responseMessage
             visible: !!root.responseText
             anchors.top: verificationMessage.bottom
+            width: parent.width
             isMessage: true
             shouldRepeatHeader: true
             messageTimestamp: root.responseTimestamp
+            senderId: root.senderPublicKey
             senderDisplayName: userProfile.name
             senderIcon: userProfile.icon
-            message: root.responseText
+            messageText: root.responseText
             messageContentType: Constants.messageContentType.messageType
             placeholderMessage: true
         }
diff --git a/ui/imports/shared/qmldir b/ui/imports/shared/qmldir
index 186cb844ce..085a8629e7 100644
--- a/ui/imports/shared/qmldir
+++ b/ui/imports/shared/qmldir
@@ -4,4 +4,3 @@ DelegateModelGeneralized 1.0 DelegateModelGeneralized.qml
 LoadingAnimation 1.0 LoadingAnimation.qml
 MacTrafficLights 1.0 MacTrafficLights.qml
 NumberPolyFill 1.0 polyfill.number.toLocaleString.js
-XSS 1.0 xss.js
diff --git a/ui/imports/shared/status/StatusChatInput.qml b/ui/imports/shared/status/StatusChatInput.qml
index 8a06107fba..5dc670b4f3 100644
--- a/ui/imports/shared/status/StatusChatInput.qml
+++ b/ui/imports/shared/status/StatusChatInput.qml
@@ -24,6 +24,7 @@ import StatusQ.Controls 0.1 as StatusQ
 
 Rectangle {
     id: control
+
     signal sendTransactionCommandButtonClicked()
     signal receiveTransactionCommandButtonClicked()
     signal stickerSelected(string hashId, string packId)
@@ -53,19 +54,18 @@ Rectangle {
     property var stickerPackList
 
     property int extraHeightFactor: calculateExtraHeightFactor()
-    property int messageLimit: control.isStatusUpdateInput ? 300 : 2000
-    property int messageLimitVisible: control.isStatusUpdateInput ? 50 : 200
+    property int messageLimit: 2000
+    property int messageLimitVisible: 200
 
     property int chatType
 
     property string chatInputPlaceholder: qsTr("Message")
 
     property alias textInput: messageInputField
-    property bool isStatusUpdateInput: chatType === Constants.chatType.profile
 
     property var fileUrls: []
 
-    property var imageErrorMessageLocation: StatusChatInput.ImageErrorMessageLocation.Top
+    property var imageErrorMessageLocation: StatusChatInput.ImageErrorMessageLocation.Top // TODO: Remove this proeprty?
 
     property var messageContextMenu
 
@@ -77,20 +77,50 @@ Rectangle {
     }
 
     objectName: "statusChatInput"
-    height: {
-        if (extendedArea.visible) {
-            return messageInput.height + extendedArea.height + (control.isStatusUpdateInput ? 0 : Style.current.bigPadding)
-        }
-        if (messageInput.height > messageInput.defaultInputFieldHeight) {
-            if (messageInput.height >= messageInput.maxInputFieldHeight) {
-                return messageInput.maxInputFieldHeight + (control.isStatusUpdateInput ? 0 : Style.current.bigPadding)
+    function parseMessage(message) {
+        let mentionsMap = new Map()
+        let index = 0
+        while (true) {
+            index = message.indexOf("<a href=", index)
+            if (index < 0) {
+                break
             }
-            return messageInput.height + (control.isStatusUpdateInput ? 0 : Style.current.bigPadding)
+            const startIndex = index
+            const endIndex = message.indexOf("</a>", index) + 4
+            if (endIndex < 0) {
+                index += 8 // "<a href="
+                continue
+            }
+            const addrIndex = message.indexOf("0x", index + 8)
+            if (addrIndex < 0) {
+                index += 8 // "<a href="
+                continue
+            }
+            const addrEndIndex = message.indexOf("\"", addrIndex)
+            if (addrEndIndex < 0) {
+                index += 8 // "<a href="
+                continue
+            }
+            const mentionLink = message.substring(startIndex, endIndex)
+            const linkTag = message.substring(index, endIndex)
+            const linkText = linkTag.replace(/(<([^>]+)>)/ig,"").trim()
+            const atSymbol = linkText.startsWith("@") ? '' : '@'
+            const mentionTag = Constants.mentionSpanTag + atSymbol + linkText + '</span> '
+            mentionsMap.set(mentionLink, mentionTag)
+            index += linkTag.length
         }
-        return control.isStatusUpdateInput ? 56 : 64
+
+        let text = message;
+
+        for (let [key, value] of mentionsMap)
+            text = text.replace(new RegExp(key, 'g'), value)
+
+        textInput.text = text
+        textInput.cursorPosition = textInput.length
     }
-    anchors.left: parent.left
-    anchors.right: parent.right
+
+    implicitWidth: layout.implicitWidth + layout.anchors.leftMargin + layout.anchors.rightMargin
+    implicitHeight: layout.implicitHeight + layout.anchors.topMargin + layout.anchors.bottomMargin
 
     color: Style.current.transparent
 
@@ -185,10 +215,6 @@ Rectangle {
                 event.accepted = true;
                 return
             }
-
-            if (control.isStatusUpdateInput) {
-                return // Status update require the send button to be clicked
-            }
             if (messageInputField.length < messageLimit) {
                 control.sendMessage(event)
                 control.hideExtendedArea();
@@ -271,7 +297,7 @@ Rectangle {
             let lastCursorPosition = suggestionsBox.suggestionFilter.cursorPosition;
             let lastAtPosition = suggestionsBox.suggestionFilter.lastAtPosition;
             if (aliasName.toLowerCase() === suggestionsBox.suggestionsModel.get(suggestionsBox.listView.currentIndex).name.toLowerCase()
-                && (event.key !== Qt.Key_Backspace) && (event.key !== Qt.Key_Delete)) {
+                    && (event.key !== Qt.Key_Backspace) && (event.key !== Qt.Key_Delete)) {
                 insertMention(aliasName, lastAtPosition, lastCursorPosition);
             } else if (event.key === Qt.Key_Space) {
                 var plainTextToReplace = messageInputField.getText(lastAtPosition, lastCursorPosition);
@@ -296,30 +322,30 @@ Rectangle {
     }
 
     function unwrapSelection(unwrapWith, selectedTextWithFormationChars) {
-            if (messageInputField.selectionStart - messageInputField.selectionEnd === 0) return
+        if (messageInputField.selectionStart - messageInputField.selectionEnd === 0) return
 
-            // calulate the new selection start and end positions
-            var newSelectionStart = messageInputField.selectionStart -  unwrapWith.length
-            var newSelectionEnd = messageInputField.selectionEnd-messageInputField.selectionStart + newSelectionStart
+        // calulate the new selection start and end positions
+        var newSelectionStart = messageInputField.selectionStart -  unwrapWith.length
+        var newSelectionEnd = messageInputField.selectionEnd-messageInputField.selectionStart + newSelectionStart
 
-            selectedTextWithFormationChars = selectedTextWithFormationChars.trim()
-            // Check if the selectedTextWithFormationChars has formation chars and if so, calculate how many so we can adapt the start and end pos
-            const selectTextDiff = (selectedTextWithFormationChars.length - messageInputField.selectedText.length) / 2
+        selectedTextWithFormationChars = selectedTextWithFormationChars.trim()
+        // Check if the selectedTextWithFormationChars has formation chars and if so, calculate how many so we can adapt the start and end pos
+        const selectTextDiff = (selectedTextWithFormationChars.length - messageInputField.selectedText.length) / 2
 
-            // Remove the deselected option from the before and after the selected text
-            const prefixChars = messageInputField.getText((messageInputField.selectionStart - selectTextDiff), messageInputField.selectionStart)
-            const updatedPrefixChars = prefixChars.replace(unwrapWith, '')
-            const postfixChars = messageInputField.getText(messageInputField.selectionEnd, (messageInputField.selectionEnd + selectTextDiff))
-            const updatedPostfixChars = postfixChars.replace(unwrapWith, '')
+        // Remove the deselected option from the before and after the selected text
+        const prefixChars = messageInputField.getText((messageInputField.selectionStart - selectTextDiff), messageInputField.selectionStart)
+        const updatedPrefixChars = prefixChars.replace(unwrapWith, '')
+        const postfixChars = messageInputField.getText(messageInputField.selectionEnd, (messageInputField.selectionEnd + selectTextDiff))
+        const updatedPostfixChars = postfixChars.replace(unwrapWith, '')
 
-            // Create updated selected string with pre and post formatting characters
-            const updatedSelectedStringWithFormatChars = updatedPrefixChars + messageInputField.selectedText + updatedPostfixChars
+        // Create updated selected string with pre and post formatting characters
+        const updatedSelectedStringWithFormatChars = updatedPrefixChars + messageInputField.selectedText + updatedPostfixChars
 
-            messageInputField.remove(messageInputField.selectionStart - selectTextDiff, messageInputField.selectionEnd + selectTextDiff)
+        messageInputField.remove(messageInputField.selectionStart - selectTextDiff, messageInputField.selectionEnd + selectTextDiff)
 
-            insertInTextInput(messageInputField.selectionStart, updatedSelectedStringWithFormatChars)
+        insertInTextInput(messageInputField.selectionStart, updatedSelectedStringWithFormatChars)
 
-            messageInputField.select(newSelectionStart, newSelectionEnd)
+        messageInputField.select(newSelectionStart, newSelectionEnd)
     }
 
     function getPlainText() {
@@ -408,7 +434,7 @@ Rectangle {
         id: dummyContactList
         model: control.usersStore ? control.usersStore.usersModel : []
         delegate: Item {
-            property string contactName: model.name
+            property string contactName: model.name || ""
         }
     }
 
@@ -653,7 +679,6 @@ Rectangle {
         ]
         onAccepted: {
             imageBtn.highlighted = false
-            imageBtn2.highlighted = false
             let validImages = validateImages(imageDialog.fileUrls)
             if (validImages.length > 0) {
                 control.showImageArea(validImages)
@@ -662,7 +687,6 @@ Rectangle {
         }
         onRejected: {
             imageBtn.highlighted = false
-            imageBtn2.highlighted = false
         }
     }
 
@@ -735,7 +759,7 @@ Rectangle {
         id: gifPopup
         width: 360
         height: 440
-        x: parent.width - width - Style.current.halfPadding
+        x: control.width - width - Style.current.halfPadding
         y: -height
         gifSelected: function (event, url) {
             messageInputField.text += "\n" + url
@@ -752,7 +776,7 @@ Rectangle {
 
     StatusStickersPopup {
         id: stickersPopup
-        x: parent.width - width - Style.current.halfPadding
+        x: control.width - width - Style.current.halfPadding
         y: -height
         store: control.store
         enabled: !!control.recentStickers && !!control.stickerPackList
@@ -768,518 +792,443 @@ Rectangle {
         }
     }
 
-    StatusQ.StatusFlatRoundButton {
-        id: chatCommandsBtn
-        width: 32
-        height: 32
-        anchors.left: parent.left
-        anchors.leftMargin: 4
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 16
-        icon.name: "chat-commands"
-        type: StatusQ.StatusFlatRoundButton.Type.Tertiary
-        visible: RootStore.isWalletEnabled && !isEdit && control.chatType === Constants.chatType.oneToOne && !control.isStatusUpdateInput
-        enabled: !control.isContactBlocked
-        onClicked: {
-            chatCommandsPopup.opened ?
-                chatCommandsPopup.close() :
-                chatCommandsPopup.open()
-        }
-    }
+    RowLayout {
+        id: layout
+        anchors.fill: parent
+        spacing: 4
 
-    StatusQ.StatusFlatRoundButton {
-        id: imageBtn
-        width: 32
-        height: 32
-        anchors.left: chatCommandsBtn.visible ? chatCommandsBtn.right : parent.left
-        anchors.leftMargin: chatCommandsBtn.visible ? 2 : 4
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 16
-        icon.name: "image"
-        type: StatusQ.StatusFlatRoundButton.Type.Tertiary
-        visible: !isEdit && control.chatType !== Constants.chatType.publicChat && !control.isStatusUpdateInput
-        enabled: !control.isContactBlocked
-        onClicked: {
-            highlighted = true
-            imageDialog.open()
-        }
-    }
-
-    Rectangle {
-        id: messageInput
-        enabled: !control.isContactBlocked
-        property int maxInputFieldHeight: control.isStatusUpdateInput ? 124 : 112
-        property int defaultInputFieldHeight: control.isStatusUpdateInput ? 56 : 40
-        anchors.left: imageBtn.visible ? imageBtn.right : parent.left
-        anchors.leftMargin: imageBtn.visible ? 5 : Style.current.smallPadding
-        anchors.top: control.isStatusUpdateInput ? parent.top : undefined
-        anchors.bottom: !control.isStatusUpdateInput ? parent.bottom : undefined
-        anchors.bottomMargin: control.isStatusUpdateInput ? 0 : 12
-        anchors.right: unblockBtn.visible ? unblockBtn.left : parent.right
-        anchors.rightMargin: Style.current.smallPadding
-        height: {
-            if (messageInputField.implicitHeight <= messageInput.defaultInputFieldHeight) {
-                return messageInput.defaultInputFieldHeight
+        StatusQ.StatusFlatRoundButton {
+            id: chatCommandsBtn
+            Layout.preferredWidth: 32
+            Layout.preferredHeight: 32
+            Layout.alignment: Qt.AlignBottom
+            Layout.bottomMargin: 4
+            icon.name: "chat-commands"
+            type: StatusQ.StatusFlatRoundButton.Type.Tertiary
+            visible: RootStore.isWalletEnabled && !isEdit && control.chatType === Constants.chatType.oneToOne
+            enabled: !control.isContactBlocked
+            onClicked: {
+                chatCommandsPopup.opened ?
+                            chatCommandsPopup.close() :
+                            chatCommandsPopup.open()
             }
-            if (messageInputField.implicitHeight >= messageInput.maxInputFieldHeight) {
-                return messageInput.maxInputFieldHeight
-            }
-            return messageInputField.implicitHeight
         }
 
-        color: isEdit ? Theme.palette.statusChatInput.secondaryBackgroundColor : Style.current.inputBackground
-        radius: control.isStatusUpdateInput ? 36 :
-                                              height > defaultInputFieldHeight + 1 || extendedArea.visible ? 16 : 32
-
-        ColumnLayout {
-            id: validators
-            anchors.bottom: control.imageErrorMessageLocation === StatusChatInput.ImageErrorMessageLocation.Top ? extendedArea.top : undefined
-            anchors.bottomMargin: control.imageErrorMessageLocation === StatusChatInput.ImageErrorMessageLocation.Top ? -4 : undefined
-            anchors.top: control.imageErrorMessageLocation === StatusChatInput.ImageErrorMessageLocation.Bottom ? extendedArea.bottom : undefined
-            anchors.topMargin: control.imageErrorMessageLocation === StatusChatInput.ImageErrorMessageLocation.Bottom ? (isImage ? -4 : 4) : undefined
-            anchors.horizontalCenter: parent.horizontalCenter
-            width: parent.width
-            z: 1
-            StatusChatImageExtensionValidator {
-                Layout.alignment: Qt.AlignHCenter
-            }
-            StatusChatImageSizeValidator {
-                Layout.alignment: Qt.AlignHCenter
-            }
-            StatusChatImageQtyValidator {
-                Layout.alignment: Qt.AlignHCenter
+        StatusQ.StatusFlatRoundButton {
+            id: imageBtn
+            Layout.preferredWidth: 32
+            Layout.preferredHeight: 32
+            Layout.alignment: Qt.AlignBottom
+            Layout.bottomMargin: 4
+            icon.name: "image"
+            type: StatusQ.StatusFlatRoundButton.Type.Tertiary
+            visible: !isEdit && control.chatType !== Constants.chatType.publicChat
+            enabled: !control.isContactBlocked
+            onClicked: {
+                highlighted = true
+                imageDialog.open()
             }
         }
 
         Rectangle {
-            id: extendedArea
-            visible: isImage || isReply
-            height: {
-                if (visible) {
-                    if (isImage) {
-                        return imageArea.height
-                    }
+            id: messageInput
 
-                    if (isReply) {
-                        return replyArea.height + replyArea.anchors.topMargin
-                    }
+            readonly property int defaultInputFieldHeight: 40
+
+            Layout.fillWidth: true
+
+
+            implicitHeight: inputLayout.implicitHeight + inputLayout.anchors.topMargin + inputLayout.anchors.bottomMargin
+            implicitWidth: inputLayout.implicitWidth + inputLayout.anchors.leftMargin + inputLayout.anchors.rightMargin
+
+            enabled: !control.isContactBlocked
+            color: isEdit ? Theme.palette.statusChatInput.secondaryBackgroundColor : Style.current.inputBackground
+            radius: 20
+
+            ColumnLayout {
+                id: validators
+                anchors.bottom: control.imageErrorMessageLocation === StatusChatInput.ImageErrorMessageLocation.Top ? parent.top : undefined
+                anchors.bottomMargin: control.imageErrorMessageLocation === StatusChatInput.ImageErrorMessageLocation.Top ? -4 : undefined
+                anchors.top: control.imageErrorMessageLocation === StatusChatInput.ImageErrorMessageLocation.Bottom ? parent.bottom : undefined
+                anchors.topMargin: control.imageErrorMessageLocation === StatusChatInput.ImageErrorMessageLocation.Bottom ? (isImage ? -4 : 4) : undefined
+                anchors.horizontalCenter: parent.horizontalCenter
+                width: parent.width
+                z: 1
+
+                StatusChatImageExtensionValidator {
+                    Layout.alignment: Qt.AlignHCenter
+                }
+                StatusChatImageSizeValidator {
+                    Layout.alignment: Qt.AlignHCenter
+                }
+                StatusChatImageQtyValidator {
+                    Layout.alignment: Qt.AlignHCenter
                 }
-                return 0
             }
-            anchors.left: messageInput.left
-            anchors.right: messageInput.right
-            anchors.bottom: control.isStatusUpdateInput ? undefined : messageInput.top
-            anchors.top: control.isStatusUpdateInput ? messageInput.bottom : undefined
-            anchors.topMargin: control.isStatusUpdateInput ? -Style.current.halfPadding : 0
-            color: isEdit ? Style.current.secondaryInputBackground : Style.current.inputBackground
-            radius: control.isStatusUpdateInput ? 36 : 16
 
             Rectangle {
+                // Bottom right corner has different radius
                 color: parent.color
+                anchors.bottom: parent.bottom
                 anchors.right: parent.right
-                anchors.left: parent.left
-                height: control.isStatusUpdateInput ? 64 : 30
-                anchors.top: control.isStatusUpdateInput ? parent.top : undefined
-                anchors.topMargin: control.isStatusUpdateInput ? -24 : 0
-                anchors.bottom: control.isStatusUpdateInput ? undefined : parent.bottom
-                anchors.bottomMargin: control.isStatusUpdateInput ? 0 : -height/2
+                height: parent.height / 2
+                width: 32
+                radius: Style.current.radius
             }
 
-            StatusChatInputImageArea {
-                id: imageArea
-                anchors.left: parent.left
-                anchors.leftMargin: control.isStatusUpdateInput ? profileImage.width + Style.current.padding : Style.current.halfPadding
-                anchors.right: parent.right
-                anchors.rightMargin: control.isStatusUpdateInput ? actions.width + 2* Style.current.padding : Style.current.halfPadding
-                anchors.top: parent.top
-                anchors.topMargin: Style.current.halfPadding
-                visible: isImage
-                width: messageInputField.width - actions.width
-                onImageClicked: Global.openImagePopup(chatImage, messageContextMenu)
-                onImageRemoved: {
-                    if (control.fileUrls.length > index && control.fileUrls[index]) {
-                        control.fileUrls.splice(index, 1)
+            ColumnLayout {
+                id: inputLayout
+
+                anchors.fill: parent
+                spacing: 4
+
+                StatusChatInputReplyArea {
+                    id: replyArea
+                    visible: isReply
+                    Layout.fillWidth: true
+                    Layout.margins: 2
+                    onCloseButtonClicked: {
+                        isReply = false
                     }
-                    isImage = control.fileUrls.length > 0
-                    validateImages(control.fileUrls)
                 }
-            }
 
-            StatusChatInputReplyArea {
-                id: replyArea
-                visible: isReply
-                anchors.left: parent.left
-                anchors.leftMargin: 2
-                anchors.right: parent.right
-                anchors.rightMargin: 2
-                anchors.top: parent.top
-                anchors.topMargin: 2
-                // Not Refactored Yet
-//                stickerData: sticker
-                onCloseButtonClicked: {
-                    isReply = false
+                StatusChatInputImageArea {
+                    id: imageArea
+                    Layout.fillWidth: true
+                    Layout.leftMargin: Style.current.halfPadding
+                    Layout.rightMargin: Style.current.halfPadding
+                    visible: isImage
+                    onImageClicked: Global.openImagePopup(chatImage, messageContextMenu)
+                    onImageRemoved: {
+                        if (control.fileUrls.length > index && control.fileUrls[index]) {
+                            control.fileUrls.splice(index, 1)
+                        }
+                        isImage = control.fileUrls.length > 0
+                        validateImages(control.fileUrls)
+                    }
                 }
-            }
-        }
 
-        StatusSmartIdenticon {
-            id: profileImage
-            anchors.left: parent.left
-            anchors.leftMargin: Style.current.smallPadding
-            anchors.top: parent.top
-            anchors.topMargin: Style.current.halfPadding
-            image.source: userProfile.icon
-            visible: control.isStatusUpdateInput
-        }
+                RowLayout {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    spacing: Style.current.radius
 
-        StatusScrollView {
-            id: scrollView
-            padding: 0
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            anchors.left: profileImage.visible ? profileImage.right : parent.left
-            anchors.leftMargin: Style.current.smallPadding
-            anchors.right: actions.left
-            anchors.rightMargin: Style.current.halfPadding
-            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+                    StatusScrollView {
+                        id: inputScrollView
 
-            TextArea {
-                id: messageInputField                
-                objectName: "messageInputField"
-                property var lastClick: 0
-                property int cursorWhenPressed: 0
-                width: scrollView.availableWidth
-                textFormat: Text.RichText
-                font.pixelSize: 15
-                font.family: Style.current.fontRegular.name
-                wrapMode: TextArea.Wrap
-                placeholderText: control.chatInputPlaceholder
-                placeholderTextColor: Style.current.secondaryText
-                selectByMouse: true
-                color: isEdit ? Theme.palette.directColor1 : Style.current.textColor
-                topPadding: control.isStatusUpdateInput ? 18 : Style.current.smallPadding
-                bottomPadding: control.isStatusUpdateInput ? 14 : 12
-                Keys.onPressed: {
-                    keyEvent = event;
-                    onKeyPress(event)
-                    cursorWhenPressed = cursorPosition;
-                }
-                Keys.onReleased: onRelease(event) // gives much more up to date cursorPosition
-                Keys.onShortcutOverride: event.accepted = isUploadFilePressed(event)
-                leftPadding: 0
-                selectionColor: Style.current.primarySelectionColor
-                persistentSelection: true
-                property var keyEvent
-                onCursorPositionChanged: {
-                    if (mentionsPos.length > 0) {
-                        for (var i = 0; i < mentionsPos.length; i++) {
-                            if ((messageInputField.cursorPosition === (mentionsPos[i].leftIndex + 1)) && (keyEvent.key === Qt.Key_Right)) {
-                                messageInputField.cursorPosition = mentionsPos[i].rightIndex;
-                            } else if (messageInputField.cursorPosition === (mentionsPos[i].rightIndex - 1)) {
-                                if (keyEvent.key === Qt.Key_Left) {
-                                    messageInputField.cursorPosition = mentionsPos[i].leftIndex;
-                                } else if ((keyEvent.key === Qt.Key_Backspace) || (keyEvent.key === Qt.Key_Delete)) {
-                                    messageInputField.remove(mentionsPos[i].rightIndex, mentionsPos[i].leftIndex);
-                                    mentionsPos.pop(i);
+                        Layout.fillWidth: true
+                        Layout.fillHeight: true
+                        Layout.leftMargin: 12
+                        Layout.rightMargin: 12
+                        Layout.maximumHeight: 112
+                        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+
+                        padding: 0
+
+                        TextArea {
+                            id: messageInputField
+                            objectName: "messageInputField"
+
+                            property var lastClick: 0
+                            property int cursorWhenPressed: 0
+
+                            width: inputScrollView.availableWidth
+
+                            textFormat: Text.RichText
+                            font.pixelSize: 15
+                            font.family: Style.current.fontRegular.name
+                            wrapMode: TextArea.Wrap
+                            placeholderText: control.chatInputPlaceholder
+                            placeholderTextColor: Style.current.secondaryText
+                            selectByMouse: true
+                            color: isEdit ? Theme.palette.directColor1 : Style.current.textColor
+                            topPadding: 9
+                            bottomPadding: 9
+                            leftPadding: 0
+                            padding: 0
+                            Keys.onPressed: {
+                                keyEvent = event;
+                                onKeyPress(event)
+                                cursorWhenPressed = cursorPosition;
+                            }
+                            Keys.onReleased: onRelease(event) // gives much more up to date cursorPosition
+                            Keys.onShortcutOverride: event.accepted = isUploadFilePressed(event)
+                            selectionColor: Style.current.primarySelectionColor
+                            persistentSelection: true
+                            property var keyEvent
+
+                            Component.onDestruction: {
+                                // NOTE: Without losing focus the app crashes on apply/cancel message editing.
+                                control.forceActiveFocus();
+                            }
+
+                            onCursorPositionChanged: {
+                                if (mentionsPos.length > 0) {
+                                    for (var i = 0; i < mentionsPos.length; i++) {
+                                        if ((messageInputField.cursorPosition === (mentionsPos[i].leftIndex + 1)) && (keyEvent.key === Qt.Key_Right)) {
+                                            messageInputField.cursorPosition = mentionsPos[i].rightIndex;
+                                        } else if (messageInputField.cursorPosition === (mentionsPos[i].rightIndex - 1)) {
+                                            if (keyEvent.key === Qt.Key_Left) {
+                                                messageInputField.cursorPosition = mentionsPos[i].leftIndex;
+                                            } else if ((keyEvent.key === Qt.Key_Backspace) || (keyEvent.key === Qt.Key_Delete)) {
+                                                messageInputField.remove(mentionsPos[i].rightIndex, mentionsPos[i].leftIndex);
+                                                mentionsPos.pop(i);
+                                            }
+                                        } else if (((messageInputField.cursorPosition > mentionsPos[i].leftIndex) &&
+                                                    (messageInputField.cursorPosition  < mentionsPos[i].rightIndex)) &&
+                                                   ((keyEvent.key === Qt.Key_Left) && ((keyEvent.modifiers & Qt.AltModifier) ||
+                                                                                       (keyEvent.modifiers & Qt.ControlModifier)))) {
+                                            messageInputField.cursorPosition = mentionsPos[i].leftIndex;
+                                        } else if ((keyEvent.key === Qt.Key_Up) || (keyEvent.key === Qt.Key_Down)) {
+                                            if (messageInputField.cursorPosition >= mentionsPos[i].leftIndex &&
+                                                    messageInputField.cursorPosition <= (((mentionsPos[i].leftIndex + mentionsPos[i].rightIndex)/2))) {
+                                                messageInputField.cursorPosition = mentionsPos[i].leftIndex;
+                                            } else if (messageInputField.cursorPosition <= mentionsPos[i].rightIndex &&
+                                                       messageInputField.cursorPosition > (((mentionsPos[i].leftIndex + mentionsPos[i].rightIndex)/2))) {
+                                                messageInputField.cursorPosition = mentionsPos[i].rightIndex;
+                                            }
+                                        }
+                                    }
                                 }
-                            } else if (((messageInputField.cursorPosition > mentionsPos[i].leftIndex) &&
-                                        (messageInputField.cursorPosition  < mentionsPos[i].rightIndex)) &&
-                                       ((keyEvent.key === Qt.Key_Left) && ((keyEvent.modifiers & Qt.AltModifier) ||
-                                                                           (keyEvent.modifiers & Qt.ControlModifier)))) {
-                                messageInputField.cursorPosition = mentionsPos[i].leftIndex;
-                            } else if ((keyEvent.key === Qt.Key_Up) || (keyEvent.key === Qt.Key_Down)) {
-                                if (messageInputField.cursorPosition >= mentionsPos[i].leftIndex &&
-                                    messageInputField.cursorPosition <= (((mentionsPos[i].leftIndex + mentionsPos[i].rightIndex)/2))) {
-                                    messageInputField.cursorPosition = mentionsPos[i].leftIndex;
-                                  } else if (messageInputField.cursorPosition <= mentionsPos[i].rightIndex &&
-                                           messageInputField.cursorPosition > (((mentionsPos[i].leftIndex + mentionsPos[i].rightIndex)/2))) {
-                                    messageInputField.cursorPosition = mentionsPos[i].rightIndex;
+                                if ((mentionsPos.length > 0) && (cursorPosition < length) && getText(cursorPosition, length).includes("@")
+                                        && (keyEvent.key !== Qt.Key_Right) && (keyEvent.key !== Qt.Key_Left) && (keyEvent.key !== Qt.Key_Up)
+                                        && (keyEvent.key !== Qt.Key_Down)) {
+                                    var unformattedText = getText(cursorPosition, length);
+                                    for (var k = 0; k < mentionsPos.length; k++) {
+                                        if ((unformattedText.indexOf(mentionsPos[k].name) !== -1) && (unformattedText.indexOf(mentionsPos[k].name) !== mentionsPos[k].leftIndex)) {
+                                            mentionsPos[k].leftIndex = (cursorPosition + unformattedText.indexOf(mentionsPos[k].name) - 1);
+                                            mentionsPos[k].rightIndex = (cursorPosition + unformattedText.indexOf(mentionsPos[k].name) + mentionsPos[k].name.length);
+                                        }
+                                    }
+                                }
+                            }
+
+                            onTextChanged: {
+                                if (length <= control.messageLimit) {
+                                    var symbols = ":='xX><0O;*dB8-D#%\\";
+                                    if ((length > 1) && (symbols.indexOf(getText((cursorPosition - 2), (cursorPosition - 1))) !== -1)
+                                            && (!getText((cursorPosition - 7), cursorPosition).includes("http"))) {
+                                        const emojis = StatusQUtils.Emoji.emojiJSON.emoji_json.filter(function (emoji) {
+                                            if (emoji.aliases_ascii.includes(getText((cursorPosition - 2), cursorPosition)) ||
+                                                    emoji.aliases_ascii.includes(getText((cursorPosition - 3), cursorPosition))) {
+                                                var has2Chars = emoji.aliases_ascii.includes(getText((cursorPosition - 2), cursorPosition));
+                                                replaceWithEmoji("", getText(cursorPosition - (has2Chars ? 2 : 3), cursorPosition), emoji.unicode);
+                                            }
+                                        })
+                                    }
+                                    if (text === "") {
+                                        mentionsPos = [];
+                                    }
+                                } else {
+                                    var removeFrom = (cursorPosition < messageLimit) ? cursorWhenPressed : messageLimit;
+                                    remove(removeFrom, cursorPosition);
+                                }
+                                messageLengthLimit.remainingChars = (messageLimit - length);
+                            }
+
+                            onReleased: function (event) {
+                                const now = Date.now()
+                                if (messageInputField.selectedText.trim() !== "") {
+                                    // If it's a double click, just check the mouse position
+                                    // If it's a mouse select, use the start and end position average)
+                                    let x = now < messageInputField.lastClick + 500 ? x = event.x :
+                                                                                      (messageInputField.cursorRectangle.x + event.x) / 2
+                                    x -= textFormatMenu.width / 2
+
+                                    textFormatMenu.popup(x, -messageInputField.height-2)
+                                    messageInputField.forceActiveFocus();
+                                }
+                                lastClick = now
+                            }
+
+                            cursorDelegate: Rectangle {
+                                color: Theme.palette.primaryColor1
+                                implicitWidth: 2
+                                implicitHeight: 22
+                                radius: 1
+                                visible: messageInputField.cursorVisible
+
+                                SequentialAnimation on visible {
+                                    loops: Animation.Infinite
+                                    running: messageInputField.cursorVisible
+                                    PropertyAnimation { to: false; duration: 600; }
+                                    PropertyAnimation { to: true; duration: 600; }
+                                }
+                            }
+
+                            StatusSyntaxHighlighter {
+                                quickTextDocument: messageInputField.textDocument
+                            }
+                            MouseArea {
+                                anchors.fill: parent
+                                acceptedButtons: Qt.NoButton
+                                enabled: parent.hoveredLink
+                                cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.IBeamCursor
+                            }
+                            StatusTextFormatMenu {
+                                id: textFormatMenu
+
+                                StatusChatInputTextFormationAction {
+                                    wrapper: "**"
+                                    icon.name: "bold"
+                                    text: qsTr("Bold")
+                                    selectedTextWithFormationChars: RootStore.getSelectedTextWithFormationChars(messageInputField)
+                                    onActionTriggered: checked ?
+                                                           unwrapSelection(wrapper, RootStore.getSelectedTextWithFormationChars(messageInputField)) :
+                                                           wrapSelection(wrapper)
+                                }
+                                StatusChatInputTextFormationAction {
+                                    wrapper: "*"
+                                    icon.name: "italic"
+                                    text: qsTr("Italic")
+                                    selectedTextWithFormationChars: RootStore.getSelectedTextWithFormationChars(messageInputField)
+                                    checked: (surroundedBy("*") && !surroundedBy("**")) || surroundedBy("***")
+                                    onActionTriggered: checked ?
+                                                           unwrapSelection(wrapper, RootStore.getSelectedTextWithFormationChars(messageInputField)) :
+                                                           wrapSelection(wrapper)
+                                }
+                                StatusChatInputTextFormationAction {
+                                    wrapper: "~~"
+                                    icon.name: "strikethrough"
+                                    text: qsTr("Strikethrough")
+                                    selectedTextWithFormationChars: RootStore.getSelectedTextWithFormationChars(messageInputField)
+                                    onActionTriggered: checked ?
+                                                           unwrapSelection(wrapper, RootStore.getSelectedTextWithFormationChars(messageInputField)) :
+                                                           wrapSelection(wrapper)
+                                }
+                                StatusChatInputTextFormationAction {
+                                    wrapper: "`"
+                                    icon.name: "code"
+                                    text: qsTr("Code")
+                                    selectedTextWithFormationChars: RootStore.getSelectedTextWithFormationChars(messageInputField)
+                                    onActionTriggered: checked ?
+                                                           unwrapSelection(wrapper, RootStore.getSelectedTextWithFormationChars(messageInputField)) :
+                                                           wrapSelection(wrapper)
+                                }
+                                onClosed: {
+                                    messageInputField.deselect();
                                 }
                             }
                         }
+
+
+                        Shortcut {
+                            enabled: messageInputField.activeFocus
+                            sequence: StandardKey.Bold
+                            onActivated: wrapSelection("**")
+                        }
+                        Shortcut {
+                            enabled: messageInputField.activeFocus
+                            sequence: StandardKey.Italic
+                            onActivated: wrapSelection("*")
+                        }
+                        Shortcut {
+                            enabled: messageInputField.activeFocus
+                            sequence: "Ctrl+Shift+Alt+C"
+                            onActivated: wrapSelection("```")
+                        }
+                        Shortcut {
+                            enabled: messageInputField.activeFocus
+                            sequence: "Ctrl+Shift+C"
+                            onActivated: wrapSelection("`")
+                        }
+                        Shortcut {
+                            enabled: messageInputField.activeFocus
+                            sequence: "Ctrl+Alt+-"
+                            onActivated: wrapSelection("~~")
+                        }
+                        Shortcut {
+                            enabled: messageInputField.activeFocus
+                            sequence: "Ctrl+Shift+X"
+                            onActivated: wrapSelection("~~")
+                        }
+                        Shortcut {
+                            enabled: messageInputField.activeFocus
+                            sequence: "Ctrl+Meta+Space"
+                            onActivated: emojiBtn.clicked(null)
+                        }
                     }
-                    if ((mentionsPos.length > 0) && (cursorPosition < length) && getText(cursorPosition, length).includes("@")
-                         && (keyEvent.key !== Qt.Key_Right) && (keyEvent.key !== Qt.Key_Left) && (keyEvent.key !== Qt.Key_Up)
-                         && (keyEvent.key !== Qt.Key_Down)) {
-                        var unformattedText = getText(cursorPosition, length);
-                        for (var k = 0; k < mentionsPos.length; k++) {
-                            if ((unformattedText.indexOf(mentionsPos[k].name) !== -1) && (unformattedText.indexOf(mentionsPos[k].name) !== mentionsPos[k].leftIndex)) {
-                                mentionsPos[k].leftIndex = (cursorPosition + unformattedText.indexOf(mentionsPos[k].name) - 1);
-                                mentionsPos[k].rightIndex = (cursorPosition + unformattedText.indexOf(mentionsPos[k].name) + mentionsPos[k].name.length);
+
+                    Column {
+                        Layout.alignment: Qt.AlignBottom
+                        Layout.bottomMargin: 3
+
+                        StyledText {
+                            id: messageLengthLimit
+                            property int remainingChars: -1
+                            leftPadding: Style.current.halfPadding
+                            rightPadding: Style.current.halfPadding
+                            visible: ((messageInputField.length >= control.messageLimitVisible) && (messageInputField.length <= control.messageLimit))
+                            color: (remainingChars <= messageLimitVisible) ? Style.current.danger : Style.current.textColor
+                            text: visible ? remainingChars.toString() : ""
+                        }
+
+                        Row {
+                            id: actions
+                            spacing: 2
+
+                            StatusQ.StatusFlatRoundButton {
+                                id: emojiBtn
+                                objectName: "statusChatInputEmojiButton"
+                                enabled: !control.emojiPopupOpened
+                                implicitHeight: 32
+                                implicitWidth: 32
+                                icon.name: "emojis"
+                                icon.color: (hovered || highlighted) ? Theme.palette.primaryColor1
+                                                                     : Theme.palette.baseColor1
+                                type: StatusQ.StatusFlatRoundButton.Type.Tertiary
+                                color: "transparent"
+                                onClicked: {
+                                    control.emojiPopupOpened = true
+                                    togglePopup(emojiPopup, emojiBtn)
+                                    emojiPopup.x = Global.applicationWindow.width - emojiPopup.width - Style.current.halfPadding
+                                    emojiPopup.y = Global.applicationWindow.height - emojiPopup.height - control.height
+                                }
+                            }
+
+                            StatusQ.StatusFlatRoundButton {
+                                id: gifBtn
+                                implicitHeight: 32
+                                implicitWidth: 32
+                                visible: !isEdit && RootStore.isGifWidgetEnabled
+                                icon.name: "gif"
+                                icon.color: (hovered || highlighted) ? Theme.palette.primaryColor1
+                                                                     : Theme.palette.baseColor1
+                                type: StatusQ.StatusFlatRoundButton.Type.Tertiary
+                                color: "transparent"
+                                onClicked: togglePopup(gifPopup, gifBtn)
+                            }
+
+                            StatusQ.StatusFlatRoundButton {
+                                id: stickersBtn
+                                implicitHeight: 32
+                                implicitWidth: 32
+                                width: visible ? 32 : 0
+                                icon.name: "stickers"
+                                icon.color: (hovered || highlighted) ? Theme.palette.primaryColor1
+                                                                     : Theme.palette.baseColor1
+                                type: StatusQ.StatusFlatRoundButton.Type.Tertiary
+                                visible: !isEdit && emojiBtn.visible
+                                color: "transparent"
+                                onClicked: togglePopup(stickersPopup, stickersBtn)
                             }
                         }
                     }
                 }
-                onTextChanged: {
-                    if (length <= control.messageLimit) {
-                        var symbols = ":='xX><0O;*dB8-D#%\\";
-                        if ((length > 1) && (symbols.indexOf(getText((cursorPosition - 2), (cursorPosition - 1))) !== -1)
-                                && (!getText((cursorPosition - 7), cursorPosition).includes("http"))) {
-                            const emojis = StatusQUtils.Emoji.emojiJSON.emoji_json.filter(function (emoji) {
-                                if (emoji.aliases_ascii.includes(getText((cursorPosition - 2), cursorPosition)) ||
-                                        emoji.aliases_ascii.includes(getText((cursorPosition - 3), cursorPosition))) {
-                                    var has2Chars = emoji.aliases_ascii.includes(getText((cursorPosition - 2), cursorPosition));
-                                    replaceWithEmoji("", getText(cursorPosition - (has2Chars ? 2 : 3), cursorPosition), emoji.unicode);
-                                }
-                            })
-                        }
-                        if (text === "") {
-                            mentionsPos = [];
-                        }
-                    } else {
-                        var removeFrom = (cursorPosition < messageLimit) ? cursorWhenPressed : messageLimit;
-                        remove(removeFrom, cursorPosition);
-                    }
-                    messageLengthLimit.remainingChars = (messageLimit - length);
-                }
-
-                onReleased: function (event) {
-                    const now = Date.now()
-                    if (messageInputField.selectedText.trim() !== "") {
-                        // If it's a double click, just check the mouse position
-                        // If it's a mouse select, use the start and end position average)
-                        let x = now < messageInputField.lastClick + 500 ? x = event.x :
-                                                                          (messageInputField.cursorRectangle.x + event.x) / 2
-                        x -= textFormatMenu.width / 2
-
-                        textFormatMenu.popup(x, -messageInputField.height-2)
-                        messageInputField.forceActiveFocus();
-                    }
-                    lastClick = now
-                }
-
-                StatusSyntaxHighlighter {
-                   quickTextDocument: messageInputField.textDocument
-                }
-                MouseArea {
-                    anchors.fill: parent
-                    acceptedButtons: Qt.NoButton
-                    enabled: parent.hoveredLink
-                    cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.IBeamCursor
-                }
-                StatusTextFormatMenu {
-                    id: textFormatMenu
-
-                    StatusChatInputTextFormationAction {
-                        wrapper: "**"
-                        icon.name: "bold"
-                        text: qsTr("Bold")
-                        selectedTextWithFormationChars: RootStore.getSelectedTextWithFormationChars(messageInputField)
-                        onActionTriggered: checked ?
-                                         unwrapSelection(wrapper, RootStore.getSelectedTextWithFormationChars(messageInputField)) :
-                                         wrapSelection(wrapper)
-                    }
-                    StatusChatInputTextFormationAction {
-                        wrapper: "*"
-                        icon.name: "italic"
-                        text: qsTr("Italic")
-                        selectedTextWithFormationChars: RootStore.getSelectedTextWithFormationChars(messageInputField)
-                        checked: (surroundedBy("*") && !surroundedBy("**")) || surroundedBy("***")
-                        onActionTriggered: checked ?
-                                         unwrapSelection(wrapper, RootStore.getSelectedTextWithFormationChars(messageInputField)) :
-                                         wrapSelection(wrapper)
-                    }
-                    StatusChatInputTextFormationAction {
-                        wrapper: "~~"
-                        icon.name: "strikethrough"
-                        text: qsTr("Strikethrough")
-                        selectedTextWithFormationChars: RootStore.getSelectedTextWithFormationChars(messageInputField)
-                        onActionTriggered: checked ?
-                                         unwrapSelection(wrapper, RootStore.getSelectedTextWithFormationChars(messageInputField)) :
-                                         wrapSelection(wrapper)
-                    }
-                    StatusChatInputTextFormationAction {
-                        wrapper: "`"
-                        icon.name: "code"
-                        text: qsTr("Code")
-                        selectedTextWithFormationChars: RootStore.getSelectedTextWithFormationChars(messageInputField)
-                        onActionTriggered: checked ?
-                                         unwrapSelection(wrapper, RootStore.getSelectedTextWithFormationChars(messageInputField)) :
-                                         wrapSelection(wrapper)
-                    }
-                    onClosed: {
-                        messageInputField.deselect();
-                    }
-                }
             }
-
-            Shortcut {
-                enabled: messageInputField.activeFocus
-                sequence: StandardKey.Bold
-                onActivated: wrapSelection("**")
-            }
-            Shortcut {
-                enabled: messageInputField.activeFocus
-                sequence: StandardKey.Italic
-                onActivated: wrapSelection("*")
-            }
-            Shortcut {
-                enabled: messageInputField.activeFocus
-                sequence: "Ctrl+Shift+Alt+C"
-                onActivated: wrapSelection("```")
-            }
-            Shortcut {
-                enabled: messageInputField.activeFocus
-                sequence: "Ctrl+Shift+C"
-                onActivated: wrapSelection("`")
-            }
-            Shortcut {
-                enabled: messageInputField.activeFocus
-                sequence: "Ctrl+Alt+-"
-                onActivated: wrapSelection("~~")
-            }
-            Shortcut {
-                enabled: messageInputField.activeFocus
-                sequence: "Ctrl+Shift+X"
-                onActivated: wrapSelection("~~")
-            }
-            Shortcut {
-                enabled: messageInputField.activeFocus
-                sequence: "Ctrl+Meta+Space"
-                onActivated: emojiBtn.clicked(null)
-            }
-
         }
 
-        Rectangle {
-            color: parent.color
-            anchors.bottom: parent.bottom
-            anchors.right: parent.right
-            visible: !control.isStatusUpdateInput
-            height: parent.height / 2
-            width: 32
-            radius: Style.current.radius
-        }
-
-        StyledText {
-            id: messageLengthLimit
-            property int remainingChars: -1
-            anchors.right: parent.right
-            anchors.bottom: actions.top
-            anchors.rightMargin: control.isStatusUpdateInput ? Style.current.padding : Style.current.radius
-            leftPadding: Style.current.halfPadding
-            rightPadding: Style.current.halfPadding
-            visible: ((messageInputField.length >= control.messageLimitVisible) && (messageInputField.length <= control.messageLimit))
-            color: (remainingChars <=  messageLimitVisible) ? Style.current.danger : Style.current.textColor
-            text: visible ? remainingChars.toString() : ""
-        }
-
-        Item {
-            id: actions
-            width: control.isStatusUpdateInput ?
-                       imageBtn2.width + sendBtn.anchors.leftMargin + sendBtn.width :
-                       emojiBtn.width + stickersBtn.anchors.leftMargin + stickersBtn.width
-            anchors.bottom: control.isStatusUpdateInput && extendedArea.visible ? extendedArea.bottom : parent.bottom
-            anchors.bottomMargin: control.isStatusUpdateInput ? Style.current.smallPadding+2: 4
-            anchors.right: parent.right
-            anchors.rightMargin: Style.current.radius
-            height: emojiBtn.height
-
-            StatusQ.StatusFlatRoundButton {
-                id: imageBtn2
-                implicitHeight: 32
-                implicitWidth: 32
-                anchors.right: sendBtn.left
-                anchors.rightMargin: 2
-                anchors.bottom: parent.bottom
-                icon.name: "image"
-                type: StatusQ.StatusFlatRoundButton.Type.Tertiary
-                visible: control.isStatusUpdateInput
-
-                onClicked: {
-                    highlighted = true
-                    imageDialog.open()
-                }
-            }
-
-            StatusQ.StatusFlatButton {
-                id: sendBtn
-                icon.name: "send"
-                text: qsTr("Send")
-                size: StatusQ.StatusBaseButton.Size.Small
-                anchors.right: parent.right
-                anchors.rightMargin: Style.current.halfPadding
-                anchors.verticalCenter: parent.verticalCenter
-                visible: imageBtn2.visible
-                enabled: (globalUtils.plainText(StatusQUtils.Emoji.deparse(messageInputField.text)).length > 0 || isImage) && messageInputField.length < messageLimit
-                onClicked: function (event) {
-                    control.sendMessage(event)
-                    control.hideExtendedArea();
-                }
-            }
-
-            StatusQ.StatusFlatRoundButton {
-                id: emojiBtn
-                objectName: "statusChatInputEmojiButton"
-                enabled: !control.emojiPopupOpened
-                implicitHeight: 32
-                implicitWidth: 32
-                anchors.right: stickersBtn.left
-                anchors.rightMargin: 2
-                anchors.bottom: parent.bottom
-                visible: !imageBtn2.visible
-                icon.name: "emojis"
-                type: StatusQ.StatusFlatRoundButton.Type.Tertiary
-                color: "transparent"
-
-                icon.color: (hovered || highlighted) ? Theme.palette.primaryColor1
-                                                     : Theme.palette.baseColor1
-
-                onClicked: {
-                    control.emojiPopupOpened = true
-                    togglePopup(emojiPopup, emojiBtn)
-                    emojiPopup.x = Global.applicationWindow.width - emojiPopup.width - Style.current.halfPadding
-                    emojiPopup.y = Global.applicationWindow.height - emojiPopup.height - control.height
-                }
-            }
-
-            StatusQ.StatusFlatRoundButton {
-                id: gifBtn
-                implicitHeight: 32
-                implicitWidth: 32
-                anchors.left: stickersBtn.right
-                anchors.leftMargin: 2
-                anchors.bottom: parent.bottom
-                visible: !isEdit && RootStore.isGifWidgetEnabled
-                icon.name: "gif"
-                type: StatusQ.StatusFlatRoundButton.Type.Tertiary
-                color: "transparent"
-
-                icon.color: (hovered || highlighted) ? Theme.palette.primaryColor1
-                                                     : Theme.palette.baseColor1
-
-                onClicked: togglePopup(gifPopup, gifBtn)
-            }
-
-            StatusQ.StatusFlatRoundButton {
-                id: stickersBtn
-                implicitHeight: 32
-                implicitWidth: 32
-                width: visible ? 32 : 0
-                anchors.left: parent.left
-                anchors.bottom: parent.bottom
-                icon.name: "stickers"
-                type: StatusQ.StatusFlatRoundButton.Type.Tertiary
-                visible: !isEdit && emojiBtn.visible
-                color: "transparent"
-                icon.color: (hovered || highlighted) ? Theme.palette.primaryColor1
-                                                     : Theme.palette.baseColor1
-
-                onClicked: togglePopup(stickersPopup, stickersBtn)
+        StatusQ.StatusButton {
+            id: unblockBtn
+            Layout.alignment: Qt.AlignBottom
+            Layout.bottomMargin: 4
+            visible: control.isContactBlocked
+            text: qsTr("Unblock")
+            type: StatusQ.StatusBaseButton.Type.Danger
+            onClicked: function (event) {
+                control.unblockChat()
             }
         }
     }
 
-    StatusQ.StatusButton {
-        id: unblockBtn
-        visible: control.isContactBlocked
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.halfPadding
-        anchors.bottom: messageInput.bottom
-        text: qsTr("Unblock")
-        type: StatusQ.StatusBaseButton.Type.Danger
-        onClicked: function (event) {
-            control.unblockChat()
-        }
-    }
 }
diff --git a/ui/imports/shared/status/StatusChatInputReplyArea.qml b/ui/imports/shared/status/StatusChatInputReplyArea.qml
index 5436d8162e..8d43ce8d11 100644
--- a/ui/imports/shared/status/StatusChatInputReplyArea.qml
+++ b/ui/imports/shared/status/StatusChatInputReplyArea.qml
@@ -10,10 +10,12 @@ import StatusQ.Core.Utils 0.1 as StatusQUtils
 
 Rectangle {
     id: root
-    height: (root.contentType === Constants.messageContentType.imageType) ?
-                replyToUsername.height + imageThumbnail.height + Style.current.padding :
-                (root.contentType === Constants.messageContentType.stickerType) ?
-                    replyToUsername.height + stickerThumbnail.height + Style.current.padding  : 50
+    implicitHeight: (root.contentType === Constants.messageContentType.imageType)
+                    ? replyToUsername.height + imageThumbnail.height + Style.current.padding
+                    : (root.contentType === Constants.messageContentType.stickerType)
+                      ? replyToUsername.height + stickerThumbnail.height + Style.current.padding
+                      : 50
+
     color: Style.current.replyBackground
     radius: 16
     clip: true
@@ -61,7 +63,7 @@ Rectangle {
 
         StyledText {
             id: replyText
-            text: Utils.getMessageWithStyle(StatusQUtils.Emoji.parse(Utils.linkifyAndXSS(message)), false)
+            text: StatusQUtils.Utils.getMessageWithStyle(StatusQUtils.Emoji.parse(StatusQUtils.Utils.linkifyAndXSS(message)), false)
             anchors.fill: parent
             elide: Text.ElideRight
             font.pixelSize: 13
diff --git a/ui/imports/shared/status/StatusStickersPopup.qml b/ui/imports/shared/status/StatusStickersPopup.qml
index 763d2721ab..435e9787a5 100644
--- a/ui/imports/shared/status/StatusStickersPopup.qml
+++ b/ui/imports/shared/status/StatusStickersPopup.qml
@@ -233,7 +233,7 @@ Popup {
 
                 RowLayout {
                     id: stickersRowLayout
-                    width: scrollView.availableWidth
+                    width: inputScrollView.availableWidth
                     spacing: Style.current.padding
 
                     Repeater {
diff --git a/ui/imports/shared/views/ProfileView.qml b/ui/imports/shared/views/ProfileView.qml
index 61eff8a5fa..eabb70ca9d 100644
--- a/ui/imports/shared/views/ProfileView.qml
+++ b/ui/imports/shared/views/ProfileView.qml
@@ -13,6 +13,7 @@ import shared.panels 1.0
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1 as StatusQUtils
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
@@ -228,13 +229,13 @@ Rectangle {
             subTitle: {
                 let user = ""
                 if (isCurrentUser) {
-                    user = root.profileStore.ensName !== "" ? root.profileStore.ensName  : Utils.elideText(root.profileStore.pubkey, 5)
+                    user = root.profileStore.ensName !== "" ? root.profileStore.ensName  : StatusQUtils.Utils.elideText(root.profileStore.pubkey, 5)
                 } else if (userIsEnsVerified) {
                     user = userEnsName
                 }
 
                 if (user === ""){
-                    user = Utils.elideText(userPublicKey, 5)
+                    user = StatusQUtils.Utils.elideText(userPublicKey, 5)
                 }
                 return Constants.userLinkPrefix +  user;
             }
@@ -370,9 +371,10 @@ Rectangle {
             isMessage: true
             shouldRepeatHeader: true
             messageTimestamp: root.verificationRequestedAt
+            senderId: profileStore.pubkey
             senderDisplayName: userProfile.name
             senderIcon: userProfile.icon
-            message: root.verificationChallenge
+            messageText: root.verificationChallenge
             messageContentType: Constants.messageContentType.messageType
             placeholderMessage: true
         }
@@ -380,13 +382,14 @@ Rectangle {
         MessageView {
             id: responseMessage
             visible: root.showVerificationPendingSection && !!root.verificationResponse
-            width: parent.width
+            Layout.fillWidth: true
             isMessage: true
             shouldRepeatHeader: true
             messageTimestamp: root.verificationRepliedAt
+            senderId: root.userPublicKey
             senderDisplayName: root.verificationResponseDisplayName
             senderIcon: root.verificationResponseIcon
-            message: root.verificationResponse
+            messageText: root.verificationResponse
             messageContentType: Constants.messageContentType.messageType
             placeholderMessage: true
         }
diff --git a/ui/imports/shared/views/chat/ChatTextView.qml b/ui/imports/shared/views/chat/ChatTextView.qml
index 3cea372096..d14247817c 100644
--- a/ui/imports/shared/views/chat/ChatTextView.qml
+++ b/ui/imports/shared/views/chat/ChatTextView.qml
@@ -122,16 +122,16 @@ Item {
         }
 
         text: {
-            if (contentType === Constants.messageContentType.stickerType) return "";
-            let msg = Utils.linkifyAndXSS(message);
+            if (contentType === Constants.messageContentType.stickerType)
+                return "";
+            let msg = StatusQUtils.Utils.linkifyAndXSS(message);
             if (isEmoji)
                 return StatusQUtils.Emoji.parse(msg, StatusQUtils.Emoji.size.middle, StatusQUtils.Emoji.format.png);
             if (isEdited) {
                 let index = msg.endsWith("code>") ? msg.length : msg.length - 4
-                return Utils.getMessageWithStyle(StatusQUtils.Emoji.parse(msg.slice(0, index) + Constants.editLabel + msg.slice(index)), isCurrentUser, hoveredLink)
+                return StatusQUtils.Utils.getMessageWithStyle(StatusQUtils.Emoji.parse(msg.slice(0, index) + Constants.editLabel + msg.slice(index)), isCurrentUser, hoveredLink)
             }
-            return Utils.getMessageWithStyle(StatusQUtils.Emoji.parse(msg), isCurrentUser, hoveredLink)
-        
+            return StatusQUtils.Utils.getMessageWithStyle(StatusQUtils.Emoji.parse(msg), isCurrentUser, hoveredLink)
         }
     }
 
diff --git a/ui/imports/shared/views/chat/CompactMessageView.qml b/ui/imports/shared/views/chat/CompactMessageView.qml
deleted file mode 100644
index 30babb53f6..0000000000
--- a/ui/imports/shared/views/chat/CompactMessageView.qml
+++ /dev/null
@@ -1,805 +0,0 @@
-import QtQuick 2.13
-import QtGraphicalEffects 1.13
-
-import utils 1.0
-import shared.panels 1.0
-import shared.status 1.0
-import shared.controls 1.0
-import shared.panels.chat 1.0
-import shared.views.chat 1.0
-import shared.controls.chat 1.0
-
-import StatusQ.Controls 0.1 as StatusQControls
-import StatusQ.Core.Utils 0.1 as StatusQUtils
-import StatusQ.Components 0.1
-
-Item {
-    id: root
-
-    property var store
-    property var messageStore
-    property var usersStore
-    property var contactsStore
-
-    property var chatLogView
-    property var emojiPopup
-
-    property var messageContextMenu
-    property var container
-    property int contentType
-    property bool isChatBlocked: false
-    property bool isActiveChannel: false
-    property int senderTrustStatus
-
-    property int chatHorizontalPadding: Style.current.halfPadding
-    property int chatVerticalPadding: 7
-    property bool headerRepeatCondition: (authorCurrentMsg !== authorPrevMsg ||
-                                          shouldRepeatHeader || dateGroupLbl.visible || chatReply.active)
-    property bool stickersLoaded: false
-    property string sticker
-    property int stickerPack
-    property bool isMessageActive: false
-    property bool amISender: false
-    property string senderIcon: ""
-    property bool isHovered: false
-    property bool isInPinnedPopup: false
-    property bool pinnedMessage: false
-    property bool canPin: false
-    property string communityId
-    property bool editModeOn: false
-    property string linkUrls: ""
-
-    property string message: ""
-
-    property int prevMessageIndex
-    property string prevMsgTimestamp
-    property string messageTimestamp
-
-    property var transactionParams
-
-    signal openStickerPackPopup(string stickerPackId)
-    signal addEmoji(bool isProfileClick, bool isSticker, bool isImage , var image, bool isEmoji, bool hideEmojiPicker)
-    signal clickMessage(bool isProfileClick, bool isSticker, bool isImage, var image, bool isEmoji, bool hideEmojiPicker, bool isReply, bool isRightClickOnImage, string imageSource)
-    signal replyClicked(string messageId, string author)
-    signal imageClicked(var image)
-
-
-    function setMessageActive(messageId, active) {
-        if (active) {
-            activeMessage = messageId;
-        } else if (activeMessage === messageId) {
-            activeMessage = "";
-        }
-    }
-
-
-    width: parent.width
-    height: messageContainer.height + messageContainer.anchors.topMargin
-            + (dateGroupLbl.visible ? dateGroupLbl.height + dateGroupLbl.anchors.topMargin : 0)
-
-    Connections {
-        target: !!root.messageStore && root.messageStore.messageModule ?
-            root.messageStore.messageModule : null
-        enabled: !!root.messageStore && !!root.messageStore.messageModule && responseTo !== ""
-        onRefreshAMessageUserRespondedTo: {
-            if(msgId === messageId)
-                chatReply.resetOriginalMessage()
-        }
-    }
-
-    Timer {
-        id: ensureMessageFullyVisibleTimer
-        interval: 1
-        onTriggered: {
-            chatLogView.positionViewAtIndex(ListView.currentIndex, ListView.Contain)
-        }
-    }
-
-    MessageMouseArea {
-        enabled: !root.isChatBlocked && !placeholderMessage && !isImage
-        anchors.fill: messageContainer
-        acceptedButtons: activityCenterMessage ? Qt.LeftButton : Qt.RightButton
-        messageContextMenu: root.messageContextMenu
-        messageContextMenuParent: root
-        isHovered: root.isHovered
-        isMessageActive: root.isMessageActive
-        isActivityCenterMessage: activityCenterMessage
-        stickersLoaded: root.stickersLoaded
-        onClickMessage: {
-            root.clickMessage(isProfileClick, isSticker, isImage, null, isEmoji, false, false, false, "");
-        }
-    }
-
-    ChatButtonsPanel {
-        contentType: messageContentType
-        parentIsHovered: !editModeOn && isHovered
-        isChatBlocked: root.isChatBlocked
-        onHoverChanged: {
-            hovered && setHovered(messageId, hovered)
-        }
-        onSetMessageActive: {
-            root.setMessageActive(messageId, active)
-        }
-
-        anchors.right: parent.right
-        anchors.rightMargin: 20
-        anchors.top: messageContainer.top
-        // This is not exactly like the design because the hover becomes messed up with the buttons on top of another Message
-        anchors.topMargin: -Style.current.halfPadding
-        messageContextMenu: root.messageContextMenu
-        isInPinnedPopup: root.isInPinnedPopup
-        fromAuthor: senderId
-        editBtnActive: isText && !editModeOn && root.amISender
-        pinButtonActive: {
-            if (!root.messageStore)
-                 return false
-
-            const chatType = root.messageStore.getChatType();
-            const amIChatAdmin = root.messageStore.amIChatAdmin();
-            const pinMessageAllowedForMembers = root.messageStore.pinMessageAllowedForMembers()
-
-            return chatType === Constants.chatType.oneToOne ||
-                   chatType === Constants.chatType.privateGroupChat && amIChatAdmin ||
-                   chatType === Constants.chatType.communityChat && (amIChatAdmin || pinMessageAllowedForMembers);
-
-        }
-        deleteButtonActive: {
-            if (!root.messageStore)
-                return false;
-            const isMyMessage = senderId !== "" && senderId === userProfile.pubKey;
-            const chatType = root.messageStore.getChatType();
-            return isMyMessage &&
-                    (contentType === Constants.messageContentType.messageType ||
-                     contentType === Constants.messageContentType.stickerType ||
-                     contentType === Constants.messageContentType.emojiType ||
-                     contentType === Constants.messageContentType.imageType ||
-                     contentType === Constants.messageContentType.audioType);
-        }
-        pinnedMessage: root.pinnedMessage
-        canPin: root.canPin
-
-        activityCenterMsg: activityCenterMessage
-        placeholderMsg: placeholderMessage
-        onClickMessage: {
-            root.clickMessage(isProfileClick, isSticker, isImage, image, isEmoji, hideEmojiPicker, false, false, "");
-        }
-        onReplyClicked: {
-            root.replyClicked(messageId, author)
-        }
-    }
-
-    Connections {
-        enabled: isHovered || isMessageActive
-        target: typeof root.messageContextMenu !== "undefined" ? root.messageContextMenu : null
-        onOpened: root.setMessageActive(messageId, true)
-        onClosed: root.setMessageActive(messageId, false)
-    }
-
-    DateGroup {
-        id: dateGroupLbl
-        previousMessageIndex: root.prevMessageIndex
-        previousMessageTimestamp: root.prevMsgTimestamp
-        messageTimestamp: root.messageTimestamp
-        isActivityCenterMessage: activityCenterMessage
-    }
-
-    function startMessageFoundAnimation() {
-        messageFoundAnimation.start();
-    }
-
-    SequentialAnimation {
-        id: messageFoundAnimation
-        PauseAnimation {
-            duration: 600
-        }
-         NumberAnimation {
-            target: highlightRect
-            property: "opacity"
-            to: 1.0
-            duration: 1500
-        }
-        PauseAnimation {
-            duration: 1000
-        }
-        NumberAnimation {
-           target: highlightRect
-           property: "opacity"
-            to: 0.0
-            duration: 1500
-        }
-    }
-
-    Rectangle {
-        id: highlightRect
-        anchors.fill: messageContainer
-        opacity: 0
-        visible: (opacity > 0.001)
-        color: Style.current.backgroundHoverLight
-    }
-
-    Rectangle {
-        id: messageContainer
-
-        property alias messageContent: messageContent
-
-        anchors.top: dateGroupLbl.visible ? dateGroupLbl.bottom : parent.top
-        anchors.topMargin: dateGroupLbl.visible ? (activityCenterMessage ? 4 : Style.current.padding) : 0
-        height: childrenRect.height
-                + (chatName.visible || emojiReactionLoader.active ? Style.current.halfPadding : 0)
-                + (chatName.visible && emojiReactionLoader.active ? Style.current.padding : 0)
-                + (!chatName.visible && chatImageContent.active ? 6 : 0)
-                + (emojiReactionLoader.active ? emojiReactionLoader.height: 0)
-                + (retry.visible && !chatTime.visible ? Style.current.smallPadding : 0)
-                + (pinnedRectangleLoader.active ? Style.current.smallPadding : 0)
-                + (editModeOn ? 25 : 0)
-                + (!chatName.visible ? 6 : 0)
-        width: parent.width
-
-        color: {
-            if (editModeOn) {
-                return Style.current.backgroundHoverLight
-            }
-
-            if (activityCenterMessage) {
-                return read ? Style.current.transparent : Utils.setColorAlpha(Style.current.blue, 0.1)
-            }
-
-            if (placeholderMessage) {
-                return Style.current.transparent
-            }
-
-            if (pinnedMessage) {
-                return isHovered || isMessageActive ? Style.current.pinnedMessageBackgroundHovered : Style.current.pinnedMessageBackground
-            }
-
-            return isHovered || isMessageActive ? (hasMention ? Style.current.mentionMessageHoverColor : Style.current.backgroundHoverLight) :
-                                                       (hasMention ? Style.current.mentionMessageColor : Style.current.transparent)
-        }
-
-        Loader {
-            id: pinnedRectangleLoader
-            active: !editModeOn && pinnedMessage
-            anchors.left: chatName.left
-            anchors.top: parent.top
-            anchors.topMargin: active ? Style.current.halfPadding : 0
-
-            sourceComponent: Component {
-                Rectangle {
-                    id: pinnedRectangle
-                    height: 24
-                    width: childrenRect.width + Style.current.smallPadding
-                    color: Style.current.pinnedRectangleBackground
-                    radius: 12
-
-                    SVGImage {
-                        id: pinImage
-                        source: Style.svg("pin")
-                        anchors.left: parent.left
-                        anchors.leftMargin: 3
-                        width: 16
-                        height: 16
-                        anchors.verticalCenter: parent.verticalCenter
-
-                        ColorOverlay {
-                            anchors.fill: parent
-                            source: parent
-                            color: Style.current.pinnedMessageBorder
-                        }
-                    }
-
-                    StyledText {
-                        text: qsTr("Pinned by %1").arg(Utils.getContactDetailsAsJson(messagePinnedBy).displayName)
-                        anchors.left: pinImage.right
-                        anchors.verticalCenter: parent.verticalCenter
-                        font.pixelSize: 13
-                    }
-                }
-            }
-        }
-
-
-        // Not Refactored Yet
-//        Connections {
-//            enabled: !!rootStore
-//            target: enabled ? rootStore.chatsModelInst.messageView : null
-//            onMessageEdited: {
-//                if(chatReply.item)
-//                    chatReply.item.messageEdited(editedMessageId, editedMessageContent)
-//            }
-//        }
-
-        ChatReplyPanel {
-            id: chatReply
-            anchors.top: pinnedRectangleLoader.active ? pinnedRectangleLoader.bottom : parent.top
-            anchors.topMargin: active ? 4 : 0
-            anchors.left: chatImage.left
-            anchors.right: parent.right
-            anchors.rightMargin: Style.current.padding
-            isCurrentUser: root.amISender
-            longReply: active && textFieldImplicitWidth > width
-            container: root.container
-            chatHorizontalPadding: chatHorizontalPadding
-            active: responseTo !== "" && !activityCenterMessage
-
-            function resetOriginalMessage() {
-                if(!root.messageStore)
-                    return
-                let obj = root.messageStore.getMessageByIdAsJson(responseTo)
-                if(!obj)
-                    return
-
-                amISenderOfTheRepliedMessage = obj.amISender
-                repliedMessageContentType = obj.contentType
-                repliedMessageSenderIcon = obj.senderIcon
-                // TODO: not sure about is edited at the moment
-                repliedMessageIsEdited = false
-                repliedMessageSender = obj.senderDisplayName
-                repliedMessageSenderPubkey = obj.senderId
-                repliedMessageSenderIsAdded = obj.senderIsAdded
-                repliedMessageContent = obj.messageText
-                repliedMessageImage = obj.messageImage
-                stickerData = obj.sticker
-            }
-
-            Component.onCompleted: {
-                resetOriginalMessage()
-            }
-
-            onScrollToBottom: {
-                // Not Refactored Yet
-//                messageStore.scrollToBottom(isit, root.container);
-            }
-
-            onClickMessage: {
-                root.clickMessage(isProfileClick, isSticker, isImage, image, isEmoji, hideEmojiPicker, isReply, false, "")
-            }
-        }
-
-
-        UserImage {
-            id: chatImage
-
-            active: isMessage && headerRepeatCondition
-
-            anchors.left: parent.left
-            anchors.leftMargin: Style.current.padding
-            anchors.top: chatReply.active ? chatReply.bottom :
-                                            pinnedRectangleLoader.active ? pinnedRectangleLoader.bottom : parent.top
-            anchors.topMargin: chatReply.active || pinnedRectangleLoader.active ? 4 : Style.current.smallPadding
-
-            image: root.senderIcon
-            pubkey: senderId
-            name: senderDisplayName
-            messageContextMenu: root.messageContextMenu
-
-            onClicked: root.clickMessage(true, false, false, null, false, false, false, false, "")
-        }
-
-        UsernameLabel {
-            id: chatName
-            visible: !editModeOn && isMessage && headerRepeatCondition
-            anchors.leftMargin: chatHorizontalPadding
-            anchors.top: chatImage.top
-            anchors.left: chatImage.right
-            messageContextMenu: root.messageContextMenu
-            displayName: senderDisplayName
-            localName: senderLocalName
-            amISender: root.amISender
-            onClickMessage: {
-                root.clickMessage(true, false, false, null, false, false, false, false, "")
-            }
-        }
-
-        VerificationLabel {
-            id: trustStatus
-            anchors.left: chatName.right
-            anchors.leftMargin: visible ? 4 : 0
-            anchors.bottom: chatName.bottom
-            anchors.bottomMargin: 4
-            visible: !root.amISender && chatName.visible
-            trustStatus: senderTrustStatus
-        }
-
-        ChatTimePanel {
-            id: chatTime
-            visible: !editModeOn && headerRepeatCondition
-            anchors.verticalCenter: chatName.verticalCenter
-            anchors.left: trustStatus.right
-            anchors.leftMargin: 4
-            color: Style.current.secondaryText
-            timestamp: root.messageTimestamp
-        }
-
-        Loader {
-            id: editMessageLoader
-            active: editModeOn
-            anchors.top: chatReply.active ? chatReply.bottom : parent.top
-            anchors.left: chatImage.right
-            anchors.leftMargin: chatHorizontalPadding
-            anchors.right: parent.right
-            anchors.rightMargin: chatHorizontalPadding
-            height: (item !== null && typeof(item)!== 'undefined')? item.height: 0
-            sourceComponent: Item {
-                id: editText
-                height: childrenRect.height
-
-                property bool suggestionsOpened: false
-                Keys.onEscapePressed: {
-                    if (!suggestionsOpened) {
-                        cancelBtn.clicked()
-                    }
-                    suggestionsOpened = false
-                }
-
-                StatusChatInput {
-                    id: editTextInput
-
-                    store: root.store
-                    usersStore: root.usersStore
-
-                    chatInputPlaceholder: qsTr("Pinned by %1")
-                    chatType: messageStore.getChatType()
-                    isEdit: true
-                    emojiPopup: root.emojiPopup
-                    messageContextMenu: root.messageContextMenu
-                    onSendMessage: {
-                        saveBtn.clicked(null)
-                    }
-                    suggestions.onVisibleChanged: {
-                        if (suggestions.visible) {
-                            editText.suggestionsOpened = true
-                        }
-                    }
-
-                    Component.onCompleted: {
-                        let mentionsMap = new Map()
-                        let index = 0
-                        while (true) {
-                            index = message.indexOf("<a href=", index)
-                            if (index < 0) {
-                                break
-                            }
-                            let startIndex = index
-                            let endIndex = message.indexOf("</a>", index) + 4
-                            if (endIndex < 0) {
-                                index += 8 // "<a href="
-                                continue
-                            }
-                            let addrIndex = message.indexOf("0x", index + 8)
-                            if (addrIndex < 0) {
-                                index += 8 // "<a href="
-                                continue
-                            }
-                            let addrEndIndex = message.indexOf("\"", addrIndex)
-                            if (addrEndIndex < 0) {
-                                index += 8 // "<a href="
-                                continue
-                            }
-                            const mentionLink = message.substring(startIndex, endIndex)
-                            const linkTag = message.substring(index, endIndex)
-                            const linkText = linkTag.replace(/(<([^>]+)>)/ig,"").trim()
-                            const atSymbol = linkText.startsWith("@") ? '' : '@'
-                            const mentionTag = Constants.mentionSpanTag + atSymbol + linkText + '</span> '
-                            mentionsMap.set(mentionLink, mentionTag)
-                            index += linkTag.length
-                        }
-
-                        var text = message
-                        for (let [key, value] of mentionsMap) {
-                            text = text.replace(new RegExp(key, 'g'), value)
-                        }
-                        editTextInput.textInput.text = text
-                        editTextInput.textInput.cursorPosition = editTextInput.textInput.length
-                    }
-                }
-
-                StatusQControls.StatusFlatButton {
-                    id: cancelBtn
-                    anchors.left: parent.left
-                    anchors.leftMargin: Style.current.halfPadding
-                    anchors.top: editTextInput.bottom
-                    text: qsTr("Cancel")
-                    onClicked: {
-                        messageStore.setEditModeOff(messageId)
-                        editTextInput.textInput.text = StatusQUtils.Emoji.parse(message)
-                        ensureMessageFullyVisibleTimer.start()
-                    }
-                }
-
-                StatusQControls.StatusButton {
-                    id: saveBtn
-                    anchors.left: cancelBtn.right
-                    anchors.leftMargin: Style.current.halfPadding
-                    anchors.top: editTextInput.bottom
-                    text: qsTr("Save")
-                    enabled: editTextInput.textInput.text.trim().length > 0
-                    onClicked: {
-                        let msg = rootStore.plainText(StatusQUtils.Emoji.deparse(editTextInput.textInput.text))
-                        if (msg.length > 0){
-                            msg = messageStore.interpretMessage(msg)
-                            messageStore.setEditModeOff(messageId)
-                            messageStore.editMessage(messageId, msg)
-                        }
-                    }
-                }
-            }
-        }
-
-        Item {
-            id: messageContent
-            height: childrenRect.height + (isEmoji ? 2 : 0)
-            anchors.top: chatName.visible ? chatName.bottom :
-                                            chatReply.active ? chatReply.bottom :
-                                                pinnedRectangleLoader.active ? pinnedRectangleLoader.bottom : parent.top
-            anchors.left: parent.left
-            anchors.leftMargin: chatImage.imageWidth + Style.current.padding + root.chatHorizontalPadding
-            anchors.right: parent.right
-            anchors.rightMargin: root.chatHorizontalPadding
-            anchors.topMargin: (!chatName.visible || !chatReply.active  || !pinnedRectangleLoader.active) ? 4 : 0
-            visible: !editModeOn
-
-            ChatTextView {
-                id: chatText
-                readonly property int leftPadding: chatImage.anchors.leftMargin + chatImage.width + chatHorizontalPadding
-                visible: isText || isEmoji || (isImage && root.message !== "<p>Update to latest version to see a nice image here!</p>")
-
-                message: Utils.removeGifUrls(root.message)
-                anchors.top: parent.top
-                anchors.topMargin: isEmoji ? 2 : 0
-                anchors.left: parent.left
-                anchors.right: parent.right
-                textField.rightPadding: Style.current.bigPadding
-                onLinkActivated: {
-                    if (activityCenterMessage) {
-                        root.clickMessage(false, isSticker, false, null, false, false, false, false, "")
-                    }
-                }
-            }
-
-            Loader {
-                id: chatImageContent
-                active: isImage
-                anchors.top: chatText.visible ? chatText.bottom : parent.top
-                anchors.topMargin: active ? 6 : 0
-                z: 51
-                sourceComponent: Component {
-                    StatusChatImage {
-                        playing: root.messageStore.playAnimation
-                        imageSource: messageImage
-                        imageWidth: 200
-                        isActiveChannel: root.isActiveChannel
-                        onClicked: {
-                            if (mouse.button === Qt.LeftButton) {
-                                root.imageClicked(image)
-                            }
-                            else if (mouse.button === Qt.RightButton) {
-                                // Set parent, X & Y positions for the messageContextMenu
-                                root.messageContextMenu.parent = root
-
-                                const mappedPos = root.mapFromItem(
-                                                    this,
-                                                    mouse.x + Style.current.smallPadding,
-                                                    mouse.y - Style.current.smallPadding)
-
-                                root.messageContextMenu.setXPosition = function() { return mappedPos.x }
-                                root.messageContextMenu.setYPosition = function() { return mappedPos.y }
-                                root.clickMessage(false, false, true, image, false, true, false, true, imageSource)
-                            }
-                        }
-                        container: root.container
-                    }
-                }
-            }
-
-            Loader {
-                id: stickerLoader
-                active: contentType === Constants.messageContentType.stickerType
-                anchors.top: parent.top
-                anchors.topMargin: active ? Style.current.halfPadding : 0
-                sourceComponent: Component {
-                    Rectangle {
-                        id: stickerContainer
-                        color: Style.current.transparent
-                        border.color: isHovered ? Qt.darker(Style.current.border, 1.1) : Style.current.border
-                        border.width: 1
-                        radius: 16
-                        width: stickerId.width + 2 * chatVerticalPadding
-                        height: stickerId.height + 2 * chatVerticalPadding
-
-                        StatusSticker {
-                            id: stickerId
-                            anchors.top: parent.top
-                            anchors.topMargin: chatVerticalPadding
-                            anchors.left: parent.left
-                            anchors.leftMargin: chatVerticalPadding
-                            contentType: root.contentType
-                            stickerData: root.sticker
-                            onLoaded: {
-                                if(!root.messageStore)
-                                    return
-                                // Not refactored yet
-                                // root.messageStore.scrollToBottom(true, root.container)
-                            }
-                        }
-                    }
-                }
-            }
-
-            MessageMouseArea {
-                id: messageMouseArea
-                anchors.fill: stickerLoader.active ? stickerLoader : chatText
-                z: activityCenterMessage ? chatText.z + 1 : chatText.z -1
-                enabled: !root.isChatBlocked && !placeholderMessage
-                messageContextMenu: root.messageContextMenu
-                messageContextMenuParent: root
-                isHovered: root.isHovered
-                isMessageActive: root.isMessageActive
-                isActivityCenterMessage: activityCenterMessage
-                stickersLoaded: root.stickersLoaded
-                onClickMessage: {
-                    root.clickMessage(isProfileClick, isSticker, isImage, null, false, false, false, false, "");
-                }
-                onOpenStickerPackPopup: {
-                    root.openStickerPackPopup(root.stickerPack);
-                }
-
-                onSetMessageActive: {
-                    root.setMessageActive(messageId, active);
-                }
-            }
-
-            Loader {
-                id: linksLoader
-                active: !!linkUrls
-                height: item ? item.height : 0
-                anchors.top: chatText.bottom
-                anchors.topMargin: active ? Style.current.halfPadding : 0
-
-                sourceComponent: Component {
-                    LinksMessageView {
-                        linkUrls: root.linkUrls
-                        container: root.container
-                        messageStore: root.messageStore
-                        store: root.store
-                        isCurrentUser: root.amISender
-                    }
-                }
-            }
-
-            Loader {
-                id: audioPlayerLoader
-                active: isAudio
-                anchors.top: parent.top
-                anchors.topMargin: active ? Style.current.halfPadding : 0
-
-                sourceComponent: Component {
-                    AudioPlayerPanel {
-                        audioSource: audio
-                    }
-                }
-            }
-
-            Loader {
-                id: transactionBubbleLoader
-                active: contentType === Constants.messageContentType.transactionType
-                anchors.top: parent.top
-                anchors.topMargin: active ? (chatName.visible ? 4 : 6) : 0
-                sourceComponent: Component {
-                    TransactionBubbleView {
-                        transactionParams: root.transactionParams
-                        store: root.store
-                        contactsStore: root.contactsStore
-                    }
-                }
-            }
-
-            Loader {
-                active: contentType === Constants.messageContentType.communityInviteType
-                anchors.left: parent.left
-                anchors.top: parent.top
-                anchors.topMargin: active ? 8 : 0
-                sourceComponent: Component {
-                    id: invitationBubble
-                    InvitationBubbleView {
-                        store: root.store
-                        communityId: root.communityId
-                    }
-                }
-            }
-        }
-
-
-        Retry {
-            id: retry
-            height: visible ? implicitHeight : 0
-            anchors.left: chatTime.visible ? chatTime.right : messageContent.left
-            anchors.leftMargin: chatTime.visible ? chatHorizontalPadding : 0
-            anchors.top: chatTime.visible ? chatTime.top : messageContent.bottom
-            anchors.topMargin: chatTime.visible ? 0 : -4
-            anchors.bottom: chatTime.visible ? chatTime.bottom : undefined
-            isCurrentUser: root.amISender
-            isExpired: isExpired
-            timeout: timeout
-            onClicked: {
-                // Not Refactored Yet
-//                rootStore.chatsModelInst.messageView.resendMessage(chatId, messageId)
-            }
-        }
-    }
-
-    Loader {
-        active: !activityCenterMessage && (hasMention || pinnedMessage)
-        height: messageContainer.height
-        anchors.left: messageContainer.left
-        anchors.top: messageContainer.top
-
-        sourceComponent: Component {
-            Rectangle {
-                id: mentionBorder
-                color: pinnedMessage ? Style.current.pinnedMessageBorder : Style.current.mentionColor
-                width: 2
-                height: parent.height
-            }
-        }
-    }
-
-    HoverHandler {
-        enabled: !activityCenterMessage && !chatLogView.flickingVertically &&
-                 (forceHoverHandler || (typeof root.messageContextMenu !== "undefined" && typeof Global.profilePopupOpened !== "undefined" &&
-                                        !root.messageContextMenu.opened && !Global.profilePopupOpened && !Global.popupOpened))
-        onHoveredChanged: {
-            setHovered(messageId, hovered);
-        }
-    }
-
-    Loader {
-        id: emojiReactionLoader
-        active: reactionsModel.count > 0
-        anchors.bottom: messageContainer.bottom
-        anchors.bottomMargin: Style.current.halfPadding
-        anchors.left: messageContainer.left
-        anchors.leftMargin: messageContainer.messageContent.anchors.leftMargin
-
-        sourceComponent: Component {
-            EmojiReactionsPanel {
-                id: emojiRect
-                store: root.messageStore
-                emojiReactionsModel: reactionsModel
-                onHoverChanged: {
-                    setHovered(messageId, hovered)
-                }
-                isMessageActive: isMessageActive
-                isCurrentUser: root.amISender
-                onAddEmojiClicked: {
-                    if(root.isChatBlocked)
-                        return
-
-                    // First set parent, X & Y positions for the messageContextMenu
-                    root.messageContextMenu.parent = emojiRect
-                    root.messageContextMenu.setXPosition = function() { return (root.messageContextMenu.parent.x + root.messageContextMenu.parent.width + 4) }
-                    root.messageContextMenu.setYPosition = function() { return  (-root.messageContextMenu.height - 4) }
-
-                    // Second, add emoji that also triggers setXYPosition methods / open popup:
-                    root.addEmoji(false, false, false, null, true, false);
-                }
-
-                onToggleReaction: {
-                    if(root.isChatBlocked)
-                        return
-
-                    if(!root.messageStore)
-                    {
-                        console.error("reaction cannot be toggled, message store is not valid")
-                        return
-                    }
-
-                    root.messageStore.toggleReaction(messageId, emojiID)
-                }
-
-                onSetMessageActive: {
-                    root.setMessageActive(messageId, active);
-                }
-            }
-        }
-    }
-}
diff --git a/ui/imports/shared/views/chat/MessageContextMenuView.qml b/ui/imports/shared/views/chat/MessageContextMenuView.qml
index d8a327f46c..580301ef9a 100644
--- a/ui/imports/shared/views/chat/MessageContextMenuView.qml
+++ b/ui/imports/shared/views/chat/MessageContextMenuView.qml
@@ -102,9 +102,6 @@ StatusPopupMenu {
     readonly property bool userTrustIsUnknown: d.contactDetails && d.contactDetails.trustStatus === Constants.trustStatus.unknown
     readonly property bool userIsUntrustworthy: d.contactDetails && d.contactDetails.trustStatus === Constants.trustStatus.untrustworthy
 
-    property var setXPosition: function() {return 0}
-    property var setYPosition: function() {return 0}
-
     property var emojiReactionsReactedByUser: []
 
     signal openProfileClicked(string publicKey, string state)
@@ -142,14 +139,6 @@ StatusPopupMenu {
         d.contactDetails = {}
     }
 
-    onHeightChanged: { root.y = setYPosition(); }
-    onWidthChanged: { root.x = setXPosition(); }
-    onOpened: {
-        // Trigger x and y position:
-        x = setXPosition()
-        y = setYPosition()
-    }
-
     width: Math.max(emojiContainer.visible ? emojiContainer.width : 0,
                     (root.isRightClickOnImage && !root.pinnedPopup) ? 176 : 230)
 
@@ -202,7 +191,8 @@ StatusPopupMenu {
         displayName: root.selectedUserDisplayName
         pubkey: root.selectedUserPublicKey
         icon: root.selectedUserIcon
-        trustStatus: d.contactDetails.trustStatus
+        trustStatus: d.contactDetails && d.contactDetails.trustStatus ? d.contactDetails.trustStatus
+                                                                      : Constants.trustStatus.unknown
         isContact: root.isMyMutualContact
         isCurrentUser: root.isMe
     }
diff --git a/ui/imports/shared/views/chat/MessageView.qml b/ui/imports/shared/views/chat/MessageView.qml
index 434b6fb0f3..9d432b0161 100644
--- a/ui/imports/shared/views/chat/MessageView.qml
+++ b/ui/imports/shared/views/chat/MessageView.qml
@@ -1,38 +1,24 @@
 import QtQuick 2.13
 
-import StatusQ.Components 0.1
-
 import utils 1.0
 import shared.panels 1.0
 import shared.status 1.0
 import shared.controls 1.0
+import shared.popups 1.0
 import shared.panels.chat 1.0
 import shared.views.chat 1.0
 import shared.controls.chat 1.0
 
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1 as StatusQUtils
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
 Loader {
     id: root
 
-    width: parent.width
-    z: (typeof chatLogView === "undefined") ? 1 : (chatLogView.count - index)
-
-    sourceComponent: {
-        switch(contentType) {
-            case Constants.messageContentType.chatIdentifier:
-                return channelIdentifierComponent
-            case Constants.messageContentType.fetchMoreMessagesButton:
-                return fetchMoreMessagesButtonComponent
-            case Constants.messageContentType.systemMessagePrivateGroupType:
-                return privateGroupHeaderComponent
-            case Constants.messageContentType.gapType:
-                return gapComponent
-            default:
-                return compactMessageComponent
-
-        }
-    }
-
-    property var store
+    property var rootStore
     property var messageStore
     property var usersStore
     property var contactsStore
@@ -54,30 +40,37 @@ Loader {
     property string senderId: ""
     property string senderDisplayName: ""
     property string senderLocalName: ""
+    property string senderEnsName: ""
     property string senderIcon: ""
     property bool amISender: false
     property bool senderIsAdded: false
     property int senderTrustStatus: Constants.trustStatus.unknown
     readonly property string senderIconToShow: {
         if ((!senderIsAdded &&
-            Global.privacyModuleInst.profilePicturesVisibility !==
-            Constants.profilePicturesVisibility.everyone)) {
+             Global.privacyModuleInst.profilePicturesVisibility !==
+             Constants.profilePicturesVisibility.everyone)) {
             return ""
         }
         return senderIcon
     }
-    property string message: ""
+    property string messageText: ""
     property string messageImage: ""
-    property string messageTimestamp: ""
+    property double messageTimestamp: 0 // We use double, because QML's int is too small
     property string messageOutgoingStatus: ""
     property int messageContentType: 1
     property bool pinnedMessage: false
     property string messagePinnedBy: ""
     property var reactionsModel: []
     property string linkUrls: ""
-    property bool isInPinnedPopup: false // The pinned popup limits the number of buttons shown
     property var transactionParams
 
+    // External behavior changers
+    property bool isInPinnedPopup: false // The pinned popup limits the number of buttons shown
+    property bool disableHover: false // Used to force the HoverHandler to be active (useful for messages in popups)
+    property bool placeholderMessage: false
+    property bool activityCenterMessage: false
+    property bool activityCenterMessageRead: true
+
     property int gapFrom: 0
     property int gapTo: 0
 
@@ -86,94 +79,63 @@ Loader {
     property int nextMessageIndex: -1
     property var nextMessageAsJsonObj
 
-    property string hoveredMessage
-    property string activeMessage
-    property bool isHovered: typeof hoveredMessage !== "undefined" && hoveredMessage === messageId
-    property bool isMessageActive: typeof activeMessage !== "undefined" && activeMessage === messageId
-
     property bool editModeOn: false
+    property bool isEdited: false
 
-    function setHovered(messageId, hovered) {
-        if (hovered) {
-            hoveredMessage = messageId;
-        } else if (hoveredMessage === messageId) {
-            hoveredMessage = "";
-        }
-    }
+    property string responseTo: responseToMessageWithId
 
     // Legacy
-    property string responseTo: responseToMessageWithId
     property bool isCurrentUser: amISender
-    property int contentType: messageContentType
-    property string timestamp: messageTimestamp
     property string displayUserName: senderDisplayName
     property string outgoingStatus: messageOutgoingStatus
     property string authorCurrentMsg: senderId
     property string authorPrevMsg: {
         if(!prevMessageAsJsonObj ||
-            // The system message for private groups appear as created by the group host, but it shouldn't
-            prevMessageAsJsonObj.contentType === Constants.messageContentType.systemMessagePrivateGroupType) {
+                // The system message for private groups appear as created by the group host, but it shouldn't
+                prevMessageAsJsonObj.contentType === Constants.messageContentType.systemMessagePrivateGroupType) {
             return ""
         }
 
         return prevMessageAsJsonObj.senderId
     }
-    property string prevMsgTimestamp: {
-        if(!prevMessageAsJsonObj)
-            return ""
+    property double prevMsgTimestamp: prevMessageAsJsonObj ? prevMessageAsJsonObj.timestamp : 0
+    property double nextMsgTimestamp: nextMessageAsJsonObj ? nextMessageAsJsonObj.timestamp : 0
 
-        return prevMessageAsJsonObj.timestamp
-    }
-    property string nextMsgTimestamp: {
-        if(!nextMessageAsJsonObj)
-            return ""
+    property bool shouldRepeatHeader: ((messageTimestamp - prevMsgTimestamp) / 60 / 1000) > Constants.repeatHeaderInterval
 
-        return nextMessageAsJsonObj.timestamp
-    }
-
-    property bool shouldRepeatHeader: ((parseInt(timestamp, 10) - parseInt(prevMsgTimestamp, 10)) / 60 / 1000) > Constants.repeatHeaderInterval
-
-    //////////////////////////////////////
-    //TODO CHECCK - REMOVE
-    property string plainText: "That's right. We're friends...  Of justice, that is."
-    property string emojiReactions: ""
-    property bool timeout: false
     property bool hasMention: false
-    property bool placeholderMessage: false
-    property bool activityCenterMessage: false
-    property bool read: true
-    property bool forceHoverHandler: false // Used to force the HoverHandler to be active (useful for messages in popups)
-    property string replaces: ""
-    property bool isEdited: false
     property bool stickersLoaded: false
-    //////////////////////////////////////
+
 
     property string sticker: "Qme8vJtyrEHxABcSVGPF95PtozDgUyfr1xGjePmFdZgk9v"
     property int stickerPack: -1
-    property bool isEmoji: contentType === Constants.messageContentType.emojiType
-    property bool isImage: contentType === Constants.messageContentType.imageType
-    property bool isAudio: contentType === Constants.messageContentType.audioType
-    property bool isStatusMessage: contentType === Constants.messageContentType.systemMessagePrivateGroupType
-    property bool isSticker: contentType === Constants.messageContentType.stickerType
-    property bool isText: contentType === Constants.messageContentType.messageType || contentType === Constants.messageContentType.editType
-    property bool isMessage: isEmoji || isImage || isSticker || isText || isAudio
-                             || contentType === Constants.messageContentType.communityInviteType || contentType === Constants.messageContentType.transactionType
 
-    property bool isExpired: (outgoingStatus === "sending" && (Math.floor(timestamp) + 180000) < Date.now())
+    property bool isEmoji: messageContentType === Constants.messageContentType.emojiType
+    property bool isImage: messageContentType === Constants.messageContentType.imageType
+    property bool isAudio: messageContentType === Constants.messageContentType.audioType
+    property bool isStatusMessage: messageContentType === Constants.messageContentType.systemMessagePrivateGroupType
+    property bool isSticker: messageContentType === Constants.messageContentType.stickerType
+    property bool isText: messageContentType === Constants.messageContentType.messageType || messageContentType === Constants.messageContentType.editType
+    property bool isMessage: isEmoji || isImage || isSticker || isText || isAudio
+                             || messageContentType === Constants.messageContentType.communityInviteType || messageContentType === Constants.messageContentType.transactionType
+
+    property bool isExpired: (outgoingStatus === "sending" && (Math.floor(messageTimestamp) + 180000) < Date.now())
     property int statusAgeEpoch: 0
 
     signal imageClicked(var image)
     property var scrollToBottom: function () {}
 
-    property var clickMessage: function(isProfileClick,
-                                        isSticker = false,
-                                        isImage = false,
-                                        image = null,
-                                        isEmoji = false,
-                                        hideEmojiPicker = false,
-                                        isReply = false,
-                                        isRightClickOnImage = false,
-                                        imageSource = "") {
+    // WARNING: To much arguments here. Create an object argument.
+    property var messageClickHandler: function(sender, point,
+                                               isProfileClick,
+                                               isSticker = false,
+                                               isImage = false,
+                                               image = null,
+                                               isEmoji = false,
+                                               hideEmojiPicker = false,
+                                               isReply = false,
+                                               isRightClickOnImage = false,
+                                               imageSource = "") {
 
         if (placeholderMessage || activityCenterMessage) {
             return
@@ -188,7 +150,7 @@ Loader {
         messageContextMenu.messageSenderId = root.senderId
         messageContextMenu.messageContentType = root.messageContentType
         messageContextMenu.pinnedMessage = root.pinnedMessage
-        messageContextMenu.canPin = messageStore.getNumberOfPinnedMessages() < Constants.maxNumberOfPins
+        messageContextMenu.canPin = d.canPin
 
         messageContextMenu.selectedUserPublicKey = root.senderId
         messageContextMenu.selectedUserDisplayName = root.senderDisplayName
@@ -202,7 +164,7 @@ Loader {
         messageContextMenu.isSticker = isSticker
         messageContextMenu.hideEmojiPicker = hideEmojiPicker
 
-        if(isReply){
+        if (isReply){
             let obj = messageStore.getMessageByIdAsJson(responseTo)
             if(!obj)
                 return
@@ -213,15 +175,16 @@ Loader {
             messageContextMenu.selectedUserIcon = obj.senderIcon
         }
 
-        messageContextMenu.popup()
+        messageContextMenu.parent = sender;
+        messageContextMenu.popup(point);
     }
 
     signal showReplyArea(string messageId, string author)
 
 
-//    function showReactionAuthors(fromAccounts, emojiId) {
-//        return root.rootStore.showReactionAuthors(fromAccounts, emojiId)
-//    }
+    //    function showReactionAuthors(fromAccounts, emojiId) {
+    //        return root.rootStore.showReactionAuthors(fromAccounts, emojiId)
+    //    }
 
     function startMessageFoundAnimation() {
         root.item.startMessageFoundAnimation();
@@ -231,23 +194,76 @@ Loader {
 
     signal openStickerPackPopup(string stickerPackId)
     // Not Refactored Yet
-//    Connections {
-//        enabled: (!placeholderMessage && !!root.rootStore)
-//        target: !!root.rootStore ? root.rootStore.allContacts : null
-//        onContactChanged: {
-//            if (pubkey === fromAuthor) {
-//                const img = appMain.getProfileImage(userPubKey, isCurrentUser, useLargeImage)
-//                if (img) {
-//                    profileImageSource = img
-//                }
-//            } else if (replyMessageIndex > -1 && pubkey === repliedMessageAuthorPubkey) {
-//                const imgReply = appMain.getProfileImage(repliedMessageAuthorPubkey, repliedMessageAuthorIsCurrentUser, false)
-//                if (imgReply) {
-//                    repliedMessageUserImage = imgReply
-//                }
-//            }
-//        }
-//    }
+    //    Connections {
+    //        enabled: (!placeholderMessage && !!root.rootStore)
+    //        target: !!root.rootStore ? root.rootStore.allContacts : null
+    //        onContactChanged: {
+    //            if (pubkey === fromAuthor) {
+    //                const img = appMain.getProfileImage(userPubKey, isCurrentUser, useLargeImage)
+    //                if (img) {
+    //                    profileImageSource = img
+    //                }
+    //            } else if (replyMessageIndex > -1 && pubkey === repliedMessageAuthorPubkey) {
+    //                const imgReply = appMain.getProfileImage(repliedMessageAuthorPubkey, repliedMessageAuthorIsCurrentUser, false)
+    //                if (imgReply) {
+    //                    repliedMessageUserImage = imgReply
+    //                }
+    //            }
+    //        }
+    //    }
+
+    z: (typeof chatLogView === "undefined") ? 1 : (chatLogView.count - index)
+
+    sourceComponent: {
+        switch(messageContentType) {
+        case Constants.messageContentType.chatIdentifier:
+            return channelIdentifierComponent
+        case Constants.messageContentType.fetchMoreMessagesButton:
+            return fetchMoreMessagesButtonComponent
+        case Constants.messageContentType.systemMessagePrivateGroupType:
+            return privateGroupHeaderComponent
+        case Constants.messageContentType.gapType:
+            return gapComponent
+        default:
+            return messageComponent
+        }
+    }
+
+    QtObject {
+        id: d
+
+        readonly property bool canPin: !!messageStore &&
+                                       messageStore.getNumberOfPinnedMessages() < Constants.maxNumberOfPins
+        readonly property int chatButtonSize: 32
+
+        property string activeMessage
+        readonly property bool isMessageActive: typeof activeMessage !== "undefined" && activeMessage === messageId
+
+        function setMessageActive(messageId, active) {
+
+            // TODO: Is argument messageId actually needed?
+            //       It was probably used with dynamic scoping,
+            //       but not this method can be moved to private `d`.
+            //       Probably that it was done this way, because `MessageView` is reused as delegate.
+
+            if (active) {
+                d.activeMessage = messageId;
+                return;
+            }
+            if (d.activeMessage === messageId) {
+                d.activeMessage = "";
+                return;
+            }
+        }
+    }
+
+    Connections {
+        enabled: d.isMessageActive
+        target: root.messageContextMenu
+        onClosed: {
+            d.setMessageActive(root.messageId, false)
+        }
+    }
 
     Component {
         id: gapComponent
@@ -293,18 +309,18 @@ Loader {
             wrapMode: Text.Wrap
             text: {
                 return `<html>`+
-                `<head>`+
-                    `<style type="text/css">`+
-                    `a {`+
+                        `<head>`+
+                        `<style type="text/css">`+
+                        `a {`+
                         `color: ${Style.current.textColor};`+
                         `text-decoration: none;`+
-                    `}`+
-                    `</style>`+
-                `</head>`+
-                `<body>`+
-                    `${message}`+
-                `</body>`+
-            `</html>`;
+                        `}`+
+                        `</style>`+
+                        `</head>`+
+                        `<body>`+
+                        `${messageText}`+
+                        `</body>`+
+                        `</html>`;
             }
             visible: isStatusMessage
             font.pixelSize: 14
@@ -318,60 +334,465 @@ Loader {
     }
 
     Component {
-        id: compactMessageComponent
+        id: messageComponent
 
-        CompactMessageView {
-            container: root
-            store: root.store
-            message: root.message
-            messageStore: root.messageStore
-            usersStore: root.usersStore
-            contactsStore: root.contactsStore
-            messageContextMenu: root.messageContextMenu
-            contentType: root.messageContentType
-            isChatBlocked: root.isChatBlocked
-            isActiveChannel: root.isActiveChannel
-            emojiPopup: root.emojiPopup
-            senderTrustStatus: root.senderTrustStatus
-            chatLogView: root.chatLogView
+        StatusMessage {
+            id: delegate
 
-            prevMessageIndex: root.prevMessageIndex
-            prevMsgTimestamp: root.prevMsgTimestamp
-            messageTimestamp: root.messageTimestamp
-
-            communityId: root.communityId
-            stickersLoaded: root.stickersLoaded
-            sticker: root.sticker
-            stickerPack: root.stickerPack
-            isMessageActive: root.isMessageActive
-            senderIcon: root.senderIconToShow
-            amISender: root.amISender
-            isHovered: root.isHovered
-            editModeOn: root.editModeOn
-            linkUrls: root.linkUrls
-            isInPinnedPopup: root.isInPinnedPopup
-            pinnedMessage: root.pinnedMessage
-            canPin: !!messageStore && messageStore.getNumberOfPinnedMessages() < Constants.maxNumberOfPins
-
-            transactionParams: root.transactionParams
-
-            onAddEmoji: {
-                root.clickMessage(isProfileClick, isSticker, isImage , image, isEmoji, hideEmojiPicker)
+            function convertContentType(value) {
+                switch (value) {
+                case Constants.messageContentType.messageType:
+                    return StatusMessage.ContentType.Text;
+                case Constants.messageContentType.stickerType:
+                    return StatusMessage.ContentType.Sticker;
+                case Constants.messageContentType.emojiType:
+                    return StatusMessage.ContentType.Emoji;
+                case Constants.messageContentType.transactionType:
+                    return StatusMessage.ContentType.Transaction;
+                case Constants.messageContentType.imageType:
+                    return StatusMessage.ContentType.Image;
+                case Constants.messageContentType.audioType:
+                    return StatusMessage.ContentType.Audio;
+                case Constants.messageContentType.communityInviteType:
+                    return StatusMessage.ContentType.Invitation;
+                case Constants.messageContentType.fetchMoreMessagesButton:
+                case Constants.messageContentType.chatIdentifier:
+                case Constants.messageContentType.unknownContentType:
+                case Constants.messageContentType.statusType:
+                case Constants.messageContentType.systemMessagePrivateGroupType:
+                case Constants.messageContentType.gapType:
+                case Constants.messageContentType.editType:
+                default:
+                    return StatusMessage.ContentType.Unknown;
+                }
             }
 
-            onClickMessage: {
-                root.clickMessage(isProfileClick, isSticker, isImage, image, isEmoji, hideEmojiPicker, isReply, isRightClickOnImage, imageSource)
+            readonly property int contentType: convertContentType(root.messageContentType)
+            readonly property bool isReply: root.responseTo !== ""
+            readonly property var replyMessage: root.messageStore && isReply ? root.messageStore.getMessageByIdAsJson(root.responseTo) : null
+            readonly property string replySenderId: replyMessage ? replyMessage.senderId : ""
+
+            function editCompletedHandler(newMessageText) {
+                const message = root.rootStore.plainText(StatusQUtils.Emoji.deparse(newMessageText))
+                if (message.length <= 0)
+                    return;
+
+                const interpretedMessage = root.messageStore.interpretMessage(message)
+                root.messageStore.setEditModeOff(root.messageId)
+                root.messageStore.editMessage(root.messageId, interpretedMessage)
             }
 
-            onOpenStickerPackPopup: {
-                root.openStickerPackPopup(stickerPackId);
+            audioMessageInfoText: qsTr("Audio Message")
+            cancelButtonText: qsTr("Cancel")
+            saveButtonText: qsTr("Save")
+            loadingImageText: qsTr("Loading image...")
+            errorLoadingImageText: qsTr("Error loading the image")
+            resendText: qsTr("Resend")
+            pinnedMsgInfoText: qsTr("Pinned by")
+            reactionIcons: [
+                Style.svg("emojiReactions/heart"),
+                Style.svg("emojiReactions/thumbsUp"),
+                Style.svg("emojiReactions/thumbsDown"),
+                Style.svg("emojiReactions/laughing"),
+                Style.svg("emojiReactions/sad"),
+                Style.svg("emojiReactions/angry"),
+            ]
+
+            timestamp: root.messageTimestamp
+            editMode: root.editModeOn
+            isAReply: delegate.isReply
+            isEdited: root.isEdited
+            hasMention: root.hasMention
+            isPinned: root.pinnedMessage
+            pinnedBy: root.pinnedMessage ? Utils.getContactDetailsAsJson(root.messagePinnedBy).displayName : ""
+            hasExpired: root.isExpired
+            reactionsModel: root.reactionsModel
+
+            previousMessageIndex: root.prevMessageIndex
+            previousMessageTimestamp: root.prevMsgTimestamp
+
+            showHeader: root.authorCurrentMsg !== root.authorPrevMsg ||
+                        root.shouldRepeatHeader || dateGroupVisible || isAReply
+            isActiveMessage: d.isMessageActive
+
+            disableHover: root.disableHover ||
+                          (root.chatLogView && root.chatLogView.flickingVertically) ||
+                          activityCenterMessage ||
+                          root.messageContextMenu.opened ||
+                          !!Global.profilePopupOpened ||
+                          !!Global.popupOpened
+
+            hideQuickActions: root.isChatBlocked ||
+                              root.placeholderMessage ||
+                              root.activityCenterMessage
+
+            overrideBackground: root.activityCenterMessage || root.placeholderMessage
+            overrideBackgroundColor: {
+                if (root.activityCenterMessage && root.activityCenterMessageRead)
+                    return Utils.setColorAlpha(Style.current.blue, 0.1);
+                return "transparent";
             }
 
-            onReplyClicked: {
-                root.showReplyArea(messageId, author)
+
+            timestampString: Utils.formatShortTime(timestamp,
+                                                   localAccountSensitiveSettings.is24hTimeFormat)
+
+            timestampTooltipString: Utils.formatLongDateTime(timestamp,
+                                                             localAccountSensitiveSettings.isDDMMYYDateFormat,
+                                                             localAccountSensitiveSettings.is24hTimeFormat);
+
+            onEditCancelled: {
+                root.messageStore.setEditModeOff(root.messageId)
             }
 
-            onImageClicked: root.imageClicked(image)
+            onEditCompleted: {
+                delegate.editCompletedHandler(newMsgText)
+            }
+
+            onImageClicked: {
+                switch (mouse.button) {
+                case Qt.LeftButton:
+                    root.imageClicked(image, mouse);
+                    break;
+                case Qt.RightButton:
+                    root.messageClickHandler(image, Qt.point(mouse.x, mouse.y), false, false, true, image, false, true, false, true, imageSource)
+                    break;
+                }
+            }
+
+            onLinkActivated: {
+                if (link.startsWith('//')) {
+                    const pubkey = link.replace("//", "");
+                    Global.openProfilePopup(pubkey)
+                    return;
+                }
+
+                Global.openLink(link)
+            }
+
+            onProfilePictureClicked: {
+                d.setMessageActive(root.messageId, true);
+                root.messageClickHandler(sender, Qt.point(mouse.x, mouse.y), true);
+            }
+
+            onReplyProfileClicked: {
+                d.setMessageActive(root.messageId, true);
+                root.messageClickHandler(sender, Qt.point(mouse.x, mouse.y), true, false, false, null, false, false, true);
+            }
+
+            onSenderNameClicked: {
+                d.setMessageActive(root.messageId, true);
+                root.messageClickHandler(sender, Qt.point(mouse.x, mouse.y), true);
+            }
+
+            onToggleReactionClicked: {
+                if (root.isChatBlocked)
+                    return
+
+                if (!root.messageStore) {
+                    console.error("Reaction can not be toggled, message store is not valid")
+                    return
+                }
+
+                root.messageStore.toggleReaction(root.messageId, emojiId)
+            }
+
+            onAddReactionClicked: {
+                if (root.isChatBlocked)
+                    return;
+
+                d.setMessageActive(root.messageId, true);
+                root.messageClickHandler(sender, Qt.point(mouse.x, mouse.y), false, false, false, null, true, false);
+            }
+
+            onStickerClicked: {
+                root.openStickerPackPopup(root.stickerPack);
+            }
+
+            mouseArea {
+                acceptedButtons: root.activityCenterMessage ? Qt.LeftButton : Qt.RightButton
+                enabled: !root.isChatBlocked &&
+                         !root.placeholderMessage &&
+                         delegate.contentType !== StatusMessage.ContentType.Image
+                onClicked: {
+                    d.setMessageActive(root.messageId, true);
+                    root.messageClickHandler(this, Qt.point(mouse.x, mouse.y),
+                                             false, false, false, null, root.isEmoji, false, false, false, "");
+                }
+            }
+
+            messageDetails: StatusMessageDetails {
+                contentType: delegate.contentType
+                messageText: root.messageText
+                messageContent: {
+                    switch (delegate.contentType)
+                    {
+                    case StatusMessage.ContentType.Sticker:
+                        return root.sticker;
+                    case StatusMessage.ContentType.Image:
+                        return root.messageImage;
+                    }
+                    return "";
+                }
+
+                amISender: root.amISender
+                sender.id: root.senderId
+                sender.userName: root.senderDisplayName
+                sender.localName: root.senderLocalName
+                sender.ensName: root.senderEnsName
+                sender.isContact: root.senderIsAdded
+                sender.trustIndicator: root.senderTrustStatus
+                sender.profileImage {
+                    width: 40
+                    height: 40
+                    pubkey: root.senderId
+                    source: root.senderIcon || ""
+                    colorId: Utils.colorIdForPubkey(root.senderId)
+                    colorHash: Utils.getColorHashAsJson(root.senderId)
+                }
+
+            }
+
+            replyDetails: StatusMessageDetails {
+                messageText:  delegate.replyMessage ? delegate.replyMessage.messageText : ""
+                contentType: delegate.replyMessage ? delegate.convertContentType(delegate.replyMessage.contentType) : 0
+                messageContent: {
+                    if (!delegate.replyMessage)
+                        return "";
+                    switch (contentType) {
+                    case StatusMessage.ContentType.Sticker:
+                        return delegate.replyMessage.sticker;
+                    case StatusMessage.ContentType.Image:
+                        return delegate.replyMessage.messageImage;
+                    }
+                    return "";
+                }
+
+                amISender: delegate.replyMessage && delegate.replyMessage.amISender
+                sender.id: delegate.replyMessage ? delegate.replyMessage.senderId : ""
+                sender.isContact: delegate.replyMessage && delegate.replyMessage.senderIsAdded
+                sender.userName:  delegate.replyMessage ? delegate.replyMessage.senderDisplayName: ""
+                sender.ensName: delegate.replyMessage && delegate.replyMessage.ensVerified ? delegate.replyMessage.senderDisplayName : ""
+                sender.localName: delegate.replyMessage ? delegate.replyMessage.senderLocalName : ""
+                sender.profileImage {
+                    width: 20
+                    height: 20
+                    pubkey: delegate.replySenderId
+                    source:  delegate.replyMessage ? delegate.replyMessage.senderIcon: ""
+                    colorId: Utils.colorIdForPubkey(delegate.replySenderId)
+                    colorHash: Utils.getColorHashAsJson(delegate.replySenderId)
+                }
+            }
+
+            statusChatInput: StatusChatInput {
+                id: editTextInput
+
+                readonly property string messageText: editTextInput.textInput.text
+
+                // TODO: Move this property and Escape handler to StatusChatInput
+                property bool suggestionsOpened: false
+
+                width: parent.width
+
+                Keys.onEscapePressed: {
+                    if (!suggestionsOpened) {
+                        delegate.editCancelled()
+                    }
+                    suggestionsOpened = false
+                }
+
+                store: root.rootStore
+                usersStore: root.usersStore
+                emojiPopup: root.emojiPopup
+                messageContextMenu: root.messageContextMenu
+
+                chatType: root.messageStore.getChatType()
+                isEdit: true
+
+                onSendMessage: {
+                    delegate.editCompletedHandler(editTextInput.textInput.text)
+                }
+
+                suggestions.onVisibleChanged: {
+                    if (suggestions.visible) {
+                        suggestionsOpened = true
+                    }
+                }
+
+                Component.onCompleted: {
+                    parseMessage(root.messageText);
+                }
+            }
+
+            linksComponent: Component {
+                LinksMessageView {
+                    linkUrls: root.linkUrls
+                    container: root
+                    messageStore: root.messageStore
+                    store: root.rootStore
+                    isCurrentUser: root.amISender
+                }
+            }
+
+            transcationComponent: Component {
+                TransactionBubbleView {
+                    transactionParams: root.transactionParams
+                    store: root.rootStore
+                    contactsStore: root.contactsStore
+                }
+            }
+
+            invitationComponent: Component {
+                InvitationBubbleView {
+                    store: root.rootStore
+                    communityId: root.communityId
+                }
+            }
+
+            quickActions: [
+                Loader {
+                    active: !root.isInPinnedPopup
+                    sourceComponent: StatusFlatRoundButton {
+                        width: d.chatButtonSize
+                        height: d.chatButtonSize
+                        icon.name: "reaction-b"
+                        type: StatusFlatRoundButton.Type.Tertiary
+                        tooltip.text: qsTr("Add reaction")
+                        onClicked: {
+                            d.setMessageActive(root.messageId, true)
+                            root.messageClickHandler(this, Qt.point(mouse.x, mouse.y), false, false, false, null, true, false)
+                        }
+                    }
+                },
+                Loader {
+                    active: !root.isInPinnedPopup
+                    sourceComponent: StatusFlatRoundButton {
+                        width: d.chatButtonSize
+                        height: d.chatButtonSize
+                        icon.name: "reply"
+                        type: StatusFlatRoundButton.Type.Tertiary
+                        tooltip.text: qsTr("Reply")
+                        onClicked: {
+                            root.showReplyArea(root.messageId, root.senderId)
+                            if (messageContextMenu.closeParentPopup) {
+                                messageContextMenu.closeParentPopup()
+                            }
+                        }
+                    }
+                },
+                Loader {
+                    active: !root.isInPinnedPopup && root.isText && !root.editModeOn && root.amISender
+                    visible: active
+                    sourceComponent: StatusFlatRoundButton {
+                        width: d.chatButtonSize
+                        height: d.chatButtonSize
+                        icon.name: "edit_pencil"
+                        type: StatusFlatRoundButton.Type.Tertiary
+                        tooltip.text: qsTr("Edit")
+                        onClicked: {
+                            root.messageStore.setEditModeOn(root.messageId)
+                        }
+                    }
+                },
+                Loader {
+                    active: {
+                        if (!root.messageStore)
+                            return false
+
+                        const chatType = root.messageStore.getChatType();
+                        const amIChatAdmin = root.messageStore.amIChatAdmin();
+                        const pinMessageAllowedForMembers = root.messageStore.pinMessageAllowedForMembers()
+
+                        return chatType === Constants.chatType.oneToOne ||
+                                chatType === Constants.chatType.privateGroupChat && amIChatAdmin ||
+                                chatType === Constants.chatType.communityChat && (amIChatAdmin || pinMessageAllowedForMembers);
+
+                    }
+                    sourceComponent: StatusFlatRoundButton {
+                        width: d.chatButtonSize
+                        height: d.chatButtonSize
+                        icon.name: root.pinnedMessage ? "unpin" : "pin"
+                        type: StatusFlatRoundButton.Type.Tertiary
+                        tooltip.text: root.pinnedMessage ? qsTr("Unpin") : qsTr("Pin")
+                        onClicked: {
+                            if (root.pinnedMessage) {
+                                messageStore.unpinMessage(root.messageId)
+                                return;
+                            }
+
+                            if (d.canPin) {
+                                messageStore.pinMessage(root.messageId)
+                                return;
+                            }
+
+                            if (!chatContentModule) {
+                                console.warn("error on open pinned messages limit reached from message context menu - chat content module is not set")
+                                return;
+                            }
+
+                            Global.openPopup(pinnedMessagesPopupComponent, {
+                                                 store: root.rootStore,
+                                                 messageStore: messageStore,
+                                                 pinnedMessagesModel: chatContentModule.pinnedMessagesModel,
+                                                 messageToPin: root.messageId
+                                             });
+                        }
+                    }
+                },
+                Loader {
+                    active: {
+                        if (root.isInPinnedPopup)
+                            return false;
+                        if (!root.messageStore)
+                            return false;
+                        const isMyMessage = senderId !== "" && senderId === userProfile.pubKey;
+                        const chatType = root.messageStore.getChatType();
+                        return isMyMessage &&
+                                (messageContentType === Constants.messageContentType.messageType ||
+                                 messageContentType === Constants.messageContentType.stickerType ||
+                                 messageContentType === Constants.messageContentType.emojiType ||
+                                 messageContentType === Constants.messageContentType.imageType ||
+                                 messageContentType === Constants.messageContentType.audioType);
+                    }
+                    sourceComponent: StatusFlatRoundButton {
+                        width: d.chatButtonSize
+                        height: d.chatButtonSize
+                        icon.name: "delete"
+                        type: StatusFlatRoundButton.Type.Tertiary
+                        tooltip.text: qsTr("Delete")
+                        onClicked: {
+                            if (!localAccountSensitiveSettings.showDeleteMessageWarning) {
+                                messageStore.deleteMessage(root.messageId)
+                            }
+                            else {
+                                Global.openPopup(deleteMessageConfirmationDialogComponent)
+                            }
+                        }
+                    }
+                }
+            ]
+        }
+    }
+
+    Component {
+        id: deleteMessageConfirmationDialogComponent
+
+        ConfirmationDialog {
+            header.title: qsTrId("Confirm deleting this message")
+            confirmationText: qsTrId("Are you sure you want to delete this message? Be aware that other clients are not guaranteed to delete the message as well.")
+            height: 260
+            checkbox.visible: true
+            executeConfirm: function () {
+                if (checkbox.checked) {
+                    localAccountSensitiveSettings.showDeleteMessageWarning = false
+                }
+
+                close()
+                messageStore.deleteMessage(root.messageId)
+            }
+            onClosed: {
+                destroy()
+            }
         }
     }
 }
diff --git a/ui/imports/shared/views/chat/TransactionBubbleView.qml b/ui/imports/shared/views/chat/TransactionBubbleView.qml
index 1ad44efc36..7b6d53a6eb 100644
--- a/ui/imports/shared/views/chat/TransactionBubbleView.qml
+++ b/ui/imports/shared/views/chat/TransactionBubbleView.qml
@@ -250,7 +250,7 @@ Item {
         StyledText {
             id: timeText
             color: Style.current.secondaryText
-            text: Utils.formatShortTime(timestamp, RootStore.accountSensitiveSettings.is24hTimeFormat)
+            text: Utils.formatShortTime(messageTimestamp, RootStore.accountSensitiveSettings.is24hTimeFormat)
             anchors.left: bubbleLoader.active ? bubbleLoader.right : undefined
             anchors.leftMargin: bubbleLoader.active ? 13 : 0
             anchors.right: bubbleLoader.active ? undefined : parent.right
diff --git a/ui/imports/shared/xss.js b/ui/imports/shared/xss.js
deleted file mode 100644
index f502efa36f..0000000000
--- a/ui/imports/shared/xss.js
+++ /dev/null
@@ -1,1318 +0,0 @@
-/**
- * NOTICE:
- *
- * Most this code was copied from https://github.com/leizongmin/js-xss and slightly modifed
- * to work with JavaScript resource loading in QML.
- */
-
-var defaultCSSFilter = new FilterCSS();
-
-var DEFAULT = {
-  whiteList: getDefaultWhiteList(),
-  getDefaultWhiteList,
-  onTag,
-  onIgnoreTag,
-  onTagAttr,
-  onIgnoreTagAttr,
-  safeAttrValue,
-  escapeHtml,
-  escapeQuote,
-  unescapeQuote,
-  escapeHtmlEntities,
-  escapeDangerHtml5Entities,
-  clearNonPrintableCharacter,
-  friendlyAttrValue,
-  escapeAttrValue,
-  onIgnoreTagStripAll,
-  StripTagBody,
-  stripCommentTag ,
-  stripBlankChar,
-  cssFilter: defaultCSSFilter,
-  getDefaultCSSWhiteList,
-}
-
-/**
- * shallow copy
- *
- * @param {Object} obj
- * @return {Object}
- */
-function shallowCopyObject(obj) {
-  var ret = {};
-  for (var i in obj) {
-    ret[i] = obj[i];
-  }
-  return ret;
-}
-
-
-var _ = {
-  indexOf: function(arr, item) {
-    var i, j;
-    if (Array.prototype.indexOf) {
-      return arr.indexOf(item);
-    }
-    for (i = 0, j = arr.length; i < j; i++) {
-      if (arr[i] === item) {
-        return i;
-      }
-    }
-    return -1;
-  },
-  forEach: function(arr, fn, scope) {
-    var i, j;
-    if (Array.prototype.forEach) {
-      return arr.forEach(fn, scope);
-    }
-    for (i = 0, j = arr.length; i < j; i++) {
-      fn.call(scope, arr[i], i, arr);
-    }
-  },
-  trim: function(str) {
-    if (String.prototype.trim) {
-      return str.trim();
-    }
-    return str.replace(/(^\s*)|(\s*$)/g, "");
-  },
-  spaceIndex: function(str) {
-    var reg = /\s|\n|\t/;
-    var match = reg.exec(str);
-    return match ? match.index : -1;
-  }
-};
-
-function filterXSS(html, options) {
-  var xss = new FilterXSS(options);
-  return xss.process(html);
-}
-
-function onAttr (name, value, options) {
-  // do nothing
-}
-
-function onIgnoreAttr (name, value, options) {
-  // do nothing
-}
-
-/**
- * FilterXSS class
- *
- * @param {Object} options
- *        whiteList, onTag, onTagAttr, onIgnoreTag,
- *        onIgnoreTagAttr, safeAttrValue, escapeHtml
- *        stripIgnoreTagBody, allowCommentTag, stripBlankChar
- *        css{whiteList, onAttr, onIgnoreAttr} `css=false` means don't use `cssfilter`
- */
-function FilterXSS(options) {
-  options = shallowCopyObject(options || {});
-
-  if (options.stripIgnoreTag) {
-    if (options.onIgnoreTag) {
-      console.error(
-        'Notes: cannot use these two options "stripIgnoreTag" and "onIgnoreTag" at the same time'
-      );
-    }
-    options.onIgnoreTag = onIgnoreTagStripAll;
-  }
-
-  options.whiteList = options.whiteList || getDefaultWhiteList();
-  options.onTag = options.onTag || onTag;
-  options.onTagAttr = options.onTagAttr || onTagAttr;
-  options.onIgnoreTag = options.onIgnoreTag || onIgnoreTag;
-  options.onIgnoreTagAttr = options.onIgnoreTagAttr || onIgnoreTagAttr;
-  options.safeAttrValue = options.safeAttrValue || safeAttrValue;
-  options.escapeHtml = options.escapeHtml || escapeHtml;
-  this.options = options;
-
-  if (options.css === false) {
-    this.cssFilter = false;
-  } else {
-    options.css = options.css || {};
-    this.cssFilter = new FilterCSS(options.css);
-  }
-}
-
-/**
- * start process and returns result
- *
- * @param {String} html
- * @return {String}
- */
-FilterXSS.prototype.process = function(html) {
-  // compatible with the input
-  html = html || "";
-  html = html.toString();
-  if (!html) return "";
-
-  var me = this;
-  var options = me.options;
-  var whiteList = options.whiteList;
-  var onTag = options.onTag;
-  var onIgnoreTag = options.onIgnoreTag;
-  var onTagAttr = options.onTagAttr;
-  var onIgnoreTagAttr = options.onIgnoreTagAttr;
-  var safeAttrValue = options.safeAttrValue;
-  var escapeHtml = options.escapeHtml;
-  var cssFilter = me.cssFilter;
-
-  // remove invisible characters
-  if (options.stripBlankChar) {
-    html = stripBlankChar(html);
-  }
-
-  // remove html comments
-  if (!options.allowCommentTag) {
-    html = stripCommentTag(html);
-  }
-
-  // if enable stripIgnoreTagBody
-  var stripIgnoreTagBody = false;
-  if (options.stripIgnoreTagBody) {
-    var stripIgnoreTagBody = StripTagBody(
-      options.stripIgnoreTagBody,
-      onIgnoreTag
-    );
-    onIgnoreTag = stripIgnoreTagBody.onIgnoreTag;
-  }
-
-  var retHtml = parseTag(
-    html,
-    function(sourcePosition, position, tag, html, isClosing) {
-      var info = {
-        sourcePosition: sourcePosition,
-        position: position,
-        isClosing: isClosing,
-        isWhite: whiteList.hasOwnProperty(tag)
-      };
-
-      // call `onTag()`
-      var ret = onTag(tag, html, info);
-      if (!isNull(ret)) return ret;
-
-      if (info.isWhite) {
-        if (info.isClosing) {
-          return "</" + tag + ">";
-        }
-
-        var attrs = getAttrs(html);
-        var whiteAttrList = whiteList[tag];
-        var attrsHtml = parseAttr(attrs.html, function(name, value) {
-          // call `onTagAttr()`
-          var isWhiteAttr = _.indexOf(whiteAttrList, name) !== -1;
-          var ret = onTagAttr(tag, name, value, isWhiteAttr);
-          if (!isNull(ret)) return ret;
-
-          if (isWhiteAttr) {
-            // call `safeAttrValue()`
-            value = safeAttrValue(tag, name, value, cssFilter);
-            if (value) {
-              return name + '="' + value + '"';
-            } else {
-              return name;
-            }
-          } else {
-            // call `onIgnoreTagAttr()`
-            var ret = onIgnoreTagAttr(tag, name, value, isWhiteAttr);
-            if (!isNull(ret)) return ret;
-            return;
-          }
-        });
-
-        // build new tag html
-        var html = "<" + tag;
-        if (attrsHtml) html += " " + attrsHtml;
-        if (attrs.closing) html += " /";
-        html += ">";
-        return html;
-      } else {
-        // call `onIgnoreTag()`
-        var ret = onIgnoreTag(tag, html, info);
-        if (!isNull(ret)) return ret;
-        return escapeHtml(html);
-      }
-    },
-    escapeHtml
-  );
-
-  // if enable stripIgnoreTagBody
-  if (stripIgnoreTagBody) {
-    retHtml = stripIgnoreTagBody.remove(retHtml);
-  }
-
-  return retHtml;
-};
-
-
-function getDefaultWhiteList() {
-  return {
-    a: ["target", "href", "title", "class"],
-    abbr: ["title"],
-    address: [],
-    area: ["shape", "coords", "href", "alt"],
-    article: [],
-    aside: [],
-    audio: ["autoplay", "controls", "loop", "preload", "src"],
-    b: [],
-    bdi: ["dir"],
-    bdo: ["dir"],
-    big: [],
-    blockquote: ["cite"],
-    br: [],
-    caption: [],
-    center: [],
-    cite: [],
-    code: [],
-    col: ["align", "valign", "span", "width"],
-    colgroup: ["align", "valign", "span", "width"],
-    dd: [],
-    del: ["datetime"],
-    details: ["open"],
-    div: [],
-    dl: [],
-    dt: [],
-    em: [],
-    font: ["color", "size", "face"],
-    footer: [],
-    h1: [],
-    h2: [],
-    h3: [],
-    h4: [],
-    h5: [],
-    h6: [],
-    header: [],
-    hr: [],
-    i: [],
-    img: ["src", "alt", "title", "width", "height"],
-    ins: ["datetime"],
-    li: [],
-    mark: [],
-    nav: [],
-    ol: [],
-    p: [],
-    pre: [],
-    s: [],
-    section: [],
-    small: [],
-    span: [],
-    sub: [],
-    sup: [],
-    strong: [],
-    table: ["width", "height", "border", "bgcolor", "cellspacing", "cellpadding", "class"],
-    tbody: ["align", "valign"],
-    td: ["width", "bgcolor", "rowspan", "colspan", "align", "valign", "class"],
-    tfoot: ["align", "valign"],
-    th: ["width", "rowspan", "colspan", "align", "valign"],
-    thead: ["align", "valign"],
-    tr: ["rowspan", "align", "valign"],
-    tt: [],
-    u: [],
-    ul: [],
-    video: ["autoplay", "controls", "loop", "preload", "src", "height", "width"]
-  };
-}
-
-function getDefaultCSSWhiteList () {
-  // 白名单值说明：
-  // true: 允许该属性
-  // Function: function (val) { } 返回true表示允许该属性，其他值均表示不允许
-  // RegExp: regexp.test(val) 返回true表示允许该属性，其他值均表示不允许
-  // 除上面列出的值外均表示不允许
-  var whiteList = {};
-
-  whiteList['align-content'] = false; // default: auto
-  whiteList['align-items'] = false; // default: auto
-  whiteList['align-self'] = false; // default: auto
-  whiteList['alignment-adjust'] = false; // default: auto
-  whiteList['alignment-baseline'] = false; // default: baseline
-  whiteList['all'] = false; // default: depending on individual properties
-  whiteList['anchor-point'] = false; // default: none
-  whiteList['animation'] = false; // default: depending on individual properties
-  whiteList['animation-delay'] = false; // default: 0
-  whiteList['animation-direction'] = false; // default: normal
-  whiteList['animation-duration'] = false; // default: 0
-  whiteList['animation-fill-mode'] = false; // default: none
-  whiteList['animation-iteration-count'] = false; // default: 1
-  whiteList['animation-name'] = false; // default: none
-  whiteList['animation-play-state'] = false; // default: running
-  whiteList['animation-timing-function'] = false; // default: ease
-  whiteList['azimuth'] = false; // default: center
-  whiteList['backface-visibility'] = false; // default: visible
-  whiteList['background'] = true; // default: depending on individual properties
-  whiteList['background-attachment'] = true; // default: scroll
-  whiteList['background-clip'] = true; // default: border-box
-  whiteList['background-color'] = true; // default: transparent
-  whiteList['background-image'] = true; // default: none
-  whiteList['background-origin'] = true; // default: padding-box
-  whiteList['background-position'] = true; // default: 0% 0%
-  whiteList['background-repeat'] = true; // default: repeat
-  whiteList['background-size'] = true; // default: auto
-  whiteList['baseline-shift'] = false; // default: baseline
-  whiteList['binding'] = false; // default: none
-  whiteList['bleed'] = false; // default: 6pt
-  whiteList['bookmark-label'] = false; // default: content()
-  whiteList['bookmark-level'] = false; // default: none
-  whiteList['bookmark-state'] = false; // default: open
-  whiteList['border'] = true; // default: depending on individual properties
-  whiteList['border-bottom'] = true; // default: depending on individual properties
-  whiteList['border-bottom-color'] = true; // default: current color
-  whiteList['border-bottom-left-radius'] = true; // default: 0
-  whiteList['border-bottom-right-radius'] = true; // default: 0
-  whiteList['border-bottom-style'] = true; // default: none
-  whiteList['border-bottom-width'] = true; // default: medium
-  whiteList['border-collapse'] = true; // default: separate
-  whiteList['border-color'] = true; // default: depending on individual properties
-  whiteList['border-image'] = true; // default: none
-  whiteList['border-image-outset'] = true; // default: 0
-  whiteList['border-image-repeat'] = true; // default: stretch
-  whiteList['border-image-slice'] = true; // default: 100%
-  whiteList['border-image-source'] = true; // default: none
-  whiteList['border-image-width'] = true; // default: 1
-  whiteList['border-left'] = true; // default: depending on individual properties
-  whiteList['border-left-color'] = true; // default: current color
-  whiteList['border-left-style'] = true; // default: none
-  whiteList['border-left-width'] = true; // default: medium
-  whiteList['border-radius'] = true; // default: 0
-  whiteList['border-right'] = true; // default: depending on individual properties
-  whiteList['border-right-color'] = true; // default: current color
-  whiteList['border-right-style'] = true; // default: none
-  whiteList['border-right-width'] = true; // default: medium
-  whiteList['border-spacing'] = true; // default: 0
-  whiteList['border-style'] = true; // default: depending on individual properties
-  whiteList['border-top'] = true; // default: depending on individual properties
-  whiteList['border-top-color'] = true; // default: current color
-  whiteList['border-top-left-radius'] = true; // default: 0
-  whiteList['border-top-right-radius'] = true; // default: 0
-  whiteList['border-top-style'] = true; // default: none
-  whiteList['border-top-width'] = true; // default: medium
-  whiteList['border-width'] = true; // default: depending on individual properties
-  whiteList['bottom'] = false; // default: auto
-  whiteList['box-decoration-break'] = true; // default: slice
-  whiteList['box-shadow'] = true; // default: none
-  whiteList['box-sizing'] = true; // default: content-box
-  whiteList['box-snap'] = true; // default: none
-  whiteList['box-suppress'] = true; // default: show
-  whiteList['break-after'] = true; // default: auto
-  whiteList['break-before'] = true; // default: auto
-  whiteList['break-inside'] = true; // default: auto
-  whiteList['caption-side'] = false; // default: top
-  whiteList['chains'] = false; // default: none
-  whiteList['clear'] = true; // default: none
-  whiteList['clip'] = false; // default: auto
-  whiteList['clip-path'] = false; // default: none
-  whiteList['clip-rule'] = false; // default: nonzero
-  whiteList['color'] = true; // default: implementation dependent
-  whiteList['color-interpolation-filters'] = true; // default: auto
-  whiteList['column-count'] = false; // default: auto
-  whiteList['column-fill'] = false; // default: balance
-  whiteList['column-gap'] = false; // default: normal
-  whiteList['column-rule'] = false; // default: depending on individual properties
-  whiteList['column-rule-color'] = false; // default: current color
-  whiteList['column-rule-style'] = false; // default: medium
-  whiteList['column-rule-width'] = false; // default: medium
-  whiteList['column-span'] = false; // default: none
-  whiteList['column-width'] = false; // default: auto
-  whiteList['columns'] = false; // default: depending on individual properties
-  whiteList['contain'] = false; // default: none
-  whiteList['content'] = false; // default: normal
-  whiteList['counter-increment'] = false; // default: none
-  whiteList['counter-reset'] = false; // default: none
-  whiteList['counter-set'] = false; // default: none
-  whiteList['crop'] = false; // default: auto
-  whiteList['cue'] = false; // default: depending on individual properties
-  whiteList['cue-after'] = false; // default: none
-  whiteList['cue-before'] = false; // default: none
-  whiteList['cursor'] = false; // default: auto
-  whiteList['direction'] = false; // default: ltr
-  whiteList['display'] = true; // default: depending on individual properties
-  whiteList['display-inside'] = true; // default: auto
-  whiteList['display-list'] = true; // default: none
-  whiteList['display-outside'] = true; // default: inline-level
-  whiteList['dominant-baseline'] = false; // default: auto
-  whiteList['elevation'] = false; // default: level
-  whiteList['empty-cells'] = false; // default: show
-  whiteList['filter'] = false; // default: none
-  whiteList['flex'] = false; // default: depending on individual properties
-  whiteList['flex-basis'] = false; // default: auto
-  whiteList['flex-direction'] = false; // default: row
-  whiteList['flex-flow'] = false; // default: depending on individual properties
-  whiteList['flex-grow'] = false; // default: 0
-  whiteList['flex-shrink'] = false; // default: 1
-  whiteList['flex-wrap'] = false; // default: nowrap
-  whiteList['float'] = false; // default: none
-  whiteList['float-offset'] = false; // default: 0 0
-  whiteList['flood-color'] = false; // default: black
-  whiteList['flood-opacity'] = false; // default: 1
-  whiteList['flow-from'] = false; // default: none
-  whiteList['flow-into'] = false; // default: none
-  whiteList['font'] = true; // default: depending on individual properties
-  whiteList['font-family'] = true; // default: implementation dependent
-  whiteList['font-feature-settings'] = true; // default: normal
-  whiteList['font-kerning'] = true; // default: auto
-  whiteList['font-language-override'] = true; // default: normal
-  whiteList['font-size'] = true; // default: medium
-  whiteList['font-size-adjust'] = true; // default: none
-  whiteList['font-stretch'] = true; // default: normal
-  whiteList['font-style'] = true; // default: normal
-  whiteList['font-synthesis'] = true; // default: weight style
-  whiteList['font-variant'] = true; // default: normal
-  whiteList['font-variant-alternates'] = true; // default: normal
-  whiteList['font-variant-caps'] = true; // default: normal
-  whiteList['font-variant-east-asian'] = true; // default: normal
-  whiteList['font-variant-ligatures'] = true; // default: normal
-  whiteList['font-variant-numeric'] = true; // default: normal
-  whiteList['font-variant-position'] = true; // default: normal
-  whiteList['font-weight'] = true; // default: normal
-  whiteList['grid'] = false; // default: depending on individual properties
-  whiteList['grid-area'] = false; // default: depending on individual properties
-  whiteList['grid-auto-columns'] = false; // default: auto
-  whiteList['grid-auto-flow'] = false; // default: none
-  whiteList['grid-auto-rows'] = false; // default: auto
-  whiteList['grid-column'] = false; // default: depending on individual properties
-  whiteList['grid-column-end'] = false; // default: auto
-  whiteList['grid-column-start'] = false; // default: auto
-  whiteList['grid-row'] = false; // default: depending on individual properties
-  whiteList['grid-row-end'] = false; // default: auto
-  whiteList['grid-row-start'] = false; // default: auto
-  whiteList['grid-template'] = false; // default: depending on individual properties
-  whiteList['grid-template-areas'] = false; // default: none
-  whiteList['grid-template-columns'] = false; // default: none
-  whiteList['grid-template-rows'] = false; // default: none
-  whiteList['hanging-punctuation'] = false; // default: none
-  whiteList['height'] = true; // default: auto
-  whiteList['hyphens'] = false; // default: manual
-  whiteList['icon'] = false; // default: auto
-  whiteList['image-orientation'] = false; // default: auto
-  whiteList['image-resolution'] = false; // default: normal
-  whiteList['ime-mode'] = false; // default: auto
-  whiteList['initial-letters'] = false; // default: normal
-  whiteList['inline-box-align'] = false; // default: last
-  whiteList['justify-content'] = false; // default: auto
-  whiteList['justify-items'] = false; // default: auto
-  whiteList['justify-self'] = false; // default: auto
-  whiteList['left'] = false; // default: auto
-  whiteList['letter-spacing'] = true; // default: normal
-  whiteList['lighting-color'] = true; // default: white
-  whiteList['line-box-contain'] = false; // default: block inline replaced
-  whiteList['line-break'] = false; // default: auto
-  whiteList['line-grid'] = false; // default: match-parent
-  whiteList['line-height'] = false; // default: normal
-  whiteList['line-snap'] = false; // default: none
-  whiteList['line-stacking'] = false; // default: depending on individual properties
-  whiteList['line-stacking-ruby'] = false; // default: exclude-ruby
-  whiteList['line-stacking-shift'] = false; // default: consider-shifts
-  whiteList['line-stacking-strategy'] = false; // default: inline-line-height
-  whiteList['list-style'] = true; // default: depending on individual properties
-  whiteList['list-style-image'] = true; // default: none
-  whiteList['list-style-position'] = true; // default: outside
-  whiteList['list-style-type'] = true; // default: disc
-  whiteList['margin'] = true; // default: depending on individual properties
-  whiteList['margin-bottom'] = true; // default: 0
-  whiteList['margin-left'] = true; // default: 0
-  whiteList['margin-right'] = true; // default: 0
-  whiteList['margin-top'] = true; // default: 0
-  whiteList['marker-offset'] = false; // default: auto
-  whiteList['marker-side'] = false; // default: list-item
-  whiteList['marks'] = false; // default: none
-  whiteList['mask'] = false; // default: border-box
-  whiteList['mask-box'] = false; // default: see individual properties
-  whiteList['mask-box-outset'] = false; // default: 0
-  whiteList['mask-box-repeat'] = false; // default: stretch
-  whiteList['mask-box-slice'] = false; // default: 0 fill
-  whiteList['mask-box-source'] = false; // default: none
-  whiteList['mask-box-width'] = false; // default: auto
-  whiteList['mask-clip'] = false; // default: border-box
-  whiteList['mask-image'] = false; // default: none
-  whiteList['mask-origin'] = false; // default: border-box
-  whiteList['mask-position'] = false; // default: center
-  whiteList['mask-repeat'] = false; // default: no-repeat
-  whiteList['mask-size'] = false; // default: border-box
-  whiteList['mask-source-type'] = false; // default: auto
-  whiteList['mask-type'] = false; // default: luminance
-  whiteList['max-height'] = true; // default: none
-  whiteList['max-lines'] = false; // default: none
-  whiteList['max-width'] = true; // default: none
-  whiteList['min-height'] = true; // default: 0
-  whiteList['min-width'] = true; // default: 0
-  whiteList['move-to'] = false; // default: normal
-  whiteList['nav-down'] = false; // default: auto
-  whiteList['nav-index'] = false; // default: auto
-  whiteList['nav-left'] = false; // default: auto
-  whiteList['nav-right'] = false; // default: auto
-  whiteList['nav-up'] = false; // default: auto
-  whiteList['object-fit'] = false; // default: fill
-  whiteList['object-position'] = false; // default: 50% 50%
-  whiteList['opacity'] = false; // default: 1
-  whiteList['order'] = false; // default: 0
-  whiteList['orphans'] = false; // default: 2
-  whiteList['outline'] = false; // default: depending on individual properties
-  whiteList['outline-color'] = false; // default: invert
-  whiteList['outline-offset'] = false; // default: 0
-  whiteList['outline-style'] = false; // default: none
-  whiteList['outline-width'] = false; // default: medium
-  whiteList['overflow'] = false; // default: depending on individual properties
-  whiteList['overflow-wrap'] = false; // default: normal
-  whiteList['overflow-x'] = false; // default: visible
-  whiteList['overflow-y'] = false; // default: visible
-  whiteList['padding'] = true; // default: depending on individual properties
-  whiteList['padding-bottom'] = true; // default: 0
-  whiteList['padding-left'] = true; // default: 0
-  whiteList['padding-right'] = true; // default: 0
-  whiteList['padding-top'] = true; // default: 0
-  whiteList['page'] = false; // default: auto
-  whiteList['page-break-after'] = false; // default: auto
-  whiteList['page-break-before'] = false; // default: auto
-  whiteList['page-break-inside'] = false; // default: auto
-  whiteList['page-policy'] = false; // default: start
-  whiteList['pause'] = false; // default: implementation dependent
-  whiteList['pause-after'] = false; // default: implementation dependent
-  whiteList['pause-before'] = false; // default: implementation dependent
-  whiteList['perspective'] = false; // default: none
-  whiteList['perspective-origin'] = false; // default: 50% 50%
-  whiteList['pitch'] = false; // default: medium
-  whiteList['pitch-range'] = false; // default: 50
-  whiteList['play-during'] = false; // default: auto
-  whiteList['position'] = false; // default: static
-  whiteList['presentation-level'] = false; // default: 0
-  whiteList['quotes'] = false; // default: text
-  whiteList['region-fragment'] = false; // default: auto
-  whiteList['resize'] = false; // default: none
-  whiteList['rest'] = false; // default: depending on individual properties
-  whiteList['rest-after'] = false; // default: none
-  whiteList['rest-before'] = false; // default: none
-  whiteList['richness'] = false; // default: 50
-  whiteList['right'] = false; // default: auto
-  whiteList['rotation'] = false; // default: 0
-  whiteList['rotation-point'] = false; // default: 50% 50%
-  whiteList['ruby-align'] = false; // default: auto
-  whiteList['ruby-merge'] = false; // default: separate
-  whiteList['ruby-position'] = false; // default: before
-  whiteList['shape-image-threshold'] = false; // default: 0.0
-  whiteList['shape-outside'] = false; // default: none
-  whiteList['shape-margin'] = false; // default: 0
-  whiteList['size'] = false; // default: auto
-  whiteList['speak'] = false; // default: auto
-  whiteList['speak-as'] = false; // default: normal
-  whiteList['speak-header'] = false; // default: once
-  whiteList['speak-numeral'] = false; // default: continuous
-  whiteList['speak-punctuation'] = false; // default: none
-  whiteList['speech-rate'] = false; // default: medium
-  whiteList['stress'] = false; // default: 50
-  whiteList['string-set'] = false; // default: none
-  whiteList['tab-size'] = false; // default: 8
-  whiteList['table-layout'] = false; // default: auto
-  whiteList['text-align'] = true; // default: start
-  whiteList['text-align-last'] = true; // default: auto
-  whiteList['text-combine-upright'] = true; // default: none
-  whiteList['text-decoration'] = true; // default: none
-  whiteList['text-decoration-color'] = true; // default: currentColor
-  whiteList['text-decoration-line'] = true; // default: none
-  whiteList['text-decoration-skip'] = true; // default: objects
-  whiteList['text-decoration-style'] = true; // default: solid
-  whiteList['text-emphasis'] = true; // default: depending on individual properties
-  whiteList['text-emphasis-color'] = true; // default: currentColor
-  whiteList['text-emphasis-position'] = true; // default: over right
-  whiteList['text-emphasis-style'] = true; // default: none
-  whiteList['text-height'] = true; // default: auto
-  whiteList['text-indent'] = true; // default: 0
-  whiteList['text-justify'] = true; // default: auto
-  whiteList['text-orientation'] = true; // default: mixed
-  whiteList['text-overflow'] = true; // default: clip
-  whiteList['text-shadow'] = true; // default: none
-  whiteList['text-space-collapse'] = true; // default: collapse
-  whiteList['text-transform'] = true; // default: none
-  whiteList['text-underline-position'] = true; // default: auto
-  whiteList['text-wrap'] = true; // default: normal
-  whiteList['top'] = false; // default: auto
-  whiteList['transform'] = false; // default: none
-  whiteList['transform-origin'] = false; // default: 50% 50% 0
-  whiteList['transform-style'] = false; // default: flat
-  whiteList['transition'] = false; // default: depending on individual properties
-  whiteList['transition-delay'] = false; // default: 0s
-  whiteList['transition-duration'] = false; // default: 0s
-  whiteList['transition-property'] = false; // default: all
-  whiteList['transition-timing-function'] = false; // default: ease
-  whiteList['unicode-bidi'] = false; // default: normal
-  whiteList['vertical-align'] = false; // default: baseline
-  whiteList['visibility'] = false; // default: visible
-  whiteList['voice-balance'] = false; // default: center
-  whiteList['voice-duration'] = false; // default: auto
-  whiteList['voice-family'] = false; // default: implementation dependent
-  whiteList['voice-pitch'] = false; // default: medium
-  whiteList['voice-range'] = false; // default: medium
-  whiteList['voice-rate'] = false; // default: normal
-  whiteList['voice-stress'] = false; // default: normal
-  whiteList['voice-volume'] = false; // default: medium
-  whiteList['volume'] = false; // default: medium
-  whiteList['white-space'] = false; // default: normal
-  whiteList['widows'] = false; // default: 2
-  whiteList['width'] = true; // default: auto
-  whiteList['will-change'] = false; // default: auto
-  whiteList['word-break'] = true; // default: normal
-  whiteList['word-spacing'] = true; // default: normal
-  whiteList['word-wrap'] = true; // default: normal
-  whiteList['wrap-flow'] = false; // default: auto
-  whiteList['wrap-through'] = false; // default: wrap
-  whiteList['writing-mode'] = false; // default: horizontal-tb
-  whiteList['z-index'] = false; // default: auto
-
-  return whiteList;
-}
-
-
-/**
- * 创建CSS过滤器
- *
- * @param {Object} options
- *   - {Object} whiteList
- *   - {Function} onAttr
- *   - {Function} onIgnoreAttr
- *   - {Function} safeAttrValue
- */
-function FilterCSS (options) {
-  options = shallowCopyObject(options || {});
-  options.whiteList = options.whiteList || getDefaultWhiteList()
-  options.onAttr = options.onAttr || onAttr;
-  options.onIgnoreAttr = options.onIgnoreAttr || onIgnoreAttr;
-  options.safeAttrValue = options.safeAttrValue || safeAttrValue;
-  this.options = options;
-}
-
-FilterCSS.prototype.process = function (css) {
-  // 兼容各种奇葩输入
-  css = css || '';
-  css = css.toString();
-  if (!css) return '';
-
-  var me = this;
-  var options = me.options;
-  var whiteList = options.whiteList;
-  var onAttr = options.onAttr;
-  var onIgnoreAttr = options.onIgnoreAttr;
-  var safeAttrValue = options.safeAttrValue;
-
-  var retCSS = parseStyle(css, function (sourcePosition, position, name, value, source) {
-
-    var check = whiteList[name];
-    var isWhite = false;
-    if (check === true) isWhite = check;
-    else if (typeof check === 'function') isWhite = check(value);
-    else if (check instanceof RegExp) isWhite = check.test(value);
-    if (isWhite !== true) isWhite = false;
-
-    // 如果过滤后 value 为空则直接忽略
-    value = safeAttrValue(name, value);
-    if (!value) return;
-
-    var opts = {
-      position: position,
-      sourcePosition: sourcePosition,
-      source: source,
-      isWhite: isWhite
-    };
-
-    if (isWhite) {
-
-      var ret = onAttr(name, value, opts);
-      if (isNull(ret)) {
-        return name + ':' + value;
-      } else {
-        return ret;
-      }
-
-    } else {
-
-      var ret = onIgnoreAttr(name, value, opts);
-      if (!isNull(ret)) {
-        return ret;
-      }
-
-    }
-  });
-
-  return retCSS;
-};
-
-/**
- * default onTag function
- *
- * @param {String} tag
- * @param {String} html
- * @param {Object} options
- * @return {String}
- */
-function onTag(tag, html, options) {
-  // do nothing
-}
-
-/**
- * default onIgnoreTag function
- *
- * @param {String} tag
- * @param {String} html
- * @param {Object} options
- * @return {String}
- */
-function onIgnoreTag(tag, html, options) {
-  // do nothing
-}
-
-/**
- * default onTagAttr function
- *
- * @param {String} tag
- * @param {String} name
- * @param {String} value
- * @return {String}
- */
-function onTagAttr(tag, name, value) {
-  // do nothing
-}
-
-/**
- * default onIgnoreTagAttr function
- *
- * @param {String} tag
- * @param {String} name
- * @param {String} value
- * @return {String}
- */
-function onIgnoreTagAttr(tag, name, value) {
-  // do nothing
-}
-
-/**
- * default escapeHtml function
- *
- * @param {String} html
- */
-function escapeHtml(html) {
-  return html.replace(REGEXP_LT, "&lt;").replace(REGEXP_GT, "&gt;");
-}
-
-/**
- * default safeAttrValue function
- *
- * @param {String} tag
- * @param {String} name
- * @param {String} value
- * @param {Object} cssFilter
- * @return {String}
- */
-function safeAttrValue(tag, name, value, cssFilter) {
-  // unescape attribute value firstly
-  value = friendlyAttrValue(value);
-
-  if (name === "href" || name === "src") {
-    // filter `href` and `src` attribute
-    // only allow the value that starts with `http://` | `https://` | `mailto:` | `/` | `#`
-    value = _.trim(value);
-    if (value === "#") return "#";
-    if (
-      !(
-        value.substr(0, 7) === "http://" ||
-        value.substr(0, 8) === "https://" ||
-        value.substr(0, 7) === "mailto:" ||
-        value.substr(0, 4) === "tel:" ||
-        value.substr(0, 11) === "data:image/" ||
-        value.substr(0, 6) === "ftp://" ||
-        value.substr(0, 2) === "./" ||
-        value.substr(0, 3) === "../" ||
-        value[0] === "#" ||
-        value[0] === "/"
-      )
-    ) {
-      return "";
-    }
-  } else if (name === "background") {
-    // filter `background` attribute (maybe no use)
-    // `javascript:`
-    REGEXP_DEFAULT_ON_TAG_ATTR_4.lastIndex = 0;
-    if (REGEXP_DEFAULT_ON_TAG_ATTR_4.test(value)) {
-      return "";
-    }
-  } else if (name === "style") {
-    // `expression()`
-    REGEXP_DEFAULT_ON_TAG_ATTR_7.lastIndex = 0;
-    if (REGEXP_DEFAULT_ON_TAG_ATTR_7.test(value)) {
-      return "";
-    }
-    // `url()`
-    REGEXP_DEFAULT_ON_TAG_ATTR_8.lastIndex = 0;
-    if (REGEXP_DEFAULT_ON_TAG_ATTR_8.test(value)) {
-      REGEXP_DEFAULT_ON_TAG_ATTR_4.lastIndex = 0;
-      if (REGEXP_DEFAULT_ON_TAG_ATTR_4.test(value)) {
-        return "";
-      }
-    }
-    if (cssFilter !== false) {
-      cssFilter = cssFilter || defaultCSSFilter;
-      value = cssFilter.process(value);
-    }
-  }
-
-  // escape `<>"` before returns
-  value = escapeAttrValue(value);
-  return value;
-}
-
-// RegExp list
-var REGEXP_LT = /</g;
-var REGEXP_GT = />/g;
-var REGEXP_QUOTE = /"/g;
-var REGEXP_QUOTE_2 = /&quot;/g;
-var REGEXP_ATTR_VALUE_1 = /&#([a-zA-Z0-9]*);?/gim;
-var REGEXP_ATTR_VALUE_COLON = /&colon;?/gim;
-var REGEXP_ATTR_VALUE_NEWLINE = /&newline;?/gim;
-var REGEXP_DEFAULT_ON_TAG_ATTR_3 = /\/\*|\*\//gm;
-var REGEXP_DEFAULT_ON_TAG_ATTR_4 = /((j\s*a\s*v\s*a|v\s*b|l\s*i\s*v\s*e)\s*s\s*c\s*r\s*i\s*p\s*t\s*|m\s*o\s*c\s*h\s*a)\:/gi;
-var REGEXP_DEFAULT_ON_TAG_ATTR_5 = /^[\s"'`]*(d\s*a\s*t\s*a\s*)\:/gi;
-var REGEXP_DEFAULT_ON_TAG_ATTR_6 = /^[\s"'`]*(d\s*a\s*t\s*a\s*)\:\s*image\//gi;
-var REGEXP_DEFAULT_ON_TAG_ATTR_7 = /e\s*x\s*p\s*r\s*e\s*s\s*s\s*i\s*o\s*n\s*\(.*/gi;
-var REGEXP_DEFAULT_ON_TAG_ATTR_8 = /u\s*r\s*l\s*\(.*/gi;
-
-/**
- * escape doube quote
- *
- * @param {String} str
- * @return {String} str
- */
-function escapeQuote(str) {
-  return str.replace(REGEXP_QUOTE, "&quot;");
-}
-
-/**
- * unescape double quote
- *
- * @param {String} str
- * @return {String} str
- */
-function unescapeQuote(str) {
-  return str.replace(REGEXP_QUOTE_2, '"');
-}
-
-/**
- * escape html entities
- *
- * @param {String} str
- * @return {String}
- */
-function escapeHtmlEntities(str) {
-  return str.replace(REGEXP_ATTR_VALUE_1, function replaceUnicode(str, code) {
-    return code[0] === "x" || code[0] === "X"
-      ? String.fromCharCode(parseInt(code.substr(1), 16))
-      : String.fromCharCode(parseInt(code, 10));
-  });
-}
-
-/**
- * escape html5 new danger entities
- *
- * @param {String} str
- * @return {String}
- */
-function escapeDangerHtml5Entities(str) {
-  return str
-    .replace(REGEXP_ATTR_VALUE_COLON, ":")
-    .replace(REGEXP_ATTR_VALUE_NEWLINE, " ");
-}
-
-/**
- * clear nonprintable characters
- *
- * @param {String} str
- * @return {String}
- */
-function clearNonPrintableCharacter(str) {
-  var str2 = "";
-  for (var i = 0, len = str.length; i < len; i++) {
-    str2 += str.charCodeAt(i) < 32 ? " " : str.charAt(i);
-  }
-  return _.trim(str2);
-}
-
-/**
- * get friendly attribute value
- *
- * @param {String} str
- * @return {String}
- */
-function friendlyAttrValue(str) {
-  str = unescapeQuote(str);
-  str = escapeHtmlEntities(str);
-  str = escapeDangerHtml5Entities(str);
-  str = clearNonPrintableCharacter(str);
-  return str;
-}
-
-/**
- * unescape attribute value
- *
- * @param {String} str
- * @return {String}
- */
-function escapeAttrValue(str) {
-  str = escapeQuote(str);
-  str = escapeHtml(str);
-  return str;
-}
-
-/**
- * `onIgnoreTag` function for removing all the tags that are not in whitelist
- */
-function onIgnoreTagStripAll() {
-  return "";
-}
-
-/**
- * remove tag body
- * specify a `tags` list, if the tag is not in the `tags` list then process by the specify function (optional)
- *
- * @param {array} tags
- * @param {function} next
- */
-function StripTagBody(tags, next) {
-  if (typeof next !== "function") {
-    next = function() {};
-  }
-
-  var isRemoveAllTag = !Array.isArray(tags);
-  function isRemoveTag(tag) {
-    if (isRemoveAllTag) return true;
-    return _.indexOf(tags, tag) !== -1;
-  }
-
-  var removeList = [];
-  var posStart = false;
-
-  return {
-    onIgnoreTag: function(tag, html, options) {
-      if (isRemoveTag(tag)) {
-        if (options.isClosing) {
-          var ret = "[/removed]";
-          var end = options.position + ret.length;
-          removeList.push([
-            posStart !== false ? posStart : options.position,
-            end
-          ]);
-          posStart = false;
-          return ret;
-        } else {
-          if (!posStart) {
-            posStart = options.position;
-          }
-          return "[removed]";
-        }
-      } else {
-        return next(tag, html, options);
-      }
-    },
-    remove: function(html) {
-      var rethtml = "";
-      var lastPos = 0;
-      _.forEach(removeList, function(pos) {
-        rethtml += html.slice(lastPos, pos[0]);
-        lastPos = pos[1];
-      });
-      rethtml += html.slice(lastPos);
-      return rethtml;
-    }
-  };
-}
-
-/**
- * remove html comments
- *
- * @param {String} html
- * @return {String}
- */
-function stripCommentTag(html) {
-  return html.replace(STRIP_COMMENT_TAG_REGEXP, "");
-}
-var STRIP_COMMENT_TAG_REGEXP = /<!--[\s\S]*?-->/g;
-
-/**
- * remove invisible characters
- *
- * @param {String} html
- * @return {String}
- */
-function stripBlankChar(html) {
-  var chars = html.split("");
-  chars = chars.filter(function(char) {
-    var c = char.charCodeAt(0);
-    if (c === 127) return false;
-    if (c <= 31) {
-      if (c === 10 || c === 13) return true;
-      return false;
-    }
-    return true;
-  });
-  return chars.join("");
-}
-
-
-/**
- * get tag name
- *
- * @param {String} html e.g. '<a hef="#">'
- * @return {String}
- */
-function getTagName(html) {
-  var i = _.spaceIndex(html);
-  if (i === -1) {
-    var tagName = html.slice(1, -1);
-  } else {
-    var tagName = html.slice(1, i + 1);
-  }
-  tagName = _.trim(tagName).toLowerCase();
-  if (tagName.slice(0, 1) === "/") tagName = tagName.slice(1);
-  if (tagName.slice(-1) === "/") tagName = tagName.slice(0, -1);
-  return tagName;
-}
-
-/**
- * is close tag?
- *
- * @param {String} html 如：'<a hef="#">'
- * @return {Boolean}
- */
-function isClosing(html) {
-  return html.slice(0, 2) === "</";
-}
-
-/**
- * parse input html and returns processed html
- *
- * @param {String} html
- * @param {Function} onTag e.g. function (sourcePosition, position, tag, html, isClosing)
- * @param {Function} escapeHtml
- * @return {String}
- */
-function parseTag(html, onTag, escapeHtml) {
-  "use strict";
-
-  var rethtml = "";
-  var lastPos = 0;
-  var tagStart = false;
-  var quoteStart = false;
-  var currentPos = 0;
-  var len = html.length;
-  var currentTagName = "";
-  var currentHtml = "";
-
-  for (currentPos = 0; currentPos < len; currentPos++) {
-    var c = html.charAt(currentPos);
-    if (tagStart === false) {
-      if (c === "<") {
-        tagStart = currentPos;
-        continue;
-      }
-    } else {
-      if (quoteStart === false) {
-        if (c === "<") {
-          rethtml += escapeHtml(html.slice(lastPos, currentPos));
-          tagStart = currentPos;
-          lastPos = currentPos;
-          continue;
-        }
-        if (c === ">") {
-          rethtml += escapeHtml(html.slice(lastPos, tagStart));
-          currentHtml = html.slice(tagStart, currentPos + 1);
-          currentTagName = getTagName(currentHtml);
-          rethtml += onTag(
-            tagStart,
-            rethtml.length,
-            currentTagName,
-            currentHtml,
-            isClosing(currentHtml)
-          );
-          lastPos = currentPos + 1;
-          tagStart = false;
-          continue;
-        }
-        if ((c === '"' || c === "'") && html.charAt(currentPos - 1) === "=") {
-          quoteStart = c;
-          continue;
-        }
-      } else {
-        if (c === quoteStart) {
-          quoteStart = false;
-          continue;
-        }
-      }
-    }
-  }
-  if (lastPos < html.length) {
-    rethtml += escapeHtml(html.substr(lastPos));
-  }
-
-  return rethtml;
-}
-
-var REGEXP_ILLEGAL_ATTR_NAME = /[^a-zA-Z0-9_:\.\-]/gim;
-
-/**
- * parse input attributes and returns processed attributes
- *
- * @param {String} html e.g. `href="#" target="_blank"`
- * @param {Function} onAttr e.g. `function (name, value)`
- * @return {String}
- */
-function parseAttr(html, onAttr) {
-  "use strict";
-
-  var lastPos = 0;
-  var retAttrs = [];
-  var tmpName = false;
-  var len = html.length;
-
-  function addAttr(name, value) {
-    name = _.trim(name);
-    name = name.replace(REGEXP_ILLEGAL_ATTR_NAME, "").toLowerCase();
-    if (name.length < 1) return;
-    var ret = onAttr(name, value || "");
-    if (ret) retAttrs.push(ret);
-  }
-
-  // 逐个分析字符
-  for (var i = 0; i < len; i++) {
-    var c = html.charAt(i);
-    var v, j;
-    if (tmpName === false && c === "=") {
-      tmpName = html.slice(lastPos, i);
-      lastPos = i + 1;
-      continue;
-    }
-    if (tmpName !== false) {
-      if (
-        i === lastPos &&
-        (c === '"' || c === "'") &&
-        html.charAt(i - 1) === "="
-      ) {
-        j = html.indexOf(c, i + 1);
-        if (j === -1) {
-          break;
-        } else {
-          v = _.trim(html.slice(lastPos + 1, j));
-          addAttr(tmpName, v);
-          tmpName = false;
-          i = j;
-          lastPos = i + 1;
-          continue;
-        }
-      }
-    }
-    if (/\s|\n|\t/.test(c)) {
-      html = html.replace(/\s|\n|\t/g, " ");
-      if (tmpName === false) {
-        j = findNextEqual(html, i);
-        if (j === -1) {
-          v = _.trim(html.slice(lastPos, i));
-          addAttr(v);
-          tmpName = false;
-          lastPos = i + 1;
-          continue;
-        } else {
-          i = j - 1;
-          continue;
-        }
-      } else {
-        j = findBeforeEqual(html, i - 1);
-        if (j === -1) {
-          v = _.trim(html.slice(lastPos, i));
-          v = stripQuoteWrap(v);
-          addAttr(tmpName, v);
-          tmpName = false;
-          lastPos = i + 1;
-          continue;
-        } else {
-          continue;
-        }
-      }
-    }
-  }
-
-  if (lastPos < html.length) {
-    if (tmpName === false) {
-      addAttr(html.slice(lastPos));
-    } else {
-      addAttr(tmpName, stripQuoteWrap(_.trim(html.slice(lastPos))));
-    }
-  }
-
-  return _.trim(retAttrs.join(" "));
-}
-
-function findNextEqual(str, i) {
-  for (; i < str.length; i++) {
-    var c = str[i];
-    if (c === " ") continue;
-    if (c === "=") return i;
-    return -1;
-  }
-}
-
-function findBeforeEqual(str, i) {
-  for (; i > 0; i--) {
-    var c = str[i];
-    if (c === " ") continue;
-    if (c === "=") return i;
-    return -1;
-  }
-}
-
-function isQuoteWrapString(text) {
-  if (
-    (text[0] === '"' && text[text.length - 1] === '"') ||
-    (text[0] === "'" && text[text.length - 1] === "'")
-  ) {
-    return true;
-  } else {
-    return false;
-  }
-}
-
-function stripQuoteWrap(text) {
-  if (isQuoteWrapString(text)) {
-    return text.substr(1, text.length - 2);
-  } else {
-    return text;
-  }
-}
-
-
-/**
- * returns `true` if the input value is `undefined` or `null`
- *
- * @param {Object} obj
- * @return {Boolean}
- */
-function isNull(obj) {
-  return obj === undefined || obj === null;
-}
-
-/**
- * get attributes for a tag
- *
- * @param {String} html
- * @return {Object}
- *   - {String} html
- *   - {Boolean} closing
- */
-function getAttrs(html) {
-  var i = _.spaceIndex(html);
-  if (i === -1) {
-    return {
-      html: "",
-      closing: html[html.length - 2] === "/"
-    };
-  }
-  html = _.trim(html.slice(i + 1, -1));
-  var isClosing = html[html.length - 1] === "/";
-  if (isClosing) html = _.trim(html.slice(0, -1));
-  return {
-    html: html,
-    closing: isClosing
-  };
-}
-
diff --git a/ui/imports/utils/Constants.qml b/ui/imports/utils/Constants.qml
index 9173551c2b..1ffaffa4d8 100644
--- a/ui/imports/utils/Constants.qml
+++ b/ui/imports/utils/Constants.qml
@@ -478,6 +478,11 @@ QtObject {
     readonly property string ens_connected: "connected"
     readonly property string ens_connected_dkey: "connected-different-key"
 
+    readonly property string storeToKeychainValueStore: "store"
+    readonly property string storeToKeychainValueNotNow: "notNow"
+    readonly property string storeToKeychainValueNever: "never"
+
+    // WARNING: Remove later. Moved to StatusQ.
     readonly property string editLabel: ` <span class="isEdited">` + qsTr("(edited)") + `</span>`
 
     readonly property string newBookmark: " "
diff --git a/ui/imports/utils/Utils.qml b/ui/imports/utils/Utils.qml
index 383a7dc261..d4d396c38b 100644
--- a/ui/imports/utils/Utils.qml
+++ b/ui/imports/utils/Utils.qml
@@ -4,6 +4,7 @@ import QtQuick 2.13
 
 import shared 1.0
 import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1 as StatusQUtils
 
 QtObject {
     property var globalUtilsInst: globalUtils
@@ -56,55 +57,6 @@ QtObject {
         return Style.current.accountColors[colorIndex]
     }
 
-    function getMessageWithStyle(msg, isCurrentUser, hoveredLink = "") {
-        return `<style type="text/css">` +
-                    `img, a, del, code, blockquote { margin: 0; padding: 0; }` +
-                    `code {` +
-                        `font-family: ${Style.current.fontCodeRegular.name};` +
-                        `font-weight: 400;` +
-                        `font-size: ${Style.current.secondaryTextFontSize};` +
-                        `padding: 2px 4px;` +
-                        `border-radius: 4px;` +
-                        `background-color: ${Style.current.codeBackground};` +
-                        `color: ${Style.current.black};` +
-                        `white-space: pre;` +
-                    `}` +
-                    `p {` +
-                        `line-height: 22px;` +
-                    `}` +
-                    `a {` +
-                        `color: ${Style.current.linkColor};` +
-                    `}` +
-                    `a.mention {` +
-                        `color: ${Style.current.mentionColor};` +
-                        `background-color: ${Style.current.mentionBgColor};` +
-                        `text-decoration: none;` +
-                        `padding: 0px 2px;` +
-                    `}` +
-                    (hoveredLink !== "" ? `a.mention[href="${hoveredLink}"] { background-color: ${Style.current.mentionBgHoverColor}; }` : ``) +
-                    `del {` +
-                        `text-decoration: line-through;` +
-                    `}` +
-                    `table.blockquote td {` +
-                        `padding-left: 10px;` +
-                        `color: ${isCurrentUser ? Style.current.chatReplyCurrentUser : Style.current.secondaryText};` +
-                    `}` +
-                    `table.blockquote td.quoteline {` +
-                        `background-color: ${isCurrentUser ? Style.current.chatReplyCurrentUser : Style.current.secondaryText};` +
-                        `height: 100%;` +
-                        `padding-left: 0;` +
-                    `}` +
-                    `.emoji {` +
-                        `vertical-align: bottom;` +
-                    `}` +
-                    `span.isEdited {` +
-                        `color: ${Style.current.secondaryText};` +
-                        `margin-left: 5px` +
-                    `}` +
-                `</style>` +
-                `${msg}`
-    }
-
     function getReplyMessageStyle(msg, isCurrentUser) {
         return `<style type="text/css">`+
                     `a {`+
@@ -147,22 +99,6 @@ QtObject {
         return addr.substring(0, 2 + numberOfChars) + "..." + addr.substring(addr.length - numberOfChars);
     }
 
-    function linkifyAndXSS(inputText) {
-        //URLs starting with http://, https://, or ftp://
-        var replacePattern1 = /(\b(https?|ftp|statusim):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
-        var replacedText = inputText.replace(replacePattern1, "<a href='$1'>$1</a>");
-
-        //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
-        var replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
-        replacedText = replacedText.replace(replacePattern2, "$1<a href='http://$2'>$2</a>");
-
-        return XSS.filterXSS(replacedText)
-    }
-
-    function filterXSS(inputText) {
-        return XSS.filterXSS(inputText)
-    }
-
     function toLocaleString(val, locale, options) {
       return NumberPolyFill.toLocaleString(val, locale, options)
     }
@@ -656,11 +592,7 @@ QtObject {
             return ""
         }
         let compressedPk = getCompressedPk(publicKey)
-        return elideText(compressedPk, 6, 3)
-    }
-
-    function elideText(text, leftCharsCount, rightCharsCount = leftCharsCount) {
-        return text.substr(0, leftCharsCount) + "..." + text.substr(text.length - rightCharsCount)
+        return StatusQUtils.Utils.elideText(compressedPk, 6, 3)
     }
 
     function getTimeDifference(d1, d2) {