combobox wip

src/routes/canvas/+page.svelte

@@ -5,6 +5,11 @@
 	import { edges, nodes } from "./state.js";
 	import type { Node } from "@xyflow/svelte";
 	import IconAdd from "~icons/lucide/plus";
+	import { models } from "$lib/state/models.svelte";
+	import { projects } from "$lib/state/projects.svelte";
+
+	await models.load();
+	await projects.init();
 
 	const nodeTypes = { chat: ChatNode } as const;
 

src/routes/canvas/+page.ts

@@ -1,17 +0,0 @@
-import type { PageLoad } from "./$types.js";
-import type { ApiModelsResponse } from "../api/models/+server.js";
-
-export const load: PageLoad = async ({ fetch }) => {
-	const [modelsRes, routerRes] = await Promise.all([
-		fetch("/api/models"),
-		fetch("https://router.huggingface.co/v1/models"),
-	]);
-
-	const models: ApiModelsResponse = await modelsRes.json();
-	const routerData = await routerRes.json();
-
-	return {
-		...models,
-		routerData,
-	};
-};

src/routes/canvas/chat-node.svelte

@@ -11,6 +11,7 @@
 	import IconAdd from "~icons/lucide/plus";
 	import IconX from "~icons/lucide/x";
 	import type { ChatCompletionInputMessage } from "@huggingface/tasks";
+	import ModelPicker from "./model-picker.svelte";
 
 	type Props = Omit<NodeProps, "data"> & { data: { query: string; response: string; modelId?: Model["id"] } };
 	let { id, data }: Props = $props();
@@ -104,17 +105,7 @@
 >
 	<!-- Model selector -->
 	<div class="mb-4">
