windmill-components 1.558.4 → 1.596.0

package/package/components/triggers/webhook/WebhooksConfigSection.svelte

@@ -5,7 +5,7 @@ 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 { ArrowDownRight, ArrowUpRight, Clipboard, RssIcon } from 'lucide-svelte';
+import { ArrowDownRight, ArrowUpRight, Copy } from 'lucide-svelte';
 import { Highlight } from 'svelte-highlight';
 import { typescript } from 'svelte-highlight/languages';
 import ClipboardPanel from '../../details/ClipboardPanel.svelte';
@@ -16,8 +16,27 @@ import TriggerTokens from '../TriggerTokens.svelte';
 import { workspaceStore, userStore } from '../../../stores';
 import UserSettings from '../../UserSettings.svelte';
 import { generateRandomString } from '../../../utils';
-let { isFlow = false, path = '', hash = undefined, token = $bindable(''), runnableArgs, triggerTokens = $bindable(undefined), scopes = [] } = $props();
-let webhooks = $derived(isFlow ? computeFlowWebhooks(path) : computeScriptWebhooks(hash, path));
+import TextInput from '../../text_input/TextInput.svelte';
+let { isFlow = false, path = '', runnableVersion = undefined, token = $bindable(''), runnableArgs, triggerTokens = $bindable(undefined), scopes = [] } = $props();
+const WEBHOOK_BASE_URL = `${location.origin}${base}/api/w/${$workspaceStore}/jobs`;
+let baseWebhookUrl = $derived.by(() => {
+    let webhookUrlPath;
+    if (isFlow) {
+        webhookUrlPath = runnableId == 'path' ? `f/${path}` : `fv/${runnableVersion}`;
+    }
+    else {
+        webhookUrlPath = runnableId == 'path' ? `p/${path}` : `h/${runnableVersion}`;
+    }
+    if (requestType == 'async') {
+        return `${WEBHOOK_BASE_URL}/run/${webhookUrlPath}`;
+    }
+    else if (requestType == 'sync') {
+        return `${WEBHOOK_BASE_URL}/run_wait_result/${webhookUrlPath}`;
+    }
+    else {
+        return `${WEBHOOK_BASE_URL}/run_and_stream/${webhookUrlPath}`;
+    }
+});
 let selectedTab = $state('rest');
 let userSettings = $state();
 let requestType = $state(DEFAULT_WEBHOOK_TYPE);
