From f8ff39c64ed39eda18ecaa51f9831dd81e6c8ff8 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Sun, 23 Nov 2025 22:32:31 +0100
Subject: [PATCH] refactor: Cleanup

---
 .../ChatMessages/ChatMessageAssistant.svelte  | 44 ++++++-------------
 .../ChatMessages/ChatMessageStatistics.svelte | 28 ++++++++++++
 .../webui/src/lib/components/app/index.ts     |  4 +-
 3 files changed, 44 insertions(+), 32 deletions(-)
 create mode 100644 tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics.svelte

diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte
index 7342e979de..af4a6fcfe5 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte
@@ -1,14 +1,19 @@
 <script lang="ts">
-	import { ChatMessageThinkingBlock, MarkdownContent, SelectorModel } from '$lib/components/app';
+	import {
+		ChatMessageActions,
+		ChatMessageStatistics,
+		ChatMessageThinkingBlock,
+		MarkdownContent,
+		SelectorModel
+	} from '$lib/components/app';
 	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
 	import { isLoading } from '$lib/stores/chat.svelte';
 	import autoResizeTextarea from '$lib/utils/autoresize-textarea';
 	import { fade } from 'svelte/transition';
-	import { Check, Copy, X, Gauge, Clock, WholeWord, Wrench } from '@lucide/svelte';
+	import { Check, Copy, X, Wrench } from '@lucide/svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Checkbox } from '$lib/components/ui/checkbox';
 	import { INPUT_CLASSES } from '$lib/constants/input-classes';
-	import ChatMessageActions from './ChatMessageActions.svelte';
 	import Label from '$lib/components/ui/label/label.svelte';
 	import { config } from '$lib/stores/settings.svelte';
 	import { isRouterMode } from '$lib/stores/server.svelte';
@@ -259,38 +264,15 @@
 						onclick={handleCopyModel}
 					>
 						{displayedModel()}
-
-						<Copy class="ml-1 h-3 w-3 " />
+						<Copy class="ml-1 h-3 w-3" />
 					</button>
 				{/if}
 
 				{#if currentConfig.showMessageStats && message.timings && message.timings.predicted_n && message.timings.predicted_ms}
-					{@const tokensPerSecond =
-						(message.timings.predicted_n / message.timings.predicted_ms) * 1000}
-
-					<span
-						class="inline-flex items-center gap-1 rounded-sm bg-muted-foreground/15 px-1.5 py-0.75"
-					>
-						<WholeWord class="h-3 w-3" />
-
-						{message.timings.predicted_n} tokens
-					</span>
-
-					<span
-						class="inline-flex items-center gap-1 rounded-sm bg-muted-foreground/15 px-1.5 py-0.75"
-					>
-						<Clock class="h-3 w-3" />
-
-						{(message.timings.predicted_ms / 1000).toFixed(2)}s
-					</span>
-
-					<span
-						class="inline-flex items-center gap-1 rounded-sm bg-muted-foreground/15 px-1.5 py-0.75"
-					>
-						<Gauge class="h-3 w-3" />
-
-						{tokensPerSecond.toFixed(2)} tokens/s
-					</span>
+					<ChatMessageStatistics
+						predictedTokens={message.timings.predicted_n}
+						predictedMs={message.timings.predicted_ms}
+					/>
 				{/if}
 			</span>
 		{/if}
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
new file mode 100644
index 0000000000..d6d896db95
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Clock, Gauge, WholeWord } from '@lucide/svelte';
+
+	interface Props {
+		predictedTokens: number;
+		predictedMs: number;
+	}
+
+	let { predictedTokens, predictedMs }: Props = $props();
+
+	let tokensPerSecond = $derived((predictedTokens / predictedMs) * 1000);
+	let timeInSeconds = $derived((predictedMs / 1000).toFixed(2));
+</script>
+
+<span class="inline-flex items-center gap-1 rounded-sm bg-muted-foreground/15 px-1.5 py-0.75">
+	<WholeWord class="h-3 w-3" />
+	{predictedTokens} tokens
+</span>
+
+<span class="inline-flex items-center gap-1 rounded-sm bg-muted-foreground/15 px-1.5 py-0.75">
+	<Clock class="h-3 w-3" />
+	{timeInSeconds}s
+</span>
+
+<span class="inline-flex items-center gap-1 rounded-sm bg-muted-foreground/15 px-1.5 py-0.75">
+	<Gauge class="h-3 w-3" />
+	{tokensPerSecond.toFixed(2)} tokens/s
+</span>
diff --git a/tools/server/webui/src/lib/components/app/index.ts b/tools/server/webui/src/lib/components/app/index.ts
index 3ef80c76ae..bc740d7be8 100644
--- a/tools/server/webui/src/lib/components/app/index.ts
+++ b/tools/server/webui/src/lib/components/app/index.ts
@@ -16,9 +16,11 @@ export { default as ChatFormHelperText } from './chat/ChatForm/ChatFormHelperTex
 export { default as ChatFormTextarea } from './chat/ChatForm/ChatFormTextarea.svelte';
 
 export { default as ChatMessage } from './chat/ChatMessages/ChatMessage.svelte';
-export { default as ChatMessages } from './chat/ChatMessages/ChatMessages.svelte';
+export { default as ChatMessageActions } from './chat/ChatMessages/ChatMessageActions.svelte';
 export { default as ChatMessageBranchingControls } from './chat/ChatMessages/ChatMessageBranchingControls.svelte';
+export { default as ChatMessageStatistics } from './chat/ChatMessages/ChatMessageStatistics.svelte';
 export { default as ChatMessageThinkingBlock } from './chat/ChatMessages/ChatMessageThinkingBlock.svelte';
+export { default as ChatMessages } from './chat/ChatMessages/ChatMessages.svelte';
 
 export { default as ChatScreen } from './chat/ChatScreen/ChatScreen.svelte';
 export { default as ChatScreenHeader } from './chat/ChatScreen/ChatScreenHeader.svelte';