Repository: ggerganov/llama.cpp
File: tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics.svelte (Svelte)

Code before:
	}

	let { predictedTokens, predictedMs, promptTokens, promptMs }: Props = $props();

	type StatsView = 'generation' | 'reading';
	let activeView: StatsView = $state('generation');

	let tokensPerSecond = $derived((predictedTokens / predictedMs) * 1000);
	let timeInSeconds = $derived((predictedMs / 1000).toFixed(2));

	let promptTokensPerSecond = $derived(
		promptTokens !== undefined && promptMs !== undefined
			? (promptTokens / promptMs) * 1000
			: undefined
	);
	let promptTimeInSeconds = $derived(
		promptMs !== undefined ? (promptMs / 1000).toFixed(2) : undefined
	);
	let hasPromptStats = $derived(
		promptTokens !== undefined &&
			promptMs !== undefined &&
			promptTokensPerSecond !== undefined &&
			promptTimeInSeconds !== undefined
	);
</script>

<div class="inline-flex items-center text-xs text-muted-foreground">
	<!-- Switcher triggers -->
	<div class="inline-flex items-center rounded-sm bg-muted-foreground/15 p-0.5">
		{#if hasPromptStats}
			<Tooltip.Root>
				<Tooltip.Trigger>
					<button
						type="button"
						class="inline-flex h-5 w-5 items-center justify-center rounded-sm transition-colors {activeView ===
						'reading'
							? 'bg-background text-foreground shadow-sm'
							: 'hover:text-foreground'}"
						onclick={() => (activeView = 'reading')}
					>
						<BookOpenText class="h-3 w-3" />
						<span class="sr-only">Reading</span>
					</button>
				</Tooltip.Trigger>
				<Tooltip.Content>
					<p>Reading (prompt processing)</p>
				</Tooltip.Content>
			</Tooltip.Root>
		{/if}
		<Tooltip.Root>
			<Tooltip.Trigger>

Review comment (suggestion):
```suggestion
	let promptTokensPerSecond = $derived(
		promptTokens !== undefined && promptMs !== undefined
			? (promptTokens / promptMs) * 1000
			: undefined
	);

	let promptTimeInSeconds = $derived(
		promptMs !== undefined ? (promptMs / 1000).toFixed(2) : undefined
	);

	let hasPromptStats = $derived(
		promptTokens !== undefined &&
			promptMs !== undefined &&
			promptTokensPerSecond !== undefined &&
			promptTimeInSeconds !== undefined
Comment view	);
```

Code after:
		promptMs?: number;
	}

	let { predictedTokens, predictedMs, promptTokens, promptMs }: Props = $props();

	let activeView: ChatMessageStatsView = $state(ChatMessageStatsView.GENERATION);

	let tokensPerSecond = $derived((predictedTokens / predictedMs) * 1000);
	let timeInSeconds = $derived((predictedMs / 1000).toFixed(2));

	let promptTokensPerSecond = $derived(
		promptTokens !== undefined && promptMs !== undefined
			? (promptTokens / promptMs) * 1000
			: undefined
	);

	let promptTimeInSeconds = $derived(
		promptMs !== undefined ? (promptMs / 1000).toFixed(2) : undefined
	);

	let hasPromptStats = $derived(
		promptTokens !== undefined &&
			promptMs !== undefined &&
			promptTokensPerSecond !== undefined &&
			promptTimeInSeconds !== undefined
	);
</script>

<div class="inline-flex items-center text-xs text-muted-foreground">
	<div class="inline-flex items-center rounded-sm bg-muted-foreground/15 p-0.5">
		{#if hasPromptStats}
			<Tooltip.Root>
				<Tooltip.Trigger>
					<button
						type="button"
						class="inline-flex h-5 w-5 items-center justify-center rounded-sm transition-colors {activeView ===
						ChatMessageStatsView.READING
							? 'bg-background text-foreground shadow-sm'
							: 'hover:text-foreground'}"
						onclick={() => (activeView = ChatMessageStatsView.READING)}
					>
						<BookOpenText class="h-3 w-3" />
						<span class="sr-only">Reading</span>
					</button>
				</Tooltip.Trigger>
				<Tooltip.Content>
					<p>Reading (prompt processing)</p>
				</Tooltip.Content>
			</Tooltip.Root>
		{/if}
		<Tooltip.Root>