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

   1 <script lang="ts">
   2         import {
   3                 ChatMessageActionIcons,
   4                 ChatMessageEditForm,
   5                 ChatMessageStatistics,
   6                 ChatMessageUserBubble
   7         } from '$lib/components/app/chat';
   8         import { getMessageEditContext } from '$lib/contexts';
   9         import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
  10         import { isLoading } from '$lib/stores/chat.svelte';
  11         import { MessageRole, ChatMessageStatisticsMode } from '$lib/enums';
  12         import { config } from '$lib/stores/settings.svelte';
  13
  14         interface Props {
  15                 class?: string;
  16                 message: DatabaseMessage;
  17                 siblingInfo?: ChatMessageSiblingInfo | null;
  18                 deletionInfo: {
  19                         totalCount: number;
  20                         userMessages: number;
  21                         assistantMessages: number;
  22                         messageTypes: string[];
  23                 } | null;
  24                 isLastUserMessage?: boolean;
  25                 nextAssistantMessage?: DatabaseMessage | null;
  26                 showDeleteDialog: boolean;
  27                 onEdit: () => void;
  28                 onDelete: () => void;
  29                 onConfirmDelete: () => void;
  30                 onForkConversation?: (options: { name: string; includeAttachments: boolean }) => void;
  31                 onShowDeleteDialogChange: (show: boolean) => void;
  32                 onNavigateToSibling?: (siblingId: string) => void;
  33                 onCopy: () => void;
  34         }
  35
  36         let {
  37                 class: className = '',
  38                 message,
  39                 siblingInfo = null,
  40                 deletionInfo,
  41                 isLastUserMessage = false,
  42                 nextAssistantMessage = null,
  43                 showDeleteDialog,
  44                 onEdit,
  45                 onDelete,
  46                 onConfirmDelete,
  47                 onForkConversation,
  48                 onShowDeleteDialogChange,
  49                 onNavigateToSibling,
  50                 onCopy
  51         }: Props = $props();
  52
  53         // Get contexts
  54         const editCtx = getMessageEditContext();
  55         const processingState = useProcessingState();
  56
  57         const currentConfig = $derived(config());
  58         const isActivelyProcessing = $derived(isLastUserMessage && isLoading());
  59
  60         // For agentic turns, prefer the cumulative agentic.llm totals over per-call timings.
  61         let storedReadingStats = $derived.by(() => {
  62                 const timings = nextAssistantMessage?.timings;
  63                 if (!timings?.prompt_n || !timings?.prompt_ms) return null;
  64
  65                 const agentic = timings.agentic;
  66
  67                 return {
  68                         promptTokens: agentic ? agentic.llm.prompt_n : timings.prompt_n,
  69                         promptMs: agentic ? agentic.llm.prompt_ms : timings.prompt_ms
  70                 };
  71         });
  72
  73         let showStoredReadingStats = $derived(
  74                 Boolean(currentConfig.showMessageStats) && storedReadingStats !== null
  75         );
  76
  77         let showLiveReadingStats = $derived(
  78                 Boolean(currentConfig.showMessageStats) && isActivelyProcessing && storedReadingStats === null
  79         );
  80
  81         $effect(() => {
  82                 if (showLiveReadingStats) {
  83                         processingState.startMonitoring();
  84                 }
  85         });
  86 </script>
  87
  88 <div
  89         aria-label="User message with actions"
  90         class="chat-message-user group flex flex-col items-end gap-3 md:gap-2 {className}"
  91         role="group"
  92 >
  93         {#if editCtx.isEditing}
  94                 <ChatMessageEditForm />
  95         {:else}
  96                 <ChatMessageUserBubble
  97                         content={message.content}
  98                         attachments={message.extra}
  99                         renderMarkdown={true}
 100                 />
 101
 102                 {#if showStoredReadingStats}
 103                         <!-- Reading stats sourced from the assistant message that followed this turn -->
 104                         <div class="info my-2 grid w-full justify-items-end gap-4 tabular-nums">
 105                                 <div
 106                                         class="inline-flex flex-wrap items-start justify-end gap-2 text-xs text-muted-foreground"
 107                                 >
 108                                         <ChatMessageStatistics
 109                                                 mode={ChatMessageStatisticsMode.READING}
 110                                                 promptTokens={storedReadingStats!.promptTokens}
 111                                                 promptMs={storedReadingStats!.promptMs}
 112                                         />
 113                                 </div>
 114                         </div>
 115                 {:else if showLiveReadingStats}
 116                         {@const liveStats = processingState.getLiveProcessingStats()}
 117                         {#if liveStats}
 118                                 <div class="info my-2 grid w-full justify-items-end gap-4 tabular-nums">
 119                                         <div
 120                                                 class="inline-flex flex-wrap items-start justify-end gap-2 text-xs text-muted-foreground"
 121                                         >
 122                                                 <ChatMessageStatistics
 123                                                         mode={ChatMessageStatisticsMode.READING}
 124                                                         isLive
 125                                                         promptTokens={liveStats.tokensProcessed}
 126                                                         promptMs={liveStats.timeMs}
 127                                                 />
 128                                         </div>
 129                                 </div>
 130                         {/if}
 131                 {/if}
 132
 133                 {#if message.timestamp}
 134                         <div class="max-w-[80%]">
 135                                 <ChatMessageActionIcons
 136                                         actionsPosition="right"
 137                                         {deletionInfo}
 138                                         justify="end"
 139                                         {onConfirmDelete}
 140                                         {onCopy}
 141                                         {onDelete}
 142                                         {onEdit}
 143                                         {onForkConversation}
 144                                         {onNavigateToSibling}
 145                                         {onShowDeleteDialogChange}
 146                                         {siblingInfo}
 147                                         {showDeleteDialog}
 148                                         role={MessageRole.USER}
 149                                 />
 150                         </div>
 151                 {/if}
 152         {/if}
 153 </div>