windmill-components 1.472.1 → 1.472.2

package/package/components/copilot/IteratorGen.svelte

@@ -0,0 +1,167 @@
+<script>import { Check, Loader2, Wand2 } from 'lucide-svelte';
+import Button from '../common/button/Button.svelte';
+import { getNonStreamingCompletion } from './lib';
+import { sendUserToast } from '../../toast';
+import ManualPopover from '../ManualPopover.svelte';
+import { createEventDispatcher, getContext } from 'svelte';
+import YAML from 'yaml';
+import { sliceModules } from '../flows/flowStateUtils';
+import { dfs } from '../flows/dfs';
+import { yamlStringifyExceptKeys } from './utils';
+import { copilotInfo, stepInputCompletionEnabled } from '../../stores';
+import { twMerge } from 'tailwind-merge';
+let generatedContent = '';
+let loading = false;
+export let focused = false;
+export let arg;
+export let pickableProperties = undefined;
+let btnFocused = false;
+let empty = false;
+$: empty =
+    Object.keys(arg ?? {}).length === 0 ||
+        (arg.type === 'static' && !arg.value) ||
+        (arg.type === 'javascript' && !arg.expr);
+let abortController = new AbortController();
+const { flowStore, selectedId } = getContext('FlowEditorContext');
+async function generateIteratorExpr() {
+    if (generatedContent.length > 0 || loading) {
+        return;
+    }
+    abortController = new AbortController();
+    loading = true;
+    const flow = JSON.parse(JSON.stringify($flowStore));
+    const idOrders = dfs(flow.value.modules, (x) => x.id);
+    const upToIndex = idOrders.indexOf($selectedId);
+    if (upToIndex === -1) {
+        throw new Error('Could not find the selected id in the flow');
+    }
+    const flowDetails = 'Take into account the following information for never tested results:\n<flowDetails>\n' +
+        yamlStringifyExceptKeys(sliceModules(flow.value.modules, upToIndex, idOrders), ['lock']) +
+        '</flowDetails>';
+    try {
+        const availableData = {
+            results: pickableProperties?.priorIds,
+            flow_input: pickableProperties?.flow_input
+        };
+        const user = `I'm building a workflow which is a DAG of script steps.
+The current step is ${$selectedId} and represents a for-loop. You can find the details of all the steps below:
+${flowDetails}
+Determine the iterator expression to pass either from the previous results or the flow inputs. Here's a summary of the available data:
+<available>
+${YAML.stringify(availableData)}</available>
+Reply with the most probable answer, do not explain or discuss.
+Use javascript object dot notation to access the properties.
+Only output the expression, do not explain or discuss.`;
+        const aiProvider = $copilotInfo.ai_provider;
+        generatedContent = await getNonStreamingCompletion([
+            {
+                role: 'user',
+                content: user
+            }
+        ], abortController, aiProvider);
+    }
+    catch (err) {
+        if (!abortController.signal.aborted) {
+            sendUserToast('Could not generate summary: ' + err, true);
+        }
+    }
+    finally {
+        loading = false;
+    }
+}
+export function onKeyUp(event) {
+    if (!$copilotInfo.exists_ai_resource || !$stepInputCompletionEnabled) {
+        return;
+    }
+    if (event.key === 'Tab') {
+        if (!loading && generatedContent) {
+            event.preventDefault();
+            dispatch('setExpr', generatedContent);
+            generatedContent = '';
+        }
+    }
+    else {
+        cancel();
+    }
+}
+const dispatch = createEventDispatcher();
+function automaticGeneration() {
+    if (empty) {
+        generateIteratorExpr();
+    }
+}
+function cancelOnOutOfFocus() {
+    setTimeout(() => {
+        if (!focused && !btnFocused) {
+            // only cancel if out of focus is not due to click on btn
+            cancel();
+        }
+    }, 150);
+}
+$: if (!focused) {
+    cancelOnOutOfFocus();
+}
+$: if ($copilotInfo.exists_ai_resource && $stepInputCompletionEnabled && focused) {
+    automaticGeneration();
+}
+function cancel() {
+    abortController.abort();
+    generatedContent = '';
+}
+$: dispatch('showExpr', generatedContent);
+let out = true; // hack to prevent regenerating answer when accepting the answer due to mouseenter on new icon
+</script>
+
+{#if $copilotInfo.exists_ai_resource && $stepInputCompletionEnabled}
+	<ManualPopover showTooltip={!empty && generatedContent.length > 0} placement="bottom" class="p-2">
+		<Button
+			size="xs"
+			color="light"
+			btnClasses={twMerge(
+				'text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700 dark:hover:bg-surface-hover',
+				!loading && generatedContent.length > 0
+					? 'bg-green-100 text-green-800 hover:bg-green-100 dark:text-green-400 dark:bg-green-700 dark:hover:bg-green-700'
+					: ''
+			)}
+			on:click={() => {
+				if (!loading && generatedContent.length > 0) {
+					dispatch('setExpr', generatedContent)
+					generatedContent = ''
+				}
+			}}
+			on:focus={() => {
+				btnFocused = true
+			}}
+			on:blur={() => {
+				btnFocused = false
+			}}
+			on:mouseenter={(ev) => {
+				if (out) {
+					out = false
+					generateIteratorExpr()
+				}
+			}}
+			on:mouseleave={() => {
+				out = true
+				cancel()
+			}}
+			endIcon={{
+				icon: loading ? Loader2 : generatedContent.length > 0 ? Check : Wand2,
+				classes: loading ? 'animate-spin' : ''
+			}}
+		>
+			{#if focused}
+				{#if loading}
+					ESC
+				{:else if generatedContent.length > 0}
+					TAB
+				{/if}
+			{/if}
+		</Button>
+		<svelte:fragment slot="content">
+			<div class="text-sm text-tertiary">
+				{generatedContent}
+			</div>
+		</svelte:fragment>
+	</ManualPopover>
+{/if}

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { InputTransform } from '../../gen';
+import type { PickableProperties } from '../flows/previousResults';
+declare const __propDef: {
+    props: {
+        focused?: boolean | undefined;
+        arg: InputTransform | any;
+        pickableProperties?: PickableProperties | undefined;
+        onKeyUp?: ((event: KeyboardEvent) => void) | undefined;
+    };
+    events: {
+        setExpr: CustomEvent<any>;
+        showExpr: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IteratorGenProps = typeof __propDef.props;
+export type IteratorGenEvents = typeof __propDef.events;
+export type IteratorGenSlots = typeof __propDef.slots;
+export default class IteratorGen extends SvelteComponent<IteratorGenProps, IteratorGenEvents, IteratorGenSlots> {
+    get onKeyUp(): (event: KeyboardEvent) => void;
+}
+export {};

package/package/components/copilot/MetadataGen.svelte

@@ -0,0 +1,265 @@
+<script>import { getCompletion, getResponseFromEvent } from './lib';
+import { isInitialCode } from '../../script_helpers';
+import { Check, Loader2, Wand2 } from 'lucide-svelte';
+import { copilotInfo, metadataCompletionEnabled } from '../../stores';
+import { createEventDispatcher, onDestroy } from 'svelte';
+import { sendUserToast } from '../../toast';
+import { twMerge } from 'tailwind-merge';
+import autosize from '../../autosize';
+import { yamlStringifyExceptKeys } from './utils';
+const promptConfigs = {
+    summary: {
+        system: `
+You are a helpful AI assistant. You generate very brief summaries from scripts.
+The summaries need to be as short as possible (maximum 8 words) and only give a global idea. Do not specify the programming language. Do not use any punctation. Avoid using prepositions and articles.
+Examples: List the commits of a GitHub repository, Divide a number by 16, etc..
+`,
+        user: `
+Generate a very short summary for the script below:
+\'\'\'code
+{code}
+\`\`\`
+`,
+        placeholderName: 'code'
+    },
+    description: {
+        system: `
+You are a helpful AI assistant. You generate descriptions from scripts.
+These descriptions are used to explain to other users what the script does and how to use it.
+Be as short as possible to give a global idea, maximum 3-4 sentences.
+All scripts export an asynchronous function called main, do not include it in the description.
+Do not describe how to call it either.
+`,
+        user: `
+Generate a description for the script below:
+\'\'\'code
+{code}
+\`\`\`
+`,
+        placeholderName: 'code'
+    },
+    flowSummary: {
+        system: `
+			You are a helpful AI assistant. You generate very brief summaries from scripts.
+The summaries need to be as short as possible (maximum 8 words) and only give a global idea. Do not use any punctation. Avoid using prepositions and articles.
+`,
+        user: `
+Summarize the flow below in one very short sentence without punctation:
+{flow}`,
+        placeholderName: 'flow'
+    },
+    flowDescription: {
+        system: `
+You are a helpful AI assistant. You generate descriptions from flow.
+These descriptions are used to explain to other users what the flow does and how to use it.
+Be as short as possible to give a global idea, maximum 3-4 sentences.
+Do not include line breaks.
+`,
+        user: `
+Generate a description for the flow below:
+{flow}`,
+        placeholderName: 'flow'
+    }
+};
+export let content;
+export let code = undefined;
+export let flow = undefined;
+export let promptConfigName;
+export let generateOnAppear = false;
+export let elementType = 'input';
+export let elementProps = {};
+let el;
+let generatedContent = '';
+let active = false;
+let loading = false;
+let abortController = new AbortController();
+let manualDisabled = false;
+let width = 0;
+let genHeight = 0;
+let focused = false;
+let config = promptConfigs[promptConfigName];
+async function generateContent(automatic = false) {
+    abortController = new AbortController();
+    loading = true;
+    try {
+        const placeholderContent = flow ? yamlStringifyExceptKeys(flow, ['lock']) : code;
+        if (!placeholderContent) {
+            sendUserToast('Could not generate summary: no content to generate from', true);
+            return;
+        }
+        // return
+        const messages = [
+            {
+                role: 'system',
+                content: config.system
+            },
+            {
+                role: 'user',
+                content: config.user.replace(`{${config.placeholderName}}`, placeholderContent)
+            }
+        ];
+        const aiProvider = $copilotInfo.ai_provider;
+        const response = await getCompletion(messages, abortController, aiProvider);
+        generatedContent = '';
+        for await (const chunk of response) {
+            generatedContent += getResponseFromEvent(chunk, aiProvider);
+        }
+    }
+    catch (err) {
+        if (!abortController.signal.aborted) {
+            if (automatic) {
+                console.error('Could not generate summary ' + err);
+            }
+            else {
+                sendUserToast('Could not generate summary: ' + err, true);
+            }
+        }
+    }
+    finally {
+        loading = false;
+    }
+}
+if ($copilotInfo.exists_ai_resource &&
+    $metadataCompletionEnabled &&
+    generateOnAppear &&
+    !content &&
+    code &&
+    !isInitialCode(code)) {
+    setTimeout(() => {
+        el?.focus();
+    }, 0);
+    generateContent(true);
+}
+const dispatch = createEventDispatcher();
+$: if (content) {
+    dispatch('change', { content });
+}
+$: active =
+    $copilotInfo.exists_ai_resource &&
+        $metadataCompletionEnabled &&
+        !content &&
+        (loading || focused || !!generatedContent) &&
+        !manualDisabled &&
+        ((config.placeholderName === 'code' && !!code) ||
+            (config.placeholderName === 'flow' &&
+                !!flow &&
+                Array.isArray(flow.modules) &&
+                flow.modules.length > 0));
+$: focused && (manualDisabled = false);
+$: if (content) {
+    abortController.abort();
+    generatedContent = '';
+}
+else {
+    manualDisabled = false;
+}
+$: if (elementType === 'textarea' && el !== undefined && !content) {
+    el.style.height = Math.max(genHeight + 34, 58) + 'px';
+}
+onDestroy(() => {
+    abortController.abort();
+});
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	class={twMerge('relative', $$props.class)}
+	bind:clientWidth={width}
+	on:keydown={(event) => {
+		if (!$copilotInfo.exists_ai_resource || !$metadataCompletionEnabled) {
+			return
+		}
+		if (event.key === 'Tab') {
+			if (manualDisabled) {
+				event.preventDefault()
+				manualDisabled = false
+			} else if (!loading && generatedContent) {
+				event.preventDefault()
+				content = generatedContent
+				generatedContent = ''
+			} else if (!loading && !content) {
+				event.preventDefault()
+				generateContent()
+			}
+		} else if (event.key === 'Escape' && !manualDisabled) {
+			event.preventDefault()
+			event.stopPropagation()
+			if (loading) {
+				abortController.abort()
+			} else {
+				manualDisabled = true
+				generatedContent = ''
+			}
+		} else if (event.key === 'Backspace' && !loading && !content) {
+			manualDisabled = true
+			generatedContent = ''
+		}
+	}}
+>
+	<div
+		class="absolute left-[0.5rem] {elementType === 'textarea'
+			? 'top-[1.3rem]'
+			: 'top-[0.3rem]'}  flex flex-row gap-2 items-start pointer-events-none"
+	>
+		{#if active}
+			<span
+				class={twMerge(
+					'absolute text-xs bg-violet-100 text-violet-800 dark:bg-gray-700 dark:text-violet-400 px-1 py-0.5 rounded-md flex flex-row items-center justify-center gap-2 transition-all shrink-0',
+					!loading && generatedContent.length > 0
+						? 'bg-green-100 text-green-800 dark:text-green-400 dark:bg-green-700'
+						: ''
+				)}
+			>
+				<span class="px-0.5 py-0.5 rounded-md text-2xs text-bold flex flex-row items-center gap-1">
+					{#if loading}
+						ESC
+					{:else}
+						TAB
+					{/if}
+					{#if loading}
+						<Loader2 class="animate-spin" size={12} />
+					{:else if generatedContent}
+						<Check size={12} />
+					{:else}
+						<Wand2 size={12} />
+					{/if}
+				</span>
+			</span>
+			<div
+				bind:clientHeight={genHeight}
+				class={twMerge(
+					'text-sm leading-6 indent-[3.5rem] text-gray-500 dark:text-gray-400 pr-1',
+					elementType === 'input' ? 'text-ellipsis overflow-hidden whitespace-nowrap' : ''
+				)}
+				style={elementType === 'input' ? `max-width: calc(${width}px - 0.5rem)` : ''}
+			>
+				{generatedContent}
+			</div>
+		{/if}
+	</div>
+	{#if elementType === 'textarea'}
+		<div>
+			<div class="flex flex-row-reverse !text-3xs text-tertiary -mt-4">GH Markdown</div>
+			<textarea
+				bind:this={el}
+				bind:value={content}
+				use:autosize
+				{...elementProps}
+				placeholder={!active ? elementProps.placeholder : ''}
+				class={active ? '!indent-[3.5rem]' : ''}
+				on:focus={() => (focused = true)}
+				on:blur={() => (focused = false)}
+			/>
+		</div>
+	{:else}
+		<input
+			bind:this={el}
+			bind:value={content}
+			placeholder={!active ? elementProps.placeholder : ''}
+			class={active ? '!indent-[3.5rem]' : ''}
+			on:focus={() => (focused = true)}
+			on:blur={() => (focused = false)}
+		/>
+	{/if}
+	<!-- <slot {updateFocus} {active} {generatedContent} classNames={active ? '!indent-[8.8rem]' : ''} /> -->
+</div>

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

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { FlowValue } from '../../gen';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        content: string | undefined;
+        code?: string | undefined;
+        flow?: FlowValue | undefined;
+        promptConfigName: "summary" | "description" | "flowSummary" | "flowDescription";
+        generateOnAppear?: boolean | undefined;
+        elementType?: "textarea" | "input" | undefined;
+        elementProps?: Record<string, any> | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MetadataGenProps = typeof __propDef.props;
+export type MetadataGenEvents = typeof __propDef.events;
+export type MetadataGenSlots = typeof __propDef.slots;
+export default class MetadataGen extends SvelteComponent<MetadataGenProps, MetadataGenEvents, MetadataGenSlots> {
+}
+export {};

package/package/components/copilot/PredicateGen.svelte

@@ -0,0 +1,122 @@
+<script>import { Wand2 } from 'lucide-svelte';
+import Button from '../common/button/Button.svelte';
+import { getNonStreamingCompletion } from './lib';
+import { sendUserToast } from '../../toast';
+import { createEventDispatcher, getContext } from 'svelte';
+import YAML from 'yaml';
+import { sliceModules } from '../flows/flowStateUtils';
+import { dfs } from '../flows/dfs';
+import { yamlStringifyExceptKeys } from './utils';
+import { copilotInfo, stepInputCompletionEnabled } from '../../stores';
+import Popover from '../meltComponents/Popover.svelte';
+let loading = false;
+export let pickableProperties = undefined;
+let instructions = '';
+let instructionsField = undefined;
+$: instructionsField && setTimeout(() => instructionsField?.focus(), 100);
+let abortController = new AbortController();
+const { flowStore, selectedId } = getContext('FlowEditorContext');
+const dispatch = createEventDispatcher();
+async function generatePredicate() {
+    abortController = new AbortController();
+    loading = true;
+    const flow = JSON.parse(JSON.stringify($flowStore));
+    const idOrders = dfs(flow.value.modules, (x) => x.id);
+    const upToIndex = idOrders.indexOf($selectedId);
+    if (upToIndex === -1) {
+        throw new Error('Could not find the selected id in the flow');
+    }
+    const flowDetails = 'Take into account the following information for never tested results:\n<flowDetails>\n' +
+        yamlStringifyExceptKeys(sliceModules(flow.value.modules, upToIndex, idOrders), ['lock']) +
+        '</flowDetails>';
+    try {
+        const availableData = {
+            results: pickableProperties?.priorIds,
+            flow_input: pickableProperties?.flow_input
+        };
+        const user = `I'm building a workflow which is a DAG of script steps.
+The current step is ${$selectedId} and is a branching step (if-else). 
+The user wants to generate a predicate for the branching condition.
+Here's the user's request: ${instructions}
+You can find the details of all the steps below:
+${flowDetails}
+
+Determine for the user the JavaScript expression for the branching condition composed of the previous results or the flow inputs.
+All inputs start with either results. or flow_input. and are followed by the key of the input.
+Here's a summary of the available data:
+<available>
+${YAML.stringify(availableData)}</available>
+If the branching is made inside a for-loop, the iterator value is accessible as flow_input.iter.value
+Only return the expression without any wrapper. Do not explain or discuss.`;
+        const aiProvider = $copilotInfo.ai_provider;
+        const result = await getNonStreamingCompletion([
+            {
+                role: 'user',
+                content: user
+            }
+        ], abortController, aiProvider);
+        dispatch('setExpr', result);
+        dispatch('updateSummary', instructions);
+    }
+    catch (err) {
+        if (!abortController.signal.aborted) {
+            sendUserToast('Could not generate summary: ' + err, true);
+        }
+    }
+    finally {
+        loading = false;
+    }
+}
+</script>
+
+{#if $copilotInfo.exists_ai_resource && $stepInputCompletionEnabled}
+	<Popover
+		floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
+		contentClasses="p-4 flex w-96"
+	>
+		<svelte:fragment slot="trigger">
+			<Button
+				color={loading ? 'red' : 'light'}
+				size="xs"
+				nonCaptureEvent={!loading}
+				startIcon={{ icon: Wand2 }}
+				iconOnly
+				title="AI Assistant"
+				btnClasses="min-h-[30px] text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+				{loading}
+				clickableWhileLoading
+				on:click={loading ? () => abortController?.abort() : undefined}
+			/>
+		</svelte:fragment>
+		<svelte:fragment slot="content" let:close>
+			<input
+				bind:this={instructionsField}
+				type="text"
+				placeholder="Predicate description"
+				bind:value={instructions}
+				on:keypress={({ key }) => {
+					if (key === 'Enter' && instructions.length > 0) {
+						close()
+						generatePredicate()
+					}
+				}}
+			/>
+			<Button
+				size="xs"
+				color="light"
+				variant="contained"
+				buttonType="button"
+				btnClasses="!p-1 !w-[38px] !ml-2 text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+				title="Generate predicate from prompt"
+				aria-label="Generate"
+				iconOnly
+				on:click={() => {
+					close()
+					generatePredicate()
+				}}
+				disabled={instructions.length == 0}
+				startIcon={{ icon: Wand2 }}
+			/>
+		</svelte:fragment>
+	</Popover>
+{/if}

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { PickableProperties } from '../flows/previousResults';
+declare const __propDef: {
+    props: {
+        pickableProperties?: PickableProperties | undefined;
+    };
+    events: {
+        setExpr: CustomEvent<any>;
+        updateSummary: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PredicateGenProps = typeof __propDef.props;
+export type PredicateGenEvents = typeof __propDef.events;
+export type PredicateGenSlots = typeof __propDef.slots;
+export default class PredicateGen extends SvelteComponent<PredicateGenProps, PredicateGenEvents, PredicateGenSlots> {
+}
+export {};