enh: tool server import/export

src/lib/components/AddToolServerModal.svelte

@@ -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}
+					<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
-								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;
-								}}
+								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('Delete')}
-							</button>
-						{/if}
+								{$i18n.t('Save')}
 
-						<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>
+								{#if loading}
+									<div class="ml-2 self-center">
+										<Spinner />
+									</div>
+								{/if}
+							</button>
+						</div>
 					</div>
 				</form>
 			</div>