Functions.svelte 15.3 KB
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
2
3
4
5
<script lang="ts">
	import { toast } from 'svelte-sonner';
	import fileSaver from 'file-saver';
	const { saveAs } = fileSaver;

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
6
	import { WEBUI_NAME, functions, models } from '$lib/stores';
Timothy J. Baek's avatar
Timothy J. Baek committed
7
	import { onMount, getContext, tick } from 'svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
8
9
10
11
	import { createNewPrompt, deletePromptByCommand, getPrompts } from '$lib/apis/prompts';

	import { goto } from '$app/navigation';
	import {
Timothy J. Baek's avatar
Timothy J. Baek committed
12
13
14
15
		createNewFunction,
		deleteFunctionById,
		exportFunctions,
		getFunctionById,
16
		getFunctions,
Timothy J. Baek's avatar
Timothy J. Baek committed
17
18
		toggleFunctionById,
		toggleGlobalById
Timothy J. Baek's avatar
Timothy J. Baek committed
19
20
	} from '$lib/apis/functions';

Timothy J. Baek's avatar
Timothy J. Baek committed
21
22
23
	import ArrowDownTray from '../icons/ArrowDownTray.svelte';
	import Tooltip from '../common/Tooltip.svelte';
	import ConfirmDialog from '../common/ConfirmDialog.svelte';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
24
	import { getModels } from '$lib/apis';
Timothy J. Baek's avatar
Timothy J. Baek committed
25
26
	import FunctionMenu from './Functions/FunctionMenu.svelte';
	import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
27
	import Switch from '../common/Switch.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
28
29
30
	import ValvesModal from './common/ValvesModal.svelte';
	import ManifestModal from './common/ManifestModal.svelte';
	import Heart from '../icons/Heart.svelte';
31
	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
32
33
34

	const i18n = getContext('i18n');

Timothy J. Baek's avatar
Timothy J. Baek committed
35
	let functionsImportInputElement: HTMLInputElement;
Timothy J. Baek's avatar
Timothy J. Baek committed
36
37
38
39
	let importFiles;

	let showConfirm = false;
	let query = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
40

Timothy J. Baek's avatar
Timothy J. Baek committed
41
	let showManifestModal = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
42
43
44
	let showValvesModal = false;
	let selectedFunction = null;

