refactor: Cleanup

This commit is contained in:
Aleksander Grygier 2025-11-23 22:32:31 +01:00
parent d5a6671b81
commit f8ff39c64e
3 changed files with 44 additions and 32 deletions

View File

@ -1,14 +1,19 @@
<script lang="ts"> <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 { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
import { isLoading } from '$lib/stores/chat.svelte'; import { isLoading } from '$lib/stores/chat.svelte';
import autoResizeTextarea from '$lib/utils/autoresize-textarea'; import autoResizeTextarea from '$lib/utils/autoresize-textarea';
import { fade } from 'svelte/transition'; 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 { Button } from '$lib/components/ui/button';
import { Checkbox } from '$lib/components/ui/checkbox'; import { Checkbox } from '$lib/components/ui/checkbox';
import { INPUT_CLASSES } from '$lib/constants/input-classes'; import { INPUT_CLASSES } from '$lib/constants/input-classes';
import ChatMessageActions from './ChatMessageActions.svelte';
import Label from '$lib/components/ui/label/label.svelte'; import Label from '$lib/components/ui/label/label.svelte';
import { config } from '$lib/stores/settings.svelte'; import { config } from '$lib/stores/settings.svelte';
import { isRouterMode } from '$lib/stores/server.svelte'; import { isRouterMode } from '$lib/stores/server.svelte';
@ -259,38 +264,15 @@
onclick={handleCopyModel} onclick={handleCopyModel}
> >
{displayedModel()} {displayedModel()}
<Copy class="ml-1 h-3 w-3" /> <Copy class="ml-1 h-3 w-3" />
</button> </button>
{/if} {/if}
{#if currentConfig.showMessageStats && message.timings && message.timings.predicted_n && message.timings.predicted_ms} {#if currentConfig.showMessageStats && message.timings && message.timings.predicted_n && message.timings.predicted_ms}
{@const tokensPerSecond = <ChatMessageStatistics
(message.timings.predicted_n / message.timings.predicted_ms) * 1000} predictedTokens={message.timings.predicted_n}
predictedMs={message.timings.predicted_ms}
<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>
{/if} {/if}
</span> </span>
{/if} {/if}

View File

@ -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>

View File

@ -16,9 +16,11 @@ export { default as ChatFormHelperText } from './chat/ChatForm/ChatFormHelperTex
export { default as ChatFormTextarea } from './chat/ChatForm/ChatFormTextarea.svelte'; export { default as ChatFormTextarea } from './chat/ChatForm/ChatFormTextarea.svelte';
export { default as ChatMessage } from './chat/ChatMessages/ChatMessage.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 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 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 ChatScreen } from './chat/ChatScreen/ChatScreen.svelte';
export { default as ChatScreenHeader } from './chat/ChatScreen/ChatScreenHeader.svelte'; export { default as ChatScreenHeader } from './chat/ChatScreen/ChatScreenHeader.svelte';