mirror of
https://github.com/open-webui/open-webui
synced 2025-06-26 18:26:48 +00:00
feat: search modal
This commit is contained in:
Timothy Jaeryang Baek
parent
4f4811adb1
commit
d069d1264d
180
src/lib/components/layout/SearchModal.svelte
Normal file
180
src/lib/components/layout/SearchModal.svelte
Normal file
@ -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>
|
||||
@ -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
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user