windmill-components 1.532.0 → 1.542.4

package/package/components/search/GlobalSearchModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { onDestroy, onMount, tick, untrack } from 'svelte';
 import { AppService, FlowService, RawAppService, ScriptService } from '../../gen';
 import { clickOutside, isMac, scroll_into_view_if_needed_polyfill } from '../../utils';
-import { AlertTriangle, BoxesIcon, CalendarIcon, Code2Icon, Database, DollarSignIcon, HomeIcon, LayoutDashboardIcon, PlayIcon, Route, Search, SearchCode, Unplug, WandSparkles } from 'lucide-svelte';
+import { AlertTriangle, BoxesIcon, CalendarIcon, Code2Icon, Database, DollarSignIcon, HomeIcon, LayoutDashboardIcon, MailIcon, PlayIcon, Route, Search, SearchCode, Unplug, WandSparkles } from 'lucide-svelte';
 import Portal from '../Portal.svelte';
 import { twMerge } from 'tailwind-merge';
 import ContentSearchInner from '../ContentSearchInner.svelte';
@@ -101,6 +101,13 @@ let hiddenMenuItems = [
         action: (newtab = false) => gotoPage('/mqtt_triggers', newtab),
         icon: MqttIcon,
         disabled: $userStore?.operator
+    },
+    {
+        search_id: 'nav:email_triggers',
+        label: 'Go to Email triggers',
+        action: (newtab = false) => gotoPage('/email_triggers', newtab),
+        icon: MailIcon,
+        disabled: $userStore?.operator
     }
 ];
 let defaultMenuItems = [

package/package/components/select/DraggableTags.svelte.d.ts

@@ -1,15 +1,25 @@
-declare class __sveltets_Render<Item extends {
+declare function $$render<Item extends {
     label?: string;
     value: any;
-}> {
-    props(): {
-        items?: Item[] | undefined;
+}>(): {
+    props: {
+        items?: Item[];
         allowClear?: boolean;
         onRemove: (item: Item) => void;
-        onReorder?: ((oldIndex: number, newIndex: number) => void) | undefined;
+        onReorder?: (oldIndex: number, newIndex: number) => void;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item extends {
+    label?: string;
+    value: any;
+}> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
     bindings(): "";
     exports(): {};
 }

package/package/components/select/MultiSelect.svelte.d.ts

@@ -1,9 +1,9 @@
-declare class __sveltets_Render<Item extends {
+declare function $$render<Item extends {
     label?: string;
     value: any;
-}> {
-    props(): {
-        items?: Item[] | undefined;
+}>(): {
+    props: {
+        items?: Item[];
         value: Item["value"][];
         placeholder?: string;
         class?: string;
@@ -20,14 +20,24 @@ declare class __sveltets_Render<Item extends {
         selectedUlClass?: string;
         placeholderClass?: string;
         allowClear?: boolean;
-        groupBy?: ((item: Item) => string) | undefined;
-        sortBy?: ((a: Item, b: Item) => number) | undefined;
-        onOpen?: (() => void) | undefined;
-        onClear?: (() => void) | undefined;
-        onCreateItem?: ((value: string) => void) | undefined;
+        groupBy?: (item: Item) => string;
+        sortBy?: (a: Item, b: Item) => number;
+        onOpen?: () => void;
+        onClear?: () => void;
+        onCreateItem?: (value: string) => void;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item extends {
+    label?: string;
+    value: any;
+}> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
     bindings(): "value";
     exports(): {};
 }

package/package/components/select/Select.svelte

@@ -6,7 +6,7 @@ import { untrack } from 'svelte';
 import { getLabel, processItems } from './utils.svelte';
 import SelectDropdown from './SelectDropdown.svelte';
 import { deepEqual } from 'fast-equals';
-let { items, placeholder = 'Please select', value = $bindable(), filterText = $bindable(''), class: className = '', clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', inputClass = '', disablePortal = false, loading = false, autofocus, RightIcon, createText, noItemsMsg, open = $bindable(false), groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem, startSnippet } = $props();
+let { items, placeholder = 'Please select', value = $bindable(), filterText = $bindable(''), class: className = '', clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', inputClass = '', disablePortal = false, loading = false, autofocus, RightIcon, createText, noItemsMsg, open = $bindable(false), id, groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem, startSnippet } = $props();
 let disabled = $derived(_disabled || (loading && !value));
 let inputEl = $state();
 let processedItems = $derived.by(() => {
@@ -81,6 +81,7 @@ function clearValue() {
 		autocomplete="off"
 		onpointerdown={() => (open = true)}
 		bind:this={inputEl}
+		{id}
 	/>
 	<SelectDropdown
 		{disablePortal}

package/package/components/select/Select.svelte.d.ts

@@ -1,12 +1,12 @@
 import { type Snippet } from 'svelte';
 import { type ProcessedItem } from './utils.svelte';
-declare class __sveltets_Render<Item extends {
+declare function $$render<Item extends {
     label?: string;
     value: any;
     subtitle?: string;
-}> {
-    props(): {
-        items?: Item[] | undefined;
+}>(): {
+    props: {
+        items?: Item[];
         value: Item["value"] | undefined;
         placeholder?: string;
         class?: string;
@@ -23,18 +23,30 @@ declare class __sveltets_Render<Item extends {
         createText?: string;
         noItemsMsg?: string;
         open?: boolean;
-        groupBy?: ((item: Item) => string) | undefined;
-        sortBy?: ((a: Item, b: Item) => number) | undefined;
-        onFocus?: (() => void) | undefined;
-        onBlur?: (() => void) | undefined;
-        onClear?: (() => void) | undefined;
-        onCreateItem?: ((value: string) => void) | undefined;
+        id?: string;
+        groupBy?: (item: Item) => string;
+        sortBy?: (a: Item, b: Item) => number;
+        onFocus?: () => void;
+        onBlur?: () => void;
+        onClear?: () => void;
+        onCreateItem?: (value: string) => void;
         startSnippet?: Snippet<[{
             item: ProcessedItem<Item["value"]>;
-        }]> | undefined;
+        }]>;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "value" | "open" | "filterText";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item extends {
+    label?: string;
+    value: any;
+    subtitle?: string;
+}> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
     bindings(): "value" | "open" | "filterText";
     exports(): {};
 }

package/package/components/select/SelectDropdown.svelte.d.ts

@@ -1,8 +1,8 @@
 import { type Snippet } from 'svelte';
 import type { ProcessedItem } from './utils.svelte';
-declare class __sveltets_Render<T> {
-    props(): {
-        processedItems?: ProcessedItem<T>[] | undefined;
+declare function $$render<T>(): {
+    props: {
+        processedItems?: ProcessedItem<T>[];
         value: T | undefined;
         filterText?: string;
         listAutoWidth?: Boolean;
@@ -13,14 +13,21 @@ declare class __sveltets_Render<T> {
         class?: string;
         ulClass?: string;
         header?: Snippet;
-        getInputRect?: (() => DOMRect) | undefined;
+        getInputRect?: () => DOMRect;
         onSelectValue: (item: ProcessedItem<T>) => void;
         startSnippet?: Snippet<[{
             item: ProcessedItem<T>;
-        }]> | undefined;
+        }]>;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
     exports(): {};
 }

package/package/components/settings/PremiumInfo.svelte

@@ -126,8 +126,13 @@ $: estimatedSeats && updateExecs();
 		</div>
 		{#if premiumInfo?.status === 'past_due'}
 			<p class="text-red-500 text-base">
-				Your last invoice is unpaid. Please update your payment method in the customer portal to
-				prevent account downgrade and the interruption of your job executions.
+				{#if premiumInfo.max_tolerated_executions === undefined || premiumInfo.usage > premiumInfo.max_tolerated_executions}
+					Your last invoice is unpaid, you cannot run any more jobs. Please update your payment
+					method in the customer portal to continue running jobs.
+				{:else}
+					Your last invoice is unpaid. Please update your payment method in the customer portal to
+					prevent the interruption of your job executions.
+				{/if}
 			</p>
 		{/if}
 	</div>

package/package/components/settings/TokenDisplay.svelte

@@ -3,7 +3,7 @@ import { Clipboard } from 'lucide-svelte';
 import Alert from '../common/alert/Alert.svelte';
 let { token, mcpUrl, title, onCopy } = $props();
 function handleCopyClick() {
-    copyToClipboard(token);
+    copyToClipboard(mcpUrl || token);
     onCopy?.();
 }
 const displayTitle = $derived(title || (mcpUrl ? 'MCP URL Generated Successfully' : 'Token Created Successfully'));

package/package/components/sidebar/OperatorMenu.svelte

@@ -78,6 +78,11 @@ let secondMenuLinks = $derived([
         id: 'triggers',
         href: `${base}/mqtt_triggers`
     },
+    {
+        label: 'Email triggers',
+        id: 'triggers',
+        href: `${base}/email_triggers`
+    },
     {
         label: 'Audit logs',
         id: 'audit_logs',

package/package/components/sidebar/SidebarContent.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import MenuLink from './MenuLink.svelte';
 import { superadmin, usedTriggerKinds, userStore, workspaceStore, isCriticalAlertsUIOpen, enterpriseLicense, devopsRole } from '../../stores';
 import { SIDEBAR_SHOW_SCHEDULES } from '../../consts';
-import { BookOpen, Bot, Boxes, Calendar, DollarSign, Eye, Logs, FolderCog, FolderOpen, Github, HelpCircle, Home, LogOut, Newspaper, Play, Route, ServerCog, Settings, UserCog, Plus, Unplug, AlertCircle, Database, Pyramid } from 'lucide-svelte';
+import { BookOpen, Bot, Boxes, Calendar, DollarSign, Eye, Logs, FolderCog, FolderOpen, Github, HelpCircle, Home, LogOut, Newspaper, Play, Route, ServerCog, Settings, UserCog, Plus, Unplug, AlertCircle, Database, Pyramid, Trash2, MailIcon } from 'lucide-svelte';
 import UserMenu from './UserMenu.svelte';
 import DiscordIcon from '../icons/brands/Discord.svelte';
 import { WorkspaceService } from '../../gen';
@@ -28,6 +28,12 @@ async function leaveWorkspace() {
     clearStores();
     goto('/user/workspaces');
 }
+async function deleteFork() {
+    await WorkspaceService.deleteWorkspace({ workspace: $workspaceStore ?? '' });
+    sendUserToast('You deleted the workspace');
+    clearStores();
+    goto('/user/workspaces');
+}
 let hasNewChangelogs = $state(false);
 let recentChangelogs = $state([]);
 let lastOpened = localStorage.getItem('changelogsLastOpened');
@@ -85,6 +91,7 @@ const thirdMenuLinks = [
 ];
 let { numUnacknowledgedCriticalAlerts = 0, isCollapsed = false } = $props();
 let leaveWorkspaceModal = $state(false);
+let deleteWorkspaceForkModal = $state(false);
 function computeAllNotificationsCount(menuItems) {
     let count = 0;
     for (const menuItem of menuItems) {
@@ -205,6 +212,15 @@ let defaultExtraTriggerLinks = $derived([
         kind: 'mqtt',
         aiId: 'sidebar-menu-link-mqtt',
         aiDescription: 'Button to navigate to MQTT triggers'
+    },
+    {
+        label: 'Email',
+        href: '/email_triggers',
+        icon: MailIcon,
+        disabled: $userStore?.operator,
+        kind: 'email',
+        aiId: 'sidebar-menu-link-email',
+        aiDescription: 'Button to navigate to Email triggers'
     }
 ]);
 let triggerMenuLinks = $derived([
@@ -278,7 +294,19 @@ let secondaryMenuLinks = $derived([
                         faIcon: undefined
                     }
                 ]
-                : [])
+                : []),
+            ...($workspaceStore?.startsWith("wm-fork")
+                ? [
+                    {
+                        label: 'Delete Forked Workspace',
+                        action: () => {
+                            deleteWorkspaceForkModal = true;
+                        },
+                        icon: Trash2,
+                        faIcon: undefined
+                    }
+                ]
+                : []),
         ],
         disabled: $userStore?.operator
     },
@@ -572,3 +600,21 @@ let secondaryMenuLinks = $derived([
 		<span>Are you sure you want to leave this workspace?</span>
 	</div>
 </ConfirmationModal>
+
+{#if $workspaceStore?.startsWith("wm-fork-")}
+<ConfirmationModal
+	open={deleteWorkspaceForkModal}
+	title="Delete forked workspace"
+	confirmationText="Remove"
+	on:canceled={() => {
+		deleteWorkspaceForkModal = false
+	}}
+	on:confirmed={() => {
+		deleteFork()
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span>Are you sure you want to delete this workspace fork? (deleting {$workspaceStore})</span>
+	</div>
+</ConfirmationModal>
+{/if}

package/package/components/sidebar/WorkspaceMenu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { isPremiumStore, superadmin, userStore, userWorkspaces, workspaceStore, workspaceUsageStore, workspaceColor } from '../../stores';
-import { Building, Plus, Settings } from 'lucide-svelte';
+import { Building, Plus, Settings, GitFork } from 'lucide-svelte';
 import MenuButton from './MenuButton.svelte';
 import { Menu, MenuItem } from '../meltComponents';
 import { goto } from '../../navigation';
@@ -11,6 +11,13 @@ import { enterpriseLicense } from '../../stores';
 import { isCloudHosted } from '../../cloud';
 import { workspaceAIClients } from '../copilot/lib';
 import { twMerge } from 'tailwind-merge';
+import { buildWorkspaceHierarchy } from '../../utils/workspaceHierarchy';
+function removePrefix(str, prefix) {
+    if (str.startsWith(prefix)) {
+        return str.substring(prefix.length);
+    }
+    return str;
+}
 let { isCollapsed = false, createMenu, strictWorkspaceSelect = false } = $props();
 async function toggleSwitchWorkspace(id) {
     if ($workspaceStore === id) {
@@ -37,24 +44,79 @@ async function toggleSwitchWorkspace(id) {
         await goto('/');
     }
 }
+// Helper function to check if a workspace is forked
+function isForkedWorkspace(workspaceId) {
+    if (!$userWorkspaces)
+        return false;
+    return $userWorkspaces.some((w) => w.id === workspaceId && w.parent_workspace_id != null);
+}
+function getForkedWorkspace(workspaceId) {
+    if (!$userWorkspaces)
+        return undefined;
+    return $userWorkspaces.find((w) => w.id === workspaceId && w.parent_workspace_id != null);
+}
+function getParentWorkspace(parentId) {
+    if (!$userWorkspaces)
+        return undefined;
+    return $userWorkspaces.find((w) => w.id === parentId);
+}
+// Group workspaces into parent-child hierarchy using Svelte 5 derived and the new utility
+const groupedWorkspaces = $derived(() => {
+    if (!$userWorkspaces)
+        return [];
+    return buildWorkspaceHierarchy($userWorkspaces);
+});
 </script>
 
+{#if isForkedWorkspace($workspaceStore ?? '') && !isCollapsed}
+	{@const forkedWorkspace = getForkedWorkspace($workspaceStore ?? '')}
+	{@const parentWorkspace = forkedWorkspace
+		? getParentWorkspace(forkedWorkspace.parent_workspace_id!)
+		: null}
+	<Menu {createMenu} usePointerDownOutside>
+		{#snippet triggr({ trigger })}
+			<div
+				class="group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full text-xs"
+			>
+				<Building size={12} class="text-tertiary" />
+				<span class="text-xs text-tertiary"> {parentWorkspace?.name ?? ''} </span>
+			</div>
+		{/snippet}
+	</Menu>
+{/if}
 <Menu {createMenu} usePointerDownOutside>
 	{#snippet triggr({ trigger })}
-		<MenuButton
-			class="!text-xs"
-			icon={Building}
-			label={$workspaceStore ?? ''}
-			{isCollapsed}
-			color={$workspaceColor}
-			{trigger}
-		/>
+		{@const forkedWorkspace = getForkedWorkspace($workspaceStore ?? '')}
+		{@const parentWorkspace = forkedWorkspace
+			? getParentWorkspace(forkedWorkspace.parent_workspace_id!)
+			: null}
+		{#if forkedWorkspace && parentWorkspace}
+			<div class={isCollapsed ? '' : 'pl-6'}>
+				<MenuButton
+					class="!text-xs"
+					icon={GitFork}
+					label={removePrefix($workspaceStore ?? '', 'wm-fork-')}
+					{isCollapsed}
+					color={$workspaceColor}
+					{trigger}
+				/>
+			</div>
+		{:else}
+			<MenuButton
+				class="!text-xs"
+				icon={Building}
+				label={$workspaceStore ?? ''}
+				{isCollapsed}
+				color={$workspaceColor}
+				{trigger}
+			/>
+		{/if}
 	{/snippet}
 
 	{#snippet children({ item })}
 		<div class="divide-y" role="none">
 			<div class="py-1">
-				{#each $userWorkspaces as workspace}
+				{#each groupedWorkspaces() as { workspace, depth, isForked, parentName }}
 					<MenuItem
 						class={twMerge(
 							'text-xs min-w-0 w-full overflow-hidden flex flex-col py-1.5',
@@ -68,13 +130,37 @@ async function toggleSwitchWorkspace(id) {
 						{item}
 					>
 						<div class="flex items-center justify-between min-w-0 w-full">
-							<div>
-								<div class="text-primary pl-4 truncate text-left text-[1.2em]">{workspace.name}</div
-								>
-								<div
-									class="text-tertiary font-mono pl-4 text-2xs whitespace-nowrap truncate text-left"
-								>
-									{workspace.id}
+							<div
+								class={twMerge('flex items-center gap-2 min-w-0', 'pl-4')}
+								style:padding-left={`${4 + depth * 12}px`}
+							>
+								{#if isForked}
+									<GitFork size={12} class="text-tertiary flex-shrink-0" />
+								{:else}
+									<Building size={12} />
+								{/if}
+								<div class="min-w-0 flex-1">
+									<div
+										class={twMerge(
+											'truncate text-left text-[1.2em]',
+											isForked ? 'text-secondary' : 'text-primary'
+										)}
+									>
+										{workspace.name}
+									</div>
+									<div
+										class={twMerge(
+											'font-mono text-2xs whitespace-nowrap truncate text-left',
+											isForked ? 'text-tertiary opacity-75' : 'text-tertiary'
+										)}
+									>
+										{workspace.id}
+									</div>
+									{#if isForked && parentName}
+										<div class="text-tertiary text-2xs truncate text-left pl-2 min-h-[1rem]">
+											Fork of {parentName}
+										</div>
+									{/if}
 								</div>
 							</div>
 							{#if workspace.color}
@@ -100,6 +186,19 @@ async function toggleSwitchWorkspace(id) {
 					</a>
 				</div>
 			{/if}
+			{#if !strictWorkspaceSelect}
+				<div class="py-1" role="none">
+					<a
+						href="{base}/user/fork_workspace"
+						class="text-primary px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary flex flex-flow gap-2"
+						role="menuitem"
+						tabindex="-1"
+					>
+						<GitFork size={16} />
+						Fork current workspace
+					</a>
+				</div>
+			{/if}
 			{#if !strictWorkspaceSelect}
 				<div class="py-1" role="none">
 					<MenuItem

package/package/components/toast.js

@@ -1,9 +1,12 @@
 //regex that match path starting with u/ or f/ and with at least 2 /
 const pathRegex = /\b(u|f)\/[^\/\s]+\/[^\/\s]+\b/g;
 export function processMessage(message) {
-    return (typeof message == 'string'
-        ? message ?? 'Error without message'
-        : JSON.stringify(message, null, 2)).replaceAll(pathRegex, (path) => {
+    let msg = !message
+        ? 'Error without message'
+        : typeof message != 'string'
+            ? JSON.stringify(message, null, 2)
+            : message;
+    return msg.replaceAll(pathRegex, (path) => {
         return `<span class="bg-surface-secondary p-1 text-xs font-mono whitespace-nowrap rounded-md">${path}</span>`;
     });
 }

package/package/components/triggers/AddTriggersButton.svelte

@@ -3,7 +3,7 @@ import DropdownV2 from '../DropdownV2.svelte';
 import { SchedulePollIcon } from '../icons';
 import { isCloudHosted } from '../../cloud';
 import { CloudOff } from 'lucide-svelte';
-let { setDropdownWidthToButtonWidth = false, children, class: className, triggerScriptPicker, placement = 'bottom', isEditor = false, onAddDraftTrigger, onAddScheduledPoll, onClose } = $props();
+let { setDropdownWidthToButtonWidth = false, children, class: className, placement = 'bottom', isEditor = false, onAddDraftTrigger, onAddScheduledPoll, onClose } = $props();
 let dropdown;
 const cloudHosted = isCloudHosted();
 // Dropdown items for adding new triggers
@@ -56,10 +56,15 @@ const addTriggerItems = [
         icon: triggerIconMap.gcp,
         extra: cloudHosted ? extra : undefined
     },
+    {
+        displayName: 'Email',
+        action: () => onAddDraftTrigger?.('email'),
+        icon: triggerIconMap.email,
+        extra: cloudHosted ? extra : undefined
+    },
     {
         displayName: 'Scheduled Poll',
         action: (e) => {
-            e.preventDefault();
             onAddDraftTrigger?.('poll');
             onAddScheduledPoll?.();
         },
@@ -89,7 +94,6 @@ export function close() {
 	class={className}
 	customWidth={setDropdownWidthToButtonWidth ? triggersButtonWidth : undefined}
 	usePointerDownOutside
-	customMenu={!!triggerScriptPicker}
 	on:close={() => onClose?.()}
 >
 	{#snippet buttonReplacement()}
@@ -97,7 +101,4 @@ export function close() {
 			{@render children?.()}
 		</div>
 	{/snippet}
-	{#snippet menu()}
-		{@render triggerScriptPicker?.()}
-	{/snippet}
 </DropdownV2>

package/package/components/triggers/CaptureWrapper.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">import { workspaceStore } from '../../stores';
 import { CaptureService } from '../../gen';
 import { onDestroy, untrack } from 'svelte';
-import { isObject, sendUserToast, sleep } from '../../utils';
+import { sendUserToast, sleep } from '../../utils';
 import RouteCapture from './http/RouteCapture.svelte';
 import WebhooksCapture from './webhook/WebhooksCapture.svelte';
-import EmailTriggerCaptures from '../details/EmailTriggerCaptures.svelte';
+import DefaultEmailCapture from './email/DefaultEmailCapture.svelte';
 import WebsocketCapture from './websocket/WebsocketCapture.svelte';
 import PostgresCapture from './postgres/PostgresCapture.svelte';
 import KafkaCapture from './kafka/KafkaCapture.svelte';
@@ -12,7 +12,8 @@ import NatsCapture from './nats/NatsCapture.svelte';
 import MqttCapture from './mqtt/MqttCapture.svelte';
 import SqsCapture from './sqs/SqsCapture.svelte';
 import GcpCapture from './gcp/GcpCapture.svelte';
-let { isFlow, path, hasPreprocessor, canHavePreprocessor, captureType = 'webhook', data = {}, connectionInfo = $bindable(undefined), args = $bindable({}), isValid = false, triggerDeployed = false } = $props();
+import EmailCapture from './email/EmailCapture.svelte';
+let { isFlow, path, hasPreprocessor, canHavePreprocessor, captureType = 'webhook', data = {}, connectionInfo = $bindable(undefined), args = {}, isValid = false, triggerDeployed = false } = $props();
 let captureLoading = $state(false);
 let captureActive = $state(false);
 let captureConfigs = $state({});
@@ -64,7 +65,6 @@ async function getCaptureConfigs() {
     }
     return captureConfigs;
 }
-getCaptureConfigs().then((captureConfigs) => setDefaultArgs(captureConfigs));
 async function capture() {
     let i = 0;
     captureActive = true;
@@ -82,16 +82,6 @@ async function capture() {
         await sleep(1000);
     }
 }
-function setDefaultArgs(captureConfigs) {
-    if (captureType in captureConfigs) {
-        const triggerConfig = captureConfigs[captureType].trigger_config;
-        args = isObject(triggerConfig) ? triggerConfig : {};
-    }
-    else {
-        args = {};
-    }
-    ready = true;
-}
 onDestroy(() => {
     captureActive = false;
 });
@@ -206,8 +196,8 @@ $effect(() => {
 				on:captureToggle={handleCapture}
 				on:testWithArgs
 			/>
-		{:else if captureType === 'email'}
-			<EmailTriggerCaptures
+		{:else if captureType === 'default_email'}
+			<DefaultEmailCapture
 				{path}
 				{isFlow}
 				emailDomain={data?.emailDomain}
@@ -291,6 +281,21 @@ $effect(() => {
 				on:captureToggle={handleCapture}
 				on:testWithArgs
 			/>
+		{:else if captureType === 'email'}
+			<EmailCapture
+				local_part={args.local_part}
+				emailDomain={data?.emailDomain}
+				{isValid}
+				{captureInfo}
+				{hasPreprocessor}
+				{isFlow}
+				{captureLoading}
+				on:applyArgs
+				on:updateSchema
+				on:addPreprocessor
+				on:captureToggle={handleCapture}
+				on:testWithArgs
+			/>
 		{/if}
 	</div>
 {/key}

package/package/components/triggers/CaptureWrapper.svelte.d.ts

@@ -37,6 +37,6 @@ declare const CaptureWrapper: $$__sveltets_2_IsomorphicComponent<Props, {
     handleCapture: (e: CustomEvent<{
         disableOnly?: boolean;
     }>) => Promise<void>;
-}, "args" | "connectionInfo">;
+}, "connectionInfo">;
 type CaptureWrapper = InstanceType<typeof CaptureWrapper>;
 export default CaptureWrapper;