Merge pull request #3116 from Peter-De-Ath/memories-edit

feat: add abilty to edit memories

backend/apps/webui/models/memories.py

@@ -65,6 +65,20 @@ class MemoriesTable:
         else:
             return None
         
+    def update_memory_by_id(
+        self,
+        id: str,
+        content: str,
+    ) -> Optional[MemoryModel]:
+        try:
+            memory = Memory.get(Memory.id == id)
+            memory.content = content
+            memory.updated_at = int(time.time())
+            memory.save()
+            return MemoryModel(**model_to_dict(memory))
+        except:
+            return None
+
     def get_memories(self) -> List[MemoryModel]:
         try:
             memories = Memory.select()

backend/apps/webui/routers/memories.py

@@ -43,6 +43,8 @@ async def get_memories(user=Depends(get_verified_user)):
 class AddMemoryForm(BaseModel):
     content: str
 
+class MemoryUpdateModel(BaseModel):
+    content: Optional[str] = None
 
 @router.post("/add", response_model=Optional[MemoryModel])
 async def add_memory(
@@ -62,6 +64,27 @@ async def add_memory(
     return memory
 
 
+@router.post("/{memory_id}", response_model=Optional[MemoryModel])
+async def update_memory_by_id(
+    memory_id: str, request: Request, form_data: MemoryUpdateModel, user=Depends(get_verified_user)
+):
+    memory = Memories.update_memory_by_id(memory_id, form_data.content)
+    if memory is None:
+        raise HTTPException(status_code=404, detail="Memory not found")
+
+    if form_data.content is not None:
+        memory_embedding = request.app.state.EMBEDDING_FUNCTION(form_data.content)
+        collection = CHROMA_CLIENT.get_or_create_collection(name=f"user-memory-{user.id}")
+        collection.upsert(
+            documents=[form_data.content],
+            ids=[memory.id],
+            embeddings=[memory_embedding],
+            metadatas=[{"created_at": memory.created_at, "updated_at": memory.updated_at}],
+        )
+
+    return memory
+
+
 ############################
 # QueryMemory
 ############################

src/lib/apis/memories/index.ts

@@ -59,6 +59,37 @@ export const addNewMemory = async (token: string, content: string) => {
 	return res;
 };
 
+export const updateMemoryById = async (token: string, id: string, content: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/memories/${id}`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify({
+			content: content
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
 export const queryMemory = async (token: string, content: string) => {
 	let error = null;
 

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}
 						>
+
+							{#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 = {};
+	}}
 />

src/lib/i18n/locales/en-GB/translation.json

@@ -178,6 +178,7 @@
 	"e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.": "",
 	"Edit": "",
 	"Edit Doc": "",
+	"Edit Memory": "",
 	"Edit User": "",
 	"Email": "",
 	"Embedding Batch Size": "",
@@ -283,6 +284,7 @@
 	"Knowledge": "",
 	"Language": "",
 	"Last Active": "",
+	"Last Modified": "",
 	"Light": "",
 	"Listening...": "",
 	"LLMs can make mistakes. Verify important information.": "",