From 1da3b7f7e866e180dd6061583d5c49161570667b Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 29 Jun 2026 01:32:27 -0500
Subject: [PATCH] refac

---
 .../chat/Settings/Personalization.svelte      |  16 +-
 .../Personalization/AddMemoryModal.svelte     |  36 +++-
 .../Personalization/EditMemoryModal.svelte    |  44 ++--
 .../Personalization/ManageModal.svelte        | 198 +++++++-----------
 4 files changed, 141 insertions(+), 153 deletions(-)

diff --git a/src/lib/components/chat/Settings/Personalization.svelte b/src/lib/components/chat/Settings/Personalization.svelte
index 0e2702496c..88482eb492 100644
--- a/src/lib/components/chat/Settings/Personalization.svelte
+++ b/src/lib/components/chat/Settings/Personalization.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import Switch from '$lib/components/common/Switch.svelte';
-	import { config, models, settings, user } from '$lib/stores';
-	import { createEventDispatcher, onMount, getContext, tick } from 'svelte';
-	import { toast } from 'svelte-sonner';
+	import { config, settings } from '$lib/stores';
+	import { createEventDispatcher, onMount, getContext } from 'svelte';
 	import ManageModal from './Personalization/ManageModal.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	const dispatch = createEventDispatcher();
@@ -64,21 +63,12 @@
 					"You can personalize your interactions with LLMs by adding memories through the 'Manage' button below, making them more helpful and tailored to you."
 				)}
 			</div>
-
-			<!-- <div class="mt-3">
-				To understand what LLM remembers or teach it something new, just chat with it:
-
-				<div>- “Remember that I like concise responses.”</div>
-				<div>- “I just got a puppy!”</div>
-				<div>- “What do you remember about me?”</div>
-				<div>- “Where did we leave off on my last project?”</div>
-			</div> -->
 		</div>
 
 		<div class="mt-3 mb-1 ml-1">
 			<button
 				type="button"
-				class=" px-3.5 py-1.5 font-medium hover:bg-black/5 dark:hover:bg-white/5 outline outline-1 outline-gray-300 dark:outline-gray-800 rounded-3xl"
+				class="px-3.5 py-1.5 font-medium hover:bg-black/5 dark:hover:bg-white/5 outline outline-1 outline-gray-300 dark:outline-gray-800 rounded-3xl"
 				on:click={() => {
 					showManageModal = true;
 				}}
diff --git a/src/lib/components/chat/Settings/Personalization/AddMemoryModal.svelte b/src/lib/components/chat/Settings/Personalization/AddMemoryModal.svelte
index 570e41880a..045ca5bacb 100644
--- a/src/lib/components/chat/Settings/Personalization/AddMemoryModal.svelte
+++ b/src/lib/components/chat/Settings/Personalization/AddMemoryModal.svelte
@@ -2,7 +2,7 @@
 	import { createEventDispatcher, getContext } from 'svelte';
 
 	import Modal from '$lib/components/common/Modal.svelte';
-	import { addNewMemory, updateMemoryById } from '$lib/apis/memories';
+	import { addNewMemory } from '$lib/apis/memories';
 	import { toast } from 'svelte-sonner';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
@@ -14,11 +14,12 @@
 
 	let loading = false;
 	let content = '';
