windmill-components 1.623.2 → 1.655.0

package/package/components/AIProviderPicker.svelte

@@ -8,33 +8,25 @@ import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ResourcePicker from './ResourcePicker.svelte';
 import ToggleButtonMore from './common/toggleButton-v2/ToggleButtonMore.svelte';
 import Toggle from './Toggle.svelte';
-let { value = $bindable(), disabled = false, actions } = $props();
+import { saveConfig, removeConfig, isSameAsStoredConfig } from './aiProviderStorage';
+let { value: _uncheckedValue = $bindable(), disabled = false, actions } = $props();
+let value = $derived.by(() => {
+    if (!_uncheckedValue || typeof _uncheckedValue !== 'object')
+        return undefined;
+    return _uncheckedValue;
+});
 let loading = $state(false);
 let availableModels = $state([]);
 let filterText = $state('');
-let useAsDefault = $state(false);
 let modelsCache = new Map();
-const STORAGE_KEY = 'windmill_ai_provider_config';
-// Initialize value if undefined
-if (!value) {
-    const storedConfig = loadStoredConfig();
-    if (storedConfig) {
-        value = storedConfig;
-        useAsDefault = true;
-    }
-    else {
-        const providers = Object.keys(AI_PROVIDERS);
-        value = {
-            kind: providers.length > 0 ? providers[0] : undefined,
-            resource: undefined,
-            model: undefined
-        };
-        useAsDefault = false;
-    }
-}
-else {
-    useAsDefault = isSameAsStoredConfig(value);
+if (!_uncheckedValue) {
+    _uncheckedValue = {
+        kind: 'openai',
+        resource: '',
+        model: ''
+    };
 }
+let useAsDefault = $derived(isSameAsStoredConfig(value));
 // Reactive items for the Select component
 let items = $derived.by(() => {
     const r = availableModels.map((model) => ({
@@ -54,58 +46,6 @@ const providerOptions = Object.entries(AI_PROVIDERS).map(([key, details]) => ({
     value: key,
     label: details.label
 }));
-// Check if the current config is the same as the stored config
-function isSameAsStoredConfig(config) {
-    const storedConfig = loadStoredConfig();
-    return (storedConfig !== undefined &&
-        storedConfig?.kind === config.kind &&
-        storedConfig?.resource === config.resource &&
-        storedConfig?.model === config.model);
-}
-// Load stored configuration from localStorage
-function loadStoredConfig() {
-    if (typeof localStorage === 'undefined') {
-        return undefined;
-    }
-    try {
-        const stored = localStorage.getItem(STORAGE_KEY);
-        if (stored) {
-            const parsed = JSON.parse(stored);
-            // Validate that the stored provider is still available
-            if (parsed.kind && AI_PROVIDERS[parsed.kind]) {
-                return parsed;
-            }
-        }
-    }
-    catch (e) {
-        console.error('Failed to load AI provider config from localStorage:', e);
-    }
-    return undefined;
-}
-// Save configuration to localStorage
-function saveConfig(config) {
-    if (typeof localStorage === 'undefined') {
-        return;
-    }
-    try {
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
-    }
-    catch (e) {
-        console.error('Failed to save AI provider config to localStorage:', e);
-    }
-}
-// Remove configuration from localStorage
-function removeConfig() {
-    if (typeof localStorage === 'undefined') {
-        return;
-    }
-    try {
-        localStorage.removeItem(STORAGE_KEY);
-    }
-    catch (e) {
-        console.error('Failed to remove AI provider config from localStorage:', e);
-    }
-}
 async function loadModels(signal) {
     const provider = value?.kind;
     const resourceValue = value?.resource;
@@ -146,8 +86,8 @@ async function loadModels(signal) {
 function onProviderChange(selectedProvider) {
     if (value) {
         value.kind = selectedProvider;
-        value.resource = undefined;
-        value.model = undefined;
+        value.resource = '';
+        value.model = '';
     }
 }
 // Helper functions to handle $res: prefix like ObjectResourceInput does
@@ -211,7 +151,7 @@ $effect(() => {
 			{/each}
 			<ToggleButtonMore
 				class="ml-auto"
-				btnText={providerOptions.findIndex((p) => p.value === value.kind) >= 3 ? '' : 'More'}
+				btnText={providerOptions.findIndex((p) => p.value === value?.kind) >= 3 ? '' : 'More'}
 				togglableItems={providerOptions.slice(3)}
 				{item}
 				bind:selected={() => value?.kind, (v) => v && onProviderChange(v)}
@@ -228,7 +168,7 @@ $effect(() => {
 					() => resourceValueToPath(value?.resource),
 					(v) => {
 						if (value) {
-							value.resource = pathToResourceValue(v)
+							value.resource = pathToResourceValue(v) ?? ''
 						}
 					}
 				}
@@ -244,12 +184,12 @@ $effect(() => {
 			<p class="text-xs font-normal text-primary">model</p>
 			<Select
 				{items}
-				bind:value={value.model}
+				bind:value={() => value?.model, (v) => value && (value.model = v ?? '')}
 				placeholder="Select model"
 				disabled={disabled || !value?.kind || !resourceValueToPath(value?.resource)}
 				onCreateItem={(r) => {
 					availableModels.push(r)
-					value.model = r
+					if (value) value.model = r
 				}}
 				createText="Press enter to use custom model"
 				{loading}

package/package/components/AIProviderPicker.svelte.d.ts

@@ -1,12 +1,7 @@
 import { type Snippet } from 'svelte';
-import type { AIProvider } from '../gen';
-interface ProviderValue {
-    kind?: AIProvider;
-    resource?: string;
-    model?: string;
-}
+import type { ProviderConfig } from '../gen';
 interface Props {
-    value: ProviderValue | undefined;
+    value: ProviderConfig | undefined;
     disabled?: boolean;
     actions?: Snippet;
 }

package/package/components/AddUser.svelte

@@ -19,10 +19,10 @@ function handleKeyUp(event) {
         addUser();
     }
 }
-let automateUsernameCreation = $state(false);
+let automateUsernameCreation = $state(true);
 async function getAutomateUsernameCreationSetting() {
     automateUsernameCreation =
-        (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? false;
+        (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? true;
 }
 getAutomateUsernameCreationSetting();
 async function addUser() {

package/package/components/ApiConnectForm.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">import { OauthService } from '../gen';
+import FilesetEditor from './FilesetEditor.svelte';
 import { workspaceStore } from '../stores';
 import { emptySchema, emptyString } from '../utils';
 import SchemaForm from './SchemaForm.svelte';
@@ -13,6 +14,7 @@ import { base } from '../base';
 import GitHubAppIntegration from './GitHubAppIntegration.svelte';
 import BedrockCredentialsCheck from './BedrockCredentialsCheck.svelte';
 import { isCloudHosted } from '../cloud';
+import ResourceGen from './copilot/ResourceGen.svelte';
 let { resourceType, resourceTypeInfo, args = $bindable({}), linkedSecret = $bindable(undefined), isValid = $bindable(true), linkedSecretCandidates = undefined, description = $bindable(undefined) } = $props();
 let schema = $state(emptySchema());
 let notFound = $state(false);
@@ -59,7 +61,7 @@ function switchTab(asJson) {
     }
     else {
         parseJson();
-        if (resourceTypeInfo?.format_extension) {
+        if (resourceTypeInfo?.format_extension && !resourceTypeInfo?.is_fileset) {
             textFileContent = args.content;
         }
     }
@@ -121,6 +123,12 @@ $effect(() => {
 			}}
 			class="as-json-toggle"
 		/>
+		<ResourceGen
+			bind:args
+			resourceType={resourceType}
+			resourceSchema={notFound ? undefined : schema}
+			isFileset={resourceTypeInfo?.is_fileset ?? false}
+		/>
 		<TestConnection {resourceType} {args} />
 		{#if resourceType == 'postgresql'}
 			<Popover
@@ -210,6 +218,11 @@ $effect(() => {
 			/>
 		{/await}
 	</div>
+{:else if resourceTypeInfo?.is_fileset}
+	<h5 class="mt-1 inline-flex items-center gap-4">
+		Fileset
+	</h5>
+	<FilesetEditor bind:args />
 {:else if resourceTypeInfo?.format_extension}
 	<h5 class="mt-4 inline-flex items-center gap-4">
 		File content ({resourceTypeInfo.format_extension})

package/package/components/ApiConnectForm.svelte.d.ts

@@ -8,6 +8,6 @@ interface Props {
     linkedSecretCandidates?: string[] | undefined;
     description?: string | undefined;
 }
-declare const ApiConnectForm: import("svelte").Component<Props, {}, "description" | "args" | "isValid" | "linkedSecret">;
+declare const ApiConnectForm: import("svelte").Component<Props, {}, "description" | "args" | "linkedSecret" | "isValid">;
 type ApiConnectForm = ReturnType<typeof ApiConnectForm>;
 export default ApiConnectForm;

package/package/components/AppConnectDrawer.svelte

@@ -1,27 +1,30 @@
-<script lang="ts">import { createEventDispatcher } from 'svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { createEventDispatcher } from 'svelte';
 import { Button, Drawer } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import AppConnectInner from './AppConnectInner.svelte';
 import DarkModeObserver from './DarkModeObserver.svelte';
-export let expressOAuthSetup = false;
-let drawer;
-let resourceType = '';
-let step = 1;
-let disabled = false;
-let isGoogleSignin = false;
-let manual = true;
-let appConnectInner = undefined;
-let rtToLoad = '';
+let { expressOAuthSetup = false } = $props();
+let drawer = $state();
+let resourceType = $state('');
+let step = $state(1);
+let disabled = $state(false);
+let isGoogleSignin = $state(false);
+let manual = $state(true);
+let appConnectInner = $state(undefined);
+let rtToLoad = $state('');
 export async function open(rt) {
     rtToLoad = rt;
-    drawer.openDrawer?.();
+    drawer?.openDrawer?.();
 }
-$: appConnectInner && onRtToLoadChange(rtToLoad);
 function onRtToLoadChange(rtToLoad) {
     appConnectInner?.open(rtToLoad);
 }
 const dispatch = createEventDispatcher();
-let darkMode = false;
+let darkMode = $state(false);
+run(() => {
+    appConnectInner && onRtToLoadChange(rtToLoad);
+});
 </script>
 
 <DarkModeObserver bind:darkMode />
@@ -37,7 +40,7 @@ let darkMode = false;
 	<DrawerContent
 		title="Add a resource"
 		id="add-resource-drawer"
-		on:close={drawer.closeDrawer}
+		on:close={drawer?.closeDrawer}
 		tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
 		documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"
 	>
@@ -58,7 +61,7 @@ let darkMode = false;
 					<Button variant="default" on:click={appConnectInner?.back ?? (() => {})}>Back</Button>
 				{/if}
 				{#if isGoogleSignin}
-					<button {disabled} on:click={appConnectInner?.next}>
+					<button {disabled} onclick={appConnectInner?.next}>
 						<img
 							class="h-10 w-auto object-contain"
 							src={darkMode ? '/google_signin_dark.png' : '/google_signin_light.png'}

package/package/components/AppConnectDrawer.svelte.d.ts

@@ -1,3 +1,6 @@
+interface Props {
+    expressOAuthSetup?: boolean;
+}
 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;
@@ -11,16 +14,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const AppConnectDrawer: $$__sveltets_2_IsomorphicComponent<{
-    expressOAuthSetup?: boolean;
-    open?: (rt?: string) => Promise<void>;
-}, {
+declare const AppConnectDrawer: $$__sveltets_2_IsomorphicComponent<Props, {
     refresh: CustomEvent<string>;
     close: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     open: (rt?: string) => Promise<void>;
-}, string>;
+}, "">;
 type AppConnectDrawer = InstanceType<typeof AppConnectDrawer>;
 export default AppConnectDrawer;

package/package/components/AppConnectInner.svelte

@@ -330,6 +330,8 @@ export async function next() {
     }
     else {
         if (!path) {
+            if (step == 2)
+                return;
             throw Error('Path is not set');
         }
         let exists = await VariableService.existsVariable({

package/package/components/AppConnectInner.svelte.d.ts

@@ -30,6 +30,6 @@ declare const AppConnectInner: $$__sveltets_2_IsomorphicComponent<Props, {
     loadResourceTypes: () => Promise<void>;
     next: () => Promise<void>;
     back: () => Promise<void>;
-}, "step" | "disabled" | "manual" | "resourceType" | "isGoogleSignin">;
+}, "manual" | "step" | "disabled" | "resourceType" | "isGoogleSignin">;
 type AppConnectInner = InstanceType<typeof AppConnectInner>;
 export default AppConnectInner;

package/package/components/AppConnectLightweightResourcePicker.svelte

@@ -2,15 +2,15 @@
 import DarkModeObserver from './DarkModeObserver.svelte';
 import { Button } from './common';
 import { workspaceStore } from '../stores';
-import { onMount } from 'svelte';
+import { onMount, untrack } from 'svelte';
 let { resourceType = $bindable(undefined), workspace, express = false } = $props();
 let step = $state(1);
 let disabled = $state(false);
 let manual = $state(true);
 let appConnect = $state(undefined);
 let darkMode = $state(false);
-if (workspace) {
-    $workspaceStore = workspace;
+if (untrack(() => workspace)) {
+    $workspaceStore = untrack(() => workspace);
 }
 onMount(async () => {
     if (resourceType) {

package/package/components/AppWrapper.svelte

@@ -1,6 +1,7 @@
-<script lang="ts">import AppEditor from './apps/editor/AppEditor.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import AppEditor from './apps/editor/AppEditor.svelte';
 let { app: oldApp, ...props } = $props();
-let app = $state(oldApp);
+let app = $state(untrack(() => oldApp));
 </script>
 
 <AppEditor {app} {...props} />

package/package/components/ArgInput.svelte

@@ -92,7 +92,11 @@ function computeDefaultValue(inputCat, defaultValue, nnullable) {
         nvalue = structuredClone($state.snapshot(defaultValue));
         if (defaultValue === undefined || defaultValue === null) {
             if (inputCat === 'string') {
-                nvalue = nullable ? null : format === 'uuid' && extra?.['x-auto-generate'] ? randomUUID() : '';
+                nvalue = nullable
+                    ? null
+                    : format === 'uuid' && extra?.['x-auto-generate']
+                        ? randomUUID()
+                        : '';
             }
             else if (inputCat == 'enum' && required) {
                 let firstV = enum_?.[0];
@@ -483,10 +487,17 @@ onDestroy(() => {
 
 	<div class="flex space-x-1">
 		{#if inputCat == 'number'}
-			{#if extra['min'] != undefined && extra['max'] != undefined}
+			{#if extra['seconds'] !== undefined}
+				<div class="w-full">
+					<SecondsInput
+						bind:seconds={value}
+						onfocus={bubble('focus')}
+						{defaultValue}
+						clearable={extra['clearable'] !== false}
+					/>
+				</div>
+			{:else if extra['min'] != undefined && extra['max'] != undefined}
 				<Range bind:value min={extra['min']} max={extra['max']} {defaultValue} />
-			{:else if extra['seconds'] !== undefined}
-				<SecondsInput bind:seconds={value} on:focus />
 			{:else if extra?.currency}
 				<CurrencyInput
 					inputClasses={{
@@ -867,6 +878,7 @@ onDestroy(() => {
 		{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format && format?.split('-').length > 1 && resourceTypes.includes(format?.substring('resource-'.length))))}
 			<!-- {JSON.stringify(value)} -->
 			<ObjectResourceInput
+				datatableAsPgResource={label === 'database'}
 				{disabled}
 				{defaultValue}
 				selectFirst={!noDefaultOnSelectFirst && required}
@@ -997,7 +1009,6 @@ onDestroy(() => {
 										titleClass="text-2xs"
 									/>
 								{/if}
-	
 							{:else if disabled}
 								<textarea disabled></textarea>
 							{:else}

package/package/components/ArgInput.svelte.d.ts

@@ -1,7 +1,6 @@
 import type { EnumType, SchemaProperty } from '../common';
 import { type DynamicInput as DynamicInputTypes } from '../utils';
 import type ItemPicker from './ItemPicker.svelte';
-import type SimpleEditor from './SimpleEditor.svelte';
 import type VariableEditor from './VariableEditor.svelte';
 import type { SchemaDiff } from './schema/schemaUtils.svelte';
 import type { ComponentCustomCSS } from './apps/types';
@@ -55,7 +54,7 @@ interface Props {
     title?: string | undefined;
     placeholder?: string | undefined;
     order?: string[] | undefined;
-    editor?: SimpleEditor | undefined;
+    editor?: any | undefined;
     orderEditable?: boolean;
     shouldDispatchChanges?: boolean;
     noDefaultOnSelectFirst?: boolean;
@@ -99,10 +98,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const ArgInput: $$__sveltets_2_IsomorphicComponent<Props, {
-    focus: CustomEvent<any>;
     nestedChange: CustomEvent<any>;
     acceptChange: CustomEvent<any>;
     rejectChange: CustomEvent<any>;
+    focus: CustomEvent<any>;
     blur: CustomEvent<any>;
     change: CustomEvent<any>;
     keydownCmdEnter: CustomEvent<any>;
@@ -110,6 +109,6 @@ declare const ArgInput: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
-}, "value" | "description" | "title" | "pattern" | "format" | "order" | "placeholder" | "properties" | "oneOf" | "defaultValue" | "valid" | "editor" | "enum_" | "itemsType" | "pickForField">;
+}, "value" | "description" | "title" | "pattern" | "format" | "order" | "placeholder" | "defaultValue" | "properties" | "oneOf" | "valid" | "editor" | "enum_" | "itemsType" | "pickForField">;
 type ArgInput = InstanceType<typeof ArgInput>;
 export default ArgInput;

package/package/components/Auth0Setting.svelte

@@ -6,6 +6,7 @@ import Tooltip from './Tooltip.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import TextInput from './text_input/TextInput.svelte';
+import SettingCard from './instanceSettings/SettingCard.svelte';
 let { value = $bindable() } = $props();
 function changeDomain(domain, custom) {
     if (value) {
@@ -51,7 +52,7 @@ $effect.pre(() => {
 		/></label
 	>
 	{#if enabled}
-		<div class="p-4 rounded-md border flex flex-col gap-6">
+		<SettingCard class="flex flex-col gap-6">
 			<label>
 				<div class="flex gap-2 items-start">
 					<div>
@@ -81,6 +82,7 @@ $effect.pre(() => {
 				<TextInput
 					inputProps={{ type: 'text', placeholder: 'Custom Name' }}
 					bind:value={value['display_name']}
+					class="max-w-lg"
 				/>
 			</label>
 			<label class="flex flex-col gap-1">
@@ -91,6 +93,7 @@ $effect.pre(() => {
 				<TextInput
 					inputProps={{ type: 'text', placeholder: 'Client Id' }}
 					bind:value={value['id']}
+					class="max-w-lg"
 				/>
 			</label>
 			<label class="flex flex-col gap-1">
@@ -100,6 +103,7 @@ $effect.pre(() => {
 				<TextInput
 					inputProps={{ type: 'text', placeholder: 'Client Secret' }}
 					bind:value={value['secret']}
+					class="max-w-lg"
 				/>
 			</label>
 			<CollapseLink text="Instructions">
@@ -151,6 +155,6 @@ $effect.pre(() => {
 					</div>
 				</div>
 			</CollapseLink>
-		</div>
+		</SettingCard>
 	{/if}
 </div>