[Assitants] Community | User tabs (#773)

* [Assistants] Add pagination

* [Assitants] Community | User tabs

* format

* minimize diff

* Update src/routes/assistants/+page.svelte

Co-authored-by: Victor Muštar <victor.mustar@gmail.com>

* use data.user

* rm unused import

* Use a href & simplify overall

* lint

* it will never be a button

* statements need to be reactive

* format

* set filter differntly

* Revert "set filter differntly"

This reverts commit fc8a2fc67463fb5ad39be3c3ae16ce74caa1f05d.

* use inline

* avoid ugly image change

* fix query

* ui update

* update link to profiles

* link to HF profile

* dark mode

* Update +page.svelte

* refactor getHref to be more descriptive

* Preserve `user` searchQuery when chaning model ids

* `getHref` utility

* dont show single "Community" btn for non-logged in users

* fix iterator

---------

Co-authored-by: Victor Muštar <victor.mustar@gmail.com>

src/lib/components/Pagination.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { page } from "$app/stores";
+	import { getHref } from "$lib/utils/getHref";
 	import PaginationArrow from "./PaginationArrow.svelte";
 
 	export let classNames = "";
@@ -12,12 +13,6 @@
 	$: pageIndex = parseInt($page.url.searchParams.get("p") ?? "0");
 	$: pageIndexes = getPageIndexes(pageIndex, numTotalPages);
 
-	function getHref(url: URL | string, pageIdx: number) {
-		const newUrl = new URL(url);
-		newUrl.searchParams.set("p", pageIdx.toString());
-		return newUrl.toString();
-	}
-
 	function getPageIndexes(pageIdx: number, nTotalPages: number) {
 		let pageIdxs: number[] = [];
 
@@ -66,7 +61,7 @@
 		>
 			<li>
 				<PaginationArrow
-					href={getHref($page.url, pageIndex - 1)}
+					href={getHref($page.url, { newKeys: { p: (pageIndex - 1).toString() } })}
 					direction="previous"
 					isDisabled={pageIndex - 1 < 0}
 				/>
@@ -81,7 +76,7 @@
 							: ''}
 						"
 						class:pointer-events-none={pageIdx === ELLIPSIS_IDX || pageIndex === pageIdx}
-						href={getHref($page.url, pageIdx)}
+						href={getHref($page.url, { newKeys: { p: pageIdx.toString() } })}
 					>
 						{pageIdx === ELLIPSIS_IDX ? "..." : pageIdx + 1}
 					</a>
@@ -89,7 +84,7 @@
 			{/each}
 			<li>
 				<PaginationArrow
-					href={getHref($page.url, pageIndex + 1)}
+					href={getHref($page.url, { newKeys: { p: (pageIndex + 1).toString() } })}
 					direction="next"
 					isDisabled={pageIndex + 1 >= numTotalPages}
 				/>

src/lib/components/chat/AssistantIntroduction.svelte

@@ -47,8 +47,7 @@
 					<p class="pt-2 text-sm text-gray-400 dark:text-gray-500">
 						Created by <a
 							class="hover:underline"
-							href="https://hf.co/{assistant.createdByName}"
-							target="_blank"
+							href="{base}/assistants?user={assistant.createdByName}"
 						>
 							{assistant.createdByName}
 						</a>

src/lib/utils/getHref.ts

@@ -0,0 +1,41 @@
+export function getHref(
+	url: URL | string,
+	modifications: {
+		newKeys?: Record<string, string | undefined | null>;
+		existingKeys?: { behaviour: "delete_except" | "delete"; keys: string[] };
+	}
+) {
+	const newUrl = new URL(url);
+	const { newKeys, existingKeys } = modifications;
+
+	// exsiting keys logic
+	if (existingKeys) {
+		const { behaviour, keys } = existingKeys;
+		if (behaviour === "delete") {
+			for (const key of keys) {
+				newUrl.searchParams.delete(key);
+			}
+		} else {
+			// delete_except
+			const keysToPreserve = keys;
+			for (const key of [...newUrl.searchParams.keys()]) {
+				if (!keysToPreserve.includes(key)) {
+					newUrl.searchParams.delete(key);
+				}
+			}
+		}
+	}
+
+	// new keys logic
+	if (newKeys) {
+		for (const [key, val] of Object.entries(newKeys)) {
+			if (val) {
+				newUrl.searchParams.set(key, val);
+			} else {
+				newUrl.searchParams.delete(key);
+			}
+		}
+	}
+
+	return newUrl.toString();
+}

src/routes/assistant/[assistantId]/+page.svelte

@@ -73,8 +73,7 @@
 			<p class="mt-2 text-sm text-gray-500">
 				Created by <a
 					class="hover:underline"
-					href="https://hf.co/{data.assistant.createdByName}"
-					target="_blank"
+					href="{base}/assistants?user={data.assistant.createdByName}"
 				>
 					{data.assistant.createdByName}
 				</a>

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

@@ -2,7 +2,7 @@ import { base } from "$app/paths";
 import { ENABLE_ASSISTANTS } from "$env/static/private";
 import { collections } from "$lib/server/database.js";
 import type { Assistant } from "$lib/types/Assistant";
-import { redirect } from "@sveltejs/kit";
+import { error, redirect } from "@sveltejs/kit";
 import type { Filter } from "mongodb";
 
 const NUM_PER_PAGE = 24;
@@ -14,12 +14,21 @@ export const load = async ({ url }) => {
 
 	const modelId = url.searchParams.get("modelId");
 	const pageIndex = parseInt(url.searchParams.get("p") ?? "0");
+	const createdByName = url.searchParams.get("user");
+
+	if (createdByName) {
+		const existingUser = await collections.users.findOne({ username: createdByName });
+		if (!existingUser) {
+			throw error(404, `User "${createdByName}" doesn't exist`);
+		}
+	}
 
 	// fetch the top assistants sorted by user count from biggest to smallest, filter out all assistants with only 1 users. filter by model too if modelId is provided
 	const filter: Filter<Assistant> = {
 		userCount: { $gt: 1 },
 		modelId: modelId ?? { $exists: true },
 		featured: true,
+		...(createdByName && { createdByName }),
 	};
 	const assistants = await collections.assistants
 		.find(filter)

src/routes/assistants/+page.svelte

@@ -10,16 +10,22 @@
 
 	import CarbonAdd from "~icons/carbon/add";
 	import CarbonHelpFilled from "~icons/carbon/help-filled";
+	import CarbonClose from "~icons/carbon/close";
+	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
+	import CarbonEarthAmerica from "~icons/carbon/earth-americas-filled";
 	import Pagination from "$lib/components/Pagination.svelte";
+	import { getHref } from "$lib/utils/getHref";
 
 	export let data: PageData;
 
+	$: assistantsCreator = $page.url.searchParams.get("user");
+	$: createdByMe = data.user?.username && data.user.username === assistantsCreator;
+
 	const onModelChange = (e: Event) => {
-		const newUrl = new URL($page.url);
-		newUrl.search = ""; // clear searchParams (such as "p" for pagination)
-		if ((e.target as HTMLSelectElement).value) {
-			newUrl.searchParams.set("modelId", (e.target as HTMLSelectElement).value);
-		}
+		const newUrl = getHref($page.url, {
+			newKeys: { modelId: (e.target as HTMLSelectElement).value },
+			existingKeys: { behaviour: "delete_except", keys: ["user"] },
+		});
 		goto(newUrl);
 	};
 </script>
@@ -79,8 +85,60 @@
 				<CarbonAdd />Create New assistant
 			</a>
 		</div>
-		<div class="mt-10 grid grid-cols-2 gap-3 sm:gap-5 md:grid-cols-3 lg:grid-cols-4">
-			{#each data.assistants as assistant}
+
+		<div class="mt-7 flex items-center gap-x-2 text-sm">
+			{#if assistantsCreator && !createdByMe}
+				<div
+					class="flex items-center gap-1.5 rounded-full border border-gray-300 bg-gray-50 px-3 py-1 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+				>
+					{assistantsCreator}'s Assistants
+					<a
+						href={getHref($page.url, {
+							existingKeys: { behaviour: "delete", keys: ["user", "modelId", "p"] },
+						})}
+						class="group"
+						><CarbonClose
+							class="text-xs group-hover:text-gray-800 dark:group-hover:text-gray-300"
+						/></a
+					>
+				</div>
+				{#if isHuggingChat}
+					<a
+						href="https://hf.co/{assistantsCreator}"
+						target="_blank"
+						class="ml-auto flex items-center text-xs text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
+						><CarbonArrowUpRight class="mr-1 flex-none text-[0.58rem]" target="_blank" />View {assistantsCreator}
+						on HF</a
+					>
+				{/if}
+			{:else if data.user?.username}
+				<a
+					href={getHref($page.url, {
+						existingKeys: { behaviour: "delete", keys: ["user", "modelId", "p"] },
+					})}
+					class="flex items-center gap-1.5 rounded-full border px-3 py-1 {!assistantsCreator
+						? 'border-gray-300 bg-gray-50  dark:border-gray-600 dark:bg-gray-700 dark:text-white'
+						: 'border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-300'}"
+				>
+					<CarbonEarthAmerica class="text-xs" />
+					Community
+				</a>
+				<a
+					href={getHref($page.url, {
+						newKeys: { user: data.user.username },
+						existingKeys: { behaviour: "delete", keys: ["modelId", "p"] },
+					})}
+					class="flex items-center gap-1.5 rounded-full border px-3 py-1 {assistantsCreator &&
+					createdByMe
+						? 'border-gray-300 bg-gray-50  dark:border-gray-600 dark:bg-gray-700 dark:text-white'
+						: 'border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-300'}"
+					>{data.user.username}
+				</a>
+			{/if}
+		</div>
+
+		<div class="mt-8 grid grid-cols-2 gap-3 sm:gap-5 md:grid-cols-3 lg:grid-cols-4">
+			{#each data.assistants as assistant (assistant._id)}
 				<a
 					href="{base}/assistant/{assistant._id}"
 					class="flex flex-col items-center justify-center overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
@@ -110,8 +168,7 @@
 						<p class="mt-auto pt-2 text-xs text-gray-400 dark:text-gray-500">
 							Created by <a
 								class="hover:underline"
-								href="https://hf.co/{assistant.createdByName}"
-								target="_blank"
+								href="{base}/assistants?user={assistant.createdByName}"
 							>
 								{assistant.createdByName}
 							</a>

src/routes/settings/assistants/[assistantId]/+page.svelte

@@ -62,7 +62,7 @@
 			<p class="text-sm text-gray-500">
 				Model: <span class="font-semibold"> {assistant?.modelId} </span>
 				<span class="text-gray-300">•</span> Created by
-				<a class="underline" target="_blank" href={"https://hf.co/" + assistant?.createdByName}>
+				<a class="underline" href="{base}/assistants?user={assistant?.createdByName}">
 					{assistant?.createdByName}
 				</a>
 			</p>