mirror of
https://github.com/open-webui/open-webui
synced 2025-06-26 18:26:48 +00:00
refac
This commit is contained in:
Timothy Jaeryang Baek
parent
6062174602
commit
7d756982c2
@ -33,6 +33,7 @@
|
||||
import Plus from '../icons/Plus.svelte';
|
||||
import ChevronRight from '../icons/ChevronRight.svelte';
|
||||
import XMark from '../icons/XMark.svelte';
|
||||
import AddFunctionMenu from './Functions/AddFunctionMenu.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@ -41,6 +42,8 @@
|
||||
let functionsImportInputElement: HTMLInputElement;
|
||||
let importFiles;
|
||||
|
||||
let showImportModal = false;
|
||||
|
||||
let showConfirm = false;
|
||||
let query = '';
|
||||
|
||||
@ -232,12 +235,20 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a
|
||||
class=" px-2 py-2 rounded-xl hover:bg-gray-700/10 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition font-medium text-sm flex items-center space-x-1"
|
||||
href="/admin/functions/create"
|
||||
<AddFunctionMenu
|
||||
createHandler={() => {
|
||||
goto('/admin/functions/create');
|
||||
}}
|
||||
importFromGithubHandler={() => {
|
||||
showImportModal = true;
|
||||
}}
|
||||
>
|
||||
<Plus className="size-3.5" />
|
||||
</a>
|
||||
<div
|
||||
class=" px-2 py-2 rounded-xl hover:bg-gray-700/10 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition font-medium text-sm flex items-center space-x-1"
|
||||
>
|
||||
<Plus className="size-3.5" />
|
||||
</div>
|
||||
</AddFunctionMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
76
src/lib/components/admin/Functions/AddFunctionMenu.svelte
Normal file
76
src/lib/components/admin/Functions/AddFunctionMenu.svelte
Normal file
@ -0,0 +1,76 @@
|
||||
<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';
|
||||
import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import Share from '$lib/components/icons/Share.svelte';
|
||||
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
|
||||
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte';
|
||||
import Switch from '$lib/components/common/Switch.svelte';
|
||||
import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
|
||||
import Github from '$lib/components/icons/Github.svelte';
|
||||
import Plus from '$lib/components/icons/Plus.svelte';
|
||||
import Pencil from '$lib/components/icons/Pencil.svelte';
|
||||
import PencilSolid from '$lib/components/icons/PencilSolid.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let createHandler: Function;
|
||||
export let importFromGithubHandler: Function;
|
||||
|
||||
export let onClose: Function = () => {};
|
||||
|
||||
let show = false;
|
||||
</script>
|
||||
|
||||
<Dropdown
|
||||
bind:show
|
||||
on:change={(e) => {
|
||||
if (e.detail === false) {
|
||||
onClose();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Tooltip content={$i18n.t('Create')}>
|
||||
<slot />
|
||||
</Tooltip>
|
||||
|
||||
<div slot="content">
|
||||
<DropdownMenu.Content
|
||||
class="w-full max-w-[190px] text-sm rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg font-primary"
|
||||
sideOffset={-2}
|
||||
side="bottom"
|
||||
align="start"
|
||||
transition={flyAndScale}
|
||||
>
|
||||
<button
|
||||
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
|
||||
on:click={async () => {
|
||||
createHandler();
|
||||
show = false;
|
||||
}}
|
||||
>
|
||||
<div class=" self-center mr-2">
|
||||
<PencilSolid />
|
||||
</div>
|
||||
<div class=" self-center truncate">{$i18n.t('New Function')}</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
|
||||
on:click={async () => {
|
||||
importFromGithubHandler();
|
||||
show = false;
|
||||
}}
|
||||
>
|
||||
<div class=" self-center mr-2">
|
||||
<Github />
|
||||
</div>
|
||||
<div class=" self-center truncate">{$i18n.t('Import From Github')}</div>
|
||||
</button>
|
||||
</DropdownMenu.Content>
|
||||
</div>
|
||||
</Dropdown>
|
||||
19
src/lib/components/icons/Github.svelte
Normal file
19
src/lib/components/icons/Github.svelte
Normal file
@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
export let className = 'size-4';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={className}
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
@ -41,7 +41,7 @@
|
||||
transition={(e) => fade(e, { duration: 100 })}
|
||||
>
|
||||
<button
|
||||
class="flex rounded-md py-2 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"
|
||||
on:click={async () => {
|
||||
onRecord();
|
||||
show = false;
|
||||
@ -54,7 +54,7 @@
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="flex rounded-md py-2 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"
|
||||
on:click={() => {
|
||||
onCaptureAudio();
|
||||
show = false;
|
||||
@ -67,7 +67,7 @@
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="flex rounded-md py-2 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"
|
||||
on:click={() => {
|
||||
onUpload();
|
||||
show = false;
|
||||
|
||||
@ -268,7 +268,7 @@
|
||||
class=" flex flex-col cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl transition"
|
||||
id="model-item-{model.id}"
|
||||
>
|
||||
<div class="flex gap-4 mt-0.5 mb-0.5">
|
||||
<div class="flex gap-4 mt-1 mb-0.5">
|
||||
<div class=" w-[44px]">
|
||||
<div
|
||||
class=" rounded-full object-cover {model.is_active
|
||||
@ -309,7 +309,7 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center -mb-0.5 px-0.5">
|
||||
<div class="flex justify-between items-center -mb-0.5 px-0.5 mt-1.5">
|
||||
<div class=" text-xs mt-0.5">
|
||||
<Tooltip
|
||||
content={model?.user?.email ?? $i18n.t('Deleted User')}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user