45
46
	let showDeleteConfirm = false;

Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
47
48
49
50
51
52
	const shareHandler = async (func) => {
		const item = await getFunctionById(localStorage.token, func.id).catch((error) => {
			toast.error(error);
			return null;
		});

53
54
55
56
		toast.success($i18n.t('Redirecting you to OpenWebUI Community'));

		const url = 'https://openwebui.com';

Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
57
		const tab = await window.open(`${url}/functions/create`, '_blank');
58
59
60
61
62
63
64
65
66
67
68
69
70
71

		// 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);
Timothy J. Baek's avatar
Timothy J. Baek committed
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
	};

	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} (Clone)`
			});
			goto('/workspace/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) {
SimonOriginal's avatar
SimonOriginal committed
111
			toast.success($i18n.t('Function deleted successfully'));
Timothy J. Baek's avatar
Timothy J. Baek committed
112
113
114
115
116

			functions.set(await getFunctions(localStorage.token));
			models.set(await getModels(localStorage.token));
		}
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

	const toggleGlobalHandler = async (func) => {
		const res = await toggleGlobalById(localStorage.token, func.id).catch((error) => {
			toast.error(error);
		});

		if (res) {
			if (func.is_global) {
				toast.success($i18n.t('Filter is now globally enabled'));
			} else {
				toast.success($i18n.t('Filter is now globally disabled'));
			}

			functions.set(await getFunctions(localStorage.token));
		}
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
</script>

<svelte:head>
	<title>
		{$i18n.t('Functions')} | {$WEBUI_NAME}
	</title>
</svelte:head>

<div class="mb-3 flex justify-between items-center">
	<div class=" text-lg font-semibold self-center">{$i18n.t('Functions')}</div>
</div>

<div class=" flex w-full space-x-2">
	<div class="flex flex-1">
		<div class=" self-center ml-1 mr-3">
			<svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 20 20"
				fill="currentColor"
				class="w-4 h-4"
			>
				<path
					fill-rule="evenodd"
					d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
					clip-rule="evenodd"
				/>
			</svg>
		</div>
		<input
			class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
			bind:value={query}
			placeholder={$i18n.t('Search Functions')}
		/>
	</div>

	<div>
		<a
			class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
171
			href="/workspace/functions/create"
Timothy J. Baek's avatar
Timothy J. Baek committed
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
		>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 16 16"
				fill="currentColor"
				class="w-4 h-4"
			>
				<path
					d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
				/>
			</svg>
		</a>
	</div>
</div>
<hr class=" dark:border-gray-850 my-2.5" />

<div class="my-3 mb-5">
Timothy J. Baek's avatar
Timothy J. Baek committed
189
	{#each $functions.filter((f) => query === '' || f.name
Timothy J. Baek's avatar
Timothy J. Baek committed
190
				.toLowerCase()
Timothy J. Baek's avatar
Timothy J. Baek committed
191
				.includes(query.toLowerCase()) || f.id.toLowerCase().includes(query.toLowerCase())) as func}
Timothy J. Baek's avatar
Timothy J. Baek committed
192
		<div
Timothy J. Baek's avatar
Timothy J. Baek committed
193
194
			class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl"
		>
Timothy J. Baek's avatar
Timothy J. Baek committed
195
196
197
198
199
			<a
				class=" flex flex-1 space-x-3.5 cursor-pointer w-full"
				href={`/workspace/functions/edit?id=${encodeURIComponent(func.id)}`}
			>
				<div class="flex items-center text-left">
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
200
					<div class=" flex-1 self-center pl-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
201
						<div class=" font-semibold flex items-center gap-1.5">
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
202
203
204
205
206
207
							<div
								class=" text-xs font-black px-1 rounded uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
							>
								{func.type}
							</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
208
209
210
211
212
213
214
215
							{#if func?.meta?.manifest?.version}
								<div
									class="text-xs font-black px-1 rounded line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
								>
									v{func?.meta?.manifest?.version ?? ''}
								</div>
							{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
216
							<div class=" line-clamp-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
217
								{func.name}
Timothy J. Baek's avatar
Timothy J. Baek committed
218
219
							</div>
						</div>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
220
221

						<div class="flex gap-1.5 px-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
222
							<div class=" text-gray-500 text-xs font-medium flex-shrink-0">{func.id}</div>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
223
224
225
226

							<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
								{func.meta.description}
							</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
227
228
						</div>
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
229
230
				</div>
			</a>
Timothy J. Baek's avatar
Timothy J. Baek committed
231
			<div class="flex flex-row gap-0.5 self-center">
Timothy J. Baek's avatar
Timothy J. Baek committed
232
				{#if func?.meta?.manifest?.funding_url ?? false}
Timothy J. Baek's avatar
Timothy J. Baek committed
233
					<Tooltip content="Support">
Timothy J. Baek's avatar
Timothy J. Baek committed
234
235
236
237
238
239
240
241
242
243
244
245
246
						<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}

Timothy J. Baek's avatar
Timothy J. Baek committed
247
248
				<Tooltip content="Valves">
					<button
Timothy J. Baek's avatar
Timothy J. Baek committed
249
250
						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"
Timothy J. Baek's avatar
Timothy J. Baek committed
251
252
253
254
						on:click={() => {
							selectedFunction = func;
							showValvesModal = true;
						}}
Timothy J. Baek's avatar
Timothy J. Baek committed
255
256
257
258
259
260
261
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							fill="none"
							viewBox="0 0 24 24"
							stroke-width="1.5"
							stroke="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
262
							class="size-4"
Timothy J. Baek's avatar
Timothy J. Baek committed
263
264
265
266
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
Timothy J. Baek's avatar
Timothy J. Baek committed
267
268
269
270
271
272
								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"
Timothy J. Baek's avatar
Timothy J. Baek committed
273
274
							/>
						</svg>
Timothy J. Baek's avatar
Timothy J. Baek committed
275
					</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
276
277
				</Tooltip>

Timothy J. Baek's avatar
Timothy J. Baek committed
278
				<FunctionMenu
Timothy J. Baek's avatar
Timothy J. Baek committed
279
					{func}
Timothy J. Baek's avatar
Timothy J. Baek committed
280
281
282
					editHandler={() => {
						goto(`/workspace/functions/edit?id=${encodeURIComponent(func.id)}`);
					}}
Timothy J. Baek's avatar
Timothy J. Baek committed
283
284
285
286
287
288
289
290
291
					shareHandler={() => {
						shareHandler(func);
					}}
					cloneHandler={() => {
						cloneHandler(func);
					}}
					exportHandler={() => {
						exportHandler(func);
					}}
292
293
					deleteHandler={async () => {
						selectedFunction = func;
294
						showDeleteConfirm = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
295
					}}
Timothy J. Baek's avatar
Timothy J. Baek committed
296
297
298
299
300
					toggleGlobalHandler={() => {
						if (func.type === 'filter') {
							toggleGlobalHandler(func);
						}
					}}
Timothy J. Baek's avatar
Timothy J. Baek committed
301
302
					onClose={() => {}}
				>
Timothy J. Baek's avatar
Timothy J. Baek committed
303
					<button
Timothy J. Baek's avatar
Timothy J. Baek committed
304
						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"
Timothy J. Baek's avatar
Timothy J. Baek committed
305
306
						type="button"
					>
Timothy J. Baek's avatar
Timothy J. Baek committed
307
						<EllipsisHorizontal className="size-5" />
Timothy J. Baek's avatar
Timothy J. Baek committed
308
					</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
309
				</FunctionMenu>
Timothy J. Baek's avatar
Timothy J. Baek committed
310

Timothy J. Baek's avatar
Timothy J. Baek committed
311
				<div class=" self-center mx-1">
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
312
313
314
315
316
317
318
319
320
					<Tooltip content={func.is_active ? 'Enabled' : 'Disabled'}>
						<Switch
							bind:state={func.is_active}
							on:change={async (e) => {
								toggleFunctionById(localStorage.token, func.id);
								models.set(await getModels(localStorage.token));
							}}
						/>
					</Tooltip>
Timothy J. Baek's avatar
Timothy J. Baek committed
321
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
322
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
323
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
324
325
326
327
328
329
330
331
332
333
334
335
336
	{/each}
</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> -->

<div class=" flex justify-end w-full mb-2">
	<div class="flex space-x-2">
		<input
			id="documents-import-input"
Timothy J. Baek's avatar
Timothy J. Baek committed
337
			bind:this={functionsImportInputElement}
Timothy J. Baek's avatar
Timothy J. Baek committed
338
339
340
341
342
343
344
345
346
347
348
349
350
			bind:files={importFiles}
			type="file"
			accept=".json"
			hidden
			on:change={() => {
				console.log(importFiles);
				showConfirm = true;
			}}
		/>

		<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-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
			on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
351
				functionsImportInputElement.click();
Timothy J. Baek's avatar
Timothy J. Baek committed
352
353
			}}
		>
Timothy J. Baek's avatar
Timothy J. Baek committed
354
			<div class=" self-center mr-2 font-medium line-clamp-1">{$i18n.t('Import Functions')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374

			<div class=" self-center">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 16 16"
					fill="currentColor"
					class="w-4 h-4"
				>
					<path
						fill-rule="evenodd"
						d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 9.5a.75.75 0 0 1-.75-.75V8.06l-.72.72a.75.75 0 0 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72v2.69a.75.75 0 0 1-.75.75Z"
						clip-rule="evenodd"
					/>
				</svg>
			</div>
		</button>

		<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-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
			on:click={async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
375
				const _functions = await exportFunctions(localStorage.token).catch((error) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
376
377
378
379
					toast.error(error);
					return null;
				});

Timothy J. Baek's avatar
Timothy J. Baek committed
380
381
				if (_functions) {
					let blob = new Blob([JSON.stringify(_functions)], {
Timothy J. Baek's avatar
Timothy J. Baek committed
382
383
						type: 'application/json'
					});
Timothy J. Baek's avatar
Timothy J. Baek committed
384
					saveAs(blob, `functions-export-${Date.now()}.json`);
Timothy J. Baek's avatar
Timothy J. Baek committed
385
386
387
				}
			}}
		>
Timothy J. Baek's avatar
Timothy J. Baek committed
388
			<div class=" self-center mr-2 font-medium line-clamp-1">{$i18n.t('Export Functions')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407

			<div class=" self-center">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 16 16"
					fill="currentColor"
					class="w-4 h-4"
				>
					<path
						fill-rule="evenodd"
						d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 3.5a.75.75 0 0 1 .75.75v2.69l.72-.72a.75.75 0 1 1 1.06 1.06l-2 2a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 0 1 1.06-1.06l.72.72V6.25A.75.75 0 0 1 8 5.5Z"
						clip-rule="evenodd"
					/>
				</svg>
			</div>
		</button>
	</div>
</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
408
409
410
411
412
413
414
<div class=" my-16">
	<div class=" text-lg font-semibold mb-3 line-clamp-1">
		{$i18n.t('Made by OpenWebUI Community')}
	</div>

	<a
		class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2"
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
415
		href="https://openwebui.com/#open-webui-community"
Timothy J. Baek's avatar
Timothy J. Baek committed
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
		target="_blank"
	>
		<div class=" self-center w-10 flex-shrink-0">
			<div
				class="w-full h-10 flex justify-center rounded-full bg-transparent dark:bg-gray-700 border border-dashed border-gray-200"
			>
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6">
					<path
						fill-rule="evenodd"
						d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
						clip-rule="evenodd"
					/>
				</svg>
			</div>
		</div>

		<div class=" self-center">
			<div class=" font-bold 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>
	</a>
</div>

441
442
443
444
<DeleteConfirmDialog
	bind:show={showDeleteConfirm}
	title={$i18n.t('Delete function?')}
	on:confirm={() => {
445
		deleteHandler(selectedFunction);
446
447
448
	}}
>
	<div class=" text-sm text-gray-500">
449
		{$i18n.t('This will delete')} <span class="  font-semibold">{selectedFunction.name}</span>.
450
451
452
	</div>
</DeleteConfirmDialog>

Timothy J. Baek's avatar
Timothy J. Baek committed
453
<ManifestModal bind:show={showManifestModal} manifest={selectedFunction?.meta?.manifest ?? {}} />
Timothy J. Baek's avatar
Timothy J. Baek committed
454
455
456
457
458
459
460
461
462
<ValvesModal
	bind:show={showValvesModal}
	type="function"
	id={selectedFunction?.id ?? null}
	on:save={async () => {
		await tick();
		models.set(await getModels(localStorage.token));
	}}
/>
Timothy J. Baek's avatar
Timothy J. Baek committed
463

Timothy J. Baek's avatar
Timothy J. Baek committed
464
465
466
467
468
<ConfirmDialog
	bind:show={showConfirm}
	on:confirm={() => {
		const reader = new FileReader();
		reader.onload = async (event) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
469
470
			const _functions = JSON.parse(event.target.result);
			console.log(_functions);
Timothy J. Baek's avatar
Timothy J. Baek committed
471

Timothy J. Baek's avatar
Timothy J. Baek committed
472
473
			for (const func of _functions) {
				const res = await createNewFunction(localStorage.token, func).catch((error) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
474
475
476
477
478
					toast.error(error);
					return null;
				});
			}

SimonOriginal's avatar
SimonOriginal committed
479
			toast.success($i18n.t('Functions imported successfully'));
Timothy J. Baek's avatar
Timothy J. Baek committed
480
			functions.set(await getFunctions(localStorage.token));
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
481
			models.set(await getModels(localStorage.token));
Timothy J. Baek's avatar
Timothy J. Baek committed
482
483
484
485
486
487
488
489
490
491
		};

		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>Please carefully review the following warnings:</div>

			<ul class=" mt-1 list-disc pl-4 text-xs">
Timothy J. Baek's avatar
Timothy J. Baek committed
492
493
				<li>Functions allow arbitrary code execution.</li>
				<li>Do not install functions from sources you do not fully trust.</li>
Timothy J. Baek's avatar
Timothy J. Baek committed
494
495
496
497
498
499
500
501
502
503
			</ul>
		</div>

		<div class="my-3">
			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>