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

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