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

   1 <script lang="ts">
   2         import { X, Music, Video } from '@lucide/svelte';
   3         import {
   4                 formatFileSize,
   5                 getFileTypeLabel,
   6                 getPreviewText,
   7                 isPdfFile,
   8                 isAudioFile,
   9                 isVideoFile,
  10                 isTextFile
  11         } from '$lib/utils';
  12         import { ActionIcon } from '$lib/components/app';
  13         import { AttachmentType } from '$lib/enums';
  14
  15         interface Props {
  16                 attachment?: DatabaseMessageExtra;
  17                 class?: string;
  18                 id: string;
  19                 onclick?: (event: MouseEvent) => void;
  20                 onRemove?: (id: string) => void;
  21                 name: string;
  22                 readonly?: boolean;
  23                 size?: number;
  24                 textContent?: string;
  25                 // Either uploaded file or stored attachment
  26                 uploadedFile?: ChatUploadedFile;
  27         }
  28
  29         let {
  30                 attachment,
  31                 class: className = '',
  32                 id,
  33                 onclick,
  34                 onRemove,
  35                 name,
  36                 readonly = false,
  37                 size,
  38                 textContent,
  39                 uploadedFile
  40         }: Props = $props();
  41
  42         let isPdf = $derived(isPdfFile(attachment, uploadedFile));
  43         let isAudio = $derived(isAudioFile(attachment, uploadedFile));
  44         let isVideo = $derived(isVideoFile(attachment, uploadedFile));
  45         let isPdfWithContent = $derived(isPdf && !!textContent);
  46
  47         let isText = $derived(isTextFile(attachment, uploadedFile));
  48         let isTextWithContent = $derived(isText && !!textContent);
  49
  50         let fileTypeLabel = $derived.by(() => {
  51                 if (uploadedFile?.type) {
  52                         return getFileTypeLabel(uploadedFile.type);
  53                 }
  54
  55                 if (attachment) {
  56                         if ('mimeType' in attachment && attachment.mimeType) {
  57                                 return getFileTypeLabel(attachment.mimeType);
  58                         }
  59
  60                         if (attachment.type) {
  61                                 return getFileTypeLabel(attachment.type);
  62                         }
  63                 }
  64
  65                 return getFileTypeLabel(name);
  66         });
  67
  68         let pdfProcessingMode = $derived.by(() => {
  69                 if (attachment?.type === AttachmentType.PDF) {
  70                         const pdfAttachment = attachment as DatabaseMessageExtraPdfFile;
  71
  72                         return pdfAttachment.processedAsImages ? 'Sent as Image' : 'Sent as Text';
  73                 }
  74
  75                 return null;
  76         });
  77 </script>
  78
  79 {#snippet textPreview(content: string)}
  80         <div class="relative">
  81                 <div
  82                         class="font-mono text-xs leading-relaxed break-words whitespace-pre-wrap text-muted-foreground {!readonly
  83                                 ? 'max-h-3rem line-height-1.2'
  84                                 : ''}"
  85                 >
  86                         {getPreviewText(content)}
  87                 </div>
  88
  89                 {#if content.length > 150}
  90                         <div
  91                                 class="pointer-events-none absolute right-0 bottom-0 left-0 h-4 bg-gradient-to-t from-muted to-transparent {readonly
  92                                         ? 'h-6'
  93                                         : ''}"
  94                         ></div>
  95                 {/if}
  96         </div>
  97 {/snippet}
  98
  99 {#snippet removeButton()}
 100         <div class="absolute top-2 right-2 opacity-0 transition-opacity group-hover:opacity-100">
 101                 <ActionIcon icon={X} tooltip="Remove" stopPropagationOnClick onclick={() => onRemove?.(id)} />
 102         </div>
 103 {/snippet}
 104
 105 {#snippet fileIcon()}
 106         <div
 107                 class="flex h-8 w-8 items-center justify-center rounded bg-primary/10 text-xs font-medium text-primary"
 108         >
 109                 {#if isAudio}
 110                         <Music class="h-4 w-4 text-white/70" />
 111                 {:else if isVideo}
 112                         <Video class="h-4 w-4 text-white/70" />
 113                 {:else}
 114                         {fileTypeLabel}
 115                 {/if}
 116         </div>
 117 {/snippet}
 118
 119 {#snippet info(text: string | undefined)}
 120         {#if text}
 121                 <span class="text-xs text-muted-foreground">{text}</span>
 122         {/if}
 123 {/snippet}
 124
 125 {#if isTextWithContent || isPdfWithContent}
 126         <button
 127                 aria-label={readonly ? `Preview ${name}` : undefined}
 128                 class="rounded-lg border border-border bg-muted p-3 {className} cursor-pointer {readonly
 129                         ? 'w-full max-w-2xl transition-shadow hover:shadow-md'
 130                         : `group relative text-left ${textContent ? 'max-h-24 max-w-72' : 'max-w-36'}`} overflow-hidden"
 131                 {onclick}
 132                 type="button"
 133         >
 134                 {#if !readonly}
 135                         {@render removeButton()}
 136                 {/if}
 137
 138                 <div class={[!readonly && 'pr-8', 'overflow-hidden']}>
 139                         {#if readonly}
 140                                 <div class="flex items-start gap-3">
 141                                         <div class="flex min-w-0 flex-1 flex-col items-start text-left">
 142                                                 <span class="w-full truncate text-sm font-medium text-foreground">{name}</span>
 143
 144                                                 {@render info(pdfProcessingMode || (size ? formatFileSize(size) : undefined))}
 145
 146                                                 {#if textContent}
 147                                                         {@render textPreview(textContent)}
 148                                                 {/if}
 149                                         </div>
 150                                 </div>
 151                         {:else}
 152                                 <span class="mb-3 block truncate text-sm font-medium text-foreground">{name}</span>
 153
 154                                 {#if textContent}
 155                                         {@render textPreview(textContent)}
 156                                 {/if}
 157                         {/if}
 158                 </div>
 159         </button>
 160 {:else}
 161         <button
 162                 class="group flex items-center gap-3 rounded-lg border border-border bg-muted p-3 {className} relative"
 163                 {onclick}
 164                 type="button"
 165         >
 166                 {@render fileIcon()}
 167
 168                 <div class="flex flex-col items-start gap-0.5">
 169                         <span
 170                                 class="max-w-24 truncate text-sm font-medium text-foreground {readonly
 171                                         ? ''
 172                                         : 'group-hover:pr-6'} md:max-w-32"
 173                         >
 174                                 {name}
 175                         </span>
 176
 177                         {@render info(pdfProcessingMode || (size ? formatFileSize(size) : undefined))}
 178                 </div>
 179
 180                 {#if !readonly}
 181                         {@render removeButton()}
 182                 {/if}
 183         </button>
 184 {/if}