windmill-components 1.550.0 → 1.555.1

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/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/triggers.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type TriggersCount } from '../../gen';
 import { type Trigger } from './utils';
-import type { Writable } from 'svelte/store';
+import { type Writable } from 'svelte/store';
 import type { TriggerType } from './utils';
 import type { UserExt } from '../../stores';
 import type { ScheduleTrigger } from '../triggers';

package/package/components/triggers/triggers.svelte.js

@@ -1,5 +1,7 @@
 import { KafkaTriggerService, MqttTriggerService, NatsTriggerService, PostgresTriggerService, ScheduleService, SqsTriggerService, WebsocketTriggerService, HttpTriggerService, GcpTriggerService, EmailTriggerService } from '../../gen';
+import { enterpriseLicense } from '../../stores';
 import { getLightConfig, sortTriggers, updateTriggersCount } from './utils';
+import { get } from 'svelte/store';
 import { canWrite, formatCron, generateRandomString } from '../../utils';
 export class Triggers {
     #triggers = $state([]);
@@ -346,12 +348,14 @@ export class Triggers {
             this.fetchHttpTriggers(triggersCountStore, workspaceId, path, isFlow, user),
             this.fetchWebsocketTriggers(triggersCountStore, workspaceId, path, isFlow, user),
             this.fetchPostgresTriggers(triggersCountStore, workspaceId, path, isFlow, user),
-            this.fetchKafkaTriggers(triggersCountStore, workspaceId, path, isFlow, user),
             this.fetchNatsTriggers(triggersCountStore, workspaceId, path, isFlow, user),
             this.fetchMqttTriggers(triggersCountStore, workspaceId, path, isFlow, user),
-            this.fetchSqsTriggers(triggersCountStore, workspaceId, path, isFlow, user),
-            this.fetchGcpTriggers(triggersCountStore, workspaceId, path, isFlow, user),
-            this.fetchEmailTriggers(triggersCountStore, workspaceId, path, isFlow, user)
+            this.fetchEmailTriggers(triggersCountStore, workspaceId, path, isFlow, user),
+            ...(get(enterpriseLicense) ? [
+                this.fetchKafkaTriggers(triggersCountStore, workspaceId, path, isFlow, user),
+                this.fetchSqsTriggers(triggersCountStore, workspaceId, path, isFlow, user),
+                this.fetchGcpTriggers(triggersCountStore, workspaceId, path, isFlow, user)
+            ] : [])
         ]);
     }
 }

package/package/components/tutorials/FlowBuilderTutorialErrorHandler.svelte

