src/lib/components/agent/AgentSlashCommands.svelte

<script lang="ts">
	import type { AgentCommand } from "./contextTypes";
	import { normalizedAgentCommandName } from "./contextTypes";

	interface Props {
		commands: AgentCommand[];
		activeIndex?: number;
		listId?: string;
		onselect?: (command: AgentCommand) => void;
	}

	let { commands, activeIndex = 0, listId = "agent-slash-commands", onselect }: Props = $props();
</script>

<div
	id={listId}
	role="listbox"
	aria-label="Agent slash commands"
	class="mb-2 max-h-64 w-full overflow-y-auto rounded-xl border border-gray-200 bg-white p-1.5 shadow-lg dark:border-gray-700 dark:bg-gray-800"
>
	{#each commands as command, index (`${command.sourceLabel}-${command.name}`)}
		<button
			id={`${listId}-option-${index}`}
			type="button"
			role="option"
			aria-selected={index === activeIndex}
			class="flex min-h-11 w-full items-start gap-3 rounded-lg px-3 py-2 text-left outline-hidden hover:bg-gray-100 focus-visible:ring-2 focus-visible:ring-blue-500 {index ===
			activeIndex
				? 'bg-blue-50 dark:bg-blue-950/35'
				: ''} dark:hover:bg-gray-700"
			onmousedown={(event) => event.preventDefault()}
			onclick={() => onselect?.(command)}
		>
			<code class="shrink-0 text-sm font-semibold text-blue-700 dark:text-blue-300">
				/{normalizedAgentCommandName(command)}
			</code>
			<span class="min-w-0 flex-1">
				{#if command.description}
					<span class="block truncate text-xs text-gray-600 dark:text-gray-300">
						{command.description}
					</span>
				{/if}
				<span class="block text-[10px] font-semibold tracking-wide text-gray-400 uppercase">
					{command.sourceLabel}
				</span>
			</span>
		</button>
	{/each}
</div>