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

   1 <script lang="ts">
   2         import { Plus, MessageSquare, Zap, FolderOpen } from '@lucide/svelte';
   3         import { Button } from '$lib/components/ui/button';
   4         import * as Sheet from '$lib/components/ui/sheet';
   5         import { FILE_TYPE_ICONS } from '$lib/constants';
   6         import { McpLogo } from '$lib/components/app';
   7
   8         interface Props {
   9                 class?: string;
  10                 disabled?: boolean;
  11                 hasAudioModality?: boolean;
  12                 hasVisionModality?: boolean;
  13                 hasMcpPromptsSupport?: boolean;
  14                 hasMcpResourcesSupport?: boolean;
  15                 onFileUpload?: () => void;
  16                 onSystemPromptClick?: () => void;
  17                 onMcpPromptClick?: () => void;
  18                 onMcpSettingsClick?: () => void;
  19                 onMcpResourcesClick?: () => void;
  20         }
  21
  22         let {
  23                 class: className = '',
  24                 disabled = false,
  25                 hasAudioModality = false,
  26                 hasVisionModality = false,
  27                 hasMcpPromptsSupport = false,
  28                 hasMcpResourcesSupport = false,
  29                 onFileUpload,
  30                 onSystemPromptClick,
  31                 onMcpPromptClick,
  32                 onMcpSettingsClick,
  33                 onMcpResourcesClick
  34         }: Props = $props();
  35
  36         let sheetOpen = $state(false);
  37
  38         function handleMcpPromptClick() {
  39                 sheetOpen = false;
  40                 onMcpPromptClick?.();
  41         }
  42
  43         function handleMcpSettingsClick() {
  44                 onMcpSettingsClick?.();
  45         }
  46
  47         function handleMcpResourcesClick() {
  48                 sheetOpen = false;
  49                 onMcpResourcesClick?.();
  50         }
  51
  52         function handleSheetFileUpload() {
  53                 sheetOpen = false;
  54                 onFileUpload?.();
  55         }
  56
  57         function handleSheetSystemPromptClick() {
  58                 sheetOpen = false;
  59                 onSystemPromptClick?.();
  60         }
  61
  62         const fileUploadTooltipText = 'Add files, system prompt or MCP Servers';
  63
  64         const sheetItemClass =
  65                 'flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left text-sm transition-colors hover:bg-accent active:bg-accent disabled:cursor-not-allowed disabled:opacity-50';
  66 </script>
  67
  68 <div class="flex items-center gap-1 {className}">
  69         <Sheet.Root bind:open={sheetOpen}>
  70                 <Button
  71                         class="file-upload-button h-8 w-8 rounded-full p-0"
  72                         {disabled}
  73                         variant="secondary"
  74                         type="button"
  75                         onclick={() => (sheetOpen = true)}
  76                 >
  77                         <span class="sr-only">{fileUploadTooltipText}</span>
  78
  79                         <Plus class="h-4 w-4" />
  80                 </Button>
  81
  82                 <Sheet.Content side="bottom" class="max-h-[85vh] gap-0">
  83                         <Sheet.Header>
  84                                 <Sheet.Title>Add to chat</Sheet.Title>
  85
  86                                 <Sheet.Description class="sr-only">
  87                                         Add files, system prompt or configure MCP servers
  88                                 </Sheet.Description>
  89                         </Sheet.Header>
  90
  91                         <div class="flex flex-col gap-1 overflow-y-auto px-1.5 pb-2">
  92                                 <!-- Images -->
  93                                 <button
  94                                         type="button"
  95                                         class={sheetItemClass}
  96                                         disabled={!hasVisionModality}
  97                                         onclick={handleSheetFileUpload}
  98                                 >
  99                                         <FILE_TYPE_ICONS.image class="h-4 w-4 shrink-0" />
 100
 101                                         <span>Images</span>
 102
 103                                         {#if !hasVisionModality}
 104                                                 <span class="ml-auto text-xs text-muted-foreground">Requires vision model</span>
 105                                         {/if}
 106                                 </button>
 107
 108                                 <!-- Audio -->
 109                                 <button
 110                                         type="button"
 111                                         class={sheetItemClass}
 112                                         disabled={!hasAudioModality}
 113                                         onclick={handleSheetFileUpload}
 114                                 >
 115                                         <FILE_TYPE_ICONS.audio class="h-4 w-4 shrink-0" />
 116
 117                                         <span>Audio Files</span>
 118
 119                                         {#if !hasAudioModality}
 120                                                 <span class="ml-auto text-xs text-muted-foreground">Requires audio model</span>
 121                                         {/if}
 122                                 </button>
 123
 124                                 <button type="button" class={sheetItemClass} onclick={handleSheetFileUpload}>
 125                                         <FILE_TYPE_ICONS.text class="h-4 w-4 shrink-0" />
 126
 127                                         <span>Text Files</span>
 128                                 </button>
 129
 130                                 <button type="button" class={sheetItemClass} onclick={handleSheetFileUpload}>
 131                                         <FILE_TYPE_ICONS.pdf class="h-4 w-4 shrink-0" />
 132
 133                                         <span>PDF Files</span>
 134
 135                                         {#if !hasVisionModality}
 136                                                 <span class="ml-auto text-xs text-muted-foreground">Text-only</span>
 137                                         {/if}
 138                                 </button>
 139
 140                                 <button type="button" class={sheetItemClass} onclick={handleSheetSystemPromptClick}>
 141                                         <MessageSquare class="h-4 w-4 shrink-0" />
 142
 143                                         <span>System Message</span>
 144                                 </button>
 145
 146                                 <button type="button" class={sheetItemClass} onclick={handleMcpSettingsClick}>
 147                                         <McpLogo class="h-4 w-4 shrink-0" />
 148
 149                                         <span>MCP Servers</span>
 150                                 </button>
 151
 152                                 {#if hasMcpPromptsSupport}
 153                                         <button type="button" class={sheetItemClass} onclick={handleMcpPromptClick}>
 154                                                 <Zap class="h-4 w-4 shrink-0" />
 155
 156                                                 <span>MCP Prompt</span>
 157                                         </button>
 158                                 {/if}
 159
 160                                 {#if hasMcpResourcesSupport}
 161                                         <button type="button" class={sheetItemClass} onclick={handleMcpResourcesClick}>
 162                                                 <FolderOpen class="h-4 w-4 shrink-0" />
 163
 164                                                 <span>MCP Resources</span>
 165                                         </button>
 166                                 {/if}
 167                         </div>
 168                 </Sheet.Content>
 169         </Sheet.Root>
 170 </div>