ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-12 12:25:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refac: Improve banner handling and command visibility in chat UI

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-07-04 20:55:31 +04:00
parent c9e1f454fc
commit db0d2ae6d4
6 changed files with 74 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/lib/components/chat/Chat.svelte
View file

@ -125,6 +125,8 @@
let webSearchEnabled = false; let webSearchEnabled = false;
let codeInterpreterEnabled = false; let codeInterpreterEnabled = false;
let showCommands = false;
let chat = null; let chat = null;
let tags = []; let tags = [];
@ -2083,6 +2085,7 @@
bind:selectedModels bind:selectedModels
shareEnabled={!!history.currentId} shareEnabled={!!history.currentId}
{initNewChat} {initNewChat}
showBanners={!showCommands}
/> />
<div class="flex flex-col flex-auto z-10 w-full @container"> <div class="flex flex-col flex-auto z-10 w-full @container">
@ -2133,6 +2136,7 @@
bind:codeInterpreterEnabled bind:codeInterpreterEnabled
bind:webSearchEnabled bind:webSearchEnabled
bind:atSelectedModel bind:atSelectedModel
bind:showCommands
toolServers={$toolServers} toolServers={$toolServers}
transparentBackground={$settings?.backgroundImageUrl ?? false} transparentBackground={$settings?.backgroundImageUrl ?? false}
{stopResponse} {stopResponse}
@ -2193,6 +2197,7 @@
bind:codeInterpreterEnabled bind:codeInterpreterEnabled
bind:webSearchEnabled bind:webSearchEnabled
bind:atSelectedModel bind:atSelectedModel
bind:showCommands
transparentBackground={$settings?.backgroundImageUrl ?? false} transparentBackground={$settings?.backgroundImageUrl ?? false}
toolServers={$toolServers} toolServers={$toolServers}
{stopResponse} {stopResponse}

2
src/lib/components/chat/MessageInput.svelte
View file

@ -327,7 +327,7 @@
let command = ''; let command = '';
let showCommands = false; export let showCommands = false;
$: showCommands = ['/', '#', '@'].includes(command?.charAt(0)) || '\\#' === command?.slice(0, 2); $: showCommands = ['/', '#', '@'].includes(command?.charAt(0)) || '\\#' === command?.slice(0, 2);
let showTools = false; let showTools = false;

2
src/lib/components/chat/MessageInput/Commands/Prompts.svelte
View file

@ -50,7 +50,7 @@
// Ensure the container is visible before adjusting height // Ensure the container is visible before adjusting height
const rect = container.getBoundingClientRect(); const rect = container.getBoundingClientRect();
container.style.maxHeight = Math.max(Math.min(240, rect.bottom - 100), 100) + 'px'; container.style.maxHeight = Math.max(Math.min(240, rect.bottom - 80), 100) + 'px';
}, 100); }, 100);
} }
}; };

103
src/lib/components/chat/Navbar.svelte
View file

@ -40,6 +40,9 @@
export let history; export let history;
export let selectedModels; export let selectedModels;
export let showModelSelector = true; export let showModelSelector = true;
export let showBanners = true;
let closedBannerIds = [];
let showShareChatModal = false; let showShareChatModal = false;
let showDownloadChatModal = false; let showDownloadChatModal = false;
@ -199,52 +202,60 @@
</div> </div>
{/if} {/if}
{#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="absolute top-[100%] left-0 right-0 h-fit">
<div class=" w-full z-30 mt-5"> {#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=" flex flex-col gap-1 w-full"> <div class=" w-full z-30 mt-5">
{#if ($config?.license_metadata?.type ?? null) === 'trial'} <div class=" flex flex-col gap-1 w-full">
<Banner {#if ($config?.license_metadata?.type ?? null) === 'trial'}
banner={{ <Banner
type: 'info', banner={{
title: 'Trial License', type: 'info',
content: $i18n.t( title: 'Trial License',
'You are currently using a trial license. Please contact support to upgrade your 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))
) )
); }}
}} />
/> {/if}
{/each}
{#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}
{#if showBanners}
{#each $banners.filter((b) => ![...JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]'), ...closedBannerIds].includes(b.id)) as banner}
<Banner
{banner}
on:dismiss={(e) => {
const bannerId = e.detail;
if (banner.dismissible) {
localStorage.setItem(
'dismissedBannerIds',
JSON.stringify(
[
bannerId,
...JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]')
].filter((id) => $banners.find((b) => b.id === id))
)
);
} else {
closedBannerIds = [...closedBannerIds, bannerId];
}
}}
/>
{/each}
{/if}
</div>
</div> </div>
</div> {/if}
{/if} </div>
</nav> </nav>

3
src/lib/components/chat/Placeholder.svelte
View file

@ -37,6 +37,8 @@
export let selectedToolIds = []; export let selectedToolIds = [];
export let selectedFilterIds = []; export let selectedFilterIds = [];
export let showCommands = false;
export let imageGenerationEnabled = false; export let imageGenerationEnabled = false;
export let codeInterpreterEnabled = false; export let codeInterpreterEnabled = false;
export let webSearchEnabled = false; export let webSearchEnabled = false;
@ -220,6 +222,7 @@
bind:codeInterpreterEnabled bind:codeInterpreterEnabled
bind:webSearchEnabled bind:webSearchEnabled
bind:atSelectedModel bind:atSelectedModel
bind:showCommands
{toolServers} {toolServers}
{transparentBackground} {transparentBackground}
{stopResponse} {stopResponse}

16
src/lib/components/common/Banner.svelte
View file

@ -115,15 +115,13 @@
</div> </div>
{/if} {/if}
<div class="flex self-start"> <div class="flex self-start">
{#if banner.dismissible} <button
<button on:click={() => {
on:click={() => { dismiss(banner.id);
dismiss(banner.id); }}
}} class=" -mt-1 -mb-2 -translate-y-[1px] ml-1.5 mr-1 text-gray-400 dark:hover:text-white"
class=" -mt-1 -mb-2 -translate-y-[1px] ml-1.5 mr-1 text-gray-400 dark:hover:text-white" >&times;</button
>&times;</button >
>
{/if}
</div> </div>
</div> </div>
{/if} {/if}