Navigation: load discussion

src/lib/components/InfiniteScroll.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { onDestroy, createEventDispatcher } from "svelte";
+
+	export let hasMore: boolean = true;
+
+	const dispatch = createEventDispatcher();
+
+	let isLoadMore: boolean = false;
+	let component: HTMLDivElement;
+	let threshold: number = 10;
+	$: {
+		if (component) {
+			const element: HTMLElement = component.parentNode as HTMLElement;
+			const onScroll = (e: Event) => {
+				const target = e.target as HTMLElement;
+
+				const offset: number = target.scrollHeight - target.clientHeight - target.scrollTop;
+
+				if (offset <= threshold) {
+					if (!isLoadMore && hasMore) {
+						dispatch("loadMore");
+					}
+					isLoadMore = true;
+				} else {
+					isLoadMore = false;
+				}
+			};
+
+			element.addEventListener("scroll", onScroll);
+			element.addEventListener("resize", onScroll);
+			// Cleanup to prevent memory leaks
+			onDestroy(() => {
+				element.removeEventListener("scroll", onScroll);
+				element.removeEventListener("resize", onScroll);
+			});
+		}
+	}
+</script>
+
+<div bind:this={component} style="width:0px;" />

src/lib/components/NavMenu.svelte

@@ -6,6 +6,7 @@
 	import { isAborted } from "$lib/stores/isAborted";
 	import { env as envPublic } from "$env/dynamic/public";
 	import NavConversationItem from "./NavConversationItem.svelte";
+	import InfiniteScroll from "./InfiniteScroll.svelte";
 	import type { LayoutData } from "../../routes/$types";
 	import type { ConvSidebar } from "$lib/types/ConvSidebar";
 	import type { Model } from "$lib/types/Model";
@@ -14,6 +15,7 @@
 	export let conversations: ConvSidebar[] = [];
 	export let canLogin: boolean;
 	export let user: LayoutData["user"];
+	export let hasMore: boolean;
 
 	function handleNewChatClick() {
 		isAborted.set(true);
@@ -75,6 +77,7 @@
 			{/each}
 		{/if}
 	{/each}
+	<InfiniteScroll {hasMore} on:loadMore />
 </div>
 <div
 	class="mt-0.5 flex flex-col gap-1 rounded-r-xl p-3 text-sm md:bg-gradient-to-l md:from-gray-50 md:dark:from-gray-800/30"

src/lib/stores/convUpdate.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export default writable<string | null>(null);

src/routes/+layout.svelte

@@ -14,10 +14,12 @@
 
 	import { shareConversation } from "$lib/shareConversation";
 	import { UrlDependency } from "$lib/types/UrlDependency";
+	import type { ConvSidebar } from "$lib/types/ConvSidebar";
 
 	import Toast from "$lib/components/Toast.svelte";
 	import NavMenu from "$lib/components/NavMenu.svelte";
 	import MobileNav from "$lib/components/MobileNav.svelte";
+	import convUpdate from "$lib/stores/convUpdate";
 	import titleUpdate from "$lib/stores/titleUpdate";
 	import DisclaimerModal from "$lib/components/DisclaimerModal.svelte";
 	import ExpandNavigation from "$lib/components/ExpandNavigation.svelte";
@@ -26,6 +28,10 @@
 
 	let isNavOpen = false;
 	let isNavCollapsed = false;
+	let hasMore = true;
+	let extraConversation: [] = [];
+	let total = 300;
+	let extra = 50;
 
 	let errorToastTimeout: ReturnType<typeof setTimeout>;
 	let currentError: string | null;
@@ -60,6 +66,7 @@
 				return;
 			}
 
+			fetchData();
 			if ($page.params.id !== id) {
 				await invalidate(UrlDependency.ConversationList);
 			} else {
@@ -86,6 +93,7 @@
 				return;
 			}
 
+			fetchData();
 			await invalidate(UrlDependency.ConversationList);
 		} catch (err) {
 			console.error(err);
@@ -97,6 +105,47 @@
 		clearTimeout(errorToastTimeout);
 	});
 
