windmill-components 1.613.5 → 1.623.1

package/package/components/settings/UserAIPromptsSettings.svelte

@@ -1,72 +1,31 @@
 <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 Label from '../Label.svelte';
-import AIPromptsModal from './AIPromptsModal.svelte';
-import { ExternalLink, Settings } from 'lucide-svelte';
-import { userStore } from '../../stores';
+import Section from '../Section.svelte';
 const USER_CUSTOM_PROMPTS_KEY = 'userCustomAIPrompts';
-const userCustomPrompts = getUserCustomPrompts();
-let initialPrompts = $state({ ...userCustomPrompts });
-let customPrompts = $state({ ...userCustomPrompts });
-let modalOpen = $state(false);
+let customPrompts = $state(getUserCustomPrompts());
 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">
-	<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}
+	<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>
 			</div>
 		</div>
-	</Label>
+	</Section>
 </div>
-
-<AIPromptsModal
-	bind:open={modalOpen}
-	bind:customPrompts
-	onSave={save}
-	onReset={reset}
-	{hasChanges}
-/>

package/package/components/settings/WorkspaceOperatorSettings.svelte

@@ -78,72 +78,89 @@ const allDisabled = $derived(Object.values(operatorWorkspaceSettings).every((val
 const allEnabled = $derived(Object.values(operatorWorkspaceSettings).every((value) => value === true));
 </script>
 
-<Section
-	label="Operator settings"
-	collapsable={true}
-	tooltip="Configure the operator visibility settings for your workspace. Toggle the settings you want to enable."
-	description="Configure the operator visibility settings for your workspace. Toggle the settings you want to enable."
->
-	{#snippet action()}
-		<Button
-			on:click={saveSettings}
-			startIcon={{ icon: SaveIcon }}
-			disabled={!isChanged}
-			variant="accent"
-		>
-			Save operator settings
-		</Button>
-	{/snippet}
+<div class="mt-6">
+	<Section
+		label="Operator settings"
+		collapsable={true}
+		tooltip="Configure the operator visibility settings for your workspace. Toggle the settings you want to enable."
+	>
+		<div class="flex flex-col gap-4 my-4">
+			<div class="flex flex-col gap-1">
+				<div class="text-primary text-xs">
+					Configure the operator visibility settings for your workspace. Toggle the settings you
+					want to enable.
+				</div>
+			</div>
+		</div>
 
-	<DataTable tableFixed={true} size="xs">
-		<Head>
-			<tr>
-				<Cell head first>Section</Cell>
-				<Cell head>Description</Cell>
-				<Cell head last>
-					<ToggleButtonGroup
-						bind:selected={
-							() => (allDisabled ? 'false' : allEnabled ? 'true' : ''),
-							(v) => {
-								Object.keys(operatorWorkspaceSettings).forEach((key) => {
-									if (v === 'true') operatorWorkspaceSettings[key] = true
-									if (v === 'false') operatorWorkspaceSettings[key] = false
-								})
-							}
-						}
-					>
-						{#snippet children({ item })}
-							<ToggleButton icon={EyeIcon} small={true} value={'true'} label="Enable All" {item} />
-							<ToggleButton
-								icon={EyeOffIcon}
-								small={true}
-								value={'false'}
-								label="Disable All"
-								{item}
-							/>
-						{/snippet}
-					</ToggleButtonGroup>
-				</Cell>
-			</tr>
-		</Head>
-		<tbody class="divide-y bg-surface">
-			{#each Object.entries(descriptions) as [key, { title, description }]}
-				<tr>
-					<Cell first>{title}</Cell>
-					<Cell>{description}</Cell>
-					<Cell last class="pl-8">
-						<ToggleButtonGroup
-							selected={operatorWorkspaceSettings[key] ? 'on' : 'off'}
-							on:selected={({ detail }) => (operatorWorkspaceSettings[key] = detail === 'on')}
-						>
-							{#snippet children({ item })}
-								<ToggleButton icon={EyeIcon} small={true} value={'on'} label="On" {item} />
-								<ToggleButton icon={EyeOffIcon} small={true} value={'off'} label="Off" {item} />
-							{/snippet}
-						</ToggleButtonGroup>
-					</Cell>
-				</tr>
-			{/each}
-		</tbody>
-	</DataTable>
-</Section>
+		<div class="flex justify-end mb-2">
+			<div class="flex justify-end"></div>
+		</div>
+
+		<div class="flex flex-col">
+			<DataTable tableFixed={true} size="xs">
+				<Head>
+					<tr>
+						<Cell head first>Section</Cell>
+						<Cell head>Description</Cell>
+						<Cell head last>
+							<ToggleButtonGroup
+								bind:selected={
+									() => (allDisabled ? 'false' : allEnabled ? 'true' : ''),
+									(v) => {
+										Object.keys(operatorWorkspaceSettings).forEach((key) => {
+											if (v === 'true') operatorWorkspaceSettings[key] = true
+											if (v === 'false') operatorWorkspaceSettings[key] = false
+										})
+									}
+								}
+							>
+								{#snippet children({ item })}
+									<ToggleButton
+										icon={EyeIcon}
+										small={true}
+										value={'true'}
+										label="Enable All"
+										{item}
+									/>
+									<ToggleButton
+										icon={EyeOffIcon}
+										small={true}
+										value={'false'}
+										label="Disable All"
+										{item}
+									/>
+								{/snippet}
+							</ToggleButtonGroup>
+						</Cell>
+					</tr>
+				</Head>
+				<tbody class="divide-y bg-surface">
+					{#each Object.entries(descriptions) as [key, { title, description }]}
+						<tr>
+							<Cell first>{title}</Cell>
+							<Cell>{description}</Cell>
+							<Cell last class="pl-8">
+								<ToggleButtonGroup
+									selected={operatorWorkspaceSettings[key] ? 'on' : 'off'}
+									on:selected={({ detail }) => (operatorWorkspaceSettings[key] = detail === 'on')}
+								>
+									{#snippet children({ item })}
+										<ToggleButton icon={EyeIcon} small={true} value={'on'} label="On" {item} />
+										<ToggleButton icon={EyeOffIcon} small={true} value={'off'} label="Off" {item} />
+									{/snippet}
+								</ToggleButtonGroup>
+							</Cell>
+						</tr>
+					{/each}
+				</tbody>
+			</DataTable>
+		</div>
+
+		<div class="flex justify-end mt-4">
+			<Button on:click={saveSettings} startIcon={{ icon: SaveIcon }} disabled={!isChanged}>
+				Save
+			</Button>
+		</div>
+	</Section>
+</div>