windmill-components 1.623.1 → 1.623.2

package/package/components/settings/AIPromptsModal.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">import Modal2 from '../common/modal/Modal2.svelte';
+import Button from '../common/button/Button.svelte';
+import Label from '../Label.svelte';
+import TextInput from '../text_input/TextInput.svelte';
+import { AIMode } from '../copilot/chat/AIChatManager.svelte';
+const MAX_CUSTOM_PROMPT_LENGTH = 5000;
+let { open = $bindable(false), customPrompts = $bindable(), onSave, onReset, hasChanges, isWorkspaceSettings = false } = $props();
+const placeholders = {
+    [AIMode.SCRIPT]: 'Enter custom instructions for script generation and editing',
+    [AIMode.FLOW]: 'Enter custom instructions for workflow creation and automation',
+    [AIMode.APP]: 'Enter custom instructions for UI and app development',
+    [AIMode.NAVIGATOR]: 'Enter custom instructions for navigation and guidance',
+    [AIMode.API]: 'Enter custom instructions for API interactions and integrations',
+    [AIMode.ASK]: 'Enter custom instructions for general questions and assistance'
+};
+const modeLabels = {
+    [AIMode.SCRIPT]: 'Script Mode',
+    [AIMode.FLOW]: 'Flow Mode',
+    [AIMode.APP]: 'App Mode',
+    [AIMode.NAVIGATOR]: 'Navigator Mode',
+    [AIMode.API]: 'API Mode',
+    [AIMode.ASK]: 'Ask Mode'
+};
+function handleSave() {
+    onSave?.();
+    open = false;
+}
+function handleReset() {
+    onReset();
+}
+</script>
+
+<Modal2
+	bind:isOpen={open}
+	title="Customize AI System Prompts"
+	fixedWidth="md"
+	fixedHeight="xxl"
+	target="#content"
+>
+	<div class="flex flex-col gap-6 h-full px-1 w-full">
+		<div class="grow min-h-0 overflow-y-auto" style="scrollbar-gutter: stable;">
+			<div class="text-xs text-secondary mb-6">
+				{#if isWorkspaceSettings}
+					Customize the system prompts for each AI mode. These prompts apply to all workspace
+					members.
+				{:else}
+					Customize the system prompts for each AI mode. These prompts are stored locally in your
+					browser and apply in addition to workspace-level prompts.
+				{/if}
+			</div>
+
+			{#each Object.values(AIMode) as mode}
+				<div class="flex flex-col gap-2 pb-4 last:border-b-0">
+					<Label label={modeLabels[mode]} for={`custom-prompt-${mode}`}>
+						<TextInput
+							bind:value={customPrompts[mode]}
+							underlyingInputEl="textarea"
+							inputProps={{
+								placeholder: placeholders[mode],
+								rows: 3,
+								maxlength: MAX_CUSTOM_PROMPT_LENGTH,
+								id: `custom-prompt-${mode}`
+							}}
+							class="min-h-12 resize-y"
+							size="sm"
+						/>
+						<div class="flex justify-end mt-1">
+							<span class="text-2xs text-hint">
+								{(customPrompts[mode] ?? '').length}/{MAX_CUSTOM_PROMPT_LENGTH} characters
+							</span>
+						</div>
+					</Label>
+				</div>
+			{/each}
+		</div>
+
+		<div class="flex justify-end gap-2">
+			<Button size="sm" variant="default" disabled={!hasChanges} onclick={handleReset}>
+				Reset
+			</Button>
+			{#if onSave}
+				<Button size="sm" variant="accent" disabled={!hasChanges} onclick={handleSave}>
+					Save Prompts
+				</Button>
+			{/if}
+		</div>
+	</div>
+</Modal2>

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

@@ -0,0 +1,11 @@
+interface Props {
+    open?: boolean;
+    customPrompts: Record<string, string>;
+    onSave?: () => void;
+    onReset: () => void;
+    hasChanges: boolean;
+    isWorkspaceSettings?: boolean;
+}
+declare const AIPromptsModal: import("svelte").Component<Props, {}, "open" | "customPrompts">;
+type AIPromptsModal = ReturnType<typeof AIPromptsModal>;
+export default AIPromptsModal;

package/package/components/settings/ChangeWorkspaceColor.svelte

@@ -71,7 +71,7 @@ async function changeWorkspaceColor() {
 	</p>
 </div>
 
-<Modal bind:open title="Change Workspace Color">
+<Modal bind:open title="Change workspace color">
 	<div class="flex flex-col gap-4">
 		<label class="block">
 			<span class="text-secondary text-sm">Workspace color</span>
@@ -91,14 +91,15 @@ async function changeWorkspaceColor() {
 		</label>
 	</div>
 
-	<svelte:fragment slot="actions">
+	{#snippet actions()}
 		<Button
 			size="sm"
+			variant="accent"
 			on:click={() => {
 				changeWorkspaceColor()
 			}}
 		>
 			Save
 		</Button>
-	</svelte:fragment>
+	{/snippet}
 </Modal>

package/package/components/settings/ChangeWorkspaceId.svelte

@@ -38,7 +38,7 @@ async function renameWorkspace() {
             }
         });
         open = false;
-        sendUserToast(`Renamed workspace to ${newName}. Reloading...`);
+        sendUserToast(`Moved workspace to ${newName}. Old workspace archived. Reloading...`);
         await new Promise((resolve) => setTimeout(resolve, 1000));
         window.location.href = '/workspace_settings?tab=general&workspace=' + newId;
     }
@@ -76,19 +76,23 @@ export let open = false;
 
 <Modal bind:open title="Change workspace ID">
 	<div class="flex flex-col gap-4">
-		<Alert type="warning" title="Warning">
-			Renaming the workspace may take a few minutes to complete. Once finished, please update your
-			webhook calls and adjust your CLI sync configuration accordingly.
+		<Alert type="warning" title="What happens">
+			<ul class="list-disc list-inside text-xs mt-1 space-y-1">
+				<li>All content (scripts, flows, apps, resources, etc.) moves to the new ID</li>
+				<li>Old workspace is archived with completed jobs, logs, and audit history</li>
+				<li>Running jobs will be canceled</li>
+			</ul>
+			<p class="text-xs mt-2">Remember to update webhook URLs and CLI sync config afterward.</p>
 		</Alert>
-		<p class="text-secondary text-sm"
-			>Current ID <br /> <span class="font-bold">{$workspaceStore ?? ''}</span></p
+		<p class="text-secondary text-xs"
+			>Current ID <br /> <span class="text-emphasis">{$workspaceStore ?? ''}</span></p
 		>
-		<label class="block">
-			<span class="text-secondary text-sm">New name</span>
+		<label class="flex flex-col gap-1">
+			<span class="text-emphasis text-xs">New name</span>
 			<input type="text" bind:value={newName} />
 		</label>
 		<label class="block">
-			<span class="text-secondary text-sm">New ID</span>
+			<span class="text-emphasis text-xs">New ID</span>
 			<input type="text" bind:value={newId} />
 			{#if errorId}
 				<div class="text-red-500 text-xs mt-1">{errorId}</div>
@@ -96,9 +100,10 @@ export let open = false;
 		</label>
 	</div>
 
-	<svelte:fragment slot="actions">
+	{#snippet actions()}
 		<Button
 			size="sm"
+			variant="accent"
 			disabled={checking || errorId.length > 0 || !newName || !newId}
 			{loading}
 			on:click={() => {
@@ -107,5 +112,5 @@ export let open = false;
 		>
 			Save
 		</Button>
-	</svelte:fragment>
+	{/snippet}
 </Modal>

package/package/components/settings/ChangeWorkspaceName.svelte

@@ -54,19 +54,20 @@ async function renameWorkspace() {
 <Modal bind:open title="Change workspace name">
 	<div class="flex flex-col gap-4 mt-4">
 		{#if currentName}
-			<p class="text-secondary text-sm"
-				>Current name <br /> <span class="font-bold">{currentName}</span></p
+			<p class="text-secondary text-xs"
+				>Current name <br /> <span class="text-emphasis">{currentName}</span></p
 			>
 		{/if}
-		<label class="block">
-			<span class="text-secondary text-sm">New name</span>
+		<label class="flex flex-col gap-1">
+			<span class="text-emphasis text-xs">New name</span>
 			<input type="text" bind:value={newName} />
 		</label>
 	</div>
 
-	<svelte:fragment slot="actions">
+	{#snippet actions()}
 		<Button
 			size="sm"
+			variant="accent"
 			disabled={!newName}
 			on:click={() => {
 				renameWorkspace()
@@ -74,5 +75,5 @@ async function renameWorkspace() {
 		>
 			Save
 		</Button>
-	</svelte:fragment>
+	{/snippet}
 </Modal>

package/package/components/settings/CreateToken.svelte

@@ -16,7 +16,7 @@ import TextInput from '../text_input/TextInput.svelte';
 import Select from '../select/Select.svelte';
 import { mcpEndpointTools } from '../../mcpEndpointTools';
 import InfoIcon from 'lucide-svelte/icons/info';
-let { showMcpMode = false, defaultNewTokenWorkspace, scopes, onTokenCreated, newTokenLabel = $bindable(undefined) } = $props();
+let { showMcpMode = false, defaultNewTokenWorkspace, scopes, onTokenCreated, newTokenLabel = $bindable(undefined), displayCreateToken = true } = $props();
 // MCP clients do not allow names longer than 60 characters, here we use 55 because final tool name server side will add ~5 characters
 const MAX_PATH_LENGTH = 55;
 let newToken = $state(undefined);
@@ -135,7 +135,7 @@ async function createToken(mcpMode = false) {
     }
 }
 const workspaces = $derived(ensureCurrentWorkspaceIncluded($userWorkspaces, $workspaceStore));
-const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorkspace}/sse?token=`);
+const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorkspace}/mcp?token=`);
 const warning = $derived(newMcpScope === 'all'
     ? 'Create your first scripts or flows to make them available via MCP.'
     : newMcpScope === 'favorites'
@@ -628,11 +628,11 @@ function clearAllEndpoints() {
 		</div>
 	</div>
 
-	{#if newToken}
+	{#if newToken && displayCreateToken}
 		<TokenDisplay token={newToken} />
 	{/if}
 
-	{#if newMcpToken}
+	{#if newMcpToken && displayCreateToken}
 		<TokenDisplay token={newMcpToken} mcpUrl={`${mcpBaseUrl}${newMcpToken}`} />
 	{/if}
 </div>

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}
+/>

package/package/components/settings/WorkspaceOperatorSettings.svelte

@@ -78,89 +78,72 @@ const allDisabled = $derived(Object.values(operatorWorkspaceSettings).every((val
 const allEnabled = $derived(Object.values(operatorWorkspaceSettings).every((value) => value === true));
 </script>
 
-<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>
+<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="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>
+	<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>