| <script lang="ts"> |
| import { toast } from 'svelte-sonner'; |
| import fileSaver from 'file-saver'; |
| const { saveAs } = fileSaver; |
| |
| import { WEBUI_NAME, config, functions as _functions, models, settings, user } from '$lib/stores'; |
| import { onMount, getContext, tick, onDestroy } from 'svelte'; |
| |
| import { goto } from '$app/navigation'; |
| import { |
| createNewFunction, |
| deleteFunctionById, |
| exportFunctions, |
| getFunctionById, |
| getFunctionList, |
| getFunctions, |
| loadFunctionByUrl, |
| toggleFunctionById, |
| toggleGlobalById |
| } from '$lib/apis/functions'; |
| |
| import Download from '../icons/Download.svelte'; |
| import Tooltip from '../common/Tooltip.svelte'; |
| import ConfirmDialog from '../common/ConfirmDialog.svelte'; |
| import { getModels } from '$lib/apis'; |
| import FunctionMenu from './Functions/FunctionMenu.svelte'; |
| import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte'; |
| import Switch from '../common/Switch.svelte'; |
| import ValvesModal from '../workspace/common/ValvesModal.svelte'; |
| import ManifestModal from '../workspace/common/ManifestModal.svelte'; |
| import Heart from '../icons/Heart.svelte'; |
| import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte'; |
| import GarbageBin from '../icons/GarbageBin.svelte'; |
| import Search from '../icons/Search.svelte'; |
| import Plus from '../icons/Plus.svelte'; |
| import ChevronRight from '../icons/ChevronRight.svelte'; |
| import XMark from '../icons/XMark.svelte'; |
| import AddFunctionMenu from './Functions/AddFunctionMenu.svelte'; |
| import ImportModal from '../ImportModal.svelte'; |
| import ViewSelector from '../workspace/common/ViewSelector.svelte'; |
| import TagSelector from '../workspace/common/TagSelector.svelte'; |
| import { capitalizeFirstLetter } from '$lib/utils'; |
| import Spinner from '../common/Spinner.svelte'; |
| |
| const i18n = getContext('i18n'); |
| |
| let shiftKey = false; |
| |
| let functionsImportInputElement: HTMLInputElement; |
| let importFiles; |
| |
| let tagsContainerElement: HTMLDivElement; |
| let viewOption = ''; |
| |
| let query = ''; |
| let searchDebounceTimer: ReturnType<typeof setTimeout>; |
| let selectedTag = ''; |
| let selectedType = ''; |
| |
| let showImportModal = false; |
| |
| let showConfirm = false; |
| |
| let showManifestModal = false; |
| let showValvesModal = false; |
| let selectedFunction = null; |
| |
| let showDeleteConfirm = false; |
| |
| let loaded = false; |
| let functions = null; |
| let filteredItems = []; |
| |
| $: if (query !== undefined) { |
| clearTimeout(searchDebounceTimer); |
| searchDebounceTimer = setTimeout(() => { |
| setFilteredItems(); |
| }, 300); |
| } |
| |
| $: if (functions && selectedType !== undefined && viewOption !== undefined) { |
| setFilteredItems(); |
| } |
| |
| const setFilteredItems = () => { |
| filteredItems = (functions ?? []) |
| .filter( |
| (f) => |
| (selectedType !== '' ? f.type === selectedType : true) && |
| (query === '' || |
| f.name.toLowerCase().includes(query.toLowerCase()) || |
| f.id.toLowerCase().includes(query.toLowerCase()) || |
| (f.user?.name || '').toLowerCase().includes(query.toLowerCase()) || |
| (f.user?.email || '').toLowerCase().includes(query.toLowerCase()) || |
| (f.user?.username || '').toLowerCase().includes(query.toLowerCase())) && |
| (viewOption === '' || |
| (viewOption === 'created' && f.user_id === $user?.id) || |
| (viewOption === 'shared' && f.user_id !== $user?.id)) |
| ) |
| .sort((a, b) => a.type.localeCompare(b.type) || a.name.localeCompare(b.name)); |
| }; |
| const shareHandler = async (func) => { |
| const item = await getFunctionById(localStorage.token, func.id).catch((error) => { |
| toast.error(`${error}`); |
| return null; |
| }); |
| |
| toast.success($i18n.t('Redirecting you to Omnichat Community')); |
| |
| const url = 'https://omnichat.rexpro.com'; |
| |
| const tab = await window.open(`${url}/functions/create`, '_blank'); |
| |
| // Define the event handler function |
| const messageHandler = (event) => { |
| if (event.origin !== url) return; |
| if (event.data === 'loaded') { |
| tab.postMessage(JSON.stringify(item), '*'); |
| |
| // Remove the event listener after handling the message |
| window.removeEventListener('message', messageHandler); |
| } |
| }; |
| |
| window.addEventListener('message', messageHandler, false); |
| console.log(item); |
| }; |
| |
| const cloneHandler = async (func) => { |
| const _function = await getFunctionById(localStorage.token, func.id).catch((error) => { |
| toast.error(`${error}`); |
| return null; |
| }); |
| |
| if (_function) { |
| sessionStorage.function = JSON.stringify({ |
| ..._function, |
| id: `${_function.id}_clone`, |
| name: `${_function.name} (${$i18n.t('Clone')})` |
| }); |
| goto('/admin/functions/create'); |
| } |
| }; |
| |
| const exportHandler = async (func) => { |
| const _function = await getFunctionById(localStorage.token, func.id).catch((error) => { |
| toast.error(`${error}`); |
| return null; |
| }); |
| |
| if (_function) { |
| let blob = new Blob([JSON.stringify([_function])], { |
| type: 'application/json' |
| }); |
| saveAs(blob, `function-${_function.id}-export-${Date.now()}.json`); |
| } |
| }; |
| |
| const deleteHandler = async (func) => { |
| const res = await deleteFunctionById(localStorage.token, func.id).catch((error) => { |
| toast.error(`${error}`); |
| return null; |
| }); |
| |
| if (res) { |
| toast.success($i18n.t('Function deleted successfully')); |
| functions = functions.filter((f) => f.id !== func.id); |
| |
| _functions.set(await getFunctions(localStorage.token)); |
| models.set( |
| await getModels( |
| localStorage.token, |
| $config?.features?.enable_direct_connections && ($settings?.directConnections ?? null), |
| false, |
| true |
| ) |
| ); |
| } |
| }; |
| |
| const toggleGlobalHandler = async (func) => { |
| const res = await toggleGlobalById(localStorage.token, func.id).catch((error) => { |
| toast.error(`${error}`); |
| }); |
| |
| if (res) { |
| if (func.is_global) { |
| func.type === 'filter' |
| ? toast.success($i18n.t('Filter is now globally enabled')) |
| : toast.success($i18n.t('Function is now globally enabled')); |
| } else { |
| func.type === 'filter' |
| ? toast.success($i18n.t('Filter is now globally disabled')) |
| : toast.success($i18n.t('Function is now globally disabled')); |
| } |
| |
| _functions.set(await getFunctions(localStorage.token)); |
| models.set( |
| await getModels( |
| localStorage.token, |
| $config?.features?.enable_direct_connections && ($settings?.directConnections ?? null), |
| false, |
| true |
| ) |
| ); |
| } |
| }; |
| |
| onMount(async () => { |
| viewOption = localStorage?.workspaceViewOption || ''; |
| functions = await getFunctionList(localStorage.token).catch((error) => { |
| toast.error(`${error}`); |
| return []; |
| }); |
| |
| await tick(); |
| loaded = true; |
| |
| const onKeyDown = (event) => { |
| if (event.key === 'Shift') { |
| shiftKey = true; |
| } |
| }; |
| |
| const onKeyUp = (event) => { |
| if (event.key === 'Shift') { |
| shiftKey = false; |
| } |
| }; |
| |
| const onBlur = () => { |
| shiftKey = false; |
| }; |
| |
| window.addEventListener('keydown', onKeyDown); |
| window.addEventListener('keyup', onKeyUp); |
| window.addEventListener('blur', onBlur); |
| |
| return () => { |
| window.removeEventListener('keydown', onKeyDown); |
| window.removeEventListener('keyup', onKeyUp); |
| window.removeEventListener('blur', onBlur); |
| }; |
| }); |
| |
| onDestroy(() => { |
| clearTimeout(searchDebounceTimer); |
| }); |
| </script> |
| |
| <svelte:head> |
| <title> |
| {$i18n.t('Functions')} • {$WEBUI_NAME} |
| </title> |
| </svelte:head> |
| |
| <ImportModal |
| bind:show={showImportModal} |
| loadUrlHandler={async (url) => { |
| return await loadFunctionByUrl(localStorage.token, url); |
| }} |
| onImport={(func) => { |
| sessionStorage.function = JSON.stringify({ |
| ...func |
| }); |
| goto('/admin/functions/create'); |
| }} |
| /> |
| |
| {#if loaded} |
| <div class="px-4.5 w-full"> |
| <div class="flex flex-col gap-1 px-1 mt-2.5 mb-2"> |
| <div class="flex justify-between items-center mb-1 w-full"> |
| <input |
| id="documents-import-input" |
| bind:this={functionsImportInputElement} |
| bind:files={importFiles} |
| type="file" |
| accept=".json" |
| hidden |
| on:change={() => { |
| console.log(importFiles); |
| showConfirm = true; |
| }} |
| /> |
| |
| <div class="flex justify-between items-center w-full"> |
| <div class="flex items-center md:self-center text-xl font-medium px-0.5 gap-2 shrink-0"> |
| <div> |
| {$i18n.t('Functions')} |
| </div> |
| |
| <div class="text-lg font-medium text-gray-500 dark:text-gray-500"> |
| {filteredItems.length} |
| </div> |
| </div> |
| |
| <div class="flex w-full justify-end gap-1.5"> |
| {#if $user?.role === 'admin'} |
| <button |
| class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition" |
| on:click={() => { |
| functionsImportInputElement.click(); |
| }} |
| > |
| <div class=" self-center font-medium line-clamp-1"> |
| {$i18n.t('Import')} |
| </div> |
| </button> |
| |
| {#if functions.length} |
| <button |
| class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition" |
| on:click={async () => { |
| const _functions = await exportFunctions(localStorage.token).catch((error) => { |
| toast.error(`${error}`); |
| return null; |
| }); |
| |
| if (_functions) { |
| let blob = new Blob([JSON.stringify(_functions)], { |
| type: 'application/json' |
| }); |
| saveAs(blob, `functions-export-${Date.now()}.json`); |
| } |
| }} |
| > |
| <div class=" self-center font-medium line-clamp-1"> |
| {$i18n.t('Export')} |
| </div> |
| </button> |
| {/if} |
| {/if} |
| <AddFunctionMenu |
| createHandler={() => { |
| goto('/admin/functions/create'); |
| }} |
| importFromLinkHandler={() => { |
| showImportModal = true; |
| }} |
| > |
| <div |
| class="cursor-pointer px-2 py-1.5 rounded-xl bg-black text-white dark:bg-white dark:text-black transition font-medium text-sm flex items-center" |
| > |
| <Plus className="size-3" strokeWidth="2.5" /> |
| |
| <div class=" hidden md:block md:ml-1 text-xs">{$i18n.t('New Function')}</div> |
| </div> |
| </AddFunctionMenu> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div |
| class="py-2 bg-white dark:bg-gray-900 rounded-3xl border border-gray-100/30 dark:border-gray-850/30" |
| > |
| <div class="px-3.5 flex flex-1 items-center w-full space-x-2 py-0.5 pb-2"> |
| <div class="flex flex-1"> |
| <div class=" self-center ml-1 mr-3"> |
| <Search className="size-3.5" /> |
| </div> |
| <input |
| class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent" |
| bind:value={query} |
| placeholder={$i18n.t('Search Functions')} |
| /> |
| |
| {#if query} |
| <div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent"> |
| <button |
| class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition" |
| on:click={() => { |
| query = ''; |
| }} |
| > |
| <XMark className="size-3" strokeWidth="2" /> |
| </button> |
| </div> |
| {/if} |
| </div> |
| </div> |
| |
| <div |
| class="px-3 flex w-full bg-transparent overflow-x-auto scrollbar-none" |
| on:wheel={(e) => { |
| if (e.deltaY !== 0) { |
| e.preventDefault(); |
| e.currentTarget.scrollLeft += e.deltaY; |
| } |
| }} |
| > |
| <div |
| class="flex gap-0.5 w-fit text-center text-sm rounded-full bg-transparent px-0.5 whitespace-nowrap" |
| bind:this={tagsContainerElement} |
| > |
| <ViewSelector |
| bind:value={viewOption} |
| onChange={async (value) => { |
| localStorage.workspaceViewOption = value; |
| |
| await tick(); |
| }} |
| /> |
| |
| <TagSelector |
| bind:value={selectedType} |
| items={[ |
| { value: 'pipe', label: $i18n.t('Pipe') }, |
| { value: 'filter', label: $i18n.t('Filter') }, |
| { value: 'action', label: $i18n.t('Action') } |
| ]} |
| /> |
| </div> |
| </div> |
| |
| {#if (filteredItems ?? []).length !== 0} |
| <div class="px-3 my-2 gap-1 lg:gap-2 grid lg:grid-cols-2"> |
| {#each filteredItems as func (func.id)} |
| <div |
| class=" flex space-x-4 cursor-pointer w-full px-2 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl" |
| > |
| <a |
| class=" flex flex-1 space-x-3.5 cursor-pointer w-full" |
| href={`/admin/functions/edit?id=${encodeURIComponent(func.id)}`} |
| > |
| <div class="flex items-center text-left"> |
| <div class=" flex-1 self-center pl-1"> |
| <Tooltip content={func.id} placement="top-start"> |
| <div class=" flex items-center gap-1.5"> |
| <div |
| class=" text-xs font-semibold px-1 rounded-sm uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200" |
| > |
| {func.type} |
| </div> |
| |
| <div class="line-clamp-1 text-sm"> |
| {func.name} |
| </div> |
| {#if func?.meta?.manifest?.version} |
| <div class=" text-gray-500 text-xs font-medium shrink-0"> |
| v{func?.meta?.manifest?.version ?? ''} |
| </div> |
| {/if} |
| </div> |
| </Tooltip> |
| |
| <div class="flex gap-1.5 px-1"> |
| <div class="text-xs text-gray-500 shrink-0"> |
| <Tooltip |
| content={func?.user?.email ?? $i18n.t('Deleted User')} |
| className="flex shrink-0" |
| placement="top-start" |
| > |
| {$i18n.t('By {{name}}', { |
| name: capitalizeFirstLetter( |
| func?.user?.name ?? func?.user?.email ?? $i18n.t('Deleted User') |
| ) |
| })} |
| </Tooltip> |
| </div> |
| <div class=" text-xs overflow-hidden text-ellipsis line-clamp-1"> |
| {func.meta.description} |
| </div> |
| </div> |
| </div> |
| </div> |
| </a> |
| <div class="flex flex-row gap-0.5 self-center"> |
| {#if shiftKey} |
| <Tooltip content={$i18n.t('Delete')}> |
| <button |
| class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl" |
| type="button" |
| on:click={() => { |
| deleteHandler(func); |
| }} |
| > |
| <GarbageBin /> |
| </button> |
| </Tooltip> |
| {:else} |
| {#if func?.meta?.manifest?.funding_url ?? false} |
| <Tooltip content={$i18n.t('Support')}> |
| <button |
| class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl" |
| type="button" |
| on:click={() => { |
| selectedFunction = func; |
| showManifestModal = true; |
| }} |
| > |
| <Heart /> |
| </button> |
| </Tooltip> |
| {/if} |
| |
| <Tooltip content={$i18n.t('Valves')}> |
| <button |
| class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl" |
| type="button" |
| on:click={() => { |
| selectedFunction = func; |
| showValvesModal = true; |
| }} |
| > |
| <svg |
| xmlns="http://www.w3.org/2000/svg" |
| fill="none" |
| viewBox="0 0 24 24" |
| stroke-width="1.5" |
| stroke="currentColor" |
| class="size-4" |
| > |
| <path |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" |
| /> |
| <path |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" |
| /> |
| </svg> |
| </button> |
| </Tooltip> |
| |
| <FunctionMenu |
| {func} |
| editHandler={() => { |
| goto(`/admin/functions/edit?id=${encodeURIComponent(func.id)}`); |
| }} |
| shareHandler={() => { |
| shareHandler(func); |
| }} |
| cloneHandler={() => { |
| cloneHandler(func); |
| }} |
| exportHandler={() => { |
| exportHandler(func); |
| }} |
| deleteHandler={async () => { |
| selectedFunction = func; |
| showDeleteConfirm = true; |
| }} |
| toggleGlobalHandler={() => { |
| if (['filter', 'action'].includes(func.type)) { |
| toggleGlobalHandler(func); |
| } |
| }} |
| onClose={() => {}} |
| > |
| <button |
| class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl" |
| type="button" |
| > |
| <EllipsisHorizontal className="size-5" /> |
| </button> |
| </FunctionMenu> |
| {/if} |
| |
| <div class=" self-center mx-1"> |
| <Tooltip content={func.is_active ? $i18n.t('Enabled') : $i18n.t('Disabled')}> |
| <Switch |
| bind:state={func.is_active} |
| on:change={async (e) => { |
| toggleFunctionById(localStorage.token, func.id); |
| models.set( |
| await getModels( |
| localStorage.token, |
| $config?.features?.enable_direct_connections && |
| ($settings?.directConnections ?? null), |
| false, |
| true |
| ) |
| ); |
| }} |
| /> |
| </Tooltip> |
| </div> |
| </div> |
| </div> |
| {/each} |
| </div> |
| {:else} |
| <div class=" w-full h-full flex flex-col justify-center items-center my-16 mb-24"> |
| <div class="max-w-md text-center"> |
| <div class=" text-3xl mb-3">😕</div> |
| <div class=" text-lg font-medium mb-1">{$i18n.t('No functions found')}</div> |
| <div class=" text-gray-500 text-center text-xs"> |
| {$i18n.t('Try adjusting your search or filter to find what you are looking for.')} |
| </div> |
| </div> |
| </div> |
| {/if} |
| </div> |
| |
| |
| {$i18n.t( |
| 'Admins have access to all tools at all times; users need tools assigned per model in the workspace.' |
| )} |
| |
| |
| {#if $config?.features.enable_community_sharing} |
| <div class=" my-16"> |
| <div class=" text-xl font-medium mb-1 line-clamp-1"> |
| {$i18n.t('Made by Omnichat Community')} |
| </div> |
| |
| <a |
| class=" flex cursor-pointer items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-850 w-full mb-2 px-3.5 py-1.5 rounded-xl transition" |
| href="https://omnichat.rexpro.com/functions" |
| target="_blank" |
| > |
| <div class=" self-center"> |
| <div class=" font-semibold line-clamp-1">{$i18n.t('Discover a function')}</div> |
| <div class=" text-sm line-clamp-1"> |
| {$i18n.t('Discover, download, and explore custom functions')} |
| </div> |
| </div> |
| |
| <div> |
| <div> |
| <ChevronRight /> |
| </div> |
| </div> |
| </a> |
| </div> |
| {/if} |
| </div> |
| |
| <DeleteConfirmDialog |
| bind:show={showDeleteConfirm} |
| title={$i18n.t('Delete function?')} |
| on:confirm={() => { |
| deleteHandler(selectedFunction); |
| }} |
| > |
| <div class=" text-sm text-gray-500 truncate"> |
| {$i18n.t('This will delete')} <span class=" font-semibold">{selectedFunction.name}</span>. |
| </div> |
| </DeleteConfirmDialog> |
| |
| <ManifestModal bind:show={showManifestModal} manifest={selectedFunction?.meta?.manifest ?? {}} /> |
| <ValvesModal |
| bind:show={showValvesModal} |
| type="function" |
| id={selectedFunction?.id ?? null} |
| on:save={async () => { |
| await tick(); |
| models.set( |
| await getModels( |
| localStorage.token, |
| $config?.features?.enable_direct_connections && ($settings?.directConnections ?? null), |
| false, |
| true |
| ) |
| ); |
| }} |
| /> |
| |
| <ConfirmDialog |
| bind:show={showConfirm} |
| on:confirm={() => { |
| const reader = new FileReader(); |
| reader.onload = async (event) => { |
| const _functions = JSON.parse(event.target.result); |
| console.log(_functions); |
| |
| for (let func of _functions) { |
| if ('function' in func) { |
| // Required for Community JSON import |
| func = func.function; |
| } |
| |
| const res = await createNewFunction(localStorage.token, func).catch((error) => { |
| toast.error(`${error}`); |
| return null; |
| }); |
| } |
| |
| toast.success($i18n.t('Functions imported successfully')); |
| functions = await getFunctionList(localStorage.token); |
| _functions.set(await getFunctions(localStorage.token)); |
| models.set( |
| await getModels( |
| localStorage.token, |
| $config?.features?.enable_direct_connections && ($settings?.directConnections ?? null), |
| false, |
| true |
| ) |
| ); |
| importFiles = null; |
| functionsImportInputElement.value = ''; |
| }; |
| |
| reader.readAsText(importFiles[0]); |
| }} |
| > |
| <div class="text-sm text-gray-500"> |
| <div class=" bg-yellow-500/20 text-yellow-700 dark:text-yellow-200 rounded-lg px-4 py-3"> |
| <div>{$i18n.t('Please carefully review the following warnings:')}</div> |
| |
| <ul class=" mt-1 list-disc pl-4 text-xs"> |
| <li>{$i18n.t('Functions allow arbitrary code execution.')}</li> |
| <li>{$i18n.t('Do not install functions from sources you do not fully trust.')}</li> |
| </ul> |
| </div> |
| |
| <div class="my-3"> |
| {$i18n.t( |
| 'I acknowledge that I have read and I understand the implications of my action. I am aware of the risks associated with executing arbitrary code and I have verified the trustworthiness of the source.' |
| )} |
| </div> |
| </div> |
| </ConfirmDialog> |
| {:else} |
| <div class="w-full h-full flex justify-center items-center"> |
| <Spinner className="size-5" /> |
| </div> |
| {/if} |
| |
