enh: webhook notification

src/lib/components/chat/Settings/Account.svelte

@@ -2,7 +2,7 @@
 	import { toast } from 'svelte-sonner';
 	import { onMount, getContext } from 'svelte';
 
-	import { user, config } from '$lib/stores';
+	import { user, config, settings } from '$lib/stores';
 	import { updateUserProfile, createAPIKey, getAPIKey } from '$lib/apis/auths';
 
 	import UpdatePassword from './Account/UpdatePassword.svelte';
@@ -16,10 +16,12 @@
 	const i18n = getContext('i18n');
 
 	export let saveHandler: Function;
+	export let saveSettings: Function;
 
 	let profileImageUrl = '';
 	let name = '';
 
+	let webhookUrl = '';
 	let showAPIKeys = false;
 
 	let JWTTokenCopied = false;
@@ -35,6 +37,15 @@
 			}
 		}
 
+		if (webhookUrl !== $settings?.notifications?.webhook_url) {
+			saveSettings({
+				notifications: {
+					...$settings.notifications,
+					webhook_url: webhookUrl
+				}
+			});
+		}
+
 		const updatedUser = await updateUserProfile(localStorage.token, name, profileImageUrl).catch(
 			(error) => {
 				toast.error(error);
@@ -60,6 +71,7 @@
 	onMount(async () => {
 		name = $user.name;
 		profileImageUrl = $user.profile_image_url;
+		webhookUrl = $settings?.notifications?.webhook_url ?? '';
 
 		APIKey = await getAPIKey(localStorage.token).catch((error) => {
 			console.log(error);
@@ -226,6 +238,22 @@
 					</div>
 				</div>
 			</div>
+
+			<div class="pt-2">
+				<div class="flex flex-col w-full">
+					<div class=" mb-1 text-xs font-medium">{$i18n.t('Notification Webhook')}</div>
+
+					<div class="flex-1">
+						<input
+							class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+							type="url"
+							placeholder={$i18n.t('Enter your webhook URL')}
+							bind:value={webhookUrl}
+							required
+						/>
+					</div>
+				</div>
+			</div>
 		</div>
 
 		<div class="py-0.5">

src/lib/components/chat/Settings/Account/UpdatePassword.svelte

@@ -60,9 +60,10 @@
 
 				<div class="flex-1">
 					<input
-						class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
+						class="w-full bg-transparent dark:text-gray-300 outline-none placeholder:opacity-30"
 						type="password"
 						bind:value={currentPassword}
+						placeholder={$i18n.t('Enter your current password')}
 						autocomplete="current-password"
 						required
 					/>
@@ -74,9 +75,10 @@
 
 				<div class="flex-1">
 					<input
-						class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
+						class="w-full bg-transparent text-sm dark:text-gray-300 outline-none placeholder:opacity-30"
 						type="password"
 						bind:value={newPassword}
+						placeholder={$i18n.t('Enter your new password')}
 						autocomplete="new-password"
 						required
 					/>
@@ -88,9 +90,10 @@
 
 				<div class="flex-1">
 					<input
-						class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
+						class="w-full bg-transparent text-sm dark:text-gray-300 outline-none placeholder:opacity-30"
 						type="password"
 						bind:value={newPasswordConfirm}
+						placeholder={$i18n.t('Confirm your new password')}
 						autocomplete="off"
 						required
 					/>
@@ -100,7 +103,7 @@
 
 		<div class="mt-3 flex justify-end">
 			<button
-				class=" px-4 py-2 text-xs bg-gray-800 hover:bg-gray-900 dark:bg-gray-700 dark:hover:bg-gray-800 text-gray-100 transition rounded-md font-medium"
+				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"
 			>
 				{$i18n.t('Update password')}
 			</button>

src/lib/components/chat/SettingsModal.svelte

@@ -637,6 +637,7 @@
 					<Chats {saveSettings} />
 				{:else if selectedTab === 'account'}
 					<Account
+						{saveSettings}
 						saveHandler={() => {
 							toast.success($i18n.t('Settings saved successfully!'));
 						}}