virtualization wip

package.json

@@ -52,7 +52,7 @@
 		"highlight.js": "^11.10.0",
 		"jiti": "^2.4.2",
 		"jsdom": "^26.0.0",
-		"melt": "^0.36.0",
+		"melt": "^0.40.0",
 		"openai": "^4.90.0",
 		"playwright": "^1.52.0",
 		"postcss": "^8.4.38",

pnpm-lock.yaml

@@ -136,8 +136,8 @@ importers:
         specifier: ^26.0.0
         version: 26.1.0
       melt:
-        specifier: ^0.36.0
-        version: 0.36.0(@floating-ui/[email protected])([email protected])
+        specifier: ^0.40.0
+        version: 0.40.0(@floating-ui/[email protected])([email protected])
       openai:
         specifier: ^4.90.0
         version: 4.90.0([email protected])([email protected])
@@ -1833,6 +1833,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
+  [email protected]:
+    resolution: {integrity: sha512-7Ke1jyybbbPZyZXFxEftUtxFGLMpE2n6A+z//m4CRDlj0hW+o3iYSmh8nFlYMurOiJVDmJRilUQtJr08KfIxlg==}
+
   [email protected]:
     resolution: {integrity: sha512-qfqtYan3rxrnCk1VYaA4H+Ms9xdpPqvLZa6xmMgFvhO32x7/3J/ExcTd6qpxM0vH2GdMI+poehyBZvqfMTto8A==}
 
@@ -2278,8 +2281,8 @@ packages:
     resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
     engines: {node: '>= 0.8'}
 
-  melt@0.36.0:
-    resolution: {integrity: sha512-lJdUuPvsCZs7zpcL2iSvxerHxv3QuM91FoTbdsliOQ2+J3fR4ADqUN878J4kkQSzzHlWqyedQmEBDP6U3iEWgA==}
+  melt@0.40.0:
+    resolution: {integrity: sha512-G+urf5f2Cy62cXiPQ+nf3muscjIE9e38kjDWZckU4x08bDaP+hryJ9rrsu81V1x0ZAgEwnMAMKVAFrEdomOYWw==}
     peerDependencies:
       '@floating-ui/dom': ^1.6.0
       svelte: ^5.30.1
@@ -2380,11 +2383,6 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  [email protected]:
-    resolution: {integrity: sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==}
-    engines: {node: ^18 || >=20}
-    hasBin: true
-
   [email protected]:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -2990,6 +2988,9 @@ packages:
     resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
+  [email protected]:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+
   [email protected]:
     resolution: {integrity: sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==}
 
@@ -4954,6 +4955,10 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    dependencies:
+      tabbable: 6.2.0
+
   [email protected]: {}
 
   [email protected]:
@@ -5394,12 +5399,12 @@ snapshots:
 
   [email protected]: {}
 
-  melt@0.36.0(@floating-ui/[email protected])([email protected]):
+  melt@0.40.0(@floating-ui/[email protected])([email protected]):
     dependencies:
       '@floating-ui/dom': 1.6.13
       dequal: 2.0.3
+      focus-trap: 7.6.5
       jest-axe: 9.0.0
-      nanoid: 5.1.5
       runed: 0.23.4([email protected])
       svelte: 5.38.7
 
@@ -5480,8 +5485,6 @@ snapshots:
 
   [email protected]: {}
 
-  [email protected]: {}
-
   [email protected]: {}
 
   [email protected]: {}
@@ -6120,6 +6123,8 @@ snapshots:
       '@pkgr/core': 0.1.1
       tslib: 2.8.1
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]([email protected]):

src/lib/components/inference-playground/model-selector-modal.svelte

@@ -2,6 +2,7 @@
 	import { autofocus } from "$lib/attachments/autofocus.js";
 	import type { ConversationClass } from "$lib/state/conversations.svelte";
 	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 { noop } from "$lib/utils/noop.js";
 	import fuzzysearch from "$lib/utils/search.js";
