mirror of
https://github.com/open-webui/open-webui.git
synced 2026-10-04 02:33:43 +00:00
feat(ui): add compact action toolbar toggle to collapse custom action buttons
This commit is contained in:
silentoplayz
parent
1a97751e37
commit
28bece53db
2 changed files with 101 additions and 18 deletions
|
|
@ -64,6 +64,8 @@
|
|||
import StatusHistory from './ResponseMessage/StatusHistory.svelte';
|
||||
import FullHeightIframe from '$lib/components/common/FullHeightIframe.svelte';
|
||||
import OutputEditView from './OutputEditView.svelte';
|
||||
import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
|
||||
import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
|
||||
|
||||
interface MessageType {
|
||||
id: string;
|
||||
|
|
@ -166,6 +168,7 @@
|
|||
let contentContainerElement: HTMLDivElement;
|
||||
let buttonsContainerElement: HTMLDivElement;
|
||||
let showDeleteConfirm = false;
|
||||
let showActions = false;
|
||||
|
||||
let model = null;
|
||||
$: model = $models.find((m) => m.id === message.model);
|
||||
|
|
@ -1451,36 +1454,93 @@
|
|||
{/if}
|
||||
{/if}
|
||||
|
||||
{#each model?.actions ?? [] as action}
|
||||
<Tooltip content={action.name} placement="bottom">
|
||||
{#if $settings?.compactToolbar && (model?.actions ?? []).length > 0}
|
||||
<Tooltip
|
||||
content={showActions ? $i18n.t('Hide Actions') : $i18n.t('More Actions')}
|
||||
placement="bottom"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={action.name}
|
||||
aria-label={showActions ? $i18n.t('Hide Actions') : $i18n.t('More Actions')}
|
||||
class="{isLastMessage || ($settings?.highContrastMode ?? false)
|
||||
? 'visible'
|
||||
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
|
||||
on:click={() => {
|
||||
actionMessage(action.id, message);
|
||||
showActions = !showActions;
|
||||
}}
|
||||
>
|
||||
{#if action?.icon}
|
||||
<div class="size-4">
|
||||
<img
|
||||
src={action.icon}
|
||||
class="w-4 h-4 {action.icon.includes('data:image/svg')
|
||||
? 'dark:invert-[80%]'
|
||||
: ''}"
|
||||
style="fill: currentColor;"
|
||||
alt={action.name}
|
||||
draggable="false"
|
||||
/>
|
||||
</div>
|
||||
{#if showActions}
|
||||
<ChevronLeft className="size-4" strokeWidth="2.3" />
|
||||
{:else}
|
||||
<Sparkles strokeWidth="2.1" className="size-4" />
|
||||
<ChevronRight className="size-4" strokeWidth="2.3" />
|
||||
{/if}
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/each}
|
||||
|
||||
{#if showActions}
|
||||
{#each model?.actions ?? [] as action}
|
||||
<Tooltip content={action.name} placement="bottom">
|
||||
<button
|
||||
type="button"
|
||||
aria-label={action.name}
|
||||
class="{isLastMessage || ($settings?.highContrastMode ?? false)
|
||||
? 'visible'
|
||||
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
|
||||
on:click={() => {
|
||||
actionMessage(action.id, message);
|
||||
}}
|
||||
>
|
||||
{#if action?.icon}
|
||||
<div class="size-4">
|
||||
<img
|
||||
src={action.icon}
|
||||
class="w-4 h-4 {action.icon.includes('data:image/svg')
|
||||
? 'dark:invert-[80%]'
|
||||
: ''}"
|
||||
style="fill: currentColor;"
|
||||
alt={action.name}
|
||||
draggable="false"
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<Sparkles strokeWidth="2.1" className="size-4" />
|
||||
{/if}
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/each}
|
||||
{/if}
|
||||
{:else}
|
||||
{#each model?.actions ?? [] as action}
|
||||
<Tooltip content={action.name} placement="bottom">
|
||||
<button
|
||||
type="button"
|
||||
aria-label={action.name}
|
||||
class="{isLastMessage || ($settings?.highContrastMode ?? false)
|
||||
? 'visible'
|
||||
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
|
||||
on:click={() => {
|
||||
actionMessage(action.id, message);
|
||||
}}
|
||||
>
|
||||
{#if action?.icon}
|
||||
<div class="size-4">
|
||||
<img
|
||||
src={action.icon}
|
||||
class="w-4 h-4 {action.icon.includes('data:image/svg')
|
||||
? 'dark:invert-[80%]'
|
||||
: ''}"
|
||||
style="fill: currentColor;"
|
||||
alt={action.name}
|
||||
draggable="false"
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<Sparkles strokeWidth="2.1" className="size-4" />
|
||||
{/if}
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/each}
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -78,6 +78,8 @@
|
|||
let showFloatingActionButtons = true;
|
||||
let floatingActionButtons = null;
|
||||
|
||||
let compactToolbar = false;
|
||||
|
||||
let imageCompression = false;
|
||||
let imageCompressionSize = {
|
||||
width: '',
|
||||
|
|
@ -264,6 +266,8 @@
|
|||
showFloatingActionButtons = $settings?.showFloatingActionButtons ?? true;
|
||||
floatingActionButtons = $settings?.floatingActionButtons ?? null;
|
||||
|
||||
compactToolbar = $settings?.compactToolbar ?? false;
|
||||
|
||||
imageCompression = $settings?.imageCompression ?? false;
|
||||
imageCompressionSize = $settings?.imageCompressionSize ?? { width: '', height: '' };
|
||||
imageCompressionInChannels = $settings?.imageCompressionInChannels ?? true;
|
||||
|
|
@ -1116,6 +1120,25 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class=" py-0.5 flex w-full justify-between">
|
||||
<div id="compact-toolbar-label" class=" self-center text-xs">
|
||||
{$i18n.t('Compact Action Toolbar')}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 p-1">
|
||||
<Switch
|
||||
ariaLabelledbyId="compact-toolbar-label"
|
||||
tooltip={true}
|
||||
bind:state={compactToolbar}
|
||||
on:change={() => {
|
||||
saveSettings({ compactToolbar });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class=" py-0.5 flex w-full justify-between">
|
||||
<div id="web-search-in-chat-label" class=" self-center text-xs">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue