windmill-components 1.448.50 → 1.472.2

package/package/components/copilot/CronGen.svelte

@@ -1,7 +1,7 @@
 <script>import { ExternalLink, Wand2 } from 'lucide-svelte';
 import Button from '../common/button/Button.svelte';
 import { getNonStreamingCompletion } from './lib';
-import Popup from '../common/popup/Popup.svelte';
+import Popover from '../meltComponents/Popover.svelte';
 import { sendUserToast } from '../../toast';
 import { copilotInfo } from '../../stores';
 import { base } from '../../base';
@@ -57,12 +57,8 @@ async function generateCron() {
 }
 </script>
 
-<Popup
-	floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-	containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
-	let:close
->
-	<svelte:fragment slot="button">
+<Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
+	<svelte:fragment slot="trigger">
 		<Button
 			color={genLoading ? 'red' : 'light'}
 			size="xs"
@@ -76,47 +72,51 @@ async function generateCron() {
 			on:click={genLoading ? () => abortController?.abort() : undefined}
 		/>
 	</svelte:fragment>
-	{#if $copilotInfo.exists_ai_resource}
-		<div class="flex w-96">
-			<input
-				bind:this={instructionsField}
-				type="text"
-				placeholder="CRON schedule description"
-				bind:value={instructions}
-				on:keypress={({ key }) => {
-					if (key === 'Enter' && instructions.length > 0) {
-						close(instructionsField || null)
-						generateCron()
-					}
-				}}
-			/>
-			<Button
-				size="xs"
-				color="light"
-				variant="contained"
-				buttonType="button"
-				btnClasses="!ml-2 text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
-				title="Generate CRON schedule from prompt"
-				aria-label="Generate"
-				iconOnly
-				on:click={() => {
-					close(instructionsField || null)
-					generateCron()
-				}}
-				disabled={instructions.length == 0}
-				startIcon={{ icon: Wand2 }}
-			/>
+	<svelte:fragment slot="content" let:close>
+		<div class="border rounded-lg shadow-lg p-4 bg-surface">
+			{#if $copilotInfo.exists_ai_resource}
+				<div class="flex w-96">
+					<input
+						bind:this={instructionsField}
+						type="text"
+						placeholder="CRON schedule description"
+						bind:value={instructions}
+						on:keypress={({ key }) => {
+							if (key === 'Enter' && instructions.length > 0) {
+								close()
+								generateCron()
+							}
+						}}
+					/>
+					<Button
+						size="xs"
+						color="light"
+						variant="contained"
+						buttonType="button"
+						btnClasses="!ml-2 text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+						title="Generate CRON schedule from prompt"
+						aria-label="Generate"
+						iconOnly
+						on:click={() => {
+							close()
+							generateCron()
+						}}
+						disabled={instructions.length == 0}
+						startIcon={{ icon: Wand2 }}
+					/>
+				</div>
+			{:else}
+				<div class="block text-primary">
+					<p class="text-sm"
+						>Enable Windmill AI in the <a
+							href="{base}/workspace_settings?tab=ai"
+							target="_blank"
+							class="inline-flex flex-row items-center gap-1"
+							>workspace settings <ExternalLink size={16} /></a
+						></p
+					>
+				</div>
+			{/if}
 		</div>
-	{:else}
-		<div class="block text-primary">
-			<p class="text-sm"
-				>Enable Windmill AI in the <a
-					href="{base}/workspace_settings?tab=ai"
-					target="_blank"
-					class="inline-flex flex-row items-center gap-1"
-					>workspace settings <ExternalLink size={16} /></a
-				></p
-			>
-		</div>
-	{/if}
-</Popup>
+	</svelte:fragment>
+</Popover>

package/package/components/copilot/FlowCopilotDrawer.svelte

@@ -32,9 +32,10 @@ const { drawerStore, modulesStore, currentStepStore } = getContext('FlowCopilotC
 						$currentStepStore = numberToChars(0)
 					}
 				}}
+				let:item
 			>
-				<ToggleButton value="sequence" label="Sequence" />
-				<ToggleButton value="trigger" label="Trigger" />
+				<ToggleButton value="sequence" label="Sequence" {item} />
+				<ToggleButton value="trigger" label="Trigger" {item} />
 			</ToggleButtonGroup>
 			{#if flowCopilotMode === 'trigger'}
 				<Alert title="Trigger flow builder">

package/package/components/copilot/FlowCopilotStatus.svelte

@@ -5,7 +5,7 @@ import Button from '../common/button/Button.svelte';
 import { WindmillIcon } from '../icons';
 import { charsToNumber } from '../flows/idUtils';
 import { copilotInfo } from '../../stores';
-import Popup from '../common/popup/Popup.svelte';
+import Popover from '../meltComponents/Popover.svelte';
 import { ExternalLink, Wand2 } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 export let copilotLoading;
@@ -103,13 +103,8 @@ $: copilotStatus && copilotPopover?.refresh();
 		</div>
 	</ManualPopover>
 {:else}
-	<Popup
-		floatingConfig={{
-			strategy: 'absolute',
-			placement: 'bottom'
-		}}
-	>
-		<svelte:fragment slot="button">
+	<Popover placement="bottom">
+		<svelte:fragment slot="trigger">
 			<Button
 				size="xs"
 				startIcon={{
@@ -123,15 +118,17 @@ $: copilotStatus && copilotPopover?.refresh();
 				AI builder
 			</Button>
 		</svelte:fragment>
-		<div class="block text-primary">
-			<p class="text-sm"
-				>Enable Windmill AI in the <a
-					href="{base}/workspace_settings?tab=ai"
-					target="_blank"
-					class="inline-flex flex-row items-center gap-1"
-					>workspace settings <ExternalLink size={16} /></a
-				></p
-			>
-		</div>
-	</Popup>
+		<svelte:fragment slot="content">
+			<div class="block text-primary p-4">
+				<p class="text-sm"
+					>Enable Windmill AI in the <a
+						href="{base}/workspace_settings?tab=ai"
+						target="_blank"
+						class="inline-flex flex-row items-center gap-1"
+						>workspace settings <ExternalLink size={16} /></a
+					></p
+				>
+			</div>
+		</svelte:fragment>
+	</Popover>
 {/if}

package/package/components/copilot/PredicateGen.svelte

@@ -8,7 +8,7 @@ import { sliceModules } from '../flows/flowStateUtils';
 import { dfs } from '../flows/dfs';
 import { yamlStringifyExceptKeys } from './utils';
 import { copilotInfo, stepInputCompletionEnabled } from '../../stores';
-import Popup from '../common/popup/Popup.svelte';
+import Popover from '../meltComponents/Popover.svelte';
 let loading = false;
 export let pickableProperties = undefined;
 let instructions = '';
@@ -70,12 +70,11 @@ Only return the expression without any wrapper. Do not explain or discuss.`;
 </script>
 
 {#if $copilotInfo.exists_ai_resource && $stepInputCompletionEnabled}
-	<Popup
+	<Popover
 		floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-		containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
-		let:close
+		contentClasses="p-4 flex w-96"
 	>
-		<svelte:fragment slot="button">
+		<svelte:fragment slot="trigger">
 			<Button
 				color={loading ? 'red' : 'light'}
 				size="xs"
@@ -89,7 +88,7 @@ Only return the expression without any wrapper. Do not explain or discuss.`;
 				on:click={loading ? () => abortController?.abort() : undefined}
 			/>
 		</svelte:fragment>
-		<div class="flex w-96">
+		<svelte:fragment slot="content" let:close>
 			<input
 				bind:this={instructionsField}
 				type="text"
@@ -97,7 +96,7 @@ Only return the expression without any wrapper. Do not explain or discuss.`;
 				bind:value={instructions}
 				on:keypress={({ key }) => {
 					if (key === 'Enter' && instructions.length > 0) {
-						close(instructionsField || null)
+						close()
 						generatePredicate()
 					}
 				}}
@@ -112,12 +111,12 @@ Only return the expression without any wrapper. Do not explain or discuss.`;
 				aria-label="Generate"
 				iconOnly
 				on:click={() => {
-					close(instructionsField || null)
+					close()
 					generatePredicate()
 				}}
 				disabled={instructions.length == 0}
 				startIcon={{ icon: Wand2 }}
 			/>
-		</div>
-	</Popup>
+		</svelte:fragment>
+	</Popover>
 {/if}

package/package/components/copilot/RegexGen.svelte

@@ -2,7 +2,7 @@
 import { Button } from '../common';
 import { getNonStreamingCompletion } from './lib';
 import { sendUserToast } from '../../toast';
-import Popup from '../common/popup/Popup.svelte';
+import Popover from '../meltComponents/Popover.svelte';
 import { copilotInfo } from '../../stores';
 import { autoPlacement } from '@floating-ui/core';
 import { ExternalLink, HistoryIcon, Wand2 } from 'lucide-svelte';
@@ -81,7 +81,7 @@ function clearPromptHistory() {
 }
 </script>
 
-<Popup
+<Popover
 	floatingConfig={{
 		middleware: [
 			autoPlacement({
@@ -89,9 +89,8 @@ function clearPromptHistory() {
 			})
 		]
 	}}
-	let:close
 >
-	<svelte:fragment slot="button">
+	<svelte:fragment slot="trigger">
 		<Button
 			title="Generate regexes from prompt"
 			btnClasses="text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
@@ -105,67 +104,69 @@ function clearPromptHistory() {
 			on:click={genLoading ? () => abortController?.abort() : () => {}}
 		/>
 	</svelte:fragment>
-	<div class="block text-primary z-[2000]">
-		{#if $copilotInfo.exists_ai_resource}
-			<div class="flex flex-col gap-4">
-				<div class="flex w-96">
-					<input
-						type="text"
-						bind:this={input}
-						bind:value={funcDesc}
-						on:keypress={({ key }) => {
-							if (key === 'Enter' && funcDesc?.length > 0) {
-								close(input || null)
+	<svelte:fragment slot="content" let:close>
+		<div class="block text-primary p-4">
+			{#if $copilotInfo.exists_ai_resource}
+				<div class="flex flex-col gap-4">
+					<div class="flex w-96">
+						<input
+							type="text"
+							bind:this={input}
+							bind:value={funcDesc}
+							on:keypress={({ key }) => {
+								if (key === 'Enter' && funcDesc?.length > 0) {
+									close()
+									onGenerate()
+								}
+							}}
+							placeholder={'Describe what the regex should doww'}
+						/>
+						<Button
+							size="xs"
+							color="light"
+							buttonType="button"
+							btnClasses="!ml-2 text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+							aria-label="Generate"
+							on:click={() => {
+								close()
 								onGenerate()
-							}
-						}}
-						placeholder={'Describe what the regex should do'}
-					/>
-					<Button
-						size="xs"
-						color="light"
-						buttonType="button"
-						btnClasses="!ml-2 text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
-						aria-label="Generate"
-						on:click={() => {
-							close(input || null)
-							onGenerate()
-						}}
-						disabled={funcDesc?.length <= 0}
-						iconOnly
-						startIcon={{ icon: Wand2 }}
-					/>
-				</div>
-				{#if promptHistory.length > 0}
-					<div class="w-96 flex flex-col gap-1">
-						{#each promptHistory as p}
-							<Button
-								size="xs2"
-								color="light"
-								btnClasses="justify-start overflow-x-scroll no-scrollbar"
-								startIcon={{ icon: HistoryIcon, classes: 'shrink-0' }}
-								on:click={() => {
-									funcDesc = p
-								}}>{p}</Button
-							>
-						{/each}
-						<button
-							class="underline text-xs text-start px-2 text-secondary font-normal"
-							on:click={clearPromptHistory}>clear history</button
-						>
+							}}
+							disabled={funcDesc?.length <= 0}
+							iconOnly
+							startIcon={{ icon: Wand2 }}
+						/>
 					</div>
-				{/if}
-			</div>
-		{:else}
-			<p class="text-sm">
-				Enable Windmill AI in the <a
-					href="{base}/workspace_settings?tab=ai"
-					target="_blank"
-					class="inline-flex flex-row items-center gap-1"
-				>
-					workspace settings <ExternalLink size={16} />
-				</a>
-			</p>
-		{/if}
-	</div>
-</Popup>
+					{#if promptHistory.length > 0}
+						<div class="w-96 flex flex-col gap-1">
+							{#each promptHistory as p}
+								<Button
+									size="xs2"
+									color="light"
+									btnClasses="justify-start overflow-x-scroll no-scrollbar"
+									startIcon={{ icon: HistoryIcon, classes: 'shrink-0' }}
+									on:click={() => {
+										funcDesc = p
+									}}>{p}</Button
+								>
+							{/each}
+							<button
+								class="underline text-xs text-start px-2 text-secondary font-normal"
+								on:click={clearPromptHistory}>clear history</button
+							>
+						</div>
+					{/if}
+				</div>
+			{:else}
+				<p class="text-sm">
+					Enable Windmill AI in the <a
+						href="{base}/workspace_settings?tab=ai"
+						target="_blank"
+						class="inline-flex flex-row items-center gap-1"
+					>
+						workspace settings <ExternalLink size={16} />
+					</a>
+				</p>
+			{/if}
+		</div>
+	</svelte:fragment>
+</Popover>