@@ -25,81 +44,24 @@ let callMethod = $state('post');
 let runnableId = $state('path');
 let tokenType = $state('headers');
 $effect(() => {
-    if (requestType === 'async' && (callMethod === 'get' || callMethod === 'sse')) {
+    if (requestType === 'async' && callMethod === 'get') {
         callMethod = 'post';
     }
 });
-$effect(() => {
-    if (callMethod === 'sse' && tokenType === 'headers') {
-        tokenType = 'query';
-    }
-});
 let cleanedRunnableArgs = $derived.by(() => {
     readFieldsRecursively(runnableArgs);
     return isObject(runnableArgs) && 'wm_trigger' in runnableArgs
         ? Object.fromEntries(Object.entries(runnableArgs).filter(([key]) => key !== 'wm_trigger'))
         : runnableArgs;
 });
-let url = $derived(webhooks[requestType][callMethod][runnableId] +
+let url = $derived(baseWebhookUrl +
     (tokenType === 'query'
-        ? `?token=${token}${callMethod === 'get' || callMethod === 'sse'
+        ? `?token=${token}${callMethod === 'get' || requestType === 'sync_sse'
             ? `&payload=${encodeURIComponent(btoa(JSON.stringify(cleanedRunnableArgs ?? {})))}`
             : ''}`
         : `${callMethod === 'get'
             ? `?payload=${encodeURIComponent(btoa(JSON.stringify(cleanedRunnableArgs ?? {})))}`
             : ''}`));
-function computeScriptWebhooks(hash, path) {
-    let webhookBase = `${location.origin}${base}/api/w/${$workspaceStore}/jobs`;
-    return {
-        async: {
-            get: {},
-            post: {
-                hash: `${webhookBase}/run/h/${hash}`,
-                path: `${webhookBase}/run/p/${path}`
-            },
-            sse: {}
-        },
-        sync: {
-            get: {
-                path: `${webhookBase}/run_wait_result/p/${path}`
-            },
-            post: {
-                hash: `${webhookBase}/run_wait_result/h/${hash}`,
-                path: `${webhookBase}/run_wait_result/p/${path}`
-            },
-            sse: {
-                hash: `${webhookBase}/run_and_stream/h/${hash}`,
-                path: `${webhookBase}/run_and_stream/p/${path}`
-            }
-        }
-    };
-}
-function computeFlowWebhooks(path) {
-    let webhooksBase = `${location.origin}${base}/api/w/${$workspaceStore}/jobs`;
-    let urlAsync = `${webhooksBase}/run/f/${path}`;
-    let urlSync = `${webhooksBase}/run_wait_result/f/${path}`;
-    let urlStream = `${webhooksBase}/run_and_stream/f/${path}`;
-    return {
-        async: {
-            get: {},
-            post: {
-                path: urlAsync
-            },
-            sse: {}
-        },
-        sync: {
-            get: {
-                path: urlSync
-            },
-            post: {
-                path: urlSync
-            },
-            sse: {
-                path: urlStream
-            }
-        }
-    };
-}
 function headers() {
     const headers = {};
     if (callMethod === 'post') {
@@ -111,36 +73,62 @@ function headers() {
     return headers;
 }
 function fetchCode() {
-    if (callMethod === 'sse') {
-        return `
-import { EventSource } from "eventsource";
+    if (requestType === 'sync_sse') {
+        return `import { EventSource } from "eventsource";
 
 export async function main() {
-	const endpoint = \`${url}\`;
+  const response = await fetch(\`${url}\`, {
+    method: '${callMethod === 'get' ? 'GET' : 'POST'}',
+    headers: ${JSON.stringify(headers(), null, 2).replaceAll('\n', '\n    ')},
+    body: ${callMethod === 'get' ? 'undefined' : `JSON.stringify(${JSON.stringify(cleanedRunnableArgs ?? {}, null, 2).replaceAll('\n', '\n    ')})`}
+  });
+  
+  if (!response.ok) {
+	const text = await response.text()
+	throw new Error(\`\${response.status} \${text}\`)
+  }
+
+  if (!response.body) {
+    throw new Error("Response body is empty");
+  }
 
-	return new Promise((resolve, reject) => {
-		const eventSource = new EventSource(endpoint);
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
 
-		eventSource.onmessage = (event) => {
-			const data = JSON.parse(event.data);
-			console.log(data);
-			if (data.completed) {
-				eventSource.close();
-				resolve();
-			}
-		};
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
 
-		eventSource.onerror = (error) => {
-			console.error('EventSource error:', error);
-			eventSource.close();
-			reject(error);
-		};
-	});
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\\n");
+
+      // Keep the last incomplete line in buffer
+      buffer = lines.pop() || "";
+
+      for (const line of lines) {
+        if (line.startsWith("data: ")) {
+          const jsonData = line.slice(6); // Remove 'data: ' prefix
+          const data = JSON.parse(jsonData);
+          console.log(data);
+
+          if (data.completed) {
+            reader.cancel();
+            return;
+          }
+        }
+      }
+    }
+  } catch (error) {
+    console.error("Stream error:", error);
+    throw error;
+  }
 }`;
     }
     if (requestType === 'sync') {
-        return `
-export async function main() {
+        return `export async function main() {
   const jobTriggerResponse = await triggerJob();
   const data = await jobTriggerResponse.json();
   return data;
@@ -160,8 +148,7 @@ async function triggerJob() {
     }
     else {
         // Main function
-        let mainFunction = `
-export async function main() {
+        let mainFunction = `export async function main() {
   const jobTriggerResponse = await triggerJob();
   const UUID = await jobTriggerResponse.text();
   const jobCompletionData = await waitForJobCompletion(UUID);
@@ -214,11 +201,12 @@ function curlCode() {
     return `TOKEN='${token}'
 ${callMethod !== 'get' ? `BODY='${JSON.stringify(cleanedRunnableArgs ?? {})}'` : ''}
 URL='${url}'
-${requestType === 'sync' ? 'RESULT' : 'UUID'}=$(curl -s ${callMethod != 'get' ? "-H 'Content-Type: application/json'" : ''} ${tokenType === 'headers' ? `-H "Authorization: Bearer $TOKEN"` : ''} -X ${callMethod === 'get' ? 'GET' : 'POST'} ${callMethod !== 'get' ? `-d "$BODY" ` : ''}$URL)
+${requestType === 'sync' ? 'RESULT=$(' : requestType === 'async' ? 'UUID=$(' : ''}curl -s ${callMethod != 'get' ? "-H 'Content-Type: application/json'" : ''} ${tokenType === 'headers' ? `-H "Authorization: Bearer $TOKEN"` : ''} -X ${callMethod === 'get' ? 'GET' : 'POST'} ${callMethod !== 'get' ? `-d "$BODY" ` : ''}$URL${requestType === 'sync' || requestType === 'async' ? ')' : ''}
 
 ${requestType === 'sync'
         ? 'echo -E $RESULT | jq'
-        : `
+        : requestType === 'async'
+            ? `
 URL="${location.origin}/api/w/${$workspaceStore}/jobs_u/completed/get_result_maybe/$UUID"
 while true; do
   curl -s -H "Authorization: Bearer $TOKEN" $URL -o res.json
@@ -229,7 +217,8 @@ while true; do
   else
     sleep 1
   fi
-done`}`;
+done`
+            : ''}`;
 }
 </script>
 
@@ -247,18 +236,13 @@ done`}`;
 <div class="flex flex-col gap-8">
 	{#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON}
 		<Label label="Token">
-			<div class="flex flex-row justify-between gap-2">
-				<input
+			<div class="flex flex-row justify-between gap-2 whitespace-nowrap">
+				<TextInput
 					bind:value={token}
-					placeholder="paste your token here once created to alter examples below"
+					inputProps={{ placeholder: 'Paste your token here once created to alter examples below' }}
 					class="!text-xs !font-normal"
 				/>
-				<Button
-					size="xs"
-					color="light"
-					variant="border"
-					on:click={() => userSettings?.openDrawer()}
-				>
+				<Button size="xs" variant="default" on:click={() => userSettings?.openDrawer()}>
 					Create a Webhook-specific Token
 					<Tooltip light>
 						The token will have a scope such that it can only be used to trigger this script. It is
@@ -269,10 +253,9 @@ done`}`;
 		</Label>
 	{/if}
 
-	<div class="flex flex-col gap-2">
-		<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={requestType}>
+	<div class="flex flex-col gap-6">
+		<Label label="Request type">
+			<ToggleButtonGroup bind:selected={requestType}>
 				{#snippet children({ item })}
 					<ToggleButton
 						label="Async"
@@ -286,12 +269,20 @@ done`}`;
 						tooltip="Triggers the execution, wait for the job to complete and return it as a response."
 						{item}
 					/>
+					<ToggleButton
+						label="Sync SSE"
+						value="sync_sse"
+						tooltip={'Triggers the execution and returns an SSE stream. ' +
+							(isFlow
+								? 'Only useful if the last step of the flow returns a stream.'
+								: 'Only useful if the script returns a stream.')}
+						{item}
+					/>
 				{/snippet}
 			</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={callMethod}>
+		</Label>
+		<Label label="Call method">
+			<ToggleButtonGroup bind:selected={callMethod}>
 				{#snippet children({ item })}
 					<ToggleButton
 						label="POST"
@@ -306,70 +297,48 @@ done`}`;
 						selectedColor="#fb923c"
 						value="get"
 						{item}
-						disabled={requestType !== 'sync'}
-					/>
-					<ToggleButton
-						label="SSE"
-						value="sse"
-						icon={RssIcon}
-						selectedColor="#3B82F6"
-						disabled={requestType !== 'sync'}
-						tooltip={'Returns an SSE stream. ' +
-							(isFlow
-								? 'Only useful if the last step of the flow returns a stream.'
-								: 'Only useful if the script returns a stream.')}
-						{item}
+						disabled={requestType !== 'sync' && requestType !== 'sync_sse'}
 					/>
 				{/snippet}
 			</ToggleButtonGroup>
-		</div>
-		{#if !isFlow}
-			<div class="flex flex-row justify-between">
-				<div class="text-sm font-normal text-secondary flex flex-row items-center">
-					Reference type
-				</div>
-				<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={runnableId}>
-					{#snippet children({ item })}
-						<ToggleButton label="Path" value="path" {item} />
-						<ToggleButton label="Hash" value="hash" disabled={!hash} {item} />
-					{/snippet}
-				</ToggleButtonGroup>
-			</div>
-		{/if}
-		<div class="flex flex-row justify-between">
-			<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}>
+		</Label>
+		<Label label="Reference type">
+			<ToggleButtonGroup bind:selected={runnableId}>
 				{#snippet children({ item })}
+					<ToggleButton label="Path" value="path" {item} />
 					<ToggleButton
-						label="Token in Headers"
-						value="headers"
+						label={isFlow ? 'Flow version' : 'Hash'}
+						value="runnableVersion"
+						disabled={!runnableVersion}
 						{item}
-						disabled={callMethod === 'sse'}
 					/>
+				{/snippet}
+			</ToggleButtonGroup>
+		</Label>
+		<Label label="Token configuration">
+			<ToggleButtonGroup bind:selected={tokenType}>
+				{#snippet children({ item })}
+					<ToggleButton label="Token in Headers" value="headers" {item} />
 					<ToggleButton label="Token in Query" value="query" {item} />
 				{/snippet}
 			</ToggleButtonGroup>
-		</div>
+		</Label>
 	</div>
 
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div>
 		<Tabs bind:selected={selectedTab}>
-			<Tab value="rest" size="xs">REST</Tab>
-			{#if SCRIPT_VIEW_SHOW_EXAMPLE_CURL && callMethod !== 'sse'}
-				<Tab value="curl" size="xs">Curl</Tab>
+			<Tab value="rest" label="REST" />
+			{#if SCRIPT_VIEW_SHOW_EXAMPLE_CURL}
+				<Tab value="curl" label="Curl" />
 			{/if}
-			<Tab value="fetch" size="xs">
-				{callMethod === 'sse' ? 'Event Source' : 'Fetch'}
-			</Tab>
+			<Tab value="fetch" label="Fetch" />
 
 			{#snippet content()}
 				{#key token}
-					<TabContent value="rest" class="flex flex-col flex-1 h-full ">
-						<div class="flex flex-col gap-2">
+					<TabContent value="rest" class="flex flex-col flex-1 h-full mt-2">
+						<div class="flex flex-col gap-6">
 							<Label label="Url">
 								<ClipboardPanel content={url} />
 							</Label>
@@ -388,7 +357,7 @@ done`}`;
 							{/key}
 						</div>
 					</TabContent>
-					<TabContent value="curl" class="flex flex-col flex-1 h-full">
+					<TabContent value="curl" class="flex flex-col flex-1 h-full mt-2">
 						<div class="relative">
 							{#key runnableArgs}
 								{#key callMethod}
@@ -402,7 +371,7 @@ done`}`;
 												}}
 											>
 												<Highlight language={bash} code={curlCode()} />
-												<Clipboard size={14} class="w-8 top-2 right-2 absolute" />
+												<Copy size={14} class="w-8 top-2 right-2 absolute cursor-pointer" />
 											</div>
 										{/key}
 									{/key}
@@ -410,7 +379,7 @@ done`}`;
 							{/key}
 						</div>
 					</TabContent>
-					<TabContent value="fetch">
+					<TabContent value="fetch" class="mt-2">
 						{#key runnableArgs}
 							{#key callMethod}
 								{#key requestType}
@@ -424,7 +393,7 @@ done`}`;
 												}}
 											>
 												<Highlight language={typescript} code={fetchCode()} />
-												<Clipboard size={14} class="w-8 top-2 right-2 absolute" />
+												<Copy size={14} class="w-8 top-2 right-2 absolute cursor-pointer" />
 											</div>
 										{/key}{/key}{/key}{/key}
 						{/key}

package/package/components/triggers/webhook/WebhooksConfigSection.svelte.d.ts

@@ -2,7 +2,7 @@ import TriggerTokens from '../TriggerTokens.svelte';
 interface Props {
     isFlow?: boolean;
     path?: string;
-    hash?: string | undefined;
+    runnableVersion?: string | undefined;
     token?: string;
     runnableArgs: any;
     triggerTokens?: TriggerTokens | undefined;

package/package/components/triggers/webhook/WebhooksPanel.svelte

@@ -3,7 +3,7 @@ import Description from '../../Description.svelte';
 import HighlightTheme from '../../HighlightTheme.svelte';
 import WebhooksConfigSection from './WebhooksConfigSection.svelte';
 import { Section } from '../../common';
-let { token, args = {}, scopes = [], isFlow = false, hash = undefined, path, newItem = false } = $props();
+let { token, args = {}, scopes = [], isFlow = false, runnableVersion = undefined, path, newItem = false } = $props();
 </script>
 
 <HighlightTheme />
@@ -19,5 +19,5 @@ let { token, args = {}, scopes = [], isFlow = false, hash = undefined, path, new
 			{isFlow ? 'flow' : 'script'}.
 		</Alert>
 	{/if}
-	<WebhooksConfigSection {isFlow} {path} {hash} {token} runnableArgs={args} {scopes} />
+	<WebhooksConfigSection {isFlow} {path} {runnableVersion} {token} runnableArgs={args} {scopes} />
 </Section>

package/package/components/triggers/webhook/WebhooksPanel.svelte.d.ts

@@ -3,7 +3,7 @@ interface Props {
     args?: Record<string, any>;
     scopes?: string[];
     isFlow?: boolean;
-    hash?: string | undefined;
+    runnableVersion?: string | undefined;
     path: string;
     newItem?: boolean;
 }

package/package/components/triggers/websocket/WebsocketCapture.svelte.d.ts

@@ -32,7 +32,9 @@ declare const WebsocketCapture: $$__sveltets_2_IsomorphicComponent<Props, {
         redirect: boolean;
         args?: boolean;
     }>;
-    addPreprocessor: CustomEvent<null>;
+    addPreprocessor: CustomEvent<{
+        args: Record<string, any>;
+    } | null>;
     testWithArgs: CustomEvent<Record<string, any>>;
 } & {
     [evt: string]: CustomEvent<any>;