status-desktop/ui/app/AppLayouts/Chat/views/ChatMessagesView.qml

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Window 2.13
import QtQuick.Layouts 1.13
import QtQml.Models 2.13
import QtGraphicalEffects 1.13
import QtQuick.Dialogs 1.3

import utils 1.0
import shared 1.0
import shared.views 1.0
import shared.panels 1.0
import shared.popups 1.0
import shared.status 1.0
import shared.controls 1.0
import shared.views.chat 1.0

import "../controls"
//TODO REMOVE
import "../stores"

Item {
    id: root
    anchors.fill: parent

    property var store

    property alias chatLogView: chatLogView
    property alias scrollToMessage: chatLogView.scrollToMessage

    property var messageContextMenuInst
    property var messageList: MessagesData {}

    property real scrollY: chatLogView.visibleArea.yPosition * chatLogView.contentHeight
    property int newMessages: 0
    property int countOnStartUp: 0

    ListView {
        id: chatLogView
        anchors.fill: parent
        spacing: localAccountSensitiveSettings.useCompactMode ? 0 : 4
        boundsBehavior: Flickable.StopAtBounds
        clip: true
        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
            }

            if (chatLogView.contentItem.height - chatLogView.headerItem.height < chatLogView.height) {
                chatLogView.headerItem.height = chatLogView.height - (chatLogView.contentItem.height - chatLogView.headerItem.height) - 36
            } else {
                chatLogView.headerItem.height = 0
            }
        }

        property var scrollToMessage: function (messageId, isSearch = false) {
            delayPositioningViewTimer.msgId = messageId;
            delayPositioningViewTimer.isSearch = isSearch;
            delayPositioningViewTimer.restart();
        }

        Timer {
            id: delayPositioningViewTimer
            interval: 1000
            property string msgId
            property bool isSearch
            onTriggered: {
                let item
                for (let i = 0; i < messages.rowCount(); i++) {
                    item = messageListDelegate.items.get(i);
                    if (item.model.messageId === msgId) {
                        chatLogView.positionViewAtIndex(i, ListView.Beginning);
                        if (localAccountSensitiveSettings.useCompactMode && isSearch) {
                            chatLogView.itemAtIndex(i).startMessageFoundAnimation();
                        }
                    }
                }
                msgId = "";
                isSearch = false;
            }
        }

        ScrollBar.vertical: ScrollBar {
            visible: chatLogView.visibleArea.heightRatio < 1
        }

        Connections {
            id: contentHeightConnection
            enabled: true
            target: chatLogView
            onContentHeightChanged: {
                chatLogView.checkHeaderHeight()
            }
            onHeightChanged: {
                chatLogView.checkHeaderHeight()
            }
        }

        Timer {
            id: timer
        }

        Button {
            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)
            anchors.bottom: parent.bottom
            anchors.right: parent.right
            anchors.rightMargin: Style.current.padding
            background: Rectangle {
                color: Style.current.buttonSecondaryColor
                border.width: 0
                radius: 16
            }
            onClicked: {
                newMessages = 0
                scrollDownButton.visible = false
                chatLogView.scrollToBottom(true)
            }

            StyledText {
                id: nbMessages
                visible: newMessages > 0
                width: visible ? implicitWidth : 0
                text: newMessages
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                color: Style.current.pillButtonTextColor
                font.pixelSize: 15
                anchors.leftMargin: Style.current.halfPadding
            }

            SVGImage {
                id: arrowImage
                width: 24
                height: 24
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: nbMessages.right
                source: Style.svg("leave_chat")
                anchors.leftMargin: nbMessages.visible ? scrollDownButton.buttonPadding : 0
                rotation: -90

                ColorOverlay {
                    anchors.fill: parent
                    source: parent
                    color: Style.current.pillButtonTextColor
                }
            }

            MouseArea {
                cursorShape: Qt.PointingHandCursor
                anchors.fill: parent
                onPressed: mouse.accepted = false
            }
        }

        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 {
            target: root.store.chatsModelInst

            onAppReady: {
                chatLogView.scrollToBottom(true)
            }
        }

        Connections {
            target: root.store.chatsModelInst.messageView

            onSendingMessageSuccess: {
                chatLogView.scrollToBottom(true)
            }

            onSendingMessageFailed: {
                sendingMsgFailedPopup.open();
            }

            onNewMessagePushed: {
                if (!chatLogView.scrollToBottom()) {
                    newMessages++
                }
            }
        }

        Connections {
            target: root.store.chatsModelInst.communities

            // Note:
            // Whole this Connection object (both slots) should be moved to the nim side.
            // Left here only cause we don't have a way to deal with translations on the nim side.

            onMembershipRequestChanged: function (communityId, communityName, accepted) {
                chatColumnLayout.currentNotificationChatId = null
                chatColumnLayout.currentNotificationCommunityId = communityId
                root.store.chatsModelInst.showOSNotification("Status",
                                              //% "You have been accepted into the ‘%1’ community"
                                              accepted ? qsTrId("you-have-been-accepted-into-the---1--community").arg(communityName) :
                                                         //% "Your request to join the ‘%1’ community was declined"
                                                         qsTrId("your-request-to-join-the---1--community-was-declined").arg(communityName),
                                              accepted? Constants.osNotificationType.acceptedIntoCommunity :
                                                        Constants.osNotificationType.rejectedByCommunity,
                                              communityId,
                                              "",
                                              "",
                                              localAccountSensitiveSettings.useOSNotifications)
            }

            onMembershipRequestPushed: function (communityId, communityName, pubKey) {
                chatColumnLayout.currentNotificationChatId = null
                chatColumnLayout.currentNotificationCommunityId = communityId
                //% "New membership request"
                root.store.chatsModelInst.showOSNotification(qsTrId("new-membership-request"),
                                              //% "%1 asks to join ‘%2’"
                                              qsTrId("-1-asks-to-join---2-").arg(Utils.getDisplayName(pubKey)).arg(communityName),
                                              Constants.osNotificationType.joinCommunityRequest,
                                              communityId,
                                              "",
                                              "",
                                              localAccountSensitiveSettings.useOSNotifications)
            }
        }

        property var loadMsgs : Backpressure.oneInTime(chatLogView, 500, function() {
            if(!messages.initialMessagesLoaded || messages.loadingHistoryMessages)
                return

            root.store.chatsModelInst.messageView.loadMoreMessages(chatId);
        });

        onContentYChanged: {
            scrollDownButton.visible = (contentHeight - (scrollY + height) > 400)
            if(scrollDownButton.visible && scrollY < 500){
                loadMsgs();
            }
        }

        model: messageListDelegate
        section.property: "sectionIdentifier"
        section.criteria: ViewSection.FullString

        Component.onCompleted: scrollToBottom(true)
    }

    MessageDialog {
        id: sendingMsgFailedPopup
        standardButtons: StandardButton.Ok
        //% "Failed to send message."
        text: qsTrId("failed-to-send-message-")
        icon: StandardIcon.Critical
    }

    Timer {
        id: modelLoadingDelayTimer
        interval: 1000
        onTriggered: {
            root.countOnStartUp = messageListDelegate.count;
        }
    }

    DelegateModelGeneralized {
        id: messageListDelegate
        lessThan: [
            function(left, right) { return left.clock > right.clock }
        ]

        model: messages

        delegate: MessageView {
            id: msgDelegate
            rootStore: root.store
            messageStore: root.store.messageStore
            /////////////TODO Remove
            fromAuthor: model.fromAuthor
            chatId: model.chatId
            userName: model.userName
            alias: model.alias
            localName: model.localName
            message: model.message
            plainText: model.plainText
            identicon: model.identicon
            isCurrentUser: model.isCurrentUser
            timestamp: model.timestamp
            sticker: model.sticker
            contentType: model.contentType
            replaces: model.replaces
            isEdited: model.isEdited
            outgoingStatus: model.outgoingStatus
            responseTo: model.responseTo
            authorCurrentMsg: msgDelegate.ListView.section
            // The previous message is actually the nextSection since we reversed the list order
            authorPrevMsg: msgDelegate.ListView.nextSection
            imageClick: imagePopup.openPopup.bind(imagePopup)
            messageId: model.messageId
            emojiReactions: model.emojiReactions
            linkUrls: model.linkUrls
            communityId: model.communityId
            hasMention: model.hasMention
            stickerPackId: model.stickerPackId
            pinnedMessage: model.isPinned
            pinnedBy: model.pinnedBy
            gapFrom: model.gapFrom
            gapTo: model.gapTo
            visible: !model.hide
            messageContextMenu: root.messageContextMenuInst

            prevMessageIndex: {
                // This is used in order to have access to the previous message and determine the timestamp
                // we can't rely on the index because the sequence of messages is not ordered on the nim side
                if (msgDelegate.DelegateModel.itemsIndex < messageListDelegate.items.count - 1) {
                    return messageListDelegate.items.get(msgDelegate.DelegateModel.itemsIndex + 1).model.index
                }
                return -1;
            }
            nextMessageIndex: {
                if (msgDelegate.DelegateModel.itemsIndex < 1) {
                    return -1
                }
                return messageListDelegate.items.get(msgDelegate.DelegateModel.itemsIndex - 1).model.index
            }
            scrollToBottom: chatLogView.scrollToBottom
            timeout: model.timeout
            Component.onCompleted: {
                if ((root.countOnStartUp > 0) && (root.countOnStartUp - 1) < index) {
                    //new message, increment z order
                    z = index;
                }
                messageStore.fromAuthor = model.fromAuthor;
                messageStore.chatId = model.chatId;
                messageStore.userName = model.userName;
                messageStore.alias = model.alias;
                messageStore.localName = model.localName;
                messageStore.message = model.message;
                messageStore.plainText = model.plainText;
                messageStore.identicon = model.identicon;
                messageStore.isCurrentUser = model.isCurrentUser;
                messageStore.timestamp = model.timestamp;
                messageStore.sticker = model.sticker;
                messageStore.contentType = model.contentType;
                messageStore.replaces = model.replaces;
                messageStore.isEdited = model.isEdited;
                messageStore.outgoingStatus = model.outgoingStatus;
                messageStore.responseTo = model.responseTo;
                messageStore.authorCurrentMsg = msgDelegate.ListView.section;
                // The previous message is actually the nextSection since we reversed the list order
                messageStore.authorPrevMsg = msgDelegate.ListView.nextSection;
                messageStore.imageClick = imagePopup.openPopup.bind(imagePopup);
                messageStore.messageId = model.messageId;
                messageStore.emojiReactions = model.emojiReactions;
                messageStore.linkUrls = model.linkUrls;
                messageStore.communityId = model.communityId;
                messageStore.hasMention = model.hasMention;
                messageStore.stickerPackId = model.stickerPackId;
                messageStore.pinnedMessage = model.isPinned;
                messageStore.pinnedBy = model.pinnedBy;
                messageStore.gapFrom = model.gapFrom;
                messageStore.gapTo = model.gapTo;
                messageStore.messageContextMenu = root.messageContextMenuInst;
                messageStore.prevMessageIndex =
                    // This is used in order to have access to the previous message and determine the timestamp
                    // we can't rely on the index because the sequence of messages is not ordered on the nim side
                   (msgDelegate.DelegateModel.itemsIndex < messageListDelegate.items.count - 1) ?
                      messageListDelegate.items.get(msgDelegate.DelegateModel.itemsIndex + 1).model.index
                    : -1;
                messageStore.nextMessageIndex = (msgDelegate.DelegateModel.itemsIndex < 1) ?
                        -1 : messageListDelegate.items.get(msgDelegate.DelegateModel.itemsIndex - 1).model.index;
                messageStore.scrollToBottom = chatLogView.scrollToBottom;
                messageStore.timeout = model.timeout;
            }
        }
        Component.onCompleted: {
            modelLoadingDelayTimer.start();
        }
    }
}