From 2481e48a3a8bbdc4d1d68c7f2c446f99457c23ac Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 20 Mar 2024 18:35:54 -0700
Subject: [PATCH] feat: webhook settings frontend

---
 src/lib/apis/index.ts                         | 57 +++++++++++++++++++
 .../components/admin/Settings/General.svelte  | 27 ++++++++-
 2 files changed, 83 insertions(+), 1 deletion(-)

diff --git a/src/lib/apis/index.ts b/src/lib/apis/index.ts
index b33fb571..a610f721 100644
--- a/src/lib/apis/index.ts
+++ b/src/lib/apis/index.ts
@@ -139,3 +139,60 @@ export const updateModelFilterConfig = async (
 
 	return res;
 };
+
+export const getWebhookUrl = async (token: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_BASE_URL}/api/webhook`, {
+		method: 'GET',
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			error = err;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res.url;
+};
+
+export const updateWebhookUrl = async (token: string, url: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_BASE_URL}/api/webhook`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify({
+			url: url
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			error = err;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res.url;
+};
diff --git a/src/lib/components/admin/Settings/General.svelte b/src/lib/components/admin/Settings/General.svelte
index 351f6744..be319e26 100644
--- a/src/lib/components/admin/Settings/General.svelte
+++ b/src/lib/components/admin/Settings/General.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { getWebhookUrl, updateWebhookUrl } from '$lib/apis';
 	import {
 		getDefaultUserRole,
 		getJWTExpiresDuration,
@@ -16,6 +17,8 @@
 	let defaultUserRole = 'pending';
 	let JWTExpiresIn = '';
 
+	let webhookUrl = '';
+
 	const toggleSignUpEnabled = async () => {
 		signUpEnabled = await toggleSignUpEnabledStatus(localStorage.token);
 	};
@@ -28,18 +31,23 @@
 		JWTExpiresIn = await updateJWTExpiresDuration(localStorage.token, duration);
 	};
 
+	const updateWebhookUrlHandler = async () => {
+		webhookUrl = await updateWebhookUrl(localStorage.token, webhookUrl);
+	};
+
 	onMount(async () => {
 		signUpEnabled = await getSignUpEnabledStatus(localStorage.token);
 		defaultUserRole = await getDefaultUserRole(localStorage.token);
 		JWTExpiresIn = await getJWTExpiresDuration(localStorage.token);
+		webhookUrl = await getWebhookUrl(localStorage.token);
 	});
 </script>
 
 <form
 	class="flex flex-col h-full justify-between space-y-3 text-sm"
 	on:submit|preventDefault={() => {
-		// console.log('submit');
 		updateJWTExpiresDurationHandler(JWTExpiresIn);
+		updateWebhookUrlHandler();
 		saveHandler();
 	}}
 >
@@ -108,6 +116,23 @@
 
 			<hr class=" dark:border-gray-700 my-3" />
 
+			<div class=" w-full justify-between">
+				<div class="flex w-full justify-between">
+					<div class=" self-center text-xs font-medium">{$i18n.t('Webhook URL')}</div>
+				</div>
+
+				<div class="flex mt-2 space-x-2">
+					<input
+						class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
+						type="text"
+						placeholder={`https://example.com/webhook`}
+						bind:value={webhookUrl}
+					/>
+				</div>
+			</div>
+
+			<hr class=" dark:border-gray-700 my-3" />
+
 			<div class=" w-full justify-between">
 				<div class="flex w-full justify-between">
 					<div class=" self-center text-xs font-medium">{$i18n.t('JWT Expiration')}</div>