forked from open-webui/open-webui
refac: better layout loading
This commit is contained in:
Timothy J. Baek
parent
2feba8af94
commit
e2447dd0a7
1 changed files with 116 additions and 116 deletions
|
|
@ -176,128 +176,128 @@
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if loaded}
|
<div class=" hidden lg:flex fixed bottom-0 right-0 px-3 py-3 z-10">
|
||||||
<div class=" hidden lg:flex fixed bottom-0 right-0 px-3 py-3 z-10">
|
<Tooltip content="Help" placement="left">
|
||||||
<Tooltip content="Help" placement="left">
|
<button
|
||||||
<button
|
id="show-shortcuts-button"
|
||||||
id="show-shortcuts-button"
|
bind:this={showShortcutsButtonElement}
|
||||||
bind:this={showShortcutsButtonElement}
|
class="text-gray-600 dark:text-gray-300 bg-gray-300/20 w-6 h-6 flex items-center justify-center text-xs rounded-full"
|
||||||
class="text-gray-600 dark:text-gray-300 bg-gray-300/20 w-6 h-6 flex items-center justify-center text-xs rounded-full"
|
on:click={() => {
|
||||||
on:click={() => {
|
showShortcuts = !showShortcuts;
|
||||||
showShortcuts = !showShortcuts;
|
}}
|
||||||
}}
|
|
||||||
>
|
|
||||||
?
|
|
||||||
</button>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ShortcutsModal bind:show={showShortcuts} />
|
|
||||||
|
|
||||||
<div class="app relative">
|
|
||||||
{#if !['user', 'admin'].includes($user.role)}
|
|
||||||
<div class="fixed w-full h-full flex z-50">
|
|
||||||
<div
|
|
||||||
class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
|
|
||||||
>
|
|
||||||
<div class="m-auto pb-44 flex flex-col justify-center">
|
|
||||||
<div class="max-w-md">
|
|
||||||
<div class="text-center dark:text-white text-2xl font-medium z-50">
|
|
||||||
Account Activation Pending<br /> Contact Admin for WebUI Access
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
|
|
||||||
Your account status is currently pending activation. To access the WebUI, please
|
|
||||||
reach out to the administrator. Admins can manage user statuses from the Admin
|
|
||||||
Panel.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=" mt-6 mx-auto relative group w-fit">
|
|
||||||
<button
|
|
||||||
class="relative z-20 flex px-5 py-2 rounded-full bg-white border border-gray-100 dark:border-none hover:bg-gray-100 transition font-medium text-sm"
|
|
||||||
on:click={async () => {
|
|
||||||
location.href = '/';
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{$i18n.t('Check Again')}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="text-xs text-center w-full mt-2 text-gray-400 underline"
|
|
||||||
on:click={async () => {
|
|
||||||
localStorage.removeItem('token');
|
|
||||||
location.href = '/auth';
|
|
||||||
}}>{$i18n.t('Sign Out')}</button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{:else if localDBChats.length > 0}
|
|
||||||
<div class="fixed w-full h-full flex z-50">
|
|
||||||
<div
|
|
||||||
class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
|
|
||||||
>
|
|
||||||
<div class="m-auto pb-44 flex flex-col justify-center">
|
|
||||||
<div class="max-w-md">
|
|
||||||
<div class="text-center dark:text-white text-2xl font-medium z-50">
|
|
||||||
Important Update<br /> Action Required for Chat Log Storage
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
|
|
||||||
{$i18n.t(
|
|
||||||
"Saving chat logs directly to your browser's storage is no longer supported. Please take a moment to download and delete your chat logs by clicking the button below. Don't worry, you can easily re-import your chat logs to the backend through"
|
|
||||||
)}
|
|
||||||
<span class="font-semibold dark:text-white"
|
|
||||||
>{$i18n.t('Settings')} > {$i18n.t('Chats')} > {$i18n.t('Import Chats')}</span
|
|
||||||
>. {$i18n.t(
|
|
||||||
'This ensures that your valuable conversations are securely saved to your backend database. Thank you!'
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=" mt-6 mx-auto relative group w-fit">
|
|
||||||
<button
|
|
||||||
class="relative z-20 flex px-5 py-2 rounded-full bg-white border border-gray-100 dark:border-none hover:bg-gray-100 transition font-medium text-sm"
|
|
||||||
on:click={async () => {
|
|
||||||
let blob = new Blob([JSON.stringify(localDBChats)], {
|
|
||||||
type: 'application/json'
|
|
||||||
});
|
|
||||||
saveAs(blob, `chat-export-${Date.now()}.json`);
|
|
||||||
|
|
||||||
const tx = DB.transaction('chats', 'readwrite');
|
|
||||||
await Promise.all([tx.store.clear(), tx.done]);
|
|
||||||
await deleteDB('Chats');
|
|
||||||
|
|
||||||
localDBChats = [];
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Download & Delete
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="text-xs text-center w-full mt-2 text-gray-400 underline"
|
|
||||||
on:click={async () => {
|
|
||||||
localDBChats = [];
|
|
||||||
}}>{$i18n.t('Close')}</button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div
|
|
||||||
class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 min-h-screen overflow-auto flex flex-row"
|
|
||||||
>
|
>
|
||||||
|
?
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ShortcutsModal bind:show={showShortcuts} />
|
||||||
|
|
||||||
|
<div class="app relative">
|
||||||
|
<div
|
||||||
|
class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 min-h-screen overflow-auto flex flex-row"
|
||||||
|
>
|
||||||
|
{#if loaded}
|
||||||
|
{#if !['user', 'admin'].includes($user.role)}
|
||||||
|
<div class="fixed w-full h-full flex z-50">
|
||||||
|
<div
|
||||||
|
class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
|
||||||
|
>
|
||||||
|
<div class="m-auto pb-44 flex flex-col justify-center">
|
||||||
|
<div class="max-w-md">
|
||||||
|
<div class="text-center dark:text-white text-2xl font-medium z-50">
|
||||||
|
Account Activation Pending<br /> Contact Admin for WebUI Access
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
|
||||||
|
Your account status is currently pending activation. To access the WebUI, please
|
||||||
|
reach out to the administrator. Admins can manage user statuses from the Admin
|
||||||
|
Panel.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=" mt-6 mx-auto relative group w-fit">
|
||||||
|
<button
|
||||||
|
class="relative z-20 flex px-5 py-2 rounded-full bg-white border border-gray-100 dark:border-none hover:bg-gray-100 text-gray-700 transition font-medium text-sm"
|
||||||
|
on:click={async () => {
|
||||||
|
location.href = '/';
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{$i18n.t('Check Again')}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="text-xs text-center w-full mt-2 text-gray-400 underline"
|
||||||
|
on:click={async () => {
|
||||||
|
localStorage.removeItem('token');
|
||||||
|
location.href = '/auth';
|
||||||
|
}}>{$i18n.t('Sign Out')}</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else if localDBChats.length > 0}
|
||||||
|
<div class="fixed w-full h-full flex z-50">
|
||||||
|
<div
|
||||||
|
class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
|
||||||
|
>
|
||||||
|
<div class="m-auto pb-44 flex flex-col justify-center">
|
||||||
|
<div class="max-w-md">
|
||||||
|
<div class="text-center dark:text-white text-2xl font-medium z-50">
|
||||||
|
Important Update<br /> Action Required for Chat Log Storage
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
|
||||||
|
{$i18n.t(
|
||||||
|
"Saving chat logs directly to your browser's storage is no longer supported. Please take a moment to download and delete your chat logs by clicking the button below. Don't worry, you can easily re-import your chat logs to the backend through"
|
||||||
|
)}
|
||||||
|
<span class="font-semibold dark:text-white"
|
||||||
|
>{$i18n.t('Settings')} > {$i18n.t('Chats')} > {$i18n.t('Import Chats')}</span
|
||||||
|
>. {$i18n.t(
|
||||||
|
'This ensures that your valuable conversations are securely saved to your backend database. Thank you!'
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=" mt-6 mx-auto relative group w-fit">
|
||||||
|
<button
|
||||||
|
class="relative z-20 flex px-5 py-2 rounded-full bg-white border border-gray-100 dark:border-none hover:bg-gray-100 transition font-medium text-sm"
|
||||||
|
on:click={async () => {
|
||||||
|
let blob = new Blob([JSON.stringify(localDBChats)], {
|
||||||
|
type: 'application/json'
|
||||||
|
});
|
||||||
|
saveAs(blob, `chat-export-${Date.now()}.json`);
|
||||||
|
|
||||||
|
const tx = DB.transaction('chats', 'readwrite');
|
||||||
|
await Promise.all([tx.store.clear(), tx.done]);
|
||||||
|
await deleteDB('Chats');
|
||||||
|
|
||||||
|
localDBChats = [];
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Download & Delete
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="text-xs text-center w-full mt-2 text-gray-400 underline"
|
||||||
|
on:click={async () => {
|
||||||
|
localDBChats = [];
|
||||||
|
}}>{$i18n.t('Close')}</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
<SettingsModal bind:show={$showSettings} />
|
<SettingsModal bind:show={$showSettings} />
|
||||||
<ChangelogModal bind:show={$showChangelog} />
|
<ChangelogModal bind:show={$showChangelog} />
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.loading {
|
.loading {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue