Add basic user autocompletion UI

src/gui/Pages/Chat/Composer/Composer.qml

@@ -11,39 +11,60 @@ Rectangle {
     function takeFocus() { messageArea.forceActiveFocus() }
 
 
-    implicitHeight:
-        Math.max(theme.baseElementsHeight, messageArea.implicitHeight)
-
+    implicitHeight: Math.max(theme.baseElementsHeight, column.implicitHeight)
     color: theme.chat.composer.background
 
-    HRowLayout {
+    HColumnLayout {
+        id: column
         anchors.fill: parent
 
-        HUserAvatar {
-            id: avatar
-            radius: 0
-            userId: messageArea.writingUserId
+        UserAutoCompletion {
+            id: userCompletion
+            textArea: messageArea
 
-            mxc:
-                messageArea.writingUserInfo ?
-                messageArea.writingUserInfo.avatar_url :
-                ""
-
-            displayName:
-                messageArea.writingUserInfo ?
-                messageArea.writingUserInfo.display_name :
-                ""
-        }
-
-        HScrollView {
-            Layout.fillHeight: true
             Layout.fillWidth: true
-
-            MessageArea { id: messageArea }
+            Layout.maximumHeight: chat.height / 3
         }
 
-        UploadButton {
-            Layout.fillHeight: true
+        HRowLayout {
+            HUserAvatar {
+                id: avatar
+                radius: 0
+                userId: messageArea.writingUserId
+
+                mxc:
+                    messageArea.writingUserInfo ?
+                    messageArea.writingUserInfo.avatar_url :
+                    ""
+
+                displayName:
+                    messageArea.writingUserInfo ?
+                    messageArea.writingUserInfo.display_name :
+                    ""
+            }
+
+            HScrollView {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+
+                MessageArea {
+                    id: messageArea
+                    autoCompletionOpen: userCompletion.open
+
+                    onAutoCompletePrevious: userCompletion.previous()
+                    onAutoCompleteNext: userCompletion.next()
+                    onCancelAutoCompletion: userCompletion.cancel()
+                    onExtraCharacterCloseAutoCompletion:
+                        ! userCompletion.autoOpen ||
+                        userCompletion.autoOpenCompleted ?
+                        userCompletion.open = false :
+                        null
+                }
+            }
+
+            UploadButton {
+                Layout.fillHeight: true
+            }
         }
     }
 }