This splits ChatTextInput into ChatBox and a handful of subcomponents.

- ChatBar: Contains the main TextArea and standard buttons.
  - Usually visible, but can be disabled when necessary.
- AttachmentPane: Contains an image when attaching an image and also a filename with mimetype icon.
  - Has a toolbar to cancel the attachment or edit it if it's an image.
  - Shown when there is an attachment.
- ReplyPane: Shows who you are replying to and the content of their message.
  - Also shows edits and has a button to cancel replies/edits
  - Shown when replying or editing
- CompletionMenu
  - Now a vertical list using a QQC2.Popup
  - Either a Pane or a Menu/Popup
- EmojiPickerPane

@teams/vdg

imports/NeoChat/Component/ChatBox/AttachmentPane.qml

@@ -0,0 +1,202 @@
+/* SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.de>
+ * SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import org.kde.kirigami 2.14 as Kirigami
+
+import NeoChat.Page 1.0
+import org.kde.neochat 1.0
+
+Loader {
+    id: root
+
+    property string attachmentPath: ""
+    property var attachmentMimetype: FileType.mimeTypeForUrl(attachmentPath)
+    readonly property bool hasImage: attachmentMimetype.valid && FileType.supportedImageFormats.includes(attachmentMimetype.preferredSuffix)
+
+    signal clearAttachmentTriggered()
+
+    active: visible
+    sourceComponent: Component {
+        Pane {
+            id: attachmentPane
+            property string baseFileName: attachmentPath.toString().substring(attachmentPath.toString().lastIndexOf('/') + 1, attachmentPath.length)
+            Kirigami.Theme.colorSet: Kirigami.Theme.View
+
+            contentItem: Item {
+                property real spacing: attachmentPane.spacing > 0 ? attachmentPane.spacing : toolBar.spacing
+                implicitWidth: Math.max(image.implicitWidth, imageBusyIndicator.implicitWidth, fileInfoLayout.implicitWidth, toolBar.implicitWidth)
+                implicitHeight: Math.max(
+                    (hasImage ? Math.max(image.preferredHeight, imageBusyIndicator.implicitHeight) + spacing : 0)
+                        + fileInfoLayout.implicitHeight,
+                    toolBar.implicitHeight
+                )
+
+                Image {
+                    id: image
+                    property real preferredHeight: Math.min(implicitHeight, Kirigami.Units.gridUnit * 8)
+                    height: preferredHeight
+                    anchors {
+                        horizontalCenter: parent.horizontalCenter
+                        bottom: fileInfoLayout.top
+                        bottomMargin: parent.spacing
+                    }
+                    width: Math.min(implicitWidth, attachmentPane.availableWidth)
+                    asynchronous: true
+                    cache: false // Cache is not needed. Images will rarely be shown repeatedly.
+                    smooth: height == preferredHeight && parent.height == parent.implicitHeight // Don't smooth until height animation stops
+                    source: hasImage ? attachmentPath : ""
+                    visible: hasImage
+                    fillMode: Image.PreserveAspectFit
+
+                    onSourceChanged: {
+                        // Reset source size height, which affect implicitHeight
+                        sourceSize.height = -1
+                    }
+
+                    onSourceSizeChanged: {
+                        if (implicitHeight > Kirigami.Units.gridUnit * 8) {
+                            // This can save a lot of RAM when loading large images.
+                            // It also improves visual quality for large images.
+                            sourceSize.height = Kirigami.Units.gridUnit * 8
+                        }
+                    }
+
+                    Behavior on height {
+                        NumberAnimation {
+                            property: "height"
+                            duration: Kirigami.Units.shortDuration
+                            easing.type: Easing.OutCubic
+                        }
+                    }
+                }
+
+                BusyIndicator {
+                    id: imageBusyIndicator
+                    anchors {
+                        horizontalCenter: parent.horizontalCenter
+                        top: parent.top
+                        bottom: fileInfoLayout.top
+                        bottomMargin: parent.spacing
+                    }
+                    visible: running
+                    running: image.visible && image.progress < 1
+                }
+
+                RowLayout {
+                    id: fileInfoLayout
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.verticalCenter: undefined
+                    anchors.bottom: parent.bottom
+                    spacing: parent.spacing
+
+                    Kirigami.Icon {
+                        id: mimetypeIcon
+                        implicitHeight: Kirigami.Units.fontMetrics.roundedIconSize(fileLabel.implicitHeight)
+                        implicitWidth: implicitHeight
+                        source: attachmentMimetype.iconName
+                    }
+
+                    Label {
+                        id: fileLabel
+                        text: baseFileName
+                    }
+
+                    states: State {
+                        when: !hasImage
+                        AnchorChanges {
+                            target: fileInfoLayout
+                            anchors.bottom: undefined
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+                }
+
+                // Using a toolbar to get a button spacing consistent with what the QQC2 style normally has
+                // Also has some accessibility info
+                ToolBar {
+                    id: toolBar
+                    width: parent.width
+                    anchors.top: parent.top
+
+                    leftPadding: 0
+                    rightPadding: 0
+                    topPadding: 0
+                    bottomPadding: 0
+
+                    Kirigami.Theme.inherit: true
+                    Kirigami.Theme.colorSet: Kirigami.Theme.View
+
+                    contentItem: RowLayout {
+                        spacing: parent.spacing
+                        Label {
+                            Layout.leftMargin: -attachmentPane.leftPadding
+                            Layout.topMargin: -attachmentPane.topPadding
+                            leftPadding: cancelAttachmentButton.leftPadding + 1 + attachmentPane.leftPadding
+                            rightPadding: cancelAttachmentButton.rightPadding + 1
+                            topPadding: cancelAttachmentButton.topPadding + attachmentPane.topPadding
+                            bottomPadding: cancelAttachmentButton.bottomPadding
+                            text: i18n("Attachment:")
+                            horizontalAlignment: Text.AlignLeft
+                            verticalAlignment: Text.AlignVCenter
+                            background: Kirigami.ShadowedRectangle {
+                                property real cornerRadius: cancelAttachmentButton.background.hasOwnProperty("radius") ?
+                                    Math.min(cancelAttachmentButton.background.radius, height/2) : 0
+                                corners.bottomLeftRadius: toolBar.mirrored ? cornerRadius : 0
+                                corners.bottomRightRadius: toolBar.mirrored ? 0 : cornerRadius
+                                color: Kirigami.Theme.backgroundColor
+                                opacity: 0.75
+                            }
+                        }
+                        Item {
+                            Layout.fillWidth: true
+                        }
+                        Button {
+                            id: editImageButton
+                            visible: hasImage
+                            icon.name: "document-edit"
+                            text: i18n("Edit")
+                            display: AbstractButton.IconOnly
+
+                            Component {
+                                id: imageEditorPage
+                                ImageEditorPage {
+                                    imagePath: attachmentPath
+                                }
+                            }
+                            onClicked: {
+                                let imageEditor = applicationWindow().pageStack.layers.push(imageEditorPage);
+                                imageEditor.newPathChanged.connect(function(newPath) {
+                                    applicationWindow().pageStack.layers.pop();
+                                    attachmentPath = newPath;
+                                });
+                            }
+                            ToolTip.text: text
+                            ToolTip.visible: hovered
+                        }
+                        Button {
+                            id: cancelAttachmentButton
+                            icon.name: "dialog-cancel"
+                            text: i18n("Cancel")
+                            display: AbstractButton.IconOnly
+                            onClicked: {
+                                clearAttachmentTriggered();
+                            }
+                            ToolTip.text: text
+                            ToolTip.visible: hovered
+                        }
+                    }
+                    background: null
+                }
+            }
+
+            background: Rectangle {
+                color: Kirigami.Theme.backgroundColor
+            }
+        }
+    }
+}

imports/NeoChat/Component/ChatBox/ChatBar.qml

@@ -0,0 +1,342 @@
+/* SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.de>
+ * SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import Qt.labs.platform 1.0 as Platform
+import org.kde.kirigami 2.14 as Kirigami
+
+import org.kde.neochat 1.0
+
+ToolBar {
+    id: chatBar
+    property string replyEventId: ""
+    property string editEventId: ""
+    property string inputFieldText: currentRoom ? currentRoom.cachedInput : ""
+    property alias textField: inputField
+    property alias emojiPaneOpened: emojiButton.checked
+
+    // store each user we autoComplete here, this will be helpful later to generate
+    // the matrix.to links.
+    // This use an hack to define: https://doc.qt.io/qt-5/qml-var.html#property-value-initialization-semantics
+    property var userAutocompleted: ({})
+
+    signal attachTriggered(string localPath)
+    signal closeAllTriggered()
+    signal inputFieldForceActiveFocusTriggered()
+    signal messageSent()
+    signal pasteImageTriggered()
+
+    property alias isCompleting: completionMenu.visible
+
+    onInputFieldForceActiveFocusTriggered: inputField.forceActiveFocus()
+
+    position: ToolBar.Footer
+
+    Kirigami.Theme.colorSet: Kirigami.Theme.View
+
+    // Using a custom background because some styles like Material
+    // or Fusion might have ugly colors for a TextArea placed inside
+    // of a toolbar. ToolBar is otherwise the closest QQC2 component
+    // to what we want because of the padding and spacing values.
+    background: Rectangle {
+        color: Kirigami.Theme.backgroundColor
+    }
+
+    contentItem: RowLayout {
+        spacing: chatBar.spacing
+
+        ScrollView {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            Layout.minimumHeight: inputField.implicitHeight
+            // lineSpacing is height+leading, so subtract leading once since leading only exists between lines.
+            Layout.maximumHeight: fontMetrics.lineSpacing * 8 - fontMetrics.leading
+                                + inputField.topPadding + inputField.bottomPadding
+
+            FontMetrics {
+                id: fontMetrics
+                font: inputField.font
+            }
+            TextArea {
+                id: inputField
+                focus: true
+                /* Some QQC2 styles will have their own predefined backgrounds for TextAreas.
+                * Make sure there is no background since we are using the ToolBar background.
+                *
+                * This could cause a problem if the QQC2 style was designed around TextArea
+                * background colors being very different from the QPalette::Base color.
+                * Luckily, none of the Qt QQC2 styles do that and neither do KDE's QQC2 styles.
+                */
+                background: null
+                leftPadding: mirrored ? 0 : Kirigami.Units.largeSpacing
+                rightPadding: !mirrored ? 0 : Kirigami.Units.largeSpacing
+                topPadding: 0
+                bottomPadding: 0
+
+                property real progress: 0
+                property bool autoAppeared: false
+                //property int lineHeight: contentHeight / lineCount
+
+                text: inputFieldText
+                placeholderText: editEventId.length > 0 ? i18n("Edit Message") : i18n("Write your message...")
+                verticalAlignment: TextEdit.AlignVCenter
+                horizontalAlignment: TextEdit.AlignLeft
+                wrapMode: Text.Wrap
+
+                ChatDocumentHandler {
+                    id: documentHandler
+                    document: inputField.textDocument
+                    cursorPosition: inputField.cursorPosition
+                    selectionStart: inputField.selectionStart
+                    selectionEnd: inputField.selectionEnd
+                    room: currentRoom ?? null
+                }
+
+                Timer {
+                    id: timeoutTimer
+                    repeat: false
+                    interval: 2000
+                    onTriggered: {
+                        repeatTimer.stop()
+                        currentRoom.sendTypingNotification(false)
+                    }
+                }
+
+                Timer {
+                    id: repeatTimer
+                    repeat: true
+                    interval: 5000
+                    triggeredOnStart: true
+                    onTriggered: currentRoom.sendTypingNotification(true)
+                }
+
+                Keys.onReturnPressed: {
+                    if (isCompleting) {
+                        chatBar.complete();
+
+                        isCompleting = false;
+                        return;
+                    }
+                    if (event.modifiers & Qt.ShiftModifier) {
+                        inputField.insert(cursorPosition, "\n")
+                    } else {
+                        chatBar.postMessage()
+                    }
+                }
+
+                Keys.onEscapePressed: {
+                    closeAllTriggered()
+                }
+
+                Keys.onPressed: {
+                    if (event.key === Qt.Key_PageDown) {
+                        switchRoomDown();
+                    } else if (event.key === Qt.Key_PageUp) {
+                        switchRoomUp();
+                    } else if (event.key === Qt.Key_V && event.modifiers & Qt.ControlModifier) {
+                        chatBar.pasteImage();
+                    }
+                }
+
+                Keys.onBacktabPressed: {
+                    if (event.modifiers & Qt.ControlModifier) {
+                        switchRoomUp();
+                        return;
+                    }
+                    if (isCompleting) {
+                        let decrementedIndex = completionMenu.currentIndex - 1
+                        // Wrap around to the last item
+                        if (decrementedIndex < 0) {
+                            decrementedIndex = Math.max(completionMenu.count - 1, 0) // 0 if count == 0
+                        }
+                        completionMenu.currentIndex = decrementedIndex
+                    }
+                }
+
+                Keys.onTabPressed: {
+                    if (event.modifiers & Qt.ControlModifier) {
+                        switchRoomDown();
+                        return;
+                    }
+                    if (!isCompleting) {
+                        return;
+                    }
+
+                    // TODO detect moved cursor
+
+                    // ignore first time tab was clicked so that user can select
+                    // first emoji/user
+                    if (autoAppeared === false) {
+                        let incrementedIndex = completionMenu.currentIndex + 1;
+                        // Wrap around to the first item
+                        if (incrementedIndex > completionMenu.count - 1) {
+                            incrementedIndex = 0
+                        }
+                        completionMenu.currentIndex = incrementedIndex;
+                    } else {
+                        autoAppeared = false;
+                    }
+
+                    chatBar.complete();
+                }
+
+                onTextChanged: {
+                    timeoutTimer.restart()
+                    repeatTimer.start()
+                    currentRoom.cachedInput = text
+                    autoAppeared = false;
+
+                    const completionInfo = documentHandler.getAutocompletionInfo();
+
+                    if (completionInfo.type === ChatDocumentHandler.Ignore) {
+                        return;
+                    }
+                    if (completionInfo.type === ChatDocumentHandler.None) {
+                        isCompleting = false;
+                        return;
+                    }
+
+                    if (completionInfo.type === ChatDocumentHandler.User) {
+                        completionMenu.isCompletingEmoji = false
+                        completionMenu.model = currentRoom.getUsers(completionInfo.keyword);
+                    } else {
+                        completionMenu.isCompletingEmoji = true
+                        completionMenu.model = completionMenu.emojiModel.filterModel(completionInfo.keyword);
+                    }
+
+                    if (completionMenu.model.length === 0) {
+                        isCompleting = false;
+                        return;
+                    }
+                    isCompleting = true
+                    autoAppeared = true;
+                    completionMenu.endPosition = cursorPosition
+                }
+            }
+        }
+
+        Item {
+            visible: !isReply && (!hasAttachment || uploadingBusySpinner.running)
+            implicitWidth: uploadButton.implicitWidth
+            implicitHeight: uploadButton.implicitHeight
+            ToolButton {
+                id: uploadButton
+                anchors.fill: parent
+                // Matrix does not allow sending attachments in replies
+                visible: !isReply && !hasAttachment && !uploadingBusySpinner.running
+                icon.name: "mail-attachment"
+                text: i18n("Attach an image or file")
+                display: AbstractButton.IconOnly
+
+                onClicked: {
+                    if (Clipboard.hasImage) {
+                        attachDialog.open()
+                    } else {
+                        var fileDialog = openFileDialog.createObject(ApplicationWindow.overlay)
+                        fileDialog.chosen.connect((path) => {
+                            if (!path) { return }
+                            attachTriggered(path)
+                        })
+                        fileDialog.open()
+                    }
+                }
+
+                ToolTip.text: text
+                ToolTip.visible: hovered
+            }
+            BusyIndicator {
+                id: uploadingBusySpinner
+                anchors.fill: parent
+                visible: running
+                running: currentRoom && currentRoom.hasFileUploading
+            }
+        }
+
+        ToolButton {
+            id: emojiButton
+            icon.name: "preferences-desktop-emoticons"
+            text: i18n("Add an Emoji")
+            display: AbstractButton.IconOnly
+            checkable: true
+
+            ToolTip.text: text
+            ToolTip.visible: hovered
+        }
+
+        ToolButton {
+            id: sendButton
+            icon.name: "document-send"
+            text: i18n("Send message")
+            display: AbstractButton.IconOnly
+
+            onClicked: {
+                chatBar.postMessage()
+            }
+
+            ToolTip.text: text
+            ToolTip.visible: hovered
+        }
+    }
+
+    Action {
+        id: pasteAction
+        shortcut: StandardKey.Paste
+        onTriggered: {
+            if (Clipboard.hasImage) {
+                pasteImageTriggered();
+            }
+            activeFocusItem.paste();
+        }
+    }
+
+    CompletionMenu {
+        id: completionMenu
+        width: parent.width
+        //height: 80 //Math.min(implicitHeight, delegate.implicitHeight * 6)
+        height: implicitHeight
+        y: -height - 1
+        z: 1
+        Behavior on height {
+            NumberAnimation {
+                property: "height"
+                duration: Kirigami.Units.shortDuration
+                easing.type: Easing.OutCubic
+            }
+        }
+        onCompleteTriggered: {
+            complete()
+            isCompleting = false;
+        }
+    }
+
+    function pasteImage() {
+        let localPath = Platform.StandardPaths.writableLocation(Platform.StandardPaths.CacheLocation) + "/screenshots/" + (new Date()).getTime() + ".png";
+        if (!Clipboard.saveImage(localPath)) {
+            return;
+        }
+        attachTriggered(localPath)
+    }
+
+    function postMessage() {
+        checkForFancyEffectsReason();
+        roomManager.actionsHandler.postMessage(inputField.text.trim(), attachmentPath,
+            replyEventId, editEventId, userAutocompleted);
+        currentRoom.markAllMessagesAsRead();
+        inputField.clear();
+        inputField.text = Qt.binding(function() {
+            return currentRoom ? currentRoom.cachedInput : "";
+        });
+        messageSent()
+    }
+
+    function complete() {
+        documentHandler.replaceAutoComplete(completionMenu.currentDisplayText);
+        if (!completionMenu.isCompletingEmoji) {
+            userAutocompleted[completionMenu.currentDisplayText] = completionMenu.currentUserId;
+        }
+    }
+}