+	//for getting extra conversation and maintaning consistency
+	async function fetchData(call: string = "") {
+		if (call === "" && extraConversation.length === 0) return;
+		try {
+			const url =
+				call === "extra"
+					? `${base}/conversations/?limit=${extra}&skip=${total + extraConversation.length}`
+					: `${base}/conversations/?limit=${extraConversation.length}&skip=${total}`;
+			const res = await fetch(url, {
+				method: "GET",
+				headers: {
+					"Content-Type": "application/json",
+				},
+			});
+
+			if (!res.ok) {
+				$error = "Error while fetching onversations, try again.";
+				return;
+			}
+
+			const conversations: [] = (await res.json()).conversations;
+			conversations.forEach((conv: ConvSidebar) => (conv.updatedAt = new Date(conv.updatedAt)));
+
+			if (call == "extra") extraConversation = [...extraConversation, ...conversations];
+			else extraConversation = [...conversations];
+
+			if (conversations.length == 0) hasMore = false;
+			else hasMore = true;
+		} catch (err) {
+			console.error(err);
+			$error = String(err);
+		}
+	}
+
+	$: data.conversations = [...data.conversations.slice(0, total), ...extraConversation];
+
+	$: if (extraConversation.findIndex(({ id }) => id === $convUpdate) != -1) {
+		fetchData();
+		$convUpdate = null;
+	}
+
 	$: if ($error) onError();
 
 	$: if ($titleUpdate) {
@@ -105,6 +154,7 @@
 		if (convIdx != -1) {
 			data.conversations[convIdx].title = $titleUpdate?.title ?? data.conversations[convIdx].title;
 		}
+		fetchData();
 		// update data.conversations
 		data.conversations = [...data.conversations];
 
@@ -204,9 +254,13 @@
 			conversations={data.conversations}
 			user={data.user}
 			canLogin={data.user === undefined && data.loginEnabled}
+			{hasMore}
 			on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
 			on:deleteConversation={(ev) => deleteConversation(ev.detail)}
 			on:editConversationTitle={(ev) => editConversationTitle(ev.detail.id, ev.detail.title)}
+			on:loadMore={() => {
+				fetchData("extra");
+			}}
 		/>
 	</MobileNav>
 	<nav
@@ -216,9 +270,13 @@
 			conversations={data.conversations}
 			user={data.user}
 			canLogin={data.user === undefined && data.loginEnabled}
+			{hasMore}
 			on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
 			on:deleteConversation={(ev) => deleteConversation(ev.detail)}
 			on:editConversationTitle={(ev) => editConversationTitle(ev.detail.id, ev.detail.title)}
+			on:loadMore={() => {
+				fetchData("extra");
+			}}
 		/>
 	</nav>
 	{#if currentError}

src/routes/conversation/[id]/+page.svelte

@@ -12,6 +12,7 @@
 	import { webSearchParameters } from "$lib/stores/webSearchParameters";
 	import type { Message } from "$lib/types/Message";
 	import type { MessageUpdate } from "$lib/types/MessageUpdate";
+	import convUpdate from "$lib/stores/convUpdate";
 	import titleUpdate from "$lib/stores/titleUpdate";
 	import file2base64 from "$lib/utils/file2base64";
 	import { addChildren } from "$lib/utils/tree/addChildren";
@@ -264,6 +265,7 @@
 		} finally {
 			loading = false;
 			pending = false;
+			$convUpdate = $page.params.id;
 			await invalidateAll();
 		}
 	}

src/routes/conversations/+server.ts

@@ -0,0 +1,64 @@
+import type { RequestHandler } from "./$types";
+import { collections } from "$lib/server/database";
+import type { Conversation } from "$lib/types/Conversation";
+import { ObjectId } from "mongodb";
+import { defaultModel } from "$lib/server/models";
+import { authCondition } from "$lib/server/auth";
+import type { ConvSidebar } from "$lib/types/ConvSidebar";
+
+export const GET: RequestHandler = async ({ url, locals }) => {
+	const settings = await collections.settings.findOne(authCondition(locals));
+	const limit = parseInt(url.searchParams.get("limit") ?? "300");
+	const skip = parseInt(url.searchParams.get("skip") ?? "50");
+
+	const conversations = await collections.conversations
+		.find(authCondition(locals))
+		.skip(skip)
+		.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(limit)
+		.toArray();
+
+	const userAssistants = settings?.assistants?.map((assistantId) => assistantId.toString()) ?? [];
+
+	const assistantIds = [
+		...userAssistants.map((el) => new ObjectId(el)),
+		...(conversations.map((conv) => conv.assistantId).filter((el) => !!el) as ObjectId[]),
+	];
+
+	const assistants = await collections.assistants.find({ _id: { $in: assistantIds } }).toArray();
+
+	return new Response(
+		JSON.stringify({
+			conversations: conversations.map((conv) => {
+				if (settings?.hideEmojiOnSidebar) {
+					conv.title = conv.title.replace(/\p{Emoji}/gu, "");
+				}
+
+				// remove invalid unicode and trim whitespaces
+				conv.title = conv.title.replace(/\uFFFD/gu, "").trimStart();
+
+				return {
+					id: conv._id.toString(),
+					title: conv.title,
+					model: conv.model ?? defaultModel,
+					updatedAt: conv.updatedAt,
+					assistantId: conv.assistantId?.toString(),
+					avatarHash:
+						conv.assistantId &&
+						assistants.find((a) => a._id.toString() === conv.assistantId?.toString())?.avatar,
+				};
+			}) satisfies ConvSidebar[],
+		}),
+		{ headers: { "Content-Type": "application/json" } }
+	);
+};