windmill-components 1.558.3 → 1.596.0

package/package/components/icons/index.js

@@ -99,6 +99,10 @@ import XeroIcon from './XeroIcon.svelte';
 import KafkaIcon from './KafkaIcon.svelte';
 import NatsIcon from './NatsIcon.svelte';
 import MqttIcon from './MqttIcon.svelte';
+import ApifyIcon from './ApifyIcon.svelte';
+import McpIcon from './McpIcon.svelte';
+import SageIcon from './SageIcon.svelte';
+import ZohoIcon from './ZohoIcon.svelte';
 export const APP_TO_ICON_COMPONENT = {
     postgresql: PostgresIcon,
     mysql: Mysql,
@@ -198,10 +202,14 @@ export const APP_TO_ICON_COMPONENT = {
     jumpcloud: JumpCloudIcon,
     keycloak: KeycloakIcon,
     zitadel: ZitadelIcon,
+    sage_intacct: SageIcon,
     spotify: SpotifyIcon,
     xero: XeroIcon,
     kafka: KafkaIcon,
     nats: NatsIcon,
     mqtt: MqttIcon,
+    apify: ApifyIcon,
+    mcp: McpIcon,
+    zoho: ZohoIcon
 };
-export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, WindmillIcon2, SchedulePollIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, FaunadbIcon, ClickhouseIcon, OpenaiIcon, AwsIcon, BcryptIcon, GoogleIcon, HackernewsIcon, MongodbIcon, RedditIcon, SupabaseIcon, WebdavIcon, ZammadIcon, NextcloudIcon, SendflakeIcon, SurrealdbIcon, ActivitypubIcon, AwsEcrIcon, CalcomIcon, ClickupIcon, CloudflareIcon, FirebaseIcon, GoogleFormsIcon, JiraIcon, NotionIcon, PineconeIcon, RssIcon, ShopifyIcon, TypeformIcon, BigQueryIcon, OracleDBIcon, GraphqlIcon, NocoDbIcon, AzureIcon, MicrosoftIcon, OktaIcon, Auth0Icon, AuthentikIcon, AutheliaIcon, KanidmIcon, AsanaIcon, BitbucketIcon, DynatraceIcon, EdgeDbIcon, GitIcon, ZendeskIcon, TwilioIcon, TrelloIcon, ResendIcon, PushoverIcon, QuickbooksIcon, MsTeamsIcon, MailgunIcon, IpinfoIcon, GoogleCloudIcon, CaCertificate, CurrencyApiIcon, VismaIcon, JumpCloudIcon, KeycloakIcon, ZitadelIcon, XeroIcon, KafkaIcon, NatsIcon, MqttIcon };
+export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, WindmillIcon2, SchedulePollIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, FaunadbIcon, ClickhouseIcon, OpenaiIcon, AwsIcon, BcryptIcon, GoogleIcon, HackernewsIcon, MongodbIcon, RedditIcon, SupabaseIcon, WebdavIcon, ZammadIcon, NextcloudIcon, SendflakeIcon, SurrealdbIcon, ActivitypubIcon, AwsEcrIcon, CalcomIcon, ClickupIcon, CloudflareIcon, FirebaseIcon, GoogleFormsIcon, JiraIcon, NotionIcon, PineconeIcon, RssIcon, ShopifyIcon, TypeformIcon, BigQueryIcon, OracleDBIcon, GraphqlIcon, NocoDbIcon, AzureIcon, MicrosoftIcon, OktaIcon, Auth0Icon, AuthentikIcon, AutheliaIcon, KanidmIcon, AsanaIcon, BitbucketIcon, DynatraceIcon, EdgeDbIcon, GitIcon, ZendeskIcon, TwilioIcon, TrelloIcon, ResendIcon, PushoverIcon, QuickbooksIcon, MsTeamsIcon, MailgunIcon, IpinfoIcon, GoogleCloudIcon, CaCertificate, CurrencyApiIcon, VismaIcon, JumpCloudIcon, KeycloakIcon, ZitadelIcon, XeroIcon, KafkaIcon, NatsIcon, MqttIcon, ApifyIcon, McpIcon, ZohoIcon };

