mirror of
https://github.com/open-webui/open-webui
synced 2024-11-17 22:12:51 +00:00
refac: tools
This commit is contained in:
Timothy J. Baek
parent
adea3af8d7
commit
c4629c8c2d
@ -1,86 +1,67 @@
|
|||||||
<script>
|
<script lang="ts">
|
||||||
import { getContext } from 'svelte';
|
import { toast } from 'svelte-sonner';
|
||||||
|
import fileSaver from 'file-saver';
|
||||||
|
const { saveAs } = fileSaver;
|
||||||
|
|
||||||
|
import { onMount, getContext } from 'svelte';
|
||||||
|
import { WEBUI_NAME, prompts } from '$lib/stores';
|
||||||
|
import { createNewPrompt, deletePromptByCommand, getPrompts } from '$lib/apis/prompts';
|
||||||
|
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
|
||||||
const i18n = getContext('i18n');
|
const i18n = getContext('i18n');
|
||||||
|
let query = '';
|
||||||
import CodeEditor from './Tools/CodeEditor.svelte';
|
|
||||||
|
|
||||||
let loading = false;
|
|
||||||
|
|
||||||
let name = '';
|
|
||||||
let id = '';
|
|
||||||
|
|
||||||
$: if (name) {
|
|
||||||
id = name.replace(/\s+/g, '_').toLowerCase();
|
|
||||||
}
|
|
||||||
|
|
||||||
let codeEditor;
|
|
||||||
|
|
||||||
const saveHandler = async () => {
|
|
||||||
loading = true;
|
|
||||||
// Call the API to save the toolkit
|
|
||||||
|
|
||||||
console.log('saveHandler');
|
|
||||||
};
|
|
||||||
|
|
||||||
const submitHandler = async () => {
|
|
||||||
if (codeEditor) {
|
|
||||||
const res = await codeEditor.formatHandler();
|
|
||||||
|
|
||||||
if (res) {
|
|
||||||
console.log('Code formatted successfully');
|
|
||||||
saveHandler();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
|
<svelte:head>
|
||||||
<div class="mx-auto w-full md:px-0 h-full">
|
<title>
|
||||||
<div class=" flex flex-col max-h-[100dvh] h-full">
|
{$i18n.t('Tools')} | {$WEBUI_NAME}
|
||||||
<div class="">
|
</title>
|
||||||
<div class="flex justify-between items-center">
|
</svelte:head>
|
||||||
|
|
||||||
|
<div class="mb-3 flex justify-between items-center">
|
||||||
<div class=" text-lg font-semibold self-center">{$i18n.t('Tools')}</div>
|
<div class=" text-lg font-semibold self-center">{$i18n.t('Tools')}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class=" dark:border-gray-850 my-2" />
|
<div class=" flex w-full space-x-2">
|
||||||
|
<div class="flex flex-1">
|
||||||
<div class="flex flex-col flex-1 overflow-auto h-0 rounded-lg">
|
<div class=" self-center ml-1 mr-3">
|
||||||
<div class="w-full flex gap-2 mb-2">
|
<svg
|
||||||
<!-- Toolkit Name Input -->
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<input
|
viewBox="0 0 20 20"
|
||||||
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"
|
fill="currentColor"
|
||||||
type="text"
|
class="w-4 h-4"
|
||||||
placeholder="Toolkit Name (e.g. My ToolKit)"
|
|
||||||
bind:value={name}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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 ID (e.g. my_toolkit)"
|
|
||||||
bind:value={id}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">
|
|
||||||
<CodeEditor bind:this={codeEditor} {saveHandler} />
|
|
||||||
</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"
|
|
||||||
on:click={() => {
|
|
||||||
submitHandler();
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{$i18n.t('Save')}
|
<path
|
||||||
</button>
|
fill-rule="evenodd"
|
||||||
</div>
|
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>
|
</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 Tools')}
|
||||||
|
/>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<hr class=" dark:border-gray-850 my-2.5" />
|
||||||
|
|||||||
116
src/lib/components/workspace/Tools/ToolkitEditor.svelte
Normal file
116
src/lib/components/workspace/Tools/ToolkitEditor.svelte
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
<script>
|
||||||
|
import { getContext } from 'svelte';
|
||||||
|
|
||||||
|
const i18n = getContext('i18n');
|
||||||
|
|
||||||
|
import CodeEditor from './CodeEditor.svelte';
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
|
||||||
|
let loading = false;
|
||||||
|
|
||||||
|
let id = '';
|
||||||
|
let name = '';
|
||||||
|
let meta = {
|
||||||
|
description: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
let code = '';
|
||||||
|
|
||||||
|
$: if (name) {
|
||||||
|
id = name.replace(/\s+/g, '_').toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
let codeEditor;
|
||||||
|
|
||||||
|
const saveHandler = async () => {
|
||||||
|
loading = true;
|
||||||
|
// Call the API to save the toolkit
|
||||||
|
console.log('saveHandler');
|
||||||
|
};
|
||||||
|
|
||||||
|
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">
|
||||||
|
<div class=" flex flex-col max-h-[100dvh] h-full">
|
||||||
|
<div class="mb-2.5">
|
||||||
|
<button
|
||||||
|
class="flex space-x-1"
|
||||||
|
on:click={() => {
|
||||||
|
goto('/workspace/tools');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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
|
||||||
|
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 ID (e.g. my_toolkit)"
|
||||||
|
bind:value={id}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</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">
|
||||||
|
<CodeEditor bind:value={code} bind:this={codeEditor} {saveHandler} />
|
||||||
|
</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"
|
||||||
|
on:click={() => {
|
||||||
|
submitHandler();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{$i18n.t('Save')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
5
src/routes/(app)/workspace/tools/create/+page.svelte
Normal file
5
src/routes/(app)/workspace/tools/create/+page.svelte
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
import ToolkitEditor from '$lib/components/workspace/Tools/ToolkitEditor.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ToolkitEditor />
|
||||||
5
src/routes/(app)/workspace/tools/edit/+page.svelte
Normal file
5
src/routes/(app)/workspace/tools/edit/+page.svelte
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
import ToolkitEditor from '$lib/components/workspace/Tools/ToolkitEditor.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ToolkitEditor />
|
||||||
Loading…
Reference in New Issue
Block a user