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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
10
	import { goto } from '$app/navigation';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
11
12
13
14
15
16
17
	import {
		createNewTool,
		deleteToolById,
		exportTools,
		getToolById,
		getTools
	} from '$lib/apis/tools';
Timothy J. Baek's avatar
Timothy J. Baek committed
18
19
	import ArrowDownTray from '../icons/ArrowDownTray.svelte';
	import Tooltip from '../common/Tooltip.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
20
	import ConfirmDialog from '../common/ConfirmDialog.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
21
22
	import ToolMenu from './Tools/ToolMenu.svelte';
	import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
23
24
25
	import ValvesModal from './common/ValvesModal.svelte';
	import ManifestModal from './common/ManifestModal.svelte';
	import Heart from '../icons/Heart.svelte';
26
	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
27

Timothy J. Baek's avatar
Timothy J. Baek committed
28
	const i18n = getContext('i18n');
Timothy J. Baek's avatar
Timothy J. Baek committed
29
30
31
32

	let toolsImportInputElement: HTMLInputElement;
	let importFiles;

Timothy J. Baek's avatar
Timothy J. Baek committed
33
	let showConfirm = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
34
	let query = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
35

Timothy J. Baek's avatar
Timothy J. Baek committed
36
	let showManifestModal = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
37
38
39
	let showValvesModal = false;
	let selectedTool = null;

40
41
42
	let showDeleteConfirm = false;
	let deleteTool = null;

Timothy J. Baek's avatar
Timothy J. Baek committed
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
	const shareHandler = async (tool) => {
		console.log(tool);
	};

	const cloneHandler = async (tool) => {
		const _tool = await getToolById(localStorage.token, tool.id).catch((error) => {
			toast.error(error);
			return null;
		});

		if (_tool) {
			sessionStorage.tool = JSON.stringify({
				..._tool,
				id: `${_tool.id}_clone`,
				name: `${_tool.name} (Clone)`
			});
			goto('/workspace/tools/create');
		}
	};

	const exportHandler = async (tool) => {
		const _tool = await getToolById(localStorage.token, tool.id).catch((error) => {
			toast.error(error);
			return null;
		});

		if (_tool) {
			let blob = new Blob([JSON.stringify([_tool])], {
				type: 'application/json'
			});
			saveAs(blob, `tool-${_tool.id}-export-${Date.now()}.json`);
		}
	};

	const deleteHandler = async (tool) => {
		const res = await deleteToolById(localStorage.token, tool.id).catch((error) => {
			toast.error(error);
			return null;
		});

		if (res) {
SimonOriginal's avatar
SimonOriginal committed
84
			toast.success($i18n.t('Tool deleted successfully'));
Timothy J. Baek's avatar
Timothy J. Baek committed
85
86
87
			tools.set(await getTools(localStorage.token));
		}
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
88
89
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
90
91
92
93
94
<svelte:head>
	<title>
		{$i18n.t('Tools')} | {$WEBUI_NAME}
	</title>
</svelte:head>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
95

Timothy J. Baek's avatar
Timothy J. Baek committed
96
97
98
<div class="mb-3 flex justify-between items-center">
	<div class=" text-lg font-semibold self-center">{$i18n.t('Tools')}</div>
</div>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
99

Timothy J. Baek's avatar
Timothy J. Baek committed
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<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>
Timothy J. Baek's avatar
Timothy J. Baek committed
115
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
		<input
			class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
			bind:value={query}
			placeholder={$i18n.t('Search Tools')}
		/>
	</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"
			href="/workspace/tools/create"
		>
			<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>
Timothy J. Baek's avatar
Timothy J. Baek committed
139
140
	</div>
</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
141
<hr class=" dark:border-gray-850 my-2.5" />
Timothy J. Baek's avatar
Timothy J. Baek committed
142
143

<div class="my-3 mb-5">
Timothy J. Baek's avatar
Timothy J. Baek committed
144
145
146
	{#each $tools.filter((t) => query === '' || t.name
				.toLowerCase()
				.includes(query.toLowerCase()) || t.id.toLowerCase().includes(query.toLowerCase())) as tool}
