webui: add "delete all conversations" button to import/export tab

- Add 'Delete all conversations' functionality with confirmation dialog
- Implement safe deletion with proper error handling and user feedback
- Add Trash icon and destructive styling for clear visual indication
- Include success summary showing count of deleted conversations

Author: thomasjfox

tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsImportExportTab.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { Download, Upload } from '@lucide/svelte';
+	import { Download, Upload, Trash2 } from '@lucide/svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { DialogConversationSelection } from '$lib/components/app';
+	import DialogConfirmation from '$lib/components/app/dialogs/DialogConfirmation.svelte';
 	import { DatabaseStore } from '$lib/stores/database';
 	import type { ExportedConversations } from '$lib/types/database';
 	import { createMessageCountMap } from '$lib/utils/conversation-utils';
@@ -20,6 +21,11 @@
 		[]
 	);
 
+	// Delete functionality state
+	let showDeleteDialog = $state(false);
+	let deletedCount = $state(0);
+	let showDeleteSummary = $state(false);
+
 	async function handleExportClick() {
 		try {
 			const allConversations = await DatabaseStore.getAllConversations();
@@ -149,6 +155,50 @@
 			alert('Failed to import conversations. Please check the file format.');
 		}
 	}
+
+	async function handleDeleteAllClick() {
+		try {
+			const allConversations = await DatabaseStore.getAllConversations();
+			if (allConversations.length === 0) {
+				alert('No conversations to delete');
+				return;
+			}
+			showDeleteDialog = true;
+		} catch (err) {
+			console.error('Failed to load conversations for deletion:', err);
+			alert('Failed to load conversations');
+		}
+	}
+
+	async function handleDeleteAllConfirm() {
+		try {
+			const allConversations = await DatabaseStore.getAllConversations();
+			let deleted = 0;
+
+			// Delete each conversation and its messages
+			for (const conv of allConversations) {
+				await DatabaseStore.deleteConversation(conv.id);
+				deleted++;
+			}
+
+			// Update chat store to reflect the changes
+			await chatStore.loadConversations();
+			chatStore.clearActiveConversation();
+
+			deletedCount = deleted;
+			showDeleteSummary = true;
+			showDeleteDialog = false;
+			showExportSummary = false;
+			showImportSummary = false;
+		} catch (err) {
+			console.error('Failed to delete conversations:', err);
+			alert('Failed to delete conversations');
+		}
+	}
+
+	function handleDeleteAllCancel() {
+		showDeleteDialog = false;
+	}
 </script>
 
 <div class="space-y-6">
@@ -233,6 +283,38 @@
 				</div>
 			{/if}
 		</div>
+
+		<div class="grid border-t border-border/30 pt-4">
+			<h4 class="mb-2 text-sm font-medium text-destructive">Delete All Conversations</h4>
+
+			<p class="mb-4 text-sm text-muted-foreground">
+				Permanently delete all conversations and their messages. This action cannot be undone.
+				Consider exporting your conversations first if you want to keep a backup.
+			</p>
+
+			<Button
+				class="text-destructive-foreground w-full justify-start justify-self-start bg-destructive hover:bg-destructive/80 md:w-auto"
+				onclick={handleDeleteAllClick}
+				variant="destructive"
+			>
+				<Trash2 class="mr-2 h-4 w-4" />
+
+				Delete all conversations
+			</Button>
+
+			{#if showDeleteSummary && deletedCount > 0}
+				<div
+					class="mt-4 grid overflow-x-auto rounded-lg border border-destructive/50 bg-destructive/10 p-4"
+				>
+					<h5 class="mb-2 text-sm font-medium text-destructive">
+						Deleted {deletedCount} conversation{deletedCount === 1 ? '' : 's'}
+					</h5>
+					<p class="text-sm text-muted-foreground">
+						All conversations have been permanently removed from your device.
+					</p>
+				</div>
+			{/if}
+		</div>
 	</div>
 </div>
 
@@ -253,3 +335,15 @@
 	onCancel={() => (showImportDialog = false)}
 	onConfirm={handleImportConfirm}
 />
+
+<DialogConfirmation
+	bind:open={showDeleteDialog}
+	title="Delete all conversations"
+	description="Are you sure you want to delete all conversations? This action cannot be undone and will permanently remove all your conversations and messages."
+	confirmText="Delete All"
+	cancelText="Cancel"
+	variant="destructive"
+	icon={Trash2}
+	onConfirm={handleDeleteAllConfirm}
+	onCancel={handleDeleteAllCancel}
+/>