From 68de49e533c7384cf81795ecfb5565672c396aca Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sat, 20 Apr 2024 19:10:05 -0500
Subject: [PATCH] fix: feedback area scroll into view

---
 src/lib/components/chat/Messages/RateComment.svelte  |  6 +++++-
 .../components/chat/Messages/ResponseMessage.svelte  | 12 ++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/chat/Messages/RateComment.svelte b/src/lib/components/chat/Messages/RateComment.svelte
index 2137b9e68..05eaae39f 100644
--- a/src/lib/components/chat/Messages/RateComment.svelte
+++ b/src/lib/components/chat/Messages/RateComment.svelte
@@ -7,6 +7,7 @@
 
 	const dispatch = createEventDispatcher();
 
+	export let messageId = null;
 	export let show = false;
 	export let message;
 
@@ -63,7 +64,10 @@
 	};
 </script>
 
-<div class=" my-2.5 rounded-xl px-4 py-3 border dark:border-gray-850">
+<div
+	class=" my-2.5 rounded-xl px-4 py-3 border dark:border-gray-850"
+	id="message-feedback-{messageId}"
+>
 	<div class="flex justify-between items-center">
 		<div class=" text-sm">{$i18n.t('Tell us more:')}</div>
 
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index db8eba169..4a0761967 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -556,6 +556,12 @@
 													on:click={() => {
 														rateMessage(message.id, 1);
 														showRateComment = true;
+
+														window.setTimeout(() => {
+															document
+																.getElementById(`message-feedback-${message.id}`)
+																?.scrollIntoView();
+														}, 0);
 													}}
 												>
 													<svg
@@ -585,6 +591,11 @@
 													on:click={() => {
 														rateMessage(message.id, -1);
 														showRateComment = true;
+														window.setTimeout(() => {
+															document
+																.getElementById(`message-feedback-${message.id}`)
+																?.scrollIntoView();
+														}, 0);
 													}}
 												>
 													<svg
@@ -844,6 +855,7 @@
 
 								{#if showRateComment}
 									<RateComment
+										messageId={message.id}
 										bind:show={showRateComment}
 										bind:message
 										on:submit={() => {