windmill-components 1.122.0 → 1.138.2

package/package/components/apps/svelte-select/lib/Select.svelte.d.ts

@@ -0,0 +1,205 @@
+/** @typedef {typeof __propDef.props}  SelectProps */
+/** @typedef {typeof __propDef.events}  SelectEvents */
+/** @typedef {typeof __propDef.slots}  SelectSlots */
+export default class Select extends SvelteComponentTyped<{
+    value?: any;
+    id?: null | undefined;
+    name?: null | undefined;
+    input?: any;
+    filter?: typeof _filter | undefined;
+    class?: string | undefined;
+    label?: string | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    placeholder?: string | undefined;
+    required?: boolean | undefined;
+    items?: any;
+    loadOptions?: any;
+    filterText?: string | undefined;
+    itemId?: string | undefined;
+    groupBy?: any;
+    filterSelectedItems?: boolean | undefined;
+    itemFilter?: ((label: any, filterText: any, option: any) => boolean) | undefined;
+    container?: any;
+    portal?: boolean | undefined;
+    justValue?: any;
+    inAppEditor?: boolean | undefined;
+    getItems?: typeof _getItems | undefined;
+    focused?: boolean | undefined;
+    groupFilter?: ((groups: any) => any) | undefined;
+    groupHeaderSelectable?: boolean | undefined;
+    containerStyles?: string | undefined;
+    hasError?: boolean | undefined;
+    closeListOnChange?: boolean | undefined;
+    createGroupHeaderItem?: ((groupValue: any, item: any) => {
+        [x: string]: any;
+        value: any;
+    }) | undefined;
+    getFilteredItems?: (() => any) | undefined;
+    searchable?: boolean | undefined;
+    inputStyles?: string | undefined;
+    clearable?: boolean | undefined;
+    listOpen?: boolean | undefined;
+    debounce?: ((fn: any, wait?: number) => void) | undefined;
+    debounceWait?: number | undefined;
+    hideEmptyState?: boolean | undefined;
+    inputAttributes?: {} | undefined;
+    listAutoWidth?: boolean | undefined;
+    showChevron?: boolean | undefined;
+    listOffset?: number | undefined;
+    hoverItemIndex?: number | undefined;
+    floatingConfig?: {} | undefined;
+    handleClear?: (() => void) | undefined;
+    ariaValues?: ((values: any) => string) | undefined;
+    ariaListOpen?: ((label: any, count: any) => string) | undefined;
+    ariaFocused?: (() => string) | undefined;
+}, {
+    mousedown: MouseEvent;
+    pointerup: PointerEvent;
+    pointerdown: PointerEvent;
+    keydown: KeyboardEvent;
+    input: CustomEvent<any>;
+    hoverItem: CustomEvent<any>;
+    filter: CustomEvent<any>;
+    focus: CustomEvent<any>;
+    blur: CustomEvent<any>;
+    clear: CustomEvent<any>;
+    change: CustomEvent<any>;
+    select: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'list-prepend': {};
+    list: {
+        filteredItems: any;
+    };
+    item: {
+        item: any;
+        index: any;
+    };
+    empty: {};
+    'list-append': {};
+    prepend: {};
+    selection: {
+        selection: any;
+    };
+    'loading-icon': {};
+    'clear-icon': {};
+    'chevron-icon': {
+        listOpen: boolean;
+    };
+    'input-hidden': {
+        value: any;
+    };
+    required: {
+        value: any;
+    };
+}> {
+    get getFilteredItems(): () => any;
+    get handleClear(): () => void;
+}
+export type SelectProps = typeof __propDef.props;
+export type SelectEvents = typeof __propDef.events;
+export type SelectSlots = typeof __propDef.slots;
+import _filter from './filter';
+import _getItems from './get-items';
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: any;
+        id?: null | undefined;
+        name?: null | undefined;
+        input?: any;
+        filter?: typeof _filter | undefined;
+        class?: string | undefined;
+        label?: string | undefined;
+        disabled?: boolean | undefined;
+        loading?: boolean | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
+        items?: any;
+        loadOptions?: any;
+        filterText?: string | undefined;
+        itemId?: string | undefined;
+        groupBy?: any;
+        filterSelectedItems?: boolean | undefined;
+        itemFilter?: ((label: any, filterText: any, option: any) => boolean) | undefined;
+        container?: any;
+        portal?: boolean | undefined;
+        justValue?: any;
+        inAppEditor?: boolean | undefined;
+        getItems?: typeof _getItems | undefined;
+        focused?: boolean | undefined;
+        groupFilter?: ((groups: any) => any) | undefined;
+        groupHeaderSelectable?: boolean | undefined;
+        containerStyles?: string | undefined;
+        hasError?: boolean | undefined;
+        closeListOnChange?: boolean | undefined;
+        createGroupHeaderItem?: ((groupValue: any, item: any) => {
+            [x: string]: any;
+            value: any;
+        }) | undefined;
+        getFilteredItems?: (() => any) | undefined;
+        searchable?: boolean | undefined;
+        inputStyles?: string | undefined;
+        clearable?: boolean | undefined;
+        listOpen?: boolean | undefined;
+        debounce?: ((fn: any, wait?: number) => void) | undefined;
+        debounceWait?: number | undefined;
+        hideEmptyState?: boolean | undefined;
+        inputAttributes?: {} | undefined;
+        listAutoWidth?: boolean | undefined;
+        showChevron?: boolean | undefined;
+        listOffset?: number | undefined;
+        hoverItemIndex?: number | undefined;
+        floatingConfig?: {} | undefined;
+        handleClear?: (() => void) | undefined;
+        ariaValues?: ((values: any) => string) | undefined;
+        ariaListOpen?: ((label: any, count: any) => string) | undefined;
+        ariaFocused?: (() => string) | undefined;
+    };
+    events: {
+        mousedown: MouseEvent;
+        pointerup: PointerEvent;
+        pointerdown: PointerEvent;
+        keydown: KeyboardEvent;
+        input: CustomEvent<any>;
+        hoverItem: CustomEvent<any>;
+        filter: CustomEvent<any>;
+        focus: CustomEvent<any>;
+        blur: CustomEvent<any>;
+        clear: CustomEvent<any>;
+        change: CustomEvent<any>;
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'list-prepend': {};
+        list: {
+            filteredItems: any;
+        };
+        item: {
+            item: any;
+            index: any;
+        };
+        empty: {};
+        'list-append': {};
+        prepend: {};
+        selection: {
+            selection: any;
+        };
+        'loading-icon': {};
+        'clear-icon': {};
+        'chevron-icon': {
+            listOpen: boolean;
+        };
+        'input-hidden': {
+            value: any;
+        };
+        required: {
+            value: any;
+        };
+    };
+};
+export {};

