open-webui/src/lib/components/workspace/Tools/ToolkitEditor.svelte

139 lines
3.4 KiB
Svelte
Raw Normal View History

2024-06-11 02:30:48 +00:00
<script>
2024-06-11 05:16:49 +00:00
import { getContext, createEventDispatcher, onMount } from 'svelte';
2024-06-11 02:30:48 +00:00
const i18n = getContext('i18n');
import CodeEditor from './CodeEditor.svelte';
import { goto } from '$app/navigation';
2024-06-11 03:58:47 +00:00
const dispatch = createEventDispatcher();
2024-06-11 04:33:46 +00:00
let formElement = null;
2024-06-11 02:30:48 +00:00
let loading = false;
2024-06-11 04:33:46 +00:00
export let edit = false;
2024-06-11 05:16:49 +00:00
export let clone = false;
2024-06-11 04:33:46 +00:00
export let id = '';
export let name = '';
export let meta = {
2024-06-11 02:30:48 +00:00
description: ''
};
2024-06-11 04:33:46 +00:00
export let content = '';
2024-06-11 02:30:48 +00:00
2024-06-11 05:16:49 +00:00
$: if (name && !edit && !clone) {
2024-06-11 02:30:48 +00:00
id = name.replace(/\s+/g, '_').toLowerCase();
}
let codeEditor;
const saveHandler = async () => {
loading = true;
2024-06-11 03:58:47 +00:00
dispatch('save', {
id,
name,
meta,
content
});
2024-06-11 02:30:48 +00:00
};
const submitHandler = async () => {
if (codeEditor) {
const res = await codeEditor.formatHandler();
if (res) {
console.log('Code formatted successfully');
saveHandler();
}
}
};
</script>
<div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
<div class="mx-auto w-full md:px-0 h-full">
2024-06-11 03:58:47 +00:00
<form
2024-06-11 04:33:46 +00:00
bind:this={formElement}
2024-06-11 03:58:47 +00:00
class=" flex flex-col max-h-[100dvh] h-full"
on:submit|preventDefault={() => {
submitHandler();
}}
>
2024-06-11 02:30:48 +00:00
<div class="mb-2.5">
<button
class="flex space-x-1"
on:click={() => {
goto('/workspace/tools');
}}
2024-06-11 04:33:46 +00:00
type="button"
2024-06-11 02:30:48 +00:00
>
<div class=" self-center">
<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="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
</button>
</div>
<div class="flex flex-col flex-1 overflow-auto h-0 rounded-lg">
<div class="w-full mb-2 flex flex-col gap-1.5">
<div class="flex gap-2 w-full">
<input
class="w-full px-3 py-2 text-sm font-medium bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none"
type="text"
placeholder="Toolkit Name (e.g. My ToolKit)"
bind:value={name}
required
/>
<input
2024-06-11 04:47:25 +00:00
class="w-full px-3 py-2 text-sm font-medium disabled:text-gray-300 dark:disabled:text-gray-700 bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none"
2024-06-11 02:30:48 +00:00
type="text"
placeholder="Toolkit ID (e.g. my_toolkit)"
bind:value={id}
required
2024-06-11 04:33:46 +00:00
disabled={edit}
2024-06-11 02:30:48 +00:00
/>
</div>
<input
class="w-full px-3 py-2 text-sm font-medium bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none"
type="text"
placeholder="Toolkit Description (e.g. A toolkit for performing various operations)"
bind:value={meta.description}
required
/>
</div>
<div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">
2024-06-11 03:58:47 +00:00
<CodeEditor
bind:value={content}
bind:this={codeEditor}
on:save={() => {
2024-06-11 04:33:46 +00:00
if (formElement) {
formElement.requestSubmit();
}
2024-06-11 03:58:47 +00:00
}}
/>
2024-06-11 02:30:48 +00:00
</div>
<div class="pb-3 flex justify-end">
<button
class="px-3 py-1.5 text-sm font-medium bg-emerald-600 hover:bg-emerald-700 text-gray-50 transition rounded-lg"
>
{$i18n.t('Save')}
</button>
</div>
</div>
2024-06-11 03:58:47 +00:00
</form>
2024-06-11 02:30:48 +00:00
</div>
</div>