bhetherman/open-webui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek committed 2026-07-14 03:10:12 -04:00
1 parent d364101761
commit d475cb9174
8 files changed
+97 -120
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/lib/components/chat/ChatPlaceholder.svelte
+2 -2
View File
@@ -76,8 +76,8 @@
className="w-full flex justify-start mb-0.5" className="w-full flex justify-start mb-0.5"
placement="top" placement="top"
> >
<div class="flex items-center gap-2 text-gray-500 text-lg mt-2 w-fit"> <div class="flex items-center gap-1.5 text-gray-500 text-xs mt-1 w-fit">
<EyeSlash strokeWidth="2.5" className="size-5" />{$i18n.t('Temporary Chat')} <EyeSlash strokeWidth="2" className="size-3.5" />{$i18n.t('Temporary Chat')}
</div> </div>
</Tooltip> </Tooltip>
{/if} {/if}
src/lib/components/chat/Controls/Controls.svelte
+14 -6
View File
@@ -30,7 +30,7 @@
let showAdvancedParams = getOpen('advancedParams'); let showAdvancedParams = getOpen('advancedParams');
const compactSectionButtonClass = const compactSectionButtonClass =
'w-full h-8 px-2.5 rounded-xl text-[13px] font-normal text-gray-600 hover:bg-gray-50/40 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800/40 dark:hover:text-gray-100 transition cursor-pointer select-none'; 'w-full py-1 text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition cursor-pointer select-none';
</script> </script>
<div class=" dark:text-white"> <div class=" dark:text-white">
@@ -50,13 +50,15 @@
{/if} {/if}
{#if $user?.role === 'admin' || ($user?.permissions.chat?.controls ?? true)} {#if $user?.role === 'admin' || ($user?.permissions.chat?.controls ?? true)}
<div class=" dark:text-gray-200 text-sm py-0.5 px-0.5"> <div class="space-y-1 dark:text-gray-200 text-sm py-0.5 px-0.5">
{#if chatFiles.length > 0} {#if chatFiles.length > 0}
<Collapsible <Collapsible
title={$i18n.t('Files')} title={$i18n.t('Files')}
bind:open={showFiles} bind:open={showFiles}
onChange={setOpen('files')} onChange={setOpen('files')}
buttonClassName="w-full" buttonClassName="w-full"
chevronClassName="size-2.5"
chevronStrokeWidth="2"
> >
<div class="flex flex-col gap-1 mt-1.5" slot="content"> <div class="flex flex-col gap-1 mt-1.5" slot="content">
{#each chatFiles as file, fileIdx} {#each chatFiles as file, fileIdx}
@@ -91,8 +93,10 @@
onChange={setOpen('valves')} onChange={setOpen('valves')}
title={$i18n.t('Valves')} title={$i18n.t('Valves')}
buttonClassName={compactSectionButtonClass} buttonClassName={compactSectionButtonClass}
chevronClassName="size-2.5"
chevronStrokeWidth="2"
> >
<div class="px-2 pt-1 text-sm" slot="content"> <div class="pt-1 pb-1 text-xs" slot="content">
<Valves show={showValves} /> <Valves show={showValves} />
</div> </div>
</Collapsible> </Collapsible>
@@ -104,11 +108,13 @@
bind:open={showSystemPrompt} bind:open={showSystemPrompt}
onChange={setOpen('systemPrompt')} onChange={setOpen('systemPrompt')}
buttonClassName={compactSectionButtonClass} buttonClassName={compactSectionButtonClass}
chevronClassName="size-2.5"
chevronStrokeWidth="2"
> >
<div class="px-2 pt-1" slot="content"> <div class="pt-1 pb-1" slot="content">
<textarea <textarea
bind:value={params.system} bind:value={params.system}
class="w-full text-sm outline-hidden resize-vertical {$settings.highContrastMode class="w-full text-xs outline-hidden resize-vertical {$settings.highContrastMode
? 'border-2 border-gray-300 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800 px-2 py-1.5' ? 'border-2 border-gray-300 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800 px-2 py-1.5'
: 'py-1 bg-transparent'}" : 'py-1 bg-transparent'}"
rows="3" rows="3"
@@ -124,8 +130,10 @@
bind:open={showAdvancedParams} bind:open={showAdvancedParams}
onChange={setOpen('advancedParams')} onChange={setOpen('advancedParams')}
buttonClassName={compactSectionButtonClass} buttonClassName={compactSectionButtonClass}
chevronClassName="size-2.5"
chevronStrokeWidth="2"
> >
<div class="px-2 pt-1 text-sm" slot="content"> <div class="pt-1 pb-1 text-xs" slot="content">
<div> <div>
<AdvancedParams admin={$user?.role === 'admin'} custom={true} bind:params /> <AdvancedParams admin={$user?.role === 'admin'} custom={true} bind:params />
</div> </div>
src/lib/components/chat/Controls/Valves.svelte
+2 -2
View File
@@ -148,7 +148,7 @@
<div class="flex gap-2"> <div class="flex gap-2">
<div class="flex-1"> <div class="flex-1">
<select <select
class="w-full h-[1.6875rem] rounded-xl text-xs px-2 bg-transparent outline-hidden" class="w-full rounded-sm py-1 px-1 text-xs bg-transparent outline-hidden"
bind:value={tab} bind:value={tab}
placeholder={$i18n.t('Select')} placeholder={$i18n.t('Select')}
> >
@@ -161,7 +161,7 @@
<div class="flex-1"> <div class="flex-1">
<select <select
class="w-full h-[1.6875rem] rounded-xl px-2 text-xs bg-transparent outline-hidden" class="w-full rounded-sm py-1 px-1 text-xs bg-transparent outline-hidden"
bind:value={selectedId} bind:value={selectedId}
on:change={async () => { on:change={async () => {
await tick(); await tick();
src/lib/components/chat/MessageInput.svelte
+1 -1
View File
@@ -2013,7 +2013,7 @@
</div> </div>
<div class="self-end flex space-x-1 mr-1 shrink-0 gap-[0.5px]"> <div class="self-end flex space-x-1 mr-1 shrink-0 gap-[0.5px]">
<div class="-mr-1 flex min-w-0 max-w-[10rem] items-center sm:max-w-[13rem]"> <div class="-mr-[0.5px] flex min-w-0 max-w-[10rem] items-center sm:max-w-[13rem]">
<ModelSelector <ModelSelector
bind:selectedModels bind:selectedModels
showSetDefault={!history?.currentId} showSetDefault={!history?.currentId}
src/lib/components/chat/Navbar.svelte
+69 -102
View File
@@ -9,7 +9,6 @@
config, config,
mobile, mobile,
settings, settings,
showArchivedChats,
showControls, showControls,
showSidebar, showSidebar,
temporaryChatEnabled, temporaryChatEnabled,
@@ -23,7 +22,6 @@
import ShareChatModal from '../chat/ShareChatModal.svelte'; import ShareChatModal from '../chat/ShareChatModal.svelte';
import Tooltip from '../common/Tooltip.svelte'; import Tooltip from '../common/Tooltip.svelte';
import Menu from '$lib/components/layout/Navbar/Menu.svelte'; import Menu from '$lib/components/layout/Navbar/Menu.svelte';
import UserMenu from '$lib/components/layout/Sidebar/UserMenu.svelte';
import AdjustmentsHorizontal from '../icons/AdjustmentsHorizontal.svelte'; import AdjustmentsHorizontal from '../icons/AdjustmentsHorizontal.svelte';
import PencilSquare from '../icons/PencilSquare.svelte'; import PencilSquare from '../icons/PencilSquare.svelte';
@@ -37,7 +35,6 @@
import ChatPlus from '../icons/ChatPlus.svelte'; import ChatPlus from '../icons/ChatPlus.svelte';
import ChatCheck from '../icons/ChatCheck.svelte'; import ChatCheck from '../icons/ChatCheck.svelte';
import Knobs from '../icons/Knobs.svelte'; import Knobs from '../icons/Knobs.svelte';
import { WEBUI_API_BASE_URL } from '$lib/constants';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@@ -80,11 +77,7 @@
aria-label="New Chat" aria-label="New Chat"
/> />
<nav <nav class="sticky top-0 z-30 w-full pt-0.5 pb-1 -mb-12 flex flex-col items-center drag-region">
class="sticky top-0 z-30 w-full {chat?.id
? 'pt-0.5 pb-1'
: 'pt-1 pb-1'} -mb-12 flex flex-col items-center drag-region"
>
<div class="flex items-center w-full pl-1.5 pr-1"> <div class="flex items-center w-full pl-1.5 pr-1">
<div <div
id="navbar-bg-gradient-to-b" id="navbar-bg-gradient-to-b"
@@ -93,47 +86,83 @@
: 'invisible'} bg-linear-to-b via-40% to-97% from-white/90 via-white/50 to-transparent dark:from-gray-900/90 dark:via-gray-900/50 dark:to-transparent pointer-events-none absolute inset-0 -bottom-10 z-[-1]" : 'invisible'} bg-linear-to-b via-40% to-97% from-white/90 via-white/50 to-transparent dark:from-gray-900/90 dark:via-gray-900/50 dark:to-transparent pointer-events-none absolute inset-0 -bottom-10 z-[-1]"
></div> ></div>
<div class=" flex max-w-full w-full mx-auto px-1.5 md:px-2 bg-transparent"> <div class=" flex max-w-full w-full mx-auto bg-transparent">
<div class="flex items-center w-full max-w-full"> <div class="flex items-center w-full max-w-full">
{#if $mobile && !$showSidebar} {#if $mobile && !$showSidebar}
<div <div class="-translate-x-0.5 mr-1 mt-1 self-start flex flex-none items-center">
class="-translate-x-0.5 mr-1 mt-1 self-start flex flex-none items-center text-gray-600 dark:text-gray-400"
>
<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}> <Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
<button <button
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition" class="flex size-6 cursor-pointer items-center justify-center rounded-lg text-gray-500 transition hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800/40 dark:hover:text-gray-200"
on:click={() => { on:click={() => {
showSidebar.set(!$showSidebar); showSidebar.set(!$showSidebar);
}} }}
aria-label={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
> >
<div class=" self-center p-1.5"> <Sidebar />
<Sidebar />
</div>
</button> </button>
</Tooltip> </Tooltip>
</div> </div>
{/if} {/if}
<div class="flex-1 overflow-hidden max-w-full mt-0.5 py-0.5 {$showSidebar ? 'ml-1' : ''}"> <div
class="flex-1 overflow-hidden max-w-full mt-0.5 py-0.5 pl-0.5 {$showSidebar
? 'ml-1'
: ''}"
>
{#if chat?.id} {#if chat?.id}
<button <div class="flex max-w-full min-w-0 items-center gap-2">
type="button" <div
class="max-w-full truncate rounded-lg px-2 py-1 text-left text-[13px] font-medium text-gray-700 transition-colors duration-100 hover:bg-gray-50/40 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800/40 dark:hover:text-gray-100" class="min-w-0 truncate py-1 text-left text-[15px] font-normal text-gray-700 dark:text-gray-300"
on:click={() => scrollToTop?.()} >
> {title || chat?.chat?.title || $i18n.t('New Chat')}
{title || chat?.chat?.title || $i18n.t('New Chat')} </div>
</button>
{#if shareEnabled && chat && (chat.id || $temporaryChatEnabled)}
<Menu
{chat}
{shareEnabled}
{readOnly}
{scrollToTop}
shareHandler={() => {
showShareChatModal = !showShareChatModal;
}}
archiveChatHandler={() => {
archiveChatHandler(chat.id);
}}
deleteChatHandler={() => {
deleteChatHandler(chat.id);
}}
{moveChatHandler}
>
<button
class="flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-gray-500 transition hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800/40 dark:hover:text-gray-200"
id="chat-context-menu-button"
aria-label={$i18n.t('Chat actions')}
>
<EllipsisHorizontal className="size-4.5" strokeWidth="1.5" />
</button>
</Menu>
{/if}
</div>
{:else}
<div class="pointer-events-none invisible flex max-w-full min-w-0 items-center gap-2">
<div
class="min-w-0 truncate py-1 text-left text-[15px] font-normal text-gray-700 dark:text-gray-300"
>
{$i18n.t('New Chat')}
</div>
</div>
{/if} {/if}
</div> </div>
<div class="self-start flex flex-none items-center text-gray-600 dark:text-gray-400"> <div class="mr-1 flex flex-none items-center gap-2 self-center">
<!-- <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 $user?.role === 'user' ? ($user?.permissions?.chat?.temporary ?? true) && !($user?.permissions?.chat?.temporary_enforced ?? false) : true} {#if $user?.role === 'user' ? ($user?.permissions?.chat?.temporary ?? true) && !($user?.permissions?.chat?.temporary_enforced ?? false) : true}
{#if !chat?.id} {#if !chat?.id}
<Tooltip content={$i18n.t(`Temporary Chat`)}> <Tooltip content={$i18n.t(`Temporary Chat`)}>
<button <button
class="flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition" class="flex size-6 cursor-pointer items-center justify-center rounded-lg text-gray-500 transition hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800/40 dark:hover:text-gray-200"
id="temporary-chat-button" id="temporary-chat-button"
on:click={async () => { on:click={async () => {
if (($settings?.temporaryChatByDefault ?? false) && $temporaryChatEnabled) { if (($settings?.temporaryChatByDefault ?? false) && $temporaryChatEnabled) {
@@ -154,28 +183,26 @@
window.history.replaceState(null, '', location.pathname); window.history.replaceState(null, '', location.pathname);
} }
}} }}
aria-label={$i18n.t(`Temporary Chat`)}
> >
<div class=" m-auto self-center"> {#if $temporaryChatEnabled}
{#if $temporaryChatEnabled} <ChatBubbleDottedChecked className="size-4.5" strokeWidth="1.5" />
<ChatBubbleDottedChecked className=" size-4.5" strokeWidth="1.5" /> {:else}
{:else} <ChatBubbleDotted className="size-4.5" strokeWidth="1.5" />
<ChatBubbleDotted className=" size-4.5" strokeWidth="1.5" /> {/if}
{/if}
</div>
</button> </button>
</Tooltip> </Tooltip>
{:else if $temporaryChatEnabled} {:else if $temporaryChatEnabled}
<Tooltip content={$i18n.t(`Save Chat`)}> <Tooltip content={$i18n.t(`Save Chat`)}>
<button <button
class="flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition" class="flex size-6 cursor-pointer items-center justify-center rounded-lg text-gray-500 transition hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800/40 dark:hover:text-gray-200"
id="save-temporary-chat-button" id="save-temporary-chat-button"
on:click={async () => { on:click={async () => {
onSaveTempChat(); onSaveTempChat();
}} }}
aria-label={$i18n.t(`Save Chat`)}
> >
<div class=" m-auto self-center"> <ChatCheck className="size-4.5" strokeWidth="1.5" />
<ChatCheck className=" size-4.5" strokeWidth="1.5" />
</div>
</button> </button>
</Tooltip> </Tooltip>
{/if} {/if}
@@ -184,92 +211,32 @@
{#if $mobile && !$temporaryChatEnabled && chat && chat.id} {#if $mobile && !$temporaryChatEnabled && chat && chat.id}
<Tooltip content={$i18n.t('New Chat')}> <Tooltip content={$i18n.t('New Chat')}>
<button <button
class=" flex {$showSidebar class="flex size-6 {$showSidebar
? 'md:hidden' ? '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" : ''} cursor-pointer items-center justify-center rounded-lg text-gray-500 transition hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800/40 dark:hover:text-gray-200"
on:click={() => { on:click={() => {
initNewChat(); initNewChat();
}} }}
aria-label="New Chat" aria-label="New Chat"
> >
<div class=" m-auto self-center"> <ChatPlus className="size-4.5" strokeWidth="1.5" />
<ChatPlus className=" size-4.5" strokeWidth="1.5" />
</div>
</button> </button>
</Tooltip> </Tooltip>
{/if} {/if}
{#if shareEnabled && chat && (chat.id || $temporaryChatEnabled)}
<Menu
{chat}
{shareEnabled}
{readOnly}
{scrollToTop}
shareHandler={() => {
showShareChatModal = !showShareChatModal;
}}
archiveChatHandler={() => {
archiveChatHandler(chat.id);
}}
deleteChatHandler={() => {
deleteChatHandler(chat.id);
}}
{moveChatHandler}
>
<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">
<EllipsisHorizontal className=" size-5" strokeWidth="1.5" />
</div>
</button>
</Menu>
{/if}
{#if $user?.role === 'admin' || ($user?.permissions.chat?.controls ?? true)} {#if $user?.role === 'admin' || ($user?.permissions.chat?.controls ?? true)}
<Tooltip content={$i18n.t('Controls')}> <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 size-6 cursor-pointer items-center justify-center rounded-lg text-gray-500 transition hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800/40 dark:hover:text-gray-200"
on:click={async () => { on:click={async () => {
await showControls.set(!$showControls); await showControls.set(!$showControls);
}} }}
aria-label="Controls" aria-label="Controls"
> >
<div class=" m-auto self-center"> <Knobs className="size-5" strokeWidth="1" />
<Knobs className=" size-5" strokeWidth="1" />
</div>
</button> </button>
</Tooltip> </Tooltip>
{/if} {/if}
{#if $user !== undefined && $user !== null}
<UserMenu
className="w-[240px]"
role={$user?.role}
help={true}
on:show={(e) => {
if (e.detail === 'archived-chat') {
showArchivedChats.set(true);
}
}}
>
<button
type="button"
class="select-none flex rounded-xl p-1.5 w-full hover:bg-gray-50 dark:hover:bg-gray-850 transition"
aria-label={$i18n.t('User menu')}
>
<div class=" self-center">
<img
src={`${WEBUI_API_BASE_URL}/users/${$user?.id}/profile/image`}
class="size-6 object-cover rounded-full"
alt=""
draggable="false"
/>
</div>
</button>
</UserMenu>
{/if}
</div> </div>
</div> </div>
</div> </div>
src/lib/components/chat/Placeholder.svelte
+2 -2
View File
@@ -87,8 +87,8 @@
className="w-full flex justify-center mb-0.5" className="w-full flex justify-center mb-0.5"
placement="top" placement="top"
> >
<div class="flex items-center gap-2 text-gray-500 text-base my-2 w-fit"> <div class="flex items-center gap-1.5 text-gray-500 text-xs my-1 w-fit">
<EyeSlash strokeWidth="2.5" className="size-4" />{$i18n.t('Temporary Chat')} <EyeSlash strokeWidth="2" className="size-3.5" />{$i18n.t('Temporary Chat')}
</div> </div>
</Tooltip> </Tooltip>
{/if} {/if}
src/lib/components/common/Collapsible.svelte
+6 -4
View File
@@ -45,6 +45,8 @@
export let id = ''; export let id = '';
export let title = null; export let title = null;
export let attributes = null; export let attributes = null;
export let chevronClassName = 'size-3';
export let chevronStrokeWidth = '2.75';
export let chevron = false; export let chevron = false;
export let grow = false; export let grow = false;
@@ -119,9 +121,9 @@
{#if !disabled} {#if !disabled}
<div class="flex self-center translate-y-[1px]"> <div class="flex self-center translate-y-[1px]">
{#if open} {#if open}
<ChevronUp strokeWidth="2.75" className="size-3" /> <ChevronUp strokeWidth={chevronStrokeWidth} className={chevronClassName} />
{:else} {:else}
<ChevronDown strokeWidth="2.75" className="size-3" /> <ChevronDown strokeWidth={chevronStrokeWidth} className={chevronClassName} />
{/if} {/if}
</div> </div>
{/if} {/if}
@@ -144,9 +146,9 @@
{#if chevron} {#if chevron}
<div class="flex self-start translate-y-1"> <div class="flex self-start translate-y-1">
{#if open} {#if open}
<ChevronUp strokeWidth="2.75" className="size-3" /> <ChevronUp strokeWidth={chevronStrokeWidth} className={chevronClassName} />
{:else} {:else}
<ChevronDown strokeWidth="2.75" className="size-3" /> <ChevronDown strokeWidth={chevronStrokeWidth} className={chevronClassName} />
{/if} {/if}
</div> </div>
{/if} {/if}
src/lib/components/layout/Navbar/Menu.svelte
+1 -1
View File
@@ -284,7 +284,7 @@
onClose(); onClose();
} }
}} }}
align="end" align="start"
sideOffset={8} sideOffset={8}
> >
<slot /> <slot />