1<script lang="ts">
 2	import { Package } from '@lucide/svelte';
 3	import { BadgeInfo, CopyToClipboardIcon } from '$lib/components/app';
 4	import { modelsStore } from '$lib/stores/models.svelte';
 5	import { serverStore } from '$lib/stores/server.svelte';
 6	import * as Tooltip from '$lib/components/ui/tooltip';
 7
 8	interface Props {
 9		class?: string;
10		model?: string;
11		onclick?: () => void;
12		showCopyIcon?: boolean;
13		showTooltip?: boolean;
14	}
15
16	let {
17		class: className = '',
18		model: modelProp,
19		onclick,
20		showCopyIcon = false,
21		showTooltip = false
22	}: Props = $props();
23
24	let model = $derived(modelProp || modelsStore.singleModelName);
25	let isModelMode = $derived(serverStore.isModelMode);
26</script>
27
28{#snippet badgeContent()}
29	<BadgeInfo class={className} {onclick}>
30		{#snippet icon()}
31			<Package class="h-3 w-3" />
32		{/snippet}
33
34		{model}
35
36		{#if showCopyIcon}
37			<CopyToClipboardIcon text={model || ''} ariaLabel="Copy model name" />
38		{/if}
39	</BadgeInfo>
40{/snippet}
41
42{#if model && isModelMode}
43	{#if showTooltip}
44		<Tooltip.Root>
45			<Tooltip.Trigger>
46				{@render badgeContent()}
47			</Tooltip.Trigger>
48
49			<Tooltip.Content>
50				{onclick ? 'Click for model details' : model}
51			</Tooltip.Content>
52		</Tooltip.Root>
53	{:else}
54		{@render badgeContent()}
55	{/if}
56{/if}