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

   1 <script lang="ts">
   2         import {
   3                 ChatMessageAgenticContent,
   4                 ChatMessageActionIcons,
   5                 ChatMessageAssistantModel,
   6                 ChatMessageAssistantProcessingInfo,
   7                 ChatMessageAssistantRawOutput,
   8                 ChatMessageAssistantStatistics,
   9                 ChatMessageEditForm
  10         } from '$lib/components/app';
  11         import { getMessageEditContext } from '$lib/contexts';
  12         import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
  13         import { isLoading, isChatStreaming } from '$lib/stores/chat.svelte';
  14         import { modelLoadProgressText } from '$lib/utils';
  15         import { MessageRole } from '$lib/enums';
  16         import { config } from '$lib/stores/settings.svelte';
  17         import { isRouterMode } from '$lib/stores/server.svelte';
  18         import { modelsStore } from '$lib/stores/models.svelte';
  19
  20         import { hasAgenticContent } from '$lib/utils';
  21
  22         interface Props {
  23                 class?: string;
  24                 deletionInfo: {
  25                         totalCount: number;
  26                         userMessages: number;
  27                         assistantMessages: number;
  28                         messageTypes: string[];
  29                 } | null;
  30                 isLastAssistantMessage?: boolean;
  31                 message: DatabaseMessage;
  32                 toolMessages?: DatabaseMessage[];
  33                 onCopy: () => void;
  34                 onConfirmDelete: () => void;
  35                 onContinue?: () => void;
  36                 onDelete: () => void;
  37                 onEdit?: () => void;
  38                 onForkConversation?: (options: { name: string; includeAttachments: boolean }) => void;
  39                 onNavigateToSibling?: (siblingId: string) => void;
  40                 onRegenerate: (modelOverride?: string) => void;
  41                 onShowDeleteDialogChange: (show: boolean) => void;
  42                 showDeleteDialog: boolean;
  43                 siblingInfo?: ChatMessageSiblingInfo | null;
  44                 textareaElement?: HTMLTextAreaElement;
  45         }
  46
  47         let {
  48                 class: className = '',
  49                 deletionInfo,
  50                 isLastAssistantMessage = false,
  51                 message,
  52                 toolMessages = [],
  53                 onConfirmDelete,
  54                 onContinue,
  55                 onCopy,
  56                 onDelete,
  57                 onEdit,
  58                 onForkConversation,
  59                 onNavigateToSibling,
  60                 onRegenerate,
  61                 onShowDeleteDialogChange,
  62                 showDeleteDialog,
  63                 siblingInfo = null,
  64                 textareaElement = $bindable()
  65         }: Props = $props();
  66
  67         // Get edit context
  68         const editCtx = getMessageEditContext();
  69
  70         const isAgentic = $derived(hasAgenticContent(message, toolMessages));
  71         const processingState = useProcessingState();
  72
  73         let currentConfig = $derived(config());
  74         let isRouter = $derived(isRouterMode());
  75
  76         let showRawOutput = $state(false);
  77
  78         let displayedModel = $derived(message.model ?? null);
  79
  80         let isCurrentlyLoading = $derived(isLoading());
  81         let isStreaming = $derived(isChatStreaming());
  82         let hasNoContent = $derived(!message?.content?.trim());
  83         let isActivelyProcessing = $derived(isCurrentlyLoading || isStreaming);
  84
  85         // during a router auto-load the message has no model yet, so target the selected one
  86         let loadTargetModel = $derived(message.model ?? modelsStore.selectedModelName);
  87         let modelLoadProgress = $derived(
  88                 isRouter && loadTargetModel ? modelsStore.getLoadProgress(loadTargetModel) : null
  89         );
  90         let modelLoadingText = $derived(modelLoadProgressText(modelLoadProgress));
  91
  92         let showProcessingInfoTop = $derived(
  93                 message?.role === MessageRole.ASSISTANT &&
  94                         isActivelyProcessing &&
  95                         hasNoContent &&
  96                         !isAgentic &&
  97                         isLastAssistantMessage
  98         );
  99
 100         let showProcessingInfoBottom = $derived(
 101                 message?.role === MessageRole.ASSISTANT &&
 102                         isActivelyProcessing &&
 103                         (!hasNoContent || isAgentic) &&
 104                         isLastAssistantMessage
 105         );
 106
 107         let assistantEl: HTMLDivElement | undefined = $state();
 108         let lastUserMessageHeight = $state(0);
 109         let assistantMarginTop = $state(0);
 110
 111         $effect(() => {
 112                 if (!assistantEl) return;
 113
 114                 assistantMarginTop = Math.round(parseFloat(getComputedStyle(assistantEl).marginTop));
 115
 116                 const chatMessageEl = assistantEl.closest('.chat-message');
 117                 const previousChatMessage = chatMessageEl?.previousElementSibling;
 118                 const userMessageEl = previousChatMessage?.querySelector(
 119                         '.chat-message-user'
 120                 ) as HTMLElement | null;
 121
 122                 if (!userMessageEl) {
 123                         lastUserMessageHeight = 0;
 124                         return;
 125                 }
 126
 127                 const updateHeight = () => {
 128                         const rect = userMessageEl.getBoundingClientRect();
 129                         const marginTop = Math.round(parseFloat(getComputedStyle(userMessageEl).marginTop));
 130                         lastUserMessageHeight = Math.round(rect.height + marginTop);
 131                 };
 132
 133                 updateHeight();
 134
 135                 const resizeObserver = new ResizeObserver(updateHeight);
 136                 resizeObserver.observe(userMessageEl);
 137
 138                 return () => {
 139                         resizeObserver.disconnect();
 140                 };
 141         });
 142
 143         $effect(() => {
 144                 if (showProcessingInfoTop || showProcessingInfoBottom) {
 145                         processingState.startMonitoring();
 146                 }
 147         });
 148 </script>
 149
 150 <div
 151         bind:this={assistantEl}
 152         class="chat-message-assistant text-md group w-full leading-7.5 {className}"
 153         style:--last-user-message-height={lastUserMessageHeight > 0
 154                 ? `${lastUserMessageHeight}px`
 155                 : undefined}
 156         style:--assistant-margin-top={assistantMarginTop > 0 ? `${assistantMarginTop}px` : undefined}
 157         role="group"
 158         aria-label="Assistant message with actions"
 159 >
 160         {#if showProcessingInfoTop}
 161                 <ChatMessageAssistantProcessingInfo {modelLoadingText} {processingState} position="top" />
 162         {/if}
 163
 164         {#if editCtx.isEditing}
 165                 <ChatMessageEditForm />
 166         {:else}
 167                 {#if showRawOutput}
 168                         <ChatMessageAssistantRawOutput {message} {toolMessages} />
 169                 {:else}
 170                         <ChatMessageAgenticContent
 171                                 {message}
 172                                 {toolMessages}
 173                                 isStreaming={isChatStreaming()}
 174                                 {isLastAssistantMessage}
 175                         />
 176                 {/if}
 177         {/if}
 178
 179         {#if showProcessingInfoBottom}
 180                 <ChatMessageAssistantProcessingInfo {modelLoadingText} {processingState} position="bottom" />
 181         {/if}
 182
 183         <div class="info my-6 grid gap-4 tabular-nums">
 184                 {#if displayedModel}
 185                         <div class="inline-flex flex-wrap items-start gap-2 text-xs text-muted-foreground">
 186                                 <ChatMessageAssistantModel
 187                                         {displayedModel}
 188                                         isLoading={isLoading()}
 189                                         {isRouter}
 190                                         {onRegenerate}
 191                                 />
 192
 193                                 <ChatMessageAssistantStatistics
 194                                         {message}
 195                                         isLoading={isLoading()}
 196                                         {processingState}
 197                                         showMessageStats={currentConfig.showMessageStats}
 198                                 />
 199                         </div>
 200                 {/if}
 201         </div>
 202
 203         {#if message.timestamp && !editCtx.isEditing}
 204                 <ChatMessageActionIcons
 205                         role={MessageRole.ASSISTANT}
 206                         justify="start"
 207                         actionsPosition="left"
 208                         {siblingInfo}
 209                         {showDeleteDialog}
 210                         {deletionInfo}
 211                         {onCopy}
 212                         {onEdit}
 213                         {onRegenerate}
 214                         onContinue={currentConfig.enableContinueGeneration ? onContinue : undefined}
 215                         {onForkConversation}
 216                         {onDelete}
 217                         {onConfirmDelete}
 218                         {onNavigateToSibling}
 219                         {onShowDeleteDialogChange}
 220                         showRawOutputSwitch={currentConfig.showRawOutputSwitch}
 221                         rawOutputEnabled={showRawOutput}
 222                         onRawOutputToggle={(enabled) => (showRawOutput = enabled)}
 223                 />
 224         {/if}
 225 </div>
 226
 227 <style>
 228         :global(.chat-message):last-child .chat-message-assistant {
 229                 --assistant-min-height-offset: calc(
 230                         var(--last-user-message-height, 19rem) + var(--chat-form-height, 6rem) +
 231                                 var(--chat-form-bottom-position, 0.5rem) + var(--chat-form-padding-top, 6rem) +
 232                                 var(--assistant-margin-top, 3rem)
 233                 );
 234                 min-height: calc(100dvh - var(--assistant-min-height-offset));
 235
 236                 @media (width > 768px) {
 237                         --assistant-min-height-offset: calc(
 238                                 var(--last-user-message-height, 18rem) + var(--chat-form-height, 6rem) +
 239                                         var(--chat-form-bottom-position, 1rem) + var(--chat-form-padding-top, 6rem) +
 240                                         var(--assistant-margin-top, 3rem)
 241                         );
 242                 }
 243         }
 244 </style>