windmill-components 1.542.5 → 1.555.0

package/package/components/settings/WorkspaceUserSettings.svelte

@@ -39,8 +39,8 @@ let selectedNewInstanceGroup = $state(undefined);
 let selectedNewRole = $state('developer');
 // Available groups for dropdowns - filter out already configured groups
 let availableGroupItems = $derived(instanceGroups
-    .filter(group => !autoAddInstanceGroups.includes(group.name))
-    .map(group => ({
+    .filter((group) => !autoAddInstanceGroups.includes(group.name))
+    .map((group) => ({
     value: group.name,
     label: group.name + (group.summary ? ` - ${group.summary}` : '')
 })));
@@ -54,6 +54,22 @@ let sortedUsers = $derived(() => {
     });
 });
 let hasNonManualUsers = $derived((filteredUsers || users || []).some((user) => user.added_via?.source === 'instance_group' || user.added_via?.source === 'domain'));
+// Function to check if a manual user can be converted to a group user
+function canConvertToGroup(user) {
+    // User must be manually added (not via instance group or domain)
+    if (user.added_via?.source === 'instance_group' || user.added_via?.source === 'domain') {
+        return false;
+    }
+    // Check if user's email is in any configured instance group
+    const userEmail = user.email;
+    for (const groupName of autoAddInstanceGroups) {
+        const group = instanceGroups.find((g) => g.name === groupName);
+        if (group && group.emails && group.emails.includes(userEmail)) {
+            return true;
+        }
+    }
+    return false;
+}
 async function loadSettings() {
     const settings = await WorkspaceService.getSettings({ workspace: $workspaceStore });
     auto_invite_domain = settings.auto_invite_domain;
@@ -131,7 +147,7 @@ async function addInstanceGroup() {
     }
     catch (e) {
         // Rollback on error
-        autoAddInstanceGroups = autoAddInstanceGroups.filter(g => g !== groupToAdd);
+        autoAddInstanceGroups = autoAddInstanceGroups.filter((g) => g !== groupToAdd);
         delete autoAddInstanceGroupsRoles[groupToAdd];
         sendUserToast('Failed to add instance group', true);
     }
@@ -140,7 +156,7 @@ async function removeInstanceGroup(groupName) {
     const previousGroups = [...autoAddInstanceGroups];
     const previousRole = autoAddInstanceGroupsRoles[groupName];
     try {
-        autoAddInstanceGroups = autoAddInstanceGroups.filter(g => g !== groupName);
+        autoAddInstanceGroups = autoAddInstanceGroups.filter((g) => g !== groupName);
         delete autoAddInstanceGroupsRoles[groupName];
         await saveInstanceGroupSettings();
     }
@@ -165,6 +181,20 @@ async function updateGroupRole(groupName, role) {
         sendUserToast('Failed to update role', true);
     }
 }
+async function convertUserToGroup(username) {
+    try {
+        await UserService.convertUserToGroup({
+            workspace: $workspaceStore ?? '',
+            username
+        });
+        sendUserToast('User converted to group user');
+        listUsers();
+    }
+    catch (e) {
+        console.error('Failed to convert user:', e);
+        sendUserToast('Failed to convert user', true);
+    }
+}
 let domain = $derived($userStore?.email.split('@')[1]);
 $effect(() => {
     if ($workspaceStore) {
@@ -188,6 +218,7 @@ onDestroy(() => {
 });
 let deleteConfirmedCallback = $state(undefined);
 let removeInstanceGroupConfirmedCallback = $state(undefined);
+let convertConfirmedCallback = $state(undefined);
 async function removeAllInvitesFromDomain() {
     await Promise.all(invites
         .filter((x) => isCloudHosted() ? x.email.endsWith('@' + (auto_invite_domain ?? '')) : true)
@@ -293,8 +324,8 @@ $effect(() => {
 							}}
 						>
 							{#snippet children({ item })}
-								<ToggleButton value="invite" size="xs" label="Auto-invite" {item} />
-								<ToggleButton value="add" size="xs" label="Auto-add" {item} />
+								<ToggleButton value="invite" small label="Auto-invite" {item} />
+								<ToggleButton value="add" small label="Auto-add" {item} />
 							{/snippet}
 						</ToggleButtonGroup>
 					{/if}
@@ -394,9 +425,7 @@ $effect(() => {
 				{#snippet content()}
 					<div class="flex flex-col p-4 min-w-[500px]">
 						<div class="flex flex-col gap-4">
-							<span class="text-sm leading-6 font-semibold">
-								Auto-add instance groups
-							</span>
+							<span class="text-sm leading-6 font-semibold"> Auto-add instance groups </span>
 
 							<!-- Add new instance group form -->
 							{#if availableGroupItems.length > 0}
@@ -472,7 +501,7 @@ $effect(() => {
 											</thead>
 											<tbody>
 												{#each autoAddInstanceGroups as groupName (groupName)}
-													{@const group = instanceGroups.find(g => g.name === groupName)}
+													{@const group = instanceGroups.find((g) => g.name === groupName)}
 													<tr class="border-t border-gray-200 dark:border-gray-700">
 														<td class="py-2">
 															<div class="font-medium">{groupName}</div>
@@ -572,7 +601,8 @@ $effect(() => {
 					<Cell head>
 						Added via
 						<Tooltip>
-							Shows how the user was added to the workspace: manually, via domain auto-invite, or through an instance group.
+							Shows how the user was added to the workspace: manually, via domain auto-invite, or
+							through an instance group.
 						</Tooltip>
 					</Cell>
 				{/if}
@@ -593,14 +623,13 @@ $effect(() => {
 		</Head>
 		<tbody class="divide-y bg-surface">
 			{#if filteredUsers}
-				{#each sortedUsers().slice(0, nbDisplayed) as { email, username, is_admin, operator, disabled, added_via }, index (email)}
+				{#each sortedUsers().slice(0, nbDisplayed) as user, index (user.email)}
+					{@const { email, username, is_admin, operator, disabled, added_via } = user}
 					<!-- Add separator between manual users and instance group users -->
 					{#if hasNonManualUsers && index > 0 && sortedUsers()[index - 1]?.added_via?.source !== 'instance_group' && added_via?.source === 'instance_group'}
 						<tr class="bg-surface-secondary">
 							<td colspan={hasNonManualUsers ? 8 : 7} class="px-4 py-2">
-								<div class="text-xs text-tertiary font-bold">
-									Instance group users
-								</div>
+								<div class="text-xs text-tertiary font-bold"> Instance group users </div>
 							</td>
 						</tr>
 					{/if}
@@ -731,8 +760,45 @@ $effect(() => {
 										>
 											Remove
 										</Button>
-										<Tooltip>Cannot remove users synced from instance groups. Either disable the user or remove them from the SCIM group.</Tooltip>
+										<Tooltip
+											>Cannot remove users synced from instance groups. Either disable the user or
+											remove them from the SCIM group.</Tooltip
+										>
 									</div>
+								{:else if canConvertToGroup(user)}
+									<Button
+										color="light"
+										variant="contained"
+										btnClasses="text-blue-500"
+										size="xs"
+										spacingSize="xs2"
+										on:click={() => {
+											convertConfirmedCallback = async () => {
+												await convertUserToGroup(username)
+											}
+										}}
+									>
+										Convert
+									</Button>
+									<Button
+										color="light"
+										variant="contained"
+										btnClasses="text-red-500"
+										size="xs"
+										spacingSize="xs2"
+										on:click={() => {
+											deleteConfirmedCallback = async () => {
+												await UserService.deleteUser({
+													workspace: $workspaceStore ?? '',
+													username
+												})
+												sendUserToast('User removed')
+												listUsers()
+											}
+										}}
+									>
+										Remove
+									</Button>
 								{:else}
 									<Button
 										color="light"
@@ -918,7 +984,35 @@ $effect(() => {
 		}}
 	>
 		<div class="flex flex-col w-full space-y-4">
-			<span>Are you sure you want to remove this instance group from auto-add? This will not remove users already added from this group.</span>
+			<span
+				>Are you sure you want to remove this instance group from auto-add? This will not remove
+				users already added from this group.</span
+			>
 		</div>
 	</ConfirmationModal>
 </div>
+
+<ConfirmationModal
+	open={Boolean(convertConfirmedCallback)}
+	title="Convert to Group User"
+	confirmationText="Convert"
+	on:canceled={() => {
+		convertConfirmedCallback = undefined
+	}}
+	on:confirmed={() => {
+		if (convertConfirmedCallback) {
+			convertConfirmedCallback()
+		}
+		convertConfirmedCallback = undefined
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span>Are you sure you want to convert this user to a group user?</span>
+		<span class="text-sm text-secondary">This will:</span>
+		<ul class="text-sm text-secondary list-disc ml-4 space-y-1">
+			<li>Change the user's role based on their instance group configuration</li>
+			<li>Make their role managed through the instance group settings</li>
+			<li>Prevent manual role changes for this user</li>
+		</ul>
+	</div>
+</ConfirmationModal>

package/package/components/sidebar/CriticalAlertTable.svelte

@@ -7,6 +7,7 @@ import { AlertCircle, CheckCircle2 } from 'lucide-svelte';
 import { devopsRole } from '../../stores';
 import List from '../common/layout/List.svelte';
 import { Skeleton } from '../common';
+import Linkify from './Linkify.svelte';
 export let alerts;
 export let hideAcknowledged = false;
 export let goToNextPage;
@@ -107,7 +108,7 @@ $: availableHeight = (contentHeight - headerHeight - pageSize - 1) / pageSize;
 							</Cell>
 
 							<Cell wrap>
-								<div class="flex-shrink min-w-0 break-words">{message}</div>
+								<div class="flex-shrink min-w-0 break-words"><Linkify text={message} /></div>
 							</Cell>
 							<!-- Flexible width -->
 							<Cell wrap>{formatDate(created_at)}</Cell>

package/package/components/sidebar/Linkify.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">"use strict";
+let { text } = $props();
+// Function to convert text with URLs to HTML
+function linkifyText(text) {
+    // Regex to match URLs starting with http/https and ending with )
+    const urlRegex = /\(((https?:\/\/[^\s)]+))\)/g;
+    // Replace matched patterns with anchor tags
+    return text.replace(urlRegex, '(<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>)');
+}
+let processedText = $derived(linkifyText(text));
+</script>
+
+<!-- Use @html to render the HTML -->
+{@html processedText}

package/package/components/sidebar/Linkify.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Linkify: import("svelte").Component<{
+    text: any;
+}, {}, "">;
+type Linkify = ReturnType<typeof Linkify>;
+export default Linkify;

package/package/components/sidebar/MenuLink.svelte

@@ -5,7 +5,7 @@ import { base } from '$app/paths';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
 import { goto } from '$app/navigation';
 import { twMerge } from 'tailwind-merge';
-let { aiId = undefined, aiDescription = undefined, label, href, icon = undefined, isCollapsed, disabled = false, lightMode = false, item = undefined, class: classNames = '' } = $props();
+let { aiId = undefined, aiDescription = undefined, label, href, icon = undefined, isCollapsed, disabled = false, lightMode = false, item = undefined, class: classNames = '', onclick = undefined } = $props();
 let isSelected = $state(false);
 navigating.subscribe(() => {
     if (href === `${base}/`) {
@@ -28,6 +28,7 @@ navigating.subscribe(() => {
 					goto(href)
 				}
 			}}
+			{onclick}
 			class={twMerge(
 				'group flex items-center px-2 py-2 text-sm font-light rounded-md h-8 gap-3',
 				isSelected

package/package/components/sidebar/MenuLink.svelte.d.ts

@@ -10,6 +10,7 @@ interface Props {
     lightMode?: boolean;
     item?: MenubarMenuElements['item'] | undefined;
     class?: string;
+    onclick?: (ev: MouseEvent) => any;
 }
 declare const MenuLink: import("svelte").Component<Props, {}, "">;
 type MenuLink = ReturnType<typeof MenuLink>;

package/package/components/sidebar/SidebarContent.svelte

@@ -113,7 +113,12 @@ let mainMenuLinks = $derived([
         href: `${base}/runs`,
         icon: Play,
         aiId: 'sidebar-menu-link-runs',
-        aiDescription: 'Button to navigate to runs'
+        aiDescription: 'Button to navigate to runs',
+        onclick: () => {
+            setTimeout(() => {
+                window.dispatchEvent(new Event('popstate'));
+            }, 100);
+        }
     },
     {
         label: 'Variables',
@@ -295,7 +300,7 @@ let secondaryMenuLinks = $derived([
                     }
                 ]
                 : []),
-            ...($workspaceStore?.startsWith("wm-fork")
+            ...($workspaceStore?.startsWith('wm-fork')
                 ? [
                     {
                         label: 'Delete Forked Workspace',
@@ -306,7 +311,7 @@ let secondaryMenuLinks = $derived([
                         faIcon: undefined
                     }
                 ]
-                : []),
+                : [])
         ],
         disabled: $userStore?.operator
     },
@@ -508,14 +513,9 @@ let secondaryMenuLinks = $derived([
 							{/snippet}
 						</Menu>
 					{:else}
-						<MenuSingleItem {createMenu}>
-							{#snippet triggr({ trigger })}
-								<div class="w-full">
-									<MenuButton class="!text-2xs" {...menuLink} {isCollapsed} {trigger} />
-								</div>
-							{/snippet}
-							{#snippet children({ item })}
-								<MenuLink class="!text-2xs" {...menuLink} {isCollapsed} {item} />
+						<MenuSingleItem>
+							{#snippet children({})}
+								<MenuLink class="!text-2xs" {...menuLink} {isCollapsed} />
 							{/snippet}
 						</MenuSingleItem>
 					{/if}
@@ -601,20 +601,20 @@ let secondaryMenuLinks = $derived([
 	</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 $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

@@ -120,12 +120,17 @@ const groupedWorkspaces = $derived(() => {
 					<MenuItem
 						class={twMerge(
 							'text-xs min-w-0 w-full overflow-hidden flex flex-col py-1.5',
+							workspace.disabled && 'opacity-50 cursor-not-allowed',
 							$workspaceStore === workspace.id
 								? 'cursor-default bg-surface-selected'
-								: 'cursor-pointer hover:bg-surface-hover data-[highlighted]:bg-surface-hover'
+								: workspace.disabled
+									? ''
+									: 'cursor-pointer hover:bg-surface-hover data-[highlighted]:bg-surface-hover'
 						)}
 						onClick={async () => {
-							await toggleSwitchWorkspace(workspace.id)
+							if (!workspace.disabled) {
+								await toggleSwitchWorkspace(workspace.id)
+							}
 						}}
 						{item}
 					>
@@ -146,7 +151,7 @@ const groupedWorkspaces = $derived(() => {
 											isForked ? 'text-secondary' : 'text-primary'
 										)}
 									>
-										{workspace.name}
+										{workspace.name}{workspace.disabled ? ' (user disabled)' : ''}
 									</div>
 									<div
 										class={twMerge(

package/package/components/table/Cell.svelte

@@ -1,22 +1,15 @@
 <script lang="ts">import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-export let first = false;
-export let last = false;
-export let numeric = false;
-export let head = false;
-export let shouldStopPropagation = false;
-export let selected = false;
-export let sticky = false;
-export let wrap = false;
+let { first = false, last = false, numeric = false, head = false, shouldStopPropagation = false, selected = false, sticky = false, wrap = false, children, ...rest } = $props();
 let Tag = head ? 'th' : 'td';
 const { size } = getContext('datatable');
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <svelte:element
 	this={Tag}
-	{...$$restProps}
-	on:click={(e) => {
+	{...rest}
+	onclick={(e) => {
 		if (shouldStopPropagation) e.stopPropagation()
 	}}
 	class={twMerge(
@@ -36,14 +29,14 @@ const { size } = getContext('datatable');
 		size === 'xs' ? 'px-1 py-1.5' : '',
 		selected ? 'bg-blue-50 dark:bg-blue-900/50' : '',
 		'transition-all',
-		$$restProps.class
+		rest.class
 	)}
 >
 	{#if sticky}
 		<div class={twMerge(first ? 'border-r' : ' border-l ')}>
-			<slot />
+			{@render children?.()}
 		</div>
 	{:else}
-		<slot />
+		{@render children?.()}
 	{/if}
 </svelte:element>

package/package/components/table/Cell.svelte.d.ts

@@ -1,37 +1,15 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    first?: boolean;
+    last?: boolean;
+    numeric?: boolean;
+    head?: boolean;
+    shouldStopPropagation?: boolean;
+    selected?: boolean;
+    sticky?: boolean;
+    wrap?: boolean;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Cell: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    first?: boolean | undefined;
-    last?: boolean | undefined;
-    numeric?: boolean | undefined;
-    head?: boolean | undefined;
-    shouldStopPropagation?: boolean | undefined;
-    selected?: boolean | undefined;
-    sticky?: boolean | undefined;
-    wrap?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Cell = InstanceType<typeof Cell>;
+declare const Cell: import("svelte").Component<Props, {}, "">;
+type Cell = ReturnType<typeof Cell>;
 export default Cell;

package/package/components/table/tableUtils.js

@@ -38,6 +38,6 @@ export function convertJsonToCsv(arr) {
         return csv;
     }
     catch (err) {
-        throw new Error('An error occured when generating CSV:' + err);
+        throw new Error('An error occurred when generating CSV:' + err);
     }
 }

package/package/components/text_input/TextInput.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">export function inputBorderClass({ error, forceFocus } = {}) {
+    return twMerge('transition-colors border', forceFocus
+        ? '!border-nord-900 dark:!border-nord-900'
+        : '!border-nord-400 dark:!border-nord-300 hover:!border-nord-900/50 hover:dark:!border-nord-900/50 focus:!border-nord-900 dark:focus:!border-nord-900', error
+        ? '!border-red-300 focus:!border-red-400 hover:!border-red-500 dark:!border-red-400/40 dark:hover:!border-red-600/40'
+        : '');
+}
+export const inputBaseClass = 'rounded-md focus:ring-0 no-default-style text-sm text-tertiary dark:text-secondary !bg-surface-secondary disabled:!bg-surface-disabled disabled:!border-none disabled:!text-hint disabled:cursor-not-allowed shadow-none py-2 px-3 placeholder-hint';
+</script>
+
+<script lang="ts">import { twMerge } from 'tailwind-merge';
+export function focus() {
+    inputEl?.focus();
+}
+let inputEl = $state();
+let { inputProps, value = $bindable(), class: className = '', error } = $props();
+</script>
+
+<input
+	{...inputProps}
+	class={twMerge(
+		inputBaseClass,
+		'w-full',
+		'[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+		inputBorderClass({ error: !!error }),
+		className
+	)}
+	bind:this={inputEl}
+	bind:value
+/>

package/package/components/text_input/TextInput.svelte.d.ts

@@ -0,0 +1,17 @@
+export declare function inputBorderClass({ error, forceFocus }?: {
+    error?: boolean;
+    forceFocus?: boolean;
+}): string;
+export declare const inputBaseClass = "rounded-md focus:ring-0 no-default-style text-sm text-tertiary dark:text-secondary !bg-surface-secondary disabled:!bg-surface-disabled disabled:!border-none disabled:!text-hint disabled:cursor-not-allowed shadow-none py-2 px-3 placeholder-hint";
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = {
+    inputProps?: HTMLInputAttributes;
+    value?: string;
+    class?: string;
+    error?: string;
+};
+declare const TextInput: import("svelte").Component<Props, {
+    focus: () => void;
+}, "value">;
+type TextInput = ReturnType<typeof TextInput>;
+export default TextInput;

package/package/components/triggers/AddTriggersButton.svelte

@@ -88,6 +88,7 @@ export function close() {
 {/snippet}
 
 <DropdownV2
+	enableFlyTransition
 	bind:this={dropdown}
 	items={addTriggerItems}
 	{placement}

package/package/components/triggers/TriggersEditor.svelte

@@ -15,6 +15,7 @@ import { triggerTypeToCaptureKind, CLOUD_DISABLED_TRIGGER_TYPES } from './utils'
 import { isCloudHosted } from '../../cloud';
 import { ScheduleService, WebsocketTriggerService, PostgresTriggerService, KafkaTriggerService, NatsTriggerService, MqttTriggerService, HttpTriggerService, GcpTriggerService, SqsTriggerService, EmailTriggerService } from '../../gen';
 import { sendUserToast } from '../../toast';
+import Alert from '../common/alert/Alert.svelte';
 let { noEditor, newItem = false, currentPath, fakeInitialPath = '', hash = undefined, args = {}, initialPath, isFlow, canHavePreprocessor = false, hasPreprocessor = false, isDeployed = false, schema = undefined, noCapture = false, isEditor = true, onDeployTrigger } = $props();
 let config = $state({});
 let width = $state(0);
@@ -24,6 +25,8 @@ let renderCount = $state(0);
 let loading = $state(false);
 const useVerticalTriggerBar = $derived(width < 1000);
 const { triggersState, triggersCount } = getContext('TriggerContext');
+const flowEditorContext = getContext('FlowEditorContext');
+const chatInputEnabled = $derived(Boolean(flowEditorContext?.flowStore?.val?.value?.chat_input_enabled));
 const dispatch = createEventDispatcher();
 onDestroy(() => {
     dispatch('exitTriggers');
@@ -143,6 +146,13 @@ const cloudDisabled = $derived(CLOUD_DISABLED_TRIGGER_TYPES.includes(triggersSta
 </script>
 
 <div bind:clientWidth={width} class="h-full w-full">
+	{#if chatInputEnabled}
+		<div class="p-2 pb-0">
+			<Alert type="warning" title="Chat Input Mode Enabled" size="xs">
+				This flow will only accept <span class="font-mono text-xs bg-surface-secondary px-1 rounded">user_message</span> as input parameter.
+			</Alert>
+		</div>
+	{/if}
 	<FlowCard {noEditor} noHeader>
 		<Splitpanes horizontal>
 			<Pane>
@@ -241,7 +251,7 @@ const cloudDisabled = $derived(CLOUD_DISABLED_TRIGGER_TYPES.includes(triggersSta
 							{/key}
 						{:else}
 							<span class="text-sm text-tertiary text-center mx-auto mt-2"
-								>{`Select a trigger from the ${useVerticalTriggerBar ? 'left toolbar' : 'table'} or a create a new one`}</span
+								>{`Select a trigger from the ${useVerticalTriggerBar ? 'left toolbar' : 'table'} or create a new one`}</span
 							>
 						{/if}
 					</div>

package/package/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte

@@ -57,7 +57,7 @@ async function loadAllSubscriptionFromGooglePubSubTopic() {
         loadingSubscription = false;
     }
 }
-let { can_write = false, headless = false, isValid = $bindable(false), gcp_resource_path = $bindable(''), subscription_id = $bindable(''), topic_id = $bindable(''), delivery_type = $bindable('pull'), delivery_config = $bindable(), subscription_mode = $bindable('create_update'), base_endpoint = $bindable(getBaseUrl()), auto_acknowledge_msg = $bindable(true), path = '', showTestingBadge = false, cloud_subscription_id = $bindable(''), create_update_subscription_id = $bindable('') } = $props();
+let { can_write = false, headless = false, isValid = $bindable(false), gcp_resource_path = $bindable(''), subscription_id = $bindable(''), topic_id = $bindable(''), delivery_type = $bindable('pull'), delivery_config = $bindable(), subscription_mode = $bindable('create_update'), base_endpoint = $bindable(getBaseUrl()), auto_acknowledge_msg = $bindable(true), ack_deadline = $bindable(), path = '', showTestingBadge = false, cloud_subscription_id = $bindable(''), create_update_subscription_id = $bindable('') } = $props();
 if (gcp_resource_path) {
     loadAllPubSubTopicsFromProject();
 }

package/package/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte.d.ts

@@ -15,7 +15,8 @@ interface Props {
     cloud_subscription_id?: string;
     create_update_subscription_id?: string;
     auto_acknowledge_msg: boolean;
+    ack_deadline?: number;
 }
-declare const GcpTriggerEditorConfigSection: import("svelte").Component<Props, {}, "base_endpoint" | "gcp_resource_path" | "topic_id" | "subscription_id" | "delivery_type" | "subscription_mode" | "delivery_config" | "auto_acknowledge_msg" | "isValid" | "cloud_subscription_id" | "create_update_subscription_id">;
+declare const GcpTriggerEditorConfigSection: import("svelte").Component<Props, {}, "base_endpoint" | "gcp_resource_path" | "topic_id" | "subscription_id" | "delivery_type" | "subscription_mode" | "delivery_config" | "auto_acknowledge_msg" | "ack_deadline" | "isValid" | "cloud_subscription_id" | "create_update_subscription_id">;
 type GcpTriggerEditorConfigSection = ReturnType<typeof GcpTriggerEditorConfigSection>;
 export default GcpTriggerEditorConfigSection;