git.djapps.eu Git - pkg/ggml/sources/llama.cpp/blob

   1 <script lang="ts">
   2         import { ChevronLeft, ChevronRight } from '@lucide/svelte';
   3         import { ActionIcon } from '$lib/components/app';
   4
   5         interface Props {
   6                 class?: string;
   7                 siblingInfo: ChatMessageSiblingInfo | null;
   8                 onNavigateToSibling?: (siblingId: string) => void;
   9         }
  10
  11         let { class: className = '', onNavigateToSibling, siblingInfo }: Props = $props();
  12
  13         let hasPrevious = $derived(siblingInfo && siblingInfo.currentIndex > 0);
  14         let hasNext = $derived(siblingInfo && siblingInfo.currentIndex < siblingInfo.totalSiblings - 1);
  15         let nextSiblingId = $derived(
  16                 hasNext ? siblingInfo!.siblingIds[siblingInfo!.currentIndex + 1] : null
  17         );
  18         let previousSiblingId = $derived(
  19                 hasPrevious ? siblingInfo!.siblingIds[siblingInfo!.currentIndex - 1] : null
  20         );
  21 </script>
  22
  23 {#if siblingInfo && siblingInfo.totalSiblings > 1}
  24         <div
  25                 aria-label="Message version {siblingInfo.currentIndex + 1} of {siblingInfo.totalSiblings}"
  26                 class="flex items-center gap-1 text-xs text-muted-foreground {className}"
  27                 role="navigation"
  28         >
  29                 <ActionIcon
  30                         icon={ChevronLeft}
  31                         tooltip="Previous version"
  32                         disabled={!hasPrevious}
  33                         class="h-5 w-5 p-0 {!hasPrevious ? '!cursor-not-allowed opacity-30' : ''}"
  34                         onclick={() => onNavigateToSibling?.(previousSiblingId!)}
  35                 />
  36
  37                 <span class="px-1 font-mono text-xs">
  38                         {siblingInfo.currentIndex + 1}/{siblingInfo.totalSiblings}
  39                 </span>
  40
  41                 <ActionIcon
  42                         icon={ChevronRight}
  43                         tooltip="Next version"
  44                         disabled={!hasNext}
  45                         class="h-5 w-5 p-0 {!hasNext ? 'opacity-30' : ''}"
  46                         onclick={() => onNavigateToSibling?.(nextSiblingId!)}
  47                 />
  48         </div>
  49 {/if}