From c346130774bc6dee581e00d4cb4e2ab81329ba46 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sun, 22 Sep 2024 02:53:38 +0200
Subject: [PATCH] feat: overview favourite response

---
 src/lib/components/chat/Chat.svelte          |  4 +++
 src/lib/components/chat/ChatControls.svelte  |  6 ++++
 src/lib/components/chat/Overview/Node.svelte | 29 ++++++++++++++++----
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index b6a90a953..6879d9689 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/src/lib/components/chat/Chat.svelte
@@ -150,6 +150,7 @@
 	}
 
 	const showMessage = async (message) => {
+		const _chatId = JSON.parse(JSON.stringify($chatId));
 		let _messageId = JSON.parse(JSON.stringify(message.id));
 
 		let messageChildrenIds = history.messages[_messageId].childrenIds;
@@ -169,6 +170,9 @@
 		if (messageElement) {
 			messageElement.scrollIntoView({ behavior: 'smooth' });
 		}
+
+		await tick();
+		saveChatHandler(_chatId);
 	};
 
 	const chatEventHandler = async (event, cb) => {
diff --git a/src/lib/components/chat/ChatControls.svelte b/src/lib/components/chat/ChatControls.svelte
index dae170fac..45c66f3e0 100644
--- a/src/lib/components/chat/ChatControls.svelte
+++ b/src/lib/components/chat/ChatControls.svelte
@@ -164,6 +164,12 @@
 							<Overview
 								{history}
 								on:nodeclick={(e) => {
+									if (e.detail.node.data.message.favorite) {
+										history.messages[e.detail.node.data.message.id].favorite = true;
+									} else {
+										history.messages[e.detail.node.data.message.id].favorite = null;
+									}
+
 									showMessage(e.detail.node.data.message);
 								}}
 								on:close={() => {
diff --git a/src/lib/components/chat/Overview/Node.svelte b/src/lib/components/chat/Overview/Node.svelte
index 82691c554..a3cf5ebd8 100644
--- a/src/lib/components/chat/Overview/Node.svelte
+++ b/src/lib/components/chat/Overview/Node.svelte
@@ -4,13 +4,14 @@
 
 	import ProfileImageBase from '../Messages/ProfileImageBase.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Heart from '$lib/components/icons/Heart.svelte';
 
 	type $$Props = NodeProps;
 	export let data: $$Props['data'];
 </script>
 
 <div
-	class="px-4 py-3 shadow-md rounded-xl dark:bg-black bg-white border dark:border-gray-900 w-60 h-20"
+	class="px-4 py-3 shadow-md rounded-xl dark:bg-black bg-white border dark:border-gray-900 w-60 h-20 group"
 >
 	<Tooltip
 		content={data?.message?.error ? data.message.error.content : data.message.content}
@@ -24,8 +25,10 @@
 					className={'size-5 -translate-y-[1px]'}
 				/>
 				<div class="ml-2">
-					<div class="text-xs text-black dark:text-white font-medium">
-						{data?.user?.name ?? 'User'}
+					<div class=" flex justify-between items-center">
+						<div class="text-xs text-black dark:text-white font-medium">
+							{data?.user?.name ?? 'User'}
+						</div>
 					</div>
 
 					{#if data?.message?.error}
@@ -43,8 +46,24 @@
 				/>
 
 				<div class="ml-2">
-					<div class="text-xs text-black dark:text-white font-medium">
-						{data?.model?.name ?? data?.message?.model ?? 'Assistant'}
+					<div class=" flex justify-between items-center">
+						<div class="text-xs text-black dark:text-white font-medium">
+							{data?.model?.name ?? data?.message?.model ?? 'Assistant'}
+						</div>
+
+						<button
+							class={data?.message?.favorite ? '' : 'invisible group-hover:visible'}
+							on:click={() => {
+								data.message.favorite = !(data?.message?.favorite ?? false);
+							}}
+						>
+							<Heart
+								className="size-3 {data?.message?.favorite
+									? 'fill-red-500 stroke-red-500'
+									: 'hover:fill-red-500 hover:stroke-red-500'} "
+								strokeWidth="2.5"
+							/>
+						</button>
 					</div>
 
 					{#if data?.message?.error}