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

   1 <script lang="ts">
   2         import {
   3                 ChatMessageActionIcons,
   4                 ChatMessageEditForm,
   5                 ChatMessageUserBubble
   6         } from '$lib/components/app/chat';
   7         import { getMessageEditContext } from '$lib/contexts';
   8         import { MessageRole } from '$lib/enums';
   9
  10         interface Props {
  11                 class?: string;
  12                 message: DatabaseMessage;
  13                 siblingInfo?: ChatMessageSiblingInfo | null;
  14                 deletionInfo: {
  15                         totalCount: number;
  16                         userMessages: number;
  17                         assistantMessages: number;
  18                         messageTypes: string[];
  19                 } | null;
  20                 showDeleteDialog: boolean;
  21                 onEdit: () => void;
  22                 onDelete: () => void;
  23                 onConfirmDelete: () => void;
  24                 onForkConversation?: (options: { name: string; includeAttachments: boolean }) => void;
  25                 onShowDeleteDialogChange: (show: boolean) => void;
  26                 onNavigateToSibling?: (siblingId: string) => void;
  27                 onCopy: () => void;
  28         }
  29
  30         let {
  31                 class: className = '',
  32                 message,
  33                 siblingInfo = null,
  34                 deletionInfo,
  35                 showDeleteDialog,
  36                 onEdit,
  37                 onDelete,
  38                 onConfirmDelete,
  39                 onForkConversation,
  40                 onShowDeleteDialogChange,
  41                 onNavigateToSibling,
  42                 onCopy
  43         }: Props = $props();
  44
  45         // Get contexts
  46         const editCtx = getMessageEditContext();
  47 </script>
  48
  49 <div
  50         aria-label="User message with actions"
  51         class="chat-message-user group flex flex-col items-end gap-3 md:gap-2 {className}"
  52         role="group"
  53 >
  54         {#if editCtx.isEditing}
  55                 <ChatMessageEditForm />
  56         {:else}
  57                 <ChatMessageUserBubble
  58                         content={message.content}
  59                         attachments={message.extra}
  60                         renderMarkdown={true}
  61                 />
  62
  63                 {#if message.timestamp}
  64                         <div class="max-w-[80%]">
  65                                 <ChatMessageActionIcons
  66                                         actionsPosition="right"
  67                                         {deletionInfo}
  68                                         justify="end"
  69                                         {onConfirmDelete}
  70                                         {onCopy}
  71                                         {onDelete}
  72                                         {onEdit}
  73                                         {onForkConversation}
  74                                         {onNavigateToSibling}
  75                                         {onShowDeleteDialogChange}
  76                                         {siblingInfo}
  77                                         {showDeleteDialog}
  78                                         role={MessageRole.USER}
  79                                 />
  80                         </div>
  81                 {/if}
  82         {/if}
  83 </div>