From d069d1264d658adc5c2d9a80e9785a5c86559652 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 19 May 2025 01:39:33 +0400
Subject: [PATCH] feat: search modal

---
 src/lib/components/layout/SearchModal.svelte  | 180 ++++++++++++++++++
 src/lib/components/layout/Sidebar.svelte      |  56 ++----
 .../layout/Sidebar/SearchInput.svelte         |   4 +-
 src/lib/stores/index.ts                       |   1 +
 src/routes/(app)/+layout.svelte               |  10 +-
 5 files changed, 212 insertions(+), 39 deletions(-)
 create mode 100644 src/lib/components/layout/SearchModal.svelte

diff --git a/src/lib/components/layout/SearchModal.svelte b/src/lib/components/layout/SearchModal.svelte
new file mode 100644
index 000000000..6ae2f2694
--- /dev/null
+++ b/src/lib/components/layout/SearchModal.svelte
@@ -0,0 +1,180 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+	import { getContext, onMount } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import Modal from '$lib/components/common/Modal.svelte';
+	import SearchInput from './Sidebar/SearchInput.svelte';
+	import { getChatList, getChatListBySearchText } from '$lib/apis/chats';
+	import Spinner from '../common/Spinner.svelte';
+
+	import dayjs from 'dayjs';
+	import calendar from 'dayjs/plugin/calendar';
+	import Loader from '../common/Loader.svelte';
+	dayjs.extend(calendar);
+
+	export let show = false;
+
+	let query = '';
+	let page = 1;
+
+	let chatList = null;
+
+	let chatListLoading = false;
+	let allChatsLoaded = false;
+
+	let searchDebounceTimeout;
+
+	const searchHandler = async () => {
+		console.log('search', query);
+
+		if (searchDebounceTimeout) {
+			clearTimeout(searchDebounceTimeout);
+		}
+
+		if (query === '') {
+			page = 1;
+			chatList = await getChatList(localStorage.token, page);
+			return;
+		} else {
+			searchDebounceTimeout = setTimeout(async () => {
+				page = 1;
+				chatList = null;
+				chatList = await getChatListBySearchText(localStorage.token, query, page);
+			}, 100);
+		}
+
+		if ((chatList ?? []).length === 0) {
+			allChatsLoaded = true;
+		} else {
+			allChatsLoaded = false;
+		}
+	};
+
+	const loadMoreChats = async () => {
+		chatListLoading = true;
+		page += 1;
+
+		let newChatList = [];
+
+		if (query) {
+			newChatList = await getChatListBySearchText(localStorage.token, query, page);
+		} else {
+			newChatList = await getChatList(localStorage.token, page);
+		}
+
+		// once the bottom of the list has been reached (no results) there is no need to continue querying
+		allChatsLoaded = newChatList.length === 0;
+
+		if (newChatList.length > 0) {
+			chatList = [...chatList, ...newChatList];
+		}
+
+		chatListLoading = false;
+	};
+
+	const init = () => {
+		searchHandler();
+	};
+
+	$: if (show) {
+		init();
+	}
+
+	onMount(() => {
+		init();
+	});
+</script>
+
+<Modal size="sm" bind:show>
+	<div class="py-2.5 dark:text-gray-300 text-gray-700">
+		<div class="px-3.5 pb-1.5">
+			<SearchInput
+				bind:value={query}
+				on:input={searchHandler}
+				placeholder={$i18n.t('Search')}
+				showClearButton={true}
+			/>
+		</div>
+
+		<!-- <hr class="border-gray-100 dark:border-gray-850 my-1" /> -->
+
+		<div class="flex flex-col overflow-y-auto h-80 scrollbar-hidden px-5 pb-1">
+			{#if chatList}
+				{#if chatList.length === 0}
+					<div class="text-xs text-gray-500 dark:text-gray-400 text-center">
+						{$i18n.t('No results found')}
+					</div>
+				{/if}
+
+				{#each chatList as chat, idx}
+					{#if idx === 0 || (idx > 0 && chat.time_range !== chatList[idx - 1].time_range)}
+						<div
+							class="w-full text-xs text-gray-500 dark:text-gray-500 font-medium {idx === 0
+								? ''
+								: 'pt-5'} pb-2"
+						>
+							{$i18n.t(chat.time_range)}
+							<!-- localisation keys for time_range to be recognized from the i18next parser (so they don't get automatically removed):
+							{$i18n.t('Today')}
+							{$i18n.t('Yesterday')}
+							{$i18n.t('Previous 7 days')}
+							{$i18n.t('Previous 30 days')}
+							{$i18n.t('January')}
+							{$i18n.t('February')}
+							{$i18n.t('March')}
+							{$i18n.t('April')}
+							{$i18n.t('May')}
+							{$i18n.t('June')}
+							{$i18n.t('July')}
+							{$i18n.t('August')}
+							{$i18n.t('September')}
+							{$i18n.t('October')}
+							{$i18n.t('November')}
+							{$i18n.t('December')}
+							-->
+						</div>
+					{/if}
+
+					<a
+						class=" w-full flex justify-between items-center rounded-lg text-sm py-1 px-1 my-1"
+						href="/c/{chat.id}"
+						draggable="false"
+						on:click={() => {
+							show = false;
+						}}
+					>
+						<div class=" flex-1">
+							<div class="text-ellipsis line-clamp-1 w-full">
+								{chat?.title}
+							</div>
+						</div>
+
+						<div class=" pl-3 shrink-0 text-gray-500 dark:text-gray-400 text-xs">
+							{dayjs(chat?.updated_at * 1000).calendar()}
+						</div>
+					</a>
+				{/each}
+
+				{#if !allChatsLoaded}
+					<Loader
+						on:visible={(e) => {
+							if (!chatListLoading) {
+								loadMoreChats();
+							}
+						}}
+					>
+						<div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2">
+							<Spinner className=" size-4" />
+							<div class=" ">Loading...</div>
+						</div>
+					</Loader>
+				{/if}
+			{:else}
+				<div class="w-full h-full flex justify-center items-center">
+					<Spinner />
+				</div>
+			{/if}
+		</div>
+	</div>
+</Modal>
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index e9158a396..74b349c21 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -11,6 +11,7 @@
 		chatId,
 		tags,
 		showSidebar,
+		showSearch,
 		mobile,
 		showArchivedChats,
 		pinnedChats,
@@ -58,6 +59,8 @@
 	import ChannelItem from './Sidebar/ChannelItem.svelte';
 	import PencilSquare from '../icons/PencilSquare.svelte';
 	import Home from '../icons/Home.svelte';
+	import MagnifyingGlass from '../icons/MagnifyingGlass.svelte';
+	import SearchModal from './SearchModal.svelte';
 
 	const BREAKPOINT = 768;
 
@@ -204,32 +207,6 @@
 		chatListLoading = false;
 	};
 
-	let searchDebounceTimeout;
-
-	const searchDebounceHandler = async () => {
-		console.log('search', search);
-		chats.set(null);
-
-		if (searchDebounceTimeout) {
-			clearTimeout(searchDebounceTimeout);
-		}
-
-		if (search === '') {
-			await initChatList();
-			return;
-		} else {
-			searchDebounceTimeout = setTimeout(async () => {
-				allChatsLoaded = false;
-				currentChatPage.set(1);
-				await chats.set(await getChatListBySearchText(localStorage.token, search));
-
-				if ($chats.length === 0) {
-					tags.set(await getAllTags(localStorage.token));
-				}
-			}, 1000);
-		}
-	};
-
 	const importChatHandler = async (items, pinned = false, folderId = null) => {
 		console.log('importChatHandler', items, pinned, folderId);
 		for (const item of items) {
@@ -466,6 +443,8 @@
 	/>
 {/if}
 
+<SearchModal bind:show={$showSearch} />
+
 <div
 	bind:this={navElement}
 	id="sidebar"
@@ -651,17 +630,22 @@
 			</div>
 		{/if}
 
-		<div class="relative {$temporaryChatEnabled ? 'opacity-20' : ''}">
-			{#if $temporaryChatEnabled}
-				<div class="absolute z-40 w-full h-full flex justify-center"></div>
-			{/if}
+		<div class="px-1.5 flex justify-center text-gray-800 dark:text-gray-200">
+			<button
+				class="grow flex items-center space-x-3 rounded-lg px-2 py-[7px] hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+				on:click={() => {
+					showSearch.set(true);
+				}}
+				draggable="false"
+			>
+				<div class="self-center">
+					<MagnifyingGlass strokeWidth="2" className="size-[1.1rem]" />
+				</div>
 
-			<SearchInput
-				bind:value={search}
-				on:input={searchDebounceHandler}
-				placeholder={$i18n.t('Search')}
-				showClearButton={true}
-			/>
+				<div class="flex self-center translate-y-[0.5px]">
+					<div class=" self-center font-medium text-sm font-primary">{$i18n.t('Search')}</div>
+				</div>
+			</button>
 		</div>
 
 		<div
diff --git a/src/lib/components/layout/Sidebar/SearchInput.svelte b/src/lib/components/layout/Sidebar/SearchInput.svelte
index dd4a89d99..2e9492fd3 100644
--- a/src/lib/components/layout/Sidebar/SearchInput.svelte
+++ b/src/lib/components/layout/Sidebar/SearchInput.svelte
@@ -89,7 +89,7 @@
 
 <div class="px-1 mb-1 flex justify-center space-x-2 relative z-10" id="search-container">
 	<div class="flex w-full rounded-xl" id="chat-search">
-		<div class="self-center pl-3 py-2 rounded-l-xl bg-transparent">
+		<div class="self-center py-2 rounded-l-xl bg-transparent dark:text-gray-300">
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 20 20"
@@ -149,7 +149,7 @@
 		/>
 
 		{#if showClearButton && value}
-			<div class="self-center pr-2 pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
+			<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
 				<button
 					class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
 					on:click={clearSearchInput}
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index 614085236..97057726d 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -65,6 +65,7 @@ export const banners: Writable<Banner[]> = writable([]);
 export const settings: Writable<Settings> = writable({});
 
 export const showSidebar = writable(false);
+export const showSearch = writable(false);
 export const showSettings = writable(false);
 export const showArchivedChats = writable(false);
 export const showChangelog = writable(false);
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 58dabbc68..786c6a987 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -36,7 +36,8 @@
 		showSettings,
 		showChangelog,
 		temporaryChatEnabled,
-		toolServers
+		toolServers,
+		showSearch
 	} from '$lib/stores';
 
 	import Sidebar from '$lib/components/layout/Sidebar.svelte';
@@ -121,6 +122,13 @@
 				// Check if the Shift key is pressed
 				const isShiftPressed = event.shiftKey;
 
+				// Check if Ctrl  + K is pressed
+				if (isCtrlPressed && event.key.toLowerCase() === 'k') {
+					event.preventDefault();
+					console.log('search');
+					showSearch.set(!$showSearch);
+				}
+
 				// Check if Ctrl + Shift + O is pressed
 				if (isCtrlPressed && isShiftPressed && event.key.toLowerCase() === 'o') {
 					event.preventDefault();