windmill-components 1.623.1 → 1.642.0

package/package/components/TemplateEditor.svelte.d.ts

@@ -1,4 +1,15 @@
 import '@codingame/monaco-vscode-standalone-typescript-language-features';
+interface Props {
+    code?: string;
+    hash?: string;
+    automaticLayout?: boolean;
+    extraLib?: string;
+    autoHeight?: boolean;
+    fixedOverflowWidgets?: boolean;
+    fontSize?: number;
+    loadAsync?: boolean;
+    class?: string | undefined;
+}
 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;
@@ -12,107 +23,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const TemplateEditor: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    conf?: {
-        wordPattern: RegExp;
-        comments: {
-            lineComment: string;
-            blockComment: [string, string];
-        };
-        brackets: [string, string][];
-        onEnterRules: never[];
-        autoClosingPairs: ({
-            open: string;
-            close: string;
-            notIn?: undefined;
-        } | {
-            open: string;
-            close: string;
-            notIn: string[];
-        })[];
-        folding: {
-            markers: {
-                start: RegExp;
-                end: RegExp;
-            };
-        };
-    } | undefined;
-    language?: {
-        defaultToken: string;
-        tokenPostfix: string;
-        keywords: string[];
-        operators: string[];
-        symbols: RegExp;
-        escapes: RegExp;
-        digits: RegExp;
-        octaldigits: RegExp;
-        binarydigits: RegExp;
-        hexdigits: RegExp;
-        regexpctl: RegExp;
-        regexpesc: RegExp;
-        tokenizer: {
-            root: ((string | RegExp)[] | (RegExp | {
-                token: string;
-                next: string;
-            })[])[];
-            common: ((string | RegExp)[] | (RegExp | {
-                cases: {
-                    '@keywords': string;
-                    '@default': string;
-                };
-            })[] | {
-                include: string;
-            } | (RegExp | {
-                token: string;
-                bracket: string;
-                next: string;
-            })[] | (RegExp | {
-                cases: {
-                    '@operators': string;
-                    '@default': string;
-                };
-            })[])[];
-            whitespace: (string | RegExp)[][];
-            comment: (string | RegExp)[][];
-            jsdoc: (string | RegExp)[][];
-            regexp: ((string | RegExp)[] | (RegExp | (string | {
-                token: string;
-                next: string;
-            })[])[] | (RegExp | (string | {
-                token: string;
-                bracket: string;
-                next: string;
-            })[])[])[];
-            regexrange: ((string | RegExp)[] | (RegExp | {
-                token: string;
-                next: string;
-                bracket: string;
-            })[])[];
-            string_double: (string | RegExp)[][];
-            string_single: (string | RegExp)[][];
-            string_backtick: ((string | RegExp)[] | (RegExp | {
-                token: string;
-                next: string;
-            })[])[];
-            bracketCounting: ((string | RegExp)[] | {
-                include: string;
-            })[];
-        };
-    } | undefined;
-    code?: string | undefined;
-    hash?: string | undefined;
-    automaticLayout?: boolean | undefined;
-    extraLib?: string | undefined;
-    autoHeight?: boolean | undefined;
-    fixedOverflowWidgets?: boolean | undefined;
-    fontSize?: number | undefined;
-    loadAsync?: boolean | undefined;
-    insertAtCursor?: ((code: string) => void) | undefined;
-    setCode?: ((ncode: string) => void) | undefined;
-    getCode?: (() => string) | undefined;
-    focus?: (() => void) | undefined;
-}, {
+declare const TemplateEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     focus: CustomEvent<any>;
     change: CustomEvent<any>;
     blur: CustomEvent<any>;
@@ -209,6 +120,6 @@ declare const TemplateEditor: $$__sveltets_2_IsomorphicComponent<{
     setCode: (ncode: string) => void;
     getCode: () => string;
     focus: () => void;
-}, string>;
+}, "code">;
 type TemplateEditor = InstanceType<typeof TemplateEditor>;
 export default TemplateEditor;

