windmill-components 1.532.0 → 1.542.4

package/package/components/AIProviderPicker.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">import {} from 'svelte';
+import Select from './select/Select.svelte';
+import { fetchAvailableModels, AI_PROVIDERS } from './copilot/lib';
+import { workspaceStore } from '../stores';
+import { get } from 'svelte/store';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import ResourcePicker from './ResourcePicker.svelte';
+let { value = $bindable(), disabled = false, actions } = $props();
+// Initialize value if undefined
+if (!value) {
+    const providers = Object.keys(AI_PROVIDERS);
+    value = {
+        kind: providers.length > 0 ? providers[0] : undefined,
+        resource: undefined,
+        model: undefined
+    };
+}
+let loading = $state(false);
+let availableModels = $state([]);
+let filterText = $state('');
+let modelsCache = new Map();
+// Reactive items for the Select component
+let items = $derived.by(() => {
+    const r = availableModels.map((model) => ({
+        label: model,
+        value: model
+    }));
+    if (value?.model && !availableModels.find((model) => model === value.model)) {
+        r.push({
+            label: value.model,
+            value: value.model
+        });
+    }
+    return r;
+});
+// Provider options for the toggle button group
+const providerOptions = Object.entries(AI_PROVIDERS).map(([key, details]) => ({
+    value: key,
+    label: details.label
+}));
+async function loadModels(signal) {
+    const provider = value?.kind;
+    const resourceValue = value?.resource;
+    const resourcePath = resourceValueToPath(resourceValue);
+    if (!provider || !resourcePath) {
+        return;
+    }
+    loading = true;
+    if (modelsCache.has(provider)) {
+        availableModels = modelsCache.get(provider) || [];
+        loading = false;
+        return;
+    }
+    try {
+        const workspace = get(workspaceStore) || '';
+        const models = await fetchAvailableModels(resourcePath, workspace, provider, signal);
+        if (signal?.aborted) {
+            return;
+        }
+        availableModels = models;
+        modelsCache.set(provider, models);
+    }
+    catch (e) {
+        if (signal?.aborted) {
+            return;
+        }
+        // Fall back to default models for this provider
+        const defaultModels = AI_PROVIDERS[provider]?.defaultModels || [];
+        availableModels = defaultModels;
+    }
+    finally {
+        if (!signal?.aborted) {
+            loading = false;
+        }
+    }
+}
+// Reload models when provider or resourcePath changes
+$effect(() => {
+    const abortController = new AbortController();
+    const provider = value?.kind;
+    const resourceValue = value?.resource;
+    const resourcePath = resourceValueToPath(resourceValue);
+    filterText = '';
+    if (provider && resourcePath) {
+        loadModels(abortController.signal);
+    }
+    else {
+        const defaultModels = provider ? AI_PROVIDERS[provider]?.defaultModels || [] : [];
+        availableModels = defaultModels;
+        loading = false;
+    }
+    return () => {
+        abortController.abort();
+    };
+});
+// Handle provider selection
+function onProviderChange(selectedProvider) {
+    if (value) {
+        value.kind = selectedProvider;
+        value.resource = undefined;
+        value.model = undefined;
+    }
+}
+// Helper functions to handle $res: prefix like ObjectResourceInput does
+function isResource(resourceValue) {
+    return (typeof resourceValue === 'string' &&
+        resourceValue.length >= '$res:'.length &&
+        resourceValue.startsWith('$res:'));
+}
+function resourceValueToPath(resourceValue) {
+    if (isResource(resourceValue)) {
+        return resourceValue.substring('$res:'.length);
+    }
+    return resourceValue;
+}
+function pathToResourceValue(path) {
+    if (path == undefined) {
+        return undefined;
+    }
+    else {
+        return `$res:${path}`;
+    }
+}
+</script>
+
+<div class="w-full flex flex-col gap-3">
+	<!-- Provider Selection -->
+	<div class="flex flex-col gap-2">
+		<ToggleButtonGroup selected={value?.kind} onSelected={onProviderChange} {disabled} wrap>
+			{#snippet children({ item })}
+				{#each providerOptions as option}
+					<ToggleButton value={option.value} label={option.label} {item} />
+				{/each}
+			{/snippet}
+		</ToggleButtonGroup>
+	</div>
+
+	<!-- Resource Selection -->
+	<div class="flex flex-col border border-gray-200 rounded-md p-2 gap-2">
+		<div class="flex flex-col gap-1">
+			<p class="text-sm font-medium text-primary">resource</p>
+			<ResourcePicker
+				bind:value={
+					() => resourceValueToPath(value?.resource),
+					(v) => {
+						if (value) {
+							value.resource = pathToResourceValue(v)
+						}
+					}
+				}
+				resourceType={value?.kind}
+				disabled={disabled || !value?.kind}
+				placeholder="Select resource"
+				selectFirst={true}
+			/>
+		</div>
+
+		<!-- Model Selection -->
+		<div class="flex flex-col gap-1">
+			<p class="text-sm font-medium text-primary">model</p>
+			<Select
+				{items}
+				bind:value={value.model}
+				placeholder="Select model"
+				disabled={disabled || !value?.kind || !resourceValueToPath(value?.resource)}
+				onCreateItem={(r) => {
+					availableModels.push(r)
+					value.model = r
+				}}
+				createText="Press enter to use custom model"
+				{loading}
+				clearable={false}
+				noItemsMsg={'No models available'}
+				bind:filterText
+			/>
+		</div>
+	</div>
+
+	{@render actions?.()}
+</div>

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

@@ -0,0 +1,15 @@
+import { type Snippet } from 'svelte';
+import type { AIProvider } from '../gen';
+interface ProviderValue {
+    kind?: AIProvider;
+    resource?: string;
+    model?: string;
+}
+interface Props {
+    value: ProviderValue | undefined;
+    disabled?: boolean;
+    actions?: Snippet;
+}
+declare const AiProviderPicker: import("svelte").Component<Props, {}, "value">;
+type AiProviderPicker = ReturnType<typeof AiProviderPicker>;
+export default AiProviderPicker;

package/package/components/ArgInfo.svelte

@@ -86,14 +86,14 @@ async function getVariable(path) {
 	<div class="relative">
 		{#if JSON.stringify(value).length > 120}
 			<button
-				class="text-xs absolute top-0 right-4 text-tertiary"
+				class="text-xs absolute top-0 right-8 text-tertiary"
 				onclick={() => {
 					jsonViewerContent = value
 					jsonViewer?.toggleDrawer()
 				}}><Expand size={18} /></button
 			>
 		{/if}
-		<div class="max-h-60 overflow-auto">
+		<div class="max-h-60 overflow-auto" style="scrollbar-gutter: stable">
 			<ObjectViewer collapsed={false} topBrackets={true} pureViewer={true} json={value} />
 		</div>
 	</div>

package/package/components/ArgInput.svelte

@@ -23,13 +23,14 @@ import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import SchemaFormDnd from './schema/SchemaFormDND.svelte';
 import SchemaForm from './SchemaForm.svelte';
 import { deepEqual } from 'fast-equals';
-import DynSelect from './DynSelect.svelte';
+import DynamicInput from './DynamicInput.svelte';
 import MultiSelect from './select/MultiSelect.svelte';
 import { safeSelectItems } from './select/utils.svelte';
 import S3ArgInput from './common/fileUpload/S3ArgInput.svelte';
 import { base } from '../base';
 import { workspaceStore } from '../stores';
 import { getJsonSchemaFromResource } from './schema/jsonSchemaResource.svelte';
+import AIProviderPicker from './AIProviderPicker.svelte';
 let { label = '', value = $bindable(), defaultValue = $bindable(undefined), description = $bindable(undefined), format = $bindable(undefined), contentEncoding = undefined, type = undefined, oneOf = $bindable(undefined), required = false, pattern = $bindable(undefined), valid = $bindable(undefined), enum_ = $bindable(undefined), disabled = false, itemsType = $bindable(undefined), displayHeader = true, properties = $bindable(undefined), nestedRequired = undefined, autofocus = null, compact = false, password = false, pickForField = $bindable(undefined), variableEditor = undefined, itemPicker = undefined, noMargin = false, extra = {}, minW = true, prettifyHeader = false, resourceTypes, disablePortal = false, showSchemaExplorer = false, simpleTooltip = undefined, customErrorMessage = undefined, onlyMaskPassword = false, nullable = false, title = $bindable(undefined), placeholder = $bindable(undefined), order = $bindable(undefined), editor = $bindable(undefined), orderEditable = false, shouldDispatchChanges = false, noDefaultOnSelectFirst = false, helperScript = undefined, otherArgs = {}, lightHeader = false, diffStatus = undefined, hideNested = false, nestedParent = undefined, nestedClasses = '', displayType = true, css = undefined, appPath = undefined, computeS3ForceViewerPolicies = undefined, workspace = undefined, actions } = $props();
 $effect(() => {
     if (description == undefined) {
@@ -206,6 +207,10 @@ export function focus() {
         el.style.height = el.scrollHeight + 50 + 'px';
     }
 }
+const EMAIL_PATTERN = '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$';
+const IPV4_PATTERN = '^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$';
+const UUID_PATTERN = '^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$';
+const IPV6_PATTERN = '^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$';
 function validateInput(pattern, v, required) {
     if (nullable && emptyString(v)) {
         error = '';
@@ -232,6 +237,18 @@ function validateInput(pattern, v, required) {
                 !valid && (valid = true);
             }
         }
+        else if (type == 'string' && format == 'email' && !testRegex(EMAIL_PATTERN, v)) {
+            error = 'invalid email address';
+        }
+        else if (type == 'string' && format == 'ipv4' && !testRegex(IPV4_PATTERN, v)) {
+            error = 'invalid IPv4 address';
+        }
+        else if (type == 'string' && format == 'ipv6' && !testRegex(IPV6_PATTERN, v)) {
+            error = 'invalid IPv6 address';
+        }
+        else if (type == 'string' && format == 'uuid' && !testRegex(UUID_PATTERN, v)) {
+            error = 'invalid UUID';
+        }
         else if (pattern && !testRegex(pattern, v)) {
             if (!emptyString(customErrorMessage)) {
                 error = customErrorMessage ?? '';
@@ -506,6 +523,19 @@ onDestroy(() => {
 					editTab="inputEditor"
 					noPreview
 					addPropertyInEditorTab
+					on:delete={(e) => {
+						// Handle property deletion
+						if (value && value.properties && value.properties[e.detail]) {
+							delete value.properties[e.detail]
+							// Also remove from order array if it exists
+							if (value.order) {
+								value.order = value.order.filter((key) => key !== e.detail)
+							}
+							// Update the value to trigger reactivity
+							value = { ...value }
+							dispatch('change')
+						}
+					}}
 				/>
 			{/await}
 		{:else if inputCat == 'object' && format?.startsWith('jsonschema-')}
@@ -733,14 +763,8 @@ onDestroy(() => {
 					/>
 				</div>
 			</div>
-		{:else if inputCat == 'dynselect'}
-			<DynSelect
-				name={label}
-				{otherArgs}
-				{helperScript}
-				bind:value
-				entrypoint={format?.substring('dynselect_'.length) ?? ''}
-			/>
+		{:else if inputCat == 'dynamic'}
+			<DynamicInput name={label} {otherArgs} {helperScript} bind:value format={format ?? ''} />
 		{:else if inputCat == 'resource-object' && resourceTypes == undefined}
 			<span class="text-2xs text-tertiary">Loading resource types...</span>
 		{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format && format?.split('-').length > 1 && resourceTypes.includes(format?.substring('resource-'.length))))}
@@ -766,11 +790,21 @@ onDestroy(() => {
 							selected={oneOfSelected}
 							on:selected={({ detail }) => {
 								oneOfSelected = detail
-								const prevValueKeys = Object.keys(
+								const selectedObjProperties =
 									oneOf?.find((o) => o.title == detail)?.properties ?? {}
-								)
+								const newValueKeys = Object.keys(selectedObjProperties)
 								const toKeep = {}
-								for (const key of prevValueKeys) {
+								for (const key of newValueKeys) {
+									// Check if there is a select (enum) in the newly selected oneOf and if the current value is not in the enum, skip it
+									if (
+										!['kind', 'label'].includes(key) &&
+										selectedObjProperties[key]?.enum &&
+										value &&
+										value[key] !== undefined &&
+										!selectedObjProperties[key].enum.includes(value[key])
+									) {
+										continue
+									}
 									toKeep[key] = value[key]
 								}
 								const tagKey = oneOf.find((o) => Object.keys(o.properties ?? {}).includes('kind'))
@@ -811,8 +845,11 @@ onDestroy(() => {
 													}
 												}
 												bind:args={value}
-												dndType={`nested-${title}`}
-												hiddenArgs={['label', 'kind']}
+												hiddenArgs={[
+													oneOf?.find((o) => Object.keys(o.properties ?? {}).includes('kind'))
+														? 'kind'
+														: 'label'
+												]}
 												on:reorder={(e) => {
 													if (oneOf && oneOf[objIdx]) {
 														const keys = e.detail
@@ -905,20 +942,14 @@ onDestroy(() => {
 							{disablePortal}
 							{disabled}
 							{prettifyHeader}
-							bind:schema={
-								() => ({
-									properties,
-									$schema: '',
-									required: nestedRequired ?? [],
-									type: 'object',
-									order
-								}),
-								(newSchema) => {
-									dispatch('nestedChange')
-								}
-							}
+							schema={{
+								properties,
+								$schema: '',
+								required: nestedRequired ?? [],
+								type: 'object',
+								order
+							}}
 							bind:args={value}
-							dndType={`nested-${title}`}
 							on:reorder={(e) => {
 								const keys = e.detail
 								order = keys
@@ -1077,6 +1108,8 @@ onDestroy(() => {
 					: undefined}
 				{showSchemaExplorer}
 			/>
+		{:else if inputCat == 'ai-provider'}
+			<AIProviderPicker bind:value {disabled} {actions} />
 		{:else if inputCat == 'email'}
 			<input
 				{autofocus}

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

@@ -1,5 +1,5 @@
 import type { EnumType, SchemaProperty } from '../common';
-import { type DynamicSelect } from '../utils';
+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';
@@ -58,7 +58,7 @@ interface Props {
     orderEditable?: boolean;
     shouldDispatchChanges?: boolean;
     noDefaultOnSelectFirst?: boolean;
-    helperScript?: DynamicSelect.HelperScript;
+    helperScript?: DynamicInputTypes.HelperScript;
     otherArgs?: Record<string, any>;
     lightHeader?: boolean;
     diffStatus?: SchemaDiff | undefined;
@@ -99,8 +99,8 @@ declare const ArgInput: $$__sveltets_2_IsomorphicComponent<Props, {
     acceptChange: CustomEvent<any>;
     rejectChange: CustomEvent<any>;
     blur: CustomEvent<any>;
-    keydownCmdEnter: CustomEvent<any>;
     change: CustomEvent<any>;
+    keydownCmdEnter: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {

package/package/components/AssignableTagsInner.svelte

@@ -23,6 +23,33 @@ async function loadCustomTags() {
     }
 }
 const dispatch = createEventDispatcher();
+const customTagRegex = /^([\w-]+)\(((?:[\w-]+\+)*[\w-]+|(?:\^[\w-]+)+)\)$/;
+const dynamicTagRegex = /\$args\[((?:\w+\.)*\w+)\]/;
+let dynamicTag = $derived.by(() => {
+    let r = newTag.trim();
+    if (r == '')
+        return undefined;
+    let matched = r.match(dynamicTagRegex);
+    return matched?.[1];
+});
+let extractedCustomTag = $derived.by(() => {
+    let r = newTag.trim();
+    if (r == '')
+        return undefined;
+    let matched = r.match(customTagRegex);
+    console.log(matched);
+    let tag = matched?.[1];
+    let workspaces_raw = matched?.[2];
+    let tag_type = workspaces_raw?.includes('^') ? 'exclude' : 'include';
+    if (tag_type == 'exclude') {
+        workspaces_raw = workspaces_raw?.slice(1);
+    }
+    let workspaces = workspaces_raw?.split(tag_type == 'include' ? '+' : '^');
+    if (!workspaces_raw || workspaces_raw?.length == 0) {
+        return undefined;
+    }
+    return { tag, workspaces, tag_type };
+});
 loadCustomTags();
 </script>
 
@@ -55,6 +82,53 @@ loadCustomTags();
 			{/each}
 		</div>
 		<input type="text" bind:value={newTag} />
+		{#if extractedCustomTag}
+			<div class="text-2xs text-tertiary p-2 bg-gray-50 rounded border">
+				<div class="font-medium mb-1">Workspace specific tag</div>
+				<div>
+					<b>Tag:</b>
+					{extractedCustomTag.tag}
+				</div>
+				<div>
+					<b>Workspaces:</b>
+					{#if extractedCustomTag.tag_type == 'include'}
+						{extractedCustomTag.workspaces?.join(', ')}
+					{:else}
+						All workspaces except {extractedCustomTag.workspaces?.join(', ')}
+					{/if}
+				</div>
+			</div>
+		{:else if newTag.trim()}
+			{#if newTag.includes('(') || newTag.includes(')') || newTag.includes('+') || newTag.includes('^') || ((newTag.includes('.') || newTag.includes('$args[')) && !dynamicTag)}
+				<div class="text-2xs text-tertiary p-2 bg-gray-50 rounded border">
+					<div class="font-medium mb-1 text-red-500">Invalid tag</div>
+					<div>
+						<b>Tag:</b>
+						{newTag.trim()}
+					</div>
+				</div>
+			{:else}
+				<div class="text-2xs text-tertiary p-2 bg-gray-50 rounded border">
+					<div class="font-medium mb-1">
+						{#if newTag.includes('$workspace') || newTag.includes('$args')}
+							Dynamic tag
+						{:else}
+							Simple tag
+						{/if}
+					</div>
+					<div>
+						<b>Tag:</b>
+						{newTag.trim()}
+					</div>
+					{#if newTag.includes('$workspace') && !dynamicTag}
+						<div>Interpolated tag based on workspace id the job was created in </div>
+					{/if}
+					{#if dynamicTag}
+						<div>Interpolated tag based on args input of <b>{dynamicTag}</b></div>
+					{/if}
+				</div>
+			{/if}
+		{/if}
 
 		<Button
 			variant="contained"
@@ -87,13 +161,25 @@ loadCustomTags();
 			></span
 		>
 		<span class="text-2xs text-tertiary"
-			>To exclude 'workspace1' and 'workspace2' from a tag, use <pre
-				class="inline">tag(^workspace1^workspace2)</pre
+			>To exclude 'workspace1' and 'workspace2' from a tag, use <pre class="inline"
+				>tag(^workspace1^workspace2)</pre
 			></span
 		>
 		<span class="text-2xs text-tertiary"
-			>For dynamic tags based on the workspace, use <pre class="inline">$workspace</pre>, e.g:
+			>For <a
+				href="https://www.windmill.dev/docs/core_concepts/worker_groups#dynamic-tag"
+				target="_blank">dynamic tags</a
+			>
+			based on the workspace, use <pre class="inline">$workspace</pre>, e.g:
 			<pre class="inline">tag-$workspace</pre></span
 		>
+		<span class="text-2xs text-tertiary"
+			>For <a
+				href="https://www.windmill.dev/docs/core_concepts/worker_groups#dynamic-tag"
+				target="_blank">dynamic tags</a
+			>
+			based on args input, use <pre class="inline">$args[a.b.c]</pre> where
+			<pre class="inline">a.b.c</pre> is the path to the value in the args object</span
+		>
 	{/if}
 </div>

package/package/components/Auth0Setting.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import CollapseLink from './CollapseLink.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import CollapseLink from './CollapseLink.svelte';
 import IconedResourceType from './IconedResourceType.svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
@@ -25,8 +26,12 @@ function changeDomain(domain, custom) {
     }
 }
 let enabled = $derived(value != undefined);
-$effect(() => {
-    changeDomain(value?.['domain'], value?.['custom']);
+let lastValues = { domain: undefined, custom: undefined };
+$effect.pre(() => {
+    if (value?.['domain'] != lastValues.domain || value?.['custom'] != lastValues.custom) {
+        lastValues = { domain: value?.['domain'], custom: value?.['custom'] };
+        untrack(() => changeDomain(value?.['domain'], value?.['custom']));
+    }
 });
 </script>