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
2026-03-15 22:25:22 -05:00
parent e53152123f
commit 38cc6e4762
15 changed files with 392 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/FileNav/FileEntryRow.svelte
+43 -47
View File
@@ -1,9 +1,9 @@
<script lang="ts">
import { getContext } from 'svelte';
import { DropdownMenu } from 'bits-ui';
import { flyAndScale } from '$lib/utils/transitions';
import { formatFileSize } from '$lib/utils';
import type { FileEntry } from '$lib/apis/terminal';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import Folder from '../../icons/Folder.svelte';
import EllipsisHorizontal from '../../icons/EllipsisHorizontal.svelte';
import GarbageBin from '../../icons/GarbageBin.svelte';
@@ -111,63 +111,59 @@
{/if}
</button>
<DropdownMenu.Root>
<DropdownMenu.Trigger
<Dropdown align="end" sideOffset={4}>
<button
class="shrink-0 p-0.5 mr-1 rounded-lg transition
text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400
hover:bg-gray-100 dark:hover:bg-gray-800"
on:click={(e) => e.stopPropagation()}
aria-label={$i18n.t('More')}
>
<EllipsisHorizontal className="size-3.5" />
</DropdownMenu.Trigger>
</button>
<DropdownMenu.Content
strategy="fixed"
class="w-full max-w-[150px] rounded-2xl p-1 z-[9999999] bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800"
sideOffset={4}
side="bottom"
align="end"
transition={flyAndScale}
>
{#if entry.type !== 'directory'}
<DropdownMenu.Item
<div slot="content">
<div
class="min-w-[150px] rounded-2xl p-1 z-[9999999] bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800"
>
{#if entry.type !== 'directory'}
<button
type="button"
class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
on:click={(e) => {
e.stopPropagation();
onDownload(`${currentPath}${entry.name}`);
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="size-4"
>
<path
d="M10.75 2.75a.75.75 0 0 0-1.5 0v8.614L6.295 8.235a.75.75 0 1 0-1.09 1.03l4.25 4.5a.75.75 0 0 0 1.09 0l4.25-4.5a.75.75 0 0 0-1.09-1.03l-2.955 3.129V2.75Z"
/>
<path
d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5Z"
/>
</svg>
<div class="flex items-center">{$i18n.t('Download')}</div>
</button>
{/if}
<button
type="button"
class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
on:click={(e) => {
e.stopPropagation();
onDownload(`${currentPath}${entry.name}`);
onDelete(`${currentPath}${entry.name}`, entry.name);
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="size-4"
>
<path
d="M10.75 2.75a.75.75 0 0 0-1.5 0v8.614L6.295 8.235a.75.75 0 1 0-1.09 1.03l4.25 4.5a.75.75 0 0 0 1.09 0l4.25-4.5a.75.75 0 0 0-1.09-1.03l-2.955 3.129V2.75Z"
/>
<path
d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5Z"
/>
</svg>
<div class="flex items-center">{$i18n.t('Download')}</div>
</DropdownMenu.Item>
{/if}
<DropdownMenu.Item
type="button"
class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
on:click={(e) => {
e.stopPropagation();
onDelete(`${currentPath}${entry.name}`, entry.name);
}}
>
<GarbageBin className="size-4" />
<div class="flex items-center">{$i18n.t('Delete')}</div>
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
<GarbageBin className="size-4" />
<div class="flex items-center">{$i18n.t('Delete')}</div>
</button>
</div>
</div>
</Dropdown>
</div>
</li>
src/lib/components/chat/MessageInput/CallOverlay/VideoInputMenu.svelte
+10 -14
View File
@@ -1,6 +1,4 @@
<script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { flyAndScale } from '$lib/utils/transitions';
import { getContext, createEventDispatcher } from 'svelte';
const i18n = getContext('i18n');
@@ -16,8 +14,10 @@
<Dropdown
bind:show
on:change={(e) => {
if (e.detail === false) {
side="top"
sideOffset={6}
onOpenChange={(state) => {
if (state === false) {
onClose();
}
}}
@@ -25,16 +25,12 @@
<slot />
<div slot="content">
<DropdownMenu.Content
class="w-full max-w-[180px] rounded-lg p-1 border border-gray-100 dark:border-gray-800 z-9999 bg-white dark:bg-gray-900 dark:text-white shadow-xs"
sideOffset={6}
side="top"
align="start"
transition={flyAndScale}
<div
class="min-w-[180px] rounded-lg p-1 border border-gray-100 dark:border-gray-800 z-[9999] bg-white dark:bg-gray-900 dark:text-white shadow-xs"
>
{#each devices as device}
<DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
<button
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md w-full"
on:click={() => {
dispatch('change', device.deviceId);
}}
@@ -44,8 +40,8 @@
{device?.label ?? 'Camera'}
</div>
</div>
</DropdownMenu.Item>
</button>
{/each}
</DropdownMenu.Content>
</div>
</div>
</Dropdown>
src/lib/components/chat/MessageInput/IntegrationsMenu.svelte
+5 -12
View File
@@ -1,8 +1,6 @@
<script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { getContext, onMount, tick } from 'svelte';
import { fly } from 'svelte/transition';
import { flyAndScale } from '$lib/utils/transitions';
import {
config,
@@ -102,8 +100,8 @@
<Dropdown
bind:show
on:change={(e) => {
if (e.detail === false) {
onOpenChange={(state) => {
if (state === false) {
onClose();
}
}}
@@ -112,13 +110,8 @@
<slot />
</Tooltip>
<div slot="content">
<DropdownMenu.Content
class="w-full max-w-70 rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin"
sideOffset={4}
alignOffset={-6}
side="bottom"
align="start"
transition={flyAndScale}
<div
class="min-w-70 max-w-70 rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin"
>
{#if tab === ''}
<div in:fly={{ x: -20, duration: 150 }}>
@@ -407,6 +400,6 @@
{/each}
</div>
{/if}
</DropdownMenu.Content>
</div>
</div>
</Dropdown>
src/lib/components/chat/MessageInput/TerminalMenu.svelte
+4 -10
View File
@@ -1,8 +1,6 @@
<script lang="ts">
import { getContext } from 'svelte';
import { goto } from '$app/navigation';
import { DropdownMenu } from 'bits-ui';
import { flyAndScale } from '$lib/utils/transitions';
import { settings, showSettings, terminalServers, selectedTerminalId, user } from '$lib/stores';
import { getToolServersData } from '$lib/apis';
@@ -92,7 +90,7 @@
</script>
<div class="flex items-center translate-x-0.5">
<Dropdown bind:show>
<Dropdown bind:show align="end">
<Tooltip content={$i18n.t('Terminal')} placement="top">
<button
type="button"
@@ -112,12 +110,8 @@
</Tooltip>
<div slot="content">
<DropdownMenu.Content
class="w-full max-w-56 rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin"
sideOffset={4}
side="bottom"
align="end"
transition={flyAndScale}
<div
class="min-w-56 max-w-56 rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin"
>
<!-- Direct terminals (gated by permission) -->
{#if directTerminals.length > 0 && ($user?.role === 'admin' || ($user?.permissions?.features?.direct_tool_servers ?? true))}
@@ -254,7 +248,7 @@
</button>
{/each}
{/if}
</DropdownMenu.Content>
</div>
</div>
</Dropdown>
</div>
src/lib/components/chat/Messages/ResponseMessage/RegenerateMenu.svelte
+16 -21
View File
@@ -1,6 +1,4 @@
<script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { flyAndScale } from '$lib/utils/transitions';
import { getContext } from 'svelte';
import Dropdown from '$lib/components/common/Dropdown.svelte';
@@ -18,22 +16,19 @@
<Dropdown
bind:show
on:change={(e) => {
if (e.detail === false) {
onOpenChange={(state) => {
if (state === false) {
onClose();
}
}}
align="end"
align="start"
sideOffset={-2}
>
<slot></slot>
<div slot="content">
<DropdownMenu.Content
class="w-full max-w-[200px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
sideOffset={-2}
side="bottom"
align="start"
transition={flyAndScale}
<div
class="max-w-[200px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
>
<div class="py-1.5 px-2.5 flex dark:text-gray-100">
<input
@@ -78,8 +73,8 @@
</div>
</div>
<hr class="border-gray-50/30 dark:border-gray-800/30 my-1 mx-2" />
<DropdownMenu.Item
class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
<button
class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
on:click={() => {
onRegenerate();
show = false;
@@ -101,27 +96,27 @@
/>
</svg>
<div class="flex items-center">{$i18n.t('Try Again')}</div>
</DropdownMenu.Item>
</button>
<DropdownMenu.Item
class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
<button
class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
on:click={() => {
onRegenerate($i18n.t('Add Details'));
}}
>
<LineSpace strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Add Details')}</div>
</DropdownMenu.Item>
</button>
<DropdownMenu.Item
class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
<button
class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
on:click={() => {
onRegenerate($i18n.t('More Concise'));
}}
>
<LineSpaceSmaller strokeWidth="2" />
<div class="flex items-center">{$i18n.t('More Concise')}</div>
</DropdownMenu.Item>
</DropdownMenu.Content>
</button>
</div>
</div>
</Dropdown>
src/lib/components/chat/ModelSelector/ModelItemMenu.svelte
+90 -98
View File
@@ -1,14 +1,11 @@
<script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { flyAndScale } from '$lib/utils/transitions';
import { getContext } from 'svelte';
import { goto } from '$app/navigation';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Pin from '$lib/components/icons/Pin.svelte';
import PinSlash from '$lib/components/icons/PinSlash.svelte';
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
import Link from '$lib/components/icons/Link.svelte';
import Pencil from '$lib/components/icons/Pencil.svelte';
import { config, settings, user } from '$lib/stores';
@@ -25,123 +22,118 @@
export let onClose: Function = () => {};
</script>
<DropdownMenu.Root
bind:open={show}
closeFocus={false}
<Dropdown
bind:show
align="end"
sideOffset={-2}
onOpenChange={(state) => {
if (state === false) {
onClose();
}
}}
typeahead={false}
>
<DropdownMenu.Trigger>
<Tooltip
content={$i18n.t('More')}
className={($settings?.highContrastMode ?? false)
? ''
: 'group-hover/item:opacity-100 opacity-0'}
>
<slot />
</Tooltip>
</DropdownMenu.Trigger>
<DropdownMenu.Content
strategy="fixed"
class="w-full max-w-[210px] text-sm rounded-2xl p-1 z-[9999999] bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800"
sideOffset={-2}
side="bottom"
align="end"
transition={flyAndScale}
<Tooltip
content={$i18n.t('More')}
className={($settings?.highContrastMode ?? false)
? ''
: 'group-hover/item:opacity-100 opacity-0'}
>
{#if model?.preset || model?.info?.base_model_id ? model?.info?.user_id === $user?.id : $user?.role === 'admin'}
<DropdownMenu.Item
type="button"
class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2"
on:click={(e) => {
e.stopPropagation();
e.preventDefault();
<slot />
</Tooltip>
goto(
model?.preset || model?.info?.base_model_id
? `/workspace/models/edit?id=${encodeURIComponent(model?.id ?? '')}`
: `/admin/settings/models?id=${encodeURIComponent(model?.id ?? '')}`
);
show = false;
}}
>
<Pencil className="size-4" />
<div class="flex items-center">{$i18n.t('Edit')}</div>
</DropdownMenu.Item>
<hr class="border-gray-50 dark:border-gray-800/30 my-1" />
{/if}
<DropdownMenu.Item
type="button"
aria-pressed={($settings?.pinnedModels ?? []).includes(model?.id)}
class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2"
on:click={(e) => {
e.stopPropagation();
e.preventDefault();
pinModelHandler(model?.id);
show = false;
}}
<div slot="content">
<div
class="min-w-[210px] text-sm rounded-2xl p-1 z-[9999999] bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800"
>
{#if ($settings?.pinnedModels ?? []).includes(model?.id)}
<PinSlash />
{:else}
<Pin />
{#if model?.preset || model?.info?.base_model_id ? model?.info?.user_id === $user?.id : $user?.role === 'admin'}
<button
type="button"
class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2"
on:click={(e) => {
e.stopPropagation();
e.preventDefault();
goto(
model?.preset || model?.info?.base_model_id
? `/workspace/models/edit?id=${encodeURIComponent(model?.id ?? '')}`
: `/admin/settings/models?id=${encodeURIComponent(model?.id ?? '')}`
);
show = false;
}}
>
<Pencil className="size-4" />
<div class="flex items-center">{$i18n.t('Edit')}</div>
</button>
<hr class="border-gray-50 dark:border-gray-800/30 my-1" />
{/if}
<div class="flex items-center">
<button
type="button"
aria-pressed={($settings?.pinnedModels ?? []).includes(model?.id)}
class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2"
on:click={(e) => {
e.stopPropagation();
e.preventDefault();
pinModelHandler(model?.id);
show = false;
}}
>
{#if ($settings?.pinnedModels ?? []).includes(model?.id)}
{$i18n.t('Hide from Sidebar')}
<PinSlash />
{:else}
{$i18n.t('Keep in Sidebar')}
<Pin />
{/if}
</div>
</DropdownMenu.Item>
<DropdownMenu.Item
type="button"
class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2"
on:click={(e) => {
e.stopPropagation();
e.preventDefault();
<div class="flex items-center">
{#if ($settings?.pinnedModels ?? []).includes(model?.id)}
{$i18n.t('Hide from Sidebar')}
{:else}
{$i18n.t('Keep in Sidebar')}
{/if}
</div>
</button>
copyLinkHandler();
show = false;
}}
>
<Link />
<div class="flex items-center">{$i18n.t('Copy Link')}</div>
</DropdownMenu.Item>
{#if $config?.features.enable_community_sharing}
<hr class="border-gray-50 dark:border-gray-800/30 my-1" />
<DropdownMenu.Item
<button
type="button"
class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2"
on:click={(e) => {
e.stopPropagation();
e.preventDefault();
window.open(
`https://openwebui.com/models?q=${encodeURIComponent(model?.id ?? '')}`,
'_blank'
);
copyLinkHandler();
show = false;
}}
>
<GlobeAlt className="size-4" />
<Link />
<div class="flex items-center">{$i18n.t('Community Reviews')}</div>
</DropdownMenu.Item>
{/if}
</DropdownMenu.Content>
</DropdownMenu.Root>
<div class="flex items-center">{$i18n.t('Copy Link')}</div>
</button>
{#if $config?.features.enable_community_sharing}
<hr class="border-gray-50 dark:border-gray-800/30 my-1" />
<button
type="button"
class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2"
on:click={(e) => {
e.stopPropagation();
e.preventDefault();
window.open(
`https://openwebui.com/models?q=${encodeURIComponent(model?.id ?? '')}`,
'_blank'
);
show = false;
}}
>
<GlobeAlt className="size-4" />
<div class="flex items-center">{$i18n.t('Community Reviews')}</div>
</button>
{/if}
</div>
</div>
</Dropdown>