Spaces:
Running
Running
<script lang="ts"> | |
import { toast } from 'svelte-sonner'; | |
import { goto } from '$app/navigation'; | |
import { | |
user, | |
chats, | |
settings, | |
showSettings, | |
chatId, | |
tags, | |
showSidebar, | |
mobile, | |
showArchivedChats | |
} from '$lib/stores'; | |
import { onMount, getContext, tick } from 'svelte'; | |
const i18n = getContext('i18n'); | |
import { updateUserSettings } from '$lib/apis/users'; | |
import { | |
deleteChatById, | |
getChatList, | |
getChatById, | |
getChatListByTagName, | |
updateChatById, | |
getAllChatTags, | |
archiveChatById, | |
cloneChatById | |
} from '$lib/apis/chats'; | |
import { WEBUI_BASE_URL } from '$lib/constants'; | |
import ArchivedChatsModal from './Sidebar/ArchivedChatsModal.svelte'; | |
import UserMenu from './Sidebar/UserMenu.svelte'; | |
import ChatItem from './Sidebar/ChatItem.svelte'; | |
import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte'; | |
const BREAKPOINT = 768; | |
let navElement; | |
let search = ''; | |
let shiftKey = false; | |
let selectedChatId = null; | |
let deleteChat = null; | |
let showDeleteConfirm = false; | |
let showDropdown = false; | |
let filteredChatList = []; | |
$: filteredChatList = $chats.filter((chat) => { | |
if (search === '') { | |
return true; | |
} else { | |
let title = chat.title.toLowerCase(); | |
const query = search.toLowerCase(); | |
let contentMatches = false; | |
// Access the messages within chat.chat.messages | |
if (chat.chat && chat.chat.messages && Array.isArray(chat.chat.messages)) { | |
contentMatches = chat.chat.messages.some((message) => { | |
// Check if message.content exists and includes the search query | |
return message.content && message.content.toLowerCase().includes(query); | |
}); | |
} | |
return title.includes(query) || contentMatches; | |
} | |
}); | |
onMount(async () => { | |
mobile.subscribe((e) => { | |
if ($showSidebar && e) { | |
showSidebar.set(false); | |
} | |
if (!$showSidebar && !e) { | |
showSidebar.set(true); | |
} | |
}); | |
showSidebar.set(window.innerWidth > BREAKPOINT); | |
await chats.set(await getChatList(localStorage.token)); | |
let touchstart; | |
let touchend; | |
function checkDirection() { | |
const screenWidth = window.innerWidth; | |
const swipeDistance = Math.abs(touchend.screenX - touchstart.screenX); | |
if (touchstart.clientX < 40 && swipeDistance >= screenWidth / 8) { | |
if (touchend.screenX < touchstart.screenX) { | |
showSidebar.set(false); | |
} | |
if (touchend.screenX > touchstart.screenX) { | |
showSidebar.set(true); | |
} | |
} | |
} | |
const onTouchStart = (e) => { | |
touchstart = e.changedTouches[0]; | |
console.log(touchstart.clientX); | |
}; | |
const onTouchEnd = (e) => { | |
touchend = e.changedTouches[0]; | |
checkDirection(); | |
}; | |
const onKeyDown = (e) => { | |
if (e.key === 'Shift') { | |
shiftKey = true; | |
} | |
}; | |
const onKeyUp = (e) => { | |
if (e.key === 'Shift') { | |
shiftKey = false; | |
} | |
}; | |
const onFocus = () => {}; | |
const onBlur = () => { | |
shiftKey = false; | |
selectedChatId = null; | |
}; | |
window.addEventListener('keydown', onKeyDown); | |
window.addEventListener('keyup', onKeyUp); | |
window.addEventListener('touchstart', onTouchStart); | |
window.addEventListener('touchend', onTouchEnd); | |
window.addEventListener('focus', onFocus); | |
window.addEventListener('blur', onBlur); | |
return () => { | |
window.removeEventListener('keydown', onKeyDown); | |
window.removeEventListener('keyup', onKeyUp); | |
window.removeEventListener('touchstart', onTouchStart); | |
window.removeEventListener('touchend', onTouchEnd); | |
window.removeEventListener('focus', onFocus); | |
window.removeEventListener('blur', onBlur); | |
}; | |
}); | |
// Helper function to fetch and add chat content to each chat | |
const enrichChatsWithContent = async (chatList) => { | |
const enrichedChats = await Promise.all( | |
chatList.map(async (chat) => { | |
const chatDetails = await getChatById(localStorage.token, chat.id).catch((error) => null); // Handle error or non-existent chat gracefully | |
if (chatDetails) { | |
chat.chat = chatDetails.chat; // Assuming chatDetails.chat contains the chat content | |
} | |
return chat; | |
}) | |
); | |
await chats.set(enrichedChats); | |
}; | |
const saveSettings = async (updated) => { | |
await settings.set({ ...$settings, ...updated }); | |
await updateUserSettings(localStorage.token, { ui: $settings }); | |
location.href = '/'; | |
}; | |
const deleteChatHandler = async (id) => { | |
const res = await deleteChatById(localStorage.token, id).catch((error) => { | |
toast.error(error); | |
return null; | |
}); | |
if (res) { | |
if ($chatId === id) { | |
await chatId.set(''); | |
await tick(); | |
goto('/'); | |
} | |
await chats.set(await getChatList(localStorage.token)); | |
} | |
}; | |
</script> | |
<ArchivedChatsModal | |
bind:show={$showArchivedChats} | |
on:change={async () => { | |
await chats.set(await getChatList(localStorage.token)); | |
}} | |
/> | |
<DeleteConfirmDialog | |
bind:show={showDeleteConfirm} | |
title={$i18n.t('Delete chat?')} | |
on:confirm={() => { | |
deleteChatHandler(deleteChat.id); | |
}} | |
> | |
<div class=" text-sm text-gray-500"> | |
{$i18n.t('This will delete')} <span class=" font-semibold">{deleteChat.title}</span>. | |
</div> | |
</DeleteConfirmDialog> | |
<!-- svelte-ignore a11y-no-static-element-interactions --> | |
{#if $showSidebar} | |
<div | |
class=" fixed md:hidden z-40 top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center overflow-hidden overscroll-contain" | |
on:mousedown={() => { | |
showSidebar.set(!$showSidebar); | |
}} | |
/> | |
{/if} | |
<div | |
bind:this={navElement} | |
id="sidebar" | |
class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar | |
? 'md:relative w-[260px]' | |
: '-translate-x-[260px] w-[0px]'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm transition fixed z-50 top-0 left-0 rounded-r-2xl | |
" | |
data-state={$showSidebar} | |
> | |
<div | |
class="py-2.5 my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] z-50 {$showSidebar | |
? '' | |
: 'invisible'}" | |
> | |
<div class="px-2.5 flex justify-between space-x-1 text-gray-600 dark:text-gray-400"> | |
<a | |
id="sidebar-new-chat-button" | |
class="flex flex-1 justify-between rounded-xl px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-850 transition" | |
href="/" | |
draggable="false" | |
on:click={async () => { | |
selectedChatId = null; | |
await goto('/'); | |
const newChatButton = document.getElementById('new-chat-button'); | |
setTimeout(() => { | |
newChatButton?.click(); | |
if ($mobile) { | |
showSidebar.set(false); | |
} | |
}, 0); | |
}} | |
> | |
<div class="self-center mx-1.5"> | |
<img | |
crossorigin="anonymous" | |
src="{WEBUI_BASE_URL}/static/favicon.png" | |
class=" size-6 -translate-x-1.5 rounded-full" | |
alt="logo" | |
/> | |
</div> | |
<div class=" self-center font-medium text-sm text-gray-850 dark:text-white"> | |
{$i18n.t('New Chat')} | |
</div> | |
<div class="self-center ml-auto"> | |
<svg | |
xmlns="http://www.w3.org/2000/svg" | |
viewBox="0 0 20 20" | |
fill="currentColor" | |
class="size-5" | |
> | |
<path | |
d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z" | |
/> | |
<path | |
d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z" | |
/> | |
</svg> | |
</div> | |
</a> | |
<button | |
class=" cursor-pointer px-2 py-2 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition" | |
on:click={() => { | |
showSidebar.set(!$showSidebar); | |
}} | |
> | |
<div class=" m-auto self-center"> | |
<svg | |
xmlns="http://www.w3.org/2000/svg" | |
fill="none" | |
viewBox="0 0 24 24" | |
stroke-width="2" | |
stroke="currentColor" | |
class="size-5" | |
> | |
<path | |
stroke-linecap="round" | |
stroke-linejoin="round" | |
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" | |
/> | |
</svg> | |
</div> | |
</button> | |
</div> | |
{#if $user?.role === 'admin'} | |
<div class="px-2.5 flex justify-center text-gray-800 dark:text-gray-200"> | |
<a | |
class="flex-grow flex space-x-3 rounded-xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition" | |
href="/workspace" | |
on:click={() => { | |
selectedChatId = null; | |
chatId.set(''); | |
if ($mobile) { | |
showSidebar.set(false); | |
} | |
}} | |
draggable="false" | |
> | |
<div class="self-center"> | |
<svg | |
xmlns="http://www.w3.org/2000/svg" | |
fill="none" | |
viewBox="0 0 24 24" | |
stroke-width="2" | |
stroke="currentColor" | |
class="size-[1.1rem]" | |
> | |
<path | |
stroke-linecap="round" | |
stroke-linejoin="round" | |
d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" | |
/> | |
</svg> | |
</div> | |
<div class="flex self-center"> | |
<div class=" self-center font-medium text-sm">{$i18n.t('Workspace')}</div> | |
</div> | |
</a> | |
</div> | |
{/if} | |
<div class="relative flex flex-col flex-1 overflow-y-auto"> | |
{#if !($settings.saveChatHistory ?? true)} | |
<div class="absolute z-40 w-full h-full bg-gray-50/90 dark:bg-black/90 flex justify-center"> | |
<div class=" text-left px-5 py-2"> | |
<div class=" font-medium">{$i18n.t('Chat History is off for this browser.')}</div> | |
<div class="text-xs mt-2"> | |
{$i18n.t( | |
"When history is turned off, new chats on this browser won't appear in your history on any of your devices." | |
)} | |
<span class=" font-semibold" | |
>{$i18n.t('This setting does not sync across browsers or devices.')}</span | |
> | |
</div> | |
<div class="mt-3"> | |
<button | |
class="flex justify-center items-center space-x-1.5 px-3 py-2.5 rounded-lg text-xs bg-gray-100 hover:bg-gray-200 transition text-gray-800 font-medium w-full" | |
type="button" | |
on:click={() => { | |
saveSettings({ | |
saveChatHistory: true | |
}); | |
}} | |
> | |
<svg | |
xmlns="http://www.w3.org/2000/svg" | |
viewBox="0 0 16 16" | |
fill="currentColor" | |
class="w-3 h-3" | |
> | |
<path | |
fill-rule="evenodd" | |
d="M8 1a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0v-6.5A.75.75 0 0 1 8 1ZM4.11 3.05a.75.75 0 0 1 0 1.06 5.5 5.5 0 1 0 7.78 0 .75.75 0 0 1 1.06-1.06 7 7 0 1 1-9.9 0 .75.75 0 0 1 1.06 0Z" | |
clip-rule="evenodd" | |
/> | |
</svg> | |
<div>{$i18n.t('Enable Chat History')}</div> | |
</button> | |
</div> | |
</div> | |
</div> | |
{/if} | |
<div class="px-2 mt-0.5 mb-2 flex justify-center space-x-2"> | |
<div class="flex w-full rounded-xl" id="chat-search"> | |
<div class="self-center pl-3 py-2 rounded-l-xl bg-transparent"> | |
<svg | |
xmlns="http://www.w3.org/2000/svg" | |
viewBox="0 0 20 20" | |
fill="currentColor" | |
class="w-4 h-4" | |
> | |
<path | |
fill-rule="evenodd" | |
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" | |
clip-rule="evenodd" | |
/> | |
</svg> | |
</div> | |
<input | |
class="w-full rounded-r-xl py-1.5 pl-2.5 pr-4 text-sm bg-transparent dark:text-gray-300 outline-none" | |
placeholder={$i18n.t('Search')} | |
bind:value={search} | |
on:focus={() => { | |
enrichChatsWithContent($chats); | |
}} | |
/> | |
</div> | |
</div> | |
{#if $tags.length > 0} | |
<div class="px-2.5 mb-2 flex gap-1 flex-wrap"> | |
<button | |
class="px-2.5 text-xs font-medium bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800 transition rounded-full" | |
on:click={async () => { | |
await chats.set(await getChatList(localStorage.token)); | |
}} | |
> | |
{$i18n.t('all')} | |
</button> | |
{#each $tags as tag} | |
<button | |
class="px-2.5 text-xs font-medium bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800 transition rounded-full" | |
on:click={async () => { | |
let chatIds = await getChatListByTagName(localStorage.token, tag.name); | |
if (chatIds.length === 0) { | |
await tags.set(await getAllChatTags(localStorage.token)); | |
chatIds = await getChatList(localStorage.token); | |
} | |
await chats.set(chatIds); | |
}} | |
> | |
{tag.name} | |
</button> | |
{/each} | |
</div> | |
{/if} | |
<div class="pl-2 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto scrollbar-hidden"> | |
{#each filteredChatList as chat, idx} | |
{#if idx === 0 || (idx > 0 && chat.time_range !== filteredChatList[idx - 1].time_range)} | |
<div | |
class="w-full pl-2.5 text-xs text-gray-500 dark:text-gray-500 font-medium {idx === 0 | |
? '' | |
: 'pt-5'} pb-0.5" | |
> | |
{$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} | |
<ChatItem | |
{chat} | |
{shiftKey} | |
selected={selectedChatId === chat.id} | |
on:select={() => { | |
selectedChatId = chat.id; | |
}} | |
on:unselect={() => { | |
selectedChatId = null; | |
}} | |
on:delete={(e) => { | |
if ((e?.detail ?? '') === 'shift') { | |
deleteChatHandler(chat.id); | |
} else { | |
deleteChat = chat; | |
showDeleteConfirm = true; | |
} | |
}} | |
/> | |
{/each} | |
</div> | |
</div> | |
<div class="px-2.5"> | |
<!-- <hr class=" border-gray-900 mb-1 w-full" /> --> | |
<div class="flex flex-col"> | |
{#if $user !== undefined} | |
<UserMenu | |
role={$user.role} | |
on:show={(e) => { | |
if (e.detail === 'archived-chat') { | |
showArchivedChats.set(true); | |
} | |
}} | |
> | |
<button | |
class=" flex rounded-xl py-3 px-3.5 w-full hover:bg-gray-100 dark:hover:bg-gray-900 transition" | |
on:click={() => { | |
showDropdown = !showDropdown; | |
}} | |
> | |
<div class=" self-center mr-3"> | |
<img | |
src={$user.profile_image_url} | |
class=" max-w-[30px] object-cover rounded-full" | |
alt="User profile" | |
/> | |
</div> | |
<div class=" self-center font-semibold">{$user.name}</div> | |
</button> | |
</UserMenu> | |
{/if} | |
</div> | |
</div> | |
</div> | |
<!-- <div | |
id="sidebar-handle" | |
class=" hidden md:fixed left-0 top-[50dvh] -translate-y-1/2 transition-transform translate-x-[255px] md:translate-x-[260px] rotate-0" | |
> | |
<Tooltip | |
placement="right" | |
content={`${$showSidebar ? $i18n.t('Close') : $i18n.t('Open')} ${$i18n.t('sidebar')}`} | |
touch={false} | |
> | |
<button | |
id="sidebar-toggle-button" | |
class=" group" | |
on:click={() => { | |
showSidebar.set(!$showSidebar); | |
}} | |
><span class="" data-state="closed" | |
><div | |
class="flex h-[72px] w-8 items-center justify-center opacity-50 group-hover:opacity-100 transition" | |
> | |
<div class="flex h-6 w-6 flex-col items-center"> | |
<div | |
class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[0.15rem] {$showSidebar | |
? 'group-hover:rotate-[15deg]' | |
: 'group-hover:rotate-[-15deg]'}" | |
/> | |
<div | |
class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[-0.15rem] {$showSidebar | |
? 'group-hover:rotate-[-15deg]' | |
: 'group-hover:rotate-[15deg]'}" | |
/> | |
</div> | |
</div> | |
</span> | |
</button> | |
</Tooltip> | |
</div> --> | |
</div> | |
<style> | |
.scrollbar-hidden:active::-webkit-scrollbar-thumb, | |
.scrollbar-hidden:focus::-webkit-scrollbar-thumb, | |
.scrollbar-hidden:hover::-webkit-scrollbar-thumb { | |
visibility: visible; | |
} | |
.scrollbar-hidden::-webkit-scrollbar-thumb { | |
visibility: hidden; | |
} | |
</style> | |