refac: feedback optimisation

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

@@ -12,34 +12,28 @@
 	export let message;
 	export let show = false;
 
-	let LIKE_REASONS = [];
-	let DISLIKE_REASONS = [];
+	let LIKE_REASONS = [
+		'accurate_information',
+		'followed_instructions_perfectly',
+		'showcased_creativity',
+		'positive_attitude',
+		'attention_to_detail',
+		'thorough_explanation',
+		'other'
+	];
+	let DISLIKE_REASONS = [
+		'dont_like_the_style',
+		'too_verbose',
+		'not_helpful',
+		'not_factually_correct',
+		'didnt_fully_follow_instructions',
+		'refused_when_it_shouldnt_have',
+		'being_lazy',
+		'other'
+	];
 
 	let tags = [];
 
-	function loadReasons() {
-		LIKE_REASONS = [
-			'accurate_information',
-			'followed_instructions_perfectly',
-			'showcased_creativity',
-			'positive_attitude',
-			'attention_to_detail',
-			'thorough_explanation',
-			'other'
-		];
-
-		DISLIKE_REASONS = [
-			'dont_like_the_style',
-			'too_verbose',
-			'not_helpful',
-			'not_factually_correct',
-			'didnt_fully_follow_instructions',
-			'refused_when_it_shouldnt_have',
-			'being_lazy',
-			'other'
-		];
-	}
-
 	let reasons = [];
 	let selectedReason = null;
 	let comment = '';
@@ -52,13 +46,19 @@
 		reasons = DISLIKE_REASONS;
 	}
 
-	onMount(() => {
+	$: if (message) {
+		init();
+	}
+
+	const init = () => {
 		selectedReason = message?.annotation?.reason ?? '';
 		comment = message?.annotation?.comment ?? '';
 		tags = (message?.annotation?.tags ?? []).map((tag) => ({
 			name: tag
 		}));
+	};
 
+	onMount(() => {
 		if (message?.arena) {
 			selectedModel = $models.find((m) => m.id === message.selectedModelId);
 			toast.success(
@@ -67,8 +67,6 @@
 				})
 			);
 		}
-
-		loadReasons();
 	});
 
 	const saveHandler = () => {

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

@@ -335,10 +335,13 @@
 		generatingImage = false;
 	};
 
+	let feedbackLoading = false;
+
 	const feedbackHandler = async (
 		rating: number | null = null,
 		annotation: object | null = null
 	) => {
+		feedbackLoading = true;
 		console.log('Feedback', rating, annotation);
 
 		const updatedMessage = {
@@ -357,24 +360,6 @@
 			return;
 		}
 
-		if (!annotation) {
-			const messages = createMessagesList(history, message.id);
-			const tags = await generateTags(
-				localStorage.token,
-				message?.selectedModelId ?? message.model,
-				messages,
-				chatId
-			).catch((error) => {
-				console.error(error);
-				return [];
-			});
-			console.log(tags);
-
-			if (tags) {
-				updatedMessage.annotation.tags = tags;
-			}
-		}
-
 		let feedbackItem = {
 			type: 'rating',
 			data: {
@@ -425,7 +410,29 @@
 
 		if (!annotation) {
 			showRateComment = true;
+
+			if (!updatedMessage.annotation?.tags) {
+				// attempt to generate tags
+				const messages = createMessagesList(history, message.id);
+				const tags = await generateTags(
+					localStorage.token,
+					message?.selectedModelId ?? message.model,
+					messages,
+					chatId
+				).catch((error) => {
+					console.error(error);
+					return [];
+				});
+				console.log(tags);
+
+				if (tags) {
+					updatedMessage.annotation.tags = tags;
+					dispatch('save', updatedMessage);
+				}
+			}
 		}
+
+		feedbackLoading = false;
 	};
 
 	$: if (!edit) {
@@ -982,7 +989,8 @@
 													message?.annotation?.rating ?? ''
 												).toString() === '1'
 													? 'bg-gray-100 dark:bg-gray-800'
-													: ''} dark:hover:text-white hover:text-black transition"
+													: ''} dark:hover:text-white hover:text-black transition disabled:cursor-progress disabled:hover:bg-transparent"
+												disabled={feedbackLoading}
 												on:click={async () => {
 													await feedbackHandler(1);
 
@@ -1032,7 +1040,8 @@
 													message?.annotation?.rating ?? ''
 												).toString() === '-1'
 													? 'bg-gray-100 dark:bg-gray-800'
-													: ''} dark:hover:text-white hover:text-black transition"
+													: ''} dark:hover:text-white hover:text-black transition disabled:cursor-progress disabled:hover:bg-transparent"
+												disabled={feedbackLoading}
 												on:click={async () => {
 													await feedbackHandler(-1);