webui: add "delete all conversations" button to import/export tab (#17444)

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

- Add 'Delete all conversations' functionality with confirmation dialog
- Add Trash icon and destructive styling for clear visual indication
- Redirects to "?new_chat=true#/" by using conversationsStore.deleteAll()

* chore: update webui build output

diff --git a/tools/server/public/index.html.gz b/tools/server/public/index.html.gz
index 3fd631b77a85820f6fcec9cc3f5e9f60d5ef9fb3..1834d1d91f46fcdaa39f2ccff19e82ee2a2479f3 100644 (file)
Binary files a/tools/server/public/index.html.gz and b/tools/server/public/index.html.gz differ

diff --git a/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsImportExportTab.svelte b/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsImportExportTab.svelte
index 7edce48b9bc0b4d500956f5e8608f8ed1c8b8296..1c8b41102a87da3d53b86088d2620cf76ec4a76e 100644 (file)
--- a/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsImportExportTab.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsImportExportTab.svelte
@@ -1,9 +1,11 @@
 <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 { createMessageCountMap } from '$lib/utils';
        import { conversationsStore, conversations } from '$lib/stores/conversations.svelte';
+       import { toast } from 'svelte-sonner';
+       import DialogConfirmation from '$lib/components/app/dialogs/DialogConfirmation.svelte';
 
        let exportedConversations = $state<DatabaseConversation[]>([]);
        let importedConversations = $state<DatabaseConversation[]>([]);
@@ -18,11 +20,14 @@
                []
        );
 
+       // Delete functionality state
+       let showDeleteDialog = $state(false);
+
        async function handleExportClick() {
                try {
                        const allConversations = conversations();
                        if (allConversations.length === 0) {
-                               alert('No conversations to export');
+                               toast.info('No conversations to export');
                                return;
                        }
 
@@ -145,6 +150,36 @@
                        alert('Failed to import conversations. Please check the file format.');
                }
        }
+
+       async function handleDeleteAllClick() {
+               try {
+                       const allConversations = conversations();
+
+                       if (allConversations.length === 0) {
+                               toast.info('No conversations to delete');
+                               return;
+                       }
+
+                       showDeleteDialog = true;
+               } catch (err) {
+                       console.error('Failed to load conversations for deletion:', err);
+                       toast.error('Failed to load conversations');
+               }
+       }
+
+       async function handleDeleteAllConfirm() {
+               try {
+                       await conversationsStore.deleteAll();
+
+                       showDeleteDialog = false;
+               } catch (err) {
+                       console.error('Failed to delete conversations:', err);
+               }
+       }
+
+       function handleDeleteAllCancel() {
+               showDeleteDialog = false;
+       }
 </script>
 
 <div class="space-y-6">
@@ -229,6 +264,25 @@
                                </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>
+               </div>
        </div>
 </div>
 
@@ -249,3 +303,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}
+/>

diff --git a/tools/server/webui/src/lib/stores/conversations.svelte.ts b/tools/server/webui/src/lib/stores/conversations.svelte.ts
index f766561971c051e3e2162d1d46e4f6ca4606aebe..3300eb3113930546b9ab216053eaa709896c464d 100644 (file)
--- a/tools/server/webui/src/lib/stores/conversations.svelte.ts
+++ b/tools/server/webui/src/lib/stores/conversations.svelte.ts
@@ -385,8 +385,7 @@ class ConversationsStore {
                        this.conversations = this.conversations.filter((c) => c.id !== convId);
 
                        if (this.activeConversation?.id === convId) {
-                               this.activeConversation = null;
-                               this.activeMessages = [];
+                               this.clearActiveConversation();
                                await goto(`?new_chat=true#/`);
                        }
                } catch (error) {
@@ -394,6 +393,29 @@ class ConversationsStore {
                }
        }
 
+       /**
+        * Deletes all conversations and their messages
+        */
+       async deleteAll(): Promise<void> {
+               try {
+                       const allConversations = await DatabaseService.getAllConversations();
+
+                       for (const conv of allConversations) {
+                               await DatabaseService.deleteConversation(conv.id);
+                       }
+
+                       this.clearActiveConversation();
+                       this.conversations = [];
+
+                       toast.success('All conversations deleted');
+
+                       await goto(`?new_chat=true#/`);
+               } catch (error) {
+                       console.error('Failed to delete all conversations:', error);
+                       toast.error('Failed to delete conversations');
+               }
+       }
+
        // ─────────────────────────────────────────────────────────────────────────────
        // Import/Export
        // ─────────────────────────────────────────────────────────────────────────────