windmill-components 1.542.5 → 1.555.0

package/package/components/workspaceSettings/AISettings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { WorkspaceService } from '../../gen';
-import { setCopilotInfo, workspaceStore } from '../../stores';
+import { workspaceStore } from '../../stores';
 import { sendUserToast } from '../../toast';
 import { AI_PROVIDERS, fetchAvailableModels } from '../copilot/lib';
 import TestAiKey from '../copilot/TestAIKey.svelte';
@@ -17,8 +17,10 @@ import { AIMode } from '../copilot/chat/AIChatManager.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import autosize from '../../autosize';
+import ModelTokenLimits from './ModelTokenLimits.svelte';
+import { setCopilotInfo } from '../../aiStore';
 const MAX_CUSTOM_PROMPT_LENGTH = 5000;
-let { aiProviders = $bindable(), codeCompletionModel = $bindable(), defaultModel = $bindable(), customPrompts = $bindable(), usingOpenaiClientCredentialsOauth = $bindable() } = $props();
+let { aiProviders = $bindable(), codeCompletionModel = $bindable(), defaultModel = $bindable(), customPrompts = $bindable(), maxTokensPerModel = $bindable(), usingOpenaiClientCredentialsOauth = $bindable() } = $props();
 let fetchedAiModels = $state(false);
 let availableAiModels = $state(Object.fromEntries(Object.keys(AI_PROVIDERS).map((provider) => [provider, AI_PROVIDERS[provider].defaultModels])));
 // Custom system prompt settings
