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         const reasoning = useReasoningMenu();
   9 </script>
  10
  11 {#if reasoning.modelSupportsThinking}
  12         <DropdownMenu.Sub>
  13                 <DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
  14                         {#if reasoning.thinkingEnabled}
  15                                 <Lightbulb class="{ICON_CLASS_DEFAULT} shrink-0 text-amber-400" />
  16                         {:else if reasoning.isOff}
  17                                 <LightbulbOff class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
  18                         {:else}
  19                                 <Lightbulb 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.currentEffort}
  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                                 <DropdownMenu.Item
  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 {reasoning.isSelected(
  42                                                 level
  43                                         )
  44                                                 ? 'bg-accent'
  45                                                 : ''}"
  46                                         onclick={() => reasoning.select(level)}
  47                                 >
  48                                         {#if reasoning.isSelected(level)}
  49                                                 <Check class="{ICON_CLASS_DEFAULT} shrink-0 text-foreground" />
  50                                         {:else}
  51                                                 <div class="{ICON_CLASS_DEFAULT} 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                                 </DropdownMenu.Item>
  73                         {/each}
  74                 </DropdownMenu.SubContent>
  75         </DropdownMenu.Sub>
  76 {/if}