diff --git a/src/lib/components/chat/Messages/CompareMessages.svelte b/src/lib/components/chat/Messages/CompareMessages.svelte
index 0b5d0e464..8ab0a65ba 100644
--- a/src/lib/components/chat/Messages/CompareMessages.svelte
+++ b/src/lib/components/chat/Messages/CompareMessages.svelte
@@ -58,14 +58,17 @@
 </script>
 
 <div>
-	<div class="flex snap-x snap-mandatory overflow-x-auto scrollbar-none">
+	<div
+		class="flex snap-x snap-mandatory overflow-x-auto scrollbar-none"
+		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 -->
 
 				<div
-					class=" snap-center min-w-96 w-full max-w-full m-1 outline outline-1 {history.messages[
+					class=" snap-center min-w-80 w-full max-w-full m-1 outline outline-1 {history.messages[
 						currentMessageId
 					].model === model
 						? 'outline-gray-200 dark:outline-gray-700 outline-2'
@@ -133,8 +136,8 @@
 						{rateMessage}
 						{copyToClipboard}
 						{continueGeneration}
-						regenerateResponse={async (model) => {
-							regenerateResponse(model);
+						regenerateResponse={async (message) => {
+							regenerateResponse(message);
 							await tick();
 							groupedMessagesIdx[model] = groupedMessages[model].messages.length - 1;
 						}}
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 0b1038bd9..71227989b 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -895,7 +895,7 @@
 														? '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={() => {
-														regenerateResponse(message.model);
+														regenerateResponse(message);
 													}}
 												>
 													<svg
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index c071b0b17..013f5d196 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -759,16 +759,14 @@
 		console.log('stopResponse');
 	};
 
-	const regenerateResponse = async (modelId) => {
+	const regenerateResponse = async (message) => {
 		console.log('regenerateResponse');
-		if (messages.length != 0 && messages.at(-1).done == true) {
-			messages.splice(messages.length - 1, 1);
-			messages = messages;
 
-			let userMessage = messages.at(-1);
+		if (messages.length != 0) {
+			let userMessage = history.messages[message.parentId];
 			let userPrompt = userMessage.content;
 
-			await sendPrompt(userPrompt, userMessage.id, modelId);
+			await sendPrompt(userPrompt, userMessage.id, message.model);
 		}
 	};
 
diff --git a/src/routes/(app)/c/[id]/+page.svelte b/src/routes/(app)/c/[id]/+page.svelte
index 996d37047..b002d9971 100644
--- a/src/routes/(app)/c/[id]/+page.svelte
+++ b/src/routes/(app)/c/[id]/+page.svelte
@@ -764,16 +764,14 @@
 		console.log('stopResponse');
 	};
 
-	const regenerateResponse = async (modelId = null) => {
+	const regenerateResponse = async (message) => {
 		console.log('regenerateResponse');
-		if (messages.length != 0 && messages.at(-1).done == true) {
-			messages.splice(messages.length - 1, 1);
-			messages = messages;
 
-			let userMessage = messages.at(-1);
+		if (messages.length != 0) {
+			let userMessage = history.messages[message.parentId];
 			let userPrompt = userMessage.content;
 
-			await sendPrompt(userPrompt, userMessage.id, modelId);
+			await sendPrompt(userPrompt, userMessage.id, message.model);
 		}
 	};