@@ -26,6 +27,56 @@
 
 	let { onModelSelect, onClose, conversation }: Props = $props();
 
+	let backdropEl = $state<HTMLDivElement>();
+	let query = $state("");
+
+	const trending = $derived(fuzzysearch({ needle: query, haystack: models.trending, property: "id" }));
+	const other = $derived(fuzzysearch({ needle: query, haystack: models.nonTrending, property: "id" }));
+	const custom = $derived(fuzzysearch({ needle: query, haystack: models.custom, property: "id" }));
+
+	// Combine all filtered models into sections for virtualization
+	type SectionItem =
+		| { type: "header"; content: string }
+		| { type: "model"; content: Model | CustomModel | "__custom__"; 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 }));
+		}
+
+		sections.push({ type: "header", content: "Custom endpoints" });
+		custom.forEach(model => sections.push({ type: "model", content: model }));
+		sections.push({ type: "model", content: "__custom__" }); // Add custom button
+
+		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,
+	});
+
+	function handleBackdropClick(event: MouseEvent) {
+		event.stopPropagation();
+		if (window?.getSelection()?.toString()) {
+			return;
+		}
+		if (event.target === backdropEl) {
+			onClose?.();
+		}
+	}
+
+	const isCustom = typia.createIs<CustomModel>();
+
 	const combobox = new Combobox<string | undefined>({
 		onOpenChange(o) {
 			if (!o) onClose?.();
@@ -40,6 +91,16 @@
 			onModelSelect?.(modelId);
 			onClose?.();
 		},
+		onNavigate(current, direction) {
+			const currIdx = allFilteredModels.findIndex(item => item.type === "model" && item.content === current);
+			// TODO: get next/prev item, scroll to it, and return its content. Make sure
+			// to wrap around.
+			if (direction === "next") {
+			}
+			if (direction === "prev") {
+			}
+			return null;
+		},
 	});
 	$effect(() => {
 		untrack(() => combobox.highlight(conversation.model.id));
@@ -48,25 +109,6 @@
 			combobox.open = true;
 		});
 	});
-
-	let backdropEl = $state<HTMLDivElement>();
-	let query = $state("");
-
-	const trending = $derived(fuzzysearch({ needle: query, haystack: models.trending, property: "id" }));
-	const other = $derived(fuzzysearch({ needle: query, haystack: models.nonTrending, property: "id" }));
-	const custom = $derived(fuzzysearch({ needle: query, haystack: models.custom, property: "id" }));
-
-	function handleBackdropClick(event: MouseEvent) {
-		event.stopPropagation();
-		if (window?.getSelection()?.toString()) {
-			return;
-		}
-		if (event.target === backdropEl) {
-			onClose?.();
-		}
-	}
-
-	const isCustom = typia.createIs<CustomModel>();
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -91,6 +133,7 @@
 			class="max-h-[220px] overflow-x-hidden overflow-y-auto md:max-h-[300px]"
 			{...combobox.content}
 			popover={undefined}
