fix: cloned many model chat freezing issue

src/lib/components/chat/Messages.svelte

@@ -5,15 +5,12 @@
 
 	import { toast } from 'svelte-sonner';
 	import { getChatList, updateChatById } from '$lib/apis/chats';
+	import { copyToClipboard, findWordIndices } from '$lib/utils';
 
 	import UserMessage from './Messages/UserMessage.svelte';
 	import ResponseMessage from './Messages/ResponseMessage.svelte';
 	import Placeholder from './Messages/Placeholder.svelte';
-	import Spinner from '../common/Spinner.svelte';
-	import { imageGenerations } from '$lib/apis/images';
-	import { copyToClipboard, findWordIndices } from '$lib/utils';
-	import CompareMessages from './Messages/CompareMessages.svelte';
-	import { stringify } from 'postcss';
+	import MultiResponseMessages from './Messages/MultiResponseMessages.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -364,7 +361,7 @@
 								{/key}
 							{:else}
 								{#key message.parentId}
-									<CompareMessages
+									<MultiResponseMessages
 										bind:history
 										{messages}
 										{readOnly}

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

@@ -1,9 +1,7 @@
 <script lang="ts">
 	import { onMount, tick } from 'svelte';
 	import { createEventDispatcher } from 'svelte';
-
 	import { updateChatById } from '$lib/apis/chats';
-
 	import ResponseMessage from './ResponseMessage.svelte';
 
 	export let chatId;
@@ -30,17 +28,9 @@
 	let groupedMessages = {};
 	let groupedMessagesIdx = {};
 
-	$: groupedMessages = parentMessage?.models.reduce((a, model, modelIdx) => {
-		// Find all messages that are children of the parent message and have the same model
-		const modelMessages = parentMessage?.childrenIds
-			.map((id) => history.messages[id])
-			.filter((m) => m.modelIdx === modelIdx);
-
-		return {
-			...a,
-			[modelIdx]: { messages: modelMessages }
-		};
-	}, {});
+	$: if (parentMessage) {
+		initHandler();
+	}
 
 	const showPreviousMessage = (modelIdx) => {
 		groupedMessagesIdx[modelIdx] = Math.max(0, groupedMessagesIdx[modelIdx] - 1);
@@ -78,25 +68,47 @@
 		dispatch('change');
 	};
 
-	onMount(async () => {
+	const initHandler = async () => {
 		await tick();
 		currentMessageId = messages[messageIdx].id;
 
-		for (const [modelIdx, model] of parentMessage?.models.entries()) {
+		groupedMessages = parentMessage?.models.reduce((a, model, modelIdx) => {
+			// Find all messages that are children of the parent message and have the same model
+			const modelMessages = parentMessage?.childrenIds
+				.map((id) => history.messages[id])
+				.filter((m) => m.modelIdx === modelIdx);
+
+			return {
+				...a,
+				[modelIdx]: { messages: modelMessages }
+			};
+		}, {});
+
+		groupedMessagesIdx = parentMessage?.models.reduce((a, model, modelIdx) => {
 			const idx = groupedMessages[modelIdx].messages.findIndex((m) => m.id === currentMessageId);
 			if (idx !== -1) {
-				groupedMessagesIdx[modelIdx] = idx;
+				return {
+					...a,
+					[modelIdx]: idx
+				};
 			} else {
-				groupedMessagesIdx[modelIdx] = 0;
-			}
+				return {
+					...a,
+					[modelIdx]: 0
+				};
 			}
+		}, {});
+	};
+
+	onMount(async () => {
+		initHandler();
 	});
 </script>
 
 <div>
 	<div
 		class="flex snap-x snap-mandatory overflow-x-auto scrollbar-hidden"
-		id="responses-container-{parentMessage.id}"
+		id="responses-container-{chatId}-{parentMessage.id}"
 	>
 		{#key currentMessageId}
 			{#each Object.keys(groupedMessages) as modelIdx}
@@ -128,8 +140,9 @@
 						}}
 					>
 						{#key history.currentId}
+							{#if message}
 								<ResponseMessage
-								message={groupedMessages[modelIdx].messages[groupedMessagesIdx[modelIdx]]}
+									{message}
 									siblings={groupedMessages[modelIdx].messages.map((m) => m.id)}
 									isLastMessage={true}
 									{updateChatMessages}
@@ -156,6 +169,7 @@
 										});
 									}}
 								/>
+							{/if}
 						{/key}
 					</div>
 				{/if}