feat: overview favourite response

This commit is contained in:
Timothy J. Baek 2024-09-22 02:53:38 +02:00
parent 768717aaf9
commit c346130774
3 changed files with 34 additions and 5 deletions

View File

@ -150,6 +150,7 @@
} }
const showMessage = async (message) => { const showMessage = async (message) => {
const _chatId = JSON.parse(JSON.stringify($chatId));
let _messageId = JSON.parse(JSON.stringify(message.id)); let _messageId = JSON.parse(JSON.stringify(message.id));
let messageChildrenIds = history.messages[_messageId].childrenIds; let messageChildrenIds = history.messages[_messageId].childrenIds;
@ -169,6 +170,9 @@
if (messageElement) { if (messageElement) {
messageElement.scrollIntoView({ behavior: 'smooth' }); messageElement.scrollIntoView({ behavior: 'smooth' });
} }
await tick();
saveChatHandler(_chatId);
}; };
const chatEventHandler = async (event, cb) => { const chatEventHandler = async (event, cb) => {

View File

@ -164,6 +164,12 @@
<Overview <Overview
{history} {history}
on:nodeclick={(e) => { 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); showMessage(e.detail.node.data.message);
}} }}
on:close={() => { on:close={() => {

View File

@ -4,13 +4,14 @@
import ProfileImageBase from '../Messages/ProfileImageBase.svelte'; import ProfileImageBase from '../Messages/ProfileImageBase.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import Heart from '$lib/components/icons/Heart.svelte';
type $$Props = NodeProps; type $$Props = NodeProps;
export let data: $$Props['data']; export let data: $$Props['data'];
</script> </script>
<div <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 <Tooltip
content={data?.message?.error ? data.message.error.content : data.message.content} content={data?.message?.error ? data.message.error.content : data.message.content}
@ -24,9 +25,11 @@
className={'size-5 -translate-y-[1px]'} className={'size-5 -translate-y-[1px]'}
/> />
<div class="ml-2"> <div class="ml-2">
<div class=" flex justify-between items-center">
<div class="text-xs text-black dark:text-white font-medium"> <div class="text-xs text-black dark:text-white font-medium">
{data?.user?.name ?? 'User'} {data?.user?.name ?? 'User'}
</div> </div>
</div>
{#if data?.message?.error} {#if data?.message?.error}
<div class="text-red-500 line-clamp-2 text-xs mt-0.5">{data.message.error.content}</div> <div class="text-red-500 line-clamp-2 text-xs mt-0.5">{data.message.error.content}</div>
@ -43,10 +46,26 @@
/> />
<div class="ml-2"> <div class="ml-2">
<div class=" flex justify-between items-center">
<div class="text-xs text-black dark:text-white font-medium"> <div class="text-xs text-black dark:text-white font-medium">
{data?.model?.name ?? data?.message?.model ?? 'Assistant'} {data?.model?.name ?? data?.message?.model ?? 'Assistant'}
</div> </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} {#if data?.message?.error}
<div class="text-red-500 line-clamp-2 text-xs mt-0.5"> <div class="text-red-500 line-clamp-2 text-xs mt-0.5">
{data.message.error.content} {data.message.error.content}