mirror of
https://github.com/open-webui/open-webui
synced 2025-06-26 18:26:48 +00:00
refac: redesign
This commit is contained in:
Timothy Jaeryang Baek
parent
06aa59e2a5
commit
03288d9fca
@ -151,6 +151,30 @@
|
||||
.map((id) => ($models.find((model) => model.id === id) || {})?.filters ?? [])
|
||||
.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 element = document.getElementById('messages-container');
|
||||
element.scrollTo({
|
||||
@ -1091,8 +1115,8 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class=" flex justify-between mt-1 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=" 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%]">
|
||||
<InputMenu
|
||||
bind:selectedToolIds
|
||||
selectedModels={atSelectedModel ? [atSelectedModel.id] : selectedModels}
|
||||
@ -1162,31 +1186,35 @@
|
||||
</button>
|
||||
</InputMenu>
|
||||
|
||||
<div class="flex gap-1 items-center overflow-x-auto scrollbar-none flex-1">
|
||||
{#if toolServers.length + selectedToolIds.length > 0}
|
||||
<Tooltip
|
||||
content={$i18n.t('{{COUNT}} Available Tools', {
|
||||
COUNT: toolServers.length + selectedToolIds.length
|
||||
})}
|
||||
>
|
||||
<button
|
||||
class="translate-y-[0.5px] flex gap-1 items-center text-gray-600 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 rounded-lg p-1 self-center transition"
|
||||
aria-label="Available Tools"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
showTools = !showTools;
|
||||
}}
|
||||
{#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">
|
||||
{#if showToolsButton}
|
||||
<Tooltip
|
||||
content={$i18n.t('{{COUNT}} Available Tools', {
|
||||
COUNT: toolServers.length + selectedToolIds.length
|
||||
})}
|
||||
>
|
||||
<Wrench className="size-4" strokeWidth="1.75" />
|
||||
<button
|
||||
class="translate-y-[0.5px] flex gap-1 items-center text-gray-600 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 rounded-lg p-1 self-center transition"
|
||||
aria-label="Available Tools"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
showTools = !showTools;
|
||||
}}
|
||||
>
|
||||
<Wrench className="size-4" strokeWidth="1.75" />
|
||||
|
||||
<span class="text-sm font-medium text-gray-600 dark:text-gray-300">
|
||||
{toolServers.length + selectedToolIds.length}
|
||||
</span>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
<span class="text-sm font-medium text-gray-600 dark:text-gray-300">
|
||||
{toolServers.length + selectedToolIds.length}
|
||||
</span>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
{#if $_user}
|
||||
{#each toggleFilters as filter, filterIdx (filter.id)}
|
||||
<Tooltip content={filter?.description} placement="top">
|
||||
<button
|
||||
@ -1200,17 +1228,17 @@
|
||||
}
|
||||
}}
|
||||
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
|
||||
)
|
||||
? 'bg-gray-50 dark:bg-gray-400/10 border-gray-100 dark:border-gray-700 text-gray-600 dark:text-gray-400'
|
||||
: 'bg-transparent border-transparent text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 '} capitalize"
|
||||
? 'text-sky-500 dark:text-sky-300 bg-sky-100 dark:bg-sky-200/5'
|
||||
: 'bg-transparent text-gray-600 dark:text-gray-300 '} capitalize"
|
||||
>
|
||||
{#if filter?.icon}
|
||||
<div class="size-5 items-center flex justify-center">
|
||||
<div class="size-4 items-center flex justify-center">
|
||||
<img
|
||||
src={filter.icon}
|
||||
class="size-4.5 {filter.icon.includes('svg')
|
||||
class="size-3.5 {filter.icon.includes('svg')
|
||||
? 'dark:invert-[80%]'
|
||||
: ''}"
|
||||
style="fill: currentColor;"
|
||||
@ -1218,74 +1246,74 @@
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<Sparkles className="size-5" strokeWidth="1.75" />
|
||||
<Sparkles className="size-4" strokeWidth="1.75" />
|
||||
{/if}
|
||||
<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
|
||||
>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/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">
|
||||
<button
|
||||
on:click|preventDefault={() => (webSearchEnabled = !webSearchEnabled)}
|
||||
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'
|
||||
? 'bg-blue-100 dark:bg-blue-500/20 border-blue-400/20 text-blue-500 dark:text-blue-400'
|
||||
: 'bg-transparent border-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800'}"
|
||||
? ' text-sky-500 dark:text-sky-300 bg-sky-100 dark:bg-sky-200/5'
|
||||
: 'bg-transparent text-gray-600 dark:text-gray-300 '}"
|
||||
>
|
||||
<GlobeAlt className="size-5" strokeWidth="1.75" />
|
||||
<GlobeAlt className="size-4" strokeWidth="1.75" />
|
||||
<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
|
||||
>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/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">
|
||||
<button
|
||||
on:click|preventDefault={() =>
|
||||
(imageGenerationEnabled = !imageGenerationEnabled)}
|
||||
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
|
||||
? 'bg-gray-50 dark:bg-gray-400/10 border-gray-100 dark:border-gray-700 text-gray-600 dark:text-gray-400'
|
||||
: 'bg-transparent border-transparent text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 '}"
|
||||
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
|
||||
? ' text-sky-500 dark:text-sky-300 bg-sky-100 dark:bg-sky-200/5'
|
||||
: 'bg-transparent text-gray-600 dark:text-gray-300 '}"
|
||||
>
|
||||
<Photo className="size-5" strokeWidth="1.75" />
|
||||
<Photo className="size-4" strokeWidth="1.75" />
|
||||
<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
|
||||
>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/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">
|
||||
<button
|
||||
on:click|preventDefault={() =>
|
||||
(codeInterpreterEnabled = !codeInterpreterEnabled)}
|
||||
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
|
||||
? 'bg-gray-50 dark:bg-gray-400/10 border-gray-100 dark:border-gray-700 text-gray-600 dark:text-gray-400 '
|
||||
: 'bg-transparent border-transparent text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 '}"
|
||||
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
|
||||
? ' text-sky-500 dark:text-sky-300 bg-sky-100 dark:bg-sky-200/5'
|
||||
: 'bg-transparent text-gray-600 dark:text-gray-300 '}"
|
||||
>
|
||||
<CommandLine className="size-5" strokeWidth="1.75" />
|
||||
<CommandLine className="size-4" strokeWidth="1.75" />
|
||||
<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
|
||||
>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="self-end flex space-x-1 mr-1 shrink-0">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user