[Assistants] Filter on names

src/lib/server/database.ts

@@ -85,6 +85,7 @@ client.on("open", () => {
  assistants.createIndex({ userCount: 1 }).catch(console.error);
  assistants.createIndex({ featured: 1, userCount: -1 }).catch(console.error);
  assistants.createIndex({ modelId: 1, userCount: -1 }).catch(console.error);
+ assistants.createIndex({ name: "text" }).catch(console.error);
  reports.createIndex({ assistantId: 1 }).catch(console.error);
  reports.createIndex({ createdBy: 1, assistantId: 1 }).catch(console.error);
 });

src/lib/utils/debounce.ts

@@ -0,0 +1,17 @@
+/**
+ * A debounce function that works in both browser and Nodejs.
+ * For pure Nodejs work, prefer the `Debouncer` class.
+ */
+export function debounce<T extends unknown[]>(
+ callback: (...rest: T) => unknown,
+ limit: number
+): (...rest: T) => void {
+ let timer: ReturnType<typeof setTimeout>;
+
+ return function (...rest) {
+ clearTimeout(timer);
+ timer = setTimeout(() => {
+ callback(...rest);
+ }, limit);
+ };
+}

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

@@ -16,6 +16,7 @@ export const load = async ({ url, locals }) => {
  const modelId = url.searchParams.get("modelId");
  const pageIndex = parseInt(url.searchParams.get("p") ?? "0");
  const username = url.searchParams.get("user");
+ const query = url.searchParams.get("q")?.trim();
  const createdByCurrentUser = locals.user?.username && locals.user.username === username;
 
  let user: Pick<User, "_id"> | null = null;
@@ -34,11 +35,12 @@ export const load = async ({ url, locals }) => {
  ...(modelId && { modelId }),
  ...(!createdByCurrentUser && { userCount: { $gt: 1 } }),
  ...(user ? { createdById: user._id } : { featured: true }),
+ ...(query && { $text: { $search: query } }),
  };
  const assistants = await collections.assistants
  .find(filter)
  .skip(NUM_PER_PAGE * pageIndex)
- .sort({ userCount: -1 })
+ .sort({ ...(query && { score: { $meta: "textScore" } }), userCount: -1 })
  .limit(NUM_PER_PAGE)
  .toArray();
 
@@ -49,5 +51,6 @@ export const load = async ({ url, locals }) => {
  selectedModel: modelId ?? "",
  numTotalItems,
  numItemsPerPage: NUM_PER_PAGE,
+ query,
  };
 };

src/routes/assistants/+page.svelte

@@ -4,6 +4,7 @@
  import { PUBLIC_APP_ASSETS, PUBLIC_ORIGIN } from "$env/static/public";
  import { isHuggingChat } from "$lib/utils/isHuggingChat";
 
+ import { tick } from "svelte";
  import { goto } from "$app/navigation";
  import { base } from "$app/paths";
  import { page } from "$app/stores";
@@ -14,22 +15,40 @@
  import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
  import CarbonEarthAmerica from "~icons/carbon/earth-americas-filled";
  import CarbonUserMultiple from "~icons/carbon/user-multiple";
+ import CarbonSearch from "~icons/carbon/search";
  import Pagination from "$lib/components/Pagination.svelte";
  import { formatUserCount } from "$lib/utils/formatUserCount";
  import { getHref } from "$lib/utils/getHref";
+ import { debounce } from "$lib/utils/debounce";
 
  export let data: PageData;
 
  $: assistantsCreator = $page.url.searchParams.get("user");
  $: createdByMe = data.user?.username && data.user.username === assistantsCreator;
 
+ const SEARCH_DEBOUNCE_DELAY = 400;
+ let filterInputEl: HTMLInputElement;
+ let searchDisabled = false;
+
  const onModelChange = (e: Event) => {
  const newUrl = getHref($page.url, {
  newKeys: { modelId: (e.target as HTMLSelectElement).value },
  existingKeys: { behaviour: "delete_except", keys: ["user"] },
  });
  goto(newUrl);
  };
+
+ const filterOnName = debounce(async (e: Event) => {
+ searchDisabled = true;
+ const value = (e.target as HTMLInputElement).value;
+ const newUrl = getHref($page.url, { newKeys: { q: value } });
+ await goto(newUrl);
+ setTimeout(async () => {
+ searchDisabled = false;
+ await tick();
+ filterInputEl.focus();
+ }, 0);
+ }, SEARCH_DEBOUNCE_DELAY);
 </script>
 
 <svelte:head>
@@ -96,7 +115,7 @@
  {assistantsCreator}'s Assistants
  <a
  href={getHref($page.url, {
- existingKeys: { behaviour: "delete", keys: ["user", "modelId", "p"] },
+ existingKeys: { behaviour: "delete", keys: ["user", "modelId", "p", "q"] },
  })}
  class="group"
  ><CarbonClose
@@ -116,7 +135,7 @@
  {:else}
  <a
  href={getHref($page.url, {
- existingKeys: { behaviour: "delete", keys: ["user", "modelId", "p"] },
+ existingKeys: { behaviour: "delete", keys: ["user", "modelId", "p", "q"] },
  })}
  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'
@@ -129,16 +148,32 @@
  <a
  href={getHref($page.url, {
  newKeys: { user: data.user.username },
- existingKeys: { behaviour: "delete", keys: ["modelId", "p"] },
+ existingKeys: { behaviour: "delete", keys: ["modelId", "p", "q"] },
  })}
- class="flex items-center gap-1.5 rounded-full border px-3 py-1 {assistantsCreator &&
+ class="flex items-center gap-1.5 truncate 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}
  {/if}
+ <div
+ class="ml-auto mr-2 flex h-9 w-9 items-center gap-x-2 rounded-full border border-gray-300 px-2 transition-all duration-300 ease-out hover:w-64 md:w-64 dark:border-gray-500"
+ >
+ <button class="flex-shrink-0 cursor-default" on:click={() => filterInputEl.focus()}
+ ><CarbonSearch class="text-gray-400" /></button
+ >
+ <input
+ class="h-9 w-full rounded-full bg-transparent focus:outline-none"
+ placeholder="Filter by name"
+ value={data.query}
+ on:input={filterOnName}
+ bind:this={filterInputEl}
+ maxlength="150"
+ disabled={searchDisabled}
+ />
+ </div>
  </div>
 
  <div class="mt-8 grid grid-cols-2 gap-3 sm:gap-5 md:grid-cols-3 lg:grid-cols-4">