Better reply UI.

imports/Spectral/Menu/MessageContextMenu.qml

@@ -39,7 +39,10 @@ Menu {
 
         onTriggered: {
             roomPanelInput.clear()
-            roomPanelInput.insert("> <" + model.author.id + "><" + model.eventId + "> " + (selectedText != "" ? selectedText : model.message) + "\n\n")
+            roomPanelInput.isReply = true
+            roomPanelInput.replyUserID = model.author.id
+            roomPanelInput.replyEventID = model.eventId
+            roomPanelInput.replyContent = selectedText != "" ? selectedText : model.message
         }
     }
     MenuItem {

imports/Spectral/Panel/RoomPanelInput.qml

@@ -13,6 +13,11 @@ import Spectral 0.1
 import "qrc:/js/md.js" as Markdown
 
 Rectangle {
+    property bool isReply
+    property string replyUserID
+    property string replyEventID
+    property string replyContent
+
     color: MSettings.darkTheme ? "#303030" : "#fafafa"
 
     layer.enabled: true
@@ -38,6 +43,7 @@ Rectangle {
             Layout.preferredHeight: 48
 
             id: uploadButton
+            visible: !isReply
 
             contentItem: MaterialIcon {
                 icon: "\ue226"
@@ -52,6 +58,20 @@ Rectangle {
             }
         }
 
+        ItemDelegate {
+            Layout.preferredWidth: 48
+            Layout.preferredHeight: 48
+
+            id: cancelReplyButton
+            visible: isReply
+
+            contentItem: MaterialIcon {
+                icon: "\ue5cd"
+            }
+
+            onClicked: clearReply()
+        }
+
         ScrollView {
             Layout.fillWidth: true
             Layout.preferredHeight: 48
@@ -66,7 +86,7 @@ Rectangle {
                 id: inputField
 
                 wrapMode: Text.Wrap
-                placeholderText: "Send a Message"
+                placeholderText: isReply ? "Reply to " + replyUserID : "Send a Message"
                 leftPadding: 16
                 topPadding: 0
                 bottomPadding: 0
@@ -127,10 +147,9 @@ Rectangle {
                     var PREFIX_HTML = '/html '
                     var PREFIX_MARKDOWN = '/md '
 
-                    var replyRe = new RegExp("^> <(.*)><(.*)> (.*)\n\n(.*)")
-                    if (text.match(replyRe)) {
-                        var matches = text.match(replyRe)
-                        currentRoom.sendReply(matches[1], matches[2], matches[3], matches[4])
+                    if (isReply) {
+                        currentRoom.sendReply(replyUserID, replyEventID, replyContent, text)
+                        clearReply()
                         return
                     }
 
@@ -211,4 +230,11 @@ Rectangle {
     function clear() {
         inputField.clear()
     }
+
+    function clearReply() {
+        isReply = false
+        replyUserID = ""
+        replyEventID = ""
+        replyContent = ""
+    }
 }