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

   1 <script lang="ts">
   2         import type { Snippet } from 'svelte';
   3         import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
   4         import * as Tooltip from '$lib/components/ui/tooltip';
   5         import {
   6                 ATTACHMENT_FILE_ITEMS,
   7                 ATTACHMENT_EXTRA_ITEMS,
   8                 ATTACHMENT_MCP_ITEMS,
   9                 TOOLTIP_DELAY_DURATION
  10         } from '$lib/constants';
  11         import { AttachmentMenuItemId } from '$lib/enums';
  12         import {
  13                 ChatFormActionAddToolsSubmenu,
  14                 ChatFormActionAddMcpServersSubmenu
  15         } from '$lib/components/app';
  16
  17         import { useAttachmentMenu } from '$lib/hooks/use-attachment-menu.svelte';
  18
  19         interface Props {
  20                 class?: string;
  21                 disabled?: boolean;
  22                 hasAudioModality?: boolean;
  23                 hasVisionModality?: boolean;
  24                 hasMcpPromptsSupport?: boolean;
  25                 hasMcpResourcesSupport?: boolean;
  26                 onFileUpload?: () => void;
  27                 onSystemPromptClick?: () => void;
  28                 onMcpPromptClick?: () => void;
  29                 onMcpSettingsClick?: () => void;
  30                 onMcpResourcesClick?: () => void;
  31                 trigger: Snippet<[{ disabled: boolean }]>;
  32         }
  33
  34         let {
  35                 class: className = '',
  36                 disabled = false,
  37                 hasAudioModality = false,
  38                 hasVisionModality = false,
  39                 hasMcpPromptsSupport = false,
  40                 hasMcpResourcesSupport = false,
  41                 onFileUpload,
  42                 onSystemPromptClick,
  43                 onMcpPromptClick,
  44                 onMcpSettingsClick,
  45                 onMcpResourcesClick,
  46                 trigger
  47         }: Props = $props();
  48
  49         let dropdownOpen = $state(false);
  50
  51         function handleMcpSettingsClick() {
  52                 dropdownOpen = false;
  53                 onMcpSettingsClick?.();
  54         }
  55
  56         const attachmentMenu = useAttachmentMenu(
  57                 () => ({
  58                         hasVisionModality,
  59                         hasAudioModality,
  60                         hasMcpPromptsSupport,
  61                         hasMcpResourcesSupport
  62                 }),
  63                 () => ({ onFileUpload, onSystemPromptClick, onMcpPromptClick, onMcpResourcesClick }),
  64                 () => {
  65                         dropdownOpen = false;
  66                 }
  67         );
  68 </script>
  69
  70 <div class="flex items-center gap-1 {className}">
  71         <DropdownMenu.Root bind:open={dropdownOpen}>
  72                 <DropdownMenu.Trigger name="Attach files" {disabled}>
  73                         {@render trigger({ disabled })}
  74                 </DropdownMenu.Trigger>
  75
  76                 <DropdownMenu.Content align="start" class="w-48">
  77                         {#each ATTACHMENT_FILE_ITEMS as item (item.id)}
  78                                 {@const enabled = attachmentMenu.isItemEnabled(item.enabledWhen)}
  79                                 {#if enabled}
  80                                         <DropdownMenu.Item
  81                                                 class="{item.class ?? ''} flex cursor-pointer items-center gap-2"
  82                                                 onclick={() => attachmentMenu.callbacks[item.action]()}
  83                                         >
  84                                                 <item.icon class="h-4 w-4" />
  85
  86                                                 <span>{item.label}</span>
  87                                         </DropdownMenu.Item>
  88                                 {:else if item.disabledTooltip}
  89                                         <Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
  90                                                 <Tooltip.Trigger class="w-full">
  91                                                         <DropdownMenu.Item
  92                                                                 class="{item.class ?? ''} flex cursor-pointer items-center gap-2"
  93                                                                 disabled
  94                                                         >
  95                                                                 <item.icon class="h-4 w-4" />
  96
  97                                                                 <span>{item.label}</span>
  98                                                         </DropdownMenu.Item>
  99                                                 </Tooltip.Trigger>
 100
 101                                                 <Tooltip.Content side="right">
 102                                                         <p>{item.disabledTooltip}</p>
 103                                                 </Tooltip.Content>
 104                                         </Tooltip.Root>
 105                                 {/if}
 106                         {/each}
 107
 108                         {#if !attachmentMenu.isItemEnabled('hasVisionModality')}
 109                                 <Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
 110                                         <Tooltip.Trigger class="w-full">
 111                                                 <DropdownMenu.Item
 112                                                         class="flex cursor-pointer items-center gap-2"
 113                                                         onclick={attachmentMenu.callbacks.onFileUpload}
 114                                                 >
 115                                                         {@const pdfItem = ATTACHMENT_FILE_ITEMS.find(
 116                                                                 (i) => i.id === AttachmentMenuItemId.PDF
 117                                                         )}
 118                                                         {#if pdfItem}
 119                                                                 <pdfItem.icon class="h-4 w-4" />
 120
 121                                                                 <span>{pdfItem.label}</span>
 122                                                         {/if}
 123                                                 </DropdownMenu.Item>
 124                                         </Tooltip.Trigger>
 125
 126                                         <Tooltip.Content side="right">
 127                                                 <p>PDFs will be converted to text. Image-based PDFs may not work properly.</p>
 128                                         </Tooltip.Content>
 129                                 </Tooltip.Root>
 130                         {/if}
 131
 132                         <DropdownMenu.Separator />
 133
 134                         {#each ATTACHMENT_EXTRA_ITEMS as item (item.id)}
 135                                 {#if item.id === AttachmentMenuItemId.SYSTEM_MESSAGE}
 136                                         <Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
 137                                                 <Tooltip.Trigger class="w-full">
 138                                                         <DropdownMenu.Item
 139                                                                 class="flex cursor-pointer items-center gap-2"
 140                                                                 onclick={() => attachmentMenu.callbacks[item.action]()}
 141                                                         >
 142                                                                 <item.icon class="h-4 w-4" />
 143
 144                                                                 <span>{item.label}</span>
 145                                                         </DropdownMenu.Item>
 146                                                 </Tooltip.Trigger>
 147
 148                                                 <Tooltip.Content side="right">
 149                                                         <p>{attachmentMenu.getSystemMessageTooltip()}</p>
 150                                                 </Tooltip.Content>
 151                                         </Tooltip.Root>
 152                                 {/if}
 153                         {/each}
 154
 155                         <ChatFormActionAddToolsSubmenu />
 156
 157                         <ChatFormActionAddMcpServersSubmenu onMcpSettingsClick={handleMcpSettingsClick} />
 158
 159                         {#each ATTACHMENT_MCP_ITEMS as item (item.id)}
 160                                 {#if attachmentMenu.isItemVisible(item.visibleWhen)}
 161                                         <DropdownMenu.Item
 162                                                 class="flex cursor-pointer items-center gap-2"
 163                                                 onclick={() => attachmentMenu.callbacks[item.action]()}
 164                                         >
 165                                                 <item.icon class="h-4 w-4" />
 166
 167                                                 <span>{item.label}</span>
 168                                         </DropdownMenu.Item>
 169                                 {/if}
 170                         {/each}
 171                 </DropdownMenu.Content>
 172         </DropdownMenu.Root>
 173 </div>