From 4a67ae119502f61b933ff14eade9f9743808c119 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sun, 16 Jun 2024 22:28:26 -0700
Subject: [PATCH] fix: message delete issue

---
 src/lib/components/chat/Messages.svelte       |  59 +++++----
 .../chat/Messages/ResponseMessage.svelte      | 116 +++++++++---------
 2 files changed, 94 insertions(+), 81 deletions(-)

diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index f633b5774..3cab9a584 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -202,38 +202,51 @@
 		}, 100);
 	};
 
-	const messageDeleteHandler = async (messageId) => {
+	const deleteMessageHandler = async (messageId) => {
 		const messageToDelete = history.messages[messageId];
-		const messageParentId = messageToDelete.parentId;
-		const messageChildrenIds = messageToDelete.childrenIds ?? [];
-		const hasSibling = messageChildrenIds.some(
+
+		const parentMessageId = messageToDelete.parentId;
+		const childMessageIds = messageToDelete.childrenIds ?? [];
+
+		const hasDescendantMessages = childMessageIds.some(
 			(childId) => history.messages[childId]?.childrenIds?.length > 0
 		);
-		messageChildrenIds.forEach((childId) => {
-			const child = history.messages[childId];
-			if (child && child.childrenIds) {
-				if (child.childrenIds.length === 0 && !hasSibling) {
-					// if last prompt/response pair
-					history.messages[messageParentId].childrenIds = [];
-					history.currentId = messageParentId;
+
+		history.currentId = parentMessageId;
+		await tick();
+
+		// Remove the message itself from the parent message's children array
+		history.messages[parentMessageId].childrenIds = history.messages[
+			parentMessageId
+		].childrenIds.filter((id) => id !== messageId);
+
+		await tick();
+
+		childMessageIds.forEach((childId) => {
+			const childMessage = history.messages[childId];
+
+			if (childMessage && childMessage.childrenIds) {
+				if (childMessage.childrenIds.length === 0 && !hasDescendantMessages) {
+					// If there are no other responses/prompts
+					history.messages[parentMessageId].childrenIds = [];
 				} else {
-					child.childrenIds.forEach((grandChildId) => {
+					childMessage.childrenIds.forEach((grandChildId) => {
 						if (history.messages[grandChildId]) {
-							history.messages[grandChildId].parentId = messageParentId;
-							history.messages[messageParentId].childrenIds.push(grandChildId);
+							history.messages[grandChildId].parentId = parentMessageId;
+							history.messages[parentMessageId].childrenIds.push(grandChildId);
 						}
 					});
 				}
 			}
-			// remove response
-			history.messages[messageParentId].childrenIds = history.messages[
-				messageParentId
+
+			// Remove child message id from the parent message's children array
+			history.messages[parentMessageId].childrenIds = history.messages[
+				parentMessageId
 			].childrenIds.filter((id) => id !== childId);
 		});
-		// remove prompt
-		history.messages[messageParentId].childrenIds = history.messages[
-			messageParentId
-		].childrenIds.filter((id) => id !== messageId);
+
+		await tick();
+
 		await updateChatById(localStorage.token, chatId, {
 			messages: messages,
 			history: history
@@ -292,7 +305,7 @@
 						>
 							{#if message.role === 'user'}
 								<UserMessage
-									on:delete={() => messageDeleteHandler(message.id)}
+									on:delete={() => deleteMessageHandler(message.id)}
 									{user}
 									{readOnly}
 									{message}
@@ -308,7 +321,7 @@
 									copyToClipboard={copyToClipboardWithToast}
 								/>
 							{:else if $mobile || (history.messages[message.parentId]?.models?.length ?? 1) === 1}
-								{#key message.id}
+								{#key message.id && history.currentId}
 									<ResponseMessage
 										{message}
 										siblings={history.messages[message.parentId]?.childrenIds ?? []}
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index a10f2fa62..c7ad576a8 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -940,68 +940,68 @@
 													>
 												</button>
 											</Tooltip>
-										{/if}
 
-										{#if isLastMessage && !readOnly}
-											<Tooltip content={$i18n.t('Continue Response')} placement="bottom">
-												<button
-													type="button"
-													class="{isLastMessage
-														? 'visible'
-														: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
-													on:click={() => {
-														continueGeneration();
-													}}
-												>
-													<svg
-														xmlns="http://www.w3.org/2000/svg"
-														fill="none"
-														viewBox="0 0 24 24"
-														stroke-width="2.3"
-														stroke="currentColor"
-														class="w-4 h-4"
+											{#if isLastMessage}
+												<Tooltip content={$i18n.t('Continue Response')} placement="bottom">
+													<button
+														type="button"
+														class="{isLastMessage
+															? 'visible'
+															: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
+														on:click={() => {
+															continueGeneration();
+														}}
 													>
-														<path
-															stroke-linecap="round"
-															stroke-linejoin="round"
-															d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-														/>
-														<path
-															stroke-linecap="round"
-															stroke-linejoin="round"
-															d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z"
-														/>
-													</svg>
-												</button>
-											</Tooltip>
+														<svg
+															xmlns="http://www.w3.org/2000/svg"
+															fill="none"
+															viewBox="0 0 24 24"
+															stroke-width="2.3"
+															stroke="currentColor"
+															class="w-4 h-4"
+														>
+															<path
+																stroke-linecap="round"
+																stroke-linejoin="round"
+																d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+															/>
+															<path
+																stroke-linecap="round"
+																stroke-linejoin="round"
+																d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z"
+															/>
+														</svg>
+													</button>
+												</Tooltip>
 
-											<Tooltip content={$i18n.t('Regenerate')} placement="bottom">
-												<button
-													type="button"
-													class="{isLastMessage
-														? 'visible'
-														: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
-													on:click={() => {
-														showRateComment = false;
-														regenerateResponse(message);
-													}}
-												>
-													<svg
-														xmlns="http://www.w3.org/2000/svg"
-														fill="none"
-														viewBox="0 0 24 24"
-														stroke-width="2.3"
-														stroke="currentColor"
-														class="w-4 h-4"
+												<Tooltip content={$i18n.t('Regenerate')} placement="bottom">
+													<button
+														type="button"
+														class="{isLastMessage
+															? 'visible'
+															: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
+														on:click={() => {
+															showRateComment = false;
+															regenerateResponse(message);
+														}}
 													>
-														<path
-															stroke-linecap="round"
-															stroke-linejoin="round"
-															d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-														/>
-													</svg>
-												</button>
-											</Tooltip>
+														<svg
+															xmlns="http://www.w3.org/2000/svg"
+															fill="none"
+															viewBox="0 0 24 24"
+															stroke-width="2.3"
+															stroke="currentColor"
+															class="w-4 h-4"
+														>
+															<path
+																stroke-linecap="round"
+																stroke-linejoin="round"
+																d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+															/>
+														</svg>
+													</button>
+												</Tooltip>
+											{/if}
 										{/if}
 									{/if}
 								</div>