- {#if showSaveOnlyOption && onSaveEditOnly}
+ {#if editCtx.showSaveOnlyOption}
@@ -386,6 +131,6 @@
cancelText="Keep editing"
variant="destructive"
icon={AlertTriangle}
- onConfirm={onCancelEdit}
+ onConfirm={editCtx.cancel}
onCancel={() => (showDiscardDialog = false)}
/>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics.svelte
index b53e82aaf9..77951e9d2a 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics.svelte
@@ -3,19 +3,18 @@
import { BadgeChatStatistic } from '$lib/components/app';
import * as Tooltip from '$lib/components/ui/tooltip';
import { ChatMessageStatsView } from '$lib/enums';
- import { formatPerformanceTime } from '$lib/utils/formatters';
+ import { formatPerformanceTime } from '$lib/utils';
+ import { MS_PER_SECOND, DEFAULT_PERFORMANCE_TIME } from '$lib/constants/formatters';
interface Props {
predictedTokens?: number;
predictedMs?: number;
promptTokens?: number;
promptMs?: number;
- // Live mode: when true, shows stats during streaming
isLive?: boolean;
- // Whether prompt processing is still in progress
isProcessingPrompt?: boolean;
- // Initial view to show (defaults to READING in live mode)
initialView?: ChatMessageStatsView;
+ onActiveViewChange?: (view: ChatMessageStatsView) => void;
}
let {
@@ -25,12 +24,17 @@
promptMs,
isLive = false,
isProcessingPrompt = false,
- initialView = ChatMessageStatsView.GENERATION
+ initialView = ChatMessageStatsView.GENERATION,
+ onActiveViewChange
}: Props = $props();
let activeView: ChatMessageStatsView = $derived(initialView);
let hasAutoSwitchedToGeneration = $state(false);
+ $effect(() => {
+ onActiveViewChange?.(activeView);
+ });
+
// In live mode: auto-switch to GENERATION tab when prompt processing completes
$effect(() => {
if (isLive) {
@@ -57,14 +61,16 @@
predictedMs > 0
);
- let tokensPerSecond = $derived(hasGenerationStats ? (predictedTokens! / predictedMs!) * 1000 : 0);
+ let tokensPerSecond = $derived(
+ hasGenerationStats ? (predictedTokens! / predictedMs!) * MS_PER_SECOND : 0
+ );
let formattedTime = $derived(
- predictedMs !== undefined ? formatPerformanceTime(predictedMs) : '0s'
+ predictedMs !== undefined ? formatPerformanceTime(predictedMs) : DEFAULT_PERFORMANCE_TIME
);
let promptTokensPerSecond = $derived(
promptTokens !== undefined && promptMs !== undefined && promptMs > 0
- ? (promptTokens / promptMs) * 1000
+ ? (promptTokens / promptMs) * MS_PER_SECOND
: undefined
);
@@ -97,9 +103,11 @@
onclick={() => (activeView = ChatMessageStatsView.READING)}
>
+
Reading
+
Reading (prompt processing)
@@ -119,9 +127,11 @@
disabled={isGenerationDisabled}
>
+
Generation
+
{isGenerationDisabled
@@ -140,16 +150,18 @@
value="{predictedTokens?.toLocaleString()} tokens"
tooltipLabel="Generated tokens"
/>
+
+
{:else if hasPromptStats}
@@ -159,12 +171,14 @@
value="{promptTokens} tokens"
tooltipLabel="Prompt tokens"
/>
+
+
void;
- onSaveEdit: () => void;
- onEditKeydown: (event: KeyboardEvent) => void;
- onEditedContentChange: (content: string) => void;
onCopy: () => void;
onEdit: () => void;
onDelete: () => void;
@@ -36,15 +33,9 @@
let {
class: className = '',
message,
- isEditing,
- editedContent,
siblingInfo = null,
showDeleteDialog,
deletionInfo,
- onCancelEdit,
- onSaveEdit,
- onEditKeydown,
- onEditedContentChange,
onCopy,
onEdit,
onDelete,
@@ -54,10 +45,25 @@
textareaElement = $bindable()
}: Props = $props();
+ const editCtx = getMessageEditContext();
+
+ function handleEditKeydown(event: KeyboardEvent) {
+ if (event.key === KeyboardKey.ENTER && !event.shiftKey && !isIMEComposing(event)) {
+ event.preventDefault();
+
+ editCtx.save();
+ } else if (event.key === KeyboardKey.ESCAPE) {
+ event.preventDefault();
+
+ editCtx.cancel();
+ }
+ }
+
let isMultiline = $state(false);
let messageElement: HTMLElement | undefined = $state();
let isExpanded = $state(false);
let contentHeight = $state(0);
+
const MAX_HEIGHT = 200; // pixels
const currentConfig = config();
@@ -97,25 +103,32 @@
class="group flex flex-col items-end gap-3 md:gap-2 {className}"
role="group"
>
- {#if isEditing}
+ {#if editCtx.isEditing}
-
@@ -131,12 +144,12 @@
type="button"
>
{#if currentConfig.renderUserContentAsMarkdown}
-
+
{:else}
@@ -208,7 +225,7 @@
{onShowDeleteDialogChange}
{siblingInfo}
{showDeleteDialog}
- role="user"
+ role={MessageRole.USER}
/>
{/if}
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte
index 041c6bd251..05a02e2728 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte
@@ -1,67 +1,48 @@
-
- {#each displayMessages as { message, siblingInfo } (message.id)}
+
+ {#each displayMessages as { message, isLastAssistantMessage, siblingInfo } (message.id)}
{/each}
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
index 3d432e26bc..ceecf03e54 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
@@ -1,7 +1,7 @@
@@ -406,11 +363,8 @@
class="mb-16 md:mb-24"
messages={activeMessages()}
onUserAction={() => {
- if (!disableAutoScroll) {
- userScrolledUp = false;
- autoScrollEnabled = true;
- scrollChatToBottom();
- }
+ autoScroll.enable();
+ autoScroll.scrollToBottom();
}}
/>
@@ -444,7 +398,7 @@
{/if}