loco-admin-web/src/lib/components/agents/select/dialog.svelte

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

	import * as agentsApi from '$lib/api/agents';
	import { AgentCard } from '$lib/components/agents/card';
	import { Empty } from '$lib/components/common/empty';
	import { SelectDialog } from '$lib/components/common/select-dialog';
	import { Spinner } from '$lib/components/controls/spinner';
	import type { Agent } from '$lib/types/entities';

	let {
		workspaceId,
		open = $bindable(false),
		value = $bindable([]),
		onselect,
	}: {
		workspaceId: string;
		open?: boolean;
		value?: Agent[];
		onselect?: (agents: Agent[]) => Agent[];
	} = $props();

	let query = $state('');
	let loading = $state(false);
	let agents = $state<Agent[]>([]);

	const loadAgents = async () => {
		if (loading || agents.length > 0) {
			return;
		}
		loading = true;
		try {
			agents = await agentsApi.list(workspaceId);
		} catch (error) {
			console.error('Failed to load agents', error);
		}
		loading = false;
	};

	$effect(() => {
		if (open) {
			untrack(() => {
				loadAgents();
			});
		}
	});

	const select = (agent: Agent) => {
		if (value.includes(agent)) {
			value = value.filter((a) => a.id !== agent.id);
		} else {
			value = [...value, agent];
		}
		if (onselect) {
			value = onselect(value);
		}
	};
</script>

<SelectDialog title="Select Agent" bind:open bind:query>
	{#snippet content()}
		{#if loading}
			<div class="flex h-full w-full items-center justify-center gap-2">
				<Spinner />
				<div class="text-sm text-white/50">Loading Agents...</div>
			</div>
		{:else if agents.length === 0}
			<Empty icon={Bot}>
				{#snippet caption()}
					<div>No agents found</div>
				{/snippet}
			</Empty>
		{:else}
			<div class="grid grid-cols-2 gap-2">
				{#each agents as agent (agent.id)}
					<AgentCard
						class={value.includes(agent)
							? 'border-primary/50 bg-primary/25 hover:border-primary/75 hover:bg-primary/50'
							: ''}
						{agent}
						onselect={() => select(agent)}
					/>
				{/each}
			</div>
		{/if}
	{/snippet}
</SelectDialog>