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

   1 <script lang="ts">
   2         import { Paperclip } from '@lucide/svelte';
   3         import { Button } from '$lib/components/ui/button';
   4         import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
   5         import * as Tooltip from '$lib/components/ui/tooltip';
   6         import { FILE_TYPE_ICONS } from '$lib/constants/icons';
   7
   8         interface Props {
   9                 class?: string;
  10                 disabled?: boolean;
  11                 hasAudioModality?: boolean;
  12                 hasVisionModality?: boolean;
  13                 onFileUpload?: () => void;
  14         }
  15
  16         let {
  17                 class: className = '',
  18                 disabled = false,
  19                 hasAudioModality = false,
  20                 hasVisionModality = false,
  21                 onFileUpload
  22         }: Props = $props();
  23
  24         const fileUploadTooltipText = $derived.by(() => {
  25                 return !hasVisionModality
  26                         ? 'Text files and PDFs supported. Images, audio, and video require vision models.'
  27                         : 'Attach files';
  28         });
  29 </script>
  30
  31 <div class="flex items-center gap-1 {className}">
  32         <DropdownMenu.Root>
  33                 <DropdownMenu.Trigger name="Attach files" {disabled}>
  34                         <Tooltip.Root>
  35                                 <Tooltip.Trigger>
  36                                         <Button
  37                                                 class="file-upload-button h-8 w-8 rounded-full bg-transparent p-0 text-muted-foreground hover:bg-foreground/10 hover:text-foreground"
  38                                                 {disabled}
  39                                                 type="button"
  40                                         >
  41                                                 <span class="sr-only">Attach files</span>
  42
  43                                                 <Paperclip class="h-4 w-4" />
  44                                         </Button>
  45                                 </Tooltip.Trigger>
  46
  47                                 <Tooltip.Content>
  48                                         <p>{fileUploadTooltipText}</p>
  49                                 </Tooltip.Content>
  50                         </Tooltip.Root>
  51                 </DropdownMenu.Trigger>
  52
  53                 <DropdownMenu.Content align="start" class="w-48">
  54                         <Tooltip.Root>
  55                                 <Tooltip.Trigger class="w-full">
  56                                         <DropdownMenu.Item
  57                                                 class="images-button flex cursor-pointer items-center gap-2"
  58                                                 disabled={!hasVisionModality}
  59                                                 onclick={() => onFileUpload?.()}
  60                                         >
  61                                                 <FILE_TYPE_ICONS.image class="h-4 w-4" />
  62
  63                                                 <span>Images</span>
  64                                         </DropdownMenu.Item>
  65                                 </Tooltip.Trigger>
  66
  67                                 {#if !hasVisionModality}
  68                                         <Tooltip.Content>
  69                                                 <p>Images require vision models to be processed</p>
  70                                         </Tooltip.Content>
  71                                 {/if}
  72                         </Tooltip.Root>
  73
  74                         <Tooltip.Root>
  75                                 <Tooltip.Trigger class="w-full">
  76                                         <DropdownMenu.Item
  77                                                 class="audio-button flex cursor-pointer items-center gap-2"
  78                                                 disabled={!hasAudioModality}
  79                                                 onclick={() => onFileUpload?.()}
  80                                         >
  81                                                 <FILE_TYPE_ICONS.audio class="h-4 w-4" />
  82
  83                                                 <span>Audio Files</span>
  84                                         </DropdownMenu.Item>
  85                                 </Tooltip.Trigger>
  86
  87                                 {#if !hasAudioModality}
  88                                         <Tooltip.Content>
  89                                                 <p>Audio files require audio models to be processed</p>
  90                                         </Tooltip.Content>
  91                                 {/if}
  92                         </Tooltip.Root>
  93
  94                         <DropdownMenu.Item
  95                                 class="flex cursor-pointer items-center gap-2"
  96                                 onclick={() => onFileUpload?.()}
  97                         >
  98                                 <FILE_TYPE_ICONS.text class="h-4 w-4" />
  99
 100                                 <span>Text Files</span>
 101                         </DropdownMenu.Item>
 102
 103                         <Tooltip.Root>
 104                                 <Tooltip.Trigger class="w-full">
 105                                         <DropdownMenu.Item
 106                                                 class="flex cursor-pointer items-center gap-2"
 107                                                 onclick={() => onFileUpload?.()}
 108                                         >
 109                                                 <FILE_TYPE_ICONS.pdf class="h-4 w-4" />
 110
 111                                                 <span>PDF Files</span>
 112                                         </DropdownMenu.Item>
 113                                 </Tooltip.Trigger>
 114
 115                                 {#if !hasVisionModality}
 116                                         <Tooltip.Content>
 117                                                 <p>PDFs will be converted to text. Image-based PDFs may not work properly.</p>
 118                                         </Tooltip.Content>
 119                                 {/if}
 120                         </Tooltip.Root>
 121                 </DropdownMenu.Content>
 122         </DropdownMenu.Root>
 123 </div>