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

   1 <script lang="ts">
   2         import type { MCPPromptInfo } from '$lib/types';
   3         import { fly } from 'svelte/transition';
   4         import { Input } from '$lib/components/ui/input';
   5         import { Label } from '$lib/components/ui/label';
   6
   7         type PromptArgument = NonNullable<MCPPromptInfo['arguments']>[number];
   8
   9         interface Props {
  10                 argument: PromptArgument;
  11                 value: string;
  12                 suggestions?: string[];
  13                 isLoadingSuggestions?: boolean;
  14                 isAutocompleteActive?: boolean;
  15                 autocompleteIndex?: number;
  16                 onInput: (value: string) => void;
  17                 onKeydown: (event: KeyboardEvent) => void;
  18                 onBlur: () => void;
  19                 onFocus: () => void;
  20                 onSelectSuggestion: (value: string) => void;
  21         }
  22
  23         let {
  24                 argument,
  25                 value = '',
  26                 suggestions = [],
  27                 isLoadingSuggestions = false,
  28                 isAutocompleteActive = false,
  29                 autocompleteIndex = 0,
  30                 onInput,
  31                 onKeydown,
  32                 onBlur,
  33                 onFocus,
  34                 onSelectSuggestion
  35         }: Props = $props();
  36 </script>
  37
  38 <div class="relative grid gap-1">
  39         <Label for="arg-{argument.name}" class="mb-1 text-muted-foreground">
  40                 <span>
  41                         {argument.name}
  42
  43                         {#if argument.required}
  44                                 <span class="text-destructive">*</span>
  45                         {/if}
  46                 </span>
  47
  48                 {#if isLoadingSuggestions}
  49                         <span class="text-xs text-muted-foreground/50">...</span>
  50                 {/if}
  51         </Label>
  52
  53         <Input
  54                 id="arg-{argument.name}"
  55                 type="text"
  56                 {value}
  57                 oninput={(e) => onInput(e.currentTarget.value)}
  58                 onkeydown={onKeydown}
  59                 onblur={onBlur}
  60                 onfocus={onFocus}
  61                 placeholder={argument.description || argument.name}
  62                 required={argument.required}
  63                 autocomplete="off"
  64         />
  65
  66         {#if isAutocompleteActive && suggestions.length > 0}
  67                 <div
  68                         class="absolute top-full right-0 left-0 z-10 mt-1 max-h-32 overflow-y-auto rounded-lg border border-border/50 bg-background shadow-lg"
  69                         transition:fly={{ y: -5, duration: 100 }}
  70                 >
  71                         {#each suggestions as suggestion, i (suggestion)}
  72                                 <button
  73                                         type="button"
  74                                         onmousedown={() => onSelectSuggestion(suggestion)}
  75                                         class="w-full px-3 py-1.5 text-left text-sm hover:bg-accent {i === autocompleteIndex
  76                                                 ? 'bg-accent'
  77                                                 : ''}"
  78                                 >
  79                                         {suggestion}
  80                                 </button>
  81                         {/each}
  82                 </div>
  83         {/if}
  84 </div>