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';
	import { modelsState } from '$lib/state/models.svelte';
	import { mode } from 'mode-watcher';
	import ModelImageInput from './ModelImageInput.svelte';

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

{#each selectedModels as model (model)}
	{@const modelData = modelsState.models.find((m) => m.id === 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-primary has-[>svg]:px-2.5 dark:bg-secondary dark:text-secondary-foreground"
		>
			<img
				src={`https://huggingface.co/api/avatars/${model.split('/')[0]}`}
				alt={model.split('/')[0]}
				class="size-3.5 rounded"
			/>
			{model.split('/').pop() ?? model}
			{#if modelData?.architecture?.input_modalities?.includes('image')}
				<ModelImageInput />
			{/if}
		</div>
	{:else}
		<SettingsModel {model} {selectedModels} {onToggleModel}>
			<Button
				variant={mode.current === 'dark' ? 'secondary' : '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}
				{#if modelData?.architecture?.input_modalities?.includes('image')}
					<ModelImageInput />
				{/if}
				<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}