+	let type = 'user';
 
 	const submitHandler = async () => {
 		loading = true;
 
-		const res = await addNewMemory(localStorage.token, content).catch((error) => {
+		const res = await addNewMemory(localStorage.token, content, type).catch((error) => {
 			toast.error(`${error}`);
 
 			return null;
@@ -28,6 +29,7 @@
 			console.log(res);
 			toast.success($i18n.t('Memory added successfully'));
 			content = '';
+			type = 'user';
 			show = false;
 			dispatch('save');
 		}
@@ -60,18 +62,34 @@
 						submitHandler();
 					}}
 				>
-					<div class="">
+					<div class="px-1">
+						<div class="flex w-full justify-between items-center mb-1.5">
+							<div class="text-xs text-gray-500">{$i18n.t('Type')}</div>
+
+							<button
+								type="button"
+								class="text-xs text-gray-700 dark:text-gray-300"
+								on:click={() => {
+									type = type === 'user' ? 'context' : 'user';
+								}}
+							>
+								{#if type === 'user'}
+									{$i18n.t('User')}
+								{:else}
+									{$i18n.t('Context')}
+								{/if}
+							</button>
+						</div>
+
 						<textarea
 							bind:value={content}
-							class=" bg-transparent w-full text-sm rounded-xl p-3 outline outline-1 outline-gray-100 dark:outline-gray-800"
+							class="bg-transparent w-full text-sm outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700"
 							rows="6"
 							style="resize: vertical;"
-							placeholder={$i18n.t('Enter a detail about yourself for your LLMs to recall')}
+							placeholder={type === 'user'
+								? $i18n.t('Add a preference, fact, or instruction about you')
+								: $i18n.t('Add durable context for future chats')}
 						/>
-
-						<div class="text-xs text-gray-500">
-							ⓘ {$i18n.t('Refer to yourself as "User" (e.g., "User is learning Spanish")')}
-						</div>
 					</div>
 
 					<div class="flex justify-end pt-1 text-sm font-medium">
diff --git a/src/lib/components/chat/Settings/Personalization/EditMemoryModal.svelte b/src/lib/components/chat/Settings/Personalization/EditMemoryModal.svelte
index 0f16200c1e..5140619df5 100644
--- a/src/lib/components/chat/Settings/Personalization/EditMemoryModal.svelte
+++ b/src/lib/components/chat/Settings/Personalization/EditMemoryModal.svelte
@@ -17,23 +17,27 @@
 
 	let loading = false;
 	let content = '';
+	let type = 'user';
 
 	$: if (show) {
 		setContent();
 	}
 
 	const setContent = () => {
-		content = memory.content;
+		content = memory?.content ?? '';
+		type = memory?.type ?? 'user';
 	};
 
 	const submitHandler = async () => {
 		loading = true;
 
-		const res = await updateMemoryById(localStorage.token, memory.id, content).catch((error) => {
-			toast.error(`${error}`);
+		const res = await updateMemoryById(localStorage.token, memory.id, content, type).catch(
+			(error) => {
+				toast.error(`${error}`);
 
-			return null;
-		});
+				return null;
+			}
+		);
 
 		if (res) {
 			console.log(res);
@@ -70,18 +74,34 @@
 						submitHandler();
 					}}
 				>
-					<div class="">
+					<div class="px-1">
+						<div class="flex w-full justify-between items-center mb-1.5">
+							<div class="text-xs text-gray-500">{$i18n.t('Type')}</div>
+
+							<button
+								type="button"
+								class="text-xs text-gray-700 dark:text-gray-300"
+								on:click={() => {
+									type = type === 'user' ? 'context' : 'user';
+								}}
+							>
+								{#if type === 'user'}
+									{$i18n.t('User')}
+								{:else}
+									{$i18n.t('Context')}
+								{/if}
+							</button>
+						</div>
+
 						<textarea
 							bind:value={content}
-							class=" bg-transparent w-full text-sm rounded-xl p-3 outline outline-1 outline-gray-100 dark:outline-gray-800"
+							class="bg-transparent w-full text-sm outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700"
 							rows="6"
 							style="resize: vertical;"
-							placeholder={$i18n.t('Enter a detail about yourself for your LLMs to recall')}
+							placeholder={type === 'user'
+								? $i18n.t('Add a preference, fact, or instruction about you')
+								: $i18n.t('Add durable context for future chats')}
 						/>
-
-						<div class="text-xs text-gray-500">
-							ⓘ {$i18n.t('Refer to yourself as "User" (e.g., "User is learning Spanish")')}
-						</div>
 					</div>
 
 					<div class="flex justify-end pt-1 text-sm font-medium">
diff --git a/src/lib/components/chat/Settings/Personalization/ManageModal.svelte b/src/lib/components/chat/Settings/Personalization/ManageModal.svelte
index 1646872323..5d173bf7fe 100644
--- a/src/lib/components/chat/Settings/Personalization/ManageModal.svelte
+++ b/src/lib/components/chat/Settings/Personalization/ManageModal.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
 	import dayjs from 'dayjs';
-	import { getContext, createEventDispatcher } from 'svelte';
-
-	const dispatch = createEventDispatcher();
+	import { getContext } from 'svelte';
 
 	import Modal from '$lib/components/common/Modal.svelte';
 	import AddMemoryModal from './AddMemoryModal.svelte';
@@ -17,59 +15,62 @@
 	import XMark from '$lib/components/icons/XMark.svelte';
 	import Pencil from '$lib/components/icons/Pencil.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
-	import Plus from '$lib/components/icons/Plus.svelte';
 	import Search from '$lib/components/icons/Search.svelte';
-	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
-	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 
 	const i18n = getContext('i18n');
 	dayjs.extend(localizedFormat);
 
 	export let show = false;
 
-	let memories = [];
+	type Memory = {
+		id: string;
+		content: string;
+		type?: string;
+		updated_at?: number;
+	};
+
+	let memories: Memory[] = [];
 	let loading = true;
+	let loaded = false;
 
 	let query = '';
-	let orderBy = 'updated_at';
-	let direction = 'desc';
-
-	const setSortKey = (key: string) => {
-		if (orderBy === key) {
-			direction = direction === 'asc' ? 'desc' : 'asc';
-		} else {
-			orderBy = key;
-			direction = 'asc';
-		}
-	};
 
 	let showAddMemoryModal = false;
 	let showEditMemoryModal = false;
-
-	let selectedMemory = null;
+	let selectedMemory: Memory | null = null;
 
 	let showClearConfirmDialog = false;
 	let showDeleteConfirm = false;
 
+	const loadMemories = async () => {
+		loading = true;
+		memories = (await getMemories(localStorage.token)) ?? [];
+		loading = false;
+	};
+
+	const editMemory = (memory: Memory) => {
+		selectedMemory = memory;
+		showEditMemoryModal = true;
+	};
+
+	const confirmDeleteMemory = (memory: Memory) => {
+		selectedMemory = memory;
+		showDeleteConfirm = true;
+	};
+
+	const memoryTypeLabel = (memory: Memory) =>
+		(memory.type ?? 'user') === 'user' ? $i18n.t('User') : $i18n.t('Context');
+
+	const memoryUpdatedAt = (memory: Memory) =>
+		memory.updated_at ? dayjs(memory.updated_at * 1000).format('MMM D, h:mm A') : '';
+
 	$: filteredMemories = query
-		? memories.filter((m) => m.content?.toLowerCase().includes(query.toLowerCase()))
+		? memories.filter((memory) => memory.content?.toLowerCase().includes(query.toLowerCase()))
 		: memories;
 
-	$: sortedMemories = [...filteredMemories].sort((a, b) => {
-		let aVal, bVal;
-		if (orderBy === 'content') {
-			aVal = (a.content ?? '').toLowerCase();
-			bVal = (b.content ?? '').toLowerCase();
-		} else {
-			aVal = a.updated_at ?? 0;
-			bVal = b.updated_at ?? 0;
-		}
-		if (direction === 'asc') {
-			return aVal > bVal ? 1 : -1;
-		} else {
-			return aVal < bVal ? 1 : -1;
-		}
-	});
+	$: sortedMemories = [...filteredMemories].sort(
+		(a, b) => (b.updated_at ?? 0) - (a.updated_at ?? 0)
+	);
 
 	let onClearConfirmed = async () => {
 		const res = await deleteMemoriesByUserId(localStorage.token).catch((error) => {
@@ -84,17 +85,19 @@
 		showClearConfirmDialog = false;
 	};
 
-	$: if (show && memories.length === 0 && loading) {
-		(async () => {
-			memories = await getMemories(localStorage.token);
-			loading = false;
-		})();
+	$: if (show && !loaded) {
+		loaded = true;
+		loadMemories();
+	}
+
+	$: if (!show) {
+		query = '';
+		loaded = false;
 	}
 </script>
 
 <Modal size="lg" bind:show>
 	<div>
-		<!-- Header -->
 		<div class="flex justify-between dark:text-gray-300 px-5 pt-4 pb-1">
 			<div class="flex items-center gap-2">
 				<div class="text-lg font-medium">{$i18n.t('Memory')}</div>
@@ -112,7 +115,6 @@
 		</div>
 
 		<div class="flex flex-col w-full px-5 pb-4 dark:text-gray-200">
-			<!-- Search -->
 			<div class="flex flex-1 items-center w-full mb-1">
 				<div class="self-center ml-1 mr-3">
 					<Search className="size-3.5" />
@@ -138,7 +140,6 @@
 				{/if}
 			</div>
 
-			<!-- Memories List -->
 			<div class="flex flex-col w-full">
 				{#if !loading}
 					{#if sortedMemories.length === 0}
@@ -152,84 +153,43 @@
 							{/if}
 						</div>
 					{:else}
-						{#if sortedMemories.length > 0}
-							<div class="flex text-xs font-medium mb-1">
-								<button
-									class="px-1.5 py-1 cursor-pointer select-none basis-3/5"
-									on:click={() => setSortKey('content')}
-								>
-									<div class="flex gap-1.5 items-center">
-										{$i18n.t('Content')}
-										{#if orderBy === 'content'}
-											<span class="font-normal">
-												{#if direction === 'asc'}
-													<ChevronUp className="size-2" />
-												{:else}
-													<ChevronDown className="size-2" />
-												{/if}
-											</span>
-										{:else}
-											<span class="invisible">
-												<ChevronUp className="size-2" />
-											</span>
-										{/if}
-									</div>
-								</button>
-								<button
-									class="px-1.5 py-1 cursor-pointer select-none hidden sm:flex sm:basis-2/5 justify-end"
-									on:click={() => setSortKey('updated_at')}
-								>
-									<div class="flex gap-1.5 items-center">
-										{$i18n.t('Updated at')}
-										{#if orderBy === 'updated_at'}
-											<span class="font-normal">
-												{#if direction === 'asc'}
-													<ChevronUp className="size-2" />
-												{:else}
-													<ChevronDown className="size-2" />
-												{/if}
-											</span>
-										{:else}
-											<span class="invisible">
-												<ChevronUp className="size-2" />
-											</span>
-										{/if}
-									</div>
-								</button>
-							</div>
-						{/if}
-
-						<div class="text-left text-sm w-full max-h-[28rem] overflow-y-auto">
+						<div class="text-left text-sm w-full max-h-[28rem] overflow-y-auto space-y-0.5">
 							{#each sortedMemories as memory (memory.id)}
 								<div
-									class="w-full flex justify-between items-center rounded-xl text-sm py-2 px-3 hover:bg-gray-50 dark:hover:bg-gray-850 transition cursor-pointer"
-									on:click={() => {
-										selectedMemory = memory;
-										showEditMemoryModal = true;
-									}}
+									class="group w-full flex justify-between items-center text-sm py-1 px-1"
 								>
-									<div class="flex-1 min-w-0 pr-2">
-										<div class="text-ellipsis line-clamp-1">{memory.content}</div>
-										<div class="text-xs text-gray-500 dark:text-gray-400">
-											{dayjs(memory.updated_at * 1000).format('MMM D, YYYY')}
+									<button
+										type="button"
+										class="flex-1 min-w-0 text-left flex items-center gap-1.5 pr-2 text-gray-900 dark:text-gray-100 hover:text-black dark:hover:text-white transition leading-5"
+										on:click={() => editMemory(memory)}
+									>
+										<div class="truncate leading-5">
+											{memory.content}
 										</div>
-									</div>
+										<span
+											class="shrink-0 text-[11px] leading-5 text-gray-400 dark:text-gray-500"
+										>
+											{memoryTypeLabel(memory)}
+										</span>
+										{#if memoryUpdatedAt(memory)}
+											<div
+												class="hidden sm:block shrink-0 text-[11px] leading-5 text-gray-400 dark:text-gray-500"
+											>
+												{memoryUpdatedAt(memory)}
+											</div>
+										{/if}
+									</button>
 
 									<div class="flex items-center shrink-0">
 										<div
-											class="hidden sm:flex text-gray-500 dark:text-gray-400 text-xs whitespace-nowrap mr-2"
+											class="flex items-center text-gray-500 dark:text-gray-400 opacity-70 group-hover:opacity-100 focus-within:opacity-100 transition"
 										>
-											{dayjs(memory.updated_at * 1000).format('h:mm A')}
-										</div>
-
-										<div class="flex text-gray-600 dark:text-gray-300">
 											<Tooltip content={$i18n.t('Edit')}>
 												<button
-													class="self-center w-fit text-sm p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+													class="self-center w-fit text-sm p-1 leading-none hover:text-gray-900 dark:hover:text-gray-100 transition"
 													on:click={(e) => {
 														e.stopPropagation();
-														selectedMemory = memory;
-														showEditMemoryModal = true;
+														editMemory(memory);
 													}}
 												>
 													<Pencil className="size-4" />
@@ -238,11 +198,10 @@
 
 											<Tooltip content={$i18n.t('Delete')}>
 												<button
-													class="self-center w-fit text-sm p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+													class="self-center w-fit text-sm p-1 leading-none hover:text-gray-900 dark:hover:text-gray-100 transition"
 													on:click={(e) => {
 														e.stopPropagation();
-														selectedMemory = memory;
-														showDeleteConfirm = true;
+														confirmDeleteMemory(memory);
 													}}
 												>
 													<GarbageBin className="size-4" strokeWidth="1.5" />
@@ -261,7 +220,6 @@
 				{/if}
 			</div>
 
-			<!-- Footer -->
 			<div class="flex justify-between items-center text-sm mt-2">
 				<button
 					class="px-2 py-1 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:underline transition"
@@ -299,6 +257,8 @@
 	title={$i18n.t('Delete Memory?')}
 	show={showDeleteConfirm}
 	on:confirm={async () => {
+		if (!selectedMemory) return;
+
 		const res = await deleteMemoryById(localStorage.token, selectedMemory.id).catch((error) => {
 			toast.error(`${error}`);
 			return null;
@@ -306,7 +266,7 @@
 
 		if (res) {
 			toast.success($i18n.t('Memory deleted successfully'));
-			memories = await getMemories(localStorage.token);
+			await loadMemories();
 		}
 		showDeleteConfirm = false;
 	}}
@@ -314,10 +274,10 @@
 		showDeleteConfirm = false;
 	}}
 >
-	<div class=" text-sm text-gray-500 flex-1">
+	<div class="text-sm text-gray-500 flex-1">
 		{$i18n.t('Are you sure you want to delete this memory? This action cannot be undone.')}
 		<div
-			class=" mt-2 bg-gray-50 dark:bg-gray-900 p-3 rounded-xl border border-gray-100 dark:border-gray-800 text-black dark:text-white whitespace-pre-wrap break-words max-h-32 overflow-y-auto"
+			class="mt-2 bg-gray-50 dark:bg-gray-900 p-3 rounded-xl border border-gray-100 dark:border-gray-800 text-black dark:text-white whitespace-pre-wrap break-words max-h-32 overflow-y-auto"
 		>
 			{selectedMemory?.content}
 		</div>
@@ -327,7 +287,7 @@
 <AddMemoryModal
 	bind:show={showAddMemoryModal}
 	on:save={async () => {
-		memories = await getMemories(localStorage.token);
+		await loadMemories();
 	}}
 />
 
@@ -335,6 +295,6 @@
 	bind:show={showEditMemoryModal}
 	memory={selectedMemory}
 	on:save={async () => {
-		memories = await getMemories(localStorage.token);
+		await loadMemories();
 	}}
 />