fix: compare message

src/lib/components/chat/Messages/CompareMessages.svelte

@@ -100,25 +100,27 @@
 		class="flex snap-x snap-mandatory overflow-x-auto scrollbar-hidden"
 		id="responses-container-{parentMessage.id}"
 	>
+		{#key currentMessageId}
 			{#each Object.keys(groupedMessages) as model}
 				{#if groupedMessagesIdx[model] !== undefined && groupedMessages[model].messages.length > 0}
 					<!-- svelte-ignore a11y-no-static-element-interactions -->
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					{@const message = groupedMessages[model].messages[groupedMessagesIdx[model]]}
 
 					<div
 						class=" snap-center min-w-80 w-full max-w-full m-1 border {history.messages[
 							currentMessageId
 						].model === model
-						? 'border-gray-100 dark:border-gray-850 border-[1.5px]'
+							? 'border-gray-100 dark:border-gray-800 border-[1.5px]'
 							: 'border-gray-50 dark:border-gray-850 '} transition p-5 rounded-3xl"
 						on:click={() => {
-						currentMessageId = groupedMessages[model].messages[groupedMessagesIdx[model]].id;
-
-						let messageId = groupedMessages[model].messages[groupedMessagesIdx[model]].id;
-
+							if (currentMessageId != message.id) {
+								currentMessageId = message.id;
+								let messageId = message.id;
 								console.log(messageId);
-						let messageChildrenIds = history.messages[messageId].childrenIds;
 
+								//
+								let messageChildrenIds = history.messages[messageId].childrenIds;
 								while (messageChildrenIds.length !== 0) {
 									messageId = messageChildrenIds.at(-1);
 									messageChildrenIds = history.messages[messageId].childrenIds;
@@ -126,6 +128,7 @@
 
 								history.currentId = messageId;
 								dispatch('change');
+							}
 						}}
 					>
 						<ResponseMessage
@@ -159,5 +162,6 @@
 					</div>
 				{/if}
 			{/each}
+		{/key}
 	</div>
 </div>