Tools.svelte 11.5 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
refac  
Timothy J. Baek committed
23

Timothy J. Baek's avatar
Timothy J. Baek committed
24
	const i18n = getContext('i18n');
Timothy J. Baek's avatar
Timothy J. Baek committed
25
26
27
28

	let toolsImportInputElement: HTMLInputElement;
	let importFiles;

Timothy J. Baek's avatar
Timothy J. Baek committed
29
	let showConfirm = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
30
	let query = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
31
32
33
34
35
36
37
38
39
40
41
42
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

	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) {
			toast.success('Tool deleted successfully');
			tools.set(await getTools(localStorage.token));
		}
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
77
78
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
79
80
81
82
83
<svelte:head>
	<title>
		{$i18n.t('Tools')} | {$WEBUI_NAME}
	</title>
</svelte:head>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
84

Timothy J. Baek's avatar
Timothy J. Baek committed
85
86
87
<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
88

Timothy J. Baek's avatar
Timothy J. Baek committed
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<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
104
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
		<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
128
129
	</div>
</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
130
<hr class=" dark:border-gray-850 my-2.5" />
Timothy J. Baek's avatar
Timothy J. Baek committed
131
132

<div class="my-3 mb-5">
Timothy J. Baek's avatar
Timothy J. Baek committed
133
134
135
	{#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
136
		<div
Timothy J. Baek's avatar
Timothy J. Baek committed
137
138
			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
139
140
141
142
143
			<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
144
					<div class=" flex-1 self-center pl-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
145
						<div class=" font-semibold flex items-center gap-1.5">
Timothy J. Baek's avatar
Timothy J. Baek committed
146
147
148
149
150
151
							<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
152
							<div class="line-clamp-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
153
154
155
								{tool.name}
							</div>
						</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
156
157

						<div class="flex gap-1.5 px-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
158
							<div class=" text-gray-500 text-xs font-medium flex-shrink-0">{tool.id}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
159
160
161
162

							<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
								{tool.meta.description}
							</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
163
164
						</div>
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
165
166
				</div>
			</a>
Timothy J. Baek's avatar
Timothy J. Baek committed
167
			<div class="flex flex-row gap-0.5 self-center">
Timothy J. Baek's avatar
Timothy J. Baek committed
168
169
				<Tooltip content="Valves">
					<button
Timothy J. Baek's avatar
Timothy J. Baek committed
170
171
						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
172
					>
Timothy J. Baek's avatar
Timothy J. Baek committed
173
174
175
176
177
178
						<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
179
							class="size-4"
Timothy J. Baek's avatar
Timothy J. Baek committed
180
181
182
183
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
Timothy J. Baek's avatar
Timothy J. Baek committed
184
185
186
187
188
189
								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
190
191
							/>
						</svg>
Timothy J. Baek's avatar
Timothy J. Baek committed
192
					</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
193
				</Tooltip>
Timothy J. Baek's avatar
Timothy J. Baek committed
194

Timothy J. Baek's avatar
Timothy J. Baek committed
195
				<ToolMenu
Timothy J. Baek's avatar
Timothy J. Baek committed
196
197
198
					editHandler={() => {
						goto(`/workspace/tools/edit?id=${encodeURIComponent(tool.id)}`);
					}}
Timothy J. Baek's avatar
Timothy J. Baek committed
199
200
201
202
203
204
205
206
207
208
209
210
211
212
					shareHandler={() => {
						shareHandler(tool);
					}}
					cloneHandler={() => {
						cloneHandler(tool);
					}}
					exportHandler={() => {
						exportHandler(tool);
					}}
					deleteHandler={async () => {
						deleteHandler(tool);
					}}
					onClose={() => {}}
				>
Timothy J. Baek's avatar
Timothy J. Baek committed
213
					<button
Timothy J. Baek's avatar
Timothy J. Baek committed
214
						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
215
						type="button"
Timothy J. Baek's avatar
Timothy J. Baek committed
216
					>
Timothy J. Baek's avatar
Timothy J. Baek committed
217
						<EllipsisHorizontal className="size-5" />
Timothy J. Baek's avatar
Timothy J. Baek committed
218
					</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
219
				</ToolMenu>
Timothy J. Baek's avatar
Timothy J. Baek committed
220
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
221
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
222
223
224
	{/each}
</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
225
226
<div class=" text-gray-500 text-xs mt-1 mb-2">
	ⓘ {$i18n.t(
Timothy J. Baek's avatar
Timothy J. Baek committed
227
		'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
228
229
230
	)}
</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
231
232
233
234
235
236
237
238
239
240
241
<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
242
				showConfirm = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
243
244
245
246
247
248
249
250
251
			}}
		/>

		<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
252
			<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
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272

			<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
273
274
275
				const _tools = await exportTools(localStorage.token).catch((error) => {
					toast.error(error);
					return null;
Timothy J. Baek's avatar
Timothy J. Baek committed
276
				});
Timothy J. Baek's avatar
Timothy J. Baek committed
277
278
279
280
281
282
283

				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
284
285
			}}
		>
Timothy J. Baek's avatar
Timothy J. Baek committed
286
			<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
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304

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

Timothy J. Baek's avatar
Timothy J. Baek committed
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
<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>

Timothy J. Baek's avatar
Timothy J. Baek committed
339
340
341
342
343
344
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
<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;
				});
			}

			toast.success('Tool imported successfully');
			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>