Merge branch 'main' of https://github.com/huggingface/chat-ui into front/setting_page_theme

Fixes huggingface#746: Settings dark mode - merge

Author: KartikGS

src/lib/components/Pagination.svelte

@@ -12,8 +12,8 @@
 	$: pageIndex = parseInt($page.url.searchParams.get("p") ?? "0");
 	$: pageIndexes = getPageIndexes(pageIndex, numTotalPages);
 
-	function getHref(pageIdx: number) {
-		const newUrl = new URL($page.url);
+	function getHref(url: URL | string, pageIdx: number) {
+		const newUrl = new URL(url);
 		newUrl.searchParams.set("p", pageIdx.toString());
 		return newUrl.toString();
 	}
@@ -66,7 +66,7 @@
 		>
 			<li>
 				<PaginationArrow
-					href={getHref(pageIndex - 1)}
+					href={getHref($page.url, pageIndex - 1)}
 					direction="previous"
 					isDisabled={pageIndex - 1 < 0}
 				/>
@@ -81,15 +81,15 @@
 							: ''}
 						"
 						class:pointer-events-none={pageIdx === ELLIPSIS_IDX || pageIndex === pageIdx}
-						href={getHref(pageIdx)}
+						href={getHref($page.url, pageIdx)}
 					>
 						{pageIdx === ELLIPSIS_IDX ? "..." : pageIdx + 1}
 					</a>
 				</li>
 			{/each}
 			<li>
 				<PaginationArrow
-					href={getHref(pageIndex + 1)}
+					href={getHref($page.url, pageIndex + 1)}
 					direction="next"
 					isDisabled={pageIndex + 1 >= numTotalPages}
 				/>

src/routes/assistants/+page.server.ts

@@ -32,6 +32,7 @@ export const load = async ({ url }) => {
 
 	return {
 		assistants: JSON.parse(JSON.stringify(assistants)) as Array<Assistant>,
+		selectedModel: modelId ?? "",
 		numTotalItems,
 		numItemsPerPage: NUM_PER_PAGE,
 	};

src/routes/assistants/+page.svelte

@@ -14,13 +14,10 @@
 
 	export let data: PageData;
 
-	let selectedModel = $page.url.searchParams.get("modelId") ?? "";
-
 	const onModelChange = (e: Event) => {
 		const newUrl = new URL($page.url);
-		if ((e.target as HTMLSelectElement).value === "") {
-			newUrl.searchParams.delete("modelId");
-		} else {
+		newUrl.search = ""; // clear searchParams (such as "p" for pagination)
+		if ((e.target as HTMLSelectElement).value) {
 			newUrl.searchParams.set("modelId", (e.target as HTMLSelectElement).value);
 		}
 		goto(newUrl);
@@ -66,7 +63,7 @@
 		<div class="mt-6 flex justify-between gap-2 max-sm:flex-col sm:items-center">
 			<select
 				class="mt-1 h-[34px] rounded-lg border border-gray-300 bg-gray-50 px-2 text-sm text-gray-900 focus:border-blue-700 focus:ring-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
-				bind:value={selectedModel}
+				bind:value={data.selectedModel}
 				on:change={onModelChange}
 			>
 				<option value="">All models</option>