Emil_Shanaty/open-webui-ai4me
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"> <script lang="ts">
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import { DropdownMenu } from 'bits-ui';
import { flyAndScale } from '$lib/utils/transitions';
import { formatFileSize } from '$lib/utils'; import { formatFileSize } from '$lib/utils';
import type { FileEntry } from '$lib/apis/terminal'; import type { FileEntry } from '$lib/apis/terminal';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import Folder from '../../icons/Folder.svelte'; import Folder from '../../icons/Folder.svelte';
import EllipsisHorizontal from '../../icons/EllipsisHorizontal.svelte'; import EllipsisHorizontal from '../../icons/EllipsisHorizontal.svelte';
import GarbageBin from '../../icons/GarbageBin.svelte'; import GarbageBin from '../../icons/GarbageBin.svelte';
@@ -111,63 +111,59 @@
{/if} {/if}
</button> </button>
<DropdownMenu.Root> <Dropdown align="end" sideOffset={4}>
<DropdownMenu.Trigger <button
class="shrink-0 p-0.5 mr-1 rounded-lg transition 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 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" hover:bg-gray-100 dark:hover:bg-gray-800"
on:click={(e) => e.stopPropagation()}
aria-label={$i18n.t('More')} aria-label={$i18n.t('More')}
> >
<EllipsisHorizontal className="size-3.5" /> <EllipsisHorizontal className="size-3.5" />
</DropdownMenu.Trigger> </button>
<DropdownMenu.Content <div slot="content">
strategy="fixed" <div
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" 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"
sideOffset={4} >
side="bottom" {#if entry.type !== 'directory'}
align="end" <button
transition={flyAndScale} 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"
{#if entry.type !== 'directory'} on:click={(e) => {
<DropdownMenu.Item 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" 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" 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) => { on:click={(e) => {
e.stopPropagation(); e.stopPropagation();
onDownload(`${currentPath}${entry.name}`); onDelete(`${currentPath}${entry.name}`, entry.name);
}} }}
> >
<svg <GarbageBin className="size-4" />
xmlns="http://www.w3.org/2000/svg" <div class="flex items-center">{$i18n.t('Delete')}</div>
viewBox="0 0 20 20" </button>
fill="currentColor" </div>
class="size-4" </div>
> </Dropdown>
<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>
</div> </div>
</li> </li>
src/lib/components/chat/MessageInput/CallOverlay/VideoInputMenu.svelte
+10 -14
View File
@@ -1,6 +1,4 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { flyAndScale } from '$lib/utils/transitions';
import { getContext, createEventDispatcher } from 'svelte'; import { getContext, createEventDispatcher } from 'svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@@ -16,8 +14,10 @@
<Dropdown <Dropdown
bind:show bind:show
on:change={(e) => { side="top"
if (e.detail === false) { sideOffset={6}
onOpenChange={(state) => {
if (state === false) {
onClose(); onClose();
} }
}} }}
@@ -25,16 +25,12 @@
<slot /> <slot />
<div slot="content"> <div slot="content">
<DropdownMenu.Content <div
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" 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"
sideOffset={6}
side="top"
align="start"
transition={flyAndScale}
> >
{#each devices as device} {#each devices as device}
<DropdownMenu.Item <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" 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={() => { on:click={() => {
dispatch('change', device.deviceId); dispatch('change', device.deviceId);
}} }}
@@ -44,8 +40,8 @@
{device?.label ?? 'Camera'} {device?.label ?? 'Camera'}
</div> </div>
</div> </div>
</DropdownMenu.Item> </button>
{/each} {/each}
</DropdownMenu.Content> </div>
</div> </div>
</Dropdown> </Dropdown>
src/lib/components/chat/MessageInput/IntegrationsMenu.svelte
+5 -12
View File
@@ -1,8 +1,6 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { getContext, onMount, tick } from 'svelte'; import { getContext, onMount, tick } from 'svelte';
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
import { flyAndScale } from '$lib/utils/transitions';
import { import {
config, config,
@@ -102,8 +100,8 @@
<Dropdown <Dropdown
bind:show bind:show
on:change={(e) => { onOpenChange={(state) => {
if (e.detail === false) { if (state === false) {
onClose(); onClose();
} }
}} }}
@@ -112,13 +110,8 @@
<slot /> <slot />
</Tooltip> </Tooltip>
<div slot="content"> <div slot="content">
<DropdownMenu.Content <div
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" 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"
sideOffset={4}
alignOffset={-6}
side="bottom"
align="start"
transition={flyAndScale}
> >
{#if tab === ''} {#if tab === ''}
<div in:fly={{ x: -20, duration: 150 }}> <div in:fly={{ x: -20, duration: 150 }}>
@@ -407,6 +400,6 @@
{/each} {/each}
</div> </div>
{/if} {/if}
</DropdownMenu.Content> </div>
</div> </div>
</Dropdown> </Dropdown>
src/lib/components/chat/MessageInput/TerminalMenu.svelte
+4 -10
View File
@@ -1,8 +1,6 @@
<script lang="ts"> <script lang="ts">
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import { goto } from '$app/navigation'; 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 { settings, showSettings, terminalServers, selectedTerminalId, user } from '$lib/stores';
import { getToolServersData } from '$lib/apis'; import { getToolServersData } from '$lib/apis';
@@ -92,7 +90,7 @@
</script> </script>
<div class="flex items-center translate-x-0.5"> <div class="flex items-center translate-x-0.5">
<Dropdown bind:show> <Dropdown bind:show align="end">
<Tooltip content={$i18n.t('Terminal')} placement="top"> <Tooltip content={$i18n.t('Terminal')} placement="top">
<button <button
type="button" type="button"
@@ -112,12 +110,8 @@
</Tooltip> </Tooltip>
<div slot="content"> <div slot="content">
<DropdownMenu.Content <div
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" 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"
sideOffset={4}
side="bottom"
align="end"
transition={flyAndScale}
> >
<!-- Direct terminals (gated by permission) --> <!-- Direct terminals (gated by permission) -->
{#if directTerminals.length > 0 && ($user?.role === 'admin' || ($user?.permissions?.features?.direct_tool_servers ?? true))} {#if directTerminals.length > 0 && ($user?.role === 'admin' || ($user?.permissions?.features?.direct_tool_servers ?? true))}
@@ -254,7 +248,7 @@
</button> </button>
{/each} {/each}
{/if} {/if}
</DropdownMenu.Content> </div>
</div> </div>
</Dropdown> </Dropdown>
</div> </div>
src/lib/components/chat/Messages/ResponseMessage/RegenerateMenu.svelte
+16 -21
View File
@@ -1,6 +1,4 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { flyAndScale } from '$lib/utils/transitions';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import Dropdown from '$lib/components/common/Dropdown.svelte'; import Dropdown from '$lib/components/common/Dropdown.svelte';
@@ -18,22 +16,19 @@
<Dropdown <Dropdown
bind:show bind:show
on:change={(e) => { onOpenChange={(state) => {
if (e.detail === false) { if (state === false) {
onClose(); onClose();
} }
}} }}
align="end" align="start"
sideOffset={-2}
> >
<slot></slot> <slot></slot>
<div slot="content"> <div slot="content">
<DropdownMenu.Content <div
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" 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"
sideOffset={-2}
side="bottom"
align="start"
transition={flyAndScale}
> >
<div class="py-1.5 px-2.5 flex dark:text-gray-100"> <div class="py-1.5 px-2.5 flex dark:text-gray-100">
<input <input
@@ -78,8 +73,8 @@
</div> </div>
</div> </div>
<hr class="border-gray-50/30 dark:border-gray-800/30 my-1 mx-2" /> <hr class="border-gray-50/30 dark:border-gray-800/30 my-1 mx-2" />
<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" 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={() => { on:click={() => {
onRegenerate(); onRegenerate();
show = false; show = false;
@@ -101,27 +96,27 @@
/> />
</svg> </svg>
<div class="flex items-center">{$i18n.t('Try Again')}</div> <div class="flex items-center">{$i18n.t('Try Again')}</div>
</DropdownMenu.Item> </button>
<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" 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={() => { on:click={() => {
onRegenerate($i18n.t('Add Details')); onRegenerate($i18n.t('Add Details'));
}} }}
> >
<LineSpace strokeWidth="2" /> <LineSpace strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Add Details')}</div> <div class="flex items-center">{$i18n.t('Add Details')}</div>
</DropdownMenu.Item> </button>
<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" 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={() => { on:click={() => {
onRegenerate($i18n.t('More Concise')); onRegenerate($i18n.t('More Concise'));
}} }}
> >
<LineSpaceSmaller strokeWidth="2" /> <LineSpaceSmaller strokeWidth="2" />
<div class="flex items-center">{$i18n.t('More Concise')}</div> <div class="flex items-center">{$i18n.t('More Concise')}</div>
</DropdownMenu.Item> </button>
</DropdownMenu.Content> </div>
</div> </div>
</Dropdown> </Dropdown>
src/lib/components/chat/ModelSelector/ModelItemMenu.svelte
+90 -98
View File
@@ -1,14 +1,11 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { flyAndScale } from '$lib/utils/transitions';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import Pin from '$lib/components/icons/Pin.svelte'; import Pin from '$lib/components/icons/Pin.svelte';
import PinSlash from '$lib/components/icons/PinSlash.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 Link from '$lib/components/icons/Link.svelte';
import Pencil from '$lib/components/icons/Pencil.svelte'; import Pencil from '$lib/components/icons/Pencil.svelte';
import { config, settings, user } from '$lib/stores'; import { config, settings, user } from '$lib/stores';
@@ -25,123 +22,118 @@
export let onClose: Function = () => {}; export let onClose: Function = () => {};
</script> </script>
<DropdownMenu.Root <Dropdown
bind:open={show} bind:show
closeFocus={false} align="end"
sideOffset={-2}
onOpenChange={(state) => { onOpenChange={(state) => {
if (state === false) { if (state === false) {
onClose(); onClose();
} }
}} }}
typeahead={false}
> >
<DropdownMenu.Trigger> <Tooltip
<Tooltip content={$i18n.t('More')}
content={$i18n.t('More')} className={($settings?.highContrastMode ?? false)
className={($settings?.highContrastMode ?? false) ? ''
? '' : 'group-hover/item:opacity-100 opacity-0'}
: '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}
> >
{#if model?.preset || model?.info?.base_model_id ? model?.info?.user_id === $user?.id : $user?.role === 'admin'} <slot />
<DropdownMenu.Item </Tooltip>
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( <div slot="content">
model?.preset || model?.info?.base_model_id <div
? `/workspace/models/edit?id=${encodeURIComponent(model?.id ?? '')}` 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"
: `/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;
}}
> >
{#if ($settings?.pinnedModels ?? []).includes(model?.id)} {#if model?.preset || model?.info?.base_model_id ? model?.info?.user_id === $user?.id : $user?.role === 'admin'}
<PinSlash /> <button
{:else} type="button"
<Pin /> 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} {/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)} {#if ($settings?.pinnedModels ?? []).includes(model?.id)}
{$i18n.t('Hide from Sidebar')} <PinSlash />
{:else} {:else}
{$i18n.t('Keep in Sidebar')} <Pin />
{/if} {/if}
</div>
</DropdownMenu.Item>
<DropdownMenu.Item <div class="flex items-center">
type="button" {#if ($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" {$i18n.t('Hide from Sidebar')}
on:click={(e) => { {:else}
e.stopPropagation(); {$i18n.t('Keep in Sidebar')}
e.preventDefault(); {/if}
</div>
</button>
copyLinkHandler(); <button
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
type="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" 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) => { on:click={(e) => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
window.open( copyLinkHandler();
`https://openwebui.com/models?q=${encodeURIComponent(model?.id ?? '')}`,
'_blank'
);
show = false; show = false;
}} }}
> >
<GlobeAlt className="size-4" /> <Link />
<div class="flex items-center">{$i18n.t('Community Reviews')}</div> <div class="flex items-center">{$i18n.t('Copy Link')}</div>
</DropdownMenu.Item> </button>
{/if}
</DropdownMenu.Content> {#if $config?.features.enable_community_sharing}
</DropdownMenu.Root> <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) { function trigger(node) {
triggerEl = node.firstElementChild || node; triggerEl = node.firstElementChild || node;
function handleClick(e) { function handleClick(e) {
e.stopPropagation();
e.preventDefault(); e.preventDefault();
toggleOpen(); toggleOpen();
} }
@@ -147,16 +146,19 @@
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<span use:trigger style="display: contents;"> <span use:trigger style="display: contents; cursor: pointer;">
<slot /> <slot />
</span> </span>
{#if show} {#if show}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
use:portal use:portal
bind:this={contentEl} bind:this={contentEl}
class={contentClass} class={contentClass}
transition:flyAndScale transition:flyAndScale
on:click|stopPropagation
> >
<slot name="content" /> <slot name="content" />
</div> </div>
src/lib/components/common/DropdownOptions.svelte
+13 -15
View File
@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { getContext } from 'svelte'; 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'; import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@@ -20,19 +20,17 @@
let open = false; let open = false;
</script> </script>
<DropdownMenu.Root bind:open> <Dropdown bind:show={open} {align}>
<DropdownMenu.Trigger> <div
<div class={className
class={className ? 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'}
: '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}
{items.find((item) => item.value === value)?.label ?? placeholder} <ChevronDown className=" size-3" strokeWidth="2.5" />
<ChevronDown className=" size-3" strokeWidth="2.5" /> </div>
</div>
</DropdownMenu.Trigger>
<DropdownMenu.Content {align}> <div slot="content">
<div <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" 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> </button>
{/each} {/each}
</div> </div>
</DropdownMenu.Content> </div>
</DropdownMenu.Root> </Dropdown>
src/lib/components/common/DropdownSub.svelte
+9
View File
@@ -22,6 +22,15 @@
contentEl.style.position = 'fixed'; contentEl.style.position = 'fixed';
contentEl.style.zIndex = '99999'; 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 // Position to the right of the trigger
const rightSpace = window.innerWidth - rect.right; const rightSpace = window.innerWidth - rect.right;
const contentWidth = contentEl.offsetWidth || 200; const contentWidth = contentEl.offsetWidth || 200;
src/lib/components/layout/Navbar/Menu.svelte
+72 -84
View File
@@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import { DropdownMenu } from 'bits-ui';
import { getContext, tick } from 'svelte'; import { getContext, tick } from 'svelte';
import fileSaver from 'file-saver'; import fileSaver from 'file-saver';
@@ -21,10 +20,11 @@
showEmbeds, showEmbeds,
artifactContents artifactContents
} from '$lib/stores'; } from '$lib/stores';
import { flyAndScale } from '$lib/utils/transitions';
import { getChatById } from '$lib/apis/chats'; import { getChatById } from '$lib/apis/chats';
import Dropdown from '$lib/components/common/Dropdown.svelte'; 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 Tags from '$lib/components/chat/Tags.svelte';
import Clipboard from '$lib/components/icons/Clipboard.svelte'; import Clipboard from '$lib/components/icons/Clipboard.svelte';
import AdjustmentsHorizontal from '$lib/components/icons/AdjustmentsHorizontal.svelte'; import AdjustmentsHorizontal from '$lib/components/icons/AdjustmentsHorizontal.svelte';
@@ -267,21 +267,19 @@
{/if} {/if}
<Dropdown <Dropdown
on:change={(e) => { onOpenChange={(state) => {
if (e.detail === false) { if (state === false) {
onClose(); onClose();
} }
}} }}
align="end"
sideOffset={8}
> >
<slot /> <slot />
<div slot="content"> <div slot="content">
<DropdownMenu.Content <div
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" 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"
sideOffset={8}
side="bottom"
align="end"
transition={flyAndScale}
> >
<!-- <DropdownMenu.Item draggable="false" <!-- <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" 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> --> </DropdownMenu.Item> -->
{#if ($artifactContents ?? []).length > 0} {#if ($artifactContents ?? []).length > 0}
<DropdownMenu.Item <button
draggable="false" 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" 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" id="chat-artifacts-button"
@@ -324,13 +322,13 @@
> >
<Cube className=" size-4" strokeWidth="1.5" /> <Cube className=" size-4" strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Artifacts')}</div> <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" /> <hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
{/if} {/if}
{#if !$temporaryChatEnabled && ($user?.role === 'admin' || ($user.permissions?.chat?.share ?? true))} {#if !$temporaryChatEnabled && ($user?.role === 'admin' || ($user.permissions?.chat?.share ?? true))}
<DropdownMenu.Item <button
draggable="false" 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" 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" id="chat-share-button"
@@ -340,57 +338,52 @@
> >
<Share strokeWidth="1.5" /> <Share strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Share')}</div> <div class="flex items-center">{$i18n.t('Share')}</div>
</DropdownMenu.Item> </button>
{/if} {/if}
<DropdownMenu.Sub> <DropdownSub>
<DropdownMenu.SubTrigger <button
slot="trigger"
draggable="false" 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" 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" /> <Download strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Download')}</div> <div class="flex items-center">{$i18n.t('Download')}</div>
</DropdownMenu.SubTrigger> </button>
<DropdownMenu.SubContent {#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)}
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" <button
transition={flyAndScale} draggable="false"
sideOffset={8} 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)} <div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div>
<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"
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>
<DropdownMenu.Item <button
draggable="false" 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" 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={() => { on:click={() => {
downloadPdf(); downloadPdf();
}} }}
> >
<div class="flex items-center line-clamp-1">{$i18n.t('PDF document (.pdf)')}</div> <div class="flex items-center line-clamp-1">{$i18n.t('PDF document (.pdf)')}</div>
</DropdownMenu.Item> </button>
</DropdownMenu.SubContent> </DropdownSub>
</DropdownMenu.Sub>
<DropdownMenu.Item <button
draggable="false" 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" 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" id="chat-copy-button"
@@ -406,57 +399,52 @@
> >
<Clipboard className=" size-4" strokeWidth="1.5" /> <Clipboard className=" size-4" strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Copy')}</div> <div class="flex items-center">{$i18n.t('Copy')}</div>
</DropdownMenu.Item> </button>
{#if !$temporaryChatEnabled && chat?.id} {#if !$temporaryChatEnabled && chat?.id}
<hr class="border-gray-50/30 dark:border-gray-800/30 my-1" /> <hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
{#if $folders.length > 0} {#if $folders.length > 0}
<DropdownMenu.Sub> <DropdownSub maxWidth={200}>
<DropdownMenu.SubTrigger <button
slot="trigger"
draggable="false" 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" 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" /> <Folder strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Move')}</div> <div class="flex items-center">{$i18n.t('Move')}</div>
</DropdownMenu.SubTrigger> </button>
<DropdownMenu.SubContent {#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder}
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" {#if folder?.id}
transition={flyAndScale} <button
sideOffset={8} 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"
{#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder} on:click={() => {
{#if folder?.id} moveChatHandler(chat.id, 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" <div class="shrink-0">
on:click={() => { <Folder strokeWidth="1.5" />
moveChatHandler(chat.id, folder.id); </div>
}}
>
<div class="shrink-0">
<Folder strokeWidth="1.5" />
</div>
<div class="truncate">{folder.name ?? 'Folder'}</div> <div class="truncate">{folder.name ?? 'Folder'}</div>
</DropdownMenu.Item> </button>
{/if} {/if}
{/each} {/each}
</DropdownMenu.SubContent> </DropdownSub>
</DropdownMenu.Sub>
{/if} {/if}
<DropdownMenu.Item <button
draggable="false" 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={() => { on:click={() => {
archiveChatHandler(); archiveChatHandler();
}} }}
> >
<ArchiveBox className="size-4" strokeWidth="1.5" /> <ArchiveBox className="size-4" strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Archive')}</div> <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" /> <hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
@@ -464,6 +452,6 @@
<Tags chatId={chat.id} /> <Tags chatId={chat.id} />
</div> </div>
{/if} {/if}
</DropdownMenu.Content> </div>
</div> </div>
</Dropdown> </Dropdown>
src/lib/components/notes/AIMenu.svelte
+18 -21
View File
@@ -1,13 +1,9 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu } from 'bits-ui'; import { getContext } from 'svelte';
import { createEventDispatcher, getContext, onMount } from 'svelte';
import { showSettings, mobile, showSidebar, user } from '$lib/stores'; import Dropdown from '$lib/components/common/Dropdown.svelte';
import { fade, slide } from 'svelte/transition';
import PencilSquare from '../icons/PencilSquare.svelte';
import ChatBubbleOval from '../icons/ChatBubbleOval.svelte';
import Sparkles from '../icons/Sparkles.svelte'; import Sparkles from '../icons/Sparkles.svelte';
import ChatBubbleOval from '../icons/ChatBubbleOval.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@@ -20,18 +16,19 @@
export let onChange = () => {}; export let onChange = () => {};
</script> </script>
<DropdownMenu.Root bind:open={show} onOpenChange={onChange}> <Dropdown
<DropdownMenu.Trigger> bind:show
<slot /> align="end"
</DropdownMenu.Trigger> sideOffset={8}
onOpenChange={(state) => {
onChange(state);
}}
>
<slot />
<slot name="content"> <div slot="content">
<DropdownMenu.Content <div
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" 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"
sideOffset={8}
side="bottom"
align="end"
transition={(e) => fade(e, { duration: 100 })}
> >
<button <button
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition" 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>
<div class=" self-center truncate">{$i18n.t('Chat')}</div> <div class=" self-center truncate">{$i18n.t('Chat')}</div>
</button> </button>
</DropdownMenu.Content> </div>
</slot> </div>
</DropdownMenu.Root> </Dropdown>
src/lib/components/notes/Notes/NoteMenu.svelte
+76 -98
View File
@@ -1,14 +1,8 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu } from 'bits-ui'; import { getContext } from 'svelte';
import { getContext, onMount } from 'svelte';
import { flyAndScale } from '$lib/utils/transitions'; import Dropdown from '$lib/components/common/Dropdown.svelte';
import { fade, slide } from 'svelte/transition'; import DropdownSub from '$lib/components/common/DropdownSub.svelte';
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 Download from '$lib/components/icons/Download.svelte'; import Download from '$lib/components/icons/Download.svelte';
import GarbageBin from '$lib/components/icons/GarbageBin.svelte'; import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte'; import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
@@ -29,118 +23,102 @@
export let onChange = () => {}; export let onChange = () => {};
</script> </script>
<DropdownMenu.Root <Dropdown
bind:open={show} bind:show
align="end"
sideOffset={6}
onOpenChange={(state) => { onOpenChange={(state) => {
onChange(state); onChange(state);
}} }}
> >
<DropdownMenu.Trigger> <slot />
<slot />
</DropdownMenu.Trigger>
<slot name="content"> <div slot="content">
<DropdownMenu.Content <div
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" 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"
sideOffset={6}
side="bottom"
align="end"
transition={(e) => fade(e, { duration: 100 })}
> >
<DropdownMenu.Sub> <DropdownSub>
<DropdownMenu.SubTrigger <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" 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" /> <Download strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Download')}</div> <div class="flex items-center">{$i18n.t('Download')}</div>
</DropdownMenu.SubTrigger> </button>
<DropdownMenu.SubContent
class="w-full rounded-xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg" <button
transition={flyAndScale} 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"
sideOffset={8} on:click={() => {
align="end" onDownload('txt');
}}
> >
<DropdownMenu.Item <div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div>
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>
on:click={() => {
onDownload('txt');
}}
>
<div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div>
</DropdownMenu.Item>
<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" 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={() => { on:click={() => {
onDownload('md'); onDownload('md');
}} }}
> >
<div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.md)')}</div> <div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.md)')}</div>
</DropdownMenu.Item> </button>
<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" 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={() => { on:click={() => {
onDownload('pdf'); onDownload('pdf');
}} }}
> >
<div class="flex items-center line-clamp-1">{$i18n.t('PDF document (.pdf)')}</div> <div class="flex items-center line-clamp-1">{$i18n.t('PDF document (.pdf)')}</div>
</DropdownMenu.Item> </button>
</DropdownMenu.SubContent> </DropdownSub>
</DropdownMenu.Sub>
{#if onCopyLink || onCopyToClipboard} {#if onCopyLink || onCopyToClipboard}
<DropdownMenu.Sub> <DropdownSub>
<DropdownMenu.SubTrigger <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" 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" /> <Share strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Share')}</div> <div class="flex items-center">{$i18n.t('Share')}</div>
</DropdownMenu.SubTrigger> </button>
<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}
{#if onCopyToClipboard} {#if onCopyLink}
<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" 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={() => { on:click={() => {
onCopyToClipboard(); onCopyLink();
}} }}
> >
<DocumentDuplicate strokeWidth="2" /> <Link />
<div class="flex items-center">{$i18n.t('Copy to clipboard')}</div> <div class="flex items-center">{$i18n.t('Copy link')}</div>
</DropdownMenu.Item> </button>
{/if} {/if}
</DropdownMenu.SubContent>
</DropdownMenu.Sub> {#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} {/if}
<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" 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={() => { on:click={() => {
onDelete(); onDelete();
}} }}
> >
<GarbageBin /> <GarbageBin />
<div class="flex items-center">{$i18n.t('Delete')}</div> <div class="flex items-center">{$i18n.t('Delete')}</div>
</DropdownMenu.Item> </button>
</DropdownMenu.Content> </div>
</slot> </div>
</DropdownMenu.Root> </Dropdown>
src/lib/components/notes/RecordMenu.svelte
+12 -21
View File
@@ -1,13 +1,9 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu } from 'bits-ui'; import { createEventDispatcher, getContext } from 'svelte';
import { createEventDispatcher, getContext, onMount } from 'svelte';
import { showSettings, mobile, showSidebar, user } from '$lib/stores';
import { fade, slide } from 'svelte/transition';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import Mic from '../icons/Mic.svelte'; import Mic from '../icons/Mic.svelte';
import CursorArrowRays from '../icons/CursorArrowRays.svelte'; import CursorArrowRays from '../icons/CursorArrowRays.svelte';
import DocumentArrowUp from '../icons/DocumentArrowUp.svelte';
import CloudArrowUp from '../icons/CloudArrowUp.svelte'; import CloudArrowUp from '../icons/CloudArrowUp.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@@ -22,23 +18,18 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
</script> </script>
<DropdownMenu.Root <Dropdown
bind:open={show} bind:show
sideOffset={8}
onOpenChange={(state) => { onOpenChange={(state) => {
dispatch('change', state); dispatch('change', state);
}} }}
> >
<DropdownMenu.Trigger> <slot />
<slot />
</DropdownMenu.Trigger>
<slot name="content"> <div slot="content">
<DropdownMenu.Content <div
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" 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"
sideOffset={8}
side="bottom"
align="start"
transition={(e) => fade(e, { duration: 100 })}
> >
<button <button
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition" 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>
<div class=" self-center truncate">{$i18n.t('Upload Audio')}</div> <div class=" self-center truncate">{$i18n.t('Upload Audio')}</div>
</button> </button>
</DropdownMenu.Content> </div>
</slot> </div>
</DropdownMenu.Root> </Dropdown>
src/lib/components/playground/Chat.svelte
+13 -23
View File
@@ -3,7 +3,6 @@
const { saveAs } = fileSaver; const { saveAs } = fileSaver;
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import { DropdownMenu } from 'bits-ui';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { onMount, tick, getContext } from 'svelte'; import { onMount, tick, getContext } from 'svelte';
@@ -15,13 +14,13 @@
WEBUI_BASE_URL WEBUI_BASE_URL
} from '$lib/constants'; } from '$lib/constants';
import { WEBUI_NAME, config, user, models, settings } from '$lib/stores'; import { WEBUI_NAME, config, user, models, settings } from '$lib/stores';
import { flyAndScale } from '$lib/utils/transitions';
import { chatCompletion } from '$lib/apis/openai'; import { chatCompletion } from '$lib/apis/openai';
import { splitStream } from '$lib/utils'; import { splitStream } from '$lib/utils';
import Collapsible from '../common/Collapsible.svelte'; import Collapsible from '../common/Collapsible.svelte';
import Dropdown from '../common/Dropdown.svelte'; import Dropdown from '../common/Dropdown.svelte';
import DropdownSub from '../common/DropdownSub.svelte';
import Messages from '$lib/components/playground/Chat/Messages.svelte'; import Messages from '$lib/components/playground/Chat/Messages.svelte';
import ChevronUp from '../icons/ChevronUp.svelte'; import ChevronUp from '../icons/ChevronUp.svelte';
@@ -362,26 +361,18 @@
</button> </button>
<div slot="content"> <div slot="content">
<DropdownMenu.Content <div
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" 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"
sideOffset={8}
side="bottom"
align="end"
transition={flyAndScale}
> >
<DropdownMenu.Sub> <DropdownSub>
<DropdownMenu.SubTrigger <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" 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" /> <Download strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Download')}</div> <div class="flex items-center">{$i18n.t('Download')}</div>
</DropdownMenu.SubTrigger> </button>
<DropdownMenu.SubContent <button
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
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" 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} disabled={messages.length === 0}
on:click={() => { on:click={() => {
@@ -391,8 +382,8 @@
<div class="flex items-center line-clamp-1"> <div class="flex items-center line-clamp-1">
{$i18n.t('Export chat (.json)')} {$i18n.t('Export chat (.json)')}
</div> </div>
</DropdownMenu.Item> </button>
<DropdownMenu.Item <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" 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} disabled={messages.length === 0}
on:click={() => { on:click={() => {
@@ -400,10 +391,9 @@
}} }}
> >
<div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div> <div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div>
</DropdownMenu.Item> </button>
</DropdownMenu.SubContent> </DropdownSub>
</DropdownMenu.Sub> </div>
</DropdownMenu.Content>
</div> </div>
</Dropdown> </Dropdown>
</div> </div>
src/lib/components/workspace/Models/ModelMenu.svelte
+7 -7
View File
@@ -75,7 +75,7 @@
{#if writeAccess} {#if writeAccess}
<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" 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={() => { on:click={() => {
hideHandler(); hideHandler();
}} }}
@@ -128,7 +128,7 @@
{/if} {/if}
<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" 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={() => { on:click={() => {
pinModelHandler(model?.id); pinModelHandler(model?.id);
}} }}
@@ -150,7 +150,7 @@
{#if writeAccess} {#if writeAccess}
<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" 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={() => { on:click={() => {
cloneHandler(); cloneHandler();
}} }}
@@ -166,7 +166,7 @@
{/if} {/if}
<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" 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={() => { on:click={() => {
copyLinkHandler(); copyLinkHandler();
}} }}
@@ -178,7 +178,7 @@
{#if writeAccess && ($currentUser?.role === 'admin' || $currentUser?.permissions?.workspace?.models_export)} {#if writeAccess && ($currentUser?.role === 'admin' || $currentUser?.permissions?.workspace?.models_export)}
<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" 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={() => { on:click={() => {
exportHandler(); exportHandler();
}} }}
@@ -191,7 +191,7 @@
{#if writeAccess && $config?.features.enable_community_sharing} {#if writeAccess && $config?.features.enable_community_sharing}
<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" 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={() => { on:click={() => {
shareHandler(); shareHandler();
}} }}
@@ -205,7 +205,7 @@
<hr class="border-gray-50/30 dark:border-gray-800/30 my-1" /> <hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
<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" 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={() => { on:click={() => {
deleteHandler(); deleteHandler();
}} }}