remove user message and response from DOM as pair

src/lib/components/chat/Messages.svelte

@@ -221,6 +221,15 @@
 			scrollToBottom();
 		}, 100);
 	};
+	
+	const deleteMessage = async (messageId) => {
+		history.messages[messageId].deleted = true;
+		history.messages[history.messages[messageId].childrenIds[0]].deleted = true;
+		updateChatById(localStorage.token, chatId, {
+			messages: messages,
+			history: history
+		});
+	};
 </script>
 
 {#if messages.length == 0}
@@ -229,6 +238,7 @@
 	<div class=" pb-10">
 		{#key chatId}
 			{#each messages as message, messageIdx}
+				{#if !message.deleted}
 					<div class=" w-full">
 						<div
 							class="flex flex-col justify-between px-5 mb-3 {$settings?.fullScreenMode ?? null
@@ -237,6 +247,7 @@
 						>
 							{#if message.role === 'user'}
 								<UserMessage
+									on:delete={() => deleteMessage(message.id)}
 									user={$user}
 									{message}
 									isFirstMessage={messageIdx === 0}
@@ -313,6 +324,7 @@
 							{/if}
 						</div>
 					</div>
+				{/if}
 			{/each}
 
 			{#if bottomPadding}

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

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import dayjs from 'dayjs';
 
-	import { tick } from 'svelte';
+	import { tick, createEventDispatcher } from 'svelte';
 	import Name from './Name.svelte';
 	import ProfileImage from './ProfileImage.svelte';
 	import { modelfiles, settings } from '$lib/stores';
 
+	const dispatch = createEventDispatcher();
+
 	export let user;
 	export let message;
 	export let siblings;
@@ -286,9 +288,7 @@
 						{#if !isFirstMessage}
 						<button
 							class="invisible group-hover:visible p-1 rounded dark:hover:text-white transition"
-							on:click={() => {
-								// TODO delete message
-							}}
+							on:click={() => dispatch('delete', { messageId: message.id })}
 						>
 							<svg
 								xmlns="http://www.w3.org/2000/svg"