1<script lang="ts">
 2	import * as AlertDialog from '$lib/components/ui/alert-dialog';
 3	import { Button } from '$lib/components/ui/button';
 4
 5	interface Props {
 6		open: boolean;
 7		currentTitle: string;
 8		newTitle: string;
 9		onConfirm: () => void;
10		onCancel: () => void;
11	}
12
13	let { open = $bindable(), currentTitle, newTitle, onConfirm, onCancel }: Props = $props();
14</script>
15
16<AlertDialog.Root bind:open>
17	<AlertDialog.Content>
18		<AlertDialog.Header>
19			<AlertDialog.Title>Update Conversation Title?</AlertDialog.Title>
20
21			<AlertDialog.Description>
22				Do you want to update the conversation title to match the first message content?
23			</AlertDialog.Description>
24		</AlertDialog.Header>
25
26		<div class="space-y-4 pt-2 pb-6">
27			<div class="space-y-2">
28				<p class="text-sm font-medium text-muted-foreground">Current title:</p>
29
30				<p class="rounded-md bg-muted/50 p-3 text-sm font-medium">{currentTitle}</p>
31			</div>
32
33			<div class="space-y-2">
34				<p class="text-sm font-medium text-muted-foreground">New title would be:</p>
35
36				<p class="rounded-md bg-muted/50 p-3 text-sm font-medium">{newTitle}</p>
37			</div>
38		</div>
39
40		<AlertDialog.Footer>
41			<Button variant="outline" onclick={onCancel}>Keep Current Title</Button>
42
43			<Button onclick={onConfirm}>Update Title</Button>
44		</AlertDialog.Footer>
45	</AlertDialog.Content>
46</AlertDialog.Root>