src/lib/components/model/ListModels.svelte

<script lang="ts">
	import { X } from '@lucide/svelte';

	import { Button } from '$lib/components/ui/button';
	import SettingsModel from './SettingsModel.svelte';

	let {
		selectedModels,
		showSelector = false,
		onToggleModel
	}: {
		selectedModels: string[];
		showSelector?: boolean;
		onToggleModel?: (model: string) => void;
	} = $props();
</script>

{#each selectedModels as model}
	{#if !showSelector}
		<div
			class="group relative inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-md border bg-background px-3 text-sm font-normal! text-gray-600 has-[>svg]:px-2.5 dark:border-input dark:bg-input/30 dark:text-gray-400"
		>
			<img
				src={`https://huggingface.co/api/avatars/${model.split('/')[0]}`}
				alt={model.split('/')[0]}
				class="size-3.5 rounded"
			/>
			{model.split('/').pop() ?? model}
		</div>
	{:else}
		<SettingsModel {model} {selectedModels} {onToggleModel}>
			<Button variant="outline" size="sm" class="group relative font-normal! shadow-none!">
				<img
					src={`https://huggingface.co/api/avatars/${model.split('/')[0]}`}
					alt={model.split('/')[0]}
					class="size-3.5 rounded"
				/>
				{model.split('/').pop() ?? model}
				<Button
					variant="default"
					size="icon-3xs"
					class="!shadow-none! absolute -top-1 -right-1 rounded-full! opacity-0 transition-opacity duration-300 group-hover:opacity-100"
					onclick={(e) => {
						e.preventDefault();
						e.stopPropagation();
						onToggleModel?.(model);
					}}
				>
					<X class="size-3" />
				</Button>
			</Button>
		</SettingsModel>
	{/if}
{/each}