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

   1 <script lang="ts">
   2         import { PencilRuler, ChevronDown, ChevronRight, Loader2, Info } from '@lucide/svelte';
   3         import { Checkbox } from '$lib/components/ui/checkbox';
   4         import * as Collapsible from '$lib/components/ui/collapsible';
   5         import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
   6         import * as Tooltip from '$lib/components/ui/tooltip';
   7         import { toolsStore } from '$lib/stores/tools.svelte';
   8         import { mcpStore } from '$lib/stores/mcp.svelte';
   9         import { useToolsPanel } from '$lib/hooks/use-tools-panel.svelte';
  10
  11         const toolsPanel = useToolsPanel();
  12         const hasMcpServersAvailable = $derived(mcpStore.getServersSorted().length > 0);
  13 </script>
  14
  15 <DropdownMenu.Sub onOpenChange={(open) => open && toolsPanel.handleOpen()}>
  16         <DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
  17                 <PencilRuler class="h-4 w-4" />
  18
  19                 <span>Tools</span>
  20         </DropdownMenu.SubTrigger>
  21
  22         <DropdownMenu.SubContent class="w-72 p-0">
  23                 {#if toolsPanel.totalToolCount === 0}
  24                         {#if toolsStore.loading}
  25                                 <div class="px-3 py-4 text-center text-sm text-muted-foreground">
  26                                         <Loader2 class="mx-auto mb-1 h-4 w-4 animate-spin" />
  27                                         Loading tools...
  28                                 </div>
  29                         {:else if toolsStore.isToolsEndpointUnreachable}
  30                                 <div class="grid gap-2.5 px-3 py-4 text-sm text-muted-foreground">
  31                                         <span class="flex gap-2">
  32                                                 <Info class="mt-0.5 h-4 w-4 shrink-0" />
  33
  34                                                 <span
  35                                                         >Run llama-server with <code>--tools</code> flag to enable
  36                                                         <strong>Built-in Tools</strong>.</span
  37                                                 >
  38                                         </span>
  39
  40                                         <span class="flex gap-2">
  41                                                 <Info class="mt-0.5 h-4 w-4 shrink-0" />
  42
  43                                                 <span
  44                                                         >{hasMcpServersAvailable ? 'Enable' : 'Add'} MCP Server(s) to access
  45                                                         <strong>MCP Tools</strong>.</span
  46                                                 >
  47                                         </span>
  48                                 </div>
  49                         {:else if toolsStore.error}
  50                                 <div class="px-3 py-4 text-center text-sm text-muted-foreground">Failed to load tools</div>
  51                         {:else if toolsPanel.noToolsInfoMessage}
  52                                 <div class="flex gap-2 px-3 py-4 text-sm text-muted-foreground">
  53                                         <Info class="mt-0.5 h-4 w-4 shrink-0" />
  54
  55                                         <span>{toolsPanel.noToolsInfoMessage}</span>
  56                                 </div>
  57                         {:else}
  58                                 <div class="px-3 py-4 text-center text-sm text-muted-foreground">No tools available</div>
  59                         {/if}
  60                 {:else}
  61                         <div class="max-h-80 overflow-y-auto p-2 pr-1">
  62                                 {#each toolsPanel.activeGroups as group (group.label)}
  63                                         {@const isExpanded = toolsPanel.expandedGroups.has(group.label)}
  64                                         {@const { checked, indeterminate } = toolsPanel.getGroupCheckedState(group)}
  65                                         {@const favicon = toolsPanel.getFavicon(group)}
  66
  67                                         <Collapsible.Root
  68                                                 open={isExpanded}
  69                                                 onOpenChange={() => toolsPanel.toggleGroupExpanded(group.label)}
  70                                         >
  71                                                 <div class="flex items-center gap-1">
  72                                                         <Collapsible.Trigger
  73                                                                 class="flex min-w-0 flex-1 items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-muted/50"
  74                                                         >
  75                                                                 {#if isExpanded}
  76                                                                         <ChevronDown class="h-3.5 w-3.5 shrink-0" />
  77                                                                 {:else}
  78                                                                         <ChevronRight class="h-3.5 w-3.5 shrink-0" />
  79                                                                 {/if}
  80
  81                                                                 <span class="inline-flex min-w-0 items-center gap-1.5 font-medium">
  82                                                                         {#if favicon}
  83                                                                                 <img
  84                                                                                         src={favicon}
  85                                                                                         alt=""
  86                                                                                         class="h-4 w-4 shrink-0 rounded-sm"
  87                                                                                         onerror={(e) => {
  88                                                                                                 (e.currentTarget as HTMLImageElement).style.display = 'none';
  89                                                                                         }}
  90                                                                                 />
  91                                                                         {/if}
  92
  93                                                                         <span class="truncate">{group.label}</span>
  94                                                                 </span>
  95
  96                                                                 <span class="ml-auto shrink-0 text-xs text-muted-foreground">
  97                                                                         {toolsPanel.getEnabledToolCount(group)}/{group.tools.length}
  98                                                                 </span>
  99                                                         </Collapsible.Trigger>
 100
 101                                                         <Tooltip.Root>
 102                                                                 <Tooltip.Trigger>
 103                                                                         <Checkbox
 104                                                                                 {checked}
 105                                                                                 {indeterminate}
 106                                                                                 onCheckedChange={() => toolsStore.toggleGroup(group)}
 107                                                                                 class="mr-2 h-4 w-4 shrink-0"
 108                                                                         />
 109                                                                 </Tooltip.Trigger>
 110
 111                                                                 <Tooltip.Content side="right">
 112                                                                         <p>
 113                                                                                 {checked ? 'Disable' : 'Enable'}
 114                                                                                 {group.tools.length} tool{group.tools.length !== 1 ? 's' : ''}
 115                                                                         </p>
 116                                                                 </Tooltip.Content>
 117                                                         </Tooltip.Root>
 118                                                 </div>
 119
 120                                                 <Collapsible.Content>
 121                                                         <div class="ml-4 flex flex-col gap-0.5 border-l border-border/50 pl-2">
 122                                                                 {#each group.tools as tool (tool.function.name)}
 123                                                                         <button
 124                                                                                 type="button"
 125                                                                                 class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm transition-colors hover:bg-muted/50"
 126                                                                                 onclick={() => toolsStore.toggleTool(tool.function.name)}
 127                                                                         >
 128                                                                                 <Checkbox
 129                                                                                         checked={toolsStore.isToolEnabled(tool.function.name)}
 130                                                                                         onCheckedChange={() => toolsStore.toggleTool(tool.function.name)}
 131                                                                                         class="h-4 w-4 shrink-0"
 132                                                                                 />
 133
 134                                                                                 <span class="min-w-0 flex-1 truncate font-mono text-[12px]">
 135                                                                                         {tool.function.name}
 136                                                                                 </span>
 137                                                                         </button>
 138                                                                 {/each}
 139                                                         </div>
 140                                                 </Collapsible.Content>
 141                                         </Collapsible.Root>
 142                                 {/each}
 143                         </div>
 144                 {/if}
 145         </DropdownMenu.SubContent>
 146 </DropdownMenu.Sub>