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

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