status-desktop/ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.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 "../../../../shared"
import "../../../../shared/status"
import "../../../../imports"
import "../components"
import "./samples/"
import "./MessageComponents"
import "../ContactsColumn"
import "../CommunityComponents"

SplitView {
    id: svRoot
    property alias chatLogView: chatLogView
    property alias scrollToMessage: chatLogView.scrollToMessage

    property var messageContextMenuInst
    property var messageList: MessagesData {}
    property bool loadingMessages: false
    property real scrollY: chatLogView.visibleArea.yPosition * chatLogView.contentHeight
    property int newMessages: 0
    property var currentTime

    Layout.fillWidth: true
    Layout.fillHeight: true

    handle: SplitViewHandle { implicitWidth: 5}

    ScrollView {
        id: root
        contentItem: chatLogView

        SplitView.fillWidth: true
        SplitView.minimumWidth: 200

        height: parent.height
        ScrollBar.vertical.policy: chatLogView.contentHeight > chatLogView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff

        property int countOnStartUp: 0

        ListView {
            id: chatLogView
            anchors.fill: parent
            anchors.bottomMargin: Style.current.bigPadding
            spacing: appSettings.useCompactMode ? 0 : 4
            boundsBehavior: Flickable.StopAtBounds
            flickDeceleration: {
                if (utilsModel.getOs() === Constants.windows) {
                    return 5000
                }
                return 10000
            }
            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) {
                let item
                for (let i = 0; i < messageListDelegate.count; i++) {
                    item = messageListDelegate.items.get(i)
                    if (item.model.messageId === messageId) {
                        chatLogView.positionViewAtIndex(i, ListView.Center)
                        return
                    }
                }
            }

            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: "../../../img/leave_chat.svg"
                    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: chatsModel

                onAppReady: {
                    chatLogView.scrollToBottom(true)
                }
            }

            Connections {
                target: chatsModel.messageView
                onMessagesLoaded: {
                    loadingMessages = false;
                }

                onSendingMessage: {
                    chatLogView.scrollToBottom(true)
                }

                onSendingMessageFailed: {
                    sendingMsgFailedPopup.open();
                }

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

            Connections {
                target: chatsModel.communities

                onMembershipRequestChanged: function (communityId, communityName, accepted) {
                    chatColumnLayout.currentNotificationChatId = null
                    chatColumnLayout.currentNotificationCommunityId = communityId
                    systemTray.showMessage("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),
                                        SystemTrayIcon.NoIcon,
                                        Constants.notificationPopupTTL)
                }

                onMembershipRequestPushed: function (communityId, communityName, pubKey) {
                    chatColumnLayout.currentNotificationChatId = null
                    chatColumnLayout.currentNotificationCommunityId = communityId
                    //% "New membership request"
                    systemTray.showMessage(qsTrId("new-membership-request"),
                                        //% "%1 asks to join ‘%2’"
                                        qsTrId("-1-asks-to-join---2-").arg(Utils.getDisplayName(pubKey)).arg(communityName),
                                        SystemTrayIcon.NoIcon,
                                        Constants.notificationPopupTTL)
                }
            }

            property var loadMsgs : Backpressure.oneInTime(chatLogView, 500, function() {
                if(loadingMessages) return;
                loadingMessages = true;
                chatsModel.messageView.loadMoreMessages();
            });

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

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

        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: messageList

            delegate: Message {
                id: msgDelegate
                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
                Component.onCompleted: {
                    if ((root.countOnStartUp > 0) && (root.countOnStartUp - 1) < index) {
                        //new message, increment z order
                        z = index;
                    }
                }
                messageContextMenu: svRoot.messageContextMenuInst

                // 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
                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: {
                modelLoadingDelayTimer.start();
            }
        }
    }

    Loader {
        property int defaultWidth: 250
        SplitView.preferredWidth: active ? defaultWidth : 0
        SplitView.minimumWidth: active ? 50 : 0
        active: showUsers && chatsModel.channelView.activeChannel.chatType !== Constants.chatTypeOneToOne
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        sourceComponent:appSettings.communitiesEnabled && chatsModel.communities.activeCommunity.active ? communityUserListComponent : userListComponent
    }

    Component {
        id: communityUserListComponent
        CommunityUserList { }
    }

    Component {
        id: userListComponent
        UserList { }
    }
}

/*##^##
Designer {
    D{i:0;autoSize:true;height:480;width:640}
}
##^##*/