From e54879aeb17920afc3aa009d09e0e7546582d47a Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 19 Nov 2024 20:12:22 -0800
Subject: [PATCH] enh: detailed 1-10 rating

---
 .../chat/Messages/RateComment.svelte          | 141 ++++++++++++------
 .../chat/Messages/ResponseMessage.svelte      |  15 +-
 2 files changed, 97 insertions(+), 59 deletions(-)

diff --git a/src/lib/components/chat/Messages/RateComment.svelte b/src/lib/components/chat/Messages/RateComment.svelte
index 2cccf20d8..39ae17318 100644
--- a/src/lib/components/chat/Messages/RateComment.svelte
+++ b/src/lib/components/chat/Messages/RateComment.svelte
@@ -38,6 +38,7 @@
 	let selectedReason = null;
 	let comment = '';
 
+	let detailedRating = null;
 	let selectedModel = null;
 
 	$: if (message?.annotation?.rating === 1) {
@@ -56,6 +57,7 @@
 		tags = (message?.annotation?.tags ?? []).map((tag) => ({
 			name: tag
 		}));
+		detailedRating = message?.annotation?.details?.rating ?? null;
 	};
 
 	onMount(() => {
@@ -79,7 +81,10 @@
 		dispatch('save', {
 			reason: selectedReason,
 			comment: comment,
-			tags: tags.map((tag) => tag.name)
+			tags: tags.map((tag) => tag.name),
+			details: {
+				rating: detailedRating
+			}
 		});
 
 		toast.success($i18n.t('Thanks for your feedback!'));
@@ -100,7 +105,9 @@
 	id="message-feedback-{message.id}"
 >
 	<div class="flex justify-between items-center">
-		<div class=" text-sm">{$i18n.t('Tell us more:')}</div>
+		<div class="text-sm font-medium">{$i18n.t('How would you rate this response?')}</div>
+
+		<!-- <div class=" text-sm">{$i18n.t('Tell us more:')}</div> -->
 
 		<button
 			on:click={() => {
@@ -120,53 +127,89 @@
 		</button>
 	</div>
 
-	{#if reasons.length > 0}
-		<div class="flex flex-wrap gap-1.5 text-sm mt-2.5">
-			{#each reasons as reason}
-				<button
-					class="px-3 py-0.5 border border-gray-50 dark:border-gray-850 hover:bg-gray-100 dark:hover:bg-gray-850 {selectedReason ===
-					reason
-						? 'bg-gray-200 dark:bg-gray-800'
-						: ''} transition rounded-lg"
-					on:click={() => {
-						selectedReason = reason;
-					}}
-				>
-					{#if reason === 'accurate_information'}
-						{$i18n.t('Accurate information')}
-					{:else if reason === 'followed_instructions_perfectly'}
-						{$i18n.t('Followed instructions perfectly')}
-					{:else if reason === 'showcased_creativity'}
-						{$i18n.t('Showcased creativity')}
-					{:else if reason === 'positive_attitude'}
-						{$i18n.t('Positive attitude')}
-					{:else if reason === 'attention_to_detail'}
-						{$i18n.t('Attention to detail')}
-					{:else if reason === 'thorough_explanation'}
-						{$i18n.t('Thorough explanation')}
-					{:else if reason === 'dont_like_the_style'}
-						{$i18n.t("Don't like the style")}
-					{:else if reason === 'too_verbose'}
-						{$i18n.t('Too verbose')}
-					{:else if reason === 'not_helpful'}
-						{$i18n.t('Not helpful')}
-					{:else if reason === 'not_factually_correct'}
-						{$i18n.t('Not factually correct')}
-					{:else if reason === 'didnt_fully_follow_instructions'}
-						{$i18n.t("Didn't fully follow instructions")}
-					{:else if reason === 'refused_when_it_shouldnt_have'}
-						{$i18n.t("Refused when it shouldn't have")}
-					{:else if reason === 'being_lazy'}
-						{$i18n.t('Being lazy')}
-					{:else if reason === 'other'}
-						{$i18n.t('Other')}
-					{:else}
-						{reason}
-					{/if}
-				</button>
-			{/each}
+	<div class="w-full flex justify-center">
+		<div class=" relative w-fit">
+			<div class="mt-1.5 w-fit flex gap-1 pb-5">
+				<!-- 1-10 scale -->
+				{#each Array.from({ length: 10 }).map((_, i) => i + 1) as rating}
+					<button
+						class="size-7 text-sm border border-gray-50 dark:border-gray-850 hover:bg-gray-50 dark:hover:bg-gray-850 {detailedRating ===
+						rating
+							? 'bg-gray-100 dark:bg-gray-800'
+							: ''} transition rounded-full disabled:cursor-not-allowed disabled:bg-white disabled:dark:bg-gray-900"
+						on:click={() => {
+							detailedRating = rating;
+						}}
+						disabled={message?.annotation?.rating === -1 ? rating > 5 : rating < 6}
+					>
+						{rating}
+					</button>
+				{/each}
+			</div>
+
+			<div class="absolute bottom-0 left-0 right-0 flex justify-between text-xs">
+				<div>
+					1 - {$i18n.t('Awful')}
+				</div>
+
+				<div>
+					10 - {$i18n.t('Amazing')}
+				</div>
+			</div>
 		</div>
-	{/if}
+	</div>
+
+	<div>
+		{#if reasons.length > 0}
+			<div class="text-sm mt-1.5 font-medium">{$i18n.t('Why?')}</div>
+
+			<div class="flex flex-wrap gap-1.5 text-sm mt-1.5">
+				{#each reasons as reason}
+					<button
+						class="px-3 py-0.5 border border-gray-50 dark:border-gray-850 hover:bg-gray-50 dark:hover:bg-gray-850 {selectedReason ===
+						reason
+							? 'bg-gray-100 dark:bg-gray-800'
+							: ''} transition rounded-xl"
+						on:click={() => {
+							selectedReason = reason;
+						}}
+					>
+						{#if reason === 'accurate_information'}
+							{$i18n.t('Accurate information')}
+						{:else if reason === 'followed_instructions_perfectly'}
+							{$i18n.t('Followed instructions perfectly')}
+						{:else if reason === 'showcased_creativity'}
+							{$i18n.t('Showcased creativity')}
+						{:else if reason === 'positive_attitude'}
+							{$i18n.t('Positive attitude')}
+						{:else if reason === 'attention_to_detail'}
+							{$i18n.t('Attention to detail')}
+						{:else if reason === 'thorough_explanation'}
+							{$i18n.t('Thorough explanation')}
+						{:else if reason === 'dont_like_the_style'}
+							{$i18n.t("Don't like the style")}
+						{:else if reason === 'too_verbose'}
+							{$i18n.t('Too verbose')}
+						{:else if reason === 'not_helpful'}
+							{$i18n.t('Not helpful')}
+						{:else if reason === 'not_factually_correct'}
+							{$i18n.t('Not factually correct')}
+						{:else if reason === 'didnt_fully_follow_instructions'}
+							{$i18n.t("Didn't fully follow instructions")}
+						{:else if reason === 'refused_when_it_shouldnt_have'}
+							{$i18n.t("Refused when it shouldn't have")}
+						{:else if reason === 'being_lazy'}
+							{$i18n.t('Being lazy')}
+						{:else if reason === 'other'}
+							{$i18n.t('Other')}
+						{:else}
+							{reason}
+						{/if}
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
 
 	<div class="mt-2">
 		<textarea
@@ -195,7 +238,7 @@
 		</div>
 
 		<button
-			class=" bg-emerald-700 hover:bg-emerald-800 transition text-white text-sm font-medium rounded-xl px-3.5 py-1.5"
+			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"
 			on:click={() => {
 				saveHandler();
 			}}
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 6c4dbc5d6..9ba15362c 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -340,19 +340,16 @@
 
 	let feedbackLoading = false;
 
-	const feedbackHandler = async (
-		rating: number | null = null,
-		annotation: object | null = null
-	) => {
+	const feedbackHandler = async (rating: number | null = null, details: object | null = null) => {
 		feedbackLoading = true;
-		console.log('Feedback', rating, annotation);
+		console.log('Feedback', rating, details);
 
 		const updatedMessage = {
 			...message,
 			annotation: {
 				...(message?.annotation ?? {}),
 				...(rating !== null ? { rating: rating } : {}),
-				...(annotation ? annotation : {})
+				...(details ? details : {})
 			}
 		};
 
@@ -429,7 +426,7 @@
 
 		await tick();
 
-		if (!annotation) {
+		if (!details) {
 			showRateComment = true;
 
 			if (!updatedMessage.annotation?.tags) {
@@ -1194,9 +1191,7 @@
 							bind:show={showRateComment}
 							on:save={async (e) => {
 								await feedbackHandler(null, {
-									tags: e.detail.tags,
-									comment: e.detail.comment,
-									reason: e.detail.reason
+									...e.detail
 								});
 							}}
 						/>