src/lib/components/admin/Functions.svelte

<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 Open WebUI Community'));

		const url = 'https://openwebui.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-sm', onBlur);

		return () => {
			window.removeEventListener('keydown', onKeyDown);
			window.removeEventListener('keyup', onKeyUp);
			window.removeEventListener('blur-sm', 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=" 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>

		<!-- <div class=" text-gray-500 text-xs mt-1 mb-2">
	ⓘ {$i18n.t(
		'Admins have access to all tools at all times; users need tools assigned per model in the workspace.'
	)}
</div> -->

		{#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 Open WebUI 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://openwebui.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.set(await getFunctions(localStorage.token));
				models.set(
					await getModels(
						localStorage.token,
						$config?.features?.enable_direct_connections && ($settings?.directConnections ?? null),
						false,
						true
					)
				);
			};

			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}