@@ -46,14 +46,14 @@ export function runTutorial() {
 			}
 		},
 		{
-			element: '#flow-editor-error-handler',
+			element: '#flow-editor-add-step-error-handler-button',
 			popover: {
 				title: 'Error handler',
 				description:
 					'You can add an error handler to your flow. It will be executed if any of the steps in the flow fails.',
 
 				onNextClick: () => {
-					triggerPointerDown('#flow-editor-error-handler button')
+					triggerPointerDown('#flow-editor-add-step-error-handler-button')
 					setTimeout(() => {
 						driver.moveNext()
 					})

package/package/components/tutorials/FlowBuilderTutorialForLoop.svelte

@@ -172,6 +172,9 @@ export function runTutorial(indexToInsertAt) {
 
 			{
 				element: '#flow-editor-step-input',
+				onHighlighted: () => {
+					document.querySelector('#flow-editor-plug')?.parentElement?.classList.remove('opacity-0')
+				},
 				popover: {
 					title: 'Flow inputs',
 					description: 'UI is autogenerated from your code.'

package/package/components/tutorials/FlowBuilderTutorialSimpleFlow.svelte

@@ -3,6 +3,7 @@ import { updateProgress } from '../../tutorialUtils';
 import { clickButtonBySelector, isFlowTainted, setInputBySelector, triggerPointerDown, waitForElementLoading } from './utils';
 import Tutorial from './Tutorial.svelte';
 import { refreshStateStore } from '../../svelte5Utils.svelte';
+import { wait } from '../../utils';
 const { flowStore } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 let tutorial = undefined;
@@ -30,16 +31,13 @@ export function runTutorial() {
 			popover: {
 				title: 'Flows inputs',
 				description: 'Flows have inputs that can be used in the flow',
-				onNextClick: () => {
-					clickButtonBySelector('#flow-editor-virtual-Input')
-					tick()
-						.then(() => clickButtonBySelector('#add-flow-input-btn'))
-						.then(tick)
-						.then(() => setInputBySelector('input[placeholder="Field name"]', 'firstname'))
-
-					setTimeout(() => {
-						driver.moveNext()
-					})
+				onNextClick: async () => {
+					triggerPointerDown('#flow-editor-virtual-Input')
+					await wait(20)
+					clickButtonBySelector('#add-flow-input-btn')
+					await wait(0)
+					setInputBySelector('input[placeholder="Field name"]', 'firstname')
+					setTimeout(() => driver.moveNext())
 				}
 			},
 			element: '#flow-editor-virtual-Input'
@@ -53,11 +51,15 @@ export function runTutorial() {
 					setTimeout(() => {
 						driver.moveNext()
 					})
+				},
+				onPrevClick: () => {
+					clickButtonBySelector('#add-flow-input-btn') // Close the input drawer
+					setTimeout(() => driver.movePrevious())
 				}
 			}
 		},
 		{
-			element: '#flow-editor-add-property',
+			element: '*:has(> #flow-editor-add-property)',
 			popover: {
 				title: 'Add your property',
 				description: 'Click here to save your property',
@@ -76,16 +78,26 @@ export function runTutorial() {
 				description: 'Click here to add a step to your flow',
 				onNextClick: () => {
 					triggerPointerDown(`#flow-editor-add-step-0`)
-					setTimeout(() => {
-						driver.moveNext()
-					})
+					setTimeout(() => driver.moveNext())
+				},
+				onPrevClick: async () => {
+					clickButtonBySelector('.delete-schema-field-button')
+					await wait(0)
+					clickButtonBySelector('#add-flow-input-btn')
+					await wait(0)
+					setInputBySelector('input[placeholder="Field name"]', 'firstname')
+					setTimeout(() => driver.movePrevious())
 				}
 			}
 		},
 		{
 			popover: {
 				title: 'Steps kind',
-				description: "Choose the kind of step you want to add. Let's start with a simple action"
+				description: "Choose the kind of step you want to add. Let's start with a simple action",
+				onPrevClick: () => {
+					triggerPointerDown(`#flow-editor-add-step-0`)
+					setTimeout(() => driver.movePrevious())
+				}
 			},
 			element: '#flow-editor-insert-module'
 		},
@@ -138,6 +150,7 @@ export function runTutorial() {
 				title: 'Action editor',
 				description: 'Windmill provides a full code editor to write your actions',
 				onPrevClick: () => {
+					triggerPointerDown(`#flow-editor-virtual-Input`)
 					triggerPointerDown(`#flow-editor-add-step-0`)
 					setTimeout(() => {
 						driver.movePrevious()
@@ -147,6 +160,9 @@ export function runTutorial() {
 		},
 		{
 			element: '#flow-editor-step-input',
+			onHighlighted: () => {
+				document.querySelector('#flow-editor-plug')?.parentElement?.classList.remove('opacity-0')
+			},
 			popover: {
 				title: 'Autogenerated schema',
 				description: 'The schema and the UI is autogenerated from your code'
@@ -154,10 +170,14 @@ export function runTutorial() {
 		},
 		{
 			element: '#flow-editor-plug',
+			onHighlighted: () => {
+				document.querySelector('#flow-editor-plug')?.parentElement?.classList.remove('opacity-0')
+			},
 			popover: {
 				title: 'Connect',
 				description:
 					'You can provide static values or connect to other nodes result. Here we will connect to the firstname input',
+
 				onNextClick: () => {
 					clickButtonBySelector('#flow-editor-plug')
 					setTimeout(() => {
@@ -187,6 +207,10 @@ export function runTutorial() {
 					setTimeout(() => {
 						driver.moveNext()
 					})
+				},
+				onPrevClick: () => {
+					clickButtonBySelector('#flow-editor-plug')
+					setTimeout(() => driver.movePrevious())
 				}
 			}
 		},
@@ -195,7 +219,11 @@ export function runTutorial() {
 			element: '#flow-editor-step-input',
 			popover: {
 				title: 'Input connected!',
-				description: 'The input is now connected to the firstname input'
+				description: 'The input is now connected to the firstname input',
+				onPrevClick: () => {
+					clickButtonBySelector('#flow-editor-plug')
+					setTimeout(() => driver.movePrevious())
+				}
 			}
 		},
 
@@ -215,7 +243,7 @@ export function runTutorial() {
 		},
 
 		{
-			element: '#flow-preview-content',
+			element: 'textarea.w-full',
 			popover: {
 				title: 'Flow input',
 				description: 'Let’s provide an input to our flow',
@@ -225,6 +253,10 @@ export function runTutorial() {
 					setTimeout(() => {
 						driver.moveNext()
 					})
+				},
+				onPrevClick: () => {
+					clickButtonBySelector('#flow-editor-test-flow') // Close the test drawer
+					setTimeout(() => driver.movePrevious())
 				}
 			}
 		},

package/package/components/tutorials/Tutorial.svelte

@@ -5,15 +5,21 @@ import { ignoredTutorials } from './ignoredTutorials';
 import SkipTutorials from './SkipTutorials.svelte';
 import TutorialControls from './TutorialControls.svelte';
 import TutorialInner from './TutorialInner.svelte';
+import { isCurrentlyInTutorial } from '../../stores';
 export let index = 0;
 export let name = 'action';
 export let tainted = false;
+export let onDestroyed = undefined;
 export let getSteps = () => [];
 let totalSteps = 0;
 let tutorial = undefined;
 const dispatch = createEventDispatcher();
 // Render controls needs to be exposed so steps that have a custom render can call it
 export function renderControls({ config, state }) {
+    const popoverContent = document.querySelector('#driver-popover-content');
+    popoverContent?.addEventListener('pointerdown', (event) => {
+        event.stopPropagation();
+    });
     const popoverDescription = document.querySelector('#driver-popover-description');
     if (!tutorial) {
         return;
@@ -88,6 +94,7 @@ export const runTutorial = (options) => {
         dispatch('error', { detail: name });
         return;
     }
+    isCurrentlyInTutorial.val = true;
     tutorial = driver({
         allowClose: true,
         disableActiveInteraction: true,
@@ -98,9 +105,11 @@ export const runTutorial = (options) => {
             renderControls({ config, state });
         },
         onDestroyed: () => {
+            onDestroyed?.();
             if (!tutorial?.hasNextStep()) {
                 $ignoredTutorials = Array.from(new Set([...$ignoredTutorials, index]));
             }
+            isCurrentlyInTutorial.val = false;
         }
     });
     const steps = getSteps(tutorial, options);

package/package/components/tutorials/Tutorial.svelte.d.ts

@@ -16,6 +16,7 @@ declare const Tutorial: $$__sveltets_2_IsomorphicComponent<{
     index?: number;
     name?: string;
     tainted?: boolean;
+    onDestroyed?: (() => void) | undefined;
     getSteps?: (driver: Driver, options?: {
         indexToInsertAt?: number;
         skipStepsCount?: number;

package/package/components/tutorials/app/AppTutorial.svelte

@@ -4,10 +4,12 @@ import { getContext } from 'svelte';
 import Tutorial from '../Tutorial.svelte';
 import { clickButtonBySelector, clickFirstButtonBySelector, connectInlineRunnableInputToComponentOutput, isAppTainted, updateInlineRunnableCode } from '../utils';
 import { updateProgress } from '../../../tutorialUtils';
+import {} from 'driver.js';
+import { wait } from '../../../utils';
 export let name;
 export let index;
 let tutorial = undefined;
-const { app, selectedComponent, focusedGrid, connectingInput } = getContext('AppViewerContext');
+const { app, selectedComponent, focusedGrid } = getContext('AppViewerContext');
 const { history } = getContext('AppEditorContext');
 export function runTutorial() {
     tutorial?.runTutorial();
@@ -28,7 +30,7 @@ function addComponent(appComponentType) {
 	on:skipAll
 	tainted={isAppTainted($app)}
 	getSteps={(driver) => {
-		const steps = [
+		const steps: DriveStep[] = [
 			{
 				popover: {
 					title: 'App editor tutorial',
@@ -91,7 +93,7 @@ function addComponent(appComponentType) {
 				popover: {
 					title: 'Component input',
 					description:
-						'There are several ways to set the input of a component. It can be static, the result of a JS expression, connected to the output of another component, or the result of a inline runnable. Here we will create an inline runnable that will convert the text to uppercase.',
+						'There are several ways to set the input of a component. It can be static, the result of a JS expression, connected to the output of another component, or the result of an inline runnable. Here we will create an inline runnable that will convert the text to uppercase.',
 					onNextClick: () => {
 						clickFirstButtonBySelector('#component-input')
 						setTimeout(() => {
@@ -122,9 +124,7 @@ function addComponent(appComponentType) {
 					description: "Let's create an inline script.",
 					onNextClick: () => {
 						clickButtonBySelector('#app-editor-create-inline-script')
-						setTimeout(() => {
-							driver.moveNext()
-						})
+						setTimeout(() => driver.moveNext())
 					}
 				}
 			},
@@ -134,7 +134,7 @@ function addComponent(appComponentType) {
 				popover: {
 					title: 'Choose a language',
 					description:
-						'You can choose the language of your runnable. They are two type of runnables: frontend and backend.'
+						'You can choose the language of your runnable. There are two type of runnables: frontend and backend.'
 				}
 			},
 
@@ -156,87 +156,71 @@ function addComponent(appComponentType) {
 			},
 			{
 				element: '#create-deno-script',
+				onHighlighted: () => {
+					document.querySelector('#schema-plug-x')?.parentElement?.classList.remove('opacity-0')
+				},
 				popover: {
 					title: 'Create a deno script',
 					description:
 						"Let's create a simple deno script. For the sake of this tutorial, we will create a script that converts the text to uppercase.",
-					onNextClick: () => {
+					onNextClick: async () => {
 						clickButtonBySelector('#create-deno-script')
-						setTimeout(() => {
-							if ($selectedComponent?.[0]) {
-								updateInlineRunnableCode(
-									$app,
-									$selectedComponent[0],
-									`export async function main(x: string) {
-  return x?.toLocaleUpperCase();
-}
-`
-								)
-							}
+						await wait(50)
+						if ($selectedComponent?.[0]) {
+							updateInlineRunnableCode(
+								$app,
+								$selectedComponent[0],
+								'export function main(x: string) {\n  return x?.toLocaleUpperCase();\n}'
+							)
+						}
 
-							driver.moveNext()
-						})
+						driver.moveNext()
 					}
 				}
 			},
 			{
-				element: '#schema-plug',
+				element: '#schema-plug-x',
+				onHighlighted: () => {
+					document.querySelector('#schema-plug-x')?.parentElement?.classList.remove('opacity-0')
+				},
 				popover: {
 					title: 'Connect the function input',
 					description:
 						"The function we created has an string input 'x'. We can connect the output of the text component to it.",
 					onNextClick: () => {
-						clickButtonBySelector('#schema-plug')
+						clickButtonBySelector('#schema-plug-x')
 						setTimeout(() => {
 							driver.moveNext()
 						})
 					}
 				}
 			},
-
 			{
-				element: '#connect-output-d',
+				element: '#connect-output-a',
 				popover: {
 					title: 'Select the output',
-					description: ' ',
+					description: 'Open the output selector of the text input component.',
 					onNextClick: () => {
-						$connectingInput.opened = false
-						$connectingInput.input = undefined
-
+						clickButtonBySelector('#connect-output-a')
 						setTimeout(() => {
 							driver.moveNext()
 						})
-					},
-					onPopoverRender: (popover, opts) => {
-						const wrapper = document.createElement('div')
-						wrapper.classList.add('flex', 'flex-col', 'gap-2', 'w-full', 'items-start')
-
-						const p1 = document.createElement('p')
-						p1.innerText =
-							'You can now select the output in the output menu. Click on the little red button to open the menu.'
-
-						const id = document.createElement('div')
-						id.innerHTML = `<button class="bg-red-500/70 border border-red-600 px-1 py-0.5" title="Outputs" aria-label="Open output"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-plug-2 "><path d="M9 2v6"></path><path d="M15 2v6"></path><path d="M12 17v5"></path><path d="M5 8h14"></path><path d="M6 11V8h12v3a6 6 0 1 1-12 0v0Z"></path></svg></button>`
-
-						const p2 = document.createElement('p')
-						p2.innerText =
-							'Once opened, you can select the output you want to connect to. Here we will connect the result output of the text component to the input "x" of the inline runnable.'
-
-						const objectViewer = document.createElement('div')
-						objectViewer.innerHTML = `<div class="rounded-lg shadow-md border p-4 bg-surface"><span class="s-UNyBDXJ1E286">  <ul class="w-full pl-2 border-none s-UNyBDXJ1E286"><li class="s-UNyBDXJ1E286"><button class="whitespace-nowrap s-UNyBDXJ1E286"><span class="key border  font-semibold rounded px-1 hover:bg-surface-hover text-2xs text-secondary s-UNyBDXJ1E286">result</span> :</button> <button class="val  rounded px-1 hover:bg-blue-100 string s-UNyBDXJ1E286"><span title="" class="text-2xs s-UNyBDXJ1E286">""</span></button></li> </ul> </span> <span class="border border-blue-600 rounded px-1 cursor-pointer hover:bg-gray-200 s-UNyBDXJ1E286 hidden">{...}</span> </div>`
-
-						wrapper.appendChild(p1)
-						wrapper.appendChild(id)
-						wrapper.appendChild(p2)
-						wrapper.appendChild(objectViewer)
-
-						popover.description.appendChild(wrapper)
-
-						tutorial?.renderControls(opts)
 					}
 				}
 			},
-
+			{
+				element: '.component-output-viewer-a li *:has(> button[title="result"])',
+				popover: {
+					title: 'Select the output',
+					description: "Let's select the result of the text input component.",
+					onNextClick: () => {
+						setTimeout(async () => {
+							clickButtonBySelector('.component-output-viewer-a li button[title="result"]')
+							driver.moveNext()
+						})
+					}
+				}
+			},
 			{
 				element: '.wm-app-viewer',
 				popover: {

package/package/components/tutorials/app/BackgroundRunnablesTutorial.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">import { updateProgress } from '../../../tutorialUtils';
+import {} from 'driver.js';
 import Tutorial from '../Tutorial.svelte';
 import { clickButtonBySelector } from '../utils';
 export let name;
@@ -16,7 +17,7 @@ export function runTutorial(skipStepsCount = undefined) {
 	on:error
 	on:skipAll
 	getSteps={(driver, options) => {
-		const steps = [
+		const steps: DriveStep[] = [
 			{
 				element: '#app-editor-runnable-panel',
 				popover: {
@@ -33,10 +34,7 @@ export function runTutorial(skipStepsCount = undefined) {
 						'Click here to create a runnable. Runnables are scripts that can be executed in the background. You can add as many runnables as you want.',
 					onNextClick: () => {
 						clickButtonBySelector('#create-background-runnable')
-
-						setTimeout(() => {
-							driver.moveNext()
-						})
+						setTimeout(() => driver.moveNext())
 					}
 				}
 			},

package/package/components/tutorials/app/ConnectionTutorial.svelte

@@ -54,12 +54,12 @@ function addComponent() {
 			}
 		},
 		{
-			element: '#plug',
+			element: '[data-connection-button] button[title="Connect"]',
 			popover: {
 				title: 'Connect the text component',
 				description: 'Click on the plug icon to connect the text component',
 				onNextClick: () => {
-					clickButtonBySelector('#plug')
+					clickButtonBySelector('[data-connection-button] button[title="Connect"]')
 					setTimeout(() => {
 						driver.moveNext()
 					})