Add i18n translation for feedback reasons

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

@@ -1,31 +1,38 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
 
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { createEventDispatcher, onMount, getContext } from 'svelte';
+	
+	const i18n = getContext('i18n');
 
 	const dispatch = createEventDispatcher();
 
 	export let show = false;
 	export let message;
 
-	const LIKE_REASONS = [
-		`Accurate information`,
-		`Followed instructions perfectly`,
-		`Showcased creativity`,
-		`Positive attitude`,
-		`Attention to detail`,
-		`Thorough explanation`,
-		`Other`
+	let LIKE_REASONS = [];
+	let DISLIKE_REASONS = [];
+
+	function loadReasons() {
+		LIKE_REASONS = [
+			$i18n.t("Accurate information"),
+			$i18n.t("Followed instructions perfectly"),
+			$i18n.t("Showcased creativity"),
+			$i18n.t("Positive attitude"),
+			$i18n.t("Attention to detail"),
+			$i18n.t("Thorough explanation"),
+			$i18n.t("Other")
 		];
 
-	const DISLIKE_REASONS = [
-		`Don't like the style`,
-		`Not factually correct`,
-		`Didn't fully follow instructions`,
-		`Refused when it shouldn't have`,
-		`Being Lazy`,
-		`Other`
+		DISLIKE_REASONS = [
+			$i18n.t("Don't like the style"),
+			$i18n.t("Not factually correct"),
+			$i18n.t("Didn't fully follow instructions"),
+			$i18n.t("Refused when it shouldn't have"),
+			$i18n.t("Being lazy"),
+			$i18n.t("Other")
 		];
+	}
 
 	let reasons = [];
 	let selectedReason = null;
@@ -40,6 +47,7 @@
 	onMount(() => {
 		selectedReason = message.annotation.reason;
 		comment = message.annotation.comment;
+		loadReasons();
 	});
 
 	const submitHandler = () => {
@@ -50,14 +58,14 @@
 
 		dispatch('submit');
 
-		toast.success('Thanks for your feedback!');
+		toast.success($i18n.t('Thanks for your feedback!'));
 		show = false;
 	};
 </script>
 
 <div class=" my-2.5 rounded-xl px-4 py-3 border dark:border-gray-850">
 	<div class="flex justify-between items-center">
-		<div class=" text-sm">Tell us more:</div>
+		<div class=" text-sm">{$i18n.t('Tell us more:')}</div>
 
 		<button
 			on:click={() => {
@@ -99,7 +107,7 @@
 		<textarea
 			bind:value={comment}
 			class="w-full text-sm px-1 py-2 bg-transparent outline-none resize-none rounded-xl"
-			placeholder="Feel free to add specific details"
+			placeholder="{$i18n.t('Feel free to add specific details')}"
 			rows="2"
 		/>
 	</div>

src/lib/i18n/locales/vi-VN/translation.json

@@ -359,5 +359,20 @@
 	"Write a summary in 50 words that summarizes [topic or keyword].": "Viết một tóm tắt trong vòng 50 từ cho [chủ đề hoặc từ khóa].",
 	"You": "Bạn",
 	"You're a helpful assistant.": "Bạn là một trợ lý hữu ích.",
-	"You're now logged in.": "Bạn đã đăng nhập."
+	"You're now logged in.": "Bạn đã đăng nhập.",
+	"Accurate information": "Thông tin chính xác",
+	"Followed instructions perfectly": "Tuân theo chỉ dẫn một cách hoàn hảo",
+	"Showcased creativity": "Thể hiện sự sáng tạo",
+	"Positive attitude": "Thể hiện thái độ tích cực",
+	"Attention to detail": "Có sự chú ý đến chi tiết của vấn đề",
+	"Thorough explanation": "Giải thích kỹ lưỡng",
+	"Don't like the style": "Không thích phong cách trả lời",
+	"Not factually correct": "Không chính xác so với thực tế",
+	"Didn't fully follow instructions": "Không tuân theo chỉ dẫn một cách đầy đủ",
+	"Refused when it shouldn't have": "Từ chối trả lời mà nhẽ không nên làm vậy",
+	"Being lazy": "Lười biếng",
+	"Other": "Khác",
+	"Thanks for your feedback!": "Cám ơn bạn đã gửi phản hồi!",
+	"Tell us more:": "Hãy cho chúng tôi hiểu thêm về chất lượng của câu trả lời:",
+	"Feel free to add specific details": "Mô tả chi tiết về chất lượng của câu hỏi và phương án trả lời"
 }