-		<label class="mb-1.5 block text-xs font-medium text-gray-600"> Model </label>
-		<select
-			class="w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm
-			text-gray-900 transition-colors focus:border-gray-900 focus:ring-2 focus:ring-gray-900/10
-			focus:outline-none"
-			bind:value={() => data.modelId, modelId => updateNodeData(id, { modelId })}
-		>
-			{#each models.all as model}
-				<option value={model.id}>{model.id}</option>
-			{/each}
-		</select>
+		<ModelPicker modelId={data.modelId} onModelSelect={modelId => updateNodeData(id, { modelId })} />
 	</div>
 
 	<form class="flex flex-col gap-4" onsubmit={handleSubmit}>

src/routes/canvas/model-picker.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+	import { models } from "$lib/state/models.svelte.js";
+	import { VirtualScroll } from "$lib/spells/virtual-scroll.svelte.js";
+	import type { CustomModel, Model } from "$lib/types.js";
+	import fuzzysearch from "$lib/utils/search.js";
+	import { Combobox } from "melt/builders";
+	import { onMount, untrack } from "svelte";
+	import typia from "typia";
+	import IconCube from "~icons/carbon/cube";
+	import IconStar from "~icons/carbon/star";
+	import IconEye from "~icons/carbon/view";
+	import Tooltip from "../../lib/components/tooltip.svelte";
+
+	interface Props {
+		modelId?: string;
+		onModelSelect?: (modelId: string) => void;
+	}
+
+	let { modelId, onModelSelect }: Props = $props();
+
+	let query = $state("");
+
+	const selectedModel = $derived.by(() => {
+		if (!modelId) return undefined;
+		return models.all.find(m => m.id === modelId);
+	});
+
+	// Set initial query to current model ID
+	onMount(() => {
+		if (!selectedModel) return;
+		query = selectedModel.id;
+	});
+
+	const queryIfTouched = $derived.by(() => {
+		if (combobox.touched) return query;
+		return "";
+	});
+	const trending = $derived(fuzzysearch({ needle: queryIfTouched, haystack: models.trending, property: "id" }));
+	const other = $derived(fuzzysearch({ needle: queryIfTouched, haystack: models.nonTrending, property: "id" }));
+	const custom = $derived(fuzzysearch({ needle: queryIfTouched, haystack: models.custom, property: "id" }));
+
+	// Combine all filtered models into sections for virtualization
+	type SectionItem =
+		| { type: "header"; content: string }
+		| { type: "model"; content: Model | CustomModel; trending?: boolean };
+
+	const allFilteredModels = $derived.by((): SectionItem[] => {
+		const sections: SectionItem[] = [];
+
+		if (trending.length > 0) {
+			sections.push({ type: "header", content: "Trending" });
+			trending.forEach(model => sections.push({ type: "model", content: model, trending: true }));
+		}
+
+		if (custom.length > 0) {
+			sections.push({ type: "header", content: "Custom endpoints" });
+			custom.forEach(model => sections.push({ type: "model", content: model }));
+		}
+
+		if (other.length > 0) {
+			sections.push({ type: "header", content: "Other models" });
+			other.forEach(model => sections.push({ type: "model", content: model }));
+		}
+
+		return sections;
+	});
+
+	const virtualScroll = new VirtualScroll({
+		itemHeight: 30, // Approximate height of each item
+		overscan: 5,
+		totalItems: () => allFilteredModels.length,
+	});
+
+	const isCustom = typia.createIs<CustomModel>();
+
+	const combobox = new Combobox<string | undefined>({
+		floatingConfig: {
+			computePosition: { placement: "bottom-start" },
+		},
+		sameWidth: true,
+		value: () => modelId,
+		onValueChange(newModelId) {
+			if (!newModelId) return;
+			onModelSelect?.(newModelId);
+			// Update query to match selected model
+			const selectedModel = models.all.find(m => m.id === newModelId);
+			if (selectedModel) {
+				query = selectedModel.id;
+			}
+		},
+		onNavigate(current, direction) {
+			const modelItems = allFilteredModels.filter(item => item.type === "model");
+			const currIdx = modelItems.findIndex(item => typeof item.content === "object" && item.content.id === current);
+
+			let nextIdx: number;
+			if (direction === "next") {
+				nextIdx = currIdx === -1 ? 0 : (currIdx + 1) % modelItems.length;
+			} else {
+				nextIdx = currIdx === -1 ? modelItems.length - 1 : (currIdx - 1 + modelItems.length) % modelItems.length;
+			}
+
+			const nextItem = modelItems[nextIdx];
+			if (!nextItem) return null;
+
+			// Scroll to the item
+			const allItems = allFilteredModels;
+			const actualIdx = allItems.findIndex(item => item === nextItem);
+			if (actualIdx !== -1) {
+				virtualScroll.scrollToIndex(actualIdx);
+			}
+
+			// Return the content for highlighting
+			return typeof nextItem.content === "object" ? nextItem.content.id : null;
+		},
+	});
+
+	$effect(() => {
+		if (modelId && selectedModel && combobox.open) {
+			untrack(() => combobox.highlight(selectedModel.id));
+		}
+	});
+</script>
+
+<div class="relative w-full">
+	<label class="mb-1.5 block text-xs font-medium text-gray-600">Model</label>
+
+	<!-- Combobox input -->
+	<input
+		class="w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm
+		text-gray-900 placeholder-gray-500 transition-colors focus:border-gray-900 focus:ring-2
+		focus:ring-gray-900/10 focus:outline-none"
+		placeholder="Search and select a model..."
+		bind:value={query}
+		{...combobox.input}
+	/>
+
+	<!-- Combobox content -->
+	<div
+		class="absolute z-50 mt-1 hidden max-h-80 w-full overflow-hidden rounded-lg border
+		border-gray-200 bg-white shadow-lg data-[open]:block"
+		{...combobox.content}
+		popover={undefined}
+	>
+		<!-- Virtualized model list -->
+		<div class="max-h-80 overflow-y-auto" {...virtualScroll.container}>
+			{#snippet modelEntry(model: Model | CustomModel, trending?: boolean)}
+				{@const [nameSpace, modelName] = model.id.split("/")}
+				<div
+					class="flex w-full cursor-pointer items-center px-3 py-2 text-sm
+						hover:bg-gray-50 data-[highlighted]:bg-gray-100"
+					{...combobox.getOption(model.id)}
+				>
+					{#if trending}
+						<div class="mr-1.5 size-4 text-yellow-400">
+							<IconStar />
+						</div>
+					{/if}
+
+					{#if modelName}
+						<span class="inline-flex items-center">
+							<span class="text-gray-500">{nameSpace}</span>
+							<span class="mx-1 text-gray-300">/</span>
+							<span class="text-black">{modelName}</span>
+						</span>
+					{:else}
+						<span class="text-black">{nameSpace}</span>
+					{/if}
+
+					{#if "pipeline_tag" in model && model.pipeline_tag === "image-text-to-text"}
+						<Tooltip openDelay={100}>
+							{#snippet trigger(tooltip)}
+								<div
+									class="ml-2 grid size-5 place-items-center rounded bg-gray-500/10 text-gray-500"
+									{...tooltip.trigger}
+								>
+									<IconEye class="size-3.5" />
+								</div>
+							{/snippet}
+							Image text-to-text
+						</Tooltip>
+					{/if}
+
+					{#if isCustom(model)}
+						<Tooltip openDelay={100}>
+							{#snippet trigger(tooltip)}
+								<div
+									class="ml-2 grid size-5 place-items-center rounded bg-gray-500/10 text-gray-500"
+									{...tooltip.trigger}
+								>
+									<IconCube class="size-3.5" />
+								</div>
+							{/snippet}
+							Custom Model
+						</Tooltip>
+					{/if}
+				</div>
+			{/snippet}
+
+			<!-- Virtual scroll container -->
+			<div style="height: {virtualScroll.totalHeight}px; position: relative;">
+				<div style="transform: translateY({virtualScroll.offsetY}px);">
+					{#each virtualScroll.getVisibleItems(allFilteredModels) as { item }}
+						{#if item.type === "header"}
+							<div class="bg-gray-50 px-3 py-1.5 text-xs font-medium text-gray-500">{item.content}</div>
+						{:else}
+							{@render modelEntry(item.content, item.trending)}
+						{/if}
+					{/each}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>