ewilliams28/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-08-27 07:54:55 -06:00
Code Issues 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>
src/lib/components/common/Dropdown.svelte
+4 -2
View File
@@ -42,7 +42,6 @@
function trigger(node) {
triggerEl = node.firstElementChild || node;
function handleClick(e) {
e.stopPropagation();
e.preventDefault();
toggleOpen();
}
@@ -147,16 +146,19 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<span use:trigger style="display: contents;">
<span use:trigger style="display: contents; cursor: pointer;">
<slot />
</span>
{#if show}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
use:portal
bind:this={contentEl}
class={contentClass}
transition:flyAndScale
on:click|stopPropagation
>
<slot name="content" />
</div>
src/lib/components/common/DropdownOptions.svelte
+13 -15
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { getContext } from 'svelte';
import { DropdownMenu } from 'bits-ui';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
const i18n = getContext('i18n');
@@ -20,19 +20,17 @@
let open = false;
</script>
<DropdownMenu.Root bind:open>
<DropdownMenu.Trigger>
<div
class={className
? className
: 'flex w-full items-center gap-2 truncate bg-transparent px-0.5 text-sm placeholder-gray-400 outline-hidden focus:outline-hidden'}
>
{items.find((item) => item.value === value)?.label ?? placeholder}
<ChevronDown className=" size-3" strokeWidth="2.5" />
</div>
</DropdownMenu.Trigger>
<Dropdown bind:show={open} {align}>
<div
class={className
? className
: 'flex w-full items-center gap-2 truncate bg-transparent px-0.5 text-sm placeholder-gray-400 outline-hidden focus:outline-hidden'}
>
{items.find((item) => item.value === value)?.label ?? placeholder}
<ChevronDown className=" size-3" strokeWidth="2.5" />
</div>
<DropdownMenu.Content {align}>
<div slot="content">
<div
class="dark:bg-gray-850 z-50 w-full rounded-2xl border border-gray-100 bg-white p-1 shadow-lg dark:border-gray-800 dark:text-white"
>
@@ -58,5 +56,5 @@
</button>
{/each}
</div>
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>
</Dropdown>
src/lib/components/common/DropdownSub.svelte
+9
View File
@@ -22,6 +22,15 @@
contentEl.style.position = 'fixed';
contentEl.style.zIndex = '99999';
// Inherit min-width from parent dropdown container
const parentContainer = triggerEl.closest('[class*="rounded"]')?.parentElement;
if (parentContainer) {
const parentWidth = parentContainer.offsetWidth;
if (parentWidth > 0) {
contentEl.style.minWidth = `${parentWidth}px`;
}
}
// Position to the right of the trigger
const rightSpace = window.innerWidth - rect.right;
const contentWidth = contentEl.offsetWidth || 200;
src/lib/components/layout/Navbar/Menu.svelte
+72 -84
View File
@@ -1,6 +1,5 @@
<script lang="ts">
import { toast } from 'svelte-sonner';
import { DropdownMenu } from 'bits-ui';
import { getContext, tick } from 'svelte';
import fileSaver from 'file-saver';
@@ -21,10 +20,11 @@
showEmbeds,
artifactContents
} from '$lib/stores';
import { flyAndScale } from '$lib/utils/transitions';
import { getChatById } from '$lib/apis/chats';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import DropdownSub from '$lib/components/common/DropdownSub.svelte';
import Tags from '$lib/components/chat/Tags.svelte';
import Clipboard from '$lib/components/icons/Clipboard.svelte';
import AdjustmentsHorizontal from '$lib/components/icons/AdjustmentsHorizontal.svelte';
@@ -267,21 +267,19 @@
{/if}
<Dropdown
on:change={(e) => {
if (e.detail === false) {
onOpenChange={(state) => {
if (state === false) {
onClose();
}
}}
align="end"
sideOffset={8}
>
<slot />
<div slot="content">
<DropdownMenu.Content
class="select-none 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={8}
side="bottom"
align="end"
transition={flyAndScale}
<div
class="select-none min-w-[200px] 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"
>
<!-- <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer dark:hover:bg-gray-800 rounded-xl"
@@ -312,7 +310,7 @@
</DropdownMenu.Item> -->
{#if ($artifactContents ?? []).length > 0}
<DropdownMenu.Item
<button
draggable="false"
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-xl select-none w-full"
id="chat-artifacts-button"
@@ -324,13 +322,13 @@
>
<Cube className=" size-4" strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Artifacts')}</div>
</DropdownMenu.Item>
</button>
<hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
{/if}
{#if !$temporaryChatEnabled && ($user?.role === 'admin' || ($user.permissions?.chat?.share ?? true))}
<DropdownMenu.Item
<button
draggable="false"
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-xl select-none w-full"
id="chat-share-button"
@@ -340,57 +338,52 @@
>
<Share strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Share')}</div>
</DropdownMenu.Item>
</button>
{/if}
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger
<DropdownSub>
<button
slot="trigger"
draggable="false"
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-xl select-none w-full"
>
<Download strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Download')}</div>
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
class="select-none w-full rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white border border-gray-100 dark:border-gray-800 shadow-lg max-h-52 overflow-y-auto scrollbar-hidden"
transition={flyAndScale}
sideOffset={8}
</button>
{#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)}
<button
draggable="false"
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-xl select-none w-full"
on:click={() => {
downloadJSONExport();
}}
>
<div class="flex items-center line-clamp-1">{$i18n.t('Export chat (.json)')}</div>
</button>
{/if}
<button
draggable="false"
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-xl select-none w-full"
on:click={() => {
downloadTxt();
}}
>
{#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)}
<DropdownMenu.Item
draggable="false"
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-xl select-none w-full"
on:click={() => {
downloadJSONExport();
}}
>
<div class="flex items-center line-clamp-1">{$i18n.t('Export chat (.json)')}</div>
</DropdownMenu.Item>
{/if}
<DropdownMenu.Item
draggable="false"
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-xl select-none w-full"
on:click={() => {
downloadTxt();
}}
>
<div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div>
</DropdownMenu.Item>
<div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div>
</button>
<DropdownMenu.Item
draggable="false"
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-xl select-none w-full"
on:click={() => {
downloadPdf();
}}
>
<div class="flex items-center line-clamp-1">{$i18n.t('PDF document (.pdf)')}</div>
</DropdownMenu.Item>
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
<button
draggable="false"
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-xl select-none w-full"
on:click={() => {
downloadPdf();
}}
>
<div class="flex items-center line-clamp-1">{$i18n.t('PDF document (.pdf)')}</div>
</button>
</DropdownSub>
<DropdownMenu.Item
<button
draggable="false"
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-xl select-none w-full"
id="chat-copy-button"
@@ -406,57 +399,52 @@
>
<Clipboard className=" size-4" strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Copy')}</div>
</DropdownMenu.Item>
</button>
{#if !$temporaryChatEnabled && chat?.id}
<hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
{#if $folders.length > 0}
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger
<DropdownSub maxWidth={200}>
<button
slot="trigger"
draggable="false"
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-xl select-none w-full"
>
<Folder strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Move')}</div>
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
class="select-none w-full max-w-[200px] rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white border border-gray-100 dark:border-gray-800 shadow-lg max-h-52 overflow-y-auto scrollbar-hidden"
transition={flyAndScale}
sideOffset={8}
>
{#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder}
{#if folder?.id}
<DropdownMenu.Item
draggable="false"
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-xl overflow-hidden"
on:click={() => {
moveChatHandler(chat.id, folder.id);
}}
>
<div class="shrink-0">
<Folder strokeWidth="1.5" />
</div>
</button>
{#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder}
{#if folder?.id}
<button
draggable="false"
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-xl overflow-hidden w-full"
on:click={() => {
moveChatHandler(chat.id, folder.id);
}}
>
<div class="shrink-0">
<Folder strokeWidth="1.5" />
</div>
<div class="truncate">{folder.name ?? 'Folder'}</div>
</DropdownMenu.Item>
{/if}
{/each}
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
<div class="truncate">{folder.name ?? 'Folder'}</div>
</button>
{/if}
{/each}
</DropdownSub>
{/if}
<DropdownMenu.Item
<button
draggable="false"
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-xl"
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-xl select-none w-full"
on:click={() => {
archiveChatHandler();
}}
>
<ArchiveBox className="size-4" strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Archive')}</div>
</DropdownMenu.Item>
</button>
<hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
@@ -464,6 +452,6 @@
<Tags chatId={chat.id} />
</div>
{/if}
</DropdownMenu.Content>
</div>
</div>
</Dropdown>
src/lib/components/notes/AIMenu.svelte
+18 -21
View File
@@ -1,13 +1,9 @@
<script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { createEventDispatcher, getContext, onMount } from 'svelte';
import { getContext } from 'svelte';
import { showSettings, mobile, showSidebar, user } from '$lib/stores';
import { fade, slide } from 'svelte/transition';
import PencilSquare from '../icons/PencilSquare.svelte';
import ChatBubbleOval from '../icons/ChatBubbleOval.svelte';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import Sparkles from '../icons/Sparkles.svelte';
import ChatBubbleOval from '../icons/ChatBubbleOval.svelte';
const i18n = getContext('i18n');
@@ -20,18 +16,19 @@
export let onChange = () => {};
</script>
<DropdownMenu.Root bind:open={show} onOpenChange={onChange}>
<DropdownMenu.Trigger>
<slot />
</DropdownMenu.Trigger>
<Dropdown
bind:show
align="end"
sideOffset={8}
onOpenChange={(state) => {
onChange(state);
}}
>
<slot />
<slot name="content">
<DropdownMenu.Content
class="w-full {className} text-sm rounded-xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg font-primary"
sideOffset={8}
side="bottom"
align="end"
transition={(e) => fade(e, { duration: 100 })}
<div slot="content">
<div
class="min-w-[170px] text-sm rounded-xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg font-primary"
>
<button
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
@@ -58,6 +55,6 @@
</div>
<div class=" self-center truncate">{$i18n.t('Chat')}</div>
</button>
</DropdownMenu.Content>
</slot>
</DropdownMenu.Root>
</div>
</div>
</Dropdown>
src/lib/components/notes/Notes/NoteMenu.svelte
+76 -98
View File
@@ -1,14 +1,8 @@
<script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { getContext, onMount } from 'svelte';
import { getContext } from 'svelte';
import { flyAndScale } from '$lib/utils/transitions';
import { fade, slide } from 'svelte/transition';
import { showSettings, mobile, showSidebar, user } from '$lib/stores';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import DropdownSub from '$lib/components/common/DropdownSub.svelte';
import Download from '$lib/components/icons/Download.svelte';
import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
@@ -29,118 +23,102 @@
export let onChange = () => {};
</script>
<DropdownMenu.Root
bind:open={show}
<Dropdown
bind:show
align="end"
sideOffset={6}
onOpenChange={(state) => {
onChange(state);
}}
>
<DropdownMenu.Trigger>
<slot />
</DropdownMenu.Trigger>
<slot />
<slot name="content">
<DropdownMenu.Content
class="w-full {className} text-sm 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"
sideOffset={6}
side="bottom"
align="end"
transition={(e) => fade(e, { duration: 100 })}
<div slot="content">
<div
class="min-w-[180px] text-sm 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"
>
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger
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-xl"
<DropdownSub>
<button
slot="trigger"
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-xl w-full"
>
<Download strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Download')}</div>
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
class="w-full rounded-xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
transition={flyAndScale}
sideOffset={8}
align="end"
</button>
<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={() => {
onDownload('txt');
}}
>
<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"
on:click={() => {
onDownload('txt');
}}
>
<div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div>
</DropdownMenu.Item>
<div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div>
</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"
on:click={() => {
onDownload('md');
}}
>
<div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.md)')}</div>
</DropdownMenu.Item>
<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={() => {
onDownload('md');
}}
>
<div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.md)')}</div>
</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"
on:click={() => {
onDownload('pdf');
}}
>
<div class="flex items-center line-clamp-1">{$i18n.t('PDF document (.pdf)')}</div>
</DropdownMenu.Item>
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
<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={() => {
onDownload('pdf');
}}
>
<div class="flex items-center line-clamp-1">{$i18n.t('PDF document (.pdf)')}</div>
</button>
</DropdownSub>
{#if onCopyLink || onCopyToClipboard}
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger
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-xl"
<DropdownSub>
<button
slot="trigger"
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-xl w-full"
>
<Share strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Share')}</div>
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
class="w-full rounded-xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
transition={flyAndScale}
sideOffset={8}
align="end"
>
{#if onCopyLink}
<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"
on:click={() => {
onCopyLink();
}}
>
<Link />
<div class="flex items-center">{$i18n.t('Copy link')}</div>
</DropdownMenu.Item>
{/if}
</button>
{#if onCopyToClipboard}
<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"
on:click={() => {
onCopyToClipboard();
}}
>
<DocumentDuplicate strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Copy to clipboard')}</div>
</DropdownMenu.Item>
{/if}
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
{#if onCopyLink}
<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={() => {
onCopyLink();
}}
>
<Link />
<div class="flex items-center">{$i18n.t('Copy link')}</div>
</button>
{/if}
{#if onCopyToClipboard}
<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={() => {
onCopyToClipboard();
}}
>
<DocumentDuplicate strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Copy to clipboard')}</div>
</button>
{/if}
</DropdownSub>
{/if}
<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={() => {
onDelete();
}}
>
<GarbageBin />
<div class="flex items-center">{$i18n.t('Delete')}</div>
</DropdownMenu.Item>
</DropdownMenu.Content>
</slot>
</DropdownMenu.Root>
</button>
</div>
</div>
</Dropdown>
src/lib/components/notes/RecordMenu.svelte
+12 -21
View File
@@ -1,13 +1,9 @@
<script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { createEventDispatcher, getContext, onMount } from 'svelte';
import { showSettings, mobile, showSidebar, user } from '$lib/stores';
import { fade, slide } from 'svelte/transition';
import { createEventDispatcher, getContext } from 'svelte';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import Mic from '../icons/Mic.svelte';
import CursorArrowRays from '../icons/CursorArrowRays.svelte';
import DocumentArrowUp from '../icons/DocumentArrowUp.svelte';
import CloudArrowUp from '../icons/CloudArrowUp.svelte';
const i18n = getContext('i18n');
@@ -22,23 +18,18 @@
const dispatch = createEventDispatcher();
</script>
<DropdownMenu.Root
bind:open={show}
<Dropdown
bind:show
sideOffset={8}
onOpenChange={(state) => {
dispatch('change', state);
}}
>
<DropdownMenu.Trigger>
<slot />
</DropdownMenu.Trigger>
<slot />
<slot name="content">
<DropdownMenu.Content
class="w-full {className} text-sm rounded-xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg font-primary"
sideOffset={8}
side="bottom"
align="start"
transition={(e) => fade(e, { duration: 100 })}
<div slot="content">
<div
class="min-w-[170px] text-sm rounded-xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg font-primary"
>
<button
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
@@ -78,6 +69,6 @@
</div>
<div class=" self-center truncate">{$i18n.t('Upload Audio')}</div>
</button>
</DropdownMenu.Content>
</slot>
</DropdownMenu.Root>
</div>
</div>
</Dropdown>
src/lib/components/playground/Chat.svelte
+13 -23
View File
@@ -3,7 +3,6 @@
const { saveAs } = fileSaver;
import { toast } from 'svelte-sonner';
import { DropdownMenu } from 'bits-ui';
import { goto } from '$app/navigation';
import { onMount, tick, getContext } from 'svelte';
@@ -15,13 +14,13 @@
WEBUI_BASE_URL
} from '$lib/constants';
import { WEBUI_NAME, config, user, models, settings } from '$lib/stores';
import { flyAndScale } from '$lib/utils/transitions';
import { chatCompletion } from '$lib/apis/openai';
import { splitStream } from '$lib/utils';
import Collapsible from '../common/Collapsible.svelte';
import Dropdown from '../common/Dropdown.svelte';
import DropdownSub from '../common/DropdownSub.svelte';
import Messages from '$lib/components/playground/Chat/Messages.svelte';
import ChevronUp from '../icons/ChevronUp.svelte';
@@ -362,26 +361,18 @@
</button>
<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"
sideOffset={8}
side="bottom"
align="end"
transition={flyAndScale}
<div
class="min-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"
>
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger
<DropdownSub>
<button
slot="trigger"
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-xl select-none w-full"
>
<Download strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Download')}</div>
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
class="w-full rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white border border-gray-100 dark:border-gray-800 shadow-lg max-h-52 overflow-y-auto scrollbar-hidden"
transition={flyAndScale}
sideOffset={8}
>
<DropdownMenu.Item
</button>
<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-xl select-none w-full"
disabled={messages.length === 0}
on:click={() => {
@@ -391,8 +382,8 @@
<div class="flex items-center line-clamp-1">
{$i18n.t('Export chat (.json)')}
</div>
</DropdownMenu.Item>
<DropdownMenu.Item
</button>
<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-xl select-none w-full"
disabled={messages.length === 0}
on:click={() => {
@@ -400,10 +391,9 @@
}}
>
<div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div>
</DropdownMenu.Item>
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
</DropdownMenu.Content>
</button>
</DropdownSub>
</div>
</div>
</Dropdown>
</div>
src/lib/components/workspace/Models/ModelMenu.svelte
+7 -7
View File
@@ -75,7 +75,7 @@
{#if writeAccess}
<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"
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={() => {
hideHandler();
}}
@@ -128,7 +128,7 @@
{/if}
<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"
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={() => {
pinModelHandler(model?.id);
}}
@@ -150,7 +150,7 @@
{#if writeAccess}
<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"
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={() => {
cloneHandler();
}}
@@ -166,7 +166,7 @@
{/if}
<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"
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={() => {
copyLinkHandler();
}}
@@ -178,7 +178,7 @@
{#if writeAccess && ($currentUser?.role === 'admin' || $currentUser?.permissions?.workspace?.models_export)}
<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"
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={() => {
exportHandler();
}}
@@ -191,7 +191,7 @@
{#if writeAccess && $config?.features.enable_community_sharing}
<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"
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={() => {
shareHandler();
}}
@@ -205,7 +205,7 @@
<hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
<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"
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={() => {
deleteHandler();
}}