Timothy J. Baek's avatar
Timothy J. Baek committed
147
		<div
Timothy J. Baek's avatar
Timothy J. Baek committed
148
149
			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
150
151
152
153
154
			<a
				class=" flex flex-1 space-x-3.5 cursor-pointer w-full"
				href={`/workspace/tools/edit?id=${encodeURIComponent(tool.id)}`}
			>
				<div class="flex items-center text-left">
Timothy J. Baek's avatar
Timothy J. Baek committed
155
					<div class=" flex-1 self-center pl-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
156
						<div class=" font-semibold flex items-center gap-1.5">
Timothy J. Baek's avatar
Timothy J. Baek committed
157
158
159
160
161
162
							<div
								class=" text-xs font-black px-1 rounded uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
							>
								TOOL
							</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
163
164
165
166
167
168
169
170
							{#if tool?.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{tool?.meta?.manifest?.version ?? ''}
								</div>
							{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
171
							<div class="line-clamp-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
172
173
174
								{tool.name}
							</div>
						</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
175
176

						<div class="flex gap-1.5 px-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
177
							<div class=" text-gray-500 text-xs font-medium flex-shrink-0">{tool.id}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
178
179
180
181

							<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
								{tool.meta.description}
							</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
182
183
						</div>
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
184
185
				</div>
			</a>
Timothy J. Baek's avatar
Timothy J. Baek committed
186
			<div class="flex flex-row gap-0.5 self-center">
Timothy J. Baek's avatar
Timothy J. Baek committed
187
				{#if tool?.meta?.manifest?.funding_url ?? false}
Timothy J. Baek's avatar
Timothy J. Baek committed
188
					<Tooltip content="Support">
Timothy J. Baek's avatar
Timothy J. Baek committed
189
190
191
192
193
194
195
196
197
198
199
200
201
						<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={() => {
								selectedTool = tool;
								showManifestModal = true;
							}}
						>
							<Heart />
						</button>
					</Tooltip>
				{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
202
203
				<Tooltip content="Valves">
					<button
Timothy J. Baek's avatar
Timothy J. Baek committed
204
205
						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
206
207
208
209
						on:click={() => {
							selectedTool = tool;
							showValvesModal = true;
						}}
Timothy J. Baek's avatar
Timothy J. Baek committed
210
					>
Timothy J. Baek's avatar
Timothy J. Baek committed
211
212
213
214
215
216
						<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
217
							class="size-4"
Timothy J. Baek's avatar
Timothy J. Baek committed
218
219
220
221
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
Timothy J. Baek's avatar
Timothy J. Baek committed
222
223
224
225
226
227
								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
228
229
							/>
						</svg>
Timothy J. Baek's avatar
Timothy J. Baek committed
230
					</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
231
				</Tooltip>
Timothy J. Baek's avatar
Timothy J. Baek committed
232

Timothy J. Baek's avatar
Timothy J. Baek committed
233
				<ToolMenu
Timothy J. Baek's avatar
Timothy J. Baek committed
234
235
236
					editHandler={() => {
						goto(`/workspace/tools/edit?id=${encodeURIComponent(tool.id)}`);
					}}
Timothy J. Baek's avatar
Timothy J. Baek committed
237
238
239
240
241
242
243
244
245
246
					shareHandler={() => {
						shareHandler(tool);
					}}
					cloneHandler={() => {
						cloneHandler(tool);
					}}
					exportHandler={() => {
						exportHandler(tool);
					}}
					deleteHandler={async () => {
247
248
						deleteTool = tool;
						showDeleteConfirm = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
249
250
251
					}}
					onClose={() => {}}
				>
Timothy J. Baek's avatar
Timothy J. Baek committed
252
					<button
Timothy J. Baek's avatar
Timothy J. Baek committed
253
						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
254
						type="button"
Timothy J. Baek's avatar
Timothy J. Baek committed
255
					>
Timothy J. Baek's avatar
Timothy J. Baek committed
256
						<EllipsisHorizontal className="size-5" />
Timothy J. Baek's avatar
Timothy J. Baek committed
257
					</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
258
				</ToolMenu>
Timothy J. Baek's avatar
Timothy J. Baek committed
259
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
260
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
261
262
263
	{/each}
</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
264
265
<div class=" text-gray-500 text-xs mt-1 mb-2">
	ⓘ {$i18n.t(
Timothy J. Baek's avatar
Timothy J. Baek committed
266
		'Admins have access to all tools at all times; users need tools assigned per model in the workspace.'
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
267
268
269
	)}
</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
270
271
272
273
274
275
276
277
278
279
280
<div class=" flex justify-end w-full mb-2">
	<div class="flex space-x-2">
		<input
			id="documents-import-input"
			bind:this={toolsImportInputElement}
			bind:files={importFiles}
			type="file"
			accept=".json"
			hidden
			on:change={() => {
				console.log(importFiles);
Timothy J. Baek's avatar
Timothy J. Baek committed
281
				showConfirm = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
282
283
284
285
286
287
288
289
290
			}}
		/>

		<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={() => {
				toolsImportInputElement.click();
			}}
		>
Timothy J. Baek's avatar
Timothy J. Baek committed
291
			<div class=" self-center mr-2 font-medium line-clamp-1">{$i18n.t('Import Tools')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311

			<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
312
313
314
				const _tools = await exportTools(localStorage.token).catch((error) => {
					toast.error(error);
					return null;
Timothy J. Baek's avatar
Timothy J. Baek committed
315
				});
Timothy J. Baek's avatar
Timothy J. Baek committed
316
317
318
319
320
321
322

				if (_tools) {
					let blob = new Blob([JSON.stringify(_tools)], {
						type: 'application/json'
					});
					saveAs(blob, `tools-export-${Date.now()}.json`);
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
323
324
			}}
		>
Timothy J. Baek's avatar
Timothy J. Baek committed
325
			<div class=" self-center mr-2 font-medium line-clamp-1">{$i18n.t('Export Tools')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343

			<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
344

Timothy J. Baek's avatar
Timothy J. Baek committed
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
<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"
		href="https://openwebui.com/"
		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 tool')}</div>
			<div class=" text-sm line-clamp-1">
				{$i18n.t('Discover, download, and explore custom tools')}
			</div>
		</div>
	</a>
</div>

378
379
380
381
382
383
384
385
386
387
388
389
<DeleteConfirmDialog
	bind:show={showDeleteConfirm}
	title={$i18n.t('Delete tool?')}
	on:confirm={() => {
		deleteHandler(deleteTool);
	}}
>
	<div class=" text-sm text-gray-500">
		{$i18n.t('This will delete')} <span class="  font-semibold">{deleteTool.name}</span>.
	</div>
</DeleteConfirmDialog>

Timothy J. Baek's avatar
Timothy J. Baek committed
390
<ValvesModal bind:show={showValvesModal} type="tool" id={selectedTool?.id ?? null} />
Timothy J. Baek's avatar
Timothy J. Baek committed
391
<ManifestModal bind:show={showManifestModal} manifest={selectedTool?.meta?.manifest ?? {}} />
Timothy J. Baek's avatar
Timothy J. Baek committed
392

Timothy J. Baek's avatar
Timothy J. Baek committed
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
<ConfirmDialog
	bind:show={showConfirm}
	on:confirm={() => {
		const reader = new FileReader();
		reader.onload = async (event) => {
			const _tools = JSON.parse(event.target.result);
			console.log(_tools);

			for (const tool of _tools) {
				const res = await createNewTool(localStorage.token, tool).catch((error) => {
					toast.error(error);
					return null;
				});
			}

SimonOriginal's avatar
SimonOriginal committed
408
			toast.success($i18n.t('Tool imported successfully'));
Timothy J. Baek's avatar
Timothy J. Baek committed
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
			tools.set(await getTools(localStorage.token));
		};

		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">
				<li>Tools have a function calling system that allows arbitrary code execution.</li>
				<li>Do not install tools from sources you do not fully trust.</li>
			</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>