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