mirror of https://github.com/open-webui/open-webui
refac: tools
This commit is contained in:
Timothy J. Baek
parent
adea3af8d7
commit
c4629c8c2d
|
|
@ -1,86 +1,67 @@
|
|||
<script>
|
||||
import { getContext } from 'svelte';
|
||||
<script lang="ts">
|
||||
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');
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
};
|
||||
let query = '';
|
||||
</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="">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class=" text-lg font-semibold self-center">{$i18n.t('Tools')}</div>
|
||||
</div>
|
||||
</div>
|
||||
<svelte:head>
|
||||
<title>
|
||||
{$i18n.t('Tools')} | {$WEBUI_NAME}
|
||||
</title>
|
||||
</svelte:head>
|
||||
|
||||
<hr class=" dark:border-gray-850 my-2" />
|
||||
<div class="mb-3 flex justify-between items-center">
|
||||
<div class=" text-lg font-semibold self-center">{$i18n.t('Tools')}</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 overflow-auto h-0 rounded-lg">
|
||||
<div class="w-full flex gap-2 mb-2">
|
||||
<!-- Toolkit Name Input -->
|
||||
<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>
|
||||
|
||||
<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')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
<hr class=" dark:border-gray-850 my-2.5" />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<script>
|
||||
import ToolkitEditor from '$lib/components/workspace/Tools/ToolkitEditor.svelte';
|
||||
</script>
|
||||
|
||||
<ToolkitEditor />
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<script>
|
||||
import ToolkitEditor from '$lib/components/workspace/Tools/ToolkitEditor.svelte';
|
||||
</script>
|
||||
|
||||
<ToolkitEditor />
|
||||
Loading…
Reference in New Issue