windmill-components 1.555.0 → 1.558.1

package/package/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte

@@ -39,6 +39,29 @@ const iconOnlyThreshold = 300;
 {#if componentInput.fieldType !== 'any'}
 	<div class="w-full">
 		<div class="flex gap-2 justify-end" bind:clientWidth>
+			<div class="flex">
+				<ConnectionButton
+					closeConnection={() => {
+						$connectingInput = {
+							opened: false,
+							hoveredComponent: undefined,
+							input: undefined,
+							onConnect: () => {}
+						}
+						dispatch('select', true)
+					}}
+					openConnection={() => {
+						$connectingInput = {
+							opened: true,
+							input: undefined,
+							hoveredComponent: undefined,
+							onConnect: applyConnection
+						}
+					}}
+					isOpen={!!$connectingInput.opened}
+				/>
+			</div>
+
 			<ToggleButtonGroup
 				on:selected={() => {
 					onchange?.()
@@ -104,29 +127,6 @@ const iconOnlyThreshold = 300;
 					/>
 				{/snippet}
 			</ToggleButtonGroup>
-
-			<div class="flex">
-				<ConnectionButton
-					closeConnection={() => {
-						$connectingInput = {
-							opened: false,
-							hoveredComponent: undefined,
-							input: undefined,
-							onConnect: () => {}
-						}
-						dispatch('select', true)
-					}}
-					openConnection={() => {
-						$connectingInput = {
-							opened: true,
-							input: undefined,
-							hoveredComponent: undefined,
-							onConnect: applyConnection
-						}
-					}}
-					isOpen={!!$connectingInput.opened}
-				/>
-			</div>
 		</div>
 	</div>
 {/if}

package/package/components/apps/editor/settingsPanel/EventHandlers.svelte

@@ -25,7 +25,12 @@ const componentsWithEventHandler = [
     'textinputcomponent',
     'textareainputcomponent',
     'passwordinputcomponent',
-    'emailinputcomponent'
+    'emailinputcomponent',
+    'aggridcomponent',
+    'aggridcomponentee',
+    'aggridinfinitecomponent',
+    'aggridinfinitecomponentee',
+    'dbexplorercomponent'
 ];
 </script>
 
@@ -76,7 +81,7 @@ const componentsWithEventHandler = [
 				bind:value={item.data.onToggle}
 			/>
 		{/if}
-		{#if item.data.type === 'dateinputcomponent' || item.data.type === 'datetimeinputcomponent' || item.data.type === 'timeinputcomponent' || item.data.type === 'numberinputcomponent' || item.data.type === 'textinputcomponent' || item.data.type === 'textareainputcomponent' || item.data.type === 'passwordinputcomponent' || item.data.type === 'emailinputcomponent'}
+		{#if item.data.type === 'dateinputcomponent' || item.data.type === 'datetimeinputcomponent' || item.data.type === 'timeinputcomponent' || item.data.type === 'numberinputcomponent' || item.data.type === 'textinputcomponent' || item.data.type === 'textareainputcomponent' || item.data.type === 'passwordinputcomponent' || item.data.type === 'emailinputcomponent' || item.data.type === 'aggridcomponent' || item.data.type === 'aggridcomponentee' || item.data.type === 'aggridinfinitecomponent' || item.data.type === 'aggridinfinitecomponentee' || item.data.type === 'dbexplorercomponent'}
 			<EventHandlerItem
 				title="on change"
 				tooltip="When a human change the value of the input"

package/package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -109,6 +109,7 @@ function openConnection() {
 			<div class={classNames('flex gap-x-2 gap-y-1 justify-end items-center')}>
 				{#if componentInput?.type && allowTypeChange !== false}
 					<ConnectionButton
+						small
 						{closeConnection}
 						{openConnection}
 						isOpen={!!$connectingInput.opened}

package/package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte

@@ -67,7 +67,8 @@ const mapping = {
 				{#if deletable}
 					<div class="flex flex-row-reverse -mt-4">
 						<CloseButton noBg on:close={() => dispatch('delete', k)} />
-					</div>{/if}
+					</div>
+				{/if}
 			{/if}
 		{/each}
 		{#if overridenByComponent.length > 0}

package/package/components/apps/editor/settingsPanel/inputEditor/DBTableSelect.svelte.d.ts

@@ -4,6 +4,6 @@ interface Props {
     selectOptions?: StaticOptions['selectOptions'] | undefined;
     id: string | undefined;
 }
-declare const DbTableSelect: import("svelte").Component<Props, {}, "componentInput">;
-type DbTableSelect = ReturnType<typeof DbTableSelect>;
-export default DbTableSelect;
+declare const DBTableSelect: import("svelte").Component<Props, {}, "componentInput">;
+type DBTableSelect = ReturnType<typeof DBTableSelect>;
+export default DBTableSelect;

package/package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -24,6 +24,7 @@ import AppPicker from '../../../../wizards/AppPicker.svelte';
 import JsonEditor from '../../../../JsonEditor.svelte';
 import S3FilePicker from '../../../../S3FilePicker.svelte';
 import FileUpload from '../../../../common/fileUpload/FileUpload.svelte';
+import DucklakePicker from '../../../../DucklakePicker.svelte';
 let { componentInput = $bindable(), fieldType = undefined, subFieldType = undefined, selectOptions = undefined, placeholder = undefined, format = undefined, id } = $props();
 const appContext = getContext('AppViewerContext');
 $effect(() => {
@@ -119,6 +120,15 @@ let s3FilePicker = $state(undefined);
 				}
 				resourceType="s3"
 			/>
+		{:else if fieldType === 'ducklake'}
+			<DucklakePicker
+				class="w-full"
+				bind:value={
+					() => componentInput?.value?.split('ducklake://')?.[1],
+					(v) => componentInput && (componentInput.value = v ? `ducklake://${v}` : undefined)
+				}
+				showSchemaExplorer
+			/>
 		{:else if fieldType === 'labeledresource'}
 			{#if componentInput?.value && typeof componentInput?.value == 'object' && 'label' in componentInput?.value && (componentInput.value?.['value'] == undefined || typeof componentInput.value?.['value'] == 'string')}
 				<div class="flex flex-col gap-1 w-full">

package/package/components/apps/inputType.d.ts

@@ -1,7 +1,7 @@
 import type { ReadFileAs } from '../common/fileInput/model';
 import type { DecisionTreeNode, TypedComponent } from './editor/component';
 import type { InlineScript } from './types';
-export type InputType = 'integer' | 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource' | 'labeledselect' | 'tab-select' | 'schema' | 'ag-grid' | 'table-column' | 'plotly' | 'chartjs' | 'DecisionTreeNode' | 'ag-chart' | 'resource' | 'db-explorer' | 'db-table' | 's3' | 'number-tuple' | 'postgres' | 'mysql' | 'ms_sql_server' | 'snowflake' | 'snowflake_oauth' | 'bigquery' | 'oracledb' | 'app-path';
+export type InputType = 'integer' | 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource' | 'labeledselect' | 'tab-select' | 'schema' | 'ag-grid' | 'table-column' | 'plotly' | 'chartjs' | 'DecisionTreeNode' | 'ag-chart' | 'resource' | 'db-explorer' | 'db-table' | 's3' | 'number-tuple' | 'postgres' | 'mysql' | 'ms_sql_server' | 'snowflake' | 'snowflake_oauth' | 'bigquery' | 'oracledb' | 'ducklake' | 'app-path';
 export type InputConnection = {
     componentType?: TypedComponent['type'];
     componentId: string;
@@ -129,7 +129,7 @@ export type StaticOptions = {
         label: string;
     }[];
 };
-export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string, 'db-table'> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'array', (object | string)[], 'labeledselect'> | AppInputSpec<'labeledselect', object> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'> | AppInputSpec<'schema', object> | AppInputSpec<'array', object[], 'ag-grid'> | AppInputSpec<'array', object[], 'db-explorer'> | AppInputSpec<'array', object[], 'table-column'> | AppInputSpec<'array', object[], 'plotly'> | AppInputSpec<'array', object[], 'chartjs'> | AppInputSpec<'array', DecisionTreeNode, 'DecisionTreeNode'> | AppInputSpec<'array', object[], 'ag-chart'> | AppInputSpec<'resource', string> | AppInputSpec<'resource', string, 's3'> | AppInputSpec<'resource', string, 'postgres'> | AppInputSpec<'resource', string, 'mysql'> | AppInputSpec<'resource', string, 'ms_sql_server'> | AppInputSpec<'resource', string, 'snowflake'> | AppInputSpec<'resource', string, 'snowflake_oauth'> | AppInputSpec<'resource', string, 'bigquery'> | AppInputSpec<'resource', string, 'oracledb'> | AppInputSpec<'array', object[], 'number-tuple'> | AppInputSpec<'app-path', string>;
+export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string, 'db-table'> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'array', (object | string)[], 'labeledselect'> | AppInputSpec<'labeledselect', object> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'> | AppInputSpec<'schema', object> | AppInputSpec<'array', object[], 'ag-grid'> | AppInputSpec<'array', object[], 'db-explorer'> | AppInputSpec<'array', object[], 'table-column'> | AppInputSpec<'array', object[], 'plotly'> | AppInputSpec<'array', object[], 'chartjs'> | AppInputSpec<'array', DecisionTreeNode, 'DecisionTreeNode'> | AppInputSpec<'array', object[], 'ag-chart'> | AppInputSpec<'resource', string> | AppInputSpec<'resource', string, 's3'> | AppInputSpec<'resource', string, 'postgres'> | AppInputSpec<'resource', string, 'mysql'> | AppInputSpec<'resource', string, 'ms_sql_server'> | AppInputSpec<'resource', string, 'snowflake'> | AppInputSpec<'resource', string, 'snowflake_oauth'> | AppInputSpec<'resource', string, 'bigquery'> | AppInputSpec<'resource', string, 'oracledb'> | AppInputSpec<'ducklake', string, 'ducklake'> | AppInputSpec<'array', object[], 'number-tuple'> | AppInputSpec<'app-path', string>;
 export type RowAppInput = Extract<AppInput, {
     type: 'row';
 }>;

package/package/components/auditLogs/AuditLogsFilters.svelte.d.ts

@@ -13,6 +13,6 @@ interface Props {
     actionKind?: ActionKind | 'all';
     scope?: undefined | 'all_workspaces' | 'instance';
 }
-declare const AuditLogsFilters: import("svelte").Component<Props, {}, "resource" | "username" | "operation" | "before" | "after" | "logs" | "perPage" | "hasMore" | "pageIndex" | "actionKind" | "scope">;
+declare const AuditLogsFilters: import("svelte").Component<Props, {}, "resource" | "username" | "operation" | "logs" | "before" | "after" | "perPage" | "hasMore" | "pageIndex" | "actionKind" | "scope">;
 type AuditLogsFilters = ReturnType<typeof AuditLogsFilters>;
 export default AuditLogsFilters;

package/package/components/common/button/ConnectionButton.svelte

@@ -4,12 +4,8 @@ import AnimatedButton from './AnimatedButton.svelte';
 import Button from './Button.svelte';
 import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-export let isOpen = false;
-export let openConnection;
-export let closeConnection;
-export let btnWrapperClasses = '';
-export let id = undefined;
-let selected = false;
+let { isOpen = false, openConnection, closeConnection, btnWrapperClasses = '', id = undefined, small } = $props();
+let selected = $state(false);
 const { panzoomActive } = getContext('AppViewerContext');
 async function getConnectionButtonElements() {
     return Array.from(document.querySelectorAll('[data-connection-button], [data-connection-button] *'));
@@ -38,24 +34,26 @@ function handleKeyDown(e) {
         handleConnect();
     }
 }
-function handlePointerDownOutside(e) {
+function handlePointerDownOutside() {
     if (!$panzoomActive) {
         deactivateConnection();
     }
 }
-$: !isOpen && (selected = false);
+$effect(() => {
+    !isOpen && (selected = false);
+});
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	use:pointerDownOutside={{
 		capture: true,
 		stopPropagation: isOpen,
 		exclude: getConnectionButtonElements,
-		customEventName: 'pointerdown_connecting'
+		customEventName: 'pointerdown_connecting',
+		onClickOutside: () => handlePointerDownOutside()
 	}}
-	on:keydown={handleKeyDown}
-	on:pointerdown_outside={handlePointerDownOutside}
+	onkeydown={handleKeyDown}
 	data-connection-button
 >
 	<AnimatedButton
@@ -65,14 +63,14 @@ $: !isOpen && (selected = false);
 		marginWidth="2px"
 	>
 		<Button
-			size="xs"
+			size={small ? 'xs' : 'md'}
 			variant="border"
 			color="light"
 			title="Connect"
 			on:click={() => handleConnect(true)}
 			{id}
 			wrapperClasses={twMerge(btnWrapperClasses, selected ? 'opacity-100' : '')}
-			btnClasses="p-0"
+			btnClasses={small ? 'p-0' : ''}
 		>
 			<Plug size={14} />
 		</Button>

package/package/components/common/button/ConnectionButton.svelte.d.ts

@@ -1,24 +1,11 @@
-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;
-}
-declare const ConnectionButton: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     isOpen?: boolean;
     openConnection: () => void;
     closeConnection: () => void;
     btnWrapperClasses?: string;
     id?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ConnectionButton = InstanceType<typeof ConnectionButton>;
+    small?: boolean;
+}
+declare const ConnectionButton: import("svelte").Component<Props, {}, "">;
+type ConnectionButton = ReturnType<typeof ConnectionButton>;
 export default ConnectionButton;

package/package/components/copilot/AIFormAssistant.svelte.d.ts

@@ -3,6 +3,6 @@ interface Props {
     instructions: string;
     runnableType: 'script' | 'flow';
 }
-declare const AiFormAssistant: import("svelte").Component<Props, {}, "">;
-type AiFormAssistant = ReturnType<typeof AiFormAssistant>;
-export default AiFormAssistant;
+declare const AIFormAssistant: import("svelte").Component<Props, {}, "">;
+type AIFormAssistant = ReturnType<typeof AIFormAssistant>;
+export default AIFormAssistant;

package/package/components/copilot/AIFormSettings.svelte.d.ts

@@ -2,6 +2,6 @@ interface Props {
     prompt?: string | undefined;
     type?: 'flow' | 'script';
 }
-declare const AiFormSettings: import("svelte").Component<Props, {}, "prompt">;
-type AiFormSettings = ReturnType<typeof AiFormSettings>;
-export default AiFormSettings;
+declare const AIFormSettings: import("svelte").Component<Props, {}, "prompt">;
+type AIFormSettings = ReturnType<typeof AIFormSettings>;
+export default AIFormSettings;

package/package/components/copilot/FlowInlineScriptAIButton.svelte.d.ts

@@ -1,6 +1,6 @@
 interface Props {
     moduleId?: string;
 }
-declare const FlowInlineScriptAiButton: import("svelte").Component<Props, {}, "">;
-type FlowInlineScriptAiButton = ReturnType<typeof FlowInlineScriptAiButton>;
-export default FlowInlineScriptAiButton;
+declare const FlowInlineScriptAIButton: import("svelte").Component<Props, {}, "">;
+type FlowInlineScriptAIButton = ReturnType<typeof FlowInlineScriptAIButton>;
+export default FlowInlineScriptAIButton;

package/package/components/copilot/StepInputsGen.svelte

@@ -196,7 +196,7 @@ let openInputsModal = $state(false);
 				<Button
 					size="xs"
 					color="light"
-					btnClasses="text-violet-800 dark:text-violet-400 border border-violet-200 hover:bg-violet-50"
+					btnClasses={stepInputGenButtonClasses(false)}
 					nonCaptureEvent
 					startIcon={{
 						icon: Wand2

package/package/components/copilot/TestAIKey.svelte.d.ts

@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const TestAiKey: $$__sveltets_2_IsomorphicComponent<{
+declare const TestAIKey: $$__sveltets_2_IsomorphicComponent<{
     disabled?: boolean;
     apiKey?: string | undefined;
     resourcePath?: string | undefined;
@@ -21,5 +21,5 @@ declare const TestAiKey: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type TestAiKey = InstanceType<typeof TestAiKey>;
-export default TestAiKey;
+type TestAIKey = InstanceType<typeof TestAIKey>;
+export default TestAIKey;

package/package/components/copilot/chat/AIChat.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type ScriptLang } from '../../../gen';
 import { AIMode } from './AIChatManager.svelte';
-declare const AiChat: import("svelte").Component<Record<string, never>, {
+declare const AIChat: import("svelte").Component<Record<string, never>, {
     generateStep: (moduleId: string, lang: ScriptLang, instructions: string) => Promise<void>;
     sendRequest: (options?: {
         removeDiff?: boolean;
@@ -11,5 +11,5 @@ declare const AiChat: import("svelte").Component<Record<string, never>, {
         isPreprocessor?: boolean;
     }) => Promise<void>;
 }, "">;
-type AiChat = ReturnType<typeof AiChat>;
-export default AiChat;
+type AIChat = ReturnType<typeof AIChat>;
+export default AIChat;

package/package/components/copilot/chat/AIChatDisplay.svelte.d.ts

@@ -25,8 +25,8 @@ type $$ComponentProps = {
     disabledMessage?: string;
     suggestions?: string[];
 };
-declare const AiChatDisplay: import("svelte").Component<$$ComponentProps, {
+declare const AIChatDisplay: import("svelte").Component<$$ComponentProps, {
     focusInput: () => void;
 }, "selectedContext">;
-type AiChatDisplay = ReturnType<typeof AiChatDisplay>;
-export default AiChatDisplay;
+type AIChatDisplay = ReturnType<typeof AIChatDisplay>;
+export default AIChatDisplay;

package/package/components/copilot/chat/AIChatInlineWidget.svelte.d.ts

@@ -8,8 +8,8 @@ interface Props {
     show: boolean;
     editorHandler: AIChatEditorHandler;
 }
-declare const AiChatInlineWidget: import("svelte").Component<Props, {
+declare const AIChatInlineWidget: import("svelte").Component<Props, {
     focusInput: () => void;
 }, "show">;
-type AiChatInlineWidget = ReturnType<typeof AiChatInlineWidget>;
-export default AiChatInlineWidget;
+type AIChatInlineWidget = ReturnType<typeof AIChatInlineWidget>;
+export default AIChatInlineWidget;

package/package/components/copilot/chat/AIChatInput.svelte.d.ts

@@ -16,8 +16,8 @@ interface Props {
     bottomRightSnippet?: Snippet;
     onKeyDown?: (e: KeyboardEvent) => void;
 }
-declare const AiChatInput: import("svelte").Component<Props, {
+declare const AIChatInput: import("svelte").Component<Props, {
     focusInput: () => void;
 }, "selectedContext">;
-type AiChatInput = ReturnType<typeof AiChatInput>;
-export default AiChatInput;
+type AIChatInput = ReturnType<typeof AIChatInput>;
+export default AIChatInput;

package/package/components/copilot/chat/AIChatMessage.svelte.d.ts

@@ -7,6 +7,6 @@ interface Props {
     messageIndex: number;
     editingMessageIndex: number | null;
 }
-declare const AiChatMessage: import("svelte").Component<Props, {}, "selectedContext" | "editingMessageIndex">;
-type AiChatMessage = ReturnType<typeof AiChatMessage>;
-export default AiChatMessage;
+declare const AIChatMessage: import("svelte").Component<Props, {}, "selectedContext" | "editingMessageIndex">;
+type AIChatMessage = ReturnType<typeof AIChatMessage>;
+export default AIChatMessage;

package/package/components/copilot/chat/ContextElementBadge.svelte

@@ -70,7 +70,7 @@ const isDeletable = $derived(deletable && contextElement.deletable !== false);
 				<HighlightCode
 					language={contextElement.lang}
 					code={contextElement.content}
-					class="w-full p-2 "
+					className="w-full p-2 "
 				/>
 			</div>
 		{:else if contextElement.type === 'flow_module'}
@@ -79,7 +79,7 @@ const isDeletable = $derived(deletable && contextElement.deletable !== false);
 					<HighlightCode
 						language={contextElement.value.language}
 						code={contextElement.value.content}
-						class="w-full p-2 "
+						className="w-full p-2 "
 					/>
 				</div>
 			{:else}

package/package/components/copilot/chat/flow/AIChangesWarningModal.svelte.d.ts

@@ -2,6 +2,6 @@ type $$ComponentProps = {
     open: boolean;
     onConfirm: () => void;
 };
-declare const AiChangesWarningModal: import("svelte").Component<$$ComponentProps, {}, "open">;
-type AiChangesWarningModal = ReturnType<typeof AiChangesWarningModal>;
-export default AiChangesWarningModal;
+declare const AIChangesWarningModal: import("svelte").Component<$$ComponentProps, {}, "open">;
+type AIChangesWarningModal = ReturnType<typeof AIChangesWarningModal>;
+export default AIChangesWarningModal;

package/package/components/copilot/chat/flow/FlowAIButton.svelte.d.ts

@@ -3,6 +3,6 @@ type $$ComponentProps = {
     opened?: boolean;
     class?: string;
 };
-declare const FlowAiButton: import("svelte").Component<$$ComponentProps, {}, "">;
-type FlowAiButton = ReturnType<typeof FlowAiButton>;
-export default FlowAiButton;
+declare const FlowAIButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type FlowAIButton = ReturnType<typeof FlowAIButton>;
+export default FlowAIButton;

package/package/components/copilot/chat/flow/FlowAIChat.svelte

@@ -465,7 +465,10 @@ const flowHelpers = {
             else if (module.value.parallel || opts.parallel === true) {
                 // Only set parallelism if parallel is enabled
                 const n = Math.max(1, Math.floor(Math.abs(opts.parallelism)));
-                module.value.parallelism = n;
+                module.value.parallelism = {
+                    type: 'static',
+                    value: n
+                };
             }
         }
         refreshStateStore(flowStore);

package/package/components/copilot/chat/flow/FlowAIChat.svelte.d.ts

@@ -2,6 +2,6 @@ import FlowModuleSchemaMap from '../../../flows/map/FlowModuleSchemaMap.svelte';
 type $$ComponentProps = {
     flowModuleSchemaMap: FlowModuleSchemaMap | undefined;
 };
-declare const FlowAiChat: import("svelte").Component<$$ComponentProps, {}, "">;
-type FlowAiChat = ReturnType<typeof FlowAiChat>;
-export default FlowAiChat;
+declare const FlowAIChat: import("svelte").Component<$$ComponentProps, {}, "">;
+type FlowAIChat = ReturnType<typeof FlowAIChat>;
+export default FlowAIChat;

package/package/components/copilot/chat/script/CodeDisplay.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">import { getAstNode } from 'svelte-exmarkdown';
 import HighlightCode from '../../../HighlightCode.svelte';
 import { csharp, go, graphql, javascript, php, python, rust, shell, sql, typescript, yaml } from 'svelte-highlight/languages';
+import { aiChatManager, AIMode } from '../AIChatManager.svelte';
+import { Check, Play } from 'lucide-svelte';
 const astNode = getAstNode();
 function getSmartLang(lang) {
     switch (lang) {
@@ -59,15 +61,34 @@ const SMART_LANG_TO_HIGHLIGHT_LANG = {
 };
 let code = $derived(astNode.current.children?.[0]?.children?.[0]?.value);
 let language = $derived(astNode.current.children?.[0]?.properties?.class?.split('-')[1]);
+// Check if the apply button should be shown
+let showApplyButton = $derived.by(() => {
+    if (aiChatManager.mode !== AIMode.SCRIPT ||
+        !aiChatManager.scriptEditorApplyCode ||
+        code === aiChatManager.scriptEditorOptions?.code) {
+        return false;
+    }
+    return true;
+});
+function handleApplyCode() {
+    if (code && aiChatManager.scriptEditorApplyCode) {
+        aiChatManager.scriptEditorApplyCode(code, { mode: 'apply' });
+    }
+}
 </script>
 
-<div
-	class="flex flex-col not-prose relative w-full border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden"
->
-	<HighlightCode
-		class="p-1"
-		code={code ?? ''}
-		highlightLanguage={SMART_LANG_TO_HIGHLIGHT_LANG[getSmartLang(language as string)]}
-		language={undefined}
-	/>
+<div class="flex flex-col gap-0.5 rounded-lg relative not-prose">
+	<div
+		class="relative w-full border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden"
+	>
+		<HighlightCode
+			className="p-1"
+			code={code ?? ''}
+			highlightLanguage={SMART_LANG_TO_HIGHLIGHT_LANG[getSmartLang(language as string)]}
+			language={undefined}
+			onApplyCode={handleApplyCode}
+			{showApplyButton}
+			applyButtonIcon={aiChatManager.pendingNewCode ? Check : Play}
+		/>
+	</div>
 </div>

package/package/components/copilot/chat/script/core.d.ts

@@ -1,8 +1,9 @@
-import type { AIProviderModel, ResourceType, ScriptLang } from '../../../../gen/types.gen';
+import type { AIProvider, AIProviderModel, ResourceType, ScriptLang } from '../../../../gen/types.gen';
 import type { ChatCompletionSystemMessageParam, ChatCompletionUserMessageParam } from 'openai/resources/index.mjs';
 import type { ContextElement } from '../context';
 import { type Tool } from '../shared';
 import type { ReviewChangesOpts } from '../monaco-adapter';
+export declare const DIFF_BASED_EDIT_PROVIDERS: AIProvider[];
 export declare function formatResourceTypes(allResourceTypes: ResourceType[], lang: 'python3' | 'php' | 'bun' | 'deno' | 'nativets' | 'bunnative'): string;
 export declare const SUPPORTED_CHAT_SCRIPT_LANGUAGES: string[];
 export declare function getLangContext(lang: ScriptLang | 'bunnative' | 'jsx' | 'tsx' | 'json', { allowResourcesFetch, isPreprocessor }?: {

package/package/components/copilot/chat/script/core.js

@@ -16,7 +16,12 @@ const DOCS_CONTEXT_PERCENTAGE = 1;
 // percentage of the context window for types of npm packages
 const TYPES_CONTEXT_PERCENTAGE = 1;
 // good providers for diff-based edit
-const DIFF_BASED_EDIT_PROVIDERS = ['openai', 'anthropic', 'googleai', 'azure_openai'];
+export const DIFF_BASED_EDIT_PROVIDERS = [
+    'openai',
+    'anthropic',
+    'googleai',
+    'azure_openai'
+];
 export function formatResourceTypes(allResourceTypes, lang) {
     const resourceTypes = allResourceTypes.filter((rt) => isObject(rt.schema) && 'properties' in rt.schema && isObject(rt.schema.properties));
     if (lang === 'python3') {

package/package/components/details/DetailPageLayout.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">import { Tabs, Tab, TabContent } from '../common';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import DetailPageDetailPanel from './DetailPageDetailPanel.svelte';
-let { isOperator = false, flow_json = undefined, selected = $bindable(), forceSmallScreen = false, header, form, scriptRender: script, save_inputs, flow_step, triggers } = $props();
+import FlowViewerInner from '../FlowViewerInner.svelte';
+let { isOperator = false, flow_json = undefined, selected = $bindable(), forceSmallScreen = false, isChatMode = false, header, form, scriptRender: script, save_inputs, flow_step, triggers } = $props();
 let mobileTab = $state('form');
 let clientWidth = $state(window.innerWidth);
 const script_render = $derived(script);
@@ -44,8 +45,10 @@ const useDesktopLayout = $derived(clientWidth >= 768 && !forceSmallScreen);
 			{@render header?.()}
 			<div class="grow min-h-0 w-full flex flex-col">
 				<Tabs bind:selected={mobileTab} wrapperClass="flex-none">
-					<Tab value="form">Run form</Tab>
-					<Tab value="saved_inputs">Inputs</Tab>
+					<Tab value="form">{isChatMode ? 'Chat' : 'Run form'}</Tab>
+					{#if !isChatMode}
+						<Tab value="saved_inputs">Inputs</Tab>
+					{/if}
 					{#if !isOperator}
 						<Tab value="triggers">Triggers</Tab>
 					{/if}
@@ -67,6 +70,11 @@ const useDesktopLayout = $derived(clientWidth >= 768 && !forceSmallScreen);
 							<TabContent value="triggers" class="flex flex-col flex-1 h-full mt-[-2px]">
 								{@render triggers?.()}
 							</TabContent>
+							{#if flow_json}
+								<TabContent value="raw" class="flex flex-col flex-1 h-full overflow-auto p-2">
+									<FlowViewerInner flow={flow_json} />
+								</TabContent>
+							{/if}
 							<TabContent value="script" class="flex flex-col flex-1 h-full">
 								{@render script?.()}
 							</TabContent>

package/package/components/details/DetailPageLayout.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     flow_json?: any | undefined;
     selected: string;
     forceSmallScreen?: boolean;
+    isChatMode?: boolean;
     header?: import('svelte').Snippet;
     form?: import('svelte').Snippet;
     scriptRender?: import('svelte').Snippet;

package/package/components/flows/content/DynamicInputHelpBox.svelte

@@ -20,15 +20,15 @@ $: opened = false;
 
 {#if opened}
 	<div
-		class="bg-surface-secondary border-l-4 text-sm text-secondary p-4 mt-2"
+		class="bg-surface-secondary border-x border-r-0 border-l-4 text-sm text-secondary p-4 mt-2"
 		role="alert"
 		id="dynamic-input-help-box"
 	>
 		Single JavaScript expression. The following functions and objects are available:
-		<ul class="ml-4">
+		<ul class="ml-4 list-disc">
 			<li
-				><b>{'results.<id>'}</b>: the result of step at id 'id' (use <b>{'results?.<id>'}</b> if id may
-				not exist because branch was not chosen)</li
+				><b>{'results.<id>'}</b>: the result of step at id 'id' (use optional chaining if id may not
+				exist because branch was not chosen, for example: <code>{'results.<id>?.[0]'}</code>)</li
 			>
 			<li><b>flow_input</b>: the object containing the flow input arguments</li>
 			<li><b>previous_result</b>: the result of previous step</li>

package/package/components/flows/content/FlowInput.svelte

@@ -22,7 +22,7 @@ import CaptureTable from '../../triggers/CaptureTable.svelte';
 import { isObjectTooBig, readFieldsRecursively } from '../../../utils';
 import { refreshStateStore } from '../../../svelte5Utils.svelte';
 import { deepEqual } from 'fast-equals';
-import FlowChatInterface from '../FlowChatInterface.svelte';
+import FlowChatInterface from '../conversations/FlowChatInterface.svelte';
 import Toggle from '../../Toggle.svelte';
 import { AI_AGENT_SCHEMA } from '../flowInfers';
 import { nextId } from '../flowModuleNextId';