fix(MessagesSystemGroup): Correct collapsed property. Adjust system m…

…essage type to be dependent on the length of messages in the group. If it is only one, it is forcibly and always not collapsed ( it is a normal system messages without combined header)

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>

src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue

@@ -42,7 +42,7 @@
 					:key="message.id"
 					v-bind="message"
 					:token="token"
-					is-collapsed-system-message
+					:is-collapsed-system-message="messagesCollapsed.messages?.length > 1"
 					:last-collapsed-message-id="messagesCollapsed.lastId"
 					:next-message-id="getNextMessageId(message)"
 					:previous-message-id="getPrevMessageId(message)" />
@@ -119,8 +119,13 @@ export default {
 			immediate: true,
 			handler(value) {
 				this.messagesGroupedBySystemMessage = this.groupMessages(value)
+				this.updateCollapsedState()
 			},
 		},
+
+		lastReadMessageId() {
+			this.updateCollapsedState()
+		},
 	},
 
 	methods: {
@@ -198,41 +203,52 @@ export default {
 			return ''
 		},
 
+		updateCollapsedState() {
+			for (const group of this.messagesGroupedBySystemMessage) {
+				const isLastReadInsideGroup = this.lastReadMessageId >= group.id && this.lastReadMessageId < group.lastId
+				if (isLastReadInsideGroup) {
+					// If the last read message is inside the group, we should show the group expanded
+					group.collapsed = false
+				} else if (this.groupIsCollapsed[group.id] !== undefined) {
+					// If the group was collapsed before, we should keep it collapsed
+					group.collapsed = this.groupIsCollapsed[group.id]
+				} else {
+					// If the group is not collapsed, we should collapse it if it contains more than one message
+					group.collapsed = group.messages.length > 1
+				}
+			}
+		},
+
 		groupMessages(messages) {
 			const groups = []
 			let lastMessage = null
 			let forceNextGroup = false
 			for (const message of messages) {
 				const groupingType = this.messagesShouldBeGrouped(message, lastMessage)
 				if (!groupingType || forceNextGroup) {
-					groups.push({ id: message.id, lastId: message.id, messages: [message], type: '', collapsed: this.groupIsCollapsed[message.id] ?? true })
+					// Adding a new group
+					groups.push({ id: message.id, lastId: message.id, messages: [message], type: '', collapsed: group.messages.length > 1 })
 					forceNextGroup = false
 				} else {
+					// Adding a message to the existing group
+
 					if (groupingType === 'call_reconnected') {
-						groups.push({ id: message.id, lastId: message.id, messages: [groups.at(-1).messages.pop()], type: '', collapsed: this.groupIsCollapsed[message.id] ?? true })
+						groups.push({ id: message.id, lastId: message.id, messages: [groups.at(-1).messages.pop()], type: '', collapsed: group.messages.length > 1 })
 						groups.at(-1).lastId = groups.at(-1).messages.at(-1).id
 						forceNextGroup = true
 					}
 					groups.at(-1).messages.push(message)
 					groups.at(-1).lastId = message.id
 					groups.at(-1).type = groupingType
-
-					// Check if last read message is hidden inside the collapsed group, and open it, if so.
-					// Otherwise, combined system message will show a marker
-					const isLastReadInsideGroup = this.lastReadMessageId >= groups.at(-1).id && this.lastReadMessageId < groups.at(-1).lastId
-					if (isLastReadInsideGroup) {
-						groups.at(-1).collapsed = false
-					}
 				}
 				lastMessage = message
 			}
-
 			return groups
 		},
 
-		toggleCollapsed(messages) {
-			this.$set(messages, 'collapsed', !messages.collapsed)
-			this.groupIsCollapsed[messages.id] = !this.groupIsCollapsed[messages.id]
+		toggleCollapsed(group) {
+			this.$set(group, 'collapsed', !group.collapsed)
+			this.groupIsCollapsed[group.id] = group.collapsed
 		},
 
 		getNextMessageId(message) {