fix(MessagesSystemGroup): Correct collapsed property. Adjust system message 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 <[email protected]>

Author: DorraJaouad

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)" />
@@ -205,9 +205,16 @@ export default {
 			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 })
+					// Update the previous group collapsed state to be equal to the length of messages if it's not defined yet
+					if (groups.at(-1) && groups.at(-1).collapsed === undefined) {
+						groups.at(-1).collapsed = groups.at(-1).messages.length > 1
+					}
+					// Adding a new group
+					groups.push({ id: message.id, lastId: message.id, messages: [message], type: '', collapsed: this.groupIsCollapsed[message.id] })
 					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.at(-1).lastId = groups.at(-1).messages.at(-1).id
@@ -223,6 +230,11 @@ export default {
 					if (isLastReadInsideGroup) {
 						groups.at(-1).collapsed = false
 					}
+
+					// Update collapsed state for the last group if it's not defined yet
+					if (JSON.stringify(message) === JSON.stringify(messages.at(-1)) && groups.at(-1).collapsed === undefined) {
+						groups.at(-1).collapsed = groups.at(-1).messages.length > 1
+					}
 				}
 				lastMessage = message
 			}
@@ -232,7 +244,7 @@ export default {
 
 		toggleCollapsed(messages) {
 			this.$set(messages, 'collapsed', !messages.collapsed)
-			this.groupIsCollapsed[messages.id] = !this.groupIsCollapsed[messages.id]
+			this.groupIsCollapsed[messages.id] = messages.collapsed
 		},
 
 		getNextMessageId(message) {