refac
This commit is contained in:
Timothy Jaeryang Baek
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user