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

   1 <script lang="ts">
   2         import {
   3                 ChatMessageAgenticContent,
   4                 ChatMessageActionIcons,
   5                 ChatMessageEditForm,
   6                 ChatMessageStatistics,
   7                 ModelBadge,
   8                 ModelsSelectorDropdown
   9         } from '$lib/components/app';
  10         import { getMessageEditContext } from '$lib/contexts';
  11         import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
  12         import { isLoading, isChatStreaming } from '$lib/stores/chat.svelte';
  13         import { copyToClipboard, deriveAgenticSections, modelLoadProgressText } from '$lib/utils';
  14         import { AgenticSectionType } from '$lib/enums';
  15         import { REASONING_TAGS } from '$lib/constants/agentic';
  16         import { tick } from 'svelte';
  17         import { fade } from 'svelte/transition';
  18         import { MessageRole, ChatMessageStatsView } from '$lib/enums';
  19         import { config } from '$lib/stores/settings.svelte';
  20         import { isRouterMode } from '$lib/stores/server.svelte';
  21         import { modelsStore } from '$lib/stores/models.svelte';
  22         import { ServerModelStatus } from '$lib/enums';
  23
  24         import { hasAgenticContent } from '$lib/utils';
  25
  26         interface Props {
  27                 class?: string;
  28                 deletionInfo: {
  29                         totalCount: number;
  30                         userMessages: number;
  31                         assistantMessages: number;
  32                         messageTypes: string[];
  33                 } | null;
  34                 isLastAssistantMessage?: boolean;
  35                 message: DatabaseMessage;
  36                 toolMessages?: DatabaseMessage[];
  37                 messageContent: string | undefined;
  38                 onCopy: () => void;
  39                 onConfirmDelete: () => void;
  40                 onContinue?: () => void;
  41                 onDelete: () => void;
  42                 onEdit?: () => void;
  43                 onForkConversation?: (options: { name: string; includeAttachments: boolean }) => void;
  44                 onNavigateToSibling?: (siblingId: string) => void;
  45                 onRegenerate: (modelOverride?: string) => void;
  46                 onShowDeleteDialogChange: (show: boolean) => void;
  47                 showDeleteDialog: boolean;
  48                 siblingInfo?: ChatMessageSiblingInfo | null;
  49                 textareaElement?: HTMLTextAreaElement;
  50         }
  51
  52         let {
  53                 class: className = '',
  54                 deletionInfo,
  55                 isLastAssistantMessage = false,
  56                 message,
  57                 toolMessages = [],
  58                 messageContent,
  59                 onConfirmDelete,
  60                 onContinue,
  61                 onCopy,
  62                 onDelete,
  63                 onEdit,
  64                 onForkConversation,
  65                 onNavigateToSibling,
  66                 onRegenerate,
  67                 onShowDeleteDialogChange,
  68                 showDeleteDialog,
  69                 siblingInfo = null,
  70                 textareaElement = $bindable()
  71         }: Props = $props();
  72
  73         // Get edit context
  74         const editCtx = getMessageEditContext();
  75
  76         const isAgentic = $derived(hasAgenticContent(message, toolMessages));
  77         const processingState = useProcessingState();
  78
  79         let currentConfig = $derived(config());
  80         let isRouter = $derived(isRouterMode());
  81         let showRawOutput = $state(false);
  82
  83         let rawOutputContent = $derived.by(() => {
  84                 const sections = deriveAgenticSections(message, toolMessages, [], false);
  85                 const parts: string[] = [];
  86
  87                 for (const section of sections) {
  88                         switch (section.type) {
  89                                 case AgenticSectionType.REASONING:
  90                                 case AgenticSectionType.REASONING_PENDING:
  91                                         parts.push(`${REASONING_TAGS.START}\n${section.content}\n${REASONING_TAGS.END}`);
  92                                         break;
  93
  94                                 case AgenticSectionType.TEXT:
  95                                         parts.push(section.content);
  96                                         break;
  97
  98                                 case AgenticSectionType.TOOL_CALL:
  99                                 case AgenticSectionType.TOOL_CALL_PENDING:
 100                                 case AgenticSectionType.TOOL_CALL_STREAMING: {
 101                                         const callObj: Record<string, unknown> = { name: section.toolName };
 102
 103                                         if (section.toolArgs) {
 104                                                 try {
 105                                                         callObj.arguments = JSON.parse(section.toolArgs);
 106                                                 } catch {
 107                                                         callObj.arguments = section.toolArgs;
 108                                                 }
 109                                         }
 110
 111                                         parts.push(JSON.stringify(callObj, null, 2));
 112
 113                                         if (section.toolResult) {
 114                                                 parts.push(`[Tool Result]\n${section.toolResult}`);
 115                                         }
 116
 117                                         break;
 118                                 }
 119                         }
 120                 }
 121
 122                 return parts.join('\n\n\n');
 123         });
 124
 125         let activeStatsView = $state<ChatMessageStatsView>(ChatMessageStatsView.GENERATION);
 126         let statsContainerEl: HTMLDivElement | undefined = $state();
 127
 128         function getScrollParent(el: HTMLElement): HTMLElement | null {
 129                 let parent = el.parentElement;
 130                 while (parent) {
 131                         const style = getComputedStyle(parent);
 132                         if (/(auto|scroll)/.test(style.overflowY)) {
 133                                 return parent;
 134                         }
 135                         parent = parent.parentElement;
 136                 }
 137                 return null;
 138         }
 139
 140         async function handleStatsViewChange(view: ChatMessageStatsView) {
 141                 const el = statsContainerEl;
 142                 if (!el) {
 143                         activeStatsView = view;
 144
 145                         return;
 146                 }
 147
 148                 const scrollParent = getScrollParent(el);
 149                 if (!scrollParent) {
 150                         activeStatsView = view;
 151
 152                         return;
 153                 }
 154
 155                 const yBefore = el.getBoundingClientRect().top;
 156
 157                 activeStatsView = view;
 158
 159                 await tick();
 160
 161                 const delta = el.getBoundingClientRect().top - yBefore;
 162                 if (delta !== 0) {
 163                         scrollParent.scrollTop += delta;
 164                 }
 165
 166                 // Correct any drift after browser paint
 167                 requestAnimationFrame(() => {
 168                         const drift = el.getBoundingClientRect().top - yBefore;
 169
 170                         if (Math.abs(drift) > 1) {
 171                                 scrollParent.scrollTop += drift;
 172                         }
 173                 });
 174         }
 175
 176         let highlightAgenticTurns = $derived(
 177                 isAgentic &&
 178                         (currentConfig.alwaysShowAgenticTurns || activeStatsView === ChatMessageStatsView.SUMMARY)
 179         );
 180
 181         let displayedModel = $derived(message.model ?? null);
 182
 183         let isCurrentlyLoading = $derived(isLoading());
 184         let isStreaming = $derived(isChatStreaming());
 185         let hasNoContent = $derived(!message?.content?.trim());
 186         let isActivelyProcessing = $derived(isCurrentlyLoading || isStreaming);
 187
 188         // during a router auto-load the message has no model yet, so target the selected one
 189         let loadTargetModel = $derived(message.model ?? modelsStore.selectedModelName);
 190         let modelLoadProgress = $derived(
 191                 isRouter && loadTargetModel ? modelsStore.getLoadProgress(loadTargetModel) : null
 192         );
 193         let modelLoadingText = $derived(modelLoadProgressText(modelLoadProgress));
 194
 195         let showProcessingInfoTop = $derived(
 196                 message?.role === MessageRole.ASSISTANT &&
 197                         isActivelyProcessing &&
 198                         hasNoContent &&
 199                         !isAgentic &&
 200                         isLastAssistantMessage
 201         );
 202
 203         let showProcessingInfoBottom = $derived(
 204                 message?.role === MessageRole.ASSISTANT &&
 205                         isActivelyProcessing &&
 206                         (!hasNoContent || isAgentic) &&
 207                         isLastAssistantMessage
 208         );
 209
 210         function handleCopyModel() {
 211                 void copyToClipboard(displayedModel ?? '');
 212         }
 213
 214         $effect(() => {
 215                 if (showProcessingInfoTop || showProcessingInfoBottom) {
 216                         processingState.startMonitoring();
 217                 }
 218         });
 219 </script>
 220
 221 <div
 222         class="text-md group w-full leading-7.5 {className}"
 223         role="group"
 224         aria-label="Assistant message with actions"
 225 >
 226         {#if showProcessingInfoTop}
 227                 <div class="mt-6 w-full max-w-[48rem]" in:fade>
 228                         <div class="processing-container">
 229                                 <span class="processing-text">
 230                                         {modelLoadingText ??
 231                                                 processingState.getPromptProgressText() ??
 232                                                 processingState.getProcessingMessage() ??
 233                                                 'Processing...'}
 234                                 </span>
 235                         </div>
 236                 </div>
 237         {/if}
 238
 239         {#if editCtx.isEditing}
 240                 <ChatMessageEditForm />
 241         {:else if message.role === MessageRole.ASSISTANT}
 242                 {#if showRawOutput}
 243                         <pre class="raw-output">{rawOutputContent || ''}</pre>
 244                 {:else}
 245                         <ChatMessageAgenticContent
 246                                 {message}
 247                                 {toolMessages}
 248                                 isStreaming={isChatStreaming()}
 249                                 {isLastAssistantMessage}
 250                                 highlightTurns={highlightAgenticTurns}
 251                         />
 252                 {/if}
 253         {:else}
 254                 <div class="text-sm whitespace-pre-wrap">
 255                         {messageContent}
 256                 </div>
 257         {/if}
 258
 259         {#if showProcessingInfoBottom}
 260                 <div class="mt-4 w-full max-w-[48rem]" in:fade>
 261                         <div class="processing-container">
 262                                 <span class="processing-text">
 263                                         {modelLoadingText ??
 264                                                 processingState.getPromptProgressText() ??
 265                                                 processingState.getProcessingMessage() ??
 266                                                 'Processing...'}
 267                                 </span>
 268                         </div>
 269                 </div>
 270         {/if}
 271
 272         <div class="info my-6 grid gap-4 tabular-nums">
 273                 {#if displayedModel}
 274                         <div
 275                                 bind:this={statsContainerEl}
 276                                 class="inline-flex flex-wrap items-start gap-2 text-xs text-muted-foreground"
 277                         >
 278                                 {#if isRouter}
 279                                         <ModelsSelectorDropdown
 280                                                 currentModel={displayedModel}
 281                                                 disabled={isLoading()}
 282                                                 onModelChange={async (modelId: string, modelName: string) => {
 283                                                         const status = modelsStore.getModelStatus(modelId);
 284
 285                                                         if (status !== ServerModelStatus.LOADED) {
 286                                                                 await modelsStore.loadModel(modelId);
 287                                                         }
 288
 289                                                         onRegenerate(modelName);
 290                                                         return true;
 291                                                 }}
 292                                         />
 293                                 {:else}
 294                                         <ModelBadge model={displayedModel || undefined} onclick={handleCopyModel} />
 295                                 {/if}
 296
 297                                 {#if currentConfig.showMessageStats && message.timings && message.timings.predicted_n && message.timings.predicted_ms}
 298                                         {@const agentic = message.timings.agentic}
 299                                         <ChatMessageStatistics
 300                                                 promptTokens={agentic ? agentic.llm.prompt_n : message.timings.prompt_n}
 301                                                 promptMs={agentic ? agentic.llm.prompt_ms : message.timings.prompt_ms}
 302                                                 predictedTokens={agentic ? agentic.llm.predicted_n : message.timings.predicted_n}
 303                                                 predictedMs={agentic ? agentic.llm.predicted_ms : message.timings.predicted_ms}
 304                                                 agenticTimings={agentic}
 305                                                 onActiveViewChange={handleStatsViewChange}
 306                                         />
 307                                 {:else if isLoading() && currentConfig.showMessageStats}
 308                                         {@const liveStats = processingState.getLiveProcessingStats()}
 309                                         {@const genStats = processingState.getLiveGenerationStats()}
 310                                         {@const promptProgress = processingState.processingState?.promptProgress}
 311                                         {@const isStillProcessingPrompt =
 312                                                 promptProgress && promptProgress.processed < promptProgress.total}
 313
 314                                         {#if liveStats || genStats}
 315                                                 <ChatMessageStatistics
 316                                                         isLive
 317                                                         isProcessingPrompt={!!isStillProcessingPrompt}
 318                                                         promptTokens={liveStats?.tokensProcessed}
 319                                                         promptMs={liveStats?.timeMs}
 320                                                         predictedTokens={genStats?.tokensGenerated}
 321                                                         predictedMs={genStats?.timeMs}
 322                                                 />
 323                                         {/if}
 324                                 {/if}
 325                         </div>
 326                 {/if}
 327         </div>
 328
 329         {#if message.timestamp && !editCtx.isEditing}
 330                 <ChatMessageActionIcons
 331                         role={MessageRole.ASSISTANT}
 332                         justify="start"
 333                         actionsPosition="left"
 334                         {siblingInfo}
 335                         {showDeleteDialog}
 336                         {deletionInfo}
 337                         {onCopy}
 338                         {onEdit}
 339                         {onRegenerate}
 340                         onContinue={currentConfig.enableContinueGeneration ? onContinue : undefined}
 341                         {onForkConversation}
 342                         {onDelete}
 343                         {onConfirmDelete}
 344                         {onNavigateToSibling}
 345                         {onShowDeleteDialogChange}
 346                         showRawOutputSwitch={currentConfig.showRawOutputSwitch}
 347                         rawOutputEnabled={showRawOutput}
 348                         onRawOutputToggle={(enabled) => (showRawOutput = enabled)}
 349                 />
 350         {/if}
 351 </div>
 352
 353 <style>
 354         .processing-container {
 355                 display: flex;
 356                 flex-direction: column;
 357                 align-items: flex-start;
 358                 gap: 0.5rem;
 359         }
 360
 361         .processing-text {
 362                 background: linear-gradient(
 363                         90deg,
 364                         var(--muted-foreground),
 365                         var(--foreground),
 366                         var(--muted-foreground)
 367                 );
 368                 background-size: 200% 100%;
 369                 background-clip: text;
 370                 -webkit-background-clip: text;
 371                 -webkit-text-fill-color: transparent;
 372                 animation: shine 1s linear infinite;
 373                 font-weight: 500;
 374                 font-size: 0.875rem;
 375         }
 376
 377         @keyframes shine {
 378                 to {
 379                         background-position: -200% 0;
 380                 }
 381         }
 382
 383         .raw-output {
 384                 width: 100%;
 385                 max-width: 48rem;
 386                 margin-top: 1.5rem;
 387                 padding: 1rem 1.25rem;
 388                 border-radius: 1rem;
 389                 background: hsl(var(--muted) / 0.3);
 390                 color: var(--foreground);
 391                 font-size: 0.875rem;
 392                 line-height: 1.6;
 393                 white-space: pre-wrap;
 394                 word-break: break-word;
 395         }
 396 </style>