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