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

   1 <script lang="ts">
   2         import { page } from '$app/state';
   3         import { Plus, MessageSquare } from '@lucide/svelte';
   4         import { Button } from '$lib/components/ui/button';
   5         import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
   6         import * as Tooltip from '$lib/components/ui/tooltip';
   7         import { FILE_TYPE_ICONS } from '$lib/constants/icons';
   8         import { TOOLTIP_DELAY_DURATION } from '$lib/constants/tooltip-config';
   9
  10         interface Props {
  11                 class?: string;
  12                 disabled?: boolean;
  13                 hasAudioModality?: boolean;
  14                 hasVisionModality?: boolean;
  15                 onFileUpload?: () => void;
  16                 onSystemPromptClick?: () => void;
  17         }
  18
  19         let {
  20                 class: className = '',
  21                 disabled = false,
  22                 hasAudioModality = false,
  23                 hasVisionModality = false,
  24                 onFileUpload,
  25                 onSystemPromptClick
  26         }: Props = $props();
  27
  28         let isNewChat = $derived(!page.params.id);
  29
  30         let systemMessageTooltip = $derived(
  31                 isNewChat
  32                         ? 'Add custom system message for a new conversation'
  33                         : 'Inject custom system message at the beginning of the conversation'
  34         );
  35
  36         let dropdownOpen = $state(false);
  37
  38         const fileUploadTooltipText = 'Add files, system prompt or MCP Servers';
  39 </script>
  40
  41 <div class="flex items-center gap-1 {className}">
  42         <DropdownMenu.Root bind:open={dropdownOpen}>
  43                 <DropdownMenu.Trigger name="Attach files" {disabled}>
  44                         <Tooltip.Root>
  45                                 <Tooltip.Trigger class="w-full">
  46                                         <Button
  47                                                 class="file-upload-button h-8 w-8 rounded-full p-0"
  48                                                 {disabled}
  49                                                 variant="secondary"
  50                                                 type="button"
  51                                         >
  52                                                 <span class="sr-only">{fileUploadTooltipText}</span>
  53
  54                                                 <Plus class="h-4 w-4" />
  55                                         </Button>
  56                                 </Tooltip.Trigger>
  57
  58                                 <Tooltip.Content>
  59                                         <p>{fileUploadTooltipText}</p>
  60                                 </Tooltip.Content>
  61                         </Tooltip.Root>
  62                 </DropdownMenu.Trigger>
  63
  64                 <DropdownMenu.Content align="start" class="w-48">
  65                         {#if hasVisionModality}
  66                                 <DropdownMenu.Item
  67                                         class="images-button flex cursor-pointer items-center gap-2"
  68                                         onclick={() => onFileUpload?.()}
  69                                 >
  70                                         <FILE_TYPE_ICONS.image class="h-4 w-4" />
  71
  72                                         <span>Images</span>
  73                                 </DropdownMenu.Item>
  74                         {:else}
  75                                 <Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
  76                                         <Tooltip.Trigger class="w-full">
  77                                                 <DropdownMenu.Item
  78                                                         class="images-button flex cursor-pointer items-center gap-2"
  79                                                         disabled
  80                                                 >
  81                                                         <FILE_TYPE_ICONS.image class="h-4 w-4" />
  82
  83                                                         <span>Images</span>
  84                                                 </DropdownMenu.Item>
  85                                         </Tooltip.Trigger>
  86
  87                                         <Tooltip.Content side="right">
  88                                                 <p>Images require vision models to be processed</p>
  89                                         </Tooltip.Content>
  90                                 </Tooltip.Root>
  91                         {/if}
  92
  93                         {#if hasAudioModality}
  94                                 <DropdownMenu.Item
  95                                         class="audio-button flex cursor-pointer items-center gap-2"
  96                                         onclick={() => onFileUpload?.()}
  97                                 >
  98                                         <FILE_TYPE_ICONS.audio class="h-4 w-4" />
  99
 100                                         <span>Audio Files</span>
 101                                 </DropdownMenu.Item>
 102                         {:else}
 103                                 <Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
 104                                         <Tooltip.Trigger class="w-full">
 105                                                 <DropdownMenu.Item class="audio-button flex cursor-pointer items-center gap-2" disabled>
 106                                                         <FILE_TYPE_ICONS.audio class="h-4 w-4" />
 107
 108                                                         <span>Audio Files</span>
 109                                                 </DropdownMenu.Item>
 110                                         </Tooltip.Trigger>
 111
 112                                         <Tooltip.Content side="right">
 113                                                 <p>Audio files require audio models to be processed</p>
 114                                         </Tooltip.Content>
 115                                 </Tooltip.Root>
 116                         {/if}
 117
 118                         <DropdownMenu.Item
 119                                 class="flex cursor-pointer items-center gap-2"
 120                                 onclick={() => onFileUpload?.()}
 121                         >
 122                                 <FILE_TYPE_ICONS.text class="h-4 w-4" />
 123
 124                                 <span>Text Files</span>
 125                         </DropdownMenu.Item>
 126
 127                         {#if hasVisionModality}
 128                                 <DropdownMenu.Item
 129                                         class="flex cursor-pointer items-center gap-2"
 130                                         onclick={() => onFileUpload?.()}
 131                                 >
 132                                         <FILE_TYPE_ICONS.pdf class="h-4 w-4" />
 133
 134                                         <span>PDF Files</span>
 135                                 </DropdownMenu.Item>
 136                         {:else}
 137                                 <Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
 138                                         <Tooltip.Trigger class="w-full">
 139                                                 <DropdownMenu.Item
 140                                                         class="flex cursor-pointer items-center gap-2"
 141                                                         onclick={() => onFileUpload?.()}
 142                                                 >
 143                                                         <FILE_TYPE_ICONS.pdf class="h-4 w-4" />
 144
 145                                                         <span>PDF Files</span>
 146                                                 </DropdownMenu.Item>
 147                                         </Tooltip.Trigger>
 148
 149                                         <Tooltip.Content side="right">
 150                                                 <p>PDFs will be converted to text. Image-based PDFs may not work properly.</p>
 151                                         </Tooltip.Content>
 152                                 </Tooltip.Root>
 153                         {/if}
 154
 155                         <Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
 156                                 <Tooltip.Trigger class="w-full">
 157                                         <DropdownMenu.Item
 158                                                 class="flex cursor-pointer items-center gap-2"
 159                                                 onclick={() => onSystemPromptClick?.()}
 160                                         >
 161                                                 <MessageSquare class="h-4 w-4" />
 162
 163                                                 <span>System Message</span>
 164                                         </DropdownMenu.Item>
 165                                 </Tooltip.Trigger>
 166
 167                                 <Tooltip.Content side="right">
 168                                         <p>{systemMessageTooltip}</p>
 169                                 </Tooltip.Content>
 170                         </Tooltip.Root>
 171                 </DropdownMenu.Content>
 172         </DropdownMenu.Root>
 173 </div>