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