package/package/components/apps/svelte-select/lib/filter.d.ts

@@ -0,0 +1,13 @@
+export default function filter({ loadOptions, filterText, items, value, itemId, groupBy, filterSelectedItems, itemFilter, convertStringItemsToObjects, filterGroupedItems, label }: {
+    loadOptions: any;
+    filterText: any;
+    items: any;
+    value: any;
+    itemId: any;
+    groupBy: any;
+    filterSelectedItems: any;
+    itemFilter: any;
+    convertStringItemsToObjects: any;
+    filterGroupedItems: any;
+    label: any;
+}): any;

package/package/components/apps/svelte-select/lib/filter.js

@@ -0,0 +1,32 @@
+export default function filter({
+	loadOptions,
+	filterText,
+	items,
+	value,
+	itemId,
+	groupBy,
+	filterSelectedItems,
+	itemFilter,
+	convertStringItemsToObjects,
+	filterGroupedItems,
+	label
+}) {
+	if (items && loadOptions) return items
+	if (!items) return []
+
+	if (items && items.length > 0 && typeof items[0] !== 'object') {
+		items = convertStringItemsToObjects(items)
+	}
+
+	let filterResults = items.filter((item) => {
+		let matchesFilter = itemFilter(item[label], filterText, item)
+
+		return matchesFilter
+	})
+
+	if (groupBy) {
+		filterResults = filterGroupedItems(filterResults)
+	}
+
+	return filterResults
+}

package/package/components/apps/svelte-select/lib/get-items.d.ts

@@ -0,0 +1,11 @@
+export default function getItems({ dispatch, loadOptions, convertStringItemsToObjects, filterText }: {
+    dispatch: any;
+    loadOptions: any;
+    convertStringItemsToObjects: any;
+    filterText: any;
+}): Promise<{
+    filteredItems: any;
+    loading: boolean;
+    focused: boolean;
+    listOpen: boolean;
+} | undefined>;

package/package/components/apps/svelte-select/lib/get-items.js

@@ -0,0 +1,30 @@
+export default async function getItems({
+	dispatch,
+	loadOptions,
+	convertStringItemsToObjects,
+	filterText
+}) {
+	let res = await loadOptions(filterText).catch((err) => {
+		console.warn('svelte-select loadOptions error :>> ', err)
+		dispatch('error', { type: 'loadOptions', details: err })
+	})
+
+	if (res && !res.cancelled) {
+		if (res) {
+			if (res && res.length > 0 && typeof res[0] !== 'object') {
+				res = convertStringItemsToObjects(res)
+			}
+
+			dispatch('loaded', { items: res })
+		} else {
+			res = []
+		}
+
+		return {
+			filteredItems: res,
+			loading: false,
+			focused: true,
+			listOpen: true
+		}
+	}
+}

