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