1<script lang="ts">
 2	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
 3	import { Button } from '$lib/components/ui/button';
 4	import * as Tooltip from '$lib/components/ui/tooltip';
 5
 6	interface Props {
 7		class?: string;
 8		siblingInfo: ChatMessageSiblingInfo | null;
 9		onNavigateToSibling?: (siblingId: string) => void;
10	}
11
12	let { class: className = '', siblingInfo, onNavigateToSibling }: Props = $props();
13
14	let hasPrevious = $derived(siblingInfo && siblingInfo.currentIndex > 0);
15	let hasNext = $derived(siblingInfo && siblingInfo.currentIndex < siblingInfo.totalSiblings - 1);
16	let nextSiblingId = $derived(
17		hasNext ? siblingInfo!.siblingIds[siblingInfo!.currentIndex + 1] : null
18	);
19	let previousSiblingId = $derived(
20		hasPrevious ? siblingInfo!.siblingIds[siblingInfo!.currentIndex - 1] : null
21	);
22
23	function handleNext() {
24		if (nextSiblingId) {
25			onNavigateToSibling?.(nextSiblingId);
26		}
27	}
28
29	function handlePrevious() {
30		if (previousSiblingId) {
31			onNavigateToSibling?.(previousSiblingId);
32		}
33	}
34</script>
35
36{#if siblingInfo && siblingInfo.totalSiblings > 1}
37	<div
38		aria-label="Message version {siblingInfo.currentIndex + 1} of {siblingInfo.totalSiblings}"
39		class="flex items-center gap-1 text-xs text-muted-foreground {className}"
40		role="navigation"
41	>
42		<Tooltip.Root>
43			<Tooltip.Trigger>
44				<Button
45					aria-label="Previous message version"
46					class="h-5 w-5 p-0 {!hasPrevious ? 'cursor-not-allowed opacity-30' : ''}"
47					disabled={!hasPrevious}
48					onclick={handlePrevious}
49					size="sm"
50					variant="ghost"
51				>
52					<ChevronLeft class="h-3 w-3" />
53				</Button>
54			</Tooltip.Trigger>
55
56			<Tooltip.Content>
57				<p>Previous version</p>
58			</Tooltip.Content>
59		</Tooltip.Root>
60
61		<span class="px-1 font-mono text-xs">
62			{siblingInfo.currentIndex + 1}/{siblingInfo.totalSiblings}
63		</span>
64
65		<Tooltip.Root>
66			<Tooltip.Trigger>
67				<Button
68					aria-label="Next message version"
69					class="h-5 w-5 p-0 {!hasNext ? 'cursor-not-allowed opacity-30' : ''}"
70					disabled={!hasNext}
71					onclick={handleNext}
72					size="sm"
73					variant="ghost"
74				>
75					<ChevronRight class="h-3 w-3" />
76				</Button>
77			</Tooltip.Trigger>
78
79			<Tooltip.Content>
80				<p>Next version</p>
81			</Tooltip.Content>
82		</Tooltip.Root>
83	</div>
84{/if}