package/package/components/apps/svelte-select/lib/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./Select.svelte";

package/package/components/apps/svelte-select/lib/index.js

@@ -0,0 +1 @@
+export { default as default } from './Select.svelte'

package/package/components/apps/svelte-select/lib/tailwind.css

@@ -0,0 +1,130 @@
+@import 'tailwindcss/base';
+
+.svelte-select {
+    @apply border rounded box-border h-10 relative flex items-center px-4 py-0 bg-white m-0	w-full
+        hover:border-gray-400;
+}
+
+.svelte-select input {
+    @apply cursor-default border-none text-tertiary h-10 leading-10 px-4 py-0 bg-transparent text-sm absolute left-0 m-0 w-full 
+        focus:outline-none hover:border-gray-400;
+}
+
+.svelte-select.focused {
+    @apply border-blue-600;
+}
+
+.svelte-select.disabled {
+    @apply bg-gray-200 border-gray-200 text-tertiary;
+}
+
+.svelte-select.disabled input {
+    @apply placeholder:text-gray-400 placeholder:opacity-100;
+}
+
+.svelte-select .selected-item {
+    @apply leading-10 h-10 overflow-x-hidden pr-5
+        focus:outline-none;
+}
+
+.svelte-select .icons {
+    @apply absolute flex items-center right-0 translate-y-0 text-gray-200 pointer-events-none top-0 bottom-0;
+}
+
+.svelte-select .icons > * {
+    @apply transition-colors ease-in-out duration-200;
+}
+
+.svelte-select .clear-select {
+    @apply pointer-events-auto;
+}
+
+.svelte-select.focused .icons,
+.svelte-select .chevron:hover,
+.svelte-select .clear-select:hover {
+    @apply text-tertiary;
+}
+
+.svelte-select .clear-select {
+    @apply px-2 h-5 text-gray-300 flex-none w-9;
+}
+
+.svelte-select .chevron {
+    @apply flex pt-0 pr-2 pl-2 border-l-2 w-9 h-5 text-gray-300;
+}
+
+.svelte-select.multi {
+    @apply pr-9 pl-4 h-auto flex-wrap items-stretch;
+}
+
+.svelte-select.multi input {
+    @apply p-0 relative m-0;
+}
+
+.svelte-select.error {
+    @apply border-red-500 bg-white;
+}
+
+.a11y-text {
+    @apply sr-only;
+}
+
+.list {
+    @apply shadow-md rounded-sm max-h-64 overflow-y-auto bg-white border-none absolute z-10 w-full left-0 right-0;
+}
+
+.list .list-group-title {
+    @apply text-gray-400 cursor-default text-sm font-medium h-10 leading-10 px-5 overflow-ellipsis whitespace-nowrap uppercase;
+}
+
+.list .empty {
+    @apply text-center py-5 text-tertiary;
+}
+
+.item {
+    @apply cursor-default h-10 leading-10 px-5 text-gray-800 overflow-ellipsis overflow-hidden whitespace-nowrap;
+}
+
+.item.group-item {
+    @apply px-10;
+}
+
+.item:active {
+    @apply bg-blue-200;
+}
+
+.item.active {
+    @apply bg-blue-600 text-white;
+}
+
+.item.not-selectable {
+    @apply text-gray-300;
+}
+
+.item.first {
+    @apply rounded-t-sm;
+}
+
+.item.hover:not(.active) {
+    @apply bg-blue-100;
+}
+
+.multi input {
+    flex: 1 1 40px;
+}
+
+.multi-item {
+    @apply bg-gray-100 mt-1 mr-1 border border-gray-200 rounded-sm h-8 leading-8 flex cursor-default pr-1 pl-1 max-w-full items-center mr-1 overflow-hidden overflow-ellipsis whitespace-nowrap;
+}
+
+.multi-item.disabled {
+    @apply hover:bg-gray-300 hover:text-tertiary;
+}
+
+.multi-item-clear {
+    @apply flex items-center justify-center w-5;
+}
+
+.list-item {
+    @apply list-none;
+}

package/package/components/apps/types.d.ts