package/package/components/instanceSettings/CriticalAlertChannels.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">import { enterpriseLicense } from '../../stores';
+import SlackChannelCard from './SlackChannelCard.svelte';
+import TeamsChannelCard from './TeamsChannelCard.svelte';
+import EmailChannelCard from './EmailChannelCard.svelte';
+import { isSmtpSettingsValid } from './SmtpSettings.svelte';
+let { values, openSmtpSettings, oauths } = $props();
+// Derived state for each channel type
+const slackChannels = $derived.by(() => {
+    const channels = $values?.critical_error_channels || [];
+    return channels.filter((channel) => channel && 'slack_channel' in channel);
+});
+const teamsChannels = $derived.by(() => {
+    const channels = $values?.critical_error_channels || [];
+    return channels.filter((channel) => channel && 'teams_channel' in channel);
+});
+const emailChannels = $derived.by(() => {
+    const channels = $values?.critical_error_channels || [];
+    return channels.filter((channel) => channel && 'email' in channel);
+});
+const slackTeamName = $derived($values['slack']?.['team_name']);
+// Teams OAuth validation function
+function isTeamsOAuthConfigured(teamsConfig) {
+    return (teamsConfig &&
+        teamsConfig.id?.trim() &&
+        teamsConfig.secret?.trim() &&
+        teamsConfig.tenant?.trim());
+}
+const isTeamsConnected = $derived(isTeamsOAuthConfigured(oauths?.teams));
+// Compute dynamic order based on channel presence
+const slackOrder = $derived(slackChannels.length > 0 ? 1 : 4);
+const teamsOrder = $derived(teamsChannels.length > 0 ? 2 : 5);
+const emailOrder = $derived(emailChannels.length > 0 ? 3 : 6);
+function addSlackChannel() {
+    if ($values.critical_error_channels == undefined ||
+        !Array.isArray($values.critical_error_channels)) {
+        $values.critical_error_channels = [];
+    }
+    $values.critical_error_channels = $values.critical_error_channels.concat({ slack_channel: '' });
+}
+function addTeamsChannel() {
+    if ($values.critical_error_channels == undefined ||
+        !Array.isArray($values.critical_error_channels)) {
+        $values.critical_error_channels = [];
+    }
+    $values.critical_error_channels = $values.critical_error_channels.concat({
+        teams_channel: undefined
+    });
+}
+function addEmailChannel() {
+    if ($values.critical_error_channels == undefined ||
+        !Array.isArray($values.critical_error_channels)) {
+        $values.critical_error_channels = [];
+    }
+    $values.critical_error_channels = $values.critical_error_channels.concat({ email: '' });
+}
+function removeChannel(index) {
+    $values.critical_error_channels = $values.critical_error_channels.filter((_, i) => i !== index);
+}
+function updateChannel(index, updatedChannel) {
+    $values.critical_error_channels[index] = updatedChannel;
+}
+function findChannelIndex(channel) {
+    return $values?.critical_error_channels?.indexOf(channel) ?? -1;
+}
+function disconnectSlack() {
+    // Clear the entire critical_error_channels setting, same as original disconnect behavior
+    if ($values['slack']) {
+        $values.slack = undefined;
+    }
+}
+function handleTeamChange(teamItem, channel) {
+    const index = findChannelIndex(channel);
+    if (index === -1)
+        return;
+    const currentTeamChannel = channel?.teams_channel;
+    const teamIdChanged = currentTeamChannel?.team_id !== teamItem?.team_id;
+    $values.critical_error_channels[index] = {
+        teams_channel: teamItem
+            ? {
+                team_id: teamItem.team_id,
+                team_name: teamItem.team_name,
+                // Preserve existing channel if team didn't actually change
+                channel_id: teamIdChanged ? undefined : currentTeamChannel?.channel_id,
+                channel_name: teamIdChanged ? undefined : currentTeamChannel?.channel_name
+            }
+            : undefined
+    };
+}
+function handleChannelChange(channelItem, channel) {
+    const index = findChannelIndex(channel);
+    if (index === -1)
+        return;
+    const team = channel?.teams_channel;
+    if (team) {
+        $values.critical_error_channels[index] = {
+            teams_channel: {
+                team_id: team?.team_id,
+                team_name: team?.team_name,
+                channel_id: channelItem?.channel_id,
+                channel_name: channelItem?.channel_name
+            }
+        };
+    }
+}
+</script>
+
+<div class="gap-y-4 pt-2 flex flex-col">
+	<!-- Slack Card -->
+	<SlackChannelCard
+		channels={slackChannels}
+		disabled={!$enterpriseLicense}
+		onAddChannel={addSlackChannel}
+		onRemoveChannel={removeChannel}
+		onUpdateChannel={updateChannel}
+		{findChannelIndex}
+		onDisconnect={disconnectSlack}
+		{slackTeamName}
+		style="order: {slackOrder};"
+	/>
+
+	<!-- Teams Card -->
+	<TeamsChannelCard
+		channels={teamsChannels}
+		disabled={!$enterpriseLicense}
+		onAddChannel={addTeamsChannel}
+		onRemoveChannel={removeChannel}
+		onTeamChange={handleTeamChange}
+		onChannelChange={handleChannelChange}
+		{findChannelIndex}
+		{isTeamsConnected}
+		style="order: {teamsOrder};"
+	/>
+
+	<!-- Email Card -->
+	<EmailChannelCard
+		channels={emailChannels}
+		hasSmtpConfig={isSmtpSettingsValid($values['smtp_settings'])}
+		disabled={!$enterpriseLicense}
+		onAddChannel={addEmailChannel}
+		onRemoveChannel={removeChannel}
+		onUpdateChannel={updateChannel}
+		{openSmtpSettings}
+		{findChannelIndex}
+		style="order: {emailOrder};"
+	/>
+</div>

