mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-11 20:05:19 +00:00
enh: tool server import/export
This commit is contained in:
Timothy Jaeryang Baek
parent
d1a6c6b209
commit
23f62a7312
1 changed files with 142 additions and 37 deletions
|
|
@ -1,4 +1,9 @@
|
|||
<script lang="ts">
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
import fileSaver from 'file-saver';
|
||||
const { saveAs } = fileSaver;
|
||||
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { getContext, onMount } from 'svelte';
|
||||
const i18n = getContext('i18n');
|
||||
|
|
@ -27,6 +32,8 @@
|
|||
export let direct = false;
|
||||
export let connection = null;
|
||||
|
||||
let inputElement = null;
|
||||
|
||||
let type = 'openapi'; // 'openapi', 'mcp'
|
||||
|
||||
let url = '';
|
||||
|
|
@ -135,6 +142,73 @@
|
|||
}
|
||||
};
|
||||
|
||||
const importHandler = async (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
const json = event.target.result;
|
||||
console.log('importHandler', json);
|
||||
|
||||
try {
|
||||
const data = JSON.parse(json);
|
||||
if (data.type) type = data.type;
|
||||
if (data.url) url = data.url;
|
||||
|
||||
if (data.spec_type) spec_type = data.spec_type;
|
||||
if (data.spec) spec = data.spec;
|
||||
if (data.path) path = data.path;
|
||||
|
||||
if (data.auth_type) auth_type = data.auth_type;
|
||||
if (data.key) key = data.key;
|
||||
|
||||
if (data.info) {
|
||||
id = data.info.id ?? '';
|
||||
name = data.info.name ?? '';
|
||||
description = data.info.description ?? '';
|
||||
}
|
||||
|
||||
if (data.config) {
|
||||
enable = data.config.enable ?? true;
|
||||
accessControl = data.config.access_control ?? {};
|
||||
}
|
||||
|
||||
toast.success($i18n.t('Import successful'));
|
||||
} catch (error) {
|
||||
toast.error($i18n.t('Please select a valid JSON file'));
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
};
|
||||
|
||||
const exportHandler = async () => {
|
||||
// export current connection as json file
|
||||
const json = JSON.stringify({
|
||||
type,
|
||||
url,
|
||||
|
||||
spec_type,
|
||||
spec,
|
||||
path,
|
||||
|
||||
auth_type,
|
||||
key,
|
||||
|
||||
info: {
|
||||
id: id,
|
||||
name: name,
|
||||
description: description
|
||||
}
|
||||
});
|
||||
|
||||
const blob = new Blob([json], {
|
||||
type: 'application/json'
|
||||
});
|
||||
|
||||
saveAs(blob, `tool-server-${name || id || 'export'}.json`);
|
||||
};
|
||||
|
||||
const submitHandler = async () => {
|
||||
loading = true;
|
||||
|
||||
|
|
@ -252,19 +326,47 @@
|
|||
{$i18n.t('Add Connection')}
|
||||
{/if}
|
||||
</h1>
|
||||
<button
|
||||
class="self-center"
|
||||
aria-label={$i18n.t('Close Configure Connection Modal')}
|
||||
on:click={() => {
|
||||
show = false;
|
||||
}}
|
||||
>
|
||||
<XMark className={'size-5'} />
|
||||
</button>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex gap-1.5 text-xs justify-end">
|
||||
<button
|
||||
class=" hover:underline"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
inputElement?.click();
|
||||
}}
|
||||
>
|
||||
{$i18n.t('Import')}
|
||||
</button>
|
||||
|
||||
<button class=" hover:underline" type="button" on:click={exportHandler}>
|
||||
{$i18n.t('Export')}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="self-center"
|
||||
aria-label={$i18n.t('Close Configure Connection Modal')}
|
||||
on:click={() => {
|
||||
show = false;
|
||||
}}
|
||||
>
|
||||
<XMark className={'size-5'} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row w-full px-4 pb-4 md:space-x-4 dark:text-gray-200">
|
||||
<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
|
||||
<input
|
||||
bind:this={inputElement}
|
||||
type="file"
|
||||
hidden
|
||||
accept=".json"
|
||||
on:change={(e) => {
|
||||
importHandler(e);
|
||||
}}
|
||||
/>
|
||||
|
||||
<form
|
||||
class="flex flex-col w-full"
|
||||
on:submit={(e) => {
|
||||
|
|
@ -637,35 +739,38 @@
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex justify-end pt-3 text-sm font-medium gap-1.5">
|
||||
{#if edit}
|
||||
<button
|
||||
class="px-3.5 py-1.5 text-sm font-medium dark:bg-black dark:hover:bg-gray-900 dark:text-white bg-white text-black hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
onDelete();
|
||||
show = false;
|
||||
}}
|
||||
>
|
||||
{$i18n.t('Delete')}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading
|
||||
? ' cursor-not-allowed'
|
||||
: ''}"
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
>
|
||||
{$i18n.t('Save')}
|
||||
|
||||
{#if loading}
|
||||
<div class="ml-2 self-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
<div class="flex justify-between pt-3 text-sm font-medium gap-1.5">
|
||||
<div></div>
|
||||
<div class="flex gap-1.5">
|
||||
{#if edit}
|
||||
<button
|
||||
class="px-3.5 py-1.5 text-sm font-medium dark:bg-black dark:hover:bg-gray-900 dark:text-white bg-white text-black hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
onDelete();
|
||||
show = false;
|
||||
}}
|
||||
>
|
||||
{$i18n.t('Delete')}
|
||||
</button>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading
|
||||
? ' cursor-not-allowed'
|
||||
: ''}"
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
>
|
||||
{$i18n.t('Save')}
|
||||
|
||||
{#if loading}
|
||||
<div class="ml-2 self-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue