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

   1 <script lang="ts">
   2         import { Folder } from '@lucide/svelte';
   3         import { cn } from '$lib/components/ui/utils';
   4         import { highlightMatch } from '$lib/utils';
   5         import { fly } from 'svelte/transition';
   6
   7         // Fly-in transition for the results list.
   8         const FLY_Y_PX = -4;
   9         const FLY_DURATION_MS = 100;
  10
  11         interface Props {
  12                 results: string[];
  13                 hoveredIndex: number;
  14                 isSearching: boolean;
  15                 error: string | null;
  16                 rawQuery: string;
  17                 container?: HTMLDivElement | null;
  18                 onCommit?: (path: string) => void;
  19                 onHover?: (index: number) => void;
  20         }
  21
  22         let {
  23                 container = $bindable(null),
  24                 error,
  25                 hoveredIndex,
  26                 isSearching,
  27                 onCommit,
  28                 onHover,
  29                 rawQuery,
  30                 results
  31         }: Props = $props();
  32 </script>
  33
  34 <div
  35         bind:this={container}
  36         class="max-h-48 overflow-y-auto py-2"
  37         transition:fly={{ duration: FLY_DURATION_MS, y: FLY_Y_PX }}
  38 >
  39         {#if isSearching && results.length === 0}
  40                 <div class="px-2 py-1.5 text-sm text-muted-foreground">Searching...</div>
  41         {:else if error}
  42                 <div class="px-2 py-1.5 text-sm text-destructive">{error}</div>
  43         {:else if results.length === 0}
  44                 <div class="px-2 py-1.5 text-sm text-muted-foreground">No matching folders</div>
  45         {:else}
  46                 {#each results as path, index (path)}
  47                         <button
  48                                 type="button"
  49                                 data-result-index={index}
  50                                 data-highlighted={index === hoveredIndex ? '' : undefined}
  51                                 class={cn(
  52                                         'relative flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground'
  53                                 )}
  54                                 onclick={() => onCommit?.(path)}
  55                                 onmouseenter={() => onHover?.(index)}
  56                         >
  57                                 <Folder class="size-4 shrink-0 text-muted-foreground" />
  58                                 <span class="min-w-0 flex-1 truncate font-mono text-left">
  59                                         {#each highlightMatch(path, rawQuery.trim()) as seg, segIndex (segIndex)}
  60                                                 {#if seg.match}
  61                                                         <mark class="rounded bg-yellow-200/60 px-0.5 text-foreground dark:bg-yellow-500/30"
  62                                                                 >{seg.text}</mark
  63                                                         >
  64                                                 {:else}
  65                                                         {seg.text}
  66                                                 {/if}
  67                                         {/each}
  68                                 </span>
  69                         </button>
  70                 {/each}
  71         {/if}
  72 </div>