@@ -68,6 +68,9 @@ export type InlineScript = {
 export type AppCssItemName = 'viewer' | 'grid' | AppComponent['type'];
 export type HiddenRunnable = {
     name: string;
+    transformer?: InlineScript & {
+        language: 'frontend';
+    };
     fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
     autoRefresh?: boolean;
     doNotRecomputeOnInputChanged?: boolean;
@@ -153,9 +156,12 @@ export type AppViewerContext = {
         onDelete?: () => void;
         setValue?: (value: any) => void;
         setSelectedIndex?: (index: number) => void;
+        openModal?: () => void;
+        closeModal?: () => void;
     }>>;
     hoverStore: Writable<string | undefined>;
     allIdsInPath: Writable<string[]>;
+    darkMode: Writable<boolean>;
 };
 export type AppEditorContext = {
     history: History<App> | undefined;

package/package/components/apps/utils.d.ts

@@ -5,10 +5,6 @@ import type { App, ComponentCssProperty, GridItem, HorizontalAlignment, Vertical
 export declare const BG_PREFIX = "bg_";
 export declare function migrateApp(app: App): void;
 export declare function allItems(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): GridItem[];
-export declare function loadSchema(workspace: string, path: string, runType: 'script' | 'flow' | 'hubscript'): Promise<{
-    schema: Schema;
-    summary: string | undefined;
-}>;
 export declare function schemaToInputsSpec(schema: Schema, defaultUserInput: boolean): Record<string, StaticAppInput>;
 export declare function accessPropertyByPath<T>(object: T, path: string): any;
 export declare function fieldTypeToTsType(inputType: InputType): string;
@@ -19,7 +15,7 @@ export declare function toStatic(app: App, staticExporter: Record<string, () =>
     app: App;
     summary: string;
 };
-export declare function buildExtraLib(components: Record<string, Record<string, Output<any>>>, idToExclude: string, hasRows: boolean, state: Record<string, any>, goto: boolean): string;
+export declare function buildExtraLib(components: Record<string, Record<string, Output<any>>>, idToExclude: string, state: Record<string, any>, goto: boolean): string;
 export declare function getAllScriptNames(app: App): string[];
 export declare function toPascalCase(text: string): string;
 export declare function toKebabCase(text: string): string;

package/package/components/apps/utils.js

@@ -1,10 +1,7 @@
-import { FlowService, ScriptService } from '../../gen';
-import { inferArgs } from '../../infer';
-import { emptySchema } from '../../utils';
 import { twMerge } from 'tailwind-merge';
 export const BG_PREFIX = 'bg_';
 export function migrateApp(app) {
-    app.hiddenInlineScripts.forEach((x) => {
+    app?.hiddenInlineScripts.forEach((x) => {
         if (x.type == undefined) {
             //@ts-ignore
             x.type = 'runnableByName';
@@ -22,34 +19,6 @@ export function allItems(grid, subgrids) {
     }
     return [...grid, ...Object.values(subgrids).flat()];
 }
-export async function loadSchema(workspace, path, runType) {
-    if (runType === 'script') {
-        const script = await ScriptService.getScriptByPath({
-            workspace,
-            path
-        });
-        return { schema: script.schema, summary: script.summary };
-    }
-    else if (runType === 'flow') {
-        const flow = await FlowService.getFlowByPath({
-            workspace,
-            path
-        });
-        return { schema: flow.schema, summary: flow.summary };
-    }
-    else {
-        const script = await ScriptService.getHubScriptByPath({
-            path
-        });
-        if (script.schema == undefined ||
-            Object.keys(script.schema).length == 0 ||
-            typeof script.schema != 'object') {
-            script.schema = emptySchema();
-        }
-        await inferArgs(script.language, script.content, script.schema);
-        return { schema: script.schema, summary: script.summary };
-    }
-}
 export function schemaToInputsSpec(schema, defaultUserInput) {
     if (schema?.properties == undefined) {
         return {};
@@ -144,7 +113,7 @@ export function toStatic(app, staticExporter, summary) {
     });
     return { app: newApp, summary };
 }
-export function buildExtraLib(components, idToExclude, hasRows, state, goto) {
+export function buildExtraLib(components, idToExclude, state, goto) {
     const cs = Object.entries(components)
         .filter(([k, v]) => k != idToExclude)
         .map(([k, v]) => [k, Object.fromEntries(Object.entries(v).map(([k, v]) => [k, v.peak()]))])
@@ -152,7 +121,6 @@ export function buildExtraLib(components, idToExclude, hasRows, state, goto) {
 `)
         .join('\n');
     return `${cs}
-${hasRows ? 'declare const row: Record<string, any>;' : ''}
 ${goto
         ? `declare async function goto(path: string, newTab?: boolean): Promise<void>;
 declare function setTab(id: string, index: string): void;
@@ -160,10 +128,13 @@ declare function recompute(id: string): void;
 declare function getAgGrid(id: string): {api: any, columnApi: any} | undefined;
 declare function setValue(id: string, value: any): void;
 declare function setSelectedIndex(id: string, index: number): void;
+declare function openModal(id: string): void;
+declare function closeModal(id: string): void;
 `
         : ''}
 declare const state: ${JSON.stringify(state)};
 declare const iter: {index: number, value: any};
+declare const row: {index: number, value: any};
 `;
 }
 export function getAllScriptNames(app) {
@@ -207,6 +178,7 @@ export function concatCustomCss(appCss, componentCss) {
         // This is the custom style of the component instance
         const compStyle = v?.style?.trim() || '';
         const compEnding = compStyle?.endsWith(';') || !compStyle ? ' ' : ';';
+        console.log(key, v);
         return [
             key,
             {

package/package/components/codeGen/ScriptFix.svelte

@@ -0,0 +1,123 @@
+<script>import { Button } from '../common';
+import { SUPPORTED_LANGUAGES, fixScript } from './lib';
+import { sendUserToast } from '../../toast';
+import { faCheck, faClose, faMagicWandSparkles } from '@fortawesome/free-solid-svg-icons';
+import { dbSchema, existsOpenaiResourcePath } from '../../stores';
+import { scriptLangToEditorLang } from '../../scripts';
+import Popover from '../Popover.svelte';
+// props
+export let lang;
+export let editor;
+export let diffEditor;
+export let error;
+// state
+let genLoading = false;
+let openaiAvailable = undefined;
+let generatedCode = '';
+let explanation = '';
+async function onFix() {
+    if (!error) {
+        return;
+    }
+    try {
+        // close popup ^^
+        const elem = document.activeElement;
+        if (elem.blur) {
+            elem.blur();
+        }
+        genLoading = true;
+        const result = await fixScript({
+            language: lang,
+            code: editor?.getCode() || '',
+            error,
+            dbSchema: lang === 'postgresql' ? $dbSchema : undefined
+        });
+        generatedCode = result.code;
+        explanation = result.explanation;
+    }
+    catch (err) {
+        sendUserToast('Failed to generate code', true);
+        console.error(err);
+    }
+    finally {
+        genLoading = false;
+    }
+}
+function acceptDiff() {
+    editor?.setCode(diffEditor?.getModified() || '');
+    editor?.format();
+    generatedCode = '';
+    explanation = '';
+    error = '';
+}
+function rejectDiff() {
+    generatedCode = '';
+    explanation = '';
+}
+function checkIfOpenaiAvailable(lang, existsOpenaiResourcePath) {
+    openaiAvailable = existsOpenaiResourcePath && SUPPORTED_LANGUAGES.has(lang);
+}
+function showDiff() {
+    diffEditor?.setDiff(editor?.getCode() || '', generatedCode, scriptLangToEditorLang(lang));
+    diffEditor?.show();
+    editor?.hide();
+}
+function hideDiff() {
+    editor?.show();
+    diffEditor?.hide();
+}
+$: checkIfOpenaiAvailable(lang, $existsOpenaiResourcePath);
+$: lang && (generatedCode = '');
+$: generatedCode && showDiff();
+$: !generatedCode && hideDiff();
+</script>
+
+{#if error}
+	{#if openaiAvailable}
+		<div class="mt-2">
+			{#if generatedCode}
+				<div class="flex gap-1">
+					<Button
+						title="Discard generated code"
+						size="xs"
+						color="red"
+						spacingSize="xs2"
+						on:click={rejectDiff}
+						variant="contained"
+						startIcon={{ icon: faClose }}
+					>
+						Discard
+					</Button><Button
+						title="Accept generated code"
+						size="xs"
+						color="green"
+						spacingSize="xs2"
+						on:click={acceptDiff}
+						startIcon={{ icon: faCheck }}
+					>
+						Accept
+					</Button>
+					{#if explanation}
+						<Popover>
+							<svelte:fragment slot="text">{explanation}</svelte:fragment>
+							<Button size="xs" color="light" variant="contained" spacingSize="xs2">Explain</Button
+							></Popover
+						>
+					{/if}
+				</div>
+			{:else}
+				<Button
+					title="Generate code from prompt"
+					size="xs"
+					color="blue"
+					spacingSize="xs2"
+					startIcon={{ icon: faMagicWandSparkles }}
+					loading={genLoading}
+					on:click={onFix}
+				>
+					AI Fix
+				</Button>
+			{/if}</div
+		>
+	{/if}
+{/if}