mirror of
https://github.com/open-webui/open-webui
synced 2025-05-17 12:03:41 +00:00
refac: banners
This commit is contained in:
Timothy Jaeryang Baek
parent
c5636ff68c
commit
30d02c638c
@ -1957,61 +1957,13 @@
|
|||||||
timestamp: Date.now()
|
timestamp: Date.now()
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
{history}
|
||||||
title={$chatTitle}
|
title={$chatTitle}
|
||||||
bind:selectedModels
|
bind:selectedModels
|
||||||
shareEnabled={!!history.currentId}
|
shareEnabled={!!history.currentId}
|
||||||
{initNewChat}
|
{initNewChat}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{#if !history.currentId && !$chatId && selectedModels.length <= 1 && ($banners.length > 0 || ($config?.license_metadata?.type ?? null) === 'trial' || (($config?.license_metadata?.seats ?? null) !== null && $config?.user_count > $config?.license_metadata?.seats))}
|
|
||||||
<div class="absolute top-12 left-0 right-0 w-full z-30">
|
|
||||||
<div class=" flex flex-col gap-1 w-full">
|
|
||||||
{#if ($config?.license_metadata?.type ?? null) === 'trial'}
|
|
||||||
<Banner
|
|
||||||
banner={{
|
|
||||||
type: 'info',
|
|
||||||
title: 'Trial License',
|
|
||||||
content: $i18n.t(
|
|
||||||
'You are currently using a trial license. Please contact support to upgrade your license.'
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if ($config?.license_metadata?.seats ?? null) !== null && $config?.user_count > $config?.license_metadata?.seats}
|
|
||||||
<Banner
|
|
||||||
banner={{
|
|
||||||
type: 'error',
|
|
||||||
title: 'License Error',
|
|
||||||
content: $i18n.t(
|
|
||||||
'Exceeded the number of seats in your license. Please contact support to increase the number of seats.'
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#each $banners.filter( (b) => (b.dismissible ? !JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]').includes(b.id) : true) ) as banner}
|
|
||||||
<Banner
|
|
||||||
{banner}
|
|
||||||
on:dismiss={(e) => {
|
|
||||||
const bannerId = e.detail;
|
|
||||||
|
|
||||||
localStorage.setItem(
|
|
||||||
'dismissedBannerIds',
|
|
||||||
JSON.stringify(
|
|
||||||
[
|
|
||||||
bannerId,
|
|
||||||
...JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]')
|
|
||||||
].filter((id) => $banners.find((b) => b.id === id))
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="flex flex-col flex-auto z-10 w-full @container">
|
<div class="flex flex-col flex-auto z-10 w-full @container">
|
||||||
{#if $settings?.landingPageMode === 'chat' || createMessagesList(history, history.currentId).length > 0}
|
{#if $settings?.landingPageMode === 'chat' || createMessagesList(history, history.currentId).length > 0}
|
||||||
<div
|
<div
|
||||||
|
|||||||
@ -4,7 +4,9 @@
|
|||||||
|
|
||||||
import {
|
import {
|
||||||
WEBUI_NAME,
|
WEBUI_NAME,
|
||||||
|
banners,
|
||||||
chatId,
|
chatId,
|
||||||
|
config,
|
||||||
mobile,
|
mobile,
|
||||||
settings,
|
settings,
|
||||||
showArchivedChats,
|
showArchivedChats,
|
||||||
@ -26,6 +28,7 @@
|
|||||||
import AdjustmentsHorizontal from '../icons/AdjustmentsHorizontal.svelte';
|
import AdjustmentsHorizontal from '../icons/AdjustmentsHorizontal.svelte';
|
||||||
|
|
||||||
import PencilSquare from '../icons/PencilSquare.svelte';
|
import PencilSquare from '../icons/PencilSquare.svelte';
|
||||||
|
import Banner from '../common/Banner.svelte';
|
||||||
|
|
||||||
const i18n = getContext('i18n');
|
const i18n = getContext('i18n');
|
||||||
|
|
||||||
@ -34,6 +37,7 @@
|
|||||||
export let shareEnabled: boolean = false;
|
export let shareEnabled: boolean = false;
|
||||||
|
|
||||||
export let chat;
|
export let chat;
|
||||||
|
export let history;
|
||||||
export let selectedModels;
|
export let selectedModels;
|
||||||
export let showModelSelector = true;
|
export let showModelSelector = true;
|
||||||
|
|
||||||
@ -43,136 +47,187 @@
|
|||||||
|
|
||||||
<ShareChatModal bind:show={showShareChatModal} chatId={$chatId} />
|
<ShareChatModal bind:show={showShareChatModal} chatId={$chatId} />
|
||||||
|
|
||||||
<nav class="sticky top-0 z-30 w-full px-1.5 py-1.5 -mb-8 flex items-center drag-region">
|
<nav class="sticky top-0 z-30 w-full py-1.5 -mb-8 flex flex-col items-center drag-region">
|
||||||
<div
|
<div class="flex items-center w-full px-1.5">
|
||||||
class=" bg-linear-to-b via-50% from-white via-white to-transparent dark:from-gray-900 dark:via-gray-900 dark:to-transparent pointer-events-none absolute inset-0 -bottom-7 z-[-1]"
|
<div
|
||||||
></div>
|
class=" bg-linear-to-b via-50% from-white via-white to-transparent dark:from-gray-900 dark:via-gray-900 dark:to-transparent pointer-events-none absolute inset-0 -bottom-7 z-[-1]"
|
||||||
|
></div>
|
||||||
|
|
||||||
<div class=" flex max-w-full w-full mx-auto px-1 pt-0.5 bg-transparent">
|
<div class=" flex max-w-full w-full mx-auto px-1 pt-0.5 bg-transparent">
|
||||||
<div class="flex items-center w-full max-w-full">
|
<div class="flex items-center w-full max-w-full">
|
||||||
<div
|
<div
|
||||||
class="{$showSidebar
|
class="{$showSidebar
|
||||||
? 'md:hidden'
|
? 'md:hidden'
|
||||||
: ''} mr-1 self-start flex flex-none items-center text-gray-600 dark:text-gray-400"
|
: ''} mr-1 self-start flex flex-none items-center text-gray-600 dark:text-gray-400"
|
||||||
>
|
|
||||||
<button
|
|
||||||
id="sidebar-toggle-button"
|
|
||||||
class="cursor-pointer px-2 py-2 flex rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition"
|
|
||||||
on:click={() => {
|
|
||||||
showSidebar.set(!$showSidebar);
|
|
||||||
}}
|
|
||||||
aria-label="Toggle Sidebar"
|
|
||||||
>
|
>
|
||||||
<div class=" m-auto self-center">
|
<button
|
||||||
<MenuLines />
|
id="sidebar-toggle-button"
|
||||||
</div>
|
class="cursor-pointer px-2 py-2 flex rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition"
|
||||||
</button>
|
on:click={() => {
|
||||||
</div>
|
showSidebar.set(!$showSidebar);
|
||||||
|
}}
|
||||||
|
aria-label="Toggle Sidebar"
|
||||||
|
>
|
||||||
|
<div class=" m-auto self-center">
|
||||||
|
<MenuLines />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="flex-1 overflow-hidden max-w-full py-0.5
|
class="flex-1 overflow-hidden max-w-full py-0.5
|
||||||
{$showSidebar ? 'ml-1' : ''}
|
{$showSidebar ? 'ml-1' : ''}
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{#if showModelSelector}
|
{#if showModelSelector}
|
||||||
<ModelSelector bind:selectedModels showSetDefault={!shareEnabled} />
|
<ModelSelector bind:selectedModels showSetDefault={!shareEnabled} />
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="self-start flex flex-none items-center text-gray-600 dark:text-gray-400">
|
<div class="self-start flex flex-none items-center text-gray-600 dark:text-gray-400">
|
||||||
<!-- <div class="md:hidden flex self-center w-[1px] h-5 mx-2 bg-gray-300 dark:bg-stone-700" /> -->
|
<!-- <div class="md:hidden flex self-center w-[1px] h-5 mx-2 bg-gray-300 dark:bg-stone-700" /> -->
|
||||||
{#if shareEnabled && chat && (chat.id || $temporaryChatEnabled)}
|
{#if shareEnabled && chat && (chat.id || $temporaryChatEnabled)}
|
||||||
<Menu
|
<Menu
|
||||||
{chat}
|
{chat}
|
||||||
{shareEnabled}
|
{shareEnabled}
|
||||||
shareHandler={() => {
|
shareHandler={() => {
|
||||||
showShareChatModal = !showShareChatModal;
|
showShareChatModal = !showShareChatModal;
|
||||||
}}
|
}}
|
||||||
downloadHandler={() => {
|
downloadHandler={() => {
|
||||||
showDownloadChatModal = !showDownloadChatModal;
|
showDownloadChatModal = !showDownloadChatModal;
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<button
|
||||||
|
class="flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition"
|
||||||
|
id="chat-context-menu-button"
|
||||||
|
>
|
||||||
|
<div class=" m-auto self-center">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
class="size-5"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</Menu>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<Tooltip content={$i18n.t('Controls')}>
|
||||||
<button
|
<button
|
||||||
class="flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition"
|
class=" flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition"
|
||||||
id="chat-context-menu-button"
|
on:click={async () => {
|
||||||
|
await showControls.set(!$showControls);
|
||||||
|
}}
|
||||||
|
aria-label="Controls"
|
||||||
>
|
>
|
||||||
<div class=" m-auto self-center">
|
<div class=" m-auto self-center">
|
||||||
<svg
|
<AdjustmentsHorizontal className=" size-5" strokeWidth="0.5" />
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke="currentColor"
|
|
||||||
class="size-5"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
</Menu>
|
</Tooltip>
|
||||||
{/if}
|
|
||||||
|
|
||||||
<Tooltip content={$i18n.t('Controls')}>
|
<Tooltip content={$i18n.t('New Chat')}>
|
||||||
<button
|
|
||||||
class=" flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition"
|
|
||||||
on:click={async () => {
|
|
||||||
await showControls.set(!$showControls);
|
|
||||||
}}
|
|
||||||
aria-label="Controls"
|
|
||||||
>
|
|
||||||
<div class=" m-auto self-center">
|
|
||||||
<AdjustmentsHorizontal className=" size-5" strokeWidth="0.5" />
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</Tooltip>
|
|
||||||
|
|
||||||
<Tooltip content={$i18n.t('New Chat')}>
|
|
||||||
<button
|
|
||||||
id="new-chat-button"
|
|
||||||
class=" flex {$showSidebar
|
|
||||||
? 'md:hidden'
|
|
||||||
: ''} cursor-pointer px-2 py-2 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-850 transition"
|
|
||||||
on:click={() => {
|
|
||||||
initNewChat();
|
|
||||||
}}
|
|
||||||
aria-label="New Chat"
|
|
||||||
>
|
|
||||||
<div class=" m-auto self-center">
|
|
||||||
<PencilSquare className=" size-5" strokeWidth="2" />
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</Tooltip>
|
|
||||||
|
|
||||||
{#if $user !== undefined && $user !== null}
|
|
||||||
<UserMenu
|
|
||||||
className="max-w-[200px]"
|
|
||||||
role={$user?.role}
|
|
||||||
on:show={(e) => {
|
|
||||||
if (e.detail === 'archived-chat') {
|
|
||||||
showArchivedChats.set(true);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
class="select-none flex rounded-xl p-1.5 w-full hover:bg-gray-50 dark:hover:bg-gray-850 transition"
|
id="new-chat-button"
|
||||||
aria-label="User Menu"
|
class=" flex {$showSidebar
|
||||||
|
? 'md:hidden'
|
||||||
|
: ''} cursor-pointer px-2 py-2 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-850 transition"
|
||||||
|
on:click={() => {
|
||||||
|
initNewChat();
|
||||||
|
}}
|
||||||
|
aria-label="New Chat"
|
||||||
>
|
>
|
||||||
<div class=" self-center">
|
<div class=" m-auto self-center">
|
||||||
<img
|
<PencilSquare className=" size-5" strokeWidth="2" />
|
||||||
src={$user?.profile_image_url}
|
|
||||||
class="size-6 object-cover rounded-full"
|
|
||||||
alt="User profile"
|
|
||||||
draggable="false"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
</UserMenu>
|
</Tooltip>
|
||||||
{/if}
|
|
||||||
|
{#if $user !== undefined && $user !== null}
|
||||||
|
<UserMenu
|
||||||
|
className="max-w-[200px]"
|
||||||
|
role={$user?.role}
|
||||||
|
on:show={(e) => {
|
||||||
|
if (e.detail === 'archived-chat') {
|
||||||
|
showArchivedChats.set(true);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="select-none flex rounded-xl p-1.5 w-full hover:bg-gray-50 dark:hover:bg-gray-850 transition"
|
||||||
|
aria-label="User Menu"
|
||||||
|
>
|
||||||
|
<div class=" self-center">
|
||||||
|
<img
|
||||||
|
src={$user?.profile_image_url}
|
||||||
|
class="size-6 object-cover rounded-full"
|
||||||
|
alt="User profile"
|
||||||
|
draggable="false"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</UserMenu>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{#if !history.currentId && !$chatId && ($banners.length > 0 || ($config?.license_metadata?.type ?? null) === 'trial' || (($config?.license_metadata?.seats ?? null) !== null && $config?.user_count > $config?.license_metadata?.seats))}
|
||||||
|
<div class=" w-full z-30 mt-5">
|
||||||
|
<div class=" flex flex-col gap-1 w-full">
|
||||||
|
{#if ($config?.license_metadata?.type ?? null) === 'trial'}
|
||||||
|
<Banner
|
||||||
|
banner={{
|
||||||
|
type: 'info',
|
||||||
|
title: 'Trial License',
|
||||||
|
content: $i18n.t(
|
||||||
|
'You are currently using a trial license. Please contact support to upgrade your license.'
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if ($config?.license_metadata?.seats ?? null) !== null && $config?.user_count > $config?.license_metadata?.seats}
|
||||||
|
<Banner
|
||||||
|
banner={{
|
||||||
|
type: 'error',
|
||||||
|
title: 'License Error',
|
||||||
|
content: $i18n.t(
|
||||||
|
'Exceeded the number of seats in your license. Please contact support to increase the number of seats.'
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#each $banners.filter( (b) => (b.dismissible ? !JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]').includes(b.id) : true) ) as banner}
|
||||||
|
<Banner
|
||||||
|
{banner}
|
||||||
|
on:dismiss={(e) => {
|
||||||
|
const bannerId = e.detail;
|
||||||
|
|
||||||
|
localStorage.setItem(
|
||||||
|
'dismissedBannerIds',
|
||||||
|
JSON.stringify(
|
||||||
|
[
|
||||||
|
bannerId,
|
||||||
|
...JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]')
|
||||||
|
].filter((id) => $banners.find((b) => b.id === id))
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user