feat: Improve destructive actions UI & interactions

Author: allozaur

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte

@@ -6,16 +6,7 @@
 	import { Tooltip, TooltipContent, TooltipTrigger } from '$lib/components/ui/tooltip';
 	import MessageBranchingControls from './MessageBranchingControls.svelte';
 	import type { MessageSiblingInfo } from '$lib/utils/branching';
-	import {
-		AlertDialog,
-		AlertDialogAction,
-		AlertDialogCancel,
-		AlertDialogContent,
-		AlertDialogDescription,
-		AlertDialogFooter,
-		AlertDialogHeader,
-		AlertDialogTitle
-	} from '$lib/components/ui/alert-dialog';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
 	import { copyToClipboard } from '$lib/utils/copy';
 	import { parseThinkingContent } from '$lib/utils/thinking';
 	import { getDeletionInfo } from '$lib/stores/chat.svelte';
@@ -287,18 +278,18 @@
 	</div>
 {/snippet}
 
-<AlertDialog bind:open={showDeleteDialog}>
-	<AlertDialogContent
+<AlertDialog.Root bind:open={showDeleteDialog}>
+	<AlertDialog.Content
 		onkeydown={(e) => {
 			if (e.key === 'Enter') {
 				e.preventDefault();
 				handleConfirmDelete();
 			}
 		}}
 	>
-		<AlertDialogHeader>
-			<AlertDialogTitle>Delete Message</AlertDialogTitle>
-			<AlertDialogDescription>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Delete Message</AlertDialog.Title>
+			<AlertDialog.Description>
 				{#if deletionInfo && deletionInfo.totalCount > 1}
 					<div class="space-y-2">
 						<p>This will delete <strong>{deletionInfo.totalCount} messages</strong> including:</p>
@@ -320,22 +311,22 @@
 				{:else}
 					Are you sure you want to delete this message? This action cannot be undone.
 				{/if}
-			</AlertDialogDescription>
-		</AlertDialogHeader>
+			</AlertDialog.Description>
+		</AlertDialog.Header>
 
-		<AlertDialogFooter>
-			<AlertDialogCancel>Cancel</AlertDialogCancel>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
 
-			<AlertDialogAction onclick={handleConfirmDelete} class="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+			<AlertDialog.Action onclick={handleConfirmDelete} class="bg-destructive hover:bg-destructive/80 text-white">
 				{#if deletionInfo && deletionInfo.totalCount > 1}
 					Delete {deletionInfo.totalCount} Messages
 				{:else}
 					Delete
 				{/if}
-			</AlertDialogAction>
-		</AlertDialogFooter>
-	</AlertDialogContent>
-</AlertDialog>
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
 
 <style>
 	.processing-container {

tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte

@@ -217,6 +217,13 @@
 		showDeleteDialog = false;
 	}
 
+	function handleDeleteDialogKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			handleDeleteConfirm();
+		}
+	}
+
 	$effect(() => {
 		// This solution is not ideal, but it works for now. But can be tricky for long conversations
 		// Eventually we might want to find a proper way to render the content scrolled down from the beginning
@@ -391,7 +398,7 @@
 <AlertDialog.Root bind:open={showDeleteDialog}>
 	<AlertDialog.Portal>
 		<AlertDialog.Overlay />
-		<AlertDialog.Content class="max-w-md">
+		<AlertDialog.Content class="max-w-md" onkeydown={handleDeleteDialogKeydown}>
 			<AlertDialog.Header>
 				<AlertDialog.Title>Delete Chat</AlertDialog.Title>
 				<AlertDialog.Description class="text-muted-foreground text-sm">
@@ -403,7 +410,7 @@
 				<AlertDialog.Cancel onclick={() => (showDeleteDialog = false)}>
 					Cancel
 				</AlertDialog.Cancel>
-				<AlertDialog.Action onclick={handleDeleteConfirm} class="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+				<AlertDialog.Action onclick={handleDeleteConfirm} class="bg-destructive hover:bg-destructive/80 text-white">
 					Delete
 				</AlertDialog.Action>
 			</AlertDialog.Footer>

tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebarConversationItem.svelte

@@ -133,8 +133,9 @@
 				</AlertDialog.Header>
 				<AlertDialog.Footer>
 					<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+
 					<AlertDialog.Action
-						class="bg-destructive text-destructive-foreground"
+						class="bg-destructive hover:bg-destructive/80 text-white "
 						onclick={handleConfirmDelete}>Delete</AlertDialog.Action
 					>
 				</AlertDialog.Footer>