windmill-components 1.677.1 → 1.687.0

package/package/components/deploymentRequest/DeploymentRequestPanel.svelte

@@ -0,0 +1,337 @@
+<script lang="ts">import { onMount, untrack } from 'svelte';
+import { Badge, Button } from '../common';
+import Select from '../select/Select.svelte';
+import TextInput from '../text_input/TextInput.svelte';
+import { safeSelectItems } from '../select/utils.svelte';
+import { WorkspaceService } from '../../gen';
+import { sendUserToast } from '../../toast';
+import { Send, Plus, X, ArchiveX } from 'lucide-svelte';
+let { forkWorkspaceId, parentWorkspaceId, currentUsername, isAdmin, onStateChange } = $props();
+let request = $state(null);
+let loading = $state(true);
+let eligibleDeployers = $state([]);
+let showRequestDialog = $state(false);
+let selectedAssignees = $state([]);
+let assigneeToAdd = $state(undefined);
+let newComment = $state('');
+let posting = $state(false);
+let replyParentId = $state(undefined);
+let replyBody = $state('');
+let canCancel = $derived(request != null && (isAdmin || request.requested_by === currentUsername));
+async function load() {
+    loading = true;
+    try {
+        request = await WorkspaceService.getOpenDeploymentRequest({ workspace: forkWorkspaceId });
+    }
+    catch (e) {
+        console.error('Failed to load open deployment request', e);
+        request = null;
+    }
+    finally {
+        loading = false;
+        onStateChange?.(request != null);
+    }
+}
+async function loadEligibleDeployers() {
+    try {
+        eligibleDeployers = await WorkspaceService.listDeploymentRequestEligibleDeployers({
+            workspace: forkWorkspaceId
+        });
+    }
+    catch (e) {
+        console.error('Failed to load eligible deployers', e);
+        eligibleDeployers = [];
+    }
+}
+onMount(() => {
+    load();
+    loadEligibleDeployers();
+});
+$effect(() => {
+    if (assigneeToAdd && !selectedAssignees.includes(assigneeToAdd)) {
+        const v = assigneeToAdd;
+        untrack(() => {
+            selectedAssignees = [...selectedAssignees, v];
+            assigneeToAdd = undefined;
+        });
+    }
+});
+async function createRequest() {
+    if (selectedAssignees.length === 0) {
+        sendUserToast('Pick at least one assignee', true);
+        return;
+    }
+    posting = true;
+    try {
+        request = await WorkspaceService.createDeploymentRequest({
+            workspace: forkWorkspaceId,
+            requestBody: { assignees: selectedAssignees }
+        });
+        sendUserToast(`Deployment request sent to ${selectedAssignees.length} assignee(s)`);
+        showRequestDialog = false;
+        selectedAssignees = [];
+        onStateChange?.(true);
+    }
+    catch (e) {
+        sendUserToast(`Failed to create deployment request: ${e.body || e.message}`, true);
+    }
+    finally {
+        posting = false;
+    }
+}
+async function cancelRequest() {
+    if (!request)
+        return;
+    if (!confirm('Cancel the open deployment request? Assignees will be notified.'))
+        return;
+    try {
+        await WorkspaceService.cancelDeploymentRequest({
+            workspace: forkWorkspaceId,
+            id: request.id
+        });
+        sendUserToast('Deployment request cancelled');
+        request = null;
+        onStateChange?.(false);
+    }
+    catch (e) {
+        sendUserToast(`Failed to cancel: ${e.body || e.message}`, true);
+    }
+}
+async function postComment(body, parentId) {
+    if (!request || !body.trim())
+        return;
+    posting = true;
+    try {
+        const created = await WorkspaceService.createDeploymentRequestComment({
+            workspace: forkWorkspaceId,
+            id: request.id,
+            requestBody: { body, parent_id: parentId }
+        });
+        request = {
+            ...request,
+            comments: [...request.comments, created]
+        };
+        if (parentId == null) {
+            newComment = '';
+        }
+        else {
+            replyBody = '';
+            replyParentId = undefined;
+        }
+    }
+    catch (e) {
+        sendUserToast(`Failed to post comment: ${e.body || e.message}`, true);
+    }
+    finally {
+        posting = false;
+    }
+}
+let topLevel = $derived(request?.comments.filter((c) => c.parent_id == null) ?? []);
+function repliesOf(parent) {
+    if (!request)
+        return [];
+    return request.comments.filter((c) => c.parent_id === parent.id);
+}
+function formatTimestamp(iso) {
+    return new Date(iso).toLocaleString();
+}
+// Has content to render inline in the deploy panel: dialog open,
+// request open, or still loading.
+let hasContent = $derived(loading || showRequestDialog || request != null);
+export function refresh() {
+    load();
+}
+export function openRequestDialog() {
+    showRequestDialog = true;
+}
+export function isDialogOpen() {
+    return showRequestDialog;
+}
+export function hasOpenRequest() {
+    return request != null;
+}
+</script>
+
+{#if hasContent}
+	<div class="flex flex-col gap-2 mt-3 pt-3 border-t">
+		{#if loading}
+			<div class="text-secondary text-xs">Loading deployment request…</div>
+		{:else if !request}
+			<!-- showRequestDialog == true -->
+			<div class="flex flex-col gap-2 border rounded-md p-3 bg-surface">
+				<div class="text-xs text-secondary">
+					Pick one or more assignees. They must be admins or members of <code>wm_deployers</code>
+					in <b>{parentWorkspaceId}</b>.
+				</div>
+				<Select
+					bind:value={assigneeToAdd}
+					items={safeSelectItems(
+						eligibleDeployers
+							.filter((d) => !selectedAssignees.includes(d.username))
+							.map((d) => ({
+								label: `${d.username} <${d.email}>`,
+								value: d.username
+							}))
+					)}
+					placeholder="Add assignee…"
+				/>
+				{#if selectedAssignees.length > 0}
+					<div class="flex flex-wrap gap-1">
+						{#each selectedAssignees as a (a)}
+							<Badge color="blue">
+								{a}
+								<button
+									type="button"
+									class="ml-1 hover:text-red-600"
+									onclick={() => {
+										selectedAssignees = selectedAssignees.filter((s) => s !== a)
+									}}
+								>
+									<X size={12} />
+								</button>
+							</Badge>
+						{/each}
+					</div>
+				{/if}
+				<div class="flex gap-2">
+					<Button
+						variant="accent"
+						size="xs"
+						startIcon={{ icon: Send }}
+						disabled={posting || selectedAssignees.length === 0}
+						onclick={createRequest}
+					>
+						Send request
+					</Button>
+					<Button
+						variant="default"
+						size="xs"
+						onclick={() => {
+							showRequestDialog = false
+							selectedAssignees = []
+						}}
+					>
+						Cancel
+					</Button>
+				</div>
+			</div>
+		{:else}
+			<div class="flex items-center justify-between flex-wrap gap-2 text-xs">
+				<div class="flex items-center gap-2 flex-wrap">
+					<Badge color="green" size="xs">Deployment request open</Badge>
+					<span class="text-secondary">by</span>
+					<b>{request.requested_by}</b>
+					<span class="text-secondary">at {formatTimestamp(request.requested_at)}</span>
+				</div>
+				{#if canCancel}
+					<Button
+						variant="default"
+						size="xs"
+						startIcon={{ icon: ArchiveX }}
+						onclick={cancelRequest}
+					>
+						Cancel request
+					</Button>
+				{/if}
+			</div>
+			<div class="flex items-center gap-1 flex-wrap text-xs">
+				<span class="text-secondary">Assignees:</span>
+				{#each request.assignees as a (a.username)}
+					<Badge color="indigo" size="xs">{a.username}</Badge>
+				{/each}
+			</div>
+
+			<div class="border rounded-md bg-surface p-3 flex flex-col gap-3">
+				{#if topLevel.length === 0}
+					<div class="text-secondary text-xs">No comments yet. Be the first to leave feedback.</div>
+				{/if}
+				{#each topLevel as c (c.id)}
+					<div class="border rounded-md p-2 flex flex-col gap-1" class:opacity-60={c.obsolete}>
+						<div class="flex items-center justify-between gap-2 text-xs">
+							<div class="flex items-center gap-2">
+								<b>{c.author}</b>
+								{#if c.anchor_kind && c.anchor_path}
+									<Badge color="blue" size="xs">
+										{c.anchor_kind}:{c.anchor_path}
+									</Badge>
+								{/if}
+								{#if c.obsolete}
+									<Badge color="gray" size="xs">obsolete</Badge>
+								{/if}
+							</div>
+							<span class="text-tertiary text-2xs">{formatTimestamp(c.created_at)}</span>
+						</div>
+						<div class="text-sm whitespace-pre-wrap">{c.body}</div>
+
+						{#each repliesOf(c) as r (r.id)}
+							<div
+								class="ml-4 border-l pl-2 flex flex-col gap-1"
+								class:opacity-60={r.obsolete || c.obsolete}
+							>
+								<div class="flex items-center justify-between gap-2 text-xs">
+									<b>{r.author}</b>
+									<span class="text-tertiary text-2xs">{formatTimestamp(r.created_at)}</span>
+								</div>
+								<div class="text-sm whitespace-pre-wrap">{r.body}</div>
+							</div>
+						{/each}
+
+						{#if replyParentId === c.id}
+							<div class="ml-4 flex flex-col gap-1 mt-1">
+								<TextInput bind:value={replyBody} inputProps={{ placeholder: 'Write a reply…' }} />
+								<div class="flex gap-2">
+									<Button
+										size="xs"
+										variant="accent"
+										disabled={posting || !replyBody.trim()}
+										onclick={() => postComment(replyBody, c.id)}
+									>
+										Reply
+									</Button>
+									<Button
+										size="xs"
+										variant="default"
+										onclick={() => {
+											replyParentId = undefined
+											replyBody = ''
+										}}
+									>
+										Cancel
+									</Button>
+								</div>
+							</div>
+						{:else}
+							<button
+								class="text-xs text-tertiary hover:text-secondary mt-1 self-start"
+								onclick={() => {
+									replyParentId = c.id
+									replyBody = ''
+								}}
+							>
+								Reply
+							</button>
+						{/if}
+					</div>
+				{/each}
+
+				<div class="flex flex-col gap-2 border-t pt-2">
+					<TextInput
+						bind:value={newComment}
+						inputProps={{ placeholder: 'Leave a general comment…' }}
+					/>
+					<div class="self-end">
+						<Button
+							size="xs"
+							variant="accent"
+							startIcon={{ icon: Plus }}
+							disabled={posting || !newComment.trim()}
+							onclick={() => postComment(newComment)}
+						>
+							Comment
+						</Button>
+					</div>
+				</div>
+			</div>
+		{/if}
+	</div>
+{/if}

package/package/components/deploymentRequest/DeploymentRequestPanel.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    forkWorkspaceId: string;
+    parentWorkspaceId: string;
+    currentUsername: string;
+    isAdmin: boolean;
+    onStateChange?: (hasOpenRequest: boolean) => void;
+}
+declare const DeploymentRequestPanel: import("svelte").Component<Props, {
+    refresh: () => void;
+    openRequestDialog: () => void;
+    isDialogOpen: () => boolean;
+    hasOpenRequest: () => boolean;
+}, "">;
+type DeploymentRequestPanel = ReturnType<typeof DeploymentRequestPanel>;
+export default DeploymentRequestPanel;

package/package/components/details/CopyableCodeBlock.svelte

@@ -1,7 +1,15 @@
 <script lang="ts">import { copyToClipboard } from '../../utils';
 import { Copy } from 'lucide-svelte';
 import Highlight from 'svelte-highlight';
-let { code, language, disabled = false, wrap = false } = $props();
+let { code, language, disabled = false, wrap = false, copyOnClick = true } = $props();
+function copyCode(event) {
+    if (disabled) {
+        return;
+    }
+    event?.preventDefault();
+    event?.stopPropagation();
+    copyToClipboard(code);
+}
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -9,22 +17,24 @@ let { code, language, disabled = false, wrap = false } = $props();
 <div
 	class="flex flex-col flex-1 border rounded-md relative bg-surface-input"
 	class:cursor-not-allowed={disabled}
+	class:cursor-pointer={copyOnClick && !disabled}
+	class:cursor-text={!copyOnClick && !disabled}
 	onclick={(e) => {
-		if (disabled) {
-			return
+		if (copyOnClick) {
+			copyCode(e)
 		}
-		e.preventDefault()
-		copyToClipboard(code)
 	}}
 >
-	<div class="absolute top-2 right-1 z-10 pointer-events-none">
-		<Copy size={14} class="w-8 cursor-pointer pointer-events-auto" />
+	<div class="absolute top-2 right-1 z-10">
+		<div class="w-8 cursor-pointer" onclick={copyCode}>
+			<Copy size={14} />
+		</div>
 	</div>
 	<div class="p-2 w-full overflow-auto">
 		<Highlight
 			{language}
 			{code}
-			class="pointer-events-none {wrap ? 'whitespace-pre-wrap break-all pr-8' : ''}"
+			class="{copyOnClick ? 'pointer-events-none' : 'select-text'} {wrap ? 'whitespace-pre-wrap break-all pr-8' : ''}"
 		/>
 	</div>
 </div>

package/package/components/details/CopyableCodeBlock.svelte.d.ts

@@ -4,6 +4,7 @@ interface Props {
     language: LanguageType<string>;
     disabled?: boolean;
     wrap?: boolean;
+    copyOnClick?: boolean;
 }
 declare const CopyableCodeBlock: import("svelte").Component<Props, {}, "">;
 type CopyableCodeBlock = ReturnType<typeof CopyableCodeBlock>;

package/package/components/flows/FlowAssetsHandler.svelte

@@ -21,13 +21,14 @@
 <script lang="ts">import { inferAssets } from '../../infer';
 import { assetEq, getFlowModuleAssets } from '../assets/lib';
 import { getAllModules } from './flowExplorer';
-import { getContext, untrack } from 'svelte';
+import { getContext } from 'svelte';
 import { AssetService, ResourceService } from '../../gen';
 import { deepEqual } from 'fast-equals';
 import { workspaceStore } from '../../stores';
 import S3FilePicker from '../S3FilePicker.svelte';
 import ResourceEditorDrawer from '../ResourceEditorDrawer.svelte';
 import { watch } from 'runed';
+import { sendUserToast } from '../../toast';
 let { modules, enableParser = false, enableDbExplore = false, enablePathScriptAndFlowAssets = false } = $props();
 const flowGraphAssetsCtx = getContext('FlowGraphAssetContext');
 const { selectionManager } = getContext('FlowEditorContext') || {};
@@ -88,7 +89,14 @@ $effect(() => {
         }
     }
 });
-async function parseAndUpdateRawScriptModule(v, modId) {
+function analyzeEntireFlow() {
+    for (const mod of allModules) {
+        if (mod.value.type === 'rawscript') {
+            parseAndUpdateRawScriptModule(mod.value, mod.id);
+        }
+    }
+}
+async function parseAndUpdateRawScriptModule(v, modId, isUserEdit = true) {
     console.log('Parsing assets for RawScript module', modId);
     let inferAssetsResult = await inferAssets(v.language, v.content);
     if (inferAssetsResult.status === 'error')
@@ -102,25 +110,15 @@ async function parseAndUpdateRawScriptModule(v, modId) {
             asset.alt_access_type = old.alt_access_type;
     }
     const normalizedAssets = newAssets.length > 0 ? newAssets : undefined;
-    if (!deepEqual(v.assets, normalizedAssets))
-        v.assets = normalizedAssets;
+    if (!deepEqual(v.assets, normalizedAssets)) {
+        if (!isUserEdit && normalizedAssets && normalizedAssets.length > 0) {
+            sendUserToast('Assets were detected in this step. Analyze entire flow for assets?', 'warning', [{ label: 'Analyze entire flow', callback: () => analyzeEntireFlow() }]);
+        }
+        else {
+            v.assets = normalizedAssets;
+        }
+    }
 }
-// Check for raw script modules whose assets were not parsed. Useful for flows created
-// before the assets feature was introduced.
-$effect(() => {
-    if (!enableParser)
-        return;
-    untrack(() => {
-        setTimeout(() => {
-            for (const mod of allModules) {
-                if (mod.value.type === 'rawscript' && mod.value.assets === undefined) {
-                    console.log('RawScript module', mod.id, 'without assets field, parsing');
-                    parseAndUpdateRawScriptModule(mod.value, mod.id);
-                }
-            }
-        }, 500); // ensure modules are loaded
-    });
-});
 $effect(() => {
     if (!enableParser)
         return;
@@ -134,7 +132,7 @@ $effect(() => {
             // Also recompute if the module is selected
             watch([() => selectedId === mod.id], () => {
                 if (selectedId === mod.id)
-                    parseAndUpdateRawScriptModule(modValue, mod.id);
+                    parseAndUpdateRawScriptModule(modValue, mod.id, modValue.assets !== undefined);
             });
         }
     }

package/package/components/flows/agentToolTree.d.ts

@@ -0,0 +1,17 @@
+import type { FlowModule } from '../../gen';
+import { type AgentTool } from './agentToolUtils';
+export type AgentToolOwner = {
+    agentId: string;
+    tools: AgentTool[];
+    toolIndex: number;
+    tool: AgentTool;
+    depth: number;
+};
+export type RemovedAgentTool = {
+    tool: AgentTool;
+    removedIds: string[];
+};
+export declare function findAgentToolOwner(modules: FlowModule[], toolId: string): AgentToolOwner | undefined;
+export declare function removeAgentToolOwner(owner: AgentToolOwner): RemovedAgentTool | undefined;
+export declare function collectFlowNodeIds(module: FlowModule): string[];
+export declare function collectAgentToolIds(tool: AgentTool): string[];

package/package/components/flows/agentToolTree.js

@@ -0,0 +1,114 @@
+import { isFlowModuleTool } from './agentToolUtils';
+export function findAgentToolOwner(modules, toolId) {
+    return findAgentToolOwnerInModules(modules, toolId, 0);
+}
+export function removeAgentToolOwner(owner) {
+    const candidate = owner.tools[owner.toolIndex];
+    if (!candidate || candidate.id !== owner.tool.id) {
+        return undefined;
+    }
+    owner.tools.splice(owner.toolIndex, 1);
+    return {
+        tool: candidate,
+        removedIds: collectAgentToolIds(candidate)
+    };
+}
+export function collectFlowNodeIds(module) {
+    return collectFlowNodeIdsFromNode(module);
+}
+export function collectAgentToolIds(tool) {
+    return collectFlowNodeIdsFromNode(tool);
+}
+function findAgentToolOwnerInModules(modules, toolId, depth) {
+    for (const module of modules) {
+        const owner = findAgentToolOwnerInNode(module, toolId, depth);
+        if (owner) {
+            return owner;
+        }
+    }
+    return undefined;
+}
+function findAgentToolOwnerInNode(node, toolId, depth) {
+    if (node.value.type === 'forloopflow' || node.value.type === 'whileloopflow') {
+        return findAgentToolOwnerInModules(node.value.modules, toolId, depth);
+    }
+    if (node.value.type === 'branchall') {
+        for (const branch of node.value.branches) {
+            const owner = findAgentToolOwnerInModules(branch.modules, toolId, depth);
+            if (owner) {
+                return owner;
+            }
+        }
+        return undefined;
+    }
+    if (node.value.type === 'branchone') {
+        const defaultOwner = findAgentToolOwnerInModules(node.value.default, toolId, depth);
+        if (defaultOwner) {
+            return defaultOwner;
+        }
+        for (const branch of node.value.branches) {
+            const owner = findAgentToolOwnerInModules(branch.modules, toolId, depth);
+            if (owner) {
+                return owner;
+            }
+        }
+        return undefined;
+    }
+    if (node.value.type !== 'aiagent') {
+        return undefined;
+    }
+    const toolIndex = node.value.tools.findIndex((tool) => tool.id === toolId);
+    if (toolIndex !== -1) {
+        return {
+            agentId: node.id,
+            tools: node.value.tools,
+            toolIndex,
+            tool: node.value.tools[toolIndex],
+            depth: depth + 1
+        };
+    }
+    for (const tool of node.value.tools) {
+        if (!isFlowModuleTool(tool)) {
+            continue;
+        }
+        const owner = findAgentToolOwnerInNode(tool, toolId, depth + 1);
+        if (owner) {
+            return owner;
+        }
+    }
+    return undefined;
+}
+function collectFlowNodeIdsFromNode(node) {
+    const ids = [node.id];
+    if (node.value.type === 'forloopflow' || node.value.type === 'whileloopflow') {
+        for (const module of node.value.modules) {
+            ids.push(...collectFlowNodeIds(module));
+        }
+        return ids;
+    }
+    if (node.value.type === 'branchall') {
+        for (const branch of node.value.branches) {
+            for (const module of branch.modules) {
+                ids.push(...collectFlowNodeIds(module));
+            }
+        }
+        return ids;
+    }
+    if (node.value.type === 'branchone') {
+        for (const module of node.value.default) {
+            ids.push(...collectFlowNodeIds(module));
+        }
+        for (const branch of node.value.branches) {
+            for (const module of branch.modules) {
+                ids.push(...collectFlowNodeIds(module));
+            }
+        }
+        return ids;
+    }
+    if (node.value.type === 'aiagent') {
+        for (const tool of node.value.tools) {
+            ids.push(...collectAgentToolIds(tool));
+        }
+    }
+    return ids;
+}

package/package/components/flows/agentToolTree.test.d.ts

@@ -0,0 +1 @@
+export {};