fix: fix scrolling to bottom for images

ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml

@@ -6,6 +6,7 @@ import "../../../../shared"
 import "../../../../imports"
 import "../components"
 import "./samples/"
+import "./MessageComponents"
 
 ScrollView {
     id: scrollView
@@ -22,18 +23,6 @@ ScrollView {
     ScrollBar.vertical.policy: chatLogView.contentHeight > chatLogView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
     ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
 
-    function scrollToBottom(force, caller) {
-        if (!force && !chatLogView.atYEnd) {
-            // User has scrolled up, we don't want to scroll back
-            return
-        }
-        if (caller && caller !== chatLogView.itemAtIndex(chatLogView.count - 1)) {
-            // If we have a caller, only accept its request if it's the last message
-            return
-        }
-        Qt.callLater(chatLogView.positionViewAtEnd)
-    }
-
     ListView {
         id: chatLogView
         anchors.fill: parent
@@ -47,6 +36,27 @@ ScrollView {
             id: timer
         }
 
+        function scrollToBottom(force, caller) {
+            if (!force && !chatLogView.atYEnd) {
+                // User has scrolled up, we don't want to scroll back
+                return
+            }
+            if (caller) {
+                if (caller !== chatLogView.itemAtIndex(chatLogView.count - 1)) {
+                    // If we have a caller, only accept its request if it's the last message
+                    return
+                }
+                // Add a small delay because images, even though they say they say they are loaed, they aren't shown yet
+                timer.setTimeout(function() {
+                    Qt.callLater(chatLogView.positionViewAtEnd)
+                }, 100);
+                return
+            }
+
+            Qt.callLater(chatLogView.positionViewAtEnd)
+        }
+
+
         Connections {
 
             target: chatsModel
@@ -55,7 +65,7 @@ ScrollView {
             }
 
             onActiveChannelChanged: {
-                scrollToBottom(true)
+                chatLogView.scrollToBottom(true)
             }
 
             onSendingMessage: {
@@ -63,13 +73,13 @@ ScrollView {
             }
 
             onMessagePushed: {
-                scrollToBottom()
+                chatLogView.scrollToBottom()
             }
 
             onAppReady: {
                 // Add an additionnal delay, since the app can be "ready" just milliseconds before the UI updated to show the chat
                 timer.setTimeout(function() {
-                    scrollToBottom(true)
+                    chatLogView.scrollToBottom(true)
                 }, 500);
             }
 
@@ -175,7 +185,7 @@ ScrollView {
                 return -1;
             }
             appSettings: scrollView.appSettings
-            scrollToBottom: scrollView.scrollToBottom
+            scrollToBottom: chatLogView.scrollToBottom
             timeout: model.timeout
         }
     }

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageMessage.qml

@@ -11,7 +11,7 @@ Rectangle {
     height: {
         let h = chatVerticalPadding
         for (let i = 0; i < imageRepeater.count; i++) {
-            h += imageRepeater.itemAt(i).height
+            h += imageRepeater.itemAt(i).height || imageRepeater.itemAt(i).minHeight
         }
         return h + chatVerticalPadding * imageRepeater.count
     }
@@ -31,6 +31,9 @@ Rectangle {
         }
 
         Image {
+            // This minimum height is for the initial load of the chat to work correctly
+            // Without this, the chat doesn't understand that the image wil lhave a height and doesn't scroll to the bottom
+            property int minHeight: 400
             id: imageMessage
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.top: (index == 0) ? parent.top: parent.children[index-1].bottom
@@ -38,8 +41,10 @@ Rectangle {
             sourceSize.width: imageChatBox.imageWidth
             source: modelData
             onStatusChanged: {
-                if (imageMessage.status == Image.Error) {
+                if (imageMessage.status === Image.Error) {
                     imageMessage.height = 0
+                    imageMessage.minHeight = 0
+                    imageMessage.source = ""
                     imageMessage.visible = false
                     imageChatBox.height = 0
                     imageChatBox.visible = false