+			{...virtualScroll.container}
 		>
 			{#snippet modelEntry(model: Model | CustomModel, trending?: boolean)}
 				{@const [nameSpace, modelName] = model.id.split("/")}
@@ -168,38 +211,34 @@
 					{/if}
 				</div>
 			{/snippet}
-			{#if trending.length > 0}
-				<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Trending</div>
-				{#each trending as model}
-					{@render modelEntry(model, true)}
-				{/each}
-			{/if}
-			<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Custom endpoints</div>
-			{#if custom.length > 0}
-				{#each custom as model}
-					{@render modelEntry(model, false)}
-				{/each}
-			{/if}
-			<div
-				class="flex w-full cursor-pointer items-center gap-2 px-2 py-1.5 text-sm text-gray-500 data-[highlighted]:bg-blue-500/15 data-[highlighted]:text-blue-600 dark:text-gray-400 dark:data-[highlighted]:text-blue-300"
-				{...combobox.getOption("__custom__", "custom", () => {
-					onClose?.();
-					openCustomModelConfig({
-						onSubmit: model => {
-							onModelSelect?.(model.id);
-						},
-					});
-				})}
-			>
-				<IconAdd class="rounded bg-blue-500/10 text-blue-600" />
-				Add a custom endpoint
+
+			<!-- 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="px-2 py-1.5 text-xs font-medium text-gray-500">{item.content}</div>
+						{:else if item.content === "__custom__"}
+							<div
+								class="flex w-full cursor-pointer items-center gap-2 px-2 py-1.5 text-sm text-gray-500 data-[highlighted]:bg-blue-500/15 data-[highlighted]:text-blue-600 dark:text-gray-400 dark:data-[highlighted]:text-blue-300"
+								{...combobox.getOption("__custom__", "custom", () => {
+									onClose?.();
+									openCustomModelConfig({
+										onSubmit: model => {
+											onModelSelect?.(model.id);
+										},
+									});
+								})}
+							>
+								<IconAdd class="rounded bg-blue-500/10 text-blue-600" />
+								Add a custom endpoint
+							</div>
+						{:else}
+							{@render modelEntry(item.content, item.trending)}
+						{/if}
+					{/each}
+				</div>
 			</div>
-			{#if other.length > 0}
-				<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Other models</div>
-				{#each other as model}
-					{@render modelEntry(model, false)}
-				{/each}
-			{/if}
 		</div>
 	</div>
 </div>

src/lib/spells/virtual-scroll.svelte.ts

@@ -0,0 +1,79 @@
+import type { MaybeGetter } from "$lib/types.js";
+import { ElementSize } from "runed";
+import { createAttachmentKey } from "svelte/attachments";
+import type { HTMLAttributes } from "svelte/elements";
+import { extract } from "./extract.svelte";
+
+interface VirtualScrollOptions {
+	totalItems?: MaybeGetter<number>;
+	itemHeight: MaybeGetter<number>;
+	overscan?: MaybeGetter<number | undefined>;
+}
+
+export class VirtualScroll {
+	#options: VirtualScrollOptions;
+	itemHeight = $derived.by(() => extract(this.#options.itemHeight));
+	overscan = $derived.by(() => extract(this.#options.overscan, 10));
+	totalItems = $derived.by(() => extract(this.#options.totalItems, 0));
+
+	#scrollTop = $state(0);
+
+	#containerEl = $state<HTMLElement>();
+	#containerSize = new ElementSize(() => this.#containerEl);
+
+	constructor(options: VirtualScrollOptions) {
+		this.#options = options;
+	}
+
+	get scrollTop() {
+		return this.#scrollTop;
+	}
+
+	set scrollTop(value: number) {
+		this.#scrollTop = value;
+	}
+
+	get visibleRange() {
+		const startIndex = Math.floor(this.#scrollTop / this.itemHeight);
+		const endIndex = Math.min(
+			startIndex + Math.ceil(this.#containerSize.height / this.itemHeight),
+			this.totalItems - 1,
+		);
+
+		return {
+			start: Math.max(0, startIndex - this.overscan),
+			end: Math.min(this.totalItems - 1, endIndex + this.overscan),
+		};
+	}
+
+	get totalHeight() {
+		return this.totalItems * this.itemHeight;
+	}
+
+	get offsetY() {
+		return this.visibleRange.start * this.itemHeight;
+	}
+
+	getVisibleItems<T>(items: T[]): Array<{ item: T; index: number }> {
+		const { start, end } = this.visibleRange;
+		return items.slice(start, end + 1).map((item, i) => ({
+			item,
+			index: start + i,
+		}));
+	}
+
+	#attachmentKey = createAttachmentKey();
+	get container() {
+		return {
+			onscroll: e => {
+				this.scrollTop = e.currentTarget.scrollTop;
+			},
+			[this.#attachmentKey]: node => {
+				this.#containerEl = node;
+				return () => {
+					this.#containerEl = undefined;
+				};
+			},
+		} as const satisfies HTMLAttributes<HTMLElement>;
+	}
+}