windmill-components 1.448.50 → 1.472.2

package/package/components/triggers/sqs/SqsTriggerPanel.svelte

@@ -0,0 +1,123 @@
+<script>import { enterpriseLicense, userStore, workspaceStore } from '../../../stores';
+import { SqsTriggerService } from '../../../gen';
+import { canWrite } from '../../../utils';
+import { getContext, onMount } from 'svelte';
+import { isCloudHosted } from '../../../cloud';
+import Section from '../../Section.svelte';
+import { Alert } from '../../common';
+import Description from '../../Description.svelte';
+import TriggersEditorSection from '../TriggersEditorSection.svelte';
+import SqsTriggerEditor from './SqsTriggerEditor.svelte';
+export let isFlow;
+export let path;
+export let newItem = false;
+export let isEditor = false;
+export let canHavePreprocessor = false;
+export let hasPreprocessor = false;
+let sqsTriggerEditor;
+let openForm = true;
+let dontCloseOnLoad = false;
+$: path && loadTriggers();
+const { triggersCount, selectedTrigger, defaultValues } = getContext('TriggerContext');
+onMount(() => {
+    if (defaultValues &&
+        $selectedTrigger === 'sqs' &&
+        Object.keys($defaultValues ?? {}).length > 0) {
+        sqsTriggerEditor.openNew(isFlow, path, $defaultValues);
+        defaultValues.set(undefined);
+    }
+});
+let sqsTriggers = undefined;
+export async function loadTriggers() {
+    try {
+        sqsTriggers = (await SqsTriggerService.listSqsTriggers({
+            workspace: $workspaceStore ?? '',
+            path,
+            isFlow
+        })).map((x) => {
+            return { canWrite: canWrite(x.path, x.extra_perms, $userStore), ...x };
+        });
+        $triggersCount = { ...($triggersCount ?? {}), sqs_count: sqsTriggers?.length };
+        openForm = sqsTriggers?.length === 0 || dontCloseOnLoad;
+    }
+    catch (e) {
+        console.error('impossible to load SQS triggers', e);
+    }
+}
+</script>
+
+<SqsTriggerEditor
+	on:update={() => {
+		loadTriggers()
+	}}
+	bind:this={sqsTriggerEditor}
+/>
+
+{#if !$enterpriseLicense}
+	<Alert title="EE Only" type="warning" size="xs">
+		SQS triggers are an enterprise only feature.
+	</Alert>
+{:else if isCloudHosted()}
+	<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
+		SQS triggers are disabled in the multi-tenant cloud.
+	</Alert>
+{:else}
+	<div class="flex flex-col gap-4">
+		<Description
+			link="https://docs.aws.amazon.com/AWSSimpleQueueService/latest/SQSDeveloperGuide/sqs-how-it-works.html"
+		>
+			SQS triggers allow your scripts/flows to process messages from Amazon Simple Queue Service
+			(SQS) in real time. Each trigger listens to an SQS queue and executes a script or a flow when
+			new messages arrive.
+		</Description>
+
+		{#if !newItem && sqsTriggers && sqsTriggers.length > 0}
+			<Section label="SQS">
+				<div class="flex flex-col gap-4">
+					<div class="flex flex-col divide-y pt-2">
+						{#each sqsTriggers as sqsTriggers (sqsTriggers.path)}
+							<div class="grid grid-cols-5 text-2xs items-center py-2">
+								<div class="col-span-2 truncate">{sqsTriggers.path}</div>
+								<div class="col-span-2 truncate">
+									{sqsTriggers.queue_url}
+								</div>
+								<div class="flex justify-end">
+									<button
+										on:click={() => sqsTriggerEditor?.openEdit(sqsTriggers.path, isFlow)}
+										class="px-2"
+									>
+										{#if sqsTriggers.canWrite}
+											Edit
+										{:else}
+											View
+										{/if}
+									</button>
+								</div>
+							</div>
+						{/each}
+					</div>
+				</div>
+			</Section>
+		{/if}
+
+		<TriggersEditorSection
+			on:applyArgs
+			on:saveTrigger={(e) => {
+				sqsTriggerEditor?.openNew(isFlow, path, e.detail.config)
+			}}
+			on:addPreprocessor
+			on:updateSchema
+			on:testWithArgs
+			cloudDisabled={false}
+			triggerType="sqs"
+			{isFlow}
+			{path}
+			{isEditor}
+			{canHavePreprocessor}
+			{hasPreprocessor}
+			{newItem}
+			{openForm}
+			bind:showCapture={dontCloseOnLoad}
+		/>
+	</div>
+{/if}

package/package/components/triggers/sqs/SqsTriggerPanel.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isFlow: boolean;
+        path: string;
+        newItem?: boolean | undefined;
+        isEditor?: boolean | undefined;
+        canHavePreprocessor?: boolean | undefined;
+        hasPreprocessor?: boolean | undefined;
+        loadTriggers?: (() => Promise<void>) | undefined;
+    };
+    events: {
+        applyArgs: any;
+        addPreprocessor: any;
+        updateSchema: any;
+        testWithArgs: any;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SqsTriggerPanelProps = typeof __propDef.props;
+export type SqsTriggerPanelEvents = typeof __propDef.events;
+export type SqsTriggerPanelSlots = typeof __propDef.slots;
+export default class SqsTriggerPanel extends SvelteComponent<SqsTriggerPanelProps, SqsTriggerPanelEvents, SqsTriggerPanelSlots> {
+    get loadTriggers(): () => Promise<void>;
+}
+export {};

package/package/components/triggers/{WebhooksConfigSection.svelte → webhook/WebhooksConfigSection.svelte}

@@ -1,24 +1,24 @@
-<script>import Label from '../Label.svelte';
-import Tooltip from '../Tooltip.svelte';
-import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
-import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
-import { DEFAULT_WEBHOOK_TYPE, SCRIPT_VIEW_SHOW_EXAMPLE_CURL, SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON } from '../../consts';
+<script>import Label from '../../Label.svelte';
+import Tooltip from '../../Tooltip.svelte';
+import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
+import { DEFAULT_WEBHOOK_TYPE, SCRIPT_VIEW_SHOW_EXAMPLE_CURL, SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON } from '../../../consts';
 import bash from 'svelte-highlight/languages/bash';
-import { Tabs, Tab, TabContent, Button } from '../common';
+import { Tabs, Tab, TabContent, Button } from '../../common';
 import { ArrowDownRight, ArrowUpRight, Clipboard } from 'lucide-svelte';
 import { Highlight } from 'svelte-highlight';
 import { typescript } from 'svelte-highlight/languages';
-import ClipboardPanel from '../details/ClipboardPanel.svelte';
-import { copyToClipboard } from '../../utils';
+import ClipboardPanel from '../../details/ClipboardPanel.svelte';
+import { copyToClipboard } from '../../../utils';
 // import { page } from '$app/stores'
-import { base } from '../../base';
-import TriggerTokens from './TriggerTokens.svelte';
-import { workspaceStore, userStore } from '../../stores';
-import UserSettings from '../UserSettings.svelte';
-import { generateRandomString } from '../../utils';
-import CopyableCodeBlock from '../details/CopyableCodeBlock.svelte';
-import CaptureSection, {} from './CaptureSection.svelte';
-import CaptureTable from './CaptureTable.svelte';
+import { base } from '../../../base';
+import TriggerTokens from '../TriggerTokens.svelte';
+import { workspaceStore, userStore } from '../../../stores';
+import UserSettings from '../../UserSettings.svelte';
+import { generateRandomString } from '../../../utils';
+import CopyableCodeBlock from '../../details/CopyableCodeBlock.svelte';
+import CaptureSection, {} from '../CaptureSection.svelte';
+import CaptureTable from '../CaptureTable.svelte';
 export let isFlow = false;
 export let path = '';
 export let hash = undefined;
@@ -250,26 +250,29 @@ $: url =
 			<div class="flex flex-row justify-between">
 				<div class="text-sm font-normal text-secondary flex flex-row items-center">Request type</div
 				>
-				<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={webhookType}>
+				<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={webhookType} let:item>
 					<ToggleButton
 						label="Async"
 						value="async"
 						tooltip="The returning value is the uuid of the job assigned to execute the job."
+						{item}
 					/>
 					<ToggleButton
 						label="Sync"
 						value="sync"
 						tooltip="Triggers the execution, wait for the job to complete and return it as a response."
+						{item}
 					/>
 				</ToggleButtonGroup>
 			</div>
 			<div class="flex flex-row justify-between">
 				<div class="text-sm font-normal text-secondary flex flex-row items-center">Call method</div>
-				<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType}>
+				<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType} let:item>
 					<ToggleButton
 						label="POST by path"
 						value="path"
 						icon={ArrowUpRight}
+						{item}
 						selectedColor="#fb923c"
 					/>
 					{#if !isFlow}
@@ -279,6 +282,7 @@ $: url =
 							icon={ArrowUpRight}
 							selectedColor="#fb923c"
 							disabled={!hash}
+							{item}
 						/>
 					{/if}
 
@@ -287,6 +291,7 @@ $: url =
 						value="get_path"
 						icon={ArrowDownRight}
 						disabled={webhookType !== 'sync'}
+						{item}
 						selectedColor="#14b8a6"
 					/>
 				</ToggleButtonGroup>
@@ -295,9 +300,9 @@ $: url =
 				<div class="text-sm font-normal text-secondary flex flex-row items-center"
 					>Token configuration</div
 				>
-				<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={tokenType}>
-					<ToggleButton label="Token in Headers" value="headers" />
-					<ToggleButton label="Token in Query" value="query" />
+				<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={tokenType} let:item>
+					<ToggleButton label="Token in Headers" value="headers" {item} />
+					<ToggleButton label="Token in Query" value="query" {item} />
 				</ToggleButtonGroup>
 			</div>
 		</div>

package/package/components/triggers/{WebhooksConfigSection.svelte.d.ts → webhook/WebhooksConfigSection.svelte.d.ts}

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
-import TriggerTokens from './TriggerTokens.svelte';
-import { type CaptureInfo } from './CaptureSection.svelte';
-import CaptureTable from './CaptureTable.svelte';
+import TriggerTokens from '../TriggerTokens.svelte';
+import { type CaptureInfo } from '../CaptureSection.svelte';
+import CaptureTable from '../CaptureTable.svelte';
 declare const __propDef: {
     props: {
         isFlow?: boolean | undefined;
@@ -16,7 +16,9 @@ declare const __propDef: {
         captureInfo?: CaptureInfo | undefined;
     };
     events: {
-        captureToggle: CustomEvent<undefined>;
+        captureToggle: CustomEvent<{
+            disableOnly?: boolean | undefined;
+        }>;
         applyArgs: CustomEvent<{
             kind: "preprocessor" | "main";
             args: Record<string, any> | undefined;

package/package/components/triggers/{WebhooksPanel.svelte → webhook/WebhooksPanel.svelte}

@@ -1,7 +1,7 @@
-<script>import { Alert } from '../common';
-import Description from '../Description.svelte';
-import HighlightTheme from '../HighlightTheme.svelte';
-import TriggersEditorSection from './TriggersEditorSection.svelte';
+<script>import { Alert } from '../../common';
+import Description from '../../Description.svelte';
+import HighlightTheme from '../../HighlightTheme.svelte';
+import TriggersEditorSection from '../TriggersEditorSection.svelte';
 export let token;
 export let args = {};
 export let scopes = [];
@@ -50,5 +50,6 @@ $: data = {
 		{canHavePreprocessor}
 		{hasPreprocessor}
 		{newItem}
+		alwaysOpened={true}
 	/>
 </div>

package/package/components/triggers/{WebsocketEditorConfigSection.svelte → websocket/WebsocketEditorConfigSection.svelte}

@@ -1,14 +1,15 @@
-<script>import Section from '../Section.svelte';
-import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
-import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
-import ScriptPicker from '../ScriptPicker.svelte';
-import Required from '../Required.svelte';
+<script>import Section from '../../Section.svelte';
+import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
+import ScriptPicker from '../../ScriptPicker.svelte';
+import Required from '../../Required.svelte';
 import { Loader2 } from 'lucide-svelte';
-import CaptureSection, {} from './CaptureSection.svelte';
-import CaptureTable from './CaptureTable.svelte';
-import { sendUserToast } from '../../utils';
-import { FlowService, ScriptService } from '../../gen';
-import { workspaceStore } from '../../stores';
+import CaptureSection, {} from '../CaptureSection.svelte';
+import CaptureTable from '../CaptureTable.svelte';
+import { sendUserToast } from '../../../utils';
+import { FlowService, ScriptService } from '../../../gen';
+import { workspaceStore } from '../../../stores';
+import TestTriggerConnection from '../TestTriggerConnection.svelte';
 export let url;
 export let url_runnable_args;
 export let dirtyUrl = false;
@@ -85,7 +86,7 @@ $: isValid = urlError === '' && (!url?.startsWith('$') || areRunnableArgsValid);
 			bind:captureTable
 		/>
 	{/if}
-	<Section label="Websocket" {headless}>
+	<Section label="WebSocket" {headless}>
 		<div class="mb-2">
 			<ToggleButtonGroup
 				selected={url?.startsWith('$') ? 'runnable' : 'static'}
@@ -93,9 +94,10 @@ $: isValid = urlError === '' && (!url?.startsWith('$') || areRunnableArgsValid);
 					url = ev.detail === 'runnable' ? '$script:' : ''
 					url_runnable_args = {}
 				}}
+				let:item
 			>
-				<ToggleButton value="static" label="Static URL" />
-				<ToggleButton value="runnable" label="Runnable result as URL" />
+				<ToggleButton value="static" label="Static URL" {item} />
+				<ToggleButton value="runnable" label="Runnable result as URL" {item} />
 			</ToggleButtonGroup>
 		</div>
 		{#if url?.startsWith('$')}
@@ -126,7 +128,7 @@ $: isValid = urlError === '' && (!url?.startsWith('$') || areRunnableArgsValid);
 			{#if url.split(':')[1]?.length > 0}
 				{#if urlRunnableSchema}
 					<p class="font-semibold text-sm mt-4 mb-2">Arguments</p>
-					{#await import('../SchemaForm.svelte')}
+					{#await import('../../SchemaForm.svelte')}
 						<Loader2 class="animate-spin mt-2" />
 					{:then Module}
 						{#key urlRunnableSchema}
@@ -149,30 +151,36 @@ $: isValid = urlError === '' && (!url?.startsWith('$') || areRunnableArgsValid);
 		{:else}
 			<div class="flex flex-col w-full gap-4">
 				<label class="block grow w-full">
-					<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
-						<div>
-							URL
-							<Required required={true} />
+					<div class="flex flex-col gap-1">
+						<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
+							<div>
+								URL
+								<Required required={true} />
+							</div>
+						</div>
+						<input
+							type="text"
+							autocomplete="off"
+							bind:value={url}
+							disabled={!can_write}
+							on:input={() => {
+								dirtyUrl = true
+							}}
+							placeholder="ws://example.com"
+							class={urlError === ''
+								? ''
+								: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
+						/>
+						<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5">
+							{dirtyUrl ? urlError : ''}
 						</div>
-					</div>
-					<input
-						type="text"
-						autocomplete="off"
-						bind:value={url}
-						disabled={!can_write}
-						on:input={() => {
-							dirtyUrl = true
-						}}
-						placeholder="ws://example.com"
-						class={urlError === ''
-							? ''
-							: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
-					/>
-					<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5">
-						{dirtyUrl ? urlError : ''}
 					</div>
 				</label>
 			</div>
 		{/if}
+
+		{#if isValid}
+			<TestTriggerConnection kind="websocket" args={{ url, url_runnable_args }} />
+		{/if}
 	</Section>
 </div>

package/package/components/triggers/{WebsocketEditorConfigSection.svelte.d.ts → websocket/WebsocketEditorConfigSection.svelte.d.ts}

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
-import { type CaptureInfo } from './CaptureSection.svelte';
-import CaptureTable from './CaptureTable.svelte';
+import { type CaptureInfo } from '../CaptureSection.svelte';
+import CaptureTable from '../CaptureTable.svelte';
 declare const __propDef: {
     props: {
         url: string | undefined;
@@ -14,7 +14,9 @@ declare const __propDef: {
         isValid?: boolean | undefined;
     };
     events: {
-        captureToggle: CustomEvent<undefined>;
+        captureToggle: CustomEvent<{
+            disableOnly?: boolean | undefined;
+        }>;
         applyArgs: CustomEvent<{
             kind: "preprocessor" | "main";
             args: Record<string, any> | undefined;

package/package/components/triggers/{WebsocketTriggerEditorInner.svelte → websocket/WebsocketTriggerEditorInner.svelte}

@@ -1,19 +1,19 @@
-<script>import { Alert, Button } from '../common';
-import Drawer from '../common/drawer/Drawer.svelte';
-import DrawerContent from '../common/drawer/DrawerContent.svelte';
-import Path from '../Path.svelte';
-import Required from '../Required.svelte';
-import ScriptPicker from '../ScriptPicker.svelte';
-import { FlowService, ScriptService, WebsocketTriggerService } from '../../gen';
-import { usedTriggerKinds, userStore, workspaceStore } from '../../stores';
-import { canWrite, emptySchema, emptyString, sendUserToast } from '../../utils';
+<script>import { Alert, Button } from '../../common';
+import Drawer from '../../common/drawer/Drawer.svelte';
+import DrawerContent from '../../common/drawer/DrawerContent.svelte';
+import Path from '../../Path.svelte';
+import Required from '../../Required.svelte';
+import ScriptPicker from '../../ScriptPicker.svelte';
+import { FlowService, ScriptService, WebsocketTriggerService } from '../../../gen';
+import { usedTriggerKinds, userStore, workspaceStore } from '../../../stores';
+import { canWrite, emptySchema, emptyString, sendUserToast } from '../../../utils';
 import { createEventDispatcher } from 'svelte';
-import Section from '../Section.svelte';
+import Section from '../../Section.svelte';
 import { Loader2, Save, X, Plus } from 'lucide-svelte';
-import Label from '../Label.svelte';
-import Toggle from '../Toggle.svelte';
+import Label from '../../Label.svelte';
 import { fade } from 'svelte/transition';
-import JsonEditor from '../apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
+import JsonEditor from '../../JsonEditor.svelte';
+import Toggle from '../../Toggle.svelte';
 import WebsocketEditorConfigSection from './WebsocketEditorConfigSection.svelte';
 let drawer;
 let is_flow = false;
@@ -31,6 +31,7 @@ let enabled = false;
 let filters = [];
 let initial_messages = [];
 let url_runnable_args = {};
+let can_return_message = false;
 let dirtyPath = false;
 let can_write = true;
 let drawerLoading = true;
@@ -72,6 +73,7 @@ export async function openNew(nis_flow, fixedScriptPath_, defaultValues) {
         initial_messages = [];
         url_runnable_args = defaultValues?.url_runnable_args ?? {};
         dirtyPath = false;
+        can_return_message = false;
     }
     finally {
         drawerLoading = false;
@@ -91,6 +93,7 @@ async function loadTrigger() {
     filters = s.filters;
     initial_messages = s.initial_messages ?? [];
     url_runnable_args = s.url_runnable_args;
+    can_return_message = s.can_return_message;
     can_write = canWrite(s.path, s.extra_perms, $userStore);
 }
 let initialMessageRunnableSchemas = {};
@@ -136,7 +139,8 @@ async function updateTrigger() {
                 url,
                 filters,
                 initial_messages,
-                url_runnable_args
+                url_runnable_args,
+                can_return_message
             }
         });
         sendUserToast(`Websocket trigger ${path} updated`);
@@ -152,7 +156,8 @@ async function updateTrigger() {
                 enabled: true,
                 filters,
                 initial_messages,
-                url_runnable_args
+                url_runnable_args,
+                can_return_message
             }
         });
         sendUserToast(`Websocket trigger ${path} created`);
@@ -170,9 +175,9 @@ let isValid = false;
 	<DrawerContent
 		title={edit
 			? can_write
-				? `Edit WS trigger ${initialPath}`
-				: `WS trigger ${initialPath}`
-			: 'New WS trigger'}
+				? `Edit WebSocket trigger ${initialPath}`
+				: `WebSocket trigger ${initialPath}`
+			: 'New WebSocket trigger'}
 		on:close={drawer.closeDrawer}
 	>
 		<svelte:fragment slot="actions">
@@ -218,7 +223,7 @@ let isValid = false;
 				{#if edit}
 					Changes can take up to 30 seconds to take effect.
 				{:else}
-					New websocket triggers can take up to 30 seconds to start listening.
+					New WebSocket triggers can take up to 30 seconds to start listening.
 				{/if}
 			</Alert>
 			<div class="flex flex-col gap-12 mt-6">
@@ -237,6 +242,38 @@ let isValid = false;
 					</Label>
 				</div>
 
+				<Section label="Runnable" class="flex flex-col gap-4">
+					<div>
+						<p class="text-xs mb-1 text-tertiary">
+							Pick a script or flow to be triggered<Required required={true} />
+						</p>
+						<div class="flex flex-row mb-2">
+							<ScriptPicker
+								disabled={fixedScriptPath != '' || !can_write}
+								initialPath={fixedScriptPath || initialScriptPath}
+								kinds={['script']}
+								allowFlow={true}
+								bind:itemKind
+								bind:scriptPath={script_path}
+								allowRefresh={can_write}
+								allowEdit={!$userStore?.operator}
+							/>
+						</div>
+					</div>
+
+					<Toggle
+						checked={can_return_message}
+						on:change={() => {
+							can_return_message = !can_return_message
+						}}
+						options={{
+							right: 'Send runnable result',
+							rightTooltip:
+								'Whether the runnable result should be sent as a message to the websocket server when not null.'
+						}}
+					/>
+				</Section>
+
 				<WebsocketEditorConfigSection
 					bind:url
 					bind:url_runnable_args
@@ -245,24 +282,6 @@ let isValid = false;
 					bind:isValid
 				/>
 
-				<Section label="Runnable">
-					<p class="text-xs mb-1 text-tertiary">
-						Pick a script or flow to be triggered<Required required={true} />
-					</p>
-					<div class="flex flex-row mb-2">
-						<ScriptPicker
-							disabled={fixedScriptPath != '' || !can_write}
-							initialPath={fixedScriptPath || initialScriptPath}
-							kinds={['script']}
-							allowFlow={true}
-							bind:itemKind
-							bind:scriptPath={script_path}
-							allowRefresh={can_write}
-							allowEdit={!$userStore?.operator}
-						/>
-					</div>
-				</Section>
-
 				<Section label="Initial messages">
 					<p class="text-xs mb-1 text-tertiary">
 						Initial messages are sent at the beginning of the connection. They are sent in order.<br
@@ -275,7 +294,7 @@ let isValid = false;
 								<div class="w-full flex flex-col gap-2 border p-2 rounded-md">
 									<div class="flex flex-row gap-2 w-full">
 										<label class="flex flex-col w-full">
-											<div class="text-secondary text-sm">Type</div>
+											<div class="text-secondary text-sm mb-2">Type</div>
 											<select
 												class="w-20"
 												on:change={(e) => {
@@ -302,7 +321,7 @@ let isValid = false;
 									</div>
 									{#if 'raw_message' in v}
 										<div class="flex flex-col w-full">
-											<div class="text-secondary text-sm">
+											<div class="text-secondary text-sm mb-2">
 												Raw JSON message (if a string, wrapping quotes will be discarded)
 											</div>
 											<JsonEditor
@@ -343,7 +362,7 @@ let isValid = false;
 													]}
 												{#if schema}
 													<p class="font-semibold text-sm mt-4 mb-2">Arguments</p>
-													{#await import('../SchemaForm.svelte')}
+													{#await import('../../SchemaForm.svelte')}
 														<Loader2 class="animate-spin mt-2" />
 													{:then Module}
 														<Module.default
@@ -413,7 +432,7 @@ let isValid = false;
 								<div class="w-full flex flex-col gap-2 border p-2 rounded-md">
 									<div class="flex flex-row gap-2 w-full">
 										<label class="flex flex-col w-full">
-											<div class="text-secondary text-sm">Type</div>
+											<div class="text-secondary text-sm mb-2">Type</div>
 											<select
 												class="w-20"
 												on:change={(e) => {
@@ -431,12 +450,12 @@ let isValid = false;
 										</label>
 									</div>
 									<label class="flex flex-col w-full">
-										<div class="text-secondary text-sm">Key</div>
+										<div class="text-secondary text-sm mb-2">Key</div>
 										<input type="text" bind:value={v.key} />
 									</label>
 									<!-- svelte-ignore a11y-label-has-associated-control -->
 									<label class="flex flex-col w-full">
-										<div class="text-secondary text-sm">Value</div>
+										<div class="text-secondary text-sm mb-2">Value</div>
 										<JsonEditor bind:value={v.value} code={JSON.stringify(v.value)} />
 									</label>
 								</div>