From f3c82b67f03f3d31e1edfa5c45ad1e09cb58a3d3 Mon Sep 17 00:00:00 2001
From: Mishig <mishig.davaadorj@coloradocollege.edu>
Date: Mon, 5 Feb 2024 14:14:14 -0800
Subject: [PATCH 1/2] [Assistants] Fix/clear searchParams while changing models
 (#783)

* [Assistants] Fix/clear searchParams while changing models

* fix another reactivity bug
---
 src/lib/components/Pagination.svelte | 10 +++++-----
 src/routes/assistants/+page.svelte   |  5 ++---
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/Pagination.svelte b/src/lib/components/Pagination.svelte
index 8402d807405..0ae3e3b39e9 100644
--- a/src/lib/components/Pagination.svelte
+++ b/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,7 +81,7 @@
 							: ''}
 						"
 						class:pointer-events-none={pageIdx === ELLIPSIS_IDX || pageIndex === pageIdx}
-						href={getHref(pageIdx)}
+						href={getHref($page.url, pageIdx)}
 					>
 						{pageIdx === ELLIPSIS_IDX ? "..." : pageIdx + 1}
 					</a>
@@ -89,7 +89,7 @@
 			{/each}
 			<li>
 				<PaginationArrow
-					href={getHref(pageIndex + 1)}
+					href={getHref($page.url, pageIndex + 1)}
 					direction="next"
 					isDisabled={pageIndex + 1 >= numTotalPages}
 				/>
diff --git a/src/routes/assistants/+page.svelte b/src/routes/assistants/+page.svelte
index de64f45ff1f..02b62502a7a 100644
--- a/src/routes/assistants/+page.svelte
+++ b/src/routes/assistants/+page.svelte
@@ -18,9 +18,8 @@
 
 	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);

From 2128ce098663c1b0df350af61766a211760b4f1b Mon Sep 17 00:00:00 2001
From: Mishig <mishig.davaadorj@coloradocollege.edu>
Date: Mon, 5 Feb 2024 14:33:24 -0800
Subject: [PATCH 2/2] [Assistants] Fix selected model reactivity (#784)

---
 src/routes/assistants/+page.server.ts | 1 +
 src/routes/assistants/+page.svelte    | 4 +---
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/routes/assistants/+page.server.ts b/src/routes/assistants/+page.server.ts
index cd5094cdaf9..3c2f53459a7 100644
--- a/src/routes/assistants/+page.server.ts
+++ b/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,
 	};
diff --git a/src/routes/assistants/+page.svelte b/src/routes/assistants/+page.svelte
index 02b62502a7a..30ed9709eb9 100644
--- a/src/routes/assistants/+page.svelte
+++ b/src/routes/assistants/+page.svelte
@@ -14,8 +14,6 @@
 
 	export let data: PageData;
 
-	let selectedModel = $page.url.searchParams.get("modelId") ?? "";
-
 	const onModelChange = (e: Event) => {
 		const newUrl = new URL($page.url);
 		newUrl.search = ""; // clear searchParams (such as "p" for pagination)
@@ -65,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>