windmill-components 1.623.1 → 1.642.0

package/package/components/settings/PremiumInfo.svelte

@@ -6,10 +6,10 @@ import { WorkspaceService, UserService } from '../../gen';
 import { workspaceStore } from '../../stores';
 import { Button } from '../common';
 import Tooltip from '../Tooltip.svelte';
+import SettingsPageHeader from './SettingsPageHeader.svelte';
 import { ExternalLink, Pen, X } from 'lucide-svelte';
 import Section from '../Section.svelte';
 import Range from '../Range.svelte';
-import Label from '../Label.svelte';
 import Modal from '../common/modal/Modal.svelte';
 import { slide } from 'svelte/transition';
 export let plan;
@@ -50,12 +50,13 @@ async function loadPremiumInfo() {
     const info = await WorkspaceService.getPremiumInfo({ workspace: $workspaceStore });
     const developerNb = users?.filter((x) => !x.operator)?.length ?? 0;
     const operatorNb = users?.filter((x) => x.operator)?.length ?? 0;
+    const usage = info.usage ?? 0;
     const seatsFromUsers = Math.ceil(developerNb + operatorNb / 2);
-    const seatsFromExtraComps = Math.max(Math.ceil((info.usage ?? 0) / 10000) - seatsFromUsers, 0);
+    const seatsFromExtraComps = Math.max(Math.ceil(usage / 10000) - seatsFromUsers, 0);
     const usedSeats = seatsFromUsers + seatsFromExtraComps;
     premiumInfo = {
         ...info,
-        usage: info.usage ?? 0,
+        usage,
         owner: info.owner,
         developerNb,
         operatorNb,
@@ -82,8 +83,9 @@ async function setThresholdAlert() {
         sendUserToast('Threshold alert updated');
     }
 }
-let estimatedDevs = 1;
+let estimatedDevsRaw = 1;
 let estimatedOps = 0;
+$: estimatedDevs = Math.max(1, estimatedDevsRaw);
 $: estimatedSeats = estimatedDevs + Math.ceil(estimatedOps / 2);
 let estimatedExecs = 1;
 function updateExecs() {
@@ -92,6 +94,7 @@ function updateExecs() {
     }
 }
 $: estimatedSeats && updateExecs();
+const formatNumber = (value) => value.toLocaleString('en-US');
 </script>
 
 <Modal bind:open={thresholdAlertOpen} title="Threshold alert">
@@ -117,20 +120,19 @@ $: estimatedSeats && updateExecs();
 
 <div class="flex flex-col gap-4 mt-8">
 	<div class="flex flex-col gap-1">
-		<div class=" text-primary text-lg font-semibold">
-			{#if premiumInfo?.premium && plan}
-				Plan: {capitalize(plan)} plan{plan === 'team' ? ' (usage-based)' : ''}
-			{:else}
-				Plan: Free plan
-			{/if}
-		</div>
+		<SettingsPageHeader
+			title={premiumInfo?.premium && plan
+				? `Plan: ${capitalize(plan)} plan${plan === 'team' ? ' (usage-based)' : ''}`
+				: 'Plan: Free plan'}
+			class="mb-0"
+		/>
 		{#if premiumInfo?.status === 'past_due'}
 			<p class="text-red-500 text-base">
 				{#if premiumInfo.max_tolerated_executions === undefined || premiumInfo.usage > premiumInfo.max_tolerated_executions}
 					Your last invoice is unpaid, you cannot run any more jobs. Please update your payment
-					method in the customer portal to continue running jobs.
+					method in the Customer Portal to continue running jobs.
 				{:else}
-					Your last invoice is unpaid. Please update your payment method in the customer portal to
+					Your last invoice is unpaid. Please update your payment method in the Customer Portal to
 					prevent the interruption of your job executions.
 				{/if}
 			</p>
@@ -205,78 +207,125 @@ $: estimatedSeats && updateExecs();
 						<tbody class="divide-y">
 							<tr>
 								<Cell first>
-									Developers
-									<Tooltip>
-										Actual pricing is calculated on the MAXIMUM number of users in a given billing
-										period, see the customer portal for more info.
-									</Tooltip>
+									<div class="flex flex-col gap-0.5">
+										<div class="font-medium">Developers</div>
+										<p class="text-xs text-secondary">
+											Calculated on the MAXIMUM number of users in a given billing
+											period, see the Customer Portal for more info.
+										</p>
+									</div>
 								</Cell>
 								<Cell last numeric>
-									<div class="text-base">
-										{premiumInfo.developerNb}
+									<div class="text-sm text-secondary">
+										{formatNumber(premiumInfo.developerNb)}
 									</div>
 								</Cell>
 							</tr>
 							<tr>
 								<Cell first>
-									Operators
-									<Tooltip>
-										Actual pricing is calculated on the MAXIMUM number of operators in a given
-										billing period, see the customer portal for more info.
-									</Tooltip>
+									<div class="flex flex-col gap-0.5">
+										<div class="font-medium">Operators</div>
+										<p class="text-xs text-secondary">
+											Calculated on the MAXIMUM number of operators in a given
+											billing period, see the Customer Portal for more info.
+										</p>
+									</div>
 								</Cell>
 								<Cell last numeric>
-									<div class="text-base">
-										{premiumInfo.operatorNb}
+									<div class="text-sm text-secondary">
+										{formatNumber(premiumInfo.operatorNb)}
 									</div>
 								</Cell>
 							</tr>
-							<tr>
-								<Cell first><div class="font-semibold">Number of seats for users</div></Cell>
+							<tr class="bg-slate-50 dark:bg-slate-900/40">
+								<Cell first>
+									<div class="flex flex-col gap-0.5">
+										<div class="font-semibold text-sm">Seats from users</div>
+										<p class="text-xs text-secondary">
+											1 developer = 1 seat, 2 operators = 1 seat.
+										</p>
+										<p class="text-[11px] text-secondary font-mono">
+											u = ceil({formatNumber(premiumInfo.developerNb)} + {formatNumber(premiumInfo.operatorNb)}/2)
+											= {formatNumber(premiumInfo.seatsFromUsers)}
+										</p>
+									</div>
+								</Cell>
 								<Cell last numeric>
-									<div class="text-base font-bold">
-										u = ceil({premiumInfo.developerNb} + {premiumInfo.operatorNb}/2) = {premiumInfo.seatsFromUsers}
+									<div class="text-base font-bold text-primary">
+										{formatNumber(premiumInfo.seatsFromUsers)}
 									</div>
 								</Cell>
 							</tr>
 							<tr>
-								<Cell first>Computations executed this month</Cell>
+								<Cell first>
+									<div class="flex flex-col gap-0.5">
+										<div class="font-semibold">Executions this month</div>
+										<p class="text-xs text-secondary">
+											One execution equals one job
+											up to 1 second on a worker with 2GB of memory, with each additional
+											second counting as an extra execution.
+										</p>
+									</div>
+								</Cell>
 								<Cell last numeric>
-									<div class="text-base">
-										{premiumInfo.usage}
+									<div class="text-sm text-secondary">
+										{formatNumber(premiumInfo.usage)}
 									</div>
 								</Cell>
 							</tr>
 							<tr>
-								<Cell first>Included computations with users (10k per user seat)</Cell>
+								<Cell first>
+									<div class="flex flex-col gap-0.5">
+										<div class="font-semibold">Included executions from user seats</div>
+										<p class="text-xs text-secondary">
+											Each seat includes 10,000 executions per month.
+										</p>
+									</div>
+								</Cell>
 								<Cell last numeric>
-									<div class="text-base">
-										- {premiumInfo.seatsFromUsers * 10000}
+									<div class="text-sm text-secondary">
+										- {formatNumber(premiumInfo.seatsFromUsers * 10000)}
 									</div>
 								</Cell>
 							</tr>
-							<tr>
-								<Cell first
-									><div class="font-semibold">Number of seats for extra computations</div></Cell
-								>
+							<tr class="bg-slate-50 dark:bg-slate-900/40">
+								<Cell first>
+									<div class="flex flex-col gap-0.5">
+										<div class="font-semibold text-sm">Extra seats from computations</div>
+										<p class="text-xs text-secondary">
+											Additional seats created by executions beyond the included quota.
+										</p>
+										<p class="text-[11px] text-secondary font-mono">
+											c = ceil(max(0, {formatNumber(premiumInfo.usage)} -
+											{formatNumber(premiumInfo.seatsFromUsers * 10000)}) / 10,000) =
+											{formatNumber(premiumInfo.seatsFromExtraComps)}
+										</p>
+									</div>
+								</Cell>
 								<Cell last numeric>
-									<div class="text-base font-bold">
-										c = ceil({Math.max(0, premiumInfo.usage - premiumInfo.seatsFromUsers * 10000)} /
-										10 000) = {premiumInfo.seatsFromExtraComps}
+									<div class="text-base font-bold text-primary">
+										{formatNumber(premiumInfo.seatsFromExtraComps)}
 									</div>
 								</Cell>
 							</tr>
-							<tr>
-								<Cell first
-									><div class="font-semibold"
-										>Used seats <Tooltip
-											>Highest between seats from developers + operators and seats from computations
-										</Tooltip></div
-									></Cell
-								>
+							<tr class="bg-slate-100 dark:bg-slate-900/60">
+								<Cell first>
+									<div class="flex flex-col gap-0.5">
+										<div class="font-semibold text-sm flex items-center gap-1">
+											Used seats (billed)
+										</div>
+										<p class="text-xs text-secondary">
+											Highest between seats from 'Developers + Operators' and 'Seats from executions'.
+											This is the number of seats used for billing this month.
+										</p>
+										<p class="text-[11px] text-secondary font-mono">
+											u + c = {formatNumber(premiumInfo.usedSeats)}
+										</p>
+									</div>
+								</Cell>
 								<Cell last numeric>
-									<div class="text-base font-bold">
-										u + c = {premiumInfo.usedSeats}
+									<div class="text-base font-extrabold text-primary">
+										{formatNumber(premiumInfo.usedSeats)}
 									</div>
 								</Cell>
 							</tr>
@@ -295,68 +344,145 @@ $: estimatedSeats && updateExecs();
 </div>
 
 <Section collapsable label="Cost estimator">
-	<div class="border p-4 rounded-md" transition:slide>
-		<Label label="Number of developers">
-			<Range min={1} max={20} bind:value={estimatedDevs} hideInput />
-		</Label>
-		<Label label="Number of operators">
-			<Range min={0} max={20} bind:value={estimatedOps} hideInput />
-		</Label>
-		<Label label="Number of executions">
-			<Range
-				min={estimatedSeats}
-				max={100}
-				bind:value={estimatedExecs}
-				format={(v) => `${v * 10}k`}
-				hideInput
-			/>
-		</Label>
-		<div class="mt-4 text-base">
-			<div class="flex flex-row justify-between">
-				<div>Seats for users = {estimatedDevs} devs + {estimatedOps} ops / 2</div>
-				<div>{pluralize(estimatedSeats, 'seat')}</div>
+	<div class="border rounded-md p-4 md:p-5 space-y-5" transition:slide>
+		<div class="flex flex-col gap-1">
+			<div class="text-sm font-semibold text-primary">Estimate your monthly cost</div>
+			<p class="text-xs text-secondary max-w-xl">
+				This is a rough estimate based on your expected team size and workload. Actual billing is based
+				on the maximum number of users and executions in a given month.
+			</p>
+		</div>
+
+		<div class="grid gap-6 md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)] items-start">
+			<!-- Inputs -->
+			<div class="space-y-4">
+				<div class="space-y-1.5">
+					<div class="flex items-center justify-between gap-2">
+						<div class="text-sm font-medium text-primary">Developers</div>
+						<div class="text-xs text-secondary">
+							<span class="font-semibold">{estimatedDevs}</span> dev{estimatedDevs === 1 ? '' : 's'}
+						</div>
+					</div>
+					<Range min={1} max={20} bind:value={estimatedDevsRaw} hideInput />
+				</div>
+
+				<div class="space-y-1.5">
+					<div class="flex items-center justify-between gap-2">
+						<div class="text-sm font-medium text-primary">Operators</div>
+						<div class="text-xs text-secondary">
+							<span class="font-semibold">{estimatedOps}</span> operator{estimatedOps === 1 ? '' : 's'}
+						</div>
+					</div>
+					<Range min={0} max={20} bind:value={estimatedOps} hideInput />
+					<p class="text-[11px] text-secondary">
+						2 operators = 1 seat
+					</p>
+				</div>
+
+				<div class="space-y-1.5">
+					<div class="flex items-center justify-between gap-2">
+						<div class="flex items-center gap-1.5">
+							<div class="text-sm font-medium text-primary">Monthly executions</div>
+							<Tooltip>
+								One execution equals one job up to 1 second on a virtual CPU with 2 GB of memory, with
+								each additional second counting as an extra execution.
+							</Tooltip>
+						</div>
+						<div class="text-xs text-secondary">
+							<span class="font-semibold">{estimatedExecs * 10}k</span> executions / month
+						</div>
+					</div>
+					<Range
+						min={estimatedSeats}
+						max={100}
+						bind:value={estimatedExecs}
+						format={(v) => `${v * 10}k`}
+						hideInput
+					/>
+					<p class="text-[11px] text-secondary">
+						Each seat includes 10k executions per month.
+					</p>
+				</div>
 			</div>
-			<div class="flex flex-row justify-between">
-				<div
-					>Extra computations = {estimatedExecs * 10}k execs - {estimatedSeats * 10}k included with
-					users</div
-				>
+
+			<!-- Breakdown -->
+			{#if estimatedSeats}
 				<div
-					>{(estimatedExecs - estimatedSeats) * 10}k extra execs = {pluralize(
-						estimatedExecs - estimatedSeats,
-						'seat'
-					)}</div
+					class="rounded-md bg-slate-50 dark:bg-slate-900/40 border border-slate-200 dark:border-slate-800 p-4 space-y-3 text-sm"
 				>
-			</div>
-			<div class="flex flex-row justify-between font-medium items-center">
-				<div>Total</div>
-				<div class="flex flex-col items-end">
-					<div>
-						{pluralize(estimatedSeats + (estimatedExecs - estimatedSeats), 'seat')} = {(estimatedSeats +
-							(estimatedExecs - estimatedSeats)) *
-							10}$ / month
+					<div class="flex items-center justify-between">
+						<div class="text-secondary">Seats from users</div>
+						<div class="font-medium">
+							{pluralize(estimatedSeats, 'seat')}
+						</div>
+					</div>
+
+					<div class="flex items-center justify-between text-xs text-secondary">
+						<div>
+							Based on {estimatedDevs} dev{estimatedDevs === 1 ? '' : 's'} and
+							{` ${estimatedOps} operator${estimatedOps === 1 ? '' : 's'}`}
+						</div>
+					</div>
+
+					<hr class="border-slate-200 dark:border-slate-800" />
+
+					<div class="flex items-center justify-between">
+						<div class="text-secondary">Included executions</div>
+						<div class="font-medium">{estimatedSeats * 10}k</div>
 					</div>
+
+					<div class="flex items-center justify-between">
+						<div class="text-secondary">Extra executions</div>
+						<div class="font-medium">
+							{(estimatedExecs - estimatedSeats) * 10}k
+						</div>
+					</div>
+
+					<div class="flex items-center justify-between text-xs text-secondary">
+						<div>Charged as additional seats</div>
+						<div>
+							≈ {pluralize(estimatedExecs - estimatedSeats, 'seat')}
+						</div>
+					</div>
+
+					<hr class="border-slate-200 dark:border-slate-800" />
+
+					<div class="flex items-center justify-between font-semibold text-base">
+						<div>Total estimated seats</div>
+						<div class="text-right">
+							<div>
+								{pluralize(estimatedSeats + (estimatedExecs - estimatedSeats), 'seat')}
+							</div>
+							<div class="text-primary text-sm">
+								{(estimatedSeats + (estimatedExecs - estimatedSeats)) * 10}$ / month
+							</div>
+						</div>
+					</div>
+
 					{#if premiumInfo?.premium && plan === 'team'}
 						<button
-							class="text-xs text-blue-500 underline"
+							class="mt-1 text-[11px] text-blue-500 underline self-start"
 							on:click={() => {
 								newThresholdAlertAmount = (estimatedSeats + (estimatedExecs - estimatedSeats)) * 10
 								thresholdAlertOpen = true
 							}}
 						>
-							Setup threshold email alert
+							Use this amount for a threshold email alert
 						</button>
 					{/if}
+
+					<div class="mt-2 h-4 text-[11px]">
+						{#if (estimatedSeats + (estimatedExecs - estimatedSeats)) * 10 > 700}
+							<a
+								class="text-teal-600 font-semibold underline block text-right"
+								href="https://www.windmill.dev/pricing"
+								target="_blank"
+							>
+								Higher usage? Explore Cloud Enterprise
+							</a>
+						{/if}
+					</div>
 				</div>
-			</div>
-			{#if (estimatedSeats + (estimatedExecs - estimatedSeats)) * 10 > 700}
-				<a
-					class="mt-4 text-teal-600 font-semibold text-center block underline"
-					href="https://www.windmill.dev/pricing"
-					target="_blank"
-				>
-					You should consider subscribing to Cloud Enterprise
-				</a>
 			{/if}
 		</div>
 	</div>
@@ -377,15 +503,25 @@ $: estimatedSeats && updateExecs();
 				{planTitle}
 			</h2>
 			<ul class="list-disc text-sm p-4">
-				{#each planDesc as item}
-					<li class="mt-2">{@html item}</li>
+				{#each planDesc as item, i}
+					{#if planTitle === 'Team' && i === 1}
+						<li class="mt-2">
+							Every seat includes <b>10 000</b> executions
+							<Tooltip>
+								One execution equals one job up to 1 second on a virtual CPU with 2 GB of memory, with
+								each additional second counting as an extra execution.
+							</Tooltip>
+						</li>
+					{:else}
+						<li class="mt-2">{@html item}</li>
+					{/if}
 				{/each}
 			</ul>
 
 			<div class="grow"></div>
-			{#if planTitle == 'Team'}
-				{#if plan != 'team'}
-					<div class="mt-4 mx-auto">
+			<div class="mt-4 mx-auto flex flex-col items-center text-center min-h-[2.5rem]">
+				{#if planTitle == 'Team'}
+					{#if plan != 'team'}
 						{#if plan != 'enterprise'}
 							<Button
 								size="xs"
@@ -395,17 +531,17 @@ $: estimatedSeats && updateExecs();
 								Upgrade to Team plan</Button
 							>
 						{:else}
-							<div class="mx-auto font-semibold text-center">
-								Cancel your plan in the customer portal then upgrade to a team plan
+							<div class="text-md font-semibold">
+								Cancel your plan in the Customer Portal then upgrade to a team plan
 							</div>
 						{/if}
-					</div>
-				{:else}
-					<div class="mx-auto text-md font-semibold">Workspace is on the team plan</div>
-				{/if}
-			{:else if planTitle == 'Enterprise'}
-				{#if plan != 'enterprise'}
-					<div class="mt-4 mx-auto">
+					{:else}
+						<div class="text-md font-semibold">
+							Workspace is on the team plan
+						</div>
+					{/if}
+				{:else if planTitle == 'Enterprise'}
+					{#if plan != 'enterprise'}
 						<Button
 							size="xs"
 							color="bg-teal-600 text-white"
@@ -414,19 +550,23 @@ $: estimatedSeats && updateExecs();
 						>
 							See more
 						</Button>
-					</div>
-				{:else}
-					<div class="mx-auto text-md font-semibold">Workspace is on enterprise plan</div>
-				{/if}
-			{:else if planTitle === 'Free'}
-				{#if plan}
-					<div class="mx-auto font-semibold text-center">
-						Cancel your plan in the customer portal to downgrade to the free plan
-					</div>
-				{:else}
-					<div class="mx-auto font-semibold text-center"> Workspace is on the free plan </div>
+					{:else}
+						<div class="text-md font-semibold">
+							Workspace is on enterprise plan
+						</div>
+					{/if}
+				{:else if planTitle === 'Free'}
+					{#if plan}
+						<div class="text-md font-semibold">
+							Cancel your plan in the Customer Portal to downgrade to the free plan
+						</div>
+					{:else}
+						<div class="font-semibold">
+							Workspace is on the free plan
+						</div>
+					{/if}
 				{/if}
-			{/if}
+			</div>
 		</div>
 	{/each}
 </div>

package/package/components/settings/SettingsPageHeader.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">import Description from '../Description.svelte';
+import { twMerge } from 'tailwind-merge';
+let { title, description, link, actions, class: className = '' } = $props();
+</script>
+
+<div class={twMerge('flex flex-col gap-2 mb-6', className)}>
+	<div class="flex items-center justify-between gap-4">
+		<div class="flex-1 min-w-0">
+			<h2 class="text-lg font-semibold text-emphasis">{title}</h2>
+		</div>
+		{#if actions}
+			<div class="flex items-center gap-2 shrink-0">
+				{@render actions()}
+			</div>
+		{/if}
+	</div>
+	{#if description}
+		<Description {link}>
+			{@html description}
+		</Description>
+	{/if}
+</div>

package/package/components/settings/SettingsPageHeader.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    title: string;
+    description?: string;
+    link?: string;
+    actions?: import('svelte').Snippet;
+    class?: string;
+}
+declare const SettingsPageHeader: import("svelte").Component<Props, {}, "">;
+type SettingsPageHeader = ReturnType<typeof SettingsPageHeader>;
+export default SettingsPageHeader;

package/package/components/settings/UserAIPromptsSettings.svelte

@@ -1,31 +1,72 @@
 <script lang="ts">import { storeLocalSetting } from '../../utils';
-import CustomAIPrompts from '../copilot/CustomAIPrompts.svelte';
 import Button from '../common/button/Button.svelte';
 import { sendUserToast } from '../../toast';
 import { getUserCustomPrompts } from '../../aiStore';
-import Section from '../Section.svelte';
+import Label from '../Label.svelte';
+import AIPromptsModal from './AIPromptsModal.svelte';
+import { ExternalLink, Settings } from 'lucide-svelte';
+import { userStore } from '../../stores';
 const USER_CUSTOM_PROMPTS_KEY = 'userCustomAIPrompts';
-let customPrompts = $state(getUserCustomPrompts());
+const userCustomPrompts = getUserCustomPrompts();
+let initialPrompts = $state({ ...userCustomPrompts });
+let customPrompts = $state({ ...userCustomPrompts });
+let modalOpen = $state(false);
 function save() {
     storeLocalSetting(USER_CUSTOM_PROMPTS_KEY, JSON.stringify(customPrompts));
+    initialPrompts = { ...customPrompts };
     sendUserToast('User AI prompts saved');
 }
+function reset() {
+    customPrompts = { ...initialPrompts };
+    sendUserToast('Reset to last saved state');
+}
 let hasPrompts = $derived(Object.values(customPrompts).some((p) => p?.trim().length > 0));
+let promptCount = $derived(Object.values(customPrompts).filter((p) => p?.trim().length > 0).length);
+let hasChanges = $derived(Array.from(new Set([...Object.keys(customPrompts), ...Object.keys(initialPrompts)])).some((key) => {
+    const currentValue = customPrompts[key] || '';
+    const initialValue = initialPrompts[key] || '';
+    return currentValue !== initialValue;
+}));
 </script>
 
 <div class="mt-4">
-	<Section label="Custom system prompts" collapsable animate>
-		{#snippet header()}
-			<div class="w-2 h-2 bg-blue-500 rounded-full ml-2 {hasPrompts ? '' : 'hidden'}"></div>
-		{/snippet}
-		<div>
-			<CustomAIPrompts
-				bind:customPrompts
-				description="These prompts are stored locally in your browser and apply in addition to the workspace-level prompts."
-			/>
-			<div class="flex flex-row justify-end mt-2">
-				<Button onclick={save}>Save</Button>
+	<Label label="Custom system prompts">
+		<div class="flex flex-col gap-4">
+			<p class="text-xs text-secondary">
+				Customize AI behavior with system prompts. These are stored locally in your browser and
+				apply in addition to {#if $userStore?.is_admin || $userStore?.is_super_admin}<a
+						href="/workspace_settings?tab=ai"
+						>workspace-level prompts <ExternalLink size={12} class="inline-block" /></a
+					>{:else}workspace-level prompts{/if}.
+			</p>
+
+			<div class="flex justify-between items-center">
+				<div class="flex items-center gap-2">
+					<Button
+						onclick={() => (modalOpen = true)}
+						variant="default"
+						unifiedSize="sm"
+						startIcon={{ icon: Settings }}
+					>
+						Configure AI prompts
+					</Button>
+					{#if hasPrompts}
+						<span class="text-xs text-secondary">({promptCount} configured)</span>
+					{/if}
+				</div>
+
+				{#if hasChanges}
+					<span class="text-xs text-yellow-600 dark:text-yellow-400"> Unsaved changes </span>
+				{/if}
 			</div>
 		</div>
-	</Section>
+	</Label>
 </div>
+
+<AIPromptsModal
+	bind:open={modalOpen}
+	bind:customPrompts
+	onSave={save}
+	onReset={reset}
+	{hasChanges}
+/>