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

   1 <script lang="ts">
   2         import type { MCPPromptInfo } from '$lib/types';
   3         import ChatFormPromptPickerArgumentInput from './ChatFormPromptPickerArgumentInput.svelte';
   4         import { Button } from '$lib/components/ui/button';
   5
   6         interface Props {
   7                 prompt: MCPPromptInfo;
   8                 promptArgs: Record<string, string>;
   9                 suggestions: Record<string, string[]>;
  10                 loadingSuggestions: Record<string, boolean>;
  11                 activeAutocomplete: string | null;
  12                 autocompleteIndex: number;
  13                 promptError: string | null;
  14                 onArgInput: (argName: string, value: string) => void;
  15                 onArgKeydown: (event: KeyboardEvent, argName: string) => void;
  16                 onArgBlur: (argName: string) => void;
  17                 onArgFocus: (argName: string) => void;
  18                 onSelectSuggestion: (argName: string, value: string) => void;
  19                 onSubmit: (event: SubmitEvent) => void;
  20                 onCancel: () => void;
  21         }
  22
  23         let {
  24                 prompt,
  25                 promptArgs,
  26                 suggestions,
  27                 loadingSuggestions,
  28                 activeAutocomplete,
  29                 autocompleteIndex,
  30                 promptError,
  31                 onArgInput,
  32                 onArgKeydown,
  33                 onArgBlur,
  34                 onArgFocus,
  35                 onSelectSuggestion,
  36                 onSubmit,
  37                 onCancel
  38         }: Props = $props();
  39 </script>
  40
  41 <form onsubmit={onSubmit} class="space-y-3 pt-4">
  42         {#each prompt.arguments ?? [] as arg (arg.name)}
  43                 <ChatFormPromptPickerArgumentInput
  44                         argument={arg}
  45                         value={promptArgs[arg.name] ?? ''}
  46                         suggestions={suggestions[arg.name] ?? []}
  47                         isLoadingSuggestions={loadingSuggestions[arg.name] ?? false}
  48                         isAutocompleteActive={activeAutocomplete === arg.name}
  49                         autocompleteIndex={activeAutocomplete === arg.name ? autocompleteIndex : 0}
  50                         onInput={(value) => onArgInput(arg.name, value)}
  51                         onKeydown={(e) => onArgKeydown(e, arg.name)}
  52                         onBlur={() => onArgBlur(arg.name)}
  53                         onFocus={() => onArgFocus(arg.name)}
  54                         onSelectSuggestion={(value) => onSelectSuggestion(arg.name, value)}
  55                 />
  56         {/each}
  57
  58         {#if promptError}
  59                 <div
  60                         class="flex items-start gap-2 rounded-lg border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm text-destructive"
  61                         role="alert"
  62                 >
  63                         <span class="shrink-0">⚠</span>
  64
  65                         <span>{promptError}</span>
  66                 </div>
  67         {/if}
  68
  69         <div class="mt-8 flex justify-end gap-2">
  70                 <Button type="button" size="sm" onclick={onCancel} variant="secondary">Cancel</Button>
  71
  72                 <Button size="sm" type="submit">Use Prompt</Button>
  73         </div>
  74 </form>