From a55d6e607720594cbeb0ae38b6642d0a62bc0079 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sun, 30 Jun 2024 17:45:28 -0700
Subject: [PATCH] fix: compare message

---
 .../chat/Messages/CompareMessages.svelte      | 112 +++++++++---------
 1 file changed, 58 insertions(+), 54 deletions(-)

diff --git a/src/lib/components/chat/Messages/CompareMessages.svelte b/src/lib/components/chat/Messages/CompareMessages.svelte
index 12c1e9d1e..27fefb6cb 100644
--- a/src/lib/components/chat/Messages/CompareMessages.svelte
+++ b/src/lib/components/chat/Messages/CompareMessages.svelte
@@ -100,64 +100,68 @@
 		class="flex snap-x snap-mandatory overflow-x-auto scrollbar-hidden"
 		id="responses-container-{parentMessage.id}"
 	>
-		{#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 -->
+		{#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-50 dark:border-gray-850 '} transition p-5 rounded-3xl"
-					on:click={() => {
-						currentMessageId = groupedMessages[model].messages[groupedMessagesIdx[model]].id;
+					<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-800 border-[1.5px]'
+							: 'border-gray-50 dark:border-gray-850 '} transition p-5 rounded-3xl"
+						on:click={() => {
+							if (currentMessageId != message.id) {
+								currentMessageId = message.id;
+								let messageId = message.id;
+								console.log(messageId);
 
-						let messageId = groupedMessages[model].messages[groupedMessagesIdx[model]].id;
+								//
+								let messageChildrenIds = history.messages[messageId].childrenIds;
+								while (messageChildrenIds.length !== 0) {
+									messageId = messageChildrenIds.at(-1);
+									messageChildrenIds = history.messages[messageId].childrenIds;
+								}
 
-						console.log(messageId);
-						let messageChildrenIds = history.messages[messageId].childrenIds;
-
-						while (messageChildrenIds.length !== 0) {
-							messageId = messageChildrenIds.at(-1);
-							messageChildrenIds = history.messages[messageId].childrenIds;
-						}
-
-						history.currentId = messageId;
-						dispatch('change');
-					}}
-				>
-					<ResponseMessage
-						message={groupedMessages[model].messages[groupedMessagesIdx[model]]}
-						siblings={groupedMessages[model].messages.map((m) => m.id)}
-						isLastMessage={true}
-						{updateChatMessages}
-						{confirmEditResponseMessage}
-						showPreviousMessage={() => showPreviousMessage(model)}
-						showNextMessage={() => showNextMessage(model)}
-						{readOnly}
-						{rateMessage}
-						{copyToClipboard}
-						{continueGeneration}
-						regenerateResponse={async (message) => {
-							regenerateResponse(message);
-							await tick();
-							groupedMessagesIdx[model] = groupedMessages[model].messages.length - 1;
+								history.currentId = messageId;
+								dispatch('change');
+							}
 						}}
-						on:save={async (e) => {
-							console.log('save', e);
+					>
+						<ResponseMessage
+							message={groupedMessages[model].messages[groupedMessagesIdx[model]]}
+							siblings={groupedMessages[model].messages.map((m) => m.id)}
+							isLastMessage={true}
+							{updateChatMessages}
+							{confirmEditResponseMessage}
+							showPreviousMessage={() => showPreviousMessage(model)}
+							showNextMessage={() => showNextMessage(model)}
+							{readOnly}
+							{rateMessage}
+							{copyToClipboard}
+							{continueGeneration}
+							regenerateResponse={async (message) => {
+								regenerateResponse(message);
+								await tick();
+								groupedMessagesIdx[model] = groupedMessages[model].messages.length - 1;
+							}}
+							on:save={async (e) => {
+								console.log('save', e);
 
-							const message = e.detail;
-							history.messages[message.id] = message;
-							await updateChatById(localStorage.token, chatId, {
-								messages: messages,
-								history: history
-							});
-						}}
-					/>
-				</div>
-			{/if}
-		{/each}
+								const message = e.detail;
+								history.messages[message.id] = message;
+								await updateChatById(localStorage.token, chatId, {
+									messages: messages,
+									history: history
+								});
+							}}
+						/>
+					</div>
+				{/if}
+			{/each}
+		{/key}
 	</div>
 </div>