@@ -66,7 +68,8 @@ async function editCopilotConfig() {
             providers: aiProviders,
             code_completion_model,
             default_model,
-            custom_prompts: Object.keys(custom_prompts).length > 0 ? custom_prompts : undefined
+            custom_prompts: Object.keys(custom_prompts).length > 0 ? custom_prompts : undefined,
+            max_tokens_per_model: Object.keys(maxTokensPerModel).length > 0 ? maxTokensPerModel : undefined
         };
         await WorkspaceService.editCopilotConfig({
             workspace: $workspaceStore,
@@ -183,9 +186,9 @@ async function onAiProviderChange(provider) {
 										: provider}
 									initialValue={aiProviders[provider].resource_path}
 									bind:value={
-										() => aiProviders[provider].resource_path,
+										() => aiProviders[provider].resource_path || undefined,
 										(v) => {
-											aiProviders[provider].resource_path = v
+											aiProviders[provider].resource_path = v ?? ''
 											onAiProviderChange(provider as AIProvider)
 										}
 									}
@@ -276,6 +279,10 @@ async function onAiProviderChange(provider) {
 		</div>
 	{/if}
 
+	{#if Object.keys(aiProviders).length > 0}
+		<ModelTokenLimits {aiProviders} bind:maxTokensPerModel />
+	{/if}
+
 	{#if Object.keys(aiProviders).length > 0}
 		<div class="flex flex-col gap-2">
 			<p class="font-semibold">Custom system prompts</p>

package/package/components/workspaceSettings/AISettings.svelte.d.ts

@@ -4,8 +4,9 @@ type $$ComponentProps = {
     codeCompletionModel: string | undefined;
     defaultModel: string | undefined;
     customPrompts: Record<string, string>;
+    maxTokensPerModel: Record<string, number>;
     usingOpenaiClientCredentialsOauth: boolean;
 };
-declare const AiSettings: import("svelte").Component<$$ComponentProps, {}, "codeCompletionModel" | "defaultModel" | "aiProviders" | "customPrompts" | "usingOpenaiClientCredentialsOauth">;
+declare const AiSettings: import("svelte").Component<$$ComponentProps, {}, "codeCompletionModel" | "defaultModel" | "aiProviders" | "maxTokensPerModel" | "customPrompts" | "usingOpenaiClientCredentialsOauth">;
 type AiSettings = ReturnType<typeof AiSettings>;
 export default AiSettings;

package/package/components/workspaceSettings/CreateWorkspace.svelte

@@ -367,8 +367,8 @@ let domain = $derived($usersWorkspaceStore?.email.split('@')[1]);
 				}}
 			>
 				{#snippet children({ item })}
-					<ToggleButton value="operator" size="xs" label="Operator" {item} />
-					<ToggleButton value="developer" size="xs" label="Developer" {item} />
+					<ToggleButton value="operator" small label="Operator" {item} />
+					<ToggleButton value="developer" small label="Developer" {item} />
 				{/snippet}
 			</ToggleButtonGroup>
 		</div>

package/package/components/workspaceSettings/DucklakeSettings.svelte

@@ -57,6 +57,8 @@ export function convertDucklakeSettingsToBackend(settings) {
 	import Alert from '../common/alert/Alert.svelte'
 	import { deepEqual } from 'fast-equals'
 	import Popover from '../meltComponents/Popover.svelte'
+	import TextInput from '../text_input/TextInput.svelte'
+	import Section from '../Section.svelte'
 
 	const DEFAULT_DUCKLAKE_CATALOG_NAME = 'ducklake_catalog'
 
@@ -164,7 +166,7 @@ export function convertDucklakeSettingsToBackend(settings) {
 		<div class="text-primary text-lg font-semibold">Ducklake</div>
 		<Description link="https://www.windmill.dev/docs/core_concepts/ducklake">
 			Windmill has first class support for Ducklake. You can use and explore ducklakes like a normal
-			SQL database, even through the data is actually stored in parquet files in S3 !
+			SQL database, even though the data is actually stored in parquet files in S3 !
 		</Description>
 	</div>
 </div>
@@ -173,6 +175,52 @@ export function convertDucklakeSettingsToBackend(settings) {
 	<Alert title="Instance catalogs use the Windmill database" class="mb-4" type="info">
 		Using an instance catalog is the fastest way to get started with Ducklake. They are public to
 		the instance and can be re-used in other workspaces' Ducklake settings.
+		<div>
+			<Section
+				label="Manual setup instructions"
+				collapsable
+				headerClass="mt-6 border bg-surface px-3 py-1 rounded-md text-xs text-secondary"
+				class="text-secondary"
+				animate
+			>
+				This is what happens when you create a new Instance catalog with the name
+				<code>ducklake_catalog</code>. This may be useful to debug issues in case the automatic
+				setup fails in the middle, but in most cases Windmill will handle it for you.
+				<br /><br />
+
+				If the database <code>ducklake_catalog</code> already exists, Windmill assumes that the
+				setup was successful and does not do anything. However, it is possible that it failed in the
+				middle (in which case you should have seen an error pop up during setup). There is no
+				rollback as the following operations do not work in a transaction.
+				<br />
+				This is what the setup does :
+				<br /><br />
+				Connect to the Windmill PostgreSQL as the default user (the one in your DATABASE_URL, usually
+				'postgres') and run :
+				<br />
+				<code class="block p-2 border rounded-md bg-surface mt-2">
+					CREATE DATABASE <code>ducklake_catalog</code>;<br />
+					GRANT CONNECT ON DATABASE <code>ducklake_catalog</code> TO ducklake_user;
+				</code>
+				<br />
+				Then, connect to the <code>ducklake_catalog</code> database with the same user as above (NOT
+				ducklake_user) and run :
+				<code class="block p-2 border rounded-md bg-surface mt-2">
+					GRANT USAGE ON SCHEMA public TO ducklake_user;<br />
+					GRANT CREATE ON SCHEMA public TO ducklake_user;<br />
+					ALTER DEFAULT PRIVILEGES IN SCHEMA public<br />
+					&nbsp;&nbsp;GRANT SELECT, INSERT, UPDATE, DELETE ON TABLES TO ducklake_user;
+				</code>
+				<br />
+				After doing that, creating a new Ducklake with an Instance catalog named
+				<code>ducklake_catalog</code> should not prompt you to run the automatic setup, and
+				everything should work fine.
+				<br /><br />
+				Note : the ducklake_user is automatically created by Windmill in a migration. Its password is
+				auto-generated and stored in the database table <code>global_settings</code> with the key
+				<code>ducklake_user_pg_pwd</code>.
+			</Section>
+		</div>
 	</Alert>
 {/if}
 
@@ -209,7 +257,7 @@ export function convertDucklakeSettingsToBackend(settings) {
 							<code class="px-1 py-0.5 border rounded-md">ATTACH 'ducklake' AS dl;</code> shorthand
 						</Tooltip>
 					{/if}
-					<input bind:value={ducklake.name} placeholder="Name" />
+					<TextInput bind:value={ducklake.name} inputProps={{ placeholder: 'Name' }} />
 				</Cell>
 				<Cell>
 					<div class="flex gap-4">
@@ -243,11 +291,13 @@ export function convertDucklakeSettingsToBackend(settings) {
 								<ResourcePicker
 									bind:value={ducklake.catalog.resource_path}
 									resourceType={ducklake.catalog.resource_type}
+									selectInputClass="min-h-9"
+									class="min-h-9"
 								/>
 							{:else}
-								<input
+								<TextInput
 									bind:value={ducklake.catalog.resource_path}
-									placeholder="PostgreSQL database name"
+									inputProps={{ placeholder: 'PostgreSQL database name' }}
 								/>
 							{/if}
 						</div>
@@ -269,9 +319,12 @@ export function convertDucklakeSettingsToBackend(settings) {
 								}
 							}
 							class="w-48"
-							inputClass="!placeholder-primary"
+							inputClass="!placeholder-secondary"
+						/>
+						<TextInput
+							inputProps={{ placeholder: 'Data path (defaults to /)' }}
+							bind:value={ducklake.storage.path}
 						/>
-						<input placeholder="Data path (defaults to /)" bind:value={ducklake.storage.path} />
 					</div>
 				</Cell>
 				<Cell class="w-12">
@@ -283,6 +336,7 @@ export function convertDucklakeSettingsToBackend(settings) {
 						>
 							<svelte:fragment slot="trigger">
 								<ExploreAssetButton
+									class="h-9"
 									asset={{ kind: 'ducklake', path: ducklake.name }}
 									{dbManagerDrawer}
 									disabled
@@ -316,8 +370,11 @@ export function convertDucklakeSettingsToBackend(settings) {
 <Button
 	wrapperClasses="mt-4 mb-44 max-w-fit"
 	on:click={onSave}
-	disabled={Object.values(ducklakeIsDirty).every((v) => v === false)}>Save ducklake settings</Button
+	disabled={ducklakeSavedSettings.ducklakes.length === ducklakeSettings.ducklakes.length &&
+		Object.values(ducklakeIsDirty).every((v) => v === false)}
 >
+	Save ducklake settings
+</Button>
 <DbManagerDrawer bind:this={dbManagerDrawer} />
 
 <ConfirmationModal {...confirmationModal.props} />

package/package/components/workspaceSettings/ModelTokenLimits.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">import { getModelMaxTokens } from '../copilot/lib';
+import { ChevronDown, ChevronUp } from 'lucide-svelte';
+import { slide } from 'svelte/transition';
+const MAX_TOKENS_LIMIT = 2000000;
+let { aiProviders, maxTokensPerModel = $bindable() } = $props();
+let errors = $state({});
+let collapsedProviders = $state({});
+// Group available models by provider
+const modelsByProvider = $derived(Object.entries(aiProviders).reduce((acc, [provider, config]) => {
+    acc[provider] = config.models.map((model) => ({
+        provider: provider,
+        model
+    }));
+    return acc;
+}, {}));
+function getModelKey(provider, model) {
+    return `${provider}:${model}`;
+}
+function getDefaultTokensForModel(provider, model) {
+    return getModelMaxTokens(provider, model);
+}
+function getCurrentTokensForModel(provider, model) {
+    const modelKey = getModelKey(provider, model);
+    return maxTokensPerModel[modelKey] ?? getDefaultTokensForModel(provider, model);
+}
+function updateTokensForModel(provider, model, tokens) {
+    const modelKey = getModelKey(provider, model);
+    if (tokens < 1 || tokens > MAX_TOKENS_LIMIT) {
+        errors[modelKey] = 'Token limit must be between 1 and ' + MAX_TOKENS_LIMIT;
+        return;
+    }
+    const defaultTokens = getDefaultTokensForModel(provider, model);
+    if (tokens === defaultTokens) {
+        // Remove from object if it's the default value
+        const newSettings = { ...maxTokensPerModel };
+        delete newSettings[modelKey];
+        maxTokensPerModel = newSettings;
+    }
+    else {
+        maxTokensPerModel = {
+            ...maxTokensPerModel,
+            [modelKey]: tokens
+        };
+    }
+    errors[modelKey] = '';
+}
+function resetModelToDefault(provider, model) {
+    const modelKey = getModelKey(provider, model);
+    const newSettings = { ...maxTokensPerModel };
+    delete newSettings[modelKey];
+    maxTokensPerModel = newSettings;
+}
+function isModelAtDefault(provider, model) {
+    const currentTokens = getCurrentTokensForModel(provider, model);
+    const defaultTokens = getDefaultTokensForModel(provider, model);
+    return currentTokens === defaultTokens;
+}
+function toggleProvider(provider) {
+    collapsedProviders[provider] = !collapsedProviders[provider];
+}
+function hasCustomSettings(provider, models) {
+    return models.some((m) => !isModelAtDefault(provider, m.model));
+}
+$effect(() => {
+    // Initialize collapsedProviders to true for all providers
+    collapsedProviders = {
+        ...Object.fromEntries(Object.keys(aiProviders).map((provider) => [provider, true]))
+    };
+});
+</script>
+
+{#if Object.keys(aiProviders).length > 0}
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-col gap-1">
+			<p class="font-semibold">Model Output Limits</p>
+			<p class="text-xs text-secondary">
+				Configure maximum token limits for each model. These limits apply to all AI chat
+				interactions in the workspace.
+			</p>
+		</div>
+
+		<div class="flex flex-col gap-3">
+			{#each Object.entries(modelsByProvider).filter(([provider, models]) => models.length > 0) as [provider, models]}
+				{@const isExpanded = !collapsedProviders[provider]}
+				{@const hasCustom = hasCustomSettings(provider, models)}
+				<div class="border border-gray-200 dark:border-gray-700 rounded-md">
+					<button
+						type="button"
+						onclick={() => toggleProvider(provider)}
+						class="w-full px-4 py-3 flex items-center justify-between bg-surface-secondary hover:bg-surface-hover transition-colors rounded-md"
+					>
+						<div class="flex items-center gap-2">
+							<h4 class="font-medium text-sm capitalize">{provider}</h4>
+							{#if hasCustom}
+								<span
+									class="text-xs px-2 py-0.5 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded"
+								>
+									Modified
+								</span>
+							{/if}
+						</div>
+						{#if isExpanded}
+							<ChevronUp size={16} class="text-gray-500" />
+						{:else}
+							<ChevronDown size={16} class="text-gray-500" />
+						{/if}
+					</button>
+
+					{#if isExpanded}
+						<div transition:slide|local={{ duration: 200 }} class="p-3">
+							<div class="space-y-3">
+								{#each models as { model }}
+									{@const currentTokens = getCurrentTokensForModel(provider as AIProvider, model)}
+									{@const defaultTokens = getDefaultTokensForModel(provider as AIProvider, model)}
+									{@const isAtDefault = isModelAtDefault(provider as AIProvider, model)}
+									<div class="flex flex-col gap-1">
+										<div class="flex items-center gap-3">
+											<div class="flex-1 min-w-0">
+												<span class="text-sm text-primary truncate block">{model}</span>
+											</div>
+											<div class="flex items-center gap-2">
+												<input
+													type="number"
+													min="1"
+													max={MAX_TOKENS_LIMIT}
+													value={currentTokens}
+													oninput={(e) => {
+														const value = parseInt(e.currentTarget.value)
+														if (!isNaN(value)) {
+															updateTokensForModel(provider as AIProvider, model, value)
+														}
+													}}
+													class="w-20 px-2 py-1 text-xs text-center border border-gray-200 dark:border-gray-700 rounded bg-surface focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+												/>
+												<span class="text-xs text-secondary whitespace-nowrap">tokens</span>
+											</div>
+										</div>
+										{#if !isAtDefault}
+											<div class="text-xs text-tertiary flex flex-row items-center gap-1">
+												<span>Default: {defaultTokens} tokens</span>
+												<button
+													type="button"
+													onclick={() => resetModelToDefault(provider as AIProvider, model)}
+													class="text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 whitespace-nowrap"
+													title="Reset to default ({defaultTokens})"
+												>
+													Reset
+												</button>
+											</div>
+											{#if errors[getModelKey(provider as AIProvider, model)]}
+												<div class="text-xs text-red-500"
+													>{errors[getModelKey(provider as AIProvider, model)]}</div
+												>
+											{/if}
+										{/if}
+									</div>
+								{/each}
+							</div>
+						</div>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</div>
+{/if}

package/package/components/workspaceSettings/ModelTokenLimits.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { AIConfig } from '../../gen';
+type $$ComponentProps = {
+    aiProviders: Exclude<AIConfig['providers'], undefined>;
+    maxTokensPerModel: Record<string, number>;
+};
+declare const ModelTokenLimits: import("svelte").Component<$$ComponentProps, {}, "maxTokensPerModel">;
+type ModelTokenLimits = ReturnType<typeof ModelTokenLimits>;
+export default ModelTokenLimits;