windmill-components 1.655.2 → 1.665.1

package/package/components/workspaceSettings/CreateWorkspace.svelte

@@ -33,6 +33,10 @@ let errorUser = $state('');
 let aiKey = $state('');
 let codeCompletionEnabled = $state(true);
 let checking = $state(false);
+let createLoading = $state(false);
+let aiSetupLoading = $state(false);
+let creationStep = $state('details');
+let createdWorkspaceId = $state(undefined);
 let workspaceColor = $state(undefined);
 let colorEnabled = $state(false);
 function generateRandomColor() {
@@ -61,6 +65,52 @@ let forkCreationLoading = $state(false);
 let forkCreationError = $state('');
 let errorMsgs = $state([]);
 let failedSyncJobs = $state([]);
+function getErrorMessage(error) {
+    return (error?.body?.error?.message ||
+        error?.body?.message ||
+        (typeof error?.body === 'string' ? error.body : null) ||
+        error?.message ||
+        'Unknown error');
+}
+function hasEffectiveAi(copilotInfo) {
+    return Object.keys(copilotInfo.providers ?? {}).length > 0;
+}
+async function finishWorkspaceSetup(workspaceId) {
+    usersWorkspaceStore.set(await WorkspaceService.listUserWorkspaces());
+    switchWorkspace(workspaceId);
+    goto(rd ?? '/');
+}
+async function getWorkspaceUsername(workspaceId) {
+    if (!automateUsernameCreation) {
+        return username;
+    }
+    const user = await UserService.whoami({
+        workspace: workspaceId
+    });
+    return user.username;
+}
+async function maybeShowAiSetupStep(workspaceId) {
+    try {
+        const copilotInfo = await WorkspaceService.getCopilotInfo({
+            workspace: workspaceId
+        });
+        if (hasEffectiveAi(copilotInfo)) {
+            await finishWorkspaceSetup(workspaceId);
+            return;
+        }
+    }
+    catch (error) {
+        console.error('Failed to check effective AI configuration for new workspace', error);
+        sendUserToast('Workspace created, but Windmill AI availability could not be verified. You can configure it later in Workspace settings.', true);
+        await finishWorkspaceSetup(workspaceId);
+        return;
+    }
+    createdWorkspaceId = workspaceId;
+    creationStep = 'ai';
+    aiKey = '';
+    codeCompletionEnabled = true;
+    selected = 'openai';
+}
 async function fetchFailedSyncJobs(jobs) {
     let ret = [];
     for (const job of jobs) {
@@ -145,17 +195,22 @@ async function createOrForkWorkspace() {
             }
             forkCreationLoading = false;
             sendUserToast(`Successfully forked workspace ${$workspaceStore} as: wm-fork-${id}`);
+            await finishWorkspaceSetup(prefixed_id);
         }
         else {
             sendUserToast('No workspace selected, cannot fork non-existent workspace', true);
         }
     }
     else {
-        await createWorkspace();
+        createLoading = true;
+        try {
+            const workspaceId = await createWorkspace();
+            await maybeShowAiSetupStep(workspaceId);
+        }
+        finally {
+            createLoading = false;
+        }
     }
-    usersWorkspaceStore.set(await WorkspaceService.listUserWorkspaces());
-    switchWorkspace(isFork ? prefixed_id : id);
-    goto(rd ?? '/');
 }
 async function createWorkspace() {
     await WorkspaceService.createWorkspace({
@@ -172,17 +227,19 @@ async function createWorkspace() {
             requestBody: { operator: operatorOnly, invite_all: !isCloudHosted(), auto_add: autoAdd }
         });
     }
-    if (aiKey != '') {
-        let actualUsername = username;
-        if (automateUsernameCreation) {
-            const user = await UserService.whoami({
-                workspace: id
-            });
-            actualUsername = user.username;
-        }
-        let path = `u/${actualUsername}/${selected}_windmill_codegen`;
+    sendUserToast(`Created workspace id: ${id}`);
+    return id;
+}
+async function saveWorkspaceAiSetup() {
+    if (!createdWorkspaceId || !aiKey) {
+        return;
+    }
+    aiSetupLoading = true;
+    try {
+        const actualUsername = await getWorkspaceUsername(createdWorkspaceId);
+        const path = `u/${actualUsername}/${selected}_windmill_codegen`;
         await VariableService.createVariable({
-            workspace: id,
+            workspace: createdWorkspaceId,
             requestBody: {
                 path,
                 value: aiKey,
@@ -191,7 +248,7 @@ async function createWorkspace() {
             }
         });
         await ResourceService.createResource({
-            workspace: id,
+            workspace: createdWorkspaceId,
             requestBody: {
                 path,
                 value: {
@@ -201,36 +258,45 @@ async function createWorkspace() {
             }
         });
         await WorkspaceService.editCopilotConfig({
-            workspace: id,
-            requestBody: aiKey
-                ? {
-                    providers: {
-                        [selected]: {
-                            resource_path: path,
-                            models: [AI_PROVIDERS[selected].defaultModels[0]]
-                        }
-                    },
-                    default_model: {
-                        model: AI_PROVIDERS[selected].defaultModels[0],
-                        provider: selected
-                    },
-                    code_completion_model: codeCompletionEnabled
-                        ? { model: AI_PROVIDERS[selected].defaultModels[0], provider: selected }
-                        : undefined
-                }
-                : {}
+            workspace: createdWorkspaceId,
+            requestBody: {
+                providers: {
+                    [selected]: {
+                        resource_path: path,
+                        models: [AI_PROVIDERS[selected].defaultModels[0]]
+                    }
+                },
+                default_model: {
+                    model: AI_PROVIDERS[selected].defaultModels[0],
+                    provider: selected
+                },
+                code_completion_model: codeCompletionEnabled
+                    ? { model: AI_PROVIDERS[selected].defaultModels[0], provider: selected }
+                    : undefined
+            }
         });
+        sendUserToast('Windmill AI configured');
+        await finishWorkspaceSetup(createdWorkspaceId);
+    }
+    catch (error) {
+        sendUserToast(`Failed to configure Windmill AI: ${getErrorMessage(error)}`, true);
+    }
+    finally {
+        aiSetupLoading = false;
     }
-    sendUserToast(`Created workspace id: ${id}`);
-    usersWorkspaceStore.set(await WorkspaceService.listUserWorkspaces());
-    switchWorkspace(id);
-    goto(rd ?? '/');
 }
-function handleKeyUp(event) {
+function handleCreateKeyUp(event) {
     const key = event.key;
     if (key === 'Enter') {
         event.preventDefault();
-        createWorkspace();
+        createOrForkWorkspace();
+    }
+}
+function handleAiKeyUp(event) {
+    const key = event.key;
+    if (key === 'Enter' && aiKey) {
+        event.preventDefault();
+        saveWorkspaceAiSetup();
     }
 }
 async function loadWorkspaces() {
@@ -276,6 +342,7 @@ let auto_invite = $state(false);
 let operatorOnly = $state(false);
 let autoAdd = $state(true);
 let selected = $state('openai');
+let modalTitle = $derived(isFork ? 'Fork Workspace' : creationStep === 'ai' ? 'Set up Windmill AI' : 'New Workspace');
 run(() => {
     id = name.toLowerCase().replace(/\s/gi, '-');
 });
@@ -291,7 +358,7 @@ run(() => {
 let domain = $derived($usersWorkspaceStore?.email.split('@')[1]);
 </script>
 
-<CenteredModal title="{isFork ? 'Forking' : 'New'} Workspace" centerVertically={false}>
+<CenteredModal title={modalTitle} centerVertically={false}>
 	<div class="flex flex-col gap-8">
 		{#if isFork}
 			<div class="flex flex-block gap-2">
@@ -357,88 +424,184 @@ let domain = $derived($usersWorkspaceStore?.email.split('@')[1]);
 				{/if}
 			</Alert>
 		{/if}
-		<label class="flex flex-col gap-1">
-			{#if isFork}
-				<span class="text-xs font-semibold text-emphasis">Fork name</span>
-				<span class="text-xs text-secondary">Displayable name of the forked workspace</span>
-			{:else}
-				<span class="text-xs font-semibold text-emphasis">Workspace name</span>
-				<span class="text-xs text-secondary">Displayable name</span>
-			{/if}
-			<!-- svelte-ignore a11y_autofocus -->
-			<TextInput inputProps={{ autofocus: true }} bind:value={name} />
-		</label>
-		<label class="flex flex-col gap-1">
-			<span class="text-xs font-semibold text-emphasis">Workspace ID</span>
-			{#if isFork}
+
+		{#if isFork || creationStep === 'details'}
+			<label class="flex flex-col gap-1">
+				{#if isFork}
+					<span class="text-xs font-semibold text-emphasis">Fork name</span>
+					<span class="text-xs text-secondary">Displayable name of the forked workspace</span>
+				{:else}
+					<span class="text-xs font-semibold text-emphasis">Workspace name</span>
+					<span class="text-xs text-secondary">Displayable name</span>
+				{/if}
+				<!-- svelte-ignore a11y_autofocus -->
+				<TextInput inputProps={{ autofocus: true }} bind:value={name} />
+			</label>
+			<label class="flex flex-col gap-1">
+				<span class="text-xs font-semibold text-emphasis">Workspace ID</span>
+				{#if isFork}
+					<span class="text-xs text-secondary"
+						>Slug to uniquely identify your fork (this will also set the branch name)</span
+					>
+				{:else}
+					<span class="text-xs text-secondary">Slug to uniquely identify your workspace</span>
+				{/if}
+
+				{#if isFork}
+					<PrefixedInput
+						prefix={WM_FORK_PREFIX}
+						type="text"
+						bind:value={id}
+						placeholder="example.com"
+						class={errorId != '' ? 'input-error' : ''}
+					/>
+				{:else}
+					<TextInput bind:value={id} error={errorId} />
+				{/if}
+				{#if errorId}
+					<span class="text-red-500 text-2xs font-normal">{errorId}</span>
+				{/if}
+			</label>
+			<label class="flex flex-col gap-1">
+				<span class="text-xs font-semibold text-emphasis">Workspace color</span>
 				<span class="text-xs text-secondary"
-					>Slug to uniquely identify your fork (this will also set the branch name)</span
+					>Color to identify the current workspace in the list of workspaces</span
 				>
-			{:else}
-				<span class="text-xs text-secondary">Slug to uniquely identify your workspace</span>
-			{/if}
+				<div class="flex items-center gap-4">
+					<Toggle bind:checked={colorEnabled} options={{ right: 'Enable' }} />
+					{#if colorEnabled}
+						<div class="flex items-center gap-1 grow">
+							<input
+								class="grow min-w-10"
+								type="color"
+								bind:value={workspaceColor}
+								disabled={!colorEnabled}
+							/>
 
-			{#if isFork}
-				<PrefixedInput
-					prefix={WM_FORK_PREFIX}
-					type="text"
-					bind:value={id}
-					placeholder="example.com"
-					class={errorId != '' ? 'input-error' : ''}
-				/>
-			{:else}
-				<TextInput bind:value={id} error={errorId} />
+							<TextInput
+								class="w-24"
+								bind:value={workspaceColor}
+								inputProps={{ disabled: !colorEnabled }}
+							/>
+							<Button
+								on:click={generateRandomColor}
+								size="xs"
+								variant="default"
+								disabled={!colorEnabled}>Random</Button
+							>
+						</div>
+					{/if}
+				</div>
+			</label>
+			{#if !automateUsernameCreation}
+				<label class="flex flex-col gap-1">
+					<span class="text-xs font-semibold text-emphasis">Your username in that workspace</span>
+					<TextInput
+						bind:value={username}
+						inputProps={{ onkeyup: handleCreateKeyUp }}
+						error={errorUser}
+					/>
+					{#if errorUser}
+						<span class="text-red-500 text-2xs">{errorUser}</span>
+					{/if}
+				</label>
 			{/if}
-			{#if errorId}
-				<span class="text-red-500 text-2xs font-normal">{errorId}</span>
+			{#if !isFork}
+				<div class="flex flex-col gap-1">
+					<label for="auto-invite" class="text-xs font-semibold text-emphasis"
+						>{isCloudHosted()
+							? `Auto-${autoAdd ? 'add' : 'invite'} anyone from ${domain}`
+							: `Auto-${autoAdd ? 'add' : 'invite'} anyone joining the instance`}</label
+					>
+					<Toggle
+						id="auto-invite"
+						disabled={isCloudHosted() && !isDomainAllowed}
+						bind:checked={auto_invite}
+					/>
+					{#if isCloudHosted() && isDomainAllowed == false}
+						<div class="text-secondary text-2xs">{domain} domain not allowed for auto-invite</div>
+					{/if}
+
+					{#if auto_invite}
+						<div class="bg-surface-tertiary p-4 rounded-md flex flex-col gap-8">
+							<!-- svelte-ignore a11y_label_has_associated_control -->
+							{#if isCloudHosted()}
+								<label class="flex flex-col gap-1">
+									<span class="text-xs font-semibold text-emphasis">Mode</span>
+									<span class="text-xs text-secondary font-normal"
+										>Whether to invite or add users directly to the workspace.</span
+									>
+									<ToggleButtonGroup
+										selected={autoAdd ? 'add' : 'invite'}
+										on:selected={async (e) => {
+											autoAdd = e.detail === 'add'
+										}}
+									>
+										{#snippet children({ item })}
+											<ToggleButton value="invite" label="Auto-invite" {item} />
+											<ToggleButton value="add" label="Auto-add" {item} />
+										{/snippet}
+									</ToggleButtonGroup>
+								</label>
+							{/if}
+
+							<label class="font-semibold flex flex-col gap-1">
+								<span class="text-xs font-semibold text-emphasis">Role</span>
+								<span class="text-xs text-secondary font-normal">Role of the auto-invited users</span>
+								<ToggleButtonGroup
+									selected={operatorOnly ? 'operator' : 'developer'}
+									on:selected={(e) => {
+										operatorOnly = e.detail == 'operator'
+									}}
+								>
+									{#snippet children({ item })}
+										<ToggleButton value="operator" label="Operator" {item} />
+										<ToggleButton value="developer" label="Developer" {item} />
+									{/snippet}
+								</ToggleButtonGroup>
+							</label>
+						</div>
+					{/if}
+				</div>
 			{/if}
-		</label>
-		<label class="flex flex-col gap-1">
-			<span class="text-xs font-semibold text-emphasis">Workspace color</span>
-			<span class="text-xs text-secondary"
-				>Color to identify the current workspace in the list of workspaces</span
-			>
-			<div class="flex items-center gap-4">
-				<Toggle bind:checked={colorEnabled} options={{ right: 'Enable' }} />
-				{#if colorEnabled}
-					<div class="flex items-center gap-1 grow">
-						<input
-							class="grow min-w-10"
-							type="color"
-							bind:value={workspaceColor}
-							disabled={!colorEnabled}
-						/>
 
-						<TextInput
-							class="w-24"
-							bind:value={workspaceColor}
-							inputProps={{ disabled: !colorEnabled }}
-						/>
-						<Button
-							on:click={generateRandomColor}
-							size="xs"
-							variant="default"
-							disabled={!colorEnabled}>Random</Button
-						>
-					</div>
+			<div class="flex flex-wrap flex-row justify-between gap-4 pt-4">
+				<Button
+					disabled={forkCreationLoading || createLoading}
+					variant="default"
+					size="sm"
+					href="{base}/user/workspaces">&leftarrow; Back to workspaces</Button
+				>
+				{#if !forkCreationLoading}
+					<Button
+						variant="accent"
+						loading={createLoading}
+						disabled={createLoading ||
+							checking ||
+							errorId != '' ||
+							!name ||
+							(!automateUsernameCreation && (errorUser != '' || !username)) ||
+							!id}
+						on:click={createOrForkWorkspace}
+					>
+						{#if isFork}
+							Fork workspace
+						{:else}
+							Create workspace
+						{/if}
+					</Button>
+				{:else}
+					<Button variant="accent" disabled={true}>
+						<LoaderCircle class="animate-spin" /> Creating branch
+					</Button>
 				{/if}
 			</div>
-		</label>
-		{#if !automateUsernameCreation}
-			<label class="flex flex-col gap-1">
-				<span class="text-xs font-semibold text-emphasis">Your username in that workspace</span>
-				<TextInput bind:value={username} inputProps={{ onkeyup: handleKeyUp }} error={errorUser} />
-				{#if errorUser}
-					<span class="text-red-500 text-2xs">{errorUser}</span>
-				{/if}
-			</label>
-		{/if}
-		{#if !isFork}
-			<div class="block">
+		{:else}
+			<div class="flex flex-col gap-4">
 				<div class="flex flex-col gap-1">
 					<label for="ai-key" class="flex flex-row gap-2">
 						<span class="text-xs font-semibold text-emphasis">
-							AI key for Windmill AI
+							Set up Windmill AI
 							<Tooltip>
 								Find out how it can help you <a
 									href="https://www.windmill.dev/docs/core_concepts/ai_generation"
@@ -447,10 +610,21 @@ let domain = $derived($usersWorkspaceStore?.email.split('@')[1]);
 								>
 							</Tooltip>
 						</span>
-						<span class="text-2xs text-secondary">(optional but recommended)</span>
 					</label>
+					<span class="text-xs text-secondary">
+						Windmill AI powers the chat, code generation, flow creation, and code completion. Set
+						it up now or configure it later in Workspace settings.
+						<a
+							href="https://www.windmill.dev/docs/core_concepts/ai_generation"
+							target="_blank"
+							rel="noopener noreferrer"
+							class="underline"
+						>
+							Learn more
+						</a>
+					</span>
 
-					<ToggleButtonGroup bind:selected>
+					<ToggleButtonGroup bind:selected class="mt-4">
 						{#snippet children({ item })}
 							<ToggleButton value="openai" label="OpenAI" {item} />
 							<ToggleButton value="anthropic" label="Anthropic" {item} />
@@ -464,7 +638,7 @@ let domain = $derived($usersWorkspaceStore?.email.split('@')[1]);
 							type="password"
 							autocomplete="new-password"
 							bind:value={aiKey}
-							onkeyup={handleKeyUp}
+							onkeyup={handleAiKeyUp}
 						/>
 						<TestAIKey
 							apiKey={aiKey}
@@ -476,7 +650,7 @@ let domain = $derived($usersWorkspaceStore?.email.split('@')[1]);
 				</div>
 
 				{#if aiKey}
-					<div class="flex flex-col gap-2 mt-2">
+					<div class="flex flex-col gap-2">
 						<Toggle
 							disabled={!aiKey}
 							bind:checked={codeCompletionEnabled}
@@ -485,91 +659,25 @@ let domain = $derived($usersWorkspaceStore?.email.split('@')[1]);
 					</div>
 				{/if}
 			</div>
-			<div class="flex flex-col gap-1">
-				<label for="auto-invite" class="text-xs font-semibold text-emphasis"
-					>{isCloudHosted()
-						? `Auto-${autoAdd ? 'add' : 'invite'} anyone from ${domain}`
-						: `Auto-${autoAdd ? 'add' : 'invite'} anyone joining the instance`}</label
-				>
-				<Toggle
-					id="auto-invite"
-					disabled={isCloudHosted() && !isDomainAllowed}
-					bind:checked={auto_invite}
-				/>
-				{#if isCloudHosted() && isDomainAllowed == false}
-					<div class="text-secondary text-2xs">{domain} domain not allowed for auto-invite</div>
-				{/if}
-
-				{#if auto_invite}
-					<div class="bg-surface-tertiary p-4 rounded-md flex flex-col gap-8">
-						<!-- svelte-ignore a11y_label_has_associated_control -->
-						{#if isCloudHosted()}
-							<label class="flex flex-col gap-1">
-								<span class="text-xs font-semibold text-emphasis">Mode</span>
-								<span class="text-xs text-secondary font-normal"
-									>Whether to invite or add users directly to the workspace.</span
-								>
-								<ToggleButtonGroup
-									selected={autoAdd ? 'add' : 'invite'}
-									on:selected={async (e) => {
-										autoAdd = e.detail === 'add'
-									}}
-								>
-									{#snippet children({ item })}
-										<ToggleButton value="invite" label="Auto-invite" {item} />
-										<ToggleButton value="add" label="Auto-add" {item} />
-									{/snippet}
-								</ToggleButtonGroup>
-							</label>
-						{/if}
 
-						<label class="font-semibold flex flex-col gap-1">
-							<span class="text-xs font-semibold text-emphasis">Role</span>
-							<span class="text-xs text-secondary font-normal">Role of the auto-invited users</span>
-							<ToggleButtonGroup
-								selected={operatorOnly ? 'operator' : 'developer'}
-								on:selected={(e) => {
-									operatorOnly = e.detail == 'operator'
-								}}
-							>
-								{#snippet children({ item })}
-									<ToggleButton value="operator" label="Operator" {item} />
-									<ToggleButton value="developer" label="Developer" {item} />
-								{/snippet}
-							</ToggleButtonGroup>
-						</label>
-					</div>
-				{/if}
-			</div>
-		{/if}
-		<div class="flex flex-wrap flex-row justify-between gap-4 pt-4">
-			<Button
-				disabled={forkCreationLoading}
-				variant="default"
-				size="sm"
-				href="{base}/user/workspaces">&leftarrow; Back to workspaces</Button
-			>
-			{#if !forkCreationLoading}
+			<div class="flex flex-wrap flex-row justify-between gap-4 pt-4">
 				<Button
-					variant="accent"
-					disabled={checking ||
-						errorId != '' ||
-						!name ||
-						(!automateUsernameCreation && (errorUser != '' || !username)) ||
-						!id}
-					on:click={createOrForkWorkspace}
+					variant="default"
+					size="sm"
+					disabled={aiSetupLoading || !createdWorkspaceId}
+					on:click={() => createdWorkspaceId && finishWorkspaceSetup(createdWorkspaceId)}
 				>
-					{#if isFork}
-						Fork workspace
-					{:else}
-						Create workspace
-					{/if}
+					Skip for now
 				</Button>
-			{:else}
-				<Button variant="accent" disabled={true}>
-					<LoaderCircle class="animate-spin" /> Creating branch
+				<Button
+					variant="accent"
+					loading={aiSetupLoading}
+					disabled={aiSetupLoading || !aiKey}
+					on:click={saveWorkspaceAiSetup}
+				>
+					Set up AI
 				</Button>
-			{/if}
-		</div>
+			</div>
+		{/if}
 	</div>
 </CenteredModal>

package/package/components/workspaceSettings/CustomInstanceDbWizardModal.svelte

@@ -109,8 +109,7 @@ let preventClose = false;
 										`GRANT CREATE ON DATABASE "${dbname}" TO custom_instance_user;\n` +
 										'ALTER DEFAULT PRIVILEGES IN SCHEMA public \n' +
 										'  	GRANT SELECT, INSERT, UPDATE, DELETE ON TABLES\n    TO custom_instance_user;\n' +
-										'ALTER ROLE custom_instance_user CREATEROLE;\n' +
-										'ALTER ROLE custom_instance_user REPLICATION;'
+										'ALTER ROLE custom_instance_user CREATEROLE;'
 								}
 							],
 							status?.error ?? undefined

package/package/components/workspaceSettings/DucklakeSettings.svelte

@@ -128,7 +128,7 @@ let tableHeadTooltips = {
 let confirmationModal = createAsyncConfirmationModal();
 </script>
 
-<div class="flex flex-col gap-4 mb-8 mt-20">
+<div class="flex flex-col gap-4 mb-8">
 	<div class="flex flex-col gap-1">
 		<div class="text-primary text-lg font-semibold">Ducklake</div>
 		<Description link="https://www.windmill.dev/docs/core_concepts/persistent_storage/ducklake">