Tools.svelte 13.7 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
	let showDeleteConfirm = false;

42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
	const shareHandler = async (item) => {
		toast.success($i18n.t('Redirecting you to OpenWebUI Community'));

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

		const tab = await window.open(`${url}/tools/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);
Timothy J. Baek's avatar
Timothy J. Baek committed
62
63
64
65
66
67
68
69
70
71
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
	};

	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
101
			toast.success($i18n.t('Tool deleted successfully'));
Timothy J. Baek's avatar
Timothy J. Baek committed
102
103
104
			tools.set(await getTools(localStorage.token));
		}
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
105
106
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
107
108
109
110
111
<svelte:head>
	<title>
		{$i18n.t('Tools')} | {$WEBUI_NAME}
	</title>
</svelte:head>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
112

Timothy J. Baek's avatar
Timothy J. Baek committed
113
114
115
<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
116

Timothy J. Baek's avatar
Timothy J. Baek committed
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<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
132
		</div>
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
		<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
156
157
	</div>
</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
158
<hr class=" dark:border-gray-850 my-2.5" />
Timothy J. Baek's avatar
Timothy J. Baek committed
159
160

<div class="my-3 mb-5">
Timothy J. Baek's avatar
Timothy J. Baek committed
161
162
163
	{#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
164
		<div
Timothy J. Baek's avatar
Timothy J. Baek committed
165
166
			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
167
168
169
170
171
			<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
172
					<div class=" flex-1 self-center pl-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
173
						<div class=" font-semibold flex items-center gap-1.5">
Timothy J. Baek's avatar
Timothy J. Baek committed
174
175
176
177
178
179
							<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
180
181
182
183
184
185
186
187
							{#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
188
							<div class="line-clamp-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
189
190
191
								{tool.name}
							</div>
						</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
192
193

						<div class="flex gap-1.5 px-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
194
							<div class=" text-gray-500 text-xs font-medium flex-shrink-0">{tool.id}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
195
196
197
198

							<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
								{tool.meta.description}
							</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
199
200
						</div>
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
201
202
				</div>
			</a>
Timothy J. Baek's avatar
Timothy J. Baek committed
203
			<div class="flex flex-row gap-0.5 self-center">
Timothy J. Baek's avatar
Timothy J. Baek committed
204
				{#if tool?.meta?.manifest?.funding_url ?? false}
Timothy J. Baek's avatar
Timothy J. Baek committed
205
					<Tooltip content="Support">
Timothy J. Baek's avatar
Timothy J. Baek committed
206
207
208
209
210
211
212
213
214
215
216
217
218
						<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
219
220
				<Tooltip content="Valves">
					<button
Timothy J. Baek's avatar
Timothy J. Baek committed
221
222
						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
223
224
225
226
						on:click={() => {
							selectedTool = tool;
							showValvesModal = true;
						}}
Timothy J. Baek's avatar
Timothy J. Baek committed
227
					>
Timothy J. Baek's avatar
Timothy J. Baek committed
228
229
230
231
232
233
						<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
234
							class="size-4"
Timothy J. Baek's avatar
Timothy J. Baek committed
235
236
237
238
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
Timothy J. Baek's avatar
Timothy J. Baek committed
239
240
241
242
243
244
								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
245
246
							/>
						</svg>
Timothy J. Baek's avatar
Timothy J. Baek committed
247
					</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
248
				</Tooltip>
Timothy J. Baek's avatar
Timothy J. Baek committed
249

Timothy J. Baek's avatar
Timothy J. Baek committed
250
				<ToolMenu
Timothy J. Baek's avatar
Timothy J. Baek committed
251
252
253
					editHandler={() => {
						goto(`/workspace/tools/edit?id=${encodeURIComponent(tool.id)}`);
					}}
Timothy J. Baek's avatar
Timothy J. Baek committed
254
255
256
257
258
259
260
261
262
263
					shareHandler={() => {
						shareHandler(tool);
					}}
					cloneHandler={() => {
						cloneHandler(tool);
					}}
					exportHandler={() => {
						exportHandler(tool);
					}}
					deleteHandler={async () => {
264
						selectedTool = tool;
265
						showDeleteConfirm = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
266
267
268
					}}
					onClose={() => {}}
				>
Timothy J. Baek's avatar
Timothy J. Baek committed
269
					<button
Timothy J. Baek's avatar
Timothy J. Baek committed
270
						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
271
						type="button"
Timothy J. Baek's avatar
Timothy J. Baek committed
272
					>
Timothy J. Baek's avatar
Timothy J. Baek committed
273
						<EllipsisHorizontal className="size-5" />
Timothy J. Baek's avatar
Timothy J. Baek committed
274
					</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
275
				</ToolMenu>
Timothy J. Baek's avatar
Timothy J. Baek committed
276
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
277
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
278
279
280
	{/each}
</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
281
282
<div class=" text-gray-500 text-xs mt-1 mb-2">
	ⓘ {$i18n.t(
Timothy J. Baek's avatar
Timothy J. Baek committed
283
		'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
284
285
286
	)}
</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
287
288
289
290
291
292
293
294
295
296
297
<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
298
				showConfirm = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
299
300
301
302
303
304
305
306
307
			}}
		/>

		<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
308
			<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
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328

			<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
329
330
331
				const _tools = await exportTools(localStorage.token).catch((error) => {
					toast.error(error);
					return null;
Timothy J. Baek's avatar
Timothy J. Baek committed
332
				});
Timothy J. Baek's avatar
Timothy J. Baek committed
333
334
335
336
337
338
339

				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
340
341
			}}
		>
Timothy J. Baek's avatar
Timothy J. Baek committed
342
			<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
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360

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

Timothy J. Baek's avatar
Timothy J. Baek committed
362
363
364
365
366
367
368
<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
369
		href="https://openwebui.com/#open-webui-community"
Timothy J. Baek's avatar
Timothy J. Baek committed
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
		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>

395
396
397
398
<DeleteConfirmDialog
	bind:show={showDeleteConfirm}
	title={$i18n.t('Delete tool?')}
	on:confirm={() => {
399
		deleteHandler(selectedTool);
400
401
402
	}}
>
	<div class=" text-sm text-gray-500">
403
		{$i18n.t('This will delete')} <span class="  font-semibold">{selectedTool.name}</span>.
404
405
406
	</div>
</DeleteConfirmDialog>

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

Timothy J. Baek's avatar
Timothy J. Baek committed
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
<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
425
			toast.success($i18n.t('Tool imported successfully'));
Timothy J. Baek's avatar
Timothy J. Baek committed
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
			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>