enh: ability to edit memories

src/lib/components/chat/Settings/Personalization/AddMemoryModal.svelte

@@ -2,21 +2,60 @@
 	import { createEventDispatcher, getContext } from 'svelte';
 
 	import Modal from '$lib/components/common/Modal.svelte';
-	import { addNewMemory } from '$lib/apis/memories';
+	import { addNewMemory, updateMemoryById } from '$lib/apis/memories';
 	import { toast } from 'svelte-sonner';
 
 	const dispatch = createEventDispatcher();
 
 	export let show;
+	export let memory = {};
+
+	let showUpdateBtn = false;
 
 	const i18n = getContext('i18n');
 
 	let loading = false;
 	let content = '';
+    let isMemoryLoaded = false;
+
+	$: {
+		if (memory && memory.id && !isMemoryLoaded) {
+			showUpdateBtn = true;
+            content = memory.content;
+			isMemoryLoaded = true;
+		}
+		if (!show) {
+			showUpdateBtn = false;
+			isMemoryLoaded = false;
+			memory = {};
+			content = '';
+		}
+	}
 
 	const submitHandler = async () => {
 		loading = true;
 
+		if (memory && memory.id) {
+			const res = await updateMemoryById(localStorage.token, memory.id, content).catch((error) => {
+				toast.error(error);
+
+				return null;
+			});
+
+			if (res) {
+				console.log(res);
+				toast.success('Memory updated successfully');
+				content = '';
+				show = false;
+				isMemoryLoaded = false;
+				memory = {};
+				dispatch('save');
+			}
+
+			loading = false;
+			return;
+		}
+
 		const res = await addNewMemory(localStorage.token, content).catch((error) => {
 			toast.error(error);
 
@@ -38,7 +77,9 @@
 <Modal bind:show size="sm">
 	<div>
 		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
-			<div class=" text-lg font-medium self-center">{$i18n.t('Add Memory')}</div>
+			<div class=" text-lg font-medium self-center">
+				{memory.id ? $i18n.t('Edit Memory') : $i18n.t('Add Memory')}
+			</div>
 			<button
 				class="self-center"
 				on:click={() => {
@@ -87,7 +128,12 @@
 							type="submit"
 							disabled={loading}
 						>
-							{$i18n.t('Add')}
+
+							{#if showUpdateBtn}
+								{$i18n.t('Update')}
+							{:else}
+								{$i18n.t('Add')}
+							{/if}
 
 							{#if loading}
 								<div class="ml-2 self-center">

src/lib/components/chat/Settings/Personalization/ManageModal.svelte

@@ -16,12 +16,15 @@
 	export let show = false;
 
 	let memories = [];
-
+	let loading = true;
 	let showAddMemoryModal = false;
 
-	$: if (show) {
+	let editMemory = {};
+
+	$: if (show && memories.length === 0 && loading) {
 		(async () => {
 			memories = await getMemories(localStorage.token);
+			loading = false;
 		})();
 	}
 </script>
@@ -62,7 +65,7 @@
 								>
 									<tr>
 										<th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th>
-										<th scope="col" class="px-3 py-2 hidden md:flex"> {$i18n.t('Created At')} </th>
+										<th scope="col" class="px-3 py-2 hidden md:flex"> {$i18n.t('Last Modified')} </th>
 										<th scope="col" class="px-3 py-2 text-right" />
 									</tr>
 								</thead>
@@ -76,11 +79,22 @@
 											</td>
 											<td class=" px-3 py-1 hidden md:flex h-[2.5rem]">
 												<div class="my-auto whitespace-nowrap">
-													{dayjs(memory.created_at * 1000).format($i18n.t('MMMM DD, YYYY'))}
+													{dayjs(memory.updated_at * 1000).format($i18n.t('MMMM DD, YYYY hh:mm:ss A'))}
 												</div>
 											</td>
 											<td class="px-3 py-1">
 												<div class="flex justify-end w-full">
+													<Tooltip content="Edit">
+														<button
+															class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+															on:click={() => {
+																editMemory = memory;
+																showAddMemoryModal = true;
+															}}>
+															<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 s-FoVA_WMOgxUD"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" class="s-FoVA_WMOgxUD"></path></svg>
+														</button>
+													</Tooltip>
+
 													<Tooltip content="Delete">
 														<button
 															class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
@@ -158,8 +172,12 @@
 </Modal>
 
 <AddMemoryModal
+	bind:memory={editMemory}
 	bind:show={showAddMemoryModal}
 	on:save={async () => {
 		memories = await getMemories(localStorage.token);
 	}}
+	on:close={() => {
+		editMemory = {};
+	}}
 />