windmill-components 1.493.10 → 1.501.5

package/package/actions/triggerableByAI.svelte.d.ts

@@ -0,0 +1,11 @@
+export interface TriggerableByAIOptions {
+    id?: string;
+    description?: string;
+    callback?: (value?: string) => void;
+    disabled?: boolean;
+    showAnimation?: boolean;
+}
+export declare function triggerableByAI(element: HTMLElement, options?: TriggerableByAIOptions): {
+    update(newOptions: TriggerableByAIOptions): void;
+    destroy(): void;
+};

package/package/actions/triggerableByAI.svelte.js

@@ -0,0 +1,69 @@
+import { triggerablesByAi } from '../components/copilot/chat/sharedChatState.svelte';
+export function triggerableByAI(element, options = {}) {
+    let { id, description, callback, showAnimation = true } = options;
+    // Component is not discoverable if id or description is not provided
+    const isDisabled = !id || !description;
+    function createPulseEffect() {
+        if (!showAnimation)
+            return;
+        // Get the bounding rect of the element
+        const rect = element.getBoundingClientRect();
+        if (rect.width === 0 && rect.height === 0)
+            return; // Skip if no dimensions
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        // Create pulse element
+        const pulse = document.createElement('div');
+        pulse.className = 'fixed w-10 h-10 bg-blue-500/90 rounded-full pointer-events-none animate-ping';
+        pulse.style.cssText = `
+			left: ${centerX - 20}px;
+			top: ${centerY - 20}px;
+			z-index: 9999;
+		`;
+        // Add to body
+        document.body.appendChild(pulse);
+        // Remove after animation
+        setTimeout(() => {
+            if (pulse && pulse.parentNode) {
+                pulse.parentNode.removeChild(pulse);
+            }
+        }, 2000);
+    }
+    function handleTrigger(value) {
+        if (!callback)
+            return;
+        if (!showAnimation) {
+            callback(value);
+            return;
+        }
+        createPulseEffect();
+        callback(value);
+    }
+    function register() {
+        if (isDisabled || !id || !description)
+            return;
+        // register the triggerable
+        const currentData = { description, onTrigger: handleTrigger };
+        triggerablesByAi[id] = currentData;
+    }
+    function unregister() {
+        if (isDisabled || !id)
+            return;
+        // unregister the triggerable
+        if (triggerablesByAi[id]) {
+            delete triggerablesByAi[id];
+        }
+    }
+    // Initial registration
+    register();
+    return {
+        update(newOptions) {
+            ;
+            ({ id, description, callback, showAnimation = true } = newOptions);
+            register();
+        },
+        destroy() {
+            unregister();
+        }
+    };
+}

package/package/autosize.d.ts

