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 } 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         let showProcessingInfoTop = $derived(
 189                 message?.role === MessageRole.ASSISTANT &&
 190                         isActivelyProcessing &&
 191                         hasNoContent &&
 192                         !isAgentic &&
 193                         isLastAssistantMessage
 194         );
 195
 196         let showProcessingInfoBottom = $derived(
 197                 message?.role === MessageRole.ASSISTANT &&
 198                         isActivelyProcessing &&
 199                         (!hasNoContent || isAgentic) &&
 200                         isLastAssistantMessage
 201         );
 202
 203         function handleCopyModel() {
 204                 void copyToClipboard(displayedModel ?? '');
 205         }
 206
 207         $effect(() => {
 208                 if (showProcessingInfoTop || showProcessingInfoBottom) {
 209                         processingState.startMonitoring();
 210                 }
 211         });
 212 </script>
 213
 214 <div
 215         class="text-md group w-full leading-7.5 {className}"
 216         role="group"
 217         aria-label="Assistant message with actions"
 218 >
 219         {#if showProcessingInfoTop}
 220                 <div class="mt-6 w-full max-w-[48rem]" in:fade>
 221                         <div class="processing-container">
 222                                 <span class="processing-text">
 223                                         {processingState.getPromptProgressText() ??
 224                                                 processingState.getProcessingMessage() ??
 225                                                 'Processing...'}
 226                                 </span>
 227                         </div>
 228                 </div>
 229         {/if}
 230
 231         {#if editCtx.isEditing}
 232                 <ChatMessageEditForm />
 233         {:else if message.role === MessageRole.ASSISTANT}
 234                 {#if showRawOutput}
 235                         <pre class="raw-output">{rawOutputContent || ''}</pre>
 236                 {:else}
 237                         <ChatMessageAgenticContent
 238                                 {message}
 239                                 {toolMessages}
 240                                 isStreaming={isChatStreaming()}
 241                                 {isLastAssistantMessage}
 242                                 highlightTurns={highlightAgenticTurns}
 243                         />
 244                 {/if}
 245         {:else}
 246                 <div class="text-sm whitespace-pre-wrap">
 247                         {messageContent}
 248                 </div>
 249         {/if}
 250
 251         {#if showProcessingInfoBottom}
 252                 <div class="mt-4 w-full max-w-[48rem]" in:fade>
 253                         <div class="processing-container">
 254                                 <span class="processing-text">
 255                                         {processingState.getPromptProgressText() ??
 256                                                 processingState.getProcessingMessage() ??
 257                                                 'Processing...'}
 258                                 </span>
 259                         </div>
 260                 </div>
 261         {/if}
 262
 263         <div class="info my-6 grid gap-4 tabular-nums">
 264                 {#if displayedModel}
 265                         <div
 266                                 bind:this={statsContainerEl}
 267                                 class="inline-flex flex-wrap items-start gap-2 text-xs text-muted-foreground"
 268                         >
 269                                 {#if isRouter}
 270                                         <ModelsSelectorDropdown
 271                                                 currentModel={displayedModel}
 272                                                 disabled={isLoading()}
 273                                                 onModelChange={async (modelId: string, modelName: string) => {
 274                                                         const status = modelsStore.getModelStatus(modelId);
 275
 276                                                         if (status !== ServerModelStatus.LOADED) {
 277                                                                 await modelsStore.loadModel(modelId);
 278                                                         }
 279
 280                                                         onRegenerate(modelName);
 281                                                         return true;
 282                                                 }}
 283                                         />
 284                                 {:else}
 285                                         <ModelBadge model={displayedModel || undefined} onclick={handleCopyModel} />
 286                                 {/if}
 287
 288                                 {#if currentConfig.showMessageStats && message.timings && message.timings.predicted_n && message.timings.predicted_ms}
 289                                         {@const agentic = message.timings.agentic}
 290                                         <ChatMessageStatistics
 291                                                 promptTokens={agentic ? agentic.llm.prompt_n : message.timings.prompt_n}
 292                                                 promptMs={agentic ? agentic.llm.prompt_ms : message.timings.prompt_ms}
 293                                                 predictedTokens={agentic ? agentic.llm.predicted_n : message.timings.predicted_n}
 294                                                 predictedMs={agentic ? agentic.llm.predicted_ms : message.timings.predicted_ms}
 295                                                 agenticTimings={agentic}
 296                                                 onActiveViewChange={handleStatsViewChange}
 297                                         />
 298                                 {:else if isLoading() && currentConfig.showMessageStats}
 299                                         {@const liveStats = processingState.getLiveProcessingStats()}
 300                                         {@const genStats = processingState.getLiveGenerationStats()}
 301                                         {@const promptProgress = processingState.processingState?.promptProgress}
 302                                         {@const isStillProcessingPrompt =
 303                                                 promptProgress && promptProgress.processed < promptProgress.total}
 304
 305                                         {#if liveStats || genStats}
 306                                                 <ChatMessageStatistics
 307                                                         isLive
 308                                                         isProcessingPrompt={!!isStillProcessingPrompt}
 309                                                         promptTokens={liveStats?.tokensProcessed}
 310                                                         promptMs={liveStats?.timeMs}
 311                                                         predictedTokens={genStats?.tokensGenerated}
 312                                                         predictedMs={genStats?.timeMs}
 313                                                 />
 314                                         {/if}
 315                                 {/if}
 316                         </div>
 317                 {/if}
 318         </div>
 319
 320         {#if message.timestamp && !editCtx.isEditing}
 321                 <ChatMessageActionIcons
 322                         role={MessageRole.ASSISTANT}
 323                         justify="start"
 324                         actionsPosition="left"
 325                         {siblingInfo}
 326                         {showDeleteDialog}
 327                         {deletionInfo}
 328                         {onCopy}
 329                         {onEdit}
 330                         {onRegenerate}
 331                         onContinue={currentConfig.enableContinueGeneration ? onContinue : undefined}
 332                         {onForkConversation}
 333                         {onDelete}
 334                         {onConfirmDelete}
 335                         {onNavigateToSibling}
 336                         {onShowDeleteDialogChange}
 337                         showRawOutputSwitch={currentConfig.showRawOutputSwitch}
 338                         rawOutputEnabled={showRawOutput}
 339                         onRawOutputToggle={(enabled) => (showRawOutput = enabled)}
 340                 />
 341         {/if}
 342 </div>
 343
 344 <style>
 345         .processing-container {
 346                 display: flex;
 347                 flex-direction: column;
 348                 align-items: flex-start;
 349                 gap: 0.5rem;
 350         }
 351
 352         .processing-text {
 353                 background: linear-gradient(
 354                         90deg,
 355                         var(--muted-foreground),
 356                         var(--foreground),
 357                         var(--muted-foreground)
 358                 );
 359                 background-size: 200% 100%;
 360                 background-clip: text;
 361                 -webkit-background-clip: text;
 362                 -webkit-text-fill-color: transparent;
 363                 animation: shine 1s linear infinite;
 364                 font-weight: 500;
 365                 font-size: 0.875rem;
 366         }
 367
 368         @keyframes shine {
 369                 to {
 370                         background-position: -200% 0;
 371                 }
 372         }
 373
 374         .raw-output {
 375                 width: 100%;
 376                 max-width: 48rem;
 377                 margin-top: 1.5rem;
 378                 padding: 1rem 1.25rem;
 379                 border-radius: 1rem;
 380                 background: hsl(var(--muted) / 0.3);
 381                 color: var(--foreground);
 382                 font-size: 0.875rem;
 383                 line-height: 1.6;
 384                 white-space: pre-wrap;
 385                 word-break: break-word;
 386         }
 387 </style>