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

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