feat: infinite scrolling list of conversations

src/lib/components/InfiniteScroll.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { createEventDispatcher } from "svelte";
+
+	const dispatch = createEventDispatcher();
+	let loader: HTMLDivElement;
+	let observer: IntersectionObserver;
+	let intervalId: ReturnType<typeof setInterval> | undefined;
+
+	onMount(() => {
+		observer = new IntersectionObserver((entries) => {
+			entries.forEach((entry) => {
+				if (entry.isIntersecting) {
+					// Clear any existing interval
+					if (intervalId) {
+						clearInterval(intervalId);
+					}
+					// Start new interval that dispatches every 250ms
+					intervalId = setInterval(() => {
+						dispatch("visible");
+					}, 250);
+				} else {
+					// Clear interval when not intersecting
+					if (intervalId) {
+						clearInterval(intervalId);
+						intervalId = undefined;
+					}
+				}
+			});
+		});
+
+		observer.observe(loader);
+
+		return () => {
+			observer.disconnect();
+			if (intervalId) {
+				clearInterval(intervalId);
+			}
+		};
+	});
+</script>
+
+<div bind:this={loader} class="flex animate-pulse flex-col gap-4">
+	<div class="ml-2 h-5 w-4/5 gap-5 rounded bg-gray-200 dark:bg-gray-700" />
+	<div class="ml-2 h-5 w-4/5 gap-5 rounded bg-gray-200 dark:bg-gray-700" />
+	<div class="ml-2 h-5 w-4/5 gap-5 rounded bg-gray-200 dark:bg-gray-700" />
+</div>

src/lib/components/NavMenu.svelte

@@ -10,11 +10,19 @@
 	import type { ConvSidebar } from "$lib/types/ConvSidebar";
 	import type { Model } from "$lib/types/Model";
 	import { page } from "$app/stores";
+	import InfiniteScroll from "./InfiniteScroll.svelte";
+	import type { Conversation } from "$lib/types/Conversation";
 
 	export let conversations: Promise<ConvSidebar[]>;
 	export let canLogin: boolean;
 	export let user: LayoutData["user"];
 
+	export let p = 0;
+
+	let hasMore = true;
+
+	let scrollContainer: HTMLDivElement;
+
 	function handleNewChatClick() {
 		isAborted.set(true);
 	}
@@ -44,6 +52,27 @@
 	} as const;
 
 	const nModels: number = $page.data.models.filter((el: Model) => !el.unlisted).length;
+
+	async function handleVisible() {
+		p++;
+		const newConvs = await fetch(`${base}/api/conversations?p=${p}`)
+			.then((res) => res.json())
+			.then((convs) =>
+				convs.map(
+					(conv: Pick<Conversation, "_id" | "title" | "updatedAt" | "model" | "assistantId">) => ({
+						...conv,
+						updatedAt: new Date(conv.updatedAt),
+					})
+				)
+			)
+			.catch(() => []);
+
+		if (newConvs.length === 0) {
+			hasMore = false;
+		}
+
+		conversations = Promise.resolve([...(await conversations), ...newConvs]);
+	}
 </script>
 
 <div class="sticky top-0 flex flex-none items-center justify-between px-3 py-3.5 max-sm:pt-0">
@@ -63,6 +92,7 @@
 	</a>
 </div>
 <div
+	bind:this={scrollContainer}
 	class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl from-gray-50 px-3 pb-3 pt-2 text-[.9rem] dark:from-gray-800/30 max-sm:bg-gradient-to-t md:bg-gradient-to-l"
 >
 	{#await groupedConversations}
@@ -89,6 +119,9 @@
 				{/if}
 			{/each}
 		</div>
+		{#if hasMore}
+			<InfiniteScroll on:visible={handleVisible} />
+		{/if}
 	{/await}
 </div>
 <div

src/routes/+layout.server.ts

@@ -13,7 +13,7 @@ import { MetricsServer } from "$lib/server/metrics";
 import type { ToolFront, ToolInputFile } from "$lib/types/Tool";
 import { ReviewStatus } from "$lib/types/Review";
 
-export const load: LayoutServerLoad = async ({ locals, depends }) => {
+export const load: LayoutServerLoad = async ({ locals, depends, fetch }) => {
 	depends(UrlDependency.ConversationList);
 
 	const settings = await collections.settings.findOne(authCondition(locals));
@@ -56,24 +56,17 @@ export const load: LayoutServerLoad = async ({ locals, depends }) => {
 	const conversations =
 		nConversations === 0
 			? Promise.resolve([])
-			: collections.conversations
-					.find(authCondition(locals))
-					.sort({ updatedAt: -1 })
-					.project<
-						Pick<
-							Conversation,
-							"title" | "model" | "_id" | "updatedAt" | "createdAt" | "assistantId"
-						>
-					>({
-						title: 1,
-						model: 1,
-						_id: 1,
-						updatedAt: 1,
-						createdAt: 1,
-						assistantId: 1,
-					})
-					.limit(300)
-					.toArray();
+			: fetch(`${env.APP_BASE}/api/conversations`)
+					.then((res) => res.json())
+					.then(
+						(
+							convs: Pick<Conversation, "_id" | "title" | "updatedAt" | "model" | "assistantId">[]
+						) =>
+							convs.map((conv) => ({
+								...conv,
+								updatedAt: new Date(conv.updatedAt),
+							}))
+					);
 
 	const userAssistants = settings?.assistants?.map((assistantId) => assistantId.toString()) ?? [];
 	const userAssistantsSet = new Set(userAssistants);

src/routes/api/conversations/+server.ts

@@ -3,7 +3,7 @@ import { models } from "$lib/server/models";
 import { authCondition } from "$lib/server/auth";
 import type { Conversation } from "$lib/types/Conversation";
 
-const NUM_PER_PAGE = 300;
+const NUM_PER_PAGE = 5;
 
 export async function GET({ locals, url }) {
 	const p = parseInt(url.searchParams.get("p") ?? "0");
@@ -24,15 +24,20 @@ export async function GET({ locals, url }) {
 			.limit(NUM_PER_PAGE)
 			.toArray();
 
+		if (convs.length === 0) {
+			return Response.json([]);
+		}
+
 		const res = convs.map((conv) => ({
-			id: conv._id,
+			_id: conv._id,
+			id: conv._id, // legacy param iOS
 			title: conv.title,
 			updatedAt: conv.updatedAt,
-			modelId: conv.model,
+			model: conv.model,
+			modelId: conv.model, // legacy param iOS
 			assistantId: conv.assistantId,
 			modelTools: models.find((m) => m.id == conv.model)?.tools ?? false,
 		}));
-
 		return Response.json(res);
 	} else {
 		return Response.json({ message: "Must have session cookie" }, { status: 401 });