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

   1 <script lang="ts">
   2         import { ActionIcon, ChatMessageEditForm, ChatMessageUserBubble } from '$lib/components/app';
   3         import { fadeInView } from '$lib/actions/fade-in-view.svelte';
   4         import { ArrowUp, Edit, Trash2 } from '@lucide/svelte';
   5         import { getProcessingInfoContext } from '$lib/contexts';
   6         import { useMessageEditContext } from '$lib/hooks/use-message-edit-context.svelte';
   7
   8         interface Props {
   9                 class?: string;
  10                 content: string;
  11                 extras?: DatabaseMessageExtra[];
  12                 onSendImmediately: () => void;
  13                 onEdit: (newContent: string, extras?: DatabaseMessageExtra[]) => void;
  14                 onDelete: () => void;
  15         }
  16
  17         let {
  18                 class: className = '',
  19                 content,
  20                 extras = [],
  21                 onSendImmediately,
  22                 onEdit,
  23                 onDelete
  24         }: Props = $props();
  25
  26         const processingInfoCtx = getProcessingInfoContext();
  27         let showProcessingInfo = $derived(processingInfoCtx.showProcessingInfo);
  28
  29         const editCtx = useMessageEditContext({
  30                 getContent: () => content,
  31                 getExtras: () => extras,
  32                 onSave: (content, extras) => onEdit(content, extras)
  33         });
  34 </script>
  35
  36 <div
  37         use:fadeInView
  38         aria-label="Pending user message"
  39         class="group flex flex-col items-end gap-3 transition-opacity hover:opacity-80 md:gap-2 {className} sticky {showProcessingInfo
  40                 ? 'bottom-44'
  41                 : 'bottom-32'}"
  42         role="group"
  43 >
  44         {#if editCtx.isEditing}
  45                 <ChatMessageEditForm />
  46         {:else}
  47                 <ChatMessageUserBubble
  48                         {content}
  49                         attachments={extras}
  50                         textColorClass="text-muted-foreground"
  51                         cardBgClass="dark:bg-primary/8"
  52                         maxHeightStyle="overflow-wrap: anywhere; word-break: break-word;"
  53                 />
  54
  55                 <div class="max-w-[80%]">
  56                         <div class="relative flex h-6 items-center justify-between">
  57                                 <div class="right-0 flex items-center gap-2 opacity-100 transition-opacity">
  58                                         <div
  59                                                 class="pointer-events-auto inset-0 flex items-center gap-1 opacity-0 transition-all duration-150 group-focus-within:opacity-100 group-hover:opacity-100"
  60                                         >
  61                                                 <ActionIcon icon={Edit} tooltip="Edit" onclick={editCtx.handleEdit} />
  62                                                 <ActionIcon icon={Trash2} tooltip="Delete" onclick={onDelete} />
  63                                                 <ActionIcon icon={ArrowUp} tooltip="Send immediately" onclick={onSendImmediately} />
  64                                         </div>
  65                                 </div>
  66                         </div>
  67                 </div>
  68         {/if}
  69 </div>