feat: infinite scrolling list of conversations (#1564)

* wip

* wip: infinite scrolling continues

* fix: merge regression

* fix: infinite scrolling

* fix: unify use of base over APP_BASE

* fix: show loader properly when invalidating after reaching end of page

Author: nsarrazin

src/lib/components/InfiniteScroll.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { onMount, 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,18 @@
 	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";
+	import { CONV_NUM_PER_PAGE } from "$lib/constants/pagination";
 
 	export let conversations: ConvSidebar[];
 	export let canLogin: boolean;
 	export let user: LayoutData["user"];
 
+	export let p = 0;
+
+	let hasMore = true;
+
 	function handleNewChatClick() {
 		isAborted.set(true);
 	}
@@ -44,6 +51,34 @@
 	} 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 = [...conversations, ...newConvs];
+	}
+
+	$: if (conversations.length <= CONV_NUM_PER_PAGE) {
+		// reset p to 0 if there's only one page of content
+		// that would be caused by a data loading invalidation
+		p = 0;
+		hasMore = true;
+	}
 </script>
 
 <div class="sticky top-0 flex flex-none items-center justify-between px-1.5 py-3.5 max-sm:pt-0">
@@ -89,6 +124,9 @@
 				{/if}
 			{/each}
 		</div>
+		{#if hasMore}
+			<InfiniteScroll on:visible={handleVisible} />
+		{/if}
 	{/await}
 </div>
 <div

src/lib/constants/pagination.ts

@@ -0,0 +1 @@
+export const CONV_NUM_PER_PAGE = 30;

src/routes/+layout.server.ts

@@ -12,8 +12,9 @@ import { toolFromConfigs } from "$lib/server/tools";
 import { MetricsServer } from "$lib/server/metrics";
 import type { ToolFront, ToolInputFile } from "$lib/types/Tool";
 import { ReviewStatus } from "$lib/types/Review";
+import { base } from "$app/paths";
 
-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 +57,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(`${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

@@ -2,8 +2,7 @@ import { collections } from "$lib/server/database";
 import { models } from "$lib/server/models";
 import { authCondition } from "$lib/server/auth";
 import type { Conversation } from "$lib/types/Conversation";
-
-const NUM_PER_PAGE = 300;
+import { CONV_NUM_PER_PAGE } from "$lib/constants/pagination";
 
 export async function GET({ locals, url }) {
 	const p = parseInt(url.searchParams.get("p") ?? "0");
@@ -20,19 +19,24 @@ export async function GET({ locals, url }) {
 				assistantId: 1,
 			})
 			.sort({ updatedAt: -1 })
-			.skip(p * NUM_PER_PAGE)
-			.limit(NUM_PER_PAGE)
+			.skip(p * CONV_NUM_PER_PAGE)
+			.limit(CONV_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 });