windmill-components 1.269.4 → 1.291.4

package/package/components/UserSettings.svelte

@@ -94,36 +94,38 @@ loadSettings();
 	<DrawerContent title="User Settings" on:close={closeDrawer}>
 		<div class="flex flex-col h-full">
 			<div>
-				<div class="text-xs pt-1 pb-2 text-tertiary flex-col flex">
-					Windmill <Version />
-				</div>
-				<div class="font-semibold flex items-baseline">
-					Theme: <DarkModeToggle forcedDarkMode={false} />
-				</div>
 				{#if scopes == undefined}
-					<h2 class="border-b mt-4">User info</h2>
-					<div class="">
-						{#if passwordError}
-							<div class="text-red-600 text-2xs grow">{passwordError}</div>
-						{/if}
-						<div class="flex flex-col gap-2 w-full">
-							<div class="mt-4">
-								<label class="block w-60 mb-2 text-tertiary">
-									<div class="text-secondary">email</div>
-									<input
-										type="text"
-										disabled
-										value={$usersWorkspaceStore?.email}
-										class="input mt-1"
-									/>
-								</label>
-								{#if login_type == 'password'}
-									<label class="block w-120">
-										<div class="text-secondary">password</div>
-										<input
-											type="password"
-											bind:value={newPassword}
-											class="
+					<div class="text-xs pt-1 pb-2 text-tertiary flex-col flex">
+						Windmill <Version />
+					</div>
+					<div class="font-semibold flex items-baseline">
+						Theme: <DarkModeToggle forcedDarkMode={false} />
+					</div>
+					<div class="flex flex-wrap md:gap-40 gap-10 mt-2">
+						<div>
+							<h2 class="border-b">User info</h2>
+							<div class="">
+								{#if passwordError}
+									<div class="text-red-600 text-2xs grow">{passwordError}</div>
+								{/if}
+								<div class="flex flex-col gap-2 w-full">
+									<div class="mt-4">
+										<label class="block w-60 mb-2 text-tertiary">
+											<div class="text-secondary">email</div>
+											<input
+												type="text"
+												disabled
+												value={$usersWorkspaceStore?.email}
+												class="input mt-1"
+											/>
+										</label>
+										{#if login_type == 'password'}
+											<label class="block w-120">
+												<div class="text-secondary">password</div>
+												<input
+													type="password"
+													bind:value={newPassword}
+													class="
 							w-full
 							block
 							py-1
@@ -135,55 +137,67 @@ loadSettings();
 							focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
 							text-sm
 							"
-										/>
-										<Button size="sm" btnClasses="mt-4 w-min" on:click={setPassword}
-											>Set password</Button
-										>
-									</label>
-								{:else if login_type == 'github'}
-									<span>Authentified through Github OAuth2. Cannot set a password.</span>
-								{/if}
+												/>
+												<Button size="sm" btnClasses="mt-4 w-min" on:click={setPassword}
+													>Set password</Button
+												>
+											</label>
+										{:else if login_type == 'github'}
+											<span>Authentified through Github OAuth2. Cannot set a password.</span>
+										{/if}
+									</div>
+								</div>
 							</div>
 						</div>
-					</div>
-				{/if}
 
-				<h2 class="border-b mt-8">AI user settings</h2>
+						<div>
+							<h2 class="border-b">AI user settings</h2>
 
-				<div class="flex flex-col gap-4 mt-2">
-					<Toggle
-						on:change={(e) => {
-							updateSetting(codeCompletionSessionEnabled, e.detail, 'codeCompletionSessionEnabled')
-						}}
-						checked={$codeCompletionSessionEnabled}
-						options={{
-							right: 'Code completion',
-							rightTooltip: 'AI completion in the code editors'
-						}}
-					/>
-					<Toggle
-						on:change={(e) => {
-							updateSetting(metadataCompletionEnabled, e.detail, 'metadataCompletionEnabled')
-						}}
-						checked={$metadataCompletionEnabled}
-						options={{
-							right: 'Metadata completion',
-							rightTooltip: 'AI completion for summaries and descriptions'
-						}}
-					/>
-					<Toggle
-						on:change={(e) => {
-							updateSetting(stepInputCompletionEnabled, e.detail, 'stepInputCompletionEnabled')
-						}}
-						checked={$stepInputCompletionEnabled}
-						options={{
-							right: 'Flow step input completion',
-							rightTooltip: 'AI completion for flow step inputs'
-						}}
-					/>
-				</div>
+							<div class="flex flex-col gap-4 mt-2">
+								<Toggle
+									on:change={(e) => {
+										updateSetting(
+											codeCompletionSessionEnabled,
+											e.detail,
+											'codeCompletionSessionEnabled'
+										)
+									}}
+									checked={$codeCompletionSessionEnabled}
+									options={{
+										right: 'Code completion',
+										rightTooltip: 'AI completion in the code editors'
+									}}
+								/>
+								<Toggle
+									on:change={(e) => {
+										updateSetting(metadataCompletionEnabled, e.detail, 'metadataCompletionEnabled')
+									}}
+									checked={$metadataCompletionEnabled}
+									options={{
+										right: 'Metadata completion',
+										rightTooltip: 'AI completion for summaries and descriptions'
+									}}
+								/>
+								<Toggle
+									on:change={(e) => {
+										updateSetting(
+											stepInputCompletionEnabled,
+											e.detail,
+											'stepInputCompletionEnabled'
+										)
+									}}
+									checked={$stepInputCompletionEnabled}
+									options={{
+										right: 'Flow step input completion',
+										rightTooltip: 'AI completion for flow step inputs'
+									}}
+								/>
+							</div>
+						</div>
+					</div>
+				{/if}
 
-				<div class="grid grid-cols-2 pt-8 pb-1">
+				<div class="grid grid-cols-2 pt-8 pb-1" class:pt-8={scopes == undefined}>
 					<h2 class="py-0 my-0 border-b pt-3">Tokens</h2>
 					<div class="flex justify-end border-b pb-1">
 						<Button

package/package/components/WorkerTagPicker.svelte

@@ -18,10 +18,12 @@ async function loadWorkerGroups() {
 		{#if workerTags}
 			{#if $workerTags?.length ?? 0 > 0}
 				<select
-					bind:value={tag}
+					value={tag}
 					on:change={(e) => {
-						if (tag == '') {
+						if (e.target?.['value'] == '') {
 							tag = undefined
+						} else if (e?.target?.['value']) {
+							tag = e.target?.['value']
 						}
 					}}
 				>

package/package/components/WorkflowTimeline.svelte

@@ -0,0 +1,106 @@
+<script>import { displayDate, msToSec } from '../utils';
+import { onDestroy } from 'svelte';
+import { getDbClockNow } from '../forLater';
+import { ExternalLink, Loader2 } from 'lucide-svelte';
+import TimelineBar from './TimelineBar.svelte';
+export let flow_status;
+export let flowDone = false;
+$: min = Object.values(flow_status).reduce((a, b) => Math.min(a, b.scheduled_for ? new Date(b.scheduled_for).getTime() : Infinity), Infinity);
+$: max = flowDone
+    ? Object.values(flow_status).reduce((a, b) => Math.max(a, b.started_at ? new Date(b.started_at).getTime() + (b.duration_ms ?? 0) : 0), 0)
+    : undefined;
+$: total = flowDone && max ? max - min : now - min;
+let now = getDbClockNow().getTime();
+let interval = setInterval((x) => {
+    if (!max) {
+        now = getDbClockNow().getTime();
+    }
+    if (min && (!max || total == undefined)) {
+        total = max ? max - min : Math.max(now - min, 2000);
+    }
+}, 30);
+onDestroy(() => {
+    interval && clearInterval(interval);
+});
+</script>
+
+{#if flow_status}
+	<div class="divide-y border-b">
+		<div class="px-2 py-2 grid grid-cols-12 w-full"
+			><div />
+			<div class="col-span-11 pt-1 px-2 flex text-2xs text-secondary justify-between"
+				><div>{min ? displayDate(new Date(min), true) : ''}</div>{#if max && min}<div
+						class="hidden lg:block">{msToSec(max - min)}s</div
+					>
+				{/if}<div class="flex gap-1 items-center font-mono"
+					>{max ? displayDate(new Date(max), true) : ''}{#if !max && min}{#if now}
+							{msToSec(now - min, 3)}s
+						{/if}<Loader2 size={14} class="animate-spin" />{/if}</div
+				></div
+			>
+		</div>
+		<div class="flex flex-row-reverse items-center text-sm text-secondary p-2">
+			<div class="flex gap-4 items-center text-2xs">
+				<div class="flex gap-2 items-center">
+					<div>Waiting for executor</div>
+					<div class="h-4 w-4 bg-gray-500" />
+				</div>
+
+				<div class="flex gap-2 items-center">
+					<div>Execution</div>
+					<div class="h-4 w-4 bg-blue-500/90" />
+				</div>
+			</div>
+		</div>
+		{#each Object.entries(flow_status) as [k, v] (k)}
+			<div class="overflow-auto max-h-60 shadow-inner dark:shadow-gray-700 relative">
+				<div class="px-2 py-2 text-xs grid grid-cols-6 w-full gap-1">
+					<a target="_blank" class="inline-flex gap-2 items-baseline" href="/run/{k}"
+						>{v.name ?? k} <ExternalLink size={12} /></a
+					>
+					<div class="col-span-5 flex min-h-6 w-full">
+						{#if min && total}
+							{@const scheduledFor = v?.scheduled_for
+								? new Date(v?.scheduled_for).getTime()
+								: undefined}
+							{@const startedAt = v?.started_at ? new Date(v?.started_at).getTime() : undefined}
+
+							{@const waitingLen = scheduledFor
+								? startedAt
+									? startedAt - scheduledFor
+									: now - scheduledFor
+								: 0}
+
+							<div class="flex w-full">
+								<TimelineBar
+									position="left"
+									id={k}
+									{total}
+									{min}
+									gray
+									started_at={scheduledFor}
+									len={waitingLen < 100 ? 0 : waitingLen - 100}
+									running={startedAt == undefined}
+								/>
+								{#if startedAt}
+									<TimelineBar
+										position={waitingLen < 100 ? 'center' : 'right'}
+										id={k}
+										{total}
+										{min}
+										concat
+										started_at={startedAt}
+										len={v.duration_ms ?? now - startedAt}
+										running={v.duration_ms == undefined}
+									/>
+								{/if}
+							</div>
+						{/if}</div
+					></div
+				>
+			</div>
+		{/each}
+	</div>
+{:else}
+	<Loader2 class="animate-spin" />
+{/if}

package/package/components/WorkflowTimeline.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { WorkflowStatus } from '../gen';
+declare const __propDef: {
+    props: {
+        flow_status: Record<string, WorkflowStatus>;
+        flowDone?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type WorkflowTimelineProps = typeof __propDef.props;
+export type WorkflowTimelineEvents = typeof __propDef.events;
+export type WorkflowTimelineSlots = typeof __propDef.slots;
+export default class WorkflowTimeline extends SvelteComponent<WorkflowTimelineProps, WorkflowTimelineEvents, WorkflowTimelineSlots> {
+}
+export {};

package/package/components/WorkspaceGroup.svelte

@@ -352,6 +352,7 @@ let createdTags = [];
 										}}
 										options={nconfig?.worker_tags}
 										selectedOptionsDraggable={false}
+										ulOptionsClass={'!bg-surface-secondary'}
 										placeholder="High priority tags"
 									/>
 								</Label>

package/package/components/apps/components/buttons/AppButton.svelte

@@ -39,14 +39,6 @@ let outputs = initOutput($worldStore, id, {
     loading: false,
     jobId: undefined
 });
-if (rowContext && rowInputs) {
-    const inputOutput = { result: outputs.result.peak(), loading: false };
-    rowInputs.set(id, inputOutput);
-}
-if (iterContext && listInputs) {
-    const inputOutput = { result: outputs.result.peak(), loading: false };
-    listInputs.set(id, inputOutput);
-}
 if (controls) {
     $componentControl[id] = controls;
 }
@@ -185,19 +177,17 @@ let css = initCss($app.css?.buttoncomponent, customCss);
 				on:click={handleClick}
 				size={resolvedConfig.size}
 				color={resolvedConfig.color}
+				startIcon={{
+					icon: resolvedConfig.beforeIcon ? beforeIconComponent : undefined
+				}}
+				endIcon={{
+					icon: resolvedConfig.afterIcon ? afterIconComponent : undefined
+				}}
 				{loading}
 			>
-				<span class="truncate inline-flex gap-2 items-center">
-					{#if resolvedConfig.beforeIcon && beforeIconComponent}
-						<svelte:component this={beforeIconComponent} size={14} />
-					{/if}
-					{#if resolvedConfig.label?.toString() && resolvedConfig.label?.toString()?.length > 0}
-						<div>{resolvedConfig.label.toString()}</div>
-					{/if}
-					{#if resolvedConfig.afterIcon && afterIconComponent}
-						<svelte:component this={afterIconComponent} size={14} />
-					{/if}
-				</span>
+				{#if resolvedConfig.label?.toString() && resolvedConfig.label?.toString()?.length > 0}
+					<div>{resolvedConfig.label.toString()}</div>
+				{/if}
 			</Button>
 		{/key}
 	</AlignWrapper>

package/package/components/apps/components/display/AppCustomComponent.svelte

@@ -3,14 +3,13 @@ import { initOutput } from '../../editor/appUtils';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import { sendUserToast } from '../../../../toast';
 import { RunnableWrapper } from '../helpers';
-import { workspaceStore } from '../../../../stores';
 import { Loader2 } from 'lucide-svelte';
 export let id;
 export let render;
 export let componentInput;
 export let customComponent;
 let divId = `custom-component-${id}`;
-const { worldStore } = getContext('AppViewerContext');
+const { worldStore, workspace } = getContext('AppViewerContext');
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     output: undefined,
@@ -49,7 +48,7 @@ onMount(async () => {
     //@ts-ignore
     await import(
     /* @vite-ignore */
-    `/api/w/${$workspaceStore ?? 'NO_W'}/resources_u/custom_component/${customComponent.name}`);
+    `/api/w/${workspace ?? 'NO_W'}/resources_u/custom_component/${customComponent.name}`);
     loaded = true;
     try {
         let renderer = globalThis.windmill[customComponent?.name ?? 'no_name'];
@@ -77,7 +76,6 @@ function handleResult() {
 </script>
 
 <InitializeComponent {id} />
-
 {#if render}
 	<div class="w-full h-full overflow-auto {customComponent?.name ?? 'no_name'}">
 		<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:result>