Merge pull request open-webui#10786 from silentoplayz/confirm-clear-for-memories

feat: Confirmation prompt on 'Clear' for memories

Author: tjbck

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

@@ -12,6 +12,7 @@
 	import { error } from '@sveltejs/kit';
 	import EditMemoryModal from './EditMemoryModal.svelte';
 	import localizedFormat from 'dayjs/plugin/localizedFormat';
+	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 
 	const i18n = getContext('i18n');
 	dayjs.extend(localizedFormat);
@@ -26,6 +27,21 @@
 
 	let selectedMemory = null;
 
+	let showClearConfirmDialog = false;
+
+	let onClearConfirmed = async () => {
+		const res = await deleteMemoriesByUserId(localStorage.token).catch((error) => {
+			toast.error(`${error}`);
+			return null;
+		});
+
+		if (res && memories.length > 0) {
+			toast.success($i18n.t('Memory cleared successfully'));
+			memories = [];
+		}
+		showClearConfirmDialog = false;
+	};
+
 	$: if (show && memories.length === 0 && loading) {
 		(async () => {
 			memories = await getMemories(localStorage.token);
@@ -175,15 +191,11 @@
 				>
 				<button
 					class=" px-3.5 py-1.5 font-medium text-red-500 hover:bg-black/5 dark:hover:bg-white/5 outline outline-1 outline-red-300 dark:outline-red-800 rounded-3xl"
-					on:click={async () => {
-						const res = await deleteMemoriesByUserId(localStorage.token).catch((error) => {
-							toast.error(`${error}`);
-							return null;
-						});
-
-						if (res) {
-							toast.success($i18n.t('Memory cleared successfully'));
-							memories = [];
+					on:click={() => {
+						if (memories.length > 0) {
+							showClearConfirmDialog = true;
+						} else {
+							toast.error($i18n.t('No memories to clear'));
 						}
 					}}>{$i18n.t('Clear memory')}</button
 				>
@@ -192,6 +204,16 @@
 	</div>
 </Modal>
 
+<ConfirmDialog
+	title={$i18n.t('Clear Memory')}
+	message={$i18n.t('Are you sure you want to clear all memories? This action cannot be undone.')}
+	show={showClearConfirmDialog}
+	on:confirm={onClearConfirmed}
+	on:cancel={() => {
+		showClearConfirmDialog = false;
+	}}
+/>
+
 <AddMemoryModal
 	bind:show={showAddMemoryModal}
 	on:save={async () => {