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

   1 <script lang="ts">
   2         import { Lightbulb, LightbulbOff, Check, Info } from '@lucide/svelte';
   3         import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
   4         import * as Tooltip from '$lib/components/ui/tooltip';
   5         import { useReasoningMenu } from '$lib/hooks/use-reasoning-menu.svelte';
   6
   7         let subOpen = $state(false);
   8
   9         const reasoning = useReasoningMenu();
  10 </script>
  11
  12 {#if reasoning.modelSupportsThinking}
  13         <DropdownMenu.Sub bind:open={subOpen}>
  14                 <DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
  15                         {#if reasoning.thinkingEnabled}
  16                                 <Lightbulb class="h-4 w-4 shrink-0 text-amber-400" />
  17                         {:else}
  18                                 <LightbulbOff class="h-4 w-4 shrink-0 text-muted-foreground" />
  19                         {/if}
  20
  21                         <span
  22                                 class="text-sm inline-flex gap-2 {!reasoning.thinkingEnabled
  23                                         ? 'text-muted-foreground'
  24                                         : ''}"
  25                         >
  26                                 Reasoning
  27
  28                                 <span class="capitalize text-muted-foreground">
  29                                         {reasoning.thinkingEnabled ? reasoning.currentEffort : 'off'}
  30                                 </span>
  31                         </span>
  32                 </DropdownMenu.SubTrigger>
  33
  34                 <DropdownMenu.SubContent
  35                         class="w-60 bg-popover p-1.5 text-popover-foreground shadow-md outline-none"
  36                 >
  37                         {#each reasoning.levels as level (level.value)}
  38                                 {@const tokenLabel = reasoning.tokenLabel(level)}
  39                                 <button
  40                                         type="button"
  41                                         class="flex w-full cursor-pointer items-center gap-3 rounded-md px-2 py-1.75 text-left text-sm transition-colors hover:bg-accent"
  42                                         class:bg-accent={reasoning.isSelected(level)}
  43                                         onclick={() => {
  44                                                 reasoning.select(level);
  45                                                 subOpen = false;
  46                                         }}
  47                                 >
  48                                         {#if reasoning.isSelected(level)}
  49                                                 <Check class="h-4 w-4 shrink-0 text-foreground" />
  50                                         {:else}
  51                                                 <div class="h-4 w-4 shrink-0"></div>
  52                                         {/if}
  53
  54                                         <span class="flex-1">{level.label}</span>
  55
  56                                         {#if tokenLabel}
  57                                                 <span class="text-[11px] text-muted-foreground opacity-60">
  58                                                         {tokenLabel}
  59                                                 </span>
  60                                         {/if}
  61
  62                                         {#if level.hasInfo}
  63                                                 <Tooltip.Root>
  64                                                         <Tooltip.Trigger>
  65                                                                 <Info class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
  66                                                         </Tooltip.Trigger>
  67                                                         <Tooltip.Content side="left">
  68                                                                 <p>Maximum reasoning effort with extended context usage</p>
  69                                                         </Tooltip.Content>
  70                                                 </Tooltip.Root>
  71                                         {/if}
  72                                 </button>
  73                         {/each}
  74                 </DropdownMenu.SubContent>
  75         </DropdownMenu.Sub>
  76 {/if}