OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refac: redesign

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2025-05-23 17:30:17 +04:00
parent 06aa59e2a5
commit 03288d9fca
1 changed files with 79 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/lib/components/chat/MessageInput.svelte
View File

@ -151,6 +151,30 @@
.map((id) => ($models.find((model) => model.id === id) || {})?.filters ?? []) .map((id) => ($models.find((model) => model.id === id) || {})?.filters ?? [])
.reduce((acc, filters) => acc.filter((f1) => filters.some((f2) => f2.id === f1.id))); .reduce((acc, filters) => acc.filter((f1) => filters.some((f2) => f2.id === f1.id)));
let showToolsButton = false;
$: showToolsButton = toolServers.length + selectedToolIds.length > 0;
let showWebSearchButton = false;
$: showWebSearchButton =
(atSelectedModel?.id ? [atSelectedModel.id] : selectedModels).length ===
webSearchCapableModels.length &&
$config?.features?.enable_web_search &&
($_user.role === 'admin' || $_user?.permissions?.features?.web_search);
let showImageGenerationButton = false;
$: showImageGenerationButton =
(atSelectedModel?.id ? [atSelectedModel.id] : selectedModels).length ===
imageGenerationCapableModels.length &&
$config?.features?.enable_image_generation &&
($_user.role === 'admin' || $_user?.permissions?.features?.image_generation);
let showCodeInterpreterButton = false;
$: showCodeInterpreterButton =
(atSelectedModel?.id ? [atSelectedModel.id] : selectedModels).length ===
codeInterpreterCapableModels.length &&
$config?.features?.enable_code_interpreter &&
($_user.role === 'admin' || $_user?.permissions?.features?.code_interpreter);
const scrollToBottom = () => { const scrollToBottom = () => {
const element = document.getElementById('messages-container'); const element = document.getElementById('messages-container');
element.scrollTo({ element.scrollTo({
@ -1091,8 +1115,8 @@
{/if} {/if}
</div> </div>
<div class=" flex justify-between mt-1 mb-2.5 mx-0.5 max-w-full" dir="ltr"> <div class=" flex justify-between mt-0.5 mb-2.5 mx-0.5 max-w-full" dir="ltr">
<div class="ml-1 self-end flex items-center flex-1 max-w-[80%] gap-0.5"> <div class="ml-1 self-end flex items-center flex-1 max-w-[80%]">
<InputMenu <InputMenu
bind:selectedToolIds bind:selectedToolIds
selectedModels={atSelectedModel ? [atSelectedModel.id] : selectedModels} selectedModels={atSelectedModel ? [atSelectedModel.id] : selectedModels}
@ -1162,8 +1186,13 @@
</button> </button>
</InputMenu> </InputMenu>
{#if $_user && (showToolsButton || (toggleFilters && toggleFilters.length > 0) || showWebSearchButton || showImageGenerationButton || showCodeInterpreterButton)}
<div
class="flex self-center w-[1px] h-4 mx-1.5 bg-gray-50 dark:bg-gray-800"
/>
<div class="flex gap-1 items-center overflow-x-auto scrollbar-none flex-1"> <div class="flex gap-1 items-center overflow-x-auto scrollbar-none flex-1">
{#if toolServers.length + selectedToolIds.length > 0} {#if showToolsButton}
<Tooltip <Tooltip
content={$i18n.t('{{COUNT}} Available Tools', { content={$i18n.t('{{COUNT}} Available Tools', {
COUNT: toolServers.length + selectedToolIds.length COUNT: toolServers.length + selectedToolIds.length
@ -1186,7 +1215,6 @@
</Tooltip> </Tooltip>
{/if} {/if}
{#if $_user}
{#each toggleFilters as filter, filterIdx (filter.id)} {#each toggleFilters as filter, filterIdx (filter.id)}
<Tooltip content={filter?.description} placement="top"> <Tooltip content={filter?.description} placement="top">
<button <button
@ -1200,17 +1228,17 @@
} }
}} }}
type="button" type="button"
class="px-1.5 @xl:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden border {selectedFilterIds.includes( class="px-2 @xl:px-2.5 py-2 flex gap-1.5 items-center text-sm rounded-full transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden hover:bg-gray-50 dark:hover:bg-gray-800 {selectedFilterIds.includes(
filter.id filter.id
) )
? 'bg-gray-50 dark:bg-gray-400/10 border-gray-100 dark:border-gray-700 text-gray-600 dark:text-gray-400' ? 'text-sky-500 dark:text-sky-300 bg-sky-100 dark:bg-sky-200/5'
: 'bg-transparent border-transparent text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 '} capitalize" : 'bg-transparent text-gray-600 dark:text-gray-300 '} capitalize"
> >
{#if filter?.icon} {#if filter?.icon}
<div class="size-5 items-center flex justify-center"> <div class="size-4 items-center flex justify-center">
<img <img
src={filter.icon} src={filter.icon}
class="size-4.5 {filter.icon.includes('svg') class="size-3.5 {filter.icon.includes('svg')
? 'dark:invert-[80%]' ? 'dark:invert-[80%]'
: ''}" : ''}"
style="fill: currentColor;" style="fill: currentColor;"
@ -1218,74 +1246,74 @@
/> />
</div> </div>
{:else} {:else}
<Sparkles className="size-5" strokeWidth="1.75" /> <Sparkles className="size-4" strokeWidth="1.75" />
{/if} {/if}
<span <span
class="hidden @xl:block whitespace-nowrap overflow-hidden text-ellipsis leading-none" class="hidden @xl:block whitespace-nowrap overflow-hidden text-ellipsis leading-none pr-0.5"
>{filter?.name}</span >{filter?.name}</span
> >
</button> </button>
</Tooltip> </Tooltip>
{/each} {/each}
{#if (atSelectedModel?.id ? [atSelectedModel.id] : selectedModels).length === webSearchCapableModels.length && $config?.features?.enable_web_search && ($_user.role === 'admin' || $_user?.permissions?.features?.web_search)} {#if showWebSearchButton}
<Tooltip content={$i18n.t('Search the internet')} placement="top"> <Tooltip content={$i18n.t('Search the internet')} placement="top">
<button <button
on:click|preventDefault={() => (webSearchEnabled = !webSearchEnabled)} on:click|preventDefault={() => (webSearchEnabled = !webSearchEnabled)}
type="button" type="button"
class="px-1.5 @xl:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden border {webSearchEnabled || class="px-2 @xl:px-2.5 py-2 flex gap-1.5 items-center text-sm rounded-full transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden hover:bg-gray-50 dark:hover:bg-gray-800 {webSearchEnabled ||
($settings?.webSearch ?? false) === 'always' ($settings?.webSearch ?? false) === 'always'
? 'bg-blue-100 dark:bg-blue-500/20 border-blue-400/20 text-blue-500 dark:text-blue-400' ? ' text-sky-500 dark:text-sky-300 bg-sky-100 dark:bg-sky-200/5'
: 'bg-transparent border-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800'}" : 'bg-transparent text-gray-600 dark:text-gray-300 '}"
> >
<GlobeAlt className="size-5" strokeWidth="1.75" /> <GlobeAlt className="size-4" strokeWidth="1.75" />
<span <span
class="hidden @xl:block whitespace-nowrap overflow-hidden text-ellipsis leading-none" class="hidden @xl:block whitespace-nowrap overflow-hidden text-ellipsis leading-none pr-0.5"
>{$i18n.t('Web Search')}</span >{$i18n.t('Web Search')}</span
> >
</button> </button>
</Tooltip> </Tooltip>
{/if} {/if}
{#if (atSelectedModel?.id ? [atSelectedModel.id] : selectedModels).length === imageGenerationCapableModels.length && $config?.features?.enable_image_generation && ($_user.role === 'admin' || $_user?.permissions?.features?.image_generation)} {#if showImageGenerationButton}
<Tooltip content={$i18n.t('Generate an image')} placement="top"> <Tooltip content={$i18n.t('Generate an image')} placement="top">
<button <button
on:click|preventDefault={() => on:click|preventDefault={() =>
(imageGenerationEnabled = !imageGenerationEnabled)} (imageGenerationEnabled = !imageGenerationEnabled)}
type="button" type="button"
class="px-1.5 @xl:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden border {imageGenerationEnabled class="px-2 @xl:px-2.5 py-2 flex gap-1.5 items-center text-sm rounded-full transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden hover:bg-gray-50 dark:hover:bg-gray-800 {imageGenerationEnabled
? 'bg-gray-50 dark:bg-gray-400/10 border-gray-100 dark:border-gray-700 text-gray-600 dark:text-gray-400' ? ' text-sky-500 dark:text-sky-300 bg-sky-100 dark:bg-sky-200/5'
: 'bg-transparent border-transparent text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 '}" : 'bg-transparent text-gray-600 dark:text-gray-300 '}"
> >
<Photo className="size-5" strokeWidth="1.75" /> <Photo className="size-4" strokeWidth="1.75" />
<span <span
class="hidden @xl:block whitespace-nowrap overflow-hidden text-ellipsis leading-none" class="hidden @xl:block whitespace-nowrap overflow-hidden text-ellipsis leading-none pr-0.5"
>{$i18n.t('Image')}</span >{$i18n.t('Image')}</span
> >
</button> </button>
</Tooltip> </Tooltip>
{/if} {/if}
{#if (atSelectedModel?.id ? [atSelectedModel.id] : selectedModels).length === codeInterpreterCapableModels.length && $config?.features?.enable_code_interpreter && ($_user.role === 'admin' || $_user?.permissions?.features?.code_interpreter)} {#if showCodeInterpreterButton}
<Tooltip content={$i18n.t('Execute code for analysis')} placement="top"> <Tooltip content={$i18n.t('Execute code for analysis')} placement="top">
<button <button
on:click|preventDefault={() => on:click|preventDefault={() =>
(codeInterpreterEnabled = !codeInterpreterEnabled)} (codeInterpreterEnabled = !codeInterpreterEnabled)}
type="button" type="button"
class="px-1.5 @xl:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden border {codeInterpreterEnabled class="px-2 @xl:px-2.5 py-2 flex gap-1.5 items-center text-sm rounded-full transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden hover:bg-gray-50 dark:hover:bg-gray-800 {codeInterpreterEnabled
? 'bg-gray-50 dark:bg-gray-400/10 border-gray-100 dark:border-gray-700 text-gray-600 dark:text-gray-400 ' ? ' text-sky-500 dark:text-sky-300 bg-sky-100 dark:bg-sky-200/5'
: 'bg-transparent border-transparent text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 '}" : 'bg-transparent text-gray-600 dark:text-gray-300 '}"
> >
<CommandLine className="size-5" strokeWidth="1.75" /> <CommandLine className="size-4" strokeWidth="1.75" />
<span <span
class="hidden @xl:block whitespace-nowrap overflow-hidden text-ellipsis leading-none" class="hidden @xl:block whitespace-nowrap overflow-hidden text-ellipsis leading-none pr-0.5"
>{$i18n.t('Code Interpreter')}</span >{$i18n.t('Code Interpreter')}</span
> >
</button> </button>
</Tooltip> </Tooltip>
{/if} {/if}
{/if}
</div> </div>
{/if}
</div> </div>
<div class="self-end flex space-x-1 mr-1 shrink-0"> <div class="self-end flex space-x-1 mr-1 shrink-0">