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

   1 <script lang="ts">
   2         import { Check, X } from '@lucide/svelte';
   3         import { ChatMessageActionIcons, MarkdownContent } from '$lib/components/app';
   4         import { Button } from '$lib/components/ui/button';
   5         import { Card } from '$lib/components/ui/card';
   6         import { INPUT_CLASSES } from '$lib/constants';
   7         import { getMessageEditContext } from '$lib/contexts';
   8         import { KeyboardKey, MessageRole } from '$lib/enums';
   9         import { config } from '$lib/stores/settings.svelte';
  10         import { isIMEComposing } from '$lib/utils';
  11
  12         interface Props {
  13                 class?: string;
  14                 message: DatabaseMessage;
  15                 siblingInfo?: ChatMessageSiblingInfo | null;
  16                 showDeleteDialog: boolean;
  17                 deletionInfo: {
  18                         totalCount: number;
  19                         userMessages: number;
  20                         assistantMessages: number;
  21                         messageTypes: string[];
  22                 } | null;
  23                 onCopy: () => void;
  24                 onEdit: () => void;
  25                 onDelete: () => void;
  26                 onConfirmDelete: () => void;
  27                 onNavigateToSibling?: (siblingId: string) => void;
  28                 onShowDeleteDialogChange: (show: boolean) => void;
  29                 textareaElement?: HTMLTextAreaElement;
  30         }
  31
  32         let {
  33                 class: className = '',
  34                 message,
  35                 siblingInfo = null,
  36                 showDeleteDialog,
  37                 deletionInfo,
  38                 onCopy,
  39                 onEdit,
  40                 onDelete,
  41                 onConfirmDelete,
  42                 onNavigateToSibling,
  43                 onShowDeleteDialogChange,
  44                 textareaElement = $bindable()
  45         }: Props = $props();
  46
  47         const editCtx = getMessageEditContext();
  48
  49         function handleEditKeydown(event: KeyboardEvent) {
  50                 if (event.key === KeyboardKey.ENTER && !event.shiftKey && !isIMEComposing(event)) {
  51                         event.preventDefault();
  52
  53                         editCtx.save();
  54                 } else if (event.key === KeyboardKey.ESCAPE) {
  55                         event.preventDefault();
  56
  57                         editCtx.cancel();
  58                 }
  59         }
  60
  61         let isMultiline = $state(false);
  62         let messageElement: HTMLElement | undefined = $state();
  63         let isExpanded = $state(false);
  64         let contentHeight = $state(0);
  65
  66         const MAX_HEIGHT = 200; // pixels
  67         const currentConfig = config();
  68
  69         let showExpandButton = $derived(contentHeight > MAX_HEIGHT);
  70
  71         $effect(() => {
  72                 if (!messageElement || !message.content.trim()) return;
  73
  74                 if (message.content.includes('\n')) {
  75                         isMultiline = true;
  76                 }
  77
  78                 const resizeObserver = new ResizeObserver((entries) => {
  79                         for (const entry of entries) {
  80                                 const element = entry.target as HTMLElement;
  81                                 const estimatedSingleLineHeight = 24;
  82
  83                                 isMultiline = element.offsetHeight > estimatedSingleLineHeight * 1.5;
  84                                 contentHeight = element.scrollHeight;
  85                         }
  86                 });
  87
  88                 resizeObserver.observe(messageElement);
  89
  90                 return () => {
  91                         resizeObserver.disconnect();
  92                 };
  93         });
  94
  95         function toggleExpand() {
  96                 isExpanded = !isExpanded;
  97         }
  98 </script>
  99
 100 <div
 101         aria-label="System message with actions"
 102         class="group flex flex-col items-end gap-3 md:gap-2 {className}"
 103         role="group"
 104 >
 105         {#if editCtx.isEditing}
 106                 <div class="w-full max-w-[80%]">
 107                         <textarea
 108                                 bind:this={textareaElement}
 109                                 value={editCtx.editedContent}
 110                                 class="min-h-[60px] w-full resize-none rounded-2xl px-3 py-2 text-sm {INPUT_CLASSES}"
 111                                 onkeydown={handleEditKeydown}
 112                                 oninput={(e) => editCtx.setContent(e.currentTarget.value)}
 113                                 placeholder="Edit system message..."
 114                         ></textarea>
 115
 116                         <div class="mt-2 flex justify-end gap-2">
 117                                 <Button class="h-8 px-3" onclick={editCtx.cancel} size="sm" variant="outline">
 118                                         <X class="mr-1 h-3 w-3" />
 119
 120                                         Cancel
 121                                 </Button>
 122
 123                                 <Button
 124                                         class="h-8 px-3"
 125                                         onclick={editCtx.save}
 126                                         disabled={!editCtx.editedContent.trim()}
 127                                         size="sm"
 128                                 >
 129                                         <Check class="mr-1 h-3 w-3" />
 130
 131                                         Save
 132                                 </Button>
 133                         </div>
 134                 </div>
 135         {:else}
 136                 {#if message.content.trim()}
 137                         <div class="relative max-w-[80%]">
 138                                 <button
 139                                         class="group/expand w-full text-left {!isExpanded && showExpandButton
 140                                                 ? 'cursor-pointer'
 141                                                 : 'cursor-auto'}"
 142                                         onclick={showExpandButton && !isExpanded ? toggleExpand : undefined}
 143                                         type="button"
 144                                 >
 145                                         <Card
 146                                                 class="overflow-y-auto rounded-[1.125rem] !border-2 !border-dashed !border-border/50 bg-muted px-3.75 py-1.5 data-[multiline]:py-2.5"
 147                                                 data-multiline={isMultiline ? '' : undefined}
 148                                                 style="border: 2px dashed hsl(var(--border)); max-height: var(--max-message-height); overflow-wrap: anywhere; word-break: break-word;"
 149                                         >
 150                                                 <div
 151                                                         class="relative transition-all duration-300 {isExpanded
 152                                                                 ? 'cursor-text select-text'
 153                                                                 : 'select-none'}"
 154                                                         style={!isExpanded && showExpandButton
 155                                                                 ? `max-height: ${MAX_HEIGHT}px;`
 156                                                                 : 'max-height: none;'}
 157                                                 >
 158                                                         {#if currentConfig.renderUserContentAsMarkdown}
 159                                                                 <div bind:this={messageElement} class={isExpanded ? 'cursor-text' : ''}>
 160                                                                         <MarkdownContent
 161                                                                                 class="markdown-system-content -my-4"
 162                                                                                 content={message.content}
 163                                                                         />
 164                                                                 </div>
 165                                                         {:else}
 166                                                                 <span
 167                                                                         bind:this={messageElement}
 168                                                                         class="text-md whitespace-pre-wrap {isExpanded ? 'cursor-text' : ''}"
 169                                                                 >
 170                                                                         {message.content}
 171                                                                 </span>
 172                                                         {/if}
 173
 174                                                         {#if !isExpanded && showExpandButton}
 175                                                                 <div
 176                                                                         class="pointer-events-none absolute right-0 bottom-0 left-0 h-48 bg-gradient-to-t from-muted to-transparent"
 177                                                                 ></div>
 178
 179                                                                 <div
 180                                                                         class="pointer-events-none absolute right-0 bottom-4 left-0 flex justify-center opacity-0 transition-opacity group-hover/expand:opacity-100"
 181                                                                 >
 182                                                                         <Button
 183                                                                                 class="rounded-full px-4 py-1.5 text-xs shadow-md"
 184                                                                                 size="sm"
 185                                                                                 variant="outline"
 186                                                                         >
 187                                                                                 Show full system message
 188                                                                         </Button>
 189                                                                 </div>
 190                                                         {/if}
 191                                                 </div>
 192
 193                                                 {#if isExpanded && showExpandButton}
 194                                                         <div class="mb-2 flex justify-center">
 195                                                                 <Button
 196                                                                         class="rounded-full px-4 py-1.5 text-xs"
 197                                                                         onclick={(e) => {
 198                                                                                 e.stopPropagation();
 199                                                                                 toggleExpand();
 200                                                                         }}
 201                                                                         size="sm"
 202                                                                         variant="outline"
 203                                                                 >
 204                                                                         Collapse System Message
 205                                                                 </Button>
 206                                                         </div>
 207                                                 {/if}
 208                                         </Card>
 209                                 </button>
 210                         </div>
 211                 {/if}
 212
 213                 {#if message.timestamp}
 214                         <div class="max-w-[80%]">
 215                                 <ChatMessageActionIcons
 216                                         actionsPosition="right"
 217                                         {deletionInfo}
 218                                         justify="end"
 219                                         {onConfirmDelete}
 220                                         {onCopy}
 221                                         {onDelete}
 222                                         {onEdit}
 223                                         {onNavigateToSibling}
 224                                         {onShowDeleteDialogChange}
 225                                         {siblingInfo}
 226                                         {showDeleteDialog}
 227                                         role={MessageRole.USER}
 228                                 />
 229                         </div>
 230                 {/if}
 231         {/if}
 232 </div>