package/package/components/instanceSettings/CriticalAlertChannels.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Writable } from 'svelte/store';
+interface Props {
+    values: Writable<Record<string, any>>;
+    openSmtpSettings?: () => void;
+    oauths?: Record<string, any>;
+}
+declare const CriticalAlertChannels: import("svelte").Component<Props, {}, "">;
+type CriticalAlertChannels = ReturnType<typeof CriticalAlertChannels>;
+export default CriticalAlertChannels;

package/package/components/instanceSettings/EmailChannelCard.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">import { Mail, X, Plus } from 'lucide-svelte';
+import { Button } from '../common';
+import IntegrationCard from './IntegrationCard.svelte';
+import { fade } from 'svelte/transition';
+import TextInput from '../text_input/TextInput.svelte';
+import SmtpConfigurationStatus from '../common/smtp/SmtpConfigurationStatus.svelte';
+let { channels, disabled = false, onAddChannel, onRemoveChannel, onUpdateChannel, findChannelIndex, openSmtpSettings, class: clazz, style, hasSmtpConfig } = $props();
+function handleEmailInput(channel, value) {
+    const index = findChannelIndex(channel);
+    if (index !== -1) {
+        onUpdateChannel(index, { email: value });
+    }
+}
+function handleRemoveChannel(channel) {
+    const index = findChannelIndex(channel);
+    if (index !== -1) {
+        onRemoveChannel(index);
+    }
+}
+</script>
+
+{#if channels.length > 0}
+	<!-- Connected Email Card -->
+	<IntegrationCard title="Email" icon={Mail} isPlaceholder={false} class={clazz} {style}>
+		{#snippet actions()}
+			<SmtpConfigurationStatus {hasSmtpConfig} {openSmtpSettings} />
+		{/snippet}
+		{#snippet children()}
+			{#if channels.length > 0}
+				<span class="text-xs text-secondary"> Email addresses to send alerts to. </span>
+			{/if}
+
+			<!-- Email Inputs -->
+			<div class="space-y-2">
+				{#each channels as channel}
+					<div class="flex items-center gap-2 w-full" transition:fade|local={{ duration: 200 }}>
+						<TextInput
+							inputProps={{
+								type: 'email',
+								placeholder: 'Email address',
+								disabled,
+								oninput: (e) => {
+									const target = e.target as HTMLInputElement
+									handleEmailInput(channel, target.value)
+								}
+							}}
+							value={channel.email || ''}
+						/>
+
+						<Button
+							onclick={() => handleRemoveChannel(channel)}
+							title="Remove email"
+							{disabled}
+							startIcon={{ icon: X }}
+							iconOnly
+							unifiedSize="md"
+							variant="subtle"
+							destructive
+						/>
+					</div>
+				{/each}
+			</div>
+
+			<!-- Add Email Button -->
+			<div class="flex justify-start">
+				<Button
+					variant="default"
+					size="xs"
+					onclick={onAddChannel}
+					btnClasses="text-xs flex items-center gap-2"
+					{disabled}
+				>
+					<Plus size={14} />
+					Add email address
+				</Button>
+			</div>
+		{/snippet}
+	</IntegrationCard>
+{:else}
+	<!-- Placeholder Card -->
+	<IntegrationCard
+		title="Email"
+		icon={Mail}
+		isPlaceholder={true}
+		onAdd={onAddChannel}
+		class={clazz}
+		{style}
+	>
+		{#snippet children()}{/snippet}
+	</IntegrationCard>
+{/if}

package/package/components/instanceSettings/EmailChannelCard.svelte.d.ts

@@ -0,0 +1,18 @@
+interface EmailChannel {
+    email: string;
+}
+interface Props {
+    channels: EmailChannel[];
+    disabled?: boolean;
+    onAddChannel: () => void;
+    onRemoveChannel: (index: number) => void;
+    onUpdateChannel: (index: number, updatedChannel: EmailChannel) => void;
+    findChannelIndex: (channel: EmailChannel) => number;
+    openSmtpSettings?: () => void;
+    class?: string;
+    style?: string;
+    hasSmtpConfig: boolean;
+}
+declare const EmailChannelCard: import("svelte").Component<Props, {}, "">;
+type EmailChannelCard = ReturnType<typeof EmailChannelCard>;
+export default EmailChannelCard;

package/package/components/instanceSettings/IntegrationCard.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">import { Plus } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+let { title, icon: Icon, children, onAdd, isPlaceholder = false, actions, class: clazz, style } = $props();
+</script>
+
+{#if isPlaceholder}
+	<!-- Placeholder Card (dashed border) -->
+	<div
+		class={twMerge(
+			'border border-dashed border-gray-600 flex h-[67px] items-center justify-center px-4 py-4 rounded-md w-full bg-transparent hover:bg-surface-secondary/50 transition-colors cursor-pointer',
+			clazz
+		)}
+		{style}
+		onclick={onAdd}
+		role="button"
+		tabindex="0"
+		onkeydown={(e) => e.key === 'Enter' && onAdd?.()}
+	>
+		<div class="flex gap-2 items-center justify-center">
+			<Plus size={14} class="text-secondary" />
+			<span class="text-xs font-medium text-secondary text-center">
+				Add {title.toLowerCase()} channel
+			</span>
+			<Icon size={title === 'Microsoft Teams' ? 20 : 14} class="text-secondary" />
+		</div>
+	</div>
+{:else}
+	<!-- Connected Card (solid background) -->
+	<div
+		class={twMerge('bg-surface-tertiary border flex flex-col gap-2 p-4 rounded-md w-full', clazz)}
+		{style}
+	>
+		<!-- Card Header -->
+		<div class="flex items-center justify-between w-full">
+			<div class="flex gap-2 items-center">
+				<Icon size={20} class="text-primary" />
+				<span class="text-xs font-semibold text-primary">{title}</span>
+			</div>
+
+			{@render actions?.()}
+		</div>
+
+		<!-- Card Content -->
+		<div class="space-y-2">
+			{@render children()}
+		</div>
+	</div>
+{/if}

package/package/components/instanceSettings/IntegrationCard.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    title: string;
+    icon: any;
+    children: any;
+    onAdd?: () => void;
+    isPlaceholder?: boolean;
+    actions?: import('svelte').Snippet;
+    class?: string;
+    style?: string;
+}
+declare const IntegrationCard: import("svelte").Component<Props, {}, "">;
+type IntegrationCard = ReturnType<typeof IntegrationCard>;
+export default IntegrationCard;

package/package/components/instanceSettings/SlackChannelCard.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">import { Slack, X, Plus } from 'lucide-svelte';
+import { Button } from '../common';
+import IntegrationCard from './IntegrationCard.svelte';
+import SlackConnectionStatus from '../common/slack/SlackConnectionStatus.svelte';
+import TextInput from '../text_input/TextInput.svelte';
+let { channels, disabled = false, onAddChannel, onRemoveChannel, onUpdateChannel, findChannelIndex, onDisconnect, slackTeamName, class: clazz, style } = $props();
+function handleSlackChannelInput(channel, value) {
+    const index = findChannelIndex(channel);
+    if (index !== -1) {
+        onUpdateChannel(index, { slack_channel: value });
+    }
+}
+function handleRemoveChannel(channel) {
+    const index = findChannelIndex(channel);
+    if (index !== -1) {
+        onRemoveChannel(index);
+    }
+}
+</script>
+
+{#if channels.length > 0}
+	<!-- Connected Slack Card -->
+	<IntegrationCard title="Slack" icon={Slack} isPlaceholder={false} class={clazz} {style}>
+		{#snippet actions()}
+			<SlackConnectionStatus
+				isConnected={slackTeamName ? true : false}
+				{slackTeamName}
+				mode="instance"
+				{onDisconnect}
+			/>
+		{/snippet}
+		{#snippet children()}
+			{#if channels.length > 0}
+				<span class="text-xs text-secondary"> Channels to send alerts to. </span>
+			{/if}
+
+			<!-- Channel Inputs -->
+			<div class="space-y-2">
+				{#each channels as channel}
+					<div class="flex items-center gap-2 w-full">
+						<div class="flex-1">
+							<TextInput
+								inputProps={{
+									type: 'text',
+									placeholder: 'Slack channel (e.g., #general)',
+									disabled: disabled,
+									oninput: (e) => {
+										const target = e.target as HTMLInputElement
+										handleSlackChannelInput(channel, target.value)
+									}
+								}}
+								value={channel.slack_channel || ''}
+							/>
+						</div>
+						<Button
+							onclick={() => handleRemoveChannel(channel)}
+							title="Remove channel"
+							iconOnly
+							{disabled}
+							startIcon={{ icon: X }}
+							unifiedSize="md"
+							variant="subtle"
+							destructive
+						/>
+					</div>
+				{/each}
+			</div>
+
+			<!-- Add Channel Button -->
+			<div class="flex justify-start">
+				<Button
+					variant="default"
+					size="xs"
+					onclick={onAddChannel}
+					btnClasses="text-xs flex items-center gap-2"
+					{disabled}
+				>
+					<Plus size={14} />
+					Add channel
+				</Button>
+			</div>
+		{/snippet}
+	</IntegrationCard>
+{:else}
+	<!-- Placeholder Card -->
+	<IntegrationCard
+		title="Slack"
+		icon={Slack}
+		isPlaceholder={true}
+		onAdd={onAddChannel}
+		class={clazz}
+		{style}
+	>
+		{#snippet children()}{/snippet}
+	</IntegrationCard>
+{/if}

package/package/components/instanceSettings/SlackChannelCard.svelte.d.ts

@@ -0,0 +1,18 @@
+interface SlackChannel {
+    slack_channel: string;
+}
+interface Props {
+    channels: SlackChannel[];
+    disabled?: boolean;
+    onAddChannel: () => void;
+    onRemoveChannel: (index: number) => void;
+    onUpdateChannel: (index: number, updatedChannel: SlackChannel) => void;
+    findChannelIndex: (channel: SlackChannel) => number;
+    onDisconnect: () => void;
+    slackTeamName?: string;
+    class?: string;
+    style?: string;
+}
+declare const SlackChannelCard: import("svelte").Component<Props, {}, "">;
+type SlackChannelCard = ReturnType<typeof SlackChannelCard>;
+export default SlackChannelCard;

package/package/components/instanceSettings/SmtpSettings.svelte

@@ -0,0 +1,167 @@
+<script lang="ts" module>export function isSmtpSettingsValid(smtpSettings) {
+    return (smtpSettings &&
+        smtpSettings.smtp_host &&
+        smtpSettings.smtp_host.trim() !== '' &&
+        smtpSettings.smtp_port &&
+        smtpSettings.smtp_username &&
+        smtpSettings.smtp_username.trim() !== '' &&
+        smtpSettings.smtp_password &&
+        smtpSettings.smtp_password.trim() !== '' &&
+        smtpSettings.smtp_from &&
+        smtpSettings.smtp_from.trim() !== '');
+}
+</script>
+
+<script lang="ts">import { Button } from '../common';
+import Password from '../Password.svelte';
+import Toggle from '../Toggle.svelte';
+import { SettingService } from '../../gen';
+import { sendUserToast } from '../../toast';
+import TextInput from '../text_input/TextInput.svelte';
+import { Mail } from 'lucide-svelte';
+let { values, disabled = false } = $props();
+let testEmail = $state('');
+async function testSmtpSettings() {
+    try {
+        await SettingService.testSmtp({
+            requestBody: {
+                to: testEmail,
+                smtp: {
+                    host: $values['smtp_settings'].smtp_host,
+                    username: $values['smtp_settings'].smtp_username,
+                    password: $values['smtp_settings'].smtp_password,
+                    port: $values['smtp_settings'].smtp_port,
+                    from: $values['smtp_settings'].smtp_from,
+                    tls_implicit: $values['smtp_settings'].smtp_tls_implicit || false,
+                    disable_tls: $values['smtp_settings'].smtp_disable_tls || false
+                }
+            }
+        });
+        sendUserToast('Test email sent successfully');
+    }
+    catch (error) {
+        sendUserToast('Failed to send test email: ' + error.message, true);
+    }
+}
+</script>
+
+<div class="space-y-6">
+	<!-- SMTP Settings Form -->
+	<div class="space-y-6">
+		<div class="grid grid-cols-2 grid-rows-2 gap-x-2 gap-y-6">
+			<div class="flex flex-col gap-1">
+				<label for="smtp_host" class="block text-xs font-semibold text-emphasis mb-1">Host</label>
+				<TextInput
+					inputProps={{
+						type: 'text',
+						id: 'smtp_host',
+						placeholder: 'smtp.gmail.com',
+						disabled: disabled
+					}}
+					bind:value={$values['smtp_settings'].smtp_host}
+				/>
+			</div>
+			<div class="flex flex-col gap-1">
+				<label for="smtp_port" class="block text-xs font-semibold text-emphasis mb-1">Port</label>
+				<TextInput
+					inputProps={{
+						type: 'number',
+						id: 'smtp_port',
+						placeholder: '587',
+						disabled: disabled
+					}}
+					bind:value={$values['smtp_settings'].smtp_port}
+				/>
+			</div>
+
+			<div>
+				<label for="smtp_username" class="block text-xs font-semibold text-emphasis mb-1">
+					Username
+				</label>
+				<TextInput
+					inputProps={{
+						type: 'text',
+						id: 'smtp_username',
+						placeholder: 'user@example.com',
+						disabled: disabled
+					}}
+					bind:value={$values['smtp_settings'].smtp_username}
+				/>
+			</div>
+
+			<div>
+				<label for="smtp_password" class="block text-xs font-semibold text-emphasis mb-1">
+					Password
+				</label>
+				<Password bind:password={$values['smtp_settings'].smtp_password} small {disabled} />
+			</div>
+		</div>
+
+		<div>
+			<label for="smtp_from" class="block text-xs font-semibold text-emphasis mb-1">
+				From Address
+			</label>
+			<TextInput
+				inputProps={{
+					type: 'email',
+					id: 'smtp_from',
+					placeholder: 'noreply@example.com',
+					disabled: disabled
+				}}
+				bind:value={$values['smtp_settings'].smtp_from}
+			/>
+		</div>
+
+		<div class="flex gap-4">
+			<Toggle
+				disabled={$values['smtp_settings'].smtp_disable_tls || disabled}
+				id="smtp_tls_implicit"
+				bind:checked={$values['smtp_settings'].smtp_tls_implicit}
+				size="xs"
+				options={{ right: 'Implicit TLS' }}
+			/>
+
+			<Toggle
+				id="smtp_disable_tls"
+				{disabled}
+				bind:checked={$values['smtp_settings'].smtp_disable_tls}
+				size="xs"
+				on:change={(e) => {
+					if (e.detail) {
+						$values['smtp_settings'].smtp_tls_implicit = false
+					}
+				}}
+				options={{ right: 'Disable TLS' }}
+			/>
+		</div>
+
+		<!-- Test Email -->
+		<div class="flex flex-col gap-1">
+			<label for="test_email" class="block text-xs font-semibold text-emphasis">Test Email</label>
+			<span class="text-xs text-secondary">
+				Enter a test email address to verify the SMTP settings.
+			</span>
+			<div class="flex gap-2">
+				<TextInput
+					inputProps={{
+						type: 'email',
+						placeholder: 'Test email address',
+						disabled: disabled,
+						id: 'test_email'
+					}}
+					bind:value={testEmail}
+				/>
+				<Button
+					unifiedSize="md"
+					variant="accent"
+					onclick={testSmtpSettings}
+					disabled={!testEmail || !isSmtpSettingsValid($values['smtp_settings']) || disabled}
+					btnClasses="text-xs"
+					startIcon={{ icon: Mail }}
+				>
+					Send test email
+				</Button>
+			</div>
+		</div>
+	</div>
+</div>

package/package/components/instanceSettings/SmtpSettings.svelte.d.ts

@@ -0,0 +1,9 @@
+export declare function isSmtpSettingsValid(smtpSettings: Record<string, any>): any;
+import type { Writable } from 'svelte/store';
+interface Props {
+    values: Writable<Record<string, any>>;
+    disabled?: boolean;
+}
+declare const SmtpSettings: import("svelte").Component<Props, {}, "">;
+type SmtpSettings = ReturnType<typeof SmtpSettings>;
+export default SmtpSettings;