package/package/components/TimeAgo.svelte

@@ -1,20 +1,23 @@
 <script lang="ts">import { getDbClockNow } from '../forLater';
 import { displayDate } from '../utils';
-import { onDestroy, onMount, untrack } from 'svelte';
-let { date, agoOnlyIfRecent = false, noDate = false, isRecent = $bindable(true) } = $props();
+import { onMount, untrack } from 'svelte';
+let { date, agoOnlyIfRecent = false, noDate = false, isRecent = $bindable(true), noSeconds = false } = $props();
 let computedTimeAgo = $state(undefined);
 let interval;
 onMount(() => {
+    // Update every minute for noSeconds mode, every second for regular mode
+    const intervalMs = noSeconds ? 60000 : 1000;
     interval = setInterval(() => {
         computeDate();
         if (!isRecent) {
             clearInterval(interval);
             interval = undefined;
         }
-    }, 1000);
-});
-onDestroy(() => {
-    interval && clearInterval(interval);
+    }, intervalMs);
+    // Add explicit cleanup
+    return () => {
+        interval && clearInterval(interval);
+    };
 });
 async function computeDate() {
     computedTimeAgo = await displayDaysAgo(date);
@@ -32,8 +35,47 @@ function daysAgo(someDate) {
 function secondsAgo(date) {
     return Math.max(0, Math.floor((getDbClockNow().getTime() - date.getTime()) / 1000));
 }
+function minutesAgo(date) {
+    return Math.floor(secondsAgo(date) / 60);
+}
+function hoursAgo(date) {
+    return Math.floor(minutesAgo(date) / 60);
+}
+function isLessThanMonthAgo(date) {
+    const today = getDbClockNow();
+    const monthAgo = new Date(today);
+    monthAgo.setMonth(monthAgo.getMonth() - 1);
+    return date.getTime() >= monthAgo.getTime();
+}
 async function displayDaysAgo(dateString) {
-    const date = await new Date(dateString);
+    const date = new Date(dateString);
+    // New noSeconds mode
+    if (noSeconds) {
+        const mins = minutesAgo(date);
+        const hours = hoursAgo(date);
+        const dAgo = daysAgo(date);
+        // If less than an hour ago -> "x min ago"
+        if (mins < 60) {
+            return `${mins} min${mins !== 1 ? 's' : ''} ago`;
+        }
+        // If less than a day ago -> "x hours ago"
+        else if (hours < 24) {
+            isRecent = false;
+            return `${hours} hour${hours !== 1 ? 's' : ''} ago`;
+        }
+        // If less than a month ago -> "x days ago"
+        else if (isLessThanMonthAgo(date)) {
+            return `${dAgo} day${dAgo !== 1 ? 's' : ''} ago`;
+        }
+        // If more than a month ago -> "the mm/dd/year"
+        else {
+            const month = (date.getMonth() + 1).toString().padStart(2, '0');
+            const day = date.getDate().toString().padStart(2, '0');
+            const year = date.getFullYear();
+            return `the ${month}/${day}/${year}`;
+        }
+    }
+    // Original mode
     const nbSecondsAgo = secondsAgo(date);
     if (nbSecondsAgo < 600) {
         return `${nbSecondsAgo}s ago`;

package/package/components/TimeAgo.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     agoOnlyIfRecent?: boolean;
     noDate?: boolean;
     isRecent?: boolean;
+    noSeconds?: boolean;
 }
 declare const TimeAgo: import("svelte").Component<Props, {}, "isRecent">;
 type TimeAgo = ReturnType<typeof TimeAgo>;

package/package/components/Toast.svelte

@@ -7,14 +7,14 @@ function update(time) {
     const delta = time - lastTime;
     let hover = Object.values(toastStates).some((state) => state.hover);
     for (const toastId in toastStates) {
-        const state = toastStates[toastId];
+        const st = toastStates[toastId];
         if (hover)
             continue;
-        if (state.elapsed >= state.duration) {
+        if (st.elapsed >= st.duration) {
             delete toastStates[toastId];
             continue;
         }
-        state.elapsed += delta;
+        st.elapsed += delta;
     }
     lastTime = time;
     if (Object.values(toastStates).length > 0) {
@@ -36,12 +36,13 @@ function registerToast(toastId, duration) {
 </script>
 
 <script lang="ts">import { toast } from '@zerodevx/svelte-toast';
-import { CheckCircle2, XCircleIcon } from 'lucide-svelte';
 import Button from './common/button/Button.svelte';
 import {} from '../toast';
 import { processMessage } from './toast';
 import { onDestroy, untrack } from 'svelte';
-let { message, toastId, error = false, actions = [], errorMessage = undefined, duration = 5000 } = $props();
+import { twMerge } from 'tailwind-merge';
+import { classes, icons } from './common/alert/model';
+let { message, toastId, type = 'success', actions = [], errorMessage = undefined, duration = 5000 } = $props();
 function handleClose() {
     toast.pop(toastId);
 }
@@ -51,76 +52,97 @@ $effect.pre(() => {
 onDestroy(() => {
     delete toastStates[toastId];
 });
-let state = $derived.by(() => toastStates[toastId]);
+let _state = $derived.by(() => toastStates[toastId]);
 $effect(() => {
-    if (!state) {
+    if (!_state) {
         toast.pop(toastId);
     }
 });
-let color = error
-    ? { text: 'text-red-400', bg: 'bg-red-400' }
-    : { text: 'text-green-400', bg: 'bg-green-300' };
-let hover = $derived(Object.values(toastStates).some((state) => state.hover));
+let color = classes[type];
+let containerClass = {
+    success: 'toast-success',
+    error: 'toast-error',
+    info: 'toast-info',
+    warning: 'toast-warning'
+}[type];
+let Icon = $derived(icons[type]);
+let showMore = $state(false);
+const MAX_MSG_LEN = 160;
+let isLongMessage = $derived((message ?? '').length > MAX_MSG_LEN);
+let displayMessage = $derived(isLongMessage && !showMore ? (message ?? '').slice(0, MAX_MSG_LEN) + '... ' : (message ?? ''));
+// let hover = $derived(Object.values(toastStates).some((state) => state.hover))
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class="pointer-events-auto w-full max-w-sm overflow-hidden bg-surface-tertiary drop-shadow-base shadow-lg ring-1 ring-black ring-opacity-5 border rounded-md"
-	onmouseenter={() => state && (state.hover = true)}
-	onmouseleave={() => state && (state.hover = false)}
+	class={twMerge(
+		'pointer-events-auto w-full overflow-hidden rounded-md relative flex items-center bg-surface',
+		containerClass
+	)}
+	onmouseenter={() => _state && (_state.hover = true)}
+	onmouseleave={() => _state && (_state.hover = false)}
 >
-	<div class="p-2 min-h-[60px] flex flex-col">
-		<div class="flex items-start w-full">
-			<div class="flex-shrink-0 mt-0.5">
-				{#if error}
-					<XCircleIcon class="h-4 w-4 {color.text}" />
-				{:else}
-					<CheckCircle2 class="h-4 w-4 {color.text}" />
-				{/if}
-			</div>
-			<div class="ml-3 flex-1 w-0">
-				<p class="text-sm text-primary break-words">{@html processMessage(message)}</p>
-				{#if errorMessage}
-					<p class="text-xs {color.text} w-full overflow-auto mt-2">
-						{errorMessage}
-					</p>
+	<div
+		class="flex items-center h-full w-full min-h-10 rounded-md px-2 py-1 {color.descriptionClass} {color.bgClass}"
+	>
+		<div class="flex-shrink-0 mt-0.5">
+			<Icon class="h-4 w-4 {color.iconClass}" />
+		</div>
+		<div class="ml-3 flex-1 w-0">
+			<p class="text-xs break-words">
+				{@html processMessage(displayMessage)}
+				{#if isLongMessage && !showMore}
+					<button
+						type="button"
+						class="ml-1 {color.descriptionClass} font-medium hover:underline focus:outline-none"
+						onclick={() => (showMore = true)}
+					>
+						Show more
+					</button>
 				{/if}
-			</div>
-
-			<div class="ml-4 flex flex-shrink-0">
-				<button
-					type="button"
-					onclick={handleClose}
-					class="inline-flex rounded-md text-gray-400 hover:text-primary focus:outline-none"
-				>
-					<span class="sr-only">Close</span>
-					<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-						<path
-							d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-						/>
-					</svg>
-				</button>
-			</div>
+			</p>
+			{#if errorMessage}
+				<p class="text-xs {color.descriptionClass} w-full overflow-auto mt-2">
+					{errorMessage}
+				</p>
+			{/if}
 		</div>
-		<div class="mt-2 flex flex-col gap-2 w-full items-center">
+
+		<div class="flex justify-center ml-2">
 			{#each actions as action, index (index)}
 				<Button
-					variant={action.buttonType ?? 'default'}
+					variant={action.buttonType ?? 'subtle'}
+					unifiedSize="sm"
 					onClick={() => {
 						action.callback()
 						toast.pop(toastId)
 					}}
-					wrapperClasses="w-full"
+					btnClasses="{color.descriptionClass} font-medium"
 				>
 					{action.label}
 				</Button>
 			{/each}
 		</div>
+
+		<div class="ml-4 flex flex-shrink-0">
+			<button
+				type="button"
+				onclick={handleClose}
+				class="inline-flex rounded-md hover:text-primary focus:outline-none"
+			>
+				<span class="sr-only">Close</span>
+				<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+					<path
+						d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+					/>
+				</svg>
+			</button>
+		</div>
 	</div>
 	<!-- Duration indicator -->
 	<div
-		class="h-0.5 transition-colors {hover ? 'bg-gray-300' : color.bg}"
-		style="width: {Math.max(0, 1 - (state?.elapsed ?? duration) / duration) * 100}%"
+		class="h-[1px] absolute bottom-0 transition-colors bg-current {color.iconClass} opacity-60"
+		style="width: {Math.max(0, 1 - (_state?.elapsed ?? duration) / duration) * 100}%"
 	>
 	</div>
 </div>

package/package/components/Toast.svelte.d.ts

@@ -1,8 +1,8 @@
-import { type ToastAction } from '../toast';
+import { type ToastAction, type ToastType } from '../toast';
 interface Props {
     message: string;
     toastId: string;
-    error?: boolean;
+    type?: ToastType;
     actions?: ToastAction[];
     errorMessage?: string | undefined;
     duration?: number;

package/package/components/Tooltip.svelte

@@ -8,7 +8,7 @@ import { InfoIcon } from 'lucide-svelte';
 import { gfmPlugin } from 'svelte-exmarkdown/gfm';
 import { getContext, hasContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-let { light = false, wrapperClass = '', placement = undefined, documentationLink = undefined, small = false, markdownTooltip = undefined, customSize = '100%', class: classNames = '', children } = $props();
+let { light = false, wrapperClass = '', placement = undefined, documentationLink = undefined, small = false, markdownTooltip = undefined, customSize = '100%', class: classNames = '', Icon = InfoIcon, children } = $props();
 const plugins = [gfmPlugin()];
 const disableTooltips = hasContext('disableTooltips')
     ? getContext('disableTooltips') === true
@@ -28,7 +28,7 @@ const disableTooltips = hasContext('disableTooltips')
 				? 'text-primary-inverse'
 				: 'text-primary'} {classNames} relative"
 		>
-			<InfoIcon class="{small ? 'bottom-0' : '-bottom-0.5'} absolute" size={small ? 12 : 14} />
+			<Icon class="{small ? 'bottom-0' : '-bottom-0.5'} absolute" size={small ? 12 : 14} />
 		</div>
 		{#snippet text()}
 			{#if markdownTooltip}

package/package/components/Tooltip.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { PopoverPlacement } from './Popover.model';
+import { InfoIcon } from 'lucide-svelte';
 interface Props {
     light?: boolean;
     wrapperClass?: string;
@@ -8,6 +9,7 @@ interface Props {
     markdownTooltip?: string | undefined;
     customSize?: string;
     class?: string;
+    Icon?: typeof InfoIcon;
     children?: import('svelte').Snippet;
 }
 declare const Tooltip: import("svelte").Component<Props, {}, "">;

package/package/components/TooltipInner.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">import Markdown from 'svelte-exmarkdown';
 import { ExternalLink } from 'lucide-svelte';
 import { gfmPlugin } from 'svelte-exmarkdown/gfm';
+import { twMerge } from 'tailwind-merge';
 export let documentationLink = undefined;
 export let markdownTooltip = undefined;
+export let customBgClass = undefined;
 const plugins = [gfmPlugin()];
 </script>
 
 <div
-	class="shadow-lg max-w-sm break-words py-2 px-3 rounded-md text-xs font-normal text-primary bg-surface-secondary whitespace-normal text-left dark:border max-h-64 overflow-y-auto"
+	class={twMerge(
+		'shadow-lg max-w-sm break-words py-2 px-3 rounded-md text-xs font-normal text-primary  whitespace-normal text-left dark:border max-h-64 overflow-y-auto',
+		customBgClass || 'bg-surface-secondary'
+	)}
 >
 	{#if markdownTooltip}
 		<div class="prose-sm">

package/package/components/TooltipInner.svelte.d.ts

@@ -19,6 +19,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 declare const TooltipInner: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     documentationLink?: string | undefined;
     markdownTooltip?: string | undefined;
+    customBgClass?: string | undefined;
 }, {
     default: {};
 }>, {

package/package/components/Uptodate.svelte

@@ -6,7 +6,8 @@ async function loadVersion() {
     try {
         const res = await SettingsService.backendUptodate();
         if (res != 'yes') {
-            uptodate = res;
+            const parts = res.split(' -> ');
+            uptodate = parts.length > 1 ? parts[parts.length - 1] : res;
         }
     }
     catch (e) {
@@ -18,7 +19,7 @@ loadVersion();
 
 {#if uptodate}
 	<span class="text-accent text-xs">
-		{uptodate} &nbsp;
+		→ {uptodate} &nbsp;
 		<Tooltip>
 			{#if isCloudHosted()}
 				The cloud version is updated daily.

package/package/components/UserSettings.svelte

@@ -6,7 +6,7 @@ import TokensTable from './settings/TokensTable.svelte';
 import { createEventDispatcher } from 'svelte';
 import UserInfoSettings from './settings/UserInfoSettings.svelte';
 import AIUserSettings from './settings/AIUserSettings.svelte';
-let { scopes = undefined, newTokenLabel = undefined, newTokenWorkspace = undefined, newToken = $bindable(undefined), showMcpMode = false } = $props();
+let { scopes = undefined, newTokenLabel = undefined, newTokenWorkspace = undefined, newToken = $bindable(undefined), showMcpMode = false, disableChatOffset = false } = $props();
 let drawer = $state();
 let openWithMcpMode = $state(false);
 const dispatch = createEventDispatcher();
@@ -27,8 +27,8 @@ function handleTokenCreated(token) {
 }
 </script>
 
-<Drawer bind:this={drawer} size="900px" on:close={removeHash}>
-	<DrawerContent title="User Settings" on:close={closeDrawer}>
+<Drawer bind:this={drawer} size="900px" on:close={removeHash} {disableChatOffset}>
+	<DrawerContent title="User settings" on:close={closeDrawer}>
 		<div class="flex flex-col gap-6 pb-8">
 			{#if scopes == undefined}
 				<div

package/package/components/UserSettings.svelte.d.ts

@@ -4,6 +4,7 @@ interface Props {
     newTokenWorkspace?: string | undefined;
     newToken?: string | undefined;
     showMcpMode?: boolean;
+    disableChatOffset?: 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> & {