matrixion/qml/MessageInput.qml

// SPDX-FileCopyrightText: 2021 Nheko Contributors
// SPDX-FileCopyrightText: 2022 Nheko Contributors
// SPDX-License-Identifier: GPL-3.0-or-later
import "emoji"
import "voip"
import QtQuick 2.12
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.2
import QtQuick.Window 2.13
import im.nheko

Rectangle {
    id: inputBar

    property bool showAllButtons: width > 450 || (messageInput.length == 0 && !messageInput.inputMethodComposing)

    Layout.fillWidth: true
    Layout.minimumHeight: 40
    Layout.preferredHeight: row.implicitHeight
    color: timelineRoot.palette.window

    Component {
        id: placeCallDialog
        PlaceCall {
        }
    }
    Component {
        id: screenShareDialog
        ScreenShare {
        }
    }
    RowLayout {
        id: row
        anchors.fill: parent
        spacing: 0
        visible: room ? room.permissions.canSend(MtxEvent.TextMessage) : false

        ImageButton {
            Layout.alignment: Qt.AlignBottom
            Layout.margins: 8
            ToolTip.text: CallManager.isOnCall ? qsTr("Hang up") : qsTr("Place a call")
            ToolTip.visible: hovered
            height: 22
            hoverEnabled: true
            image: CallManager.isOnCall ? ":/icons/icons/ui/end-call.svg" : ":/icons/icons/ui/place-call.svg"
            opacity: CallManager.haveCallInvite ? 0.3 : 1
            visible: CallManager.callsSupported && showAllButtons
            width: 22

            onClicked: {
                if (room) {
                    if (CallManager.haveCallInvite) {
                        return;
                    } else if (CallManager.isOnCall) {
                        CallManager.hangUp();
                    } else {
                        var dialog = placeCallDialog.createObject(timelineRoot);
                        dialog.open();
                        timelineRoot.destroyOnClose(dialog);
                    }
                }
            }
        }
        ImageButton {
            Layout.alignment: Qt.AlignBottom
            Layout.margins: 8
            ToolTip.text: qsTr("Send a file")
            ToolTip.visible: hovered
            height: 22
            hoverEnabled: true
            image: ":/icons/icons/ui/attach.svg"
            visible: showAllButtons
            width: 22

            onClicked: room.input.openFileSelection()

            Rectangle {
                anchors.fill: parent
                color: timelineRoot.palette.window
                visible: room && room.input.uploading

                NhekoBusyIndicator {
                    anchors.fill: parent
                    running: parent.visible
                }
            }
        }
        ScrollView {
            id: textInput
            Layout.alignment: Qt.AlignVCenter
            Layout.fillWidth: true
            Layout.maximumHeight: Window.height / 4
            Layout.minimumHeight: fontMetrics.lineSpacing
            Layout.preferredHeight: contentHeight
            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
            contentWidth: availableWidth

            TextArea {
                id: messageInput

                property int completerTriggeredAt: 0
                property string lastChar

                function insertCompletion(completion) {
                    messageInput.remove(completerTriggeredAt, cursorPosition);
                    messageInput.insert(cursorPosition, completion);
                }
                function openCompleter(pos, type) {
                    if (popup.opened)
                        return;
                    completerTriggeredAt = pos;
                    completer.completerName = type;
                    popup.open();
                    completer.completer.setSearchString(messageInput.getText(completerTriggeredAt, cursorPosition) + messageInput.preeditText);
                }
                function positionCursorAtEnd() {
                    cursorPosition = messageInput.length;
                }
                function positionCursorAtStart() {
                    cursorPosition = 0;
                }

                background: null
                bottomPadding: 8
                color: timelineRoot.palette.text
                focus: true
                leftPadding: inputBar.showAllButtons ? 0 : 8
                padding: 0
                placeholderText: qsTr("Write a message...")
                placeholderTextColor: timelineRoot.palette.placeholderText
                selectByMouse: true
                topPadding: 8
                verticalAlignment: TextEdit.AlignVCenter
                width: textInput.width
                wrapMode: TextEdit.Wrap

                Keys.onPressed: {
                    if (event.matches(StandardKey.Paste)) {
                        room.input.paste(false);
                        event.accepted = true;
                    } else if (event.key == Qt.Key_Space) {
                        // close popup if user enters space after colon
                        if (cursorPosition == completerTriggeredAt + 1)
                            popup.close();
                        if (popup.opened && completer.count <= 0)
                            popup.close();
                    } else if (event.modifiers == Qt.ControlModifier && event.key == Qt.Key_U) {
                        messageInput.clear();
                    } else if (event.modifiers == Qt.ControlModifier && event.key == Qt.Key_P) {
                        messageInput.text = room.input.previousText();
                    } else if (event.modifiers == Qt.ControlModifier && event.key == Qt.Key_N) {
                        messageInput.text = room.input.nextText();
                    } else if (event.key == Qt.Key_Escape && popup.opened) {
                        completer.completerName = "";
                        popup.close();
                        event.accepted = true;
                    } else if (event.matches(StandardKey.SelectAll) && popup.opened) {
                        completer.completerName = "";
                        popup.close();
                    } else if (event.matches(StandardKey.InsertLineSeparator)) {
                        if (popup.opened)
                            popup.close();
                    } else if (event.matches(StandardKey.InsertParagraphSeparator)) {
                        if (popup.opened) {
                            var currentCompletion = completer.currentCompletion();
                            completer.completerName = "";
                            popup.close();
                            if (currentCompletion) {
                                messageInput.insertCompletion(currentCompletion);
                                event.accepted = true;
                                return;
                            }
                        }
                        if (!Qt.inputMethod.visible) {
                            room.input.send();
                            event.accepted = true;
                        }
                    } else if (event.key == Qt.Key_Tab && (event.modifiers == Qt.NoModifier || event.modifiers == Qt.ShiftModifier)) {
                        event.accepted = true;
                        if (popup.opened) {
                            if (event.modifiers & Qt.ShiftModifier)
                                completer.down();
                            else
                                completer.up();
                        } else {
                            var pos = cursorPosition - 1;
                            while (pos > -1) {
                                var t = messageInput.getText(pos, pos + 1);
                                console.log('"' + t + '"');
                                if (t == '@') {
                                    messageInput.openCompleter(pos, "user");
                                    return;
                                } else if (t == ' ' || t == '\t') {
                                    messageInput.openCompleter(pos + 1, "user");
                                    return;
                                } else if (t == ':') {
                                    messageInput.openCompleter(pos, "emoji");
                                    return;
                                } else if (t == '~') {
                                    messageInput.openCompleter(pos, "customEmoji");
                                    return;
                                }
                                pos = pos - 1;
                            }
                            // At start of input
                            messageInput.openCompleter(0, "user");
                        }
                    } else if (event.key == Qt.Key_Up && popup.opened) {
                        event.accepted = true;
                        completer.up();
                    } else if ((event.key == Qt.Key_Down || event.key == Qt.Key_Backtab) && popup.opened) {
                        event.accepted = true;
                        completer.down();
                    } else if (event.key == Qt.Key_Up && event.modifiers == Qt.NoModifier) {
                        if (cursorPosition == 0) {
                            event.accepted = true;
                            var idx = room.edit ? room.idToIndex(room.edit) + 1 : 0;
                            while (true) {
                                var id = room.indexToId(idx);
                                if (!id || room.getDump(id, "").isEditable) {
                                    room.edit = id;
                                    cursorPosition = 0;
                                    Qt.callLater(positionCursorAtEnd);
                                    break;
                                }
                                idx++;
                            }
                        } else if (positionAt(0, cursorRectangle.y) === 0) {
                            event.accepted = true;
                            positionCursorAtStart();
                        }
                    } else if (event.key == Qt.Key_Down && event.modifiers == Qt.NoModifier) {
                        if (cursorPosition == messageInput.length && room.edit) {
                            event.accepted = true;
                            var idx = room.idToIndex(room.edit) - 1;
                            while (true) {
                                var id = room.indexToId(idx);
                                if (!id || room.getDump(id, "").isEditable) {
                                    room.edit = id;
                                    Qt.callLater(positionCursorAtStart);
                                    break;
                                }
                                idx--;
                            }
                        } else if (positionAt(width, cursorRectangle.y + 2) === messageInput.length) {
                            event.accepted = true;
                            positionCursorAtEnd();
                        }
                    }
                }
                // Ensure that we get escape key press events first.
                Keys.onShortcutOverride: event.accepted = (popup.opened && (event.key === Qt.Key_Escape || event.key === Qt.Key_Tab || event.key === Qt.Key_Enter || event.key === Qt.Key_Space))
                onCursorPositionChanged: {
                    if (!room)
                        return;
                    room.input.updateState(selectionStart, selectionEnd, cursorPosition, text);
                    if (popup.opened && cursorPosition <= completerTriggeredAt)
                        popup.close();
                    if (popup.opened)
                        completer.completer.setSearchString(messageInput.getText(completerTriggeredAt, cursorPosition) + messageInput.preeditText);
                }
                onPreeditTextChanged: {
                    if (popup.opened)
                        completer.completer.setSearchString(messageInput.getText(completerTriggeredAt, cursorPosition) + messageInput.preeditText);
                }
                onSelectionEndChanged: room.input.updateState(selectionStart, selectionEnd, cursorPosition, text)
                onSelectionStartChanged: room.input.updateState(selectionStart, selectionEnd, cursorPosition, text)
                onTextChanged: {
                    if (room)
                        room.input.updateState(selectionStart, selectionEnd, cursorPosition, text);
                    forceActiveFocus();
                    if (cursorPosition > 0)
                        lastChar = text.charAt(cursorPosition - 1);
                    else
                        lastChar = '';
                    if (lastChar == '@') {
                        messageInput.openCompleter(selectionStart - 1, "user");
                    } else if (lastChar == ':') {
                        messageInput.openCompleter(selectionStart - 1, "emoji");
                    } else if (lastChar == '#') {
                        messageInput.openCompleter(selectionStart - 1, "roomAliases");
                    } else if (lastChar == "~") {
                        messageInput.openCompleter(selectionStart - 1, "customEmoji");
                    }
                }

                Connections {
                    function onRoomChanged() {
                        messageInput.clear();
                        if (room)
                            messageInput.append(room.input.text);
                        completer.completerName = "";
                        messageInput.forceActiveFocus();
                    }

                    target: timelineView
                }
                Connections {
                    function onCompletionClicked(completion) {
                        messageInput.insertCompletion(completion);
                    }

                    target: completer
                }
                Popup {
                    id: popup
                    background: null
                    padding: 0
                    x: messageInput.positionToRectangle(messageInput.completerTriggeredAt).x
                    y: messageInput.positionToRectangle(messageInput.completerTriggeredAt).y - height

                    enter: Transition {
                        NumberAnimation {
                            duration: 100
                            from: 0
                            property: "opacity"
                            to: 1
                        }
                    }
                    exit: Transition {
                        NumberAnimation {
                            duration: 100
                            from: 1
                            property: "opacity"
                            to: 0
                        }
                    }

                    Completer {
                        id: completer
                        anchors.fill: parent
                        rowMargin: 2
                        rowSpacing: 0
                    }
                }
                Connections {
                    function onInsertText(text) {
                        messageInput.remove(messageInput.selectionStart, messageInput.selectionEnd);
                        messageInput.insert(messageInput.cursorPosition, text);
                    }
                    function onTextChanged(newText) {
                        messageInput.text = newText;
                        messageInput.cursorPosition = newText.length;
                    }

                    ignoreUnknownSignals: true
                    target: room ? room.input : null
                }
                Connections {
                    function onEditChanged() {
                        messageInput.forceActiveFocus();
                    }
                    function onReplyChanged() {
                        messageInput.forceActiveFocus();
                    }

                    ignoreUnknownSignals: true
                    target: room
                }
                Connections {
                    function onFocusInput() {
                        messageInput.forceActiveFocus();
                    }

                    target: TimelineManager
                }
                MouseArea {
                    acceptedButtons: Qt.MiddleButton
                    // workaround for wrong cursor shape on some platforms
                    anchors.fill: parent
                    cursorShape: Qt.IBeamCursor

                    onClicked: room.input.paste(true)
                }
            }
        }
        ImageButton {
            id: stickerButton
            Layout.alignment: Qt.AlignRight | Qt.AlignBottom
            Layout.margins: 8
            ToolTip.text: qsTr("Stickers")
            ToolTip.visible: hovered
            height: 22
            hoverEnabled: true
            image: ":/icons/icons/ui/sticky-note-solid.svg"
            visible: showAllButtons
            width: 22

            onClicked: stickerPopup.visible ? stickerPopup.close() : stickerPopup.show(stickerButton, room.roomId, function (row) {
                    room.input.sticker(stickerPopup.model.sourceModel, row);
                    TimelineManager.focusMessageInput();
                })

            StickerPicker {
                id: stickerPopup
                colors: timelineRoot.palette
            }
        }
        ImageButton {
            id: emojiButton
            Layout.alignment: Qt.AlignRight | Qt.AlignBottom
            Layout.margins: 8
            ToolTip.text: qsTr("Emoji")
            ToolTip.visible: hovered
            height: 22
            hoverEnabled: true
            image: ":/icons/icons/ui/smile.svg"
            width: 22

            onClicked: emojiPopup.visible ? emojiPopup.close() : emojiPopup.show(emojiButton, function (emoji) {
                    messageInput.insert(messageInput.cursorPosition, emoji);
                    TimelineManager.focusMessageInput();
                })
        }
        ImageButton {
            Layout.alignment: Qt.AlignRight | Qt.AlignBottom
            Layout.margins: 8
            Layout.rightMargin: 8
            ToolTip.text: qsTr("Send")
            ToolTip.visible: hovered
            height: 22
            hoverEnabled: true
            image: ":/icons/icons/ui/send.svg"
            width: 22

            onClicked: {
                room.input.send();
            }
        }
    }
    Text {
        anchors.centerIn: parent
        color: timelineRoot.palette.text
        text: qsTr("You don't have permission to send messages in this room")
        visible: room ? (!room.permissions.canSend(MtxEvent.TextMessage)) : false
    }
}