imports/NeoChat/Component/ChatBox/ChatBox.qml

@@ -0,0 +1,294 @@
+/* SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.de>
+ * SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+import QtQuick 2.15
+import Qt.labs.platform 1.0 as Platform
+import org.kde.kirigami 2.14 as Kirigami
+
+import NeoChat.Component.ChatBox 1.0
+import NeoChat.Component.Emoji 1.0
+import org.kde.neochat 1.0
+
+Item {
+    id: root
+    readonly property bool isReply: replyEventId.length > 0
+    property var replyUser
+    property alias replyEventId: chatBar.replyEventId
+    property string replyContent: ""
+
+    readonly property bool hasAttachment: attachmentPath.length > 0
+    property string attachmentPath: ""
+
+    property alias inputFieldText: chatBar.inputFieldText
+
+    readonly property bool isEdit: editEventId.length > 0
+    property alias editEventId: chatBar.editEventId
+
+    signal fancyEffectsReasonFound(string fancyEffect)
+
+    Kirigami.Theme.colorSet: Kirigami.Theme.View
+
+    implicitWidth: {
+        let w = 0
+        for(let i = 0; i < visibleChildren.length; ++i) {
+            w = Math.max(w, Math.ceil(visibleChildren[i].implicitWidth))
+        }
+        return w
+    }
+    implicitHeight: {
+        let h = 0
+        for(let i = 0; i < visibleChildren.length; ++i) {
+            h += Math.ceil(visibleChildren[i].implicitHeight)
+        }
+        return h
+    }
+
+    // For some reason, this is needed to make the height animation work even though
+    // it used to work and height should be directly affected by implicitHeight
+    height: implicitHeight
+
+    Behavior on height {
+        NumberAnimation {
+            property: "height"
+            duration: Kirigami.Units.shortDuration
+            easing.type: Easing.OutCubic
+        }
+    }
+
+    Kirigami.Separator {
+        id: emojiPickerLoaderSeparator
+        visible: emojiPickerLoader.visible
+        width: parent.width
+        height: visible ? implicitHeight : 0
+        anchors.bottom: emojiPickerLoader.top
+        z: 1
+    }
+
+    Loader {
+        id: emojiPickerLoader
+        active: visible
+        visible: chatBar.emojiPaneOpened
+        width: parent.width
+        height: visible ? implicitHeight : 0
+        anchors.bottom: replySeparator.top
+        sourceComponent: EmojiPicker{
+            textArea: chatBar.textField
+            emojiModel: EmojiModel { id: emojiModel }
+        }
+        Behavior on height {
+            NumberAnimation {
+                property: "height"
+                duration: Kirigami.Units.shortDuration
+                easing.type: Easing.OutCubic
+            }
+        }
+
+    }
+
+    Kirigami.Separator {
+        id: replySeparator
+        visible: replyPane.visible
+        width: parent.width
+        height: visible ? implicitHeight : 0
+        anchors.bottom: replyPane.top
+    }
+
+    ReplyPane {
+        id: replyPane
+        visible: isReply || isEdit
+        isEdit: root.isEdit
+        user: root.replyUser
+        content: root.replyContent
+        width: parent.width
+        height: visible ? implicitHeight : 0
+        anchors.bottom: attachmentSeparator.top
+        Behavior on height {
+            NumberAnimation {
+                property: "height"
+                duration: Kirigami.Units.shortDuration
+                easing.type: Easing.OutCubic
+            }
+        }
+    }
+
+    Kirigami.Separator {
+        id: attachmentSeparator
+        visible: attachmentPane.visible
+        width: parent.width
+        height: visible ? implicitHeight : 0
+        anchors.bottom: attachmentPane.top
+    }
+
+    AttachmentPane {
+        id: attachmentPane
+        attachmentPath: root.attachmentPath
+        visible: hasAttachment
+        width: parent.width
+        height: visible ? implicitHeight : 0
+        anchors.bottom: chatBarSeparator.top
+        Behavior on height {
+            NumberAnimation {
+                property: "height"
+                duration: Kirigami.Units.shortDuration
+                easing.type: Easing.OutCubic
+            }
+        }
+    }
+
+    Kirigami.Separator {
+        id: chatBarSeparator
+        visible: chatBar.visible
+        width: parent.width
+        height: visible ? implicitHeight : 0
+        anchors.bottom: chatBar.top
+    }
+
+    ChatBar {
+        id: chatBar
+        visible: currentRoom.canSendEvent("m.room.message")
+        width: parent.width
+        height: visible ? implicitHeight : 0
+        anchors.bottom: parent.bottom
+
+        Behavior on height {
+            NumberAnimation {
+                property: "height"
+                duration: Kirigami.Units.shortDuration
+                easing.type: Easing.OutCubic
+            }
+        }
+    }
+
+    Connections {
+        target: replyPane
+        function onClearEditReplyTriggered() {
+            if (isEdit) {
+                clearEdit()
+            }
+            if (isReply) {
+                clearReply()
+            }
+        }
+    }
+
+    Connections {
+        target: attachmentPane
+        function onClearAttachmentTriggered() {
+            clearAttachment()
+        }
+    }
+
+    Connections {
+        target: chatBar
+        function onAttachTriggered(localPath) {
+            attach(localPath)
+        }
+        function onCloseAllTriggered() {
+            closeAll()
+        }
+        function onMessageSent() {
+            closeAll()
+            checkForFancyEffectsReason()
+        }
+    }
+
+    function checkForFancyEffectsReason() {
+        if (!Config.showFancyEffects) {
+            return
+        }
+
+        let text = root.inputFieldText.trim()
+        if (text.includes('\u{2744}')) {
+            root.fancyEffectsReasonFound("snowflake")
+        }
+        if (text.includes('\u{1F386}')) {
+            root.fancyEffectsReasonFound("fireworks")
+        }
+        if (text.includes('\u{1F387}')) {
+            root.fancyEffectsReasonFound("fireworks")
+        }
+        if (text.includes('\u{1F389}')) {
+            root.fancyEffectsReasonFound("confetti")
+        }
+        if (text.includes('\u{1F38A}')) {
+            root.fancyEffectsReasonFound("confetti")
+        }
+    }
+
+    function addText(text) {
+        root.inputFieldText = inputFieldText + text
+    }
+
+    function insertText(str) {
+        root.inputFieldText = inputFieldText.substr(0, inputField.cursorPosition) + str + inputFieldText.substr(inputField.cursorPosition)
+    }
+
+    function clearText() {
+        // ChatBar's TextArea syncs currentRoom.cachedInput with the TextArea's text property
+        root.inputFieldText = ""
+    }
+
+    function focusInputField() {
+        chatBar.inputFieldForceActiveFocusTriggered()
+    }
+
+    function edit(editContent, editFormatedContent, editEventId) {
+        // Set the input field in edit mode
+        root.inputFieldText = editContent;
+        root.editEventId = editEventId;
+        root.replyContent = editContent;
+
+        // clean autocompletion list
+        chatBar.userAutocompleted = {};
+
+        // Fill autocompletion list with values extracted from message.
+        // We can't just iterate on every user in the list and try to
+        // find matching display name since some users have display name
+        // matching frequent words and this will marks too many words as
+        // mentions.
+        const regex = /<a href=\"https:\/\/matrix.to\/#\/(@[a-zA-Z09]*:[a-zA-Z09.]*)\">([^<]*)<\/a>/g;
+
+        let match;
+        while ((match = regex.exec(editFormatedContent.toString())) !== null) {
+            chatBar.userAutocompleted[match[2]] = match[1];
+        }
+    }
+
+    function clearEdit() {
+        // Clear input when edits are cancelled.
+        // Cached input will be
+        clearText()
+        clearReply()
+        root.editEventId = "";
+    }
+
+    function attach(localPath) {
+        root.attachmentPath = localPath
+    }
+
+    function clearAttachment() {
+        root.attachmentPath = ""
+    }
+
+    function clearReply() {
+        replyUser = null;
+        root.replyContent = "";
+        root.replyEventId = "";
+        // Don't clear input when replies are cancelled
+    }
+
+    function closeAll() {
+        if (hasAttachment) {
+            clearAttachment();
+        }
+        if (isEdit) {
+            clearEdit();
+        }
+        if (isReply) {
+            clearReply();
+        }
+        chatBar.emojiPaneOpened = false;
+    }
+}

imports/NeoChat/Component/ChatBox/CompletionMenu.qml

@@ -0,0 +1,114 @@
+// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.de>
+// SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import org.kde.kirigami 2.14 as Kirigami
+
+import org.kde.neochat 1.0
+
+Popup {
+    id: control
+
+    // Expose internal ListView properties.
+    property alias model: completionListView.model
+    property alias currentIndex: completionListView.currentIndex
+    property alias currentItem: completionListView.currentItem
+    property alias count: completionListView.count
+    property alias delegate: completionListView.delegate
+
+    // Autocomplee text
+    property string currentDisplayText: currentItem && currentItem.displayName ? currentItem.displayName : ""
+    property string currentUserId: currentItem && currentItem.id ? currentItem.id : ""
+
+    //FIXME: EmojiModel should probably be a singleton
+    property var emojiModel: EmojiModel {}
+    property bool isCompletingEmoji: false
+    property int beginPosition: 0
+    property int endPosition: 0
+
+    signal completeTriggered()
+
+    Kirigami.Theme.colorSet: Kirigami.Theme.View
+
+    bottomPadding: 0
+    leftPadding: 0
+    rightPadding: 0
+    topPadding: 0
+    clip: true
+
+    onVisibleChanged: if (!visible) {
+        completionListView.currentIndex = 0;
+    }
+
+    implicitHeight: Math.min(completionListView.contentHeight, Kirigami.Units.gridUnit * 5)
+
+    contentItem: ScrollView {
+        ListView {
+            id: completionListView
+            implicitWidth: contentWidth
+            model: control.model
+            delegate: isCompletingEmoji ? emojiDelegate : usernameDelegate
+
+            keyNavigationWraps: true
+
+            //interactive: Window.window ? contentHeight + control.topPadding + control.bottomPadding > Window.window.height : false
+            clip: true
+            currentIndex: control.currentIndex || 0
+        }
+    }
+
+    background: Rectangle {
+        color: Kirigami.Theme.backgroundColor
+    }
+
+    Component {
+        id: usernameDelegate
+        Kirigami.BasicListItem {
+            id: usernameItem
+            width: ListView.view.width ?? implicitWidth
+            property string displayName: modelData.displayName
+            leading: Kirigami.Avatar {
+                implicitHeight: Kirigami.Units.gridUnit
+                implicitWidth: implicitHeight
+                source: modelData.avatarMediaId ? ("image://mxc/" + modelData.avatarMediaId) : ""
+                color: modelData.color ? Qt.darker(modelData.color, 1.1) : null
+            }
+            text: modelData.displayName
+            onClicked: completeTriggered();
+            Component.onCompleted: {
+                completionMenu.currentUserId = Qt.binding(() => {
+                    return modelData.id ?? "";
+                });
+            }
+        }
+    }
+
+    Component {
+        id: emojiDelegate
+        Kirigami.BasicListItem {
+            id: emojiItem
+            width: ListView.view.width ?? implicitWidth
+            property string displayName: modelData.unicode
+            text: modelData.unicode + " " + modelData.shortname
+
+            leading: Label {
+                id: unicodeLabel
+                Layout.preferredHeight: Kirigami.Units.gridUnit
+                Layout.preferredWidth: textMetrics.tightBoundingRect.width
+                font.pointSize: Kirigami.Units.gridUnit * 0.75
+                text: emojiItem.modelData.unicode
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+            }
+            TextMetrics {
+                id: textMetrics
+                text: modelData.unicode
+                font: unicodeLabel.font
+            }
+            onClicked: completeTriggered();
+        }
+    }
+}

imports/NeoChat/Component/ChatBox/ReplyPane.qml

@@ -0,0 +1,116 @@
+/* SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.de>
+ * SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import org.kde.kirigami 2.14 as Kirigami
+
+Loader {
+    id: root
+    property bool isEdit: false
+    property var user: null
+    property string content: ""
+    property string avatarMediaUrl: user ? "image://mxc/" + replyUser.avatarMediaId : ""
+
+    signal clearEditReplyTriggered()
+
+    active: visible
+    sourceComponent: Pane {
+        id: replyPane
+
+        Kirigami.Theme.colorSet: Kirigami.Theme.View
+
+        spacing: leftPadding
+
+        contentItem: RowLayout {
+            Layout.fillWidth: true
+            spacing: replyPane.spacing
+
+            FontMetrics {
+                id: fontMetrics
+                font: textArea.font
+            }
+
+            Kirigami.Avatar {
+                id: avatar
+                Layout.alignment: textContentLayout.height > avatar.height ? Qt.AlignHCenter | Qt.AlignTop : Qt.AlignCenter
+                Layout.preferredWidth: Layout.preferredHeight
+                Layout.preferredHeight: fontMetrics.lineSpacing * 2 - fontMetrics.leading
+                source: root.avatarMediaUrl
+                name: user ? user.displayName : ""
+                color: user ? user.color : "transparent"
+                visible: Boolean(user)
+            }
+
+            ColumnLayout {
+                id: textContentLayout
+                Layout.alignment: Qt.AlignCenter
+                Layout.fillWidth: true
+                spacing: fontMetrics.leading
+                Label {
+                    textFormat: TextEdit.RichText
+                    wrapMode: Label.Wrap
+                    text: {
+                        let stylesheet = "<style>.user-pill{}</style>"
+                        let heading = "<b>%1</b>"
+                        let userName = user ? "<font color=\""+ user.color +"\">" + user.displayName + "</font>" : ""
+                        if (isEdit) {
+                            heading = heading.arg(i18n("Editing message:")) + "<br/>"
+                        } else {
+                            heading = heading.arg(i18n("Replying to %1:"))
+                            heading = heading.arg(userName) + "<br/>"
+                        }
+
+                        return stylesheet + heading
+                    }
+                }
+                ScrollView {
+                    Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+                    Layout.fillWidth: true
+                    Layout.maximumHeight: fontMetrics.lineSpacing * 8 - fontMetrics.leading
+                    TextArea {
+                        id: textArea
+                        leftPadding: 0
+                        rightPadding: 0
+                        topPadding: 0
+                        bottomPadding: 0
+                        text: {
+                            let stylesheet = "<style> a{color:"+Kirigami.Theme.linkColor+";}.user-pill{}</style>"
+                            let userName = user ? "<font color=\""+ user.color +"\">" + user.displayName + "</font>" : ""
+                            return stylesheet + content
+                        }
+                        selectByMouse: true
+                        selectByKeyboard: true
+                        readOnly: true
+                        wrapMode: Label.Wrap
+                        textFormat: TextEdit.RichText
+                        background: null
+                        HoverHandler {
+                            cursorShape: textArea.hoveredLink ? Qt.PointingHandCursor : Qt.IBeamCursor
+                        }
+                    }
+                }
+            }
+
+            Button {
+                id: cancelReplyButton
+                Layout.alignment: avatar.Layout.alignment
+                icon.name: "dialog-cancel"
+                text: i18n("Cancel")
+                display: AbstractButton.IconOnly
+                onClicked: {
+                    clearEditReplyTriggered()
+                }
+                ToolTip.text: text
+                ToolTip.visible: hovered
+            }
+        }
+
+        background: Rectangle {
+            color: Kirigami.Theme.backgroundColor
+        }
+    }
+}

imports/NeoChat/Component/ChatBox/qmldir

@@ -0,0 +1,7 @@
+module NeoChat.Component.ChatBox
+ChatBox 1.0 ChatBox.qml
+ChatBar 1.0 ChatBar.qml
+ReplyPane 1.0 ReplyPane.qml
+AttachmentPane 1.0 AttachmentPane.qml
+CompletionMenu 1.0 CompletionMenu.qml
+EmojiPickerPane 1.0 EmojiPickerPane.qml