enh: more info in feedback modal

src/lib/components/admin/Evaluations/FeedbackModal.svelte

@@ -3,16 +3,41 @@
 	import { getContext } from 'svelte';
 	const i18n = getContext('i18n');
 	import XMark from '$lib/components/icons/XMark.svelte';
+	import { getFeedbackById } from '$lib/apis/evaluations';
+	import { toast } from 'svelte-sonner';
+	import Spinner from '$lib/components/common/Spinner.svelte';
 
 	export let show = false;
 	export let selectedFeedback = null;
 
 	export let onClose: () => void = () => {};
 
+	let loaded = false;
+
+	let feedbackData = null;
+
 	const close = () => {
 		show = false;
 		onClose();
 	};
+
+	const init = async () => {
+		loaded = false;
+		feedbackData = null;
+		if (selectedFeedback) {
+			feedbackData = await getFeedbackById(localStorage.token, selectedFeedback.id).catch((err) => {
+				toast.error(err);
+				return null;
+			});
+
+			console.log('Feedback Data:', selectedFeedback, feedbackData);
+		}
+		loaded = true;
+	};
+
+	$: if (show) {
+		init();
+	}
 </script>
 
 <Modal size="sm" bind:show>
@@ -28,46 +53,86 @@
 			</div>
 
 			<div class="flex flex-col md:flex-row w-full px-5 pb-4 md:space-x-4 dark:text-gray-200">
-				<div class="flex flex-col w-full">
-					<div class="mb-2 -mx-1">
-						{#if selectedFeedback?.data?.tags && selectedFeedback?.data?.tags.length}
-							<div class="flex flex-wrap gap-1 mt-1">
-								{#each selectedFeedback?.data?.tags as tag}
-									<span class="px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-850 text-xs"
-										>{tag}</span
+				{#if loaded}
+					<div class="flex flex-col w-full">
+						{#if feedbackData}
+							{@const messageId = feedbackData?.meta?.message_id}
+							{@const messages = feedbackData?.snapshot?.chat?.chat?.history.messages}
+
+							{#if messages[messages[messageId]?.parentId]}
+								<div class="flex flex-col w-full mb-2">
+									<div class="mb-1 text-xs text-gray-500">{$i18n.t('Prompt')}</div>
+
+									<div class="flex-1 text-xs whitespace-pre-line break-words">
+										<span>{messages[messages[messageId]?.parentId]?.content || '-'}</span>
+									</div>
+								</div>
+							{/if}
+
+							{#if messages[messageId]}
+								<div class="flex flex-col w-full mb-2">
+									<div class="mb-1 text-xs text-gray-500">{$i18n.t('Response')}</div>
+									<div
+										class="flex-1 text-xs whitespace-pre-line break-words max-h-32 overflow-y-auto"
 									>
-								{/each}
-							</div>
-						{:else}
-							<span>-</span>
+										<span>{messages[messageId]?.content || '-'}</span>
+									</div>
+								</div>
+							{/if}
 						{/if}
-					</div>
 
-					<div class="flex flex-col w-full mb-2">
-						<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Rating')}</div>
+						<div class="flex flex-col w-full mb-2">
+							<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Rating')}</div>
+
+							<div class="flex-1 text-xs">
+								<span>{selectedFeedback?.data?.details?.rating ?? '-'}</span>
+							</div>
+						</div>
+						<div class="flex flex-col w-full mb-2">
+							<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Reason')}</div>
 
-						<div class="flex-1 text-xs">
-							<span>{selectedFeedback?.data?.details?.rating ?? '-'}</span>
+							<div class="flex-1 text-xs">
+								<span>{selectedFeedback?.data?.reason || '-'}</span>
+							</div>
+						</div>
+
+						<div class="flex flex-col w-full mb-2">
+							<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Comment')}</div>
+
+							<div class="flex-1 text-xs">
+								<span>{selectedFeedback?.data?.comment || '-'}</span>
+							</div>
 						</div>
-					</div>
-					<div class="flex flex-col w-full mb-2">
-						<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Reason')}</div>
 
-						<div class="flex-1 text-xs">
-							<span>{selectedFeedback?.data?.reason || '-'}</span>
+						<div class="mb-2 -mx-1">
+							{#if selectedFeedback?.data?.tags && selectedFeedback?.data?.tags.length}
+								<div class="flex flex-wrap gap-1 mt-1">
+									{#each selectedFeedback?.data?.tags as tag}
+										<span class="px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-850 text-[9px]"
+											>{tag}</span
+										>
+									{/each}
+								</div>
+							{:else}
+								<span>-</span>
+							{/if}
 						</div>
-					</div>
 
-					<div class="flex justify-end pt-2">
-						<button
-							class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
-							type="button"
-							on:click={close}
-						>
-							{$i18n.t('Close')}
-						</button>
+						<div class="flex justify-end pt-2">
+							<button
+								class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+								type="button"
+								on:click={close}
+							>
+								{$i18n.t('Close')}
+							</button>
+						</div>
 					</div>
-				</div>
+				{:else}
+					<div class="flex items-center justify-center w-full h-32">
+						<Spinner className={'size-5'} />
+					</div>
+				{/if}
 			</div>
 		</div>
 	{/if}

src/lib/components/admin/Evaluations/Leaderboard.svelte

@@ -77,7 +77,7 @@
 	let showLeaderboardModal = false;
 	let selectedModel = null;
 
-	const openFeedbackModal = (model) => {
+	const openLeaderboardModelModal = (model) => {
 		showLeaderboardModal = true;
 		selectedModel = model;
 	};
@@ -505,7 +505,7 @@
 				{#each sortedModels as model, modelIdx (model.id)}
 					<tr
 						class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs group cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-850/50 transition"
-						on:click={() => openFeedbackModal(model)}
+						on:click={() => openLeaderboardModelModal(model)}
 					>
 						<td class="px-3 py-1.5 text-left font-medium text-gray-900 dark:text-white w-fit">
 							<div class=" line-clamp-1">