@@ -1,4 +1,5 @@
-export declare const action: (node: any) => {
+type TextArea = HTMLTextAreaElement;
+export declare const autosize: (node: TextArea) => {
     destroy(): void;
 };
-export default action;
+export default autosize;

package/package/autosize.js

@@ -1,76 +1,71 @@
-export const action = (node) => {
-    /* Constants */
-    const update = new Event('update');
-    /* Functions */
-    const init = () => {
-        addStyles();
-        observeElement();
-        addEventListeners();
-        setInitialHeight();
-    };
-    const dispatchUpdateEvent = () => {
-        node.dispatchEvent(update);
-    };
-    const setInitialHeight = () => {
-        let height = 0;
-        if (node.value) {
-            height = Math.max(node.scrollHeight ?? 0, 30) + 2;
-        }
-        else {
-            if (node.placeholder) {
-                node.value = node.placeholder;
-                height = Math.max(node.scrollHeight ?? 0, 30) + 2;
-                node.value = '';
-            }
-            else {
-                node.value = '|';
-                node.style.height = '0px';
-                height = Math.max(node.scrollHeight ?? 0, 30) + 2;
-                node.value = '';
-            }
-        }
-        node.style.height = height + 'px';
-    };
-    const setHeight = () => {
+import { tick } from 'svelte';
+export const autosize = (node) => {
+    /* ------------------------------------------------------------------
+     * Constants
+     * ---------------------------------------------------------------- */
+    const UPDATE_EVENT = new Event('update');
+    const MIN_HEIGHT = 30; // px
+    const EXTRA = 2; // px added to scrollHeight
+    let width = 0;
+    /* ------------------------------------------------------------------
+     * Core resize routine
+     * ---------------------------------------------------------------- */
+    const resize = () => {
         node.style.height = 'auto';
-        node.style.height = Math.max(node.scrollHeight ?? 0, 30) + 2 + 'px';
+        node.style.height = `${Math.max(node.scrollHeight, MIN_HEIGHT) + EXTRA}px`;
     };
-    const addStyles = () => {
-        node.style.boxSizing = 'border-box';
-    };
-    const observeElement = () => {
-        let elementPrototype = Object.getPrototypeOf(node);
-        let descriptor = Object.getOwnPropertyDescriptor(elementPrototype, 'value');
+    /* ------------------------------------------------------------------
+     * Patch `value` so programmatic changes trigger resize
+     * ---------------------------------------------------------------- */
+    const proto = Object.getPrototypeOf(node);
+    const desc = Object.getOwnPropertyDescriptor(proto, 'value');
+    if (desc) {
         Object.defineProperty(node, 'value', {
-            get: function () {
-                return descriptor?.get?.apply(this, arguments);
+            get() {
+                return desc.get?.call(this);
             },
-            set: function () {
-                descriptor?.set?.apply(this, arguments);
-                dispatchUpdateEvent();
+            set(v) {
+                desc.set?.call(this, v);
+                node.dispatchEvent(UPDATE_EVENT);
             }
         });
-    };
-    const addEventListeners = () => {
-        node.addEventListener('input', (e) => {
-            dispatchUpdateEvent();
-        });
-        node.addEventListener('update', setHeight);
-    };
-    const removeEventListeners = () => {
-        node.removeEventListener('input', dispatchUpdateEvent);
-        node.removeEventListener('update', setHeight);
-    };
-    if (node.tagName.toLowerCase() !== 'textarea') {
-        throw new Error('svelte-textarea-auto-height can only be used on textarea elements.');
-    }
-    else {
-        init();
-        return {
-            destroy() {
-                removeEventListeners();
-            }
-        };
     }
+    /* ------------------------------------------------------------------
+     * Event listeners
+     * ---------------------------------------------------------------- */
+    const onInput = () => node.dispatchEvent(UPDATE_EVENT);
+    node.addEventListener('input', onInput);
+    node.addEventListener('update', resize);
+    /* ------------------------------------------------------------------
+     * Inline styling
+     * ---------------------------------------------------------------- */
+    node.style.boxSizing = 'border-box';
+    (async () => {
+        await tick();
+        resize();
+    })();
+    /* ------------------------------------------------------------------
+     * ResizeObserver – handles:
+     *   • first time the element gets a real width
+     *   • container/window resizes afterwards
+     * ---------------------------------------------------------------- */
+    const ro = new ResizeObserver(([entry]) => {
+        const newWidth = entry.contentRect.width;
+        if (newWidth !== width) {
+            width = newWidth;
+            resize();
+        }
+    });
+    ro.observe(node);
+    /* ------------------------------------------------------------------
+     * Action lifecycle
+     * ---------------------------------------------------------------- */
+    return {
+        destroy() {
+            ro.disconnect();
+            node.removeEventListener('input', onInput);
+            node.removeEventListener('update', resize);
+        }
+    };
 };
-export default action;
+export default autosize;

package/package/components/AddUser.svelte

@@ -10,8 +10,8 @@ import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import { UserPlus } from 'lucide-svelte';
 const dispatch = createEventDispatcher();
-let email;
-let username;
+let email = $state();
+let username = $state();
 function handleKeyUp(event) {
     const key = event.key;
     if (key === 'Enter') {
@@ -19,7 +19,7 @@ function handleKeyUp(event) {
         addUser();
     }
 }
-let automateUsernameCreation = false;
+let automateUsernameCreation = $state(false);
 async function getAutomateUsernameCreationSetting() {
     automateUsernameCreation =
         (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? false;
@@ -29,14 +29,14 @@ async function addUser() {
     await WorkspaceService.addUser({
         workspace: $workspaceStore,
         requestBody: {
-            email,
+            email: email,
             username: automateUsernameCreation ? undefined : username,
             is_admin: selected == 'admin',
             operator: selected == 'operator'
         }
     });
     sendUserToast(`Added ${email}`);
-    if (!(await UserService.existsEmail({ email }))) {
+    if (!(await UserService.existsEmail({ email: email }))) {
         let isSuperadmin = $superadmin;
         if (!isCloudHosted()) {
             const emailCopy = email;
@@ -57,47 +57,49 @@ async function addUser() {
     }
     dispatch('new');
 }
-let selected = 'developer';
+let selected = $state('developer');
 </script>
 
 <Popover placement="bottom-end">
-	<svelte:fragment slot="trigger">
+	{#snippet trigger()}
 		<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: UserPlus }}>
 			Add new user
 		</Button>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
+	{/snippet}
+	{#snippet content()}
 		<div class="flex flex-col w-72 p-4">
 			<span class="text-sm mb-2 leading-6 font-semibold">Add a new user</span>
 
 			<span class="text-xs mb-1 leading-6">Email</span>
-			<input type="email mb-1" on:keyup={handleKeyUp} placeholder="email" bind:value={email} />
+			<input type="email mb-1" onkeyup={handleKeyUp} placeholder="email" bind:value={email} />
 
 			{#if !automateUsernameCreation}
 				<span class="text-xs mb-1 pt-2 leading-6">Username</span>
-				<input type="text" on:keyup={handleKeyUp} placeholder="username" bind:value={username} />
+				<input type="text" onkeyup={handleKeyUp} placeholder="username" bind:value={username} />
 			{/if}
 
 			<span class="text-xs mb-1 pt-2 leading-6">Role</span>
-			<ToggleButtonGroup bind:selected class="mb-4" let:item>
-				<ToggleButton
-					value="operator"
-					label="Operator"
-					tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
-					{item}
-				/>
-				<ToggleButton
-					value="developer"
-					label="Developer"
-					tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
-					{item}
-				/>
-				<ToggleButton
-					value="admin"
-					label="Admin"
-					tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
-					{item}
-				/>
+			<ToggleButtonGroup bind:selected class="mb-4">
+				{#snippet children({ item })}
+					<ToggleButton
+						value="operator"
+						label="Operator"
+						tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
+						{item}
+					/>
+					<ToggleButton
+						value="developer"
+						label="Developer"
+						tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
+						{item}
+					/>
+					<ToggleButton
+						value="admin"
+						label="Admin"
+						tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
+						{item}
+					/>
+				{/snippet}
 			</ToggleButtonGroup>
 			<Button
 				variant="contained"
@@ -116,5 +118,5 @@ let selected = 'developer';
 				Add
 			</Button>
 		</div>
-	</svelte:fragment>
+	{/snippet}
 </Popover>

package/package/components/AddUser.svelte.d.ts

@@ -15,6 +15,6 @@ declare const AddUser: $$__sveltets_2_IsomorphicComponent<Record<string, never>,
     new: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type AddUser = InstanceType<typeof AddUser>;
 export default AddUser;

package/package/components/AllFlowLogs.svelte

@@ -2,7 +2,7 @@
 import JobLogs from './JobLogs.svelte';
 import { workspaceStore } from '../stores';
 import { base } from '../base';
-export let states;
+let { states } = $props();
 </script>
 
 <div class="flex flex-col">

package/package/components/AllFlowLogs.svelte.d.ts

@@ -1,22 +1,8 @@
 import type { DurationStatus } from './graph';
 import type { Writable } from 'svelte/store';
-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 AllFlowLogs: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     states: Writable<Record<string, DurationStatus>> | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AllFlowLogs = InstanceType<typeof AllFlowLogs>;
+}
+declare const AllFlowLogs: import("svelte").Component<Props, {}, "">;
+type AllFlowLogs = ReturnType<typeof AllFlowLogs>;
 export default AllFlowLogs;