File size: 2,015 Bytes
c59fd93 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | <script lang="ts">
import { Pencil } from '@lucide/svelte';
import * as AlertDialog from '$lib/components/ui/alert-dialog';
import { Button } from '$lib/components/ui/button';
import { Input } from '$lib/components/ui/input';
interface Props {
open: boolean;
currentTitle: string;
value: string;
onConfirm: () => void;
onCancel: () => void;
}
let {
currentTitle,
onCancel,
onConfirm,
open = $bindable(),
value = $bindable('')
}: Props = $props();
let inputRef = $state<HTMLInputElement | null>(null);
const canSubmit = $derived(value.trim().length > 0 && value.trim() !== currentTitle.trim());
$effect(() => {
if (open) {
value = currentTitle;
queueMicrotask(() => {
inputRef?.focus();
inputRef?.select();
});
}
});
function handleOpenChange(newOpen: boolean) {
if (!newOpen) {
onCancel();
}
}
function handleSubmit(event: Event) {
event.preventDefault();
if (!canSubmit) return;
value = value.trim();
onConfirm();
}
</script>
<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
<AlertDialog.Content>
<AlertDialog.Header>
<AlertDialog.Title class="flex items-center gap-2">
<Pencil class="h-5 w-5" />
Rename conversation
</AlertDialog.Title>
<AlertDialog.Description>Choose a new title for this conversation.</AlertDialog.Description>
</AlertDialog.Header>
<form class="space-y-2 pt-2 pb-4" onsubmit={handleSubmit}>
<label class="text-sm font-medium text-muted-foreground" for="conversation-rename-input">
Conversation title
</label>
<Input
bind:ref={inputRef}
bind:value
autocomplete="off"
autocorrect="off"
id="conversation-rename-input"
maxlength={200}
placeholder="Conversation title"
spellcheck={false}
/>
</form>
<AlertDialog.Footer>
<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
<Button disabled={!canSubmit} onclick={handleSubmit} type="button">Save</Button>
</AlertDialog.Footer>
</AlertDialog.Content>
</AlertDialog.Root>
|