✨ add thumb up/down voting system for messages (#152)

* add thumb up/down voting system for messages

* make like/dislike buttons toggle + bind to server

* refactor vote API to better endpoint structure

* set score to undefined rather than 0 when toggled

* throw if message is not found + refactor retry dispatch

* fix undefined class

* Only make the buttons invisible if there's no score

Co-authored-by: Eliott C. <[email protected]>

* only allow thumb up/down if user is the author of the messages

* always show thumbs up/down when voted

* use MongoDB instead of mutating messages array in code

* fix typings

* fix linting issue

* refactor code to throw before ifs

* add auth logic to vote API endpoint

* lint fix after merge conflict

* on mobile only show thumbs on top + increase spacing between messages

* fix thumbs always showing on mobile

---------

Co-authored-by: coyotte508 <[email protected]>

src/lib/components/chat/ChatMessage.svelte

@@ -9,6 +9,8 @@
 	import IconLoading from "../icons/IconLoading.svelte";
 	import CarbonRotate360 from "~icons/carbon/rotate-360";
 	import CarbonDownload from "~icons/carbon/download";
+	import CarbonThumbsUp from "~icons/carbon/thumbs-up";
+	import CarbonThumbsDown from "~icons/carbon/thumbs-down";
 	import { PUBLIC_SEP_TOKEN } from "$lib/constants/publicSepToken";
 	import type { Model } from "$lib/types/Model";
 
@@ -38,9 +40,14 @@
 	export let model: Model;
 	export let message: Message;
 	export let loading = false;
+	export let isAuthor = true;
 	export let readOnly = false;
+	export let isTapped = false;
 
-	const dispatch = createEventDispatcher<{ retry: void }>();
+	const dispatch = createEventDispatcher<{
+		retry: { content: string; id: Message["id"] };
+		vote: { score: Message["score"]; id: Message["id"] };
+	}>();
 
 	let contentEl: HTMLElement;
 	let loadingEl: IconLoading;
@@ -85,7 +92,11 @@
 </script>
 
 {#if message.from === "assistant"}
-	<div class="flex items-start justify-start gap-4 leading-relaxed">
+	<div
+		class="group relative -mb-8 flex items-start justify-start gap-4 pb-8 leading-relaxed"
+		on:click={() => (isTapped = !isTapped)}
+		on:keypress={() => (isTapped = !isTapped)}
+	>
 		<img
 			alt=""
 			src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
@@ -111,6 +122,38 @@
 				{/each}
 			</div>
 		</div>
+		{#if isAuthor && !loading && message.content}
+			<div
+				class="absolute bottom-1 right-0 flex max-md:transition-all md:bottom-0 md:group-hover:visible md:group-hover:opacity-100
+					{message.score ? 'visible opacity-100' : 'invisible max-md:-translate-y-4 max-md:opacity-0'}
+					{isTapped ? 'max-md:visible max-md:translate-y-0 max-md:opacity-100' : ''}
+				"
+			>
+				<button
+					class="btn rounded-sm p-1 text-sm text-gray-400 focus:ring-0 hover:text-gray-500 dark:text-gray-400 dark:hover:text-gray-300
+					{message.score && message.score > 0
+						? 'text-green-500 hover:text-green-500 dark:text-green-400 hover:dark:text-green-400'
+						: ''}"
+					title={message.score === 1 ? "Remove +1" : "+1"}
+					type="button"
+					on:click={() => dispatch("vote", { score: message.score === 1 ? 0 : 1, id: message.id })}
+				>
+					<CarbonThumbsUp class="h-[1.14em] w-[1.14em]" />
+				</button>
+				<button
+					class="btn rounded-sm p-1 text-sm text-gray-400 focus:ring-0 hover:text-gray-500 dark:text-gray-400 dark:hover:text-gray-300
+					{message.score && message.score < 0
+						? 'text-red-500 hover:text-red-500 dark:text-red-400 hover:dark:text-red-400'
+						: ''}"
+					title={message.score === -1 ? "Remove -1" : "-1"}
+					type="button"
+					on:click={() =>
+						dispatch("vote", { score: message.score === -1 ? 0 : -1, id: message.id })}
+				>
+					<CarbonThumbsDown class="h-[1.14em] w-[1.14em]" />
+				</button>
+			</div>
+		{/if}
 	</div>
 {/if}
 {#if message.from === "user"}

src/lib/components/chat/ChatMessages.svelte

@@ -2,19 +2,17 @@
 	import type { Message } from "$lib/types/Message";
 	import { snapScrollToBottom } from "$lib/actions/snapScrollToBottom";
 	import ScrollToBottomBtn from "$lib/components/ScrollToBottomBtn.svelte";
-	import { createEventDispatcher, tick } from "svelte";
-
-	import ChatIntroduction from "./ChatIntroduction.svelte";
-	import ChatMessage from "./ChatMessage.svelte";
+	import { tick } from "svelte";
 	import { randomUUID } from "$lib/utils/randomUuid";
 	import type { Model } from "$lib/types/Model";
 	import type { LayoutData } from "../../../routes/$types";
-
-	const dispatch = createEventDispatcher<{ retry: { id: Message["id"]; content: string } }>();
+	import ChatIntroduction from "./ChatIntroduction.svelte";
+	import ChatMessage from "./ChatMessage.svelte";
 
 	export let messages: Message[];
 	export let loading: boolean;
 	export let pending: boolean;
+	export let isAuthor: boolean;
 	export let currentModel: Model;
 	export let settings: LayoutData["settings"];
 	export let models: Model[];
@@ -38,14 +36,16 @@
 	use:snapScrollToBottom={messages.length ? messages : false}
 	bind:this={chatContainer}
 >
-	<div class="mx-auto flex h-full max-w-3xl flex-col gap-5 px-5 pt-6 sm:gap-8 xl:max-w-4xl">
+	<div class="mx-auto flex h-full max-w-3xl flex-col gap-6 px-5 pt-6 sm:gap-8 xl:max-w-4xl">
 		{#each messages as message, i}
 			<ChatMessage
 				loading={loading && i === messages.length - 1}
 				{message}
-				model={currentModel}
+				{isAuthor}
 				{readOnly}
-				on:retry={() => dispatch("retry", { id: message.id, content: message.content })}
+				model={currentModel}
+				on:retry
+				on:vote
 			/>
 		{:else}
 			<ChatIntroduction {settings} {models} {currentModel} on:message />
@@ -56,7 +56,7 @@
 				model={currentModel}
 			/>
 		{/if}
-		<div class="h-32 flex-none" />
+		<div class="h-36 flex-none" />
 	</div>
 	<ScrollToBottomBtn
 		class="bottom-36 right-4 max-md:hidden lg:right-10"

src/lib/components/chat/ChatWindow.svelte

@@ -14,6 +14,7 @@
 	export let messages: Message[] = [];
 	export let loading = false;
 	export let pending = false;
+	export let shared = false;
 	export let currentModel: Model;
 	export let models: Model[];
 	export let settings: LayoutData["settings"];
@@ -45,7 +46,9 @@
 		{models}
 		{messages}
 		readOnly={isReadOnly}
+		isAuthor={!shared}
 		on:message
+		on:vote
 		on:retry={(ev) => {
 			if (!loading) dispatch("retry", ev.detail);
 		}}

src/lib/types/Message.ts

@@ -2,4 +2,5 @@ export interface Message {
 	from: "user" | "assistant";
 	id: ReturnType<typeof crypto.randomUUID>;
 	content: string;
+	score?: -1 | 0 | 1;
 }

src/routes/conversation/[id]/+page.svelte

@@ -12,6 +12,7 @@
 	import { ERROR_MESSAGES, error } from "$lib/stores/errors";
 	import { randomUUID } from "$lib/utils/randomUuid";
 	import { findCurrentModel } from "$lib/utils/models";
+	import type { Message } from "$lib/types/Message";
 
 	export let data;
 
@@ -29,7 +30,7 @@
 	let pending = false;
 
 	async function getTextGenerationStream(inputs: string, messageId: string, isRetry = false) {
-		let conversationId = $page.params.id;
+		const conversationId = $page.params.id;
 
 		const response = textGenerationStream(
 			{
@@ -147,6 +148,32 @@
 		}
 	}
 
+	async function voteMessage(score: Message["score"], messageId: string) {
+		let conversationId = $page.params.id;
+		let oldScore: Message["score"] | undefined;
+
+		// optimistic update to avoid waiting for the server
+		messages = messages.map((message) => {
+			if (message.id === messageId) {
+				oldScore = message.score;
+				return { ...message, score: score };
+			}
+			return message;
+		});
+
+		try {
+			await fetch(`${base}/conversation/${conversationId}/message/${messageId}/vote`, {
+				method: "POST",
+				body: JSON.stringify({ score }),
+			});
+		} catch {
+			// revert score on any error
+			messages = messages.map((message) => {
+				return message.id !== messageId ? message : { ...message, score: oldScore };
+			});
+		}
+	}
+
 	onMount(async () => {
 		if ($pendingMessage) {
 			const val = $pendingMessage;
@@ -169,8 +196,9 @@
 	{loading}
 	{pending}
 	{messages}
-	on:message={(message) => writeMessage(message.detail)}
-	on:retry={(message) => writeMessage(message.detail.content, message.detail.id)}
+	on:message={(event) => writeMessage(event.detail)}
+	on:retry={(event) => writeMessage(event.detail.content, event.detail.id)}
+	on:vote={(event) => voteMessage(event.detail.score, event.detail.id)}
 	on:share={() => shareConversation($page.params.id, data.title)}
 	on:stop={() => (isAborted = true)}
 	models={data.models}

src/routes/conversation/[id]/message/[messageId]/vote/+server.ts

@@ -0,0 +1,38 @@
+import { authCondition } from "$lib/server/auth";
+import { collections } from "$lib/server/database";
+import { error } from "@sveltejs/kit";
+import { ObjectId } from "mongodb";
+import { z } from "zod";
+
+export async function POST({ params, request, locals }) {
+	const { score } = z
+		.object({
+			score: z.number().int().min(-1).max(1),
+		})
+		.parse(await request.json());
+	const conversationId = new ObjectId(params.id);
+	const messageId = params.messageId;
+
+	const document = await collections.conversations.updateOne(
+		{
+			_id: conversationId,
+			...authCondition(locals),
+			"messages.id": messageId,
+		},
+		{
+			...(score !== 0
+				? {
+						$set: {
+							"messages.$.score": score,
+						},
+				  }
+				: { $unset: { "messages.$.score": "" } }),
+		}
+	);
+
+	if (!document.matchedCount) {
+		throw error(404, "Message not found");
+	}
+
+	return new Response();
+}

src/routes/r/[id]/+page.svelte

@@ -55,6 +55,9 @@
 </svelte:head>
 
 <ChatWindow
+	{loading}
+	shared={true}
+	messages={data.messages}
 	on:message={(ev) =>
 		createConversation()
 			.then((convId) => {
@@ -71,9 +74,7 @@
 				return goto(`${base}/conversation/${convId}`, { invalidateAll: true });
 			})
 			.finally(() => (loading = false))}
-	messages={data.messages}
 	models={data.models}
 	currentModel={findCurrentModel(data.models, data.model)}
 	settings={data.settings}
-	{loading}
 />