feat: overview favourite response

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}