refactor: UI badges

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import {
+		BadgeModelName,
 		ChatMessageActions,
 		ChatMessageStatistics,
 		ChatMessageThinkingBlock,
@@ -260,13 +261,11 @@
 						disabled={isLoading()}
 					/>
 				{:else}
-					<button
+					<BadgeModelName
-						class="inline-flex cursor-pointer items-center gap-1 rounded-sm bg-muted-foreground/15 px-1.5 py-0.75"
+						model={displayedModel() || undefined}
 						onclick={handleCopyModel}
-					>
+						showCopyIcon={true}
-						{displayedModel()}
+					/>
-						<CopyToClipboardIcon text={displayedModel() || ''} ariaLabel="Copy model name" />
-					</button>
 				{/if}
 
 				{#if currentConfig.showMessageStats && message.timings && message.timings.predicted_n && message.timings.predicted_ms}

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Clock, Gauge, WholeWord } from '@lucide/svelte';
+	import { BadgeChatStatistic } from '$lib/components/app';
 
 	interface Props {
 		predictedTokens: number;
@@ -12,17 +13,8 @@
 	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">
+<BadgeChatStatistic icon={WholeWord} value="{predictedTokens} tokens" />
-	<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">
+<BadgeChatStatistic icon={Clock} value="{timeInSeconds}s" />
-	<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">
+<BadgeChatStatistic icon={Gauge} value="{tokensPerSecond.toFixed(2)} tokens/s" />
-	<Gauge class="h-3 w-3" />
-	{tokensPerSecond.toFixed(2)} tokens/s
-</span>

tools/server/webui/src/lib/components/app/index.ts

@@ -53,6 +53,8 @@ export { default as DialogModelInformation } from './dialogs/DialogModelInformat
 
 export { default as ActionButton } from './misc/ActionButton.svelte';
 export { default as ActionDropdown } from './misc/ActionDropdown.svelte';
+export { default as BadgeChatStatistic } from './misc/BadgeChatStatistic.svelte';
+export { default as BadgeInfo } from './misc/BadgeInfo.svelte';
 export { default as BadgeModelName } from './misc/BadgeModelName.svelte';
 export { default as BadgeModality } from './misc/BadgeModality.svelte';
 export { default as ConversationSelection } from './misc/ConversationSelection.svelte';

tools/server/webui/src/lib/components/app/misc/BadgeChatStatistic.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { BadgeInfo } from '$lib/components/app';
+	import type { Component } from 'svelte';
+
+	interface Props {
+		class?: string;
+		icon: Component;
+		value: string | number;
+	}
+
+	let { class: className = '', icon: Icon, value }: Props = $props();
+</script>
+
+<BadgeInfo class={className}>
+	{#snippet icon()}
+		<Icon class="h-3 w-3" />
+	{/snippet}
+
+	{value}
+</BadgeInfo>

tools/server/webui/src/lib/components/app/misc/BadgeInfo.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { cn } from '$lib/components/ui/utils';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		class?: string;
+		icon?: Snippet;
+		onclick?: () => void;
+	}
+
+	let { children, class: className = '', icon, onclick }: Props = $props();
+</script>
+
+<button
+	class={cn(
+		'inline-flex cursor-pointer items-center gap-1 rounded-sm bg-muted-foreground/15 px-1.5 py-0.75',
+		className
+	)}
+	{onclick}
+>
+	{#if icon}
+		{@render icon()}
+	{/if}
+
+	{@render children()}
+</button>

tools/server/webui/src/lib/components/app/misc/BadgeModelName.svelte

@@ -1,46 +1,49 @@
 <script lang="ts">
 	import { Package } from '@lucide/svelte';
-	import { Badge } from '$lib/components/ui/badge';
+	import { BadgeInfo, CopyToClipboardIcon } from '$lib/components/app';
 	import { serverStore } from '$lib/stores/server.svelte';
-	import { cn } from '$lib/components/ui/utils';
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { TOOLTIP_DELAY_DURATION } from '$lib/constants/tooltip-config';
 
 	interface Props {
 		class?: string;
+		model?: string;
 		onclick?: () => void;
+		showCopyIcon?: boolean;
 		showTooltip?: boolean;
 	}
 
-	let { class: className = '', onclick, showTooltip = false }: Props = $props();
+	let {
+		class: className = '',
+		model: modelProp,
+		onclick,
+		showCopyIcon = false,
+		showTooltip = false
+	}: Props = $props();
 
-	let model = $derived(serverStore.modelName);
+	let model = $derived(modelProp || serverStore.modelName);
 	let isModelMode = $derived(serverStore.isModelMode);
 </script>
 
-{#snippet badge()}
+{#snippet badgeContent()}
-	<Badge
+	<BadgeInfo class={className} {onclick}>
-		variant="outline"
+		{#snippet icon()}
-		class={cn(
-			'text-xs',
-			onclick ? 'cursor-pointer transition-colors hover:bg-foreground/20' : '',
-			className
-		)}
-		{onclick}
-	>
-		<div class="icons mr-0.5 flex items-center gap-1.5">
 			<Package class="h-3 w-3" />
-		</div>
+		{/snippet}
 
-		<span class="block truncate">{model}</span>
+		{model}
-	</Badge>
+
+		{#if showCopyIcon}
+			<CopyToClipboardIcon text={model || ''} ariaLabel="Copy model name" />
+		{/if}
+	</BadgeInfo>
 {/snippet}
 
 {#if model && isModelMode}
 	{#if showTooltip}
 		<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
 			<Tooltip.Trigger>
-				{@render badge()}
+				{@render badgeContent()}
 			</Tooltip.Trigger>
 
 			<Tooltip.Content>
@@ -48,6 +51,6 @@
 			</Tooltip.Content>
 		</Tooltip.Root>
 	{:else}
-		{@render badge()}
+		{@render badgeContent()}
 	{/if}
 {/if}