[WIP] - Add the pop-up search (Ctrl/Command + K) to search entire conversation history (#1823)

* UI for crtl/command + k for conversation search

* UI for ctrl/command+k

* Added fetch conversations and filter conversations functions

* WIP - finish with the first draft of popup-search

* WIP - Finish the first version pop up search

* WIP - Finish the first version pop up search

* Remove unnecessary codes

* Fixed formatting errors

* Fixed formatting errors

* refactor: search functionality

* fix: revert those changes

* fix: lint

* chores: clean up unused comment

---------

Co-authored-by: kenneth.ramos95 <kenneth.ramos95@gmail.com>
Co-authored-by: Nathan Sarrazin <sarrazin.nathan@gmail.com>

package-lock.json

@@ -93,12 +93,12 @@
 				"minimist": "^1.2.8",
 				"mongodb-memory-server": "^10.1.2",
 				"node-llama-cpp": "^3.6.0",
-				"prettier": "^3.1.0",
+				"prettier": "^3.5.3",
 				"prettier-plugin-svelte": "^3.2.6",
 				"prettier-plugin-tailwindcss": "^0.6.11",
 				"prom-client": "^15.1.2",
 				"sade": "^1.8.1",
-				"svelte": "^5.27.0",
+				"svelte": "^5.27.2",
 				"svelte-check": "^4.0.0",
 				"svelte-gestures": "^5.1.3",
 				"ts-node": "^10.9.1",
@@ -12911,9 +12911,9 @@
 			}
 		},
 		"node_modules/prettier": {
-			"version": "3.4.2",
-			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
-			"integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
+			"version": "3.5.3",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
+			"integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
 			"dev": true,
 			"license": "MIT",
 			"bin": {
@@ -14519,9 +14519,9 @@
 			}
 		},
 		"node_modules/svelte": {
-			"version": "5.27.0",
-			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.27.0.tgz",
-			"integrity": "sha512-Uai13Ydt1ZE+bUHme6b9U38PCYVNCqBRoBMkUKbFbKiD7kHWjdUUrklYAQZJxyKK81qII4mrBwe/YmvEMSlC9w==",
+			"version": "5.27.2",
+			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.27.2.tgz",
+			"integrity": "sha512-WQigWAJSONxMfIYFBnnKXf5s+TcXbktLsZ+HMLfjhjSHOW9C0OV9TmPPTxVdbxs5tuiS8iQecCxLTHpdgWwgiA==",
 			"license": "MIT",
 			"dependencies": {
 				"@ampproject/remapping": "^2.3.0",

package.json

@@ -51,12 +51,12 @@
 		"minimist": "^1.2.8",
 		"mongodb-memory-server": "^10.1.2",
 		"node-llama-cpp": "^3.6.0",
-		"prettier": "^3.1.0",
+		"prettier": "^3.5.3",
 		"prettier-plugin-svelte": "^3.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"prom-client": "^15.1.2",
 		"sade": "^1.8.1",
-		"svelte": "^5.27.0",
+		"svelte": "^5.27.2",
 		"svelte-check": "^4.0.0",
 		"svelte-gestures": "^5.1.3",
 		"ts-node": "^10.9.1",

src/lib/components/MobileNav.svelte

@@ -1,3 +1,11 @@
+<script lang="ts" module>
+	let isOpen = $state(false);
+
+	export function closeMobileNav() {
+		isOpen = false;
+	}
+</script>
+
 <script lang="ts">
 	import { browser } from "$app/environment";
 	import { beforeNavigate } from "$app/navigation";
@@ -18,7 +26,6 @@
 	let closeEl: HTMLButtonElement | undefined = $state();
 	let openEl: HTMLButtonElement | undefined = $state();
 
-	let isOpen = $state(false);
 	let panX: number | undefined = $state(undefined);
 	let panStart: number | undefined = $state(undefined);
 	let panStartTime: number | undefined = undefined;

src/lib/components/NavConversationItem.svelte

@@ -11,9 +11,10 @@
 
 	interface Props {
 		conv: ConvSidebar;
+		readOnly?: true;
 	}
 
-	let { conv }: Props = $props();
+	let { conv, readOnly }: Props = $props();
 
 	let confirmDelete = $state(false);
 
@@ -55,59 +56,65 @@
 		{/if}
 	</div>
 
-	{#if confirmDelete}
-		<button
-			type="button"
-			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
-			title="Cancel delete action"
-			onclick={(e) => {
-				e.preventDefault();
-				confirmDelete = false;
-			}}
-		>
-			<CarbonClose class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
-		</button>
-		<button
-			type="button"
-			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
-			title="Confirm delete action"
-			onclick={(e) => {
-				e.preventDefault();
-				confirmDelete = false;
-				dispatch("deleteConversation", conv.id);
-			}}
-		>
-			<CarbonCheckmark class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
-		</button>
-	{:else}
-		<button
-			type="button"
-			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
-			title="Edit conversation title"
-			onclick={(e) => {
-				e.preventDefault();
-				const newTitle = prompt("Edit this conversation title:", conv.title);
-				if (!newTitle) return;
-				dispatch("editConversationTitle", { id: conv.id, title: newTitle });
-			}}
-		>
-			<CarbonEdit class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
-		</button>
-
-		<button
-			type="button"
-			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
-			title="Delete conversation"
-			onclick={(event) => {
-				event.preventDefault();
-				if (event.shiftKey) {
+	{#if !readOnly}
+		{#if confirmDelete}
+			<button
+				type="button"
+				class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
+				title="Cancel delete action"
+				onclick={(e) => {
+					e.preventDefault();
+					confirmDelete = false;
+				}}
+			>
+				<CarbonClose class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
+			</button>
+			<button
+				type="button"
+				class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
+				title="Confirm delete action"
+				onclick={(e) => {
+					e.preventDefault();
+					confirmDelete = false;
 					dispatch("deleteConversation", conv.id);
-				} else {
-					confirmDelete = true;
-				}
-			}}
-		>
-			<CarbonTrashCan class="text-xs text-gray-400  hover:text-gray-500 dark:hover:text-gray-300" />
-		</button>
+				}}
+			>
+				<CarbonCheckmark
+					class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
+				/>
+			</button>
+		{:else}
+			<button
+				type="button"
+				class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
+				title="Edit conversation title"
+				onclick={(e) => {
+					e.preventDefault();
+					const newTitle = prompt("Edit this conversation title:", conv.title);
+					if (!newTitle) return;
+					dispatch("editConversationTitle", { id: conv.id, title: newTitle });
+				}}
+			>
+				<CarbonEdit class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
+			</button>
+
+			<button
+				type="button"
+				class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
+				title="Delete conversation"
+				onclick={(event) => {
+					event.preventDefault();
+					if (event.shiftKey) {
+						dispatch("deleteConversation", conv.id);
+					} else {
+						confirmDelete = true;
+					}
+				}}
+			>
+				<CarbonTrashCan
+					class="text-xs text-gray-400  hover:text-gray-500 dark:hover:text-gray-300"
+				/>
+			</button>
+		{/if}
 	{/if}
 </a>

src/lib/components/NavMenu.svelte

@@ -1,3 +1,12 @@
+<script lang="ts" module>
+	export const titles: { [key: string]: string } = {
+		today: "Today",
+		week: "This week",
+		month: "This month",
+		older: "Older",
+	} as const;
+</script>
+
 <script lang="ts">
 	import { base } from "$app/paths";
 
@@ -15,6 +24,9 @@
 	import type { Conversation } from "$lib/types/Conversation";
 	import { CONV_NUM_PER_PAGE } from "$lib/constants/pagination";
 	import { browser } from "$app/environment";
+	import { toggleSearch } from "./chat/Search.svelte";
+	import CarbonSearch from "~icons/carbon/search";
+	import { closeMobileNav } from "./MobileNav.svelte";
 
 	interface Props {
 		conversations: ConvSidebar[];
@@ -48,13 +60,6 @@
 		older: conversations.filter(({ updatedAt }) => updatedAt.getTime() < dateRanges[2]),
 	});
 
-	const titles: { [key: string]: string } = {
-		today: "Today",
-		week: "This week",
-		month: "This month",
-		older: "Older",
-	} as const;
-
 	const nModels: number = $page.data.models.filter((el: Model) => !el.unlisted).length;
 
 	async function handleVisible() {
@@ -112,6 +117,16 @@
 <div
 	class="scrollbar-custom flex touch-pan-y flex-col gap-1 overflow-y-auto rounded-r-xl from-gray-50 px-3 pb-3 pt-2 text-[.9rem] dark:from-gray-800/30 max-sm:bg-gradient-to-t md:bg-gradient-to-l"
 >
+	<button
+		class="mx-auto flex w-full flex-row items-center justify-stretch gap-x-2 rounded-xl px-2 py-1 pl-0 align-middle text-gray-600 hover:bg-gray-500/20 dark:text-gray-400"
+		onclick={() => {
+			closeMobileNav();
+			toggleSearch();
+		}}
+	>
+		<CarbonSearch class="text-xs" />
+		<span class="block">Search chats</span></button
+	>
 	{#await groupedConversations}
 		{#if $page.data.nConversations > 0}
 			<div class="overflow-y-hidden">
@@ -220,7 +235,7 @@
 				theme = localStorage.theme;
 			}}
 			aria-label="Toggle theme"
-			class="flex h-9 min-w-[1.5em] flex-none items-center rounded-lg p-2 pr-0 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+			class="flex h-9 min-w-[1.5em] flex-none items-center rounded-lg p-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
 		>
 			{#if browser}
 				{#if theme === "dark"}

src/lib/components/chat/ChatWindow.svelte

@@ -247,7 +247,7 @@
 	}}
 />
 
-<div class="relative min-h-0 min-w-0">
+<div class="relative z-[-1] min-h-0 min-w-0">
 	<div
 		class="scrollbar-custom h-full overflow-y-auto"
 		use:snapScrollToBottom={messages.map((message) => message.content)}

src/lib/components/chat/Search.svelte

@@ -0,0 +1,165 @@
+<script lang="ts" module>
+	export function toggleSearch() {
+		searchOpen = !searchOpen;
+	}
+
+	let searchOpen: boolean = $state(false);
+</script>
+
+<script lang="ts">
+	import { base } from "$app/paths";
+
+	import { debounce } from "$lib/utils/debounce";
+	import { onDestroy, onMount } from "svelte";
+
+	import type { GETSearchEndpointReturn } from "../../../routes/api/conversations/search/+server";
+	import NavConversationItem from "../NavConversationItem.svelte";
+	import { titles } from "../NavMenu.svelte";
+	import { beforeNavigate } from "$app/navigation";
+	import { browser } from "$app/environment";
+
+	import CarbonClose from "~icons/carbon/close";
+	import { fly } from "svelte/transition";
+
+	let inputElement: HTMLInputElement | undefined = $state(undefined);
+
+	let searchInput: string = $state("");
+	let debouncedInput: string = $state("");
+
+	let pending: boolean = $state(false);
+
+	let conversations: GETSearchEndpointReturn = $state([]);
+
+	const dateRanges = [
+		new Date().setDate(new Date().getDate() - 1),
+		new Date().setDate(new Date().getDate() - 7),
+		new Date().setMonth(new Date().getMonth() - 1),
+	];
+
+	let groupedConversations = $derived({
+		today: conversations.filter(({ updatedAt }) => updatedAt.getTime() > dateRanges[0]),
+		week: conversations.filter(
+			({ updatedAt }) => updatedAt.getTime() > dateRanges[1] && updatedAt.getTime() < dateRanges[0]
+		),
+		month: conversations.filter(
+			({ updatedAt }) => updatedAt.getTime() > dateRanges[2] && updatedAt.getTime() < dateRanges[1]
+		),
+		older: conversations.filter(({ updatedAt }) => updatedAt.getTime() < dateRanges[2]),
+	});
+
+	const update = debounce(async (v: string) => {
+		debouncedInput = v;
+		pending = true;
+		await fetch(`${base}/api/conversations/search?q=${v}`)
+			.then(async (r) => {
+				if (r.ok) {
+					conversations = await r.json().then((conversations) =>
+						conversations.map((conv: GETSearchEndpointReturn[number]) => ({
+							...conv,
+							updatedAt: new Date(conv.updatedAt),
+						}))
+					);
+				} else {
+					conversations = [];
+				}
+			})
+			.finally(() => {
+				pending = false;
+			});
+	}, 300);
+
+	$effect(() => update(searchInput));
+
+	async function openSearchListener(ev: KeyboardEvent) {
+		if (ev.ctrlKey && ev.key === "k") {
+			searchOpen = true;
+			ev.stopPropagation();
+			ev.preventDefault();
+		}
+	}
+
+	onMount(() => {
+		if (!browser) return;
+		window.addEventListener("keydown", openSearchListener);
+	});
+
+	beforeNavigate(() => {
+		searchOpen = false;
+		searchInput = "";
+	});
+
+	onDestroy(() => {
+		if (!browser) return;
+		window.removeEventListener("keydown", openSearchListener);
+	});
+
+	$effect(() => {
+		if (searchOpen) {
+			inputElement?.focus();
+		}
+	});
+
+	$effect(() => {
+		if (!searchOpen) {
+			searchInput = "";
+		}
+	});
+</script>
+
+{#if searchOpen}
+	<div
+		class="fixed bottom-0 left-[5%] right-[5%] top-[10%] z-50
+		m-4 mx-auto h-fit max-w-2xl
+		overflow-hidden rounded-xl
+		border border-gray-500/50 bg-gray-200 text-gray-800
+		shadow-[0_10px_40px_rgba(100,100,100,0.2)]
+		dark:bg-gray-800
+		dark:text-gray-200 dark:shadow-[0_10px_40px_rgba(255,255,255,0.1)] lg:top-[20%]"
+		in:fly={{ y: 100 }}
+	>
+		<button
+			class="absolute right-1 top-2.5 rounded-full p-1 hover:bg-gray-500/50"
+			onclick={toggleSearch}
+		>
+			<CarbonClose class="text-lg text-gray-400/80" />
+		</button>
+		<input
+			bind:value={searchInput}
+			bind:this={inputElement}
+			type="text"
+			name="searchbar"
+			placeholder="Search for chats..."
+			class={{
+				"h-12 w-full p-4 text-lg dark:bg-gray-800 dark:text-gray-200": true,
+				"border-b border-b-gray-500/50": searchInput && searchInput.length >= 3,
+			}}
+		/>
+
+		<div class="max-h-[50dvh] overflow-y-scroll">
+			{#if debouncedInput && debouncedInput.length >= 3}
+				{#if pending}
+					{#each Array(5) as _}
+						<div
+							class="m-2 h-6 w-full animate-pulse gap-5 rounded bg-gray-300 first:mt-4 dark:bg-gray-700"
+						></div>
+					{/each}
+				{:else if conversations.length === 0}
+					<p class="bg-gray-200 p-2 text-gray-700 dark:bg-gray-800 dark:text-gray-300">
+						No conversations found matching that query
+					</p>
+				{:else}
+					{#each Object.entries(groupedConversations) as [group, convs]}
+						{#if convs.length}
+							<h4 class="mb-1.5 mt-4 pl-1.5 text-sm text-gray-400 dark:text-gray-500">
+								{titles[group]}
+							</h4>
+							{#each convs as conv}
+								<NavConversationItem {conv} readOnly={true} />
+							{/each}
+						{/if}
+					{/each}
+				{/if}
+			{/if}
+		</div>
+	</div>
+{/if}

src/lib/server/database.ts

@@ -198,6 +198,22 @@ export class Database {
 		conversations
 			.createIndex({ "messages.createdAt": 1 }, { sparse: true })
 			.catch((e) => logger.error(e));
+
+		// Text index for searching conversation titles and message content
+		conversations
+			.createIndex(
+				{
+					userId: 1,
+					sessionId: 1,
+					title: "text",
+					"messages.content": "text",
+				},
+				{
+					default_language: "en",
+				}
+			)
+			.catch((e) => logger.error(e));
+
 		// Unique index for stats
 		conversationStats
 			.createIndex(

src/routes/+layout.svelte

@@ -22,6 +22,7 @@
 	import { loginModalOpen } from "$lib/stores/loginModal";
 	import LoginModal from "$lib/components/LoginModal.svelte";
 	import OverloadedModal from "$lib/components/OverloadedModal.svelte";
+	import Search from "$lib/components/chat/Search.svelte";
 
 	let { data = $bindable(), children } = $props();
 
@@ -261,6 +262,8 @@
 	<OverloadedModal onClose={() => (overloadedModalOpen = false)} />
 {/if}
 
+<Search />
+
 <div
 	class="fixed grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd {!isNavCollapsed
 		? 'md:grid-cols-[290px,1fr]'

src/routes/api/conversations/+server.ts

@@ -6,7 +6,6 @@ import { CONV_NUM_PER_PAGE } from "$lib/constants/pagination";
 
 export async function GET({ locals, url }) {
 	const p = parseInt(url.searchParams.get("p") ?? "0");
-
 	if (locals.user?._id || locals.sessionId) {
 		const convs = await collections.conversations
 			.find({
@@ -26,7 +25,6 @@ export async function GET({ locals, url }) {
 		if (convs.length === 0) {
 			return Response.json([]);
 		}
-
 		const res = convs.map((conv) => ({
 			_id: conv._id,
 			id: conv._id, // legacy param iOS

src/routes/api/conversations/search/+server.ts

@@ -0,0 +1,59 @@
+import { CONV_NUM_PER_PAGE } from "$lib/constants/pagination";
+import { authCondition } from "$lib/server/auth";
+import { collections } from "$lib/server/database";
+import { models } from "$lib/server/models";
+import type { RequestHandler } from "@sveltejs/kit";
+
+export type GETSearchEndpointReturn = Array<{
+	id: string;
+	title: string;
+	updatedAt: Date;
+	model: string;
+	assistantId?: string;
+	mdoelTools?: boolean;
+}>;
+
+export const GET: RequestHandler = async ({ locals, url }) => {
+	const searchQuery = url.searchParams.get("q");
+	const p = parseInt(url.searchParams.get("p") ?? "0");
+
+	if (!searchQuery || searchQuery.length < 3) {
+		return Response.json([]);
+	}
+
+	if (locals.user?._id || locals.sessionId) {
+		const convs = await collections.conversations
+			.find({
+				...authCondition(locals),
+				$text: { $search: searchQuery },
+			})
+			.sort({ score: { $meta: "textScore" } })
+			.project({
+				title: 1,
+				updatedAt: 1,
+				model: 1,
+				assistantId: 1,
+				messages: 1,
+				userId: 1,
+			})
+			.skip(p * CONV_NUM_PER_PAGE)
+			.limit(CONV_NUM_PER_PAGE)
+			.toArray()
+			.then((convs) =>
+				convs.map((conv) => {
+					return {
+						_id: conv._id,
+						id: conv._id, // legacy param iOS
+						title: conv.title,
+						updatedAt: conv.updatedAt,
+						model: conv.model,
+						assistantId: conv.assistantId,
+						modelTools: models.find((m) => m.id == conv.model)?.tools ?? false,
+					};
+				})
+			);
+
+		return Response.json(convs as GETSearchEndpointReturn);
+	}
+	return Response.json([]);
+};