windmill-components 1.537.1 → 1.542.4

package/package/components/triggers.js

@@ -25,6 +25,8 @@ export function captureTriggerKindToTriggerKind(kind) {
             return 'webhooks';
         case 'email':
             return 'emails';
+        case 'default_email':
+            return 'default_emails';
         case 'http':
             return 'routes';
         case 'websocket':

package/package/components/wizards/AgGridWizard.svelte

@@ -7,6 +7,7 @@ import Button from '../common/button/Button.svelte';
 import Popover from '../meltComponents/Popover.svelte';
 import { offset, flip, shift } from 'svelte-floating-ui/dom';
 let { value = $bindable(), trigger: trigger_render } = $props();
+const isActionsColumn = $derived(value?._isActionsColumn === true);
 const presets = [
     {
         label: 'None',
@@ -92,16 +93,18 @@ $effect(() => {
 					<input type="text" placeholder="Header name" bind:value={value.headerName} />
 				</Label>
 
-				<Label label="Editable value">
-					<Toggle
-						on:pointerdown={(e) => {
-							e?.stopPropagation()
-						}}
-						options={{ right: 'Editable' }}
-						bind:checked={value.editable}
-						size="xs"
-					/>
-				</Label>
+				{#if !isActionsColumn}
+					<Label label="Editable value">
+						<Toggle
+							on:pointerdown={(e) => {
+								e?.stopPropagation()
+							}}
+							options={{ right: 'Editable' }}
+							bind:checked={value.editable}
+							size="xs"
+						/>
+					</Label>
+				{/if}
 
 				<Label label="Min width (px)">
 					<input type="number" placeholder="width" bind:value={value.minWidth} />
@@ -124,8 +127,8 @@ $effect(() => {
 						</Tooltip>
 					{/snippet}
 
-					<input type="range" step="1" bind:value={value.flex} min={1} max={12} />
-					<div class="text-xs">{value.flex}</div>
+					<input type="range" step="1" bind:value={value.flex} min={0} max={12} />
+					<div class="text-xs">{value.flex ?? 0}</div>
 				</Label>
 
 				<Label label="Hide">
@@ -139,7 +142,8 @@ $effect(() => {
 					/>
 				</Label>
 
-				<Label label="Value formatter">
+				{#if !isActionsColumn}
+					<Label label="Value formatter">
 					{#snippet header()}
 						<Tooltip
 							documentationLink="https://www.ag-grid.com/javascript-data-grid/value-formatters/"
@@ -197,83 +201,84 @@ $effect(() => {
 					{/key}
 				</div>
 
-				<Label label="Sort">
-					<select bind:value={value.sort}>
-						<option value={null}>None</option>
-						<option value="asc">Ascending</option>
-						<option value="desc">Descending</option>
-					</select>
-				</Label>
+					<Label label="Sort">
+						<select bind:value={value.sort}>
+							<option value={null}>None</option>
+							<option value="asc">Ascending</option>
+							<option value="desc">Descending</option>
+						</select>
+					</Label>
 
-				<Label label="Filter">
-					{#snippet header()}
-						<Tooltip documentationLink="https://www.ag-grid.com/javascript-data-grid/filtering/">
-							Filtering allows you to limit the rows displayed in your grid to those that match
-							criteria you specify.
-						</Tooltip>
-					{/snippet}
-					<Toggle
-						on:pointerdown={(e) => {
-							e?.stopPropagation()
-						}}
-						options={{ right: 'Enable filter' }}
-						bind:checked={value.filter}
-						size="xs"
-					/>
-				</Label>
-
-				<!--
-			EE only
+					<Label label="Filter">
+						{#snippet header()}
+							<Tooltip documentationLink="https://www.ag-grid.com/javascript-data-grid/filtering/">
+								Filtering allows you to limit the rows displayed in your grid to those that match
+								criteria you specify.
+							</Tooltip>
+						{/snippet}
+						<Toggle
+							on:pointerdown={(e) => {
+								e?.stopPropagation()
+							}}
+							options={{ right: 'Enable filter' }}
+							bind:checked={value.filter}
+							size="xs"
+						/>
+					</Label>
 
-			<Label label="Aggregation function">
-				<SimpleEditor autoHeight lang="javascript" bind:code={value.aggFunc} />
-			</Label>
+					<!--
+				EE only
 
-			<Label label="Pivot">
-				<Toggle bind:checked={value.pivot} size="xs" />
-			</Label>
+				<Label label="Aggregation function">
+					<SimpleEditor autoHeight lang="javascript" bind:code={value.aggFunc} />
+				</Label>
 
-			<Label label="Pivot index">
-				<input type="number" placeholder="pivot index" bind:value={value.pivotIndex} />
-			</Label>
+				<Label label="Pivot">
+					<Toggle bind:checked={value.pivot} size="xs" />
+				</Label>
 
-			<Label label="Pinned">
-				<select bind:value={value.pinned}>
-					<option value={null}>None</option>
-					<option value="left">Left</option>
-					<option value="right">Right</option>
-				</select>
-			</Label>
+				<Label label="Pivot index">
+					<input type="number" placeholder="pivot index" bind:value={value.pivotIndex} />
+				</Label>
 
-			<Label label="Row group">
-				<Toggle bind:checked={value.rowGroup} size="xs" />
-			</Label>
+				<Label label="Pinned">
+					<select bind:value={value.pinned}>
+						<option value={null}>None</option>
+						<option value="left">Left</option>
+						<option value="right">Right</option>
+					</select>
+				</Label>
 
-			<Label label="Row group index">
-				<input type="number" placeholder="row group index" bind:value={value.rowGroupIndex} />
-			</Label>
-			 -->
+				<Label label="Row group">
+					<Toggle bind:checked={value.rowGroup} size="xs" />
+				</Label>
 
-				<Label label="Type">
-					<select bind:value={value.cellRendererType}>
-						<option value="text">Text</option>
-						<option value="link">Link</option>
-					</select>
+				<Label label="Row group index">
+					<input type="number" placeholder="row group index" bind:value={value.rowGroupIndex} />
 				</Label>
+				 -->
+
+					<Label label="Type">
+						<select bind:value={value.cellRendererType}>
+							<option value="text">Text</option>
+							<option value="link">Link</option>
+						</select>
+					</Label>
 
-				{#if value.cellRendererType === 'link'}
-					<Alert type="info" title="Label" size="xs">
-						They are two ways to define a link:
-						<ul class="list-disc list-inside">
-							<li>
-								<strong>String</strong>: The string will be used as the link and the label.
-							</li>
-							<li>
-								<strong>Object</strong>: The object must have a <code>href</code> and a
-								<code>label</code> property.
-							</li>
-						</ul>
-					</Alert>
+					{#if value.cellRendererType === 'link'}
+						<Alert type="info" title="Label" size="xs">
+							They are two ways to define a link:
+							<ul class="list-disc list-inside">
+								<li>
+									<strong>String</strong>: The string will be used as the link and the label.
+								</li>
+								<li>
+									<strong>Object</strong>: The object must have a <code>href</code> and a
+									<code>label</code> property.
+								</li>
+							</ul>
+						</Alert>
+					{/if}
 				{/if}
 			</div>
 		{/if}

package/package/components/workspaceSettings/AISettings.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { WorkspaceService } from '../../gen';
 import { setCopilotInfo, workspaceStore } from '../../stores';
 import { sendUserToast } from '../../toast';
-import { AI_DEFAULT_MODELS, fetchAvailableModels } from '../copilot/lib';
+import { AI_PROVIDERS, fetchAvailableModels } from '../copilot/lib';
 import TestAiKey from '../copilot/TestAIKey.svelte';
 import Description from '../Description.svelte';
 import Label from '../Label.svelte';
@@ -13,21 +13,16 @@ import MultiSelect from '../select/MultiSelect.svelte';
 import { safeSelectItems } from '../select/utils.svelte';
 import Badge from '../common/badge/Badge.svelte';
 import Tooltip from '../Tooltip.svelte';
-const aiProviderLabels = [
-    ['openai', 'OpenAI'],
-    ['azure_openai', 'Azure OpenAI'],
-    ['anthropic', 'Anthropic'],
-    ['mistral', 'Mistral'],
-    ['deepseek', 'DeepSeek'],
-    ['googleai', 'Google AI'],
-    ['groq', 'Groq'],
-    ['openrouter', 'OpenRouter'],
-    ['togetherai', 'Together AI'],
-    ['customai', 'Custom AI']
-];
-let { aiProviders = $bindable(), codeCompletionModel = $bindable(), defaultModel = $bindable(), usingOpenaiClientCredentialsOauth = $bindable() } = $props();
+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';
+const MAX_CUSTOM_PROMPT_LENGTH = 5000;
+let { aiProviders = $bindable(), codeCompletionModel = $bindable(), defaultModel = $bindable(), customPrompts = $bindable(), usingOpenaiClientCredentialsOauth = $bindable() } = $props();
 let fetchedAiModels = $state(false);
-let availableAiModels = $state(Object.fromEntries(aiProviderLabels.map(([provider]) => [provider, AI_DEFAULT_MODELS[provider]])));
+let availableAiModels = $state(Object.fromEntries(Object.keys(AI_PROVIDERS).map((provider) => [provider, AI_PROVIDERS[provider].defaultModels])));
+// Custom system prompt settings
+let selectedAiMode = $state(AIMode.ASK);
 let selectedAiModels = $derived(Object.values(aiProviders).flatMap((p) => p.models));
 let modelProviderMap = $derived(Object.fromEntries(Object.entries(aiProviders).flatMap(([provider, config]) => config.models.map((m) => [m, provider]))));
 $effect(() => {
@@ -49,7 +44,7 @@ $effect(() => {
             }
             catch (e) {
                 console.error('failed to fetch models for provider', provider, e);
-                availableAiModels[provider] = AI_DEFAULT_MODELS[provider];
+                availableAiModels[provider] = AI_PROVIDERS[provider].defaultModels;
             }
         }
         fetchedAiModels = true;
@@ -63,10 +58,15 @@ async function editCopilotConfig() {
         const default_model = defaultModel && modelProviderMap[defaultModel]
             ? { model: defaultModel, provider: modelProviderMap[defaultModel] }
             : undefined;
+        // Convert customPrompts to include only non-empty prompts
+        const custom_prompts = Object.entries(customPrompts)
+            .filter(([_, prompt]) => prompt.trim().length > 0)
+            .reduce((acc, [mode, prompt]) => ({ ...acc, [mode]: prompt }), {});
         const config = {
             providers: aiProviders,
             code_completion_model,
-            default_model
+            default_model,
+            custom_prompts: Object.keys(custom_prompts).length > 0 ? custom_prompts : undefined
         };
         await WorkspaceService.editCopilotConfig({
             workspace: $workspaceStore,
@@ -91,7 +91,7 @@ async function onAiProviderChange(provider) {
         }
         catch (e) {
             console.error('failed to fetch models for provider', provider, e);
-            availableAiModels[provider] = AI_DEFAULT_MODELS[provider];
+            availableAiModels[provider] = AI_PROVIDERS[provider].defaultModels;
         }
     }
     if (aiProviders[provider]?.resource_path &&
@@ -115,12 +115,12 @@ async function onAiProviderChange(provider) {
 	<div class="flex flex-col gap-2">
 		<p class="font-semibold">AI Providers</p>
 		<div class="flex flex-col gap-4">
-			{#each aiProviderLabels as [provider, label]}
+			{#each Object.entries(AI_PROVIDERS) as [provider, details]}
 				<div class="flex flex-col gap-2">
 					<div class="flex flex-row gap-2">
 						<Toggle
 							options={{
-								right: label
+								right: details.label
 							}}
 							checked={!!aiProviders[provider]}
 							on:change={(e) => {
@@ -186,12 +186,12 @@ async function onAiProviderChange(provider) {
 										() => aiProviders[provider].resource_path,
 										(v) => {
 											aiProviders[provider].resource_path = v
-											onAiProviderChange(provider)
+											onAiProviderChange(provider as AIProvider)
 										}
 									}
 								/>
 								<TestAiKey
-									aiProvider={provider}
+									aiProvider={provider as AIProvider}
 									resourcePath={aiProviders[provider].resource_path}
 									model={aiProviders[provider].models[0]}
 								/>
@@ -276,6 +276,58 @@ async function onAiProviderChange(provider) {
 		</div>
 	{/if}
 
+	{#if Object.keys(aiProviders).length > 0}
+		<div class="flex flex-col gap-2">
+			<p class="font-semibold">Custom system prompts</p>
+			<div class="flex flex-col gap-4">
+				<Label label="AI Mode">
+					<ToggleButtonGroup
+						bind:selected={selectedAiMode}
+						on:selected={({ detail }) => {
+							selectedAiMode = detail
+						}}
+					>
+						{#snippet children({ item })}
+							{#each Object.values(AIMode) as mode}
+								<div class="relative">
+									<ToggleButton
+										value={mode}
+										label={mode.charAt(0).toUpperCase() + mode.slice(1)}
+										{item}
+									/>
+									{#if customPrompts[mode]?.length > 0}
+										<div
+											class="absolute -top-1 -right-1 w-2 h-2 bg-blue-500 rounded-full border border-surface"
+										></div>
+									{/if}
+								</div>
+							{/each}
+						{/snippet}
+					</ToggleButtonGroup>
+				</Label>
+
+				<Label
+					label="Custom system prompt for {selectedAiMode.charAt(0).toUpperCase() +
+						selectedAiMode.slice(1)} Mode"
+				>
+					<textarea
+						bind:value={customPrompts[selectedAiMode]}
+						placeholder="Enter a custom system prompt for {selectedAiMode} mode."
+						class="w-full min-h-24 p-2 border border-gray-200 dark:border-gray-700 rounded-md bg-surface text-primary resize-y"
+						rows="4"
+						maxlength={MAX_CUSTOM_PROMPT_LENGTH}
+						use:autosize
+					></textarea>
+					<div class="flex justify-end mt-1">
+						<span class="text-xs text-secondary">
+							{(customPrompts[selectedAiMode] ?? '').length}/{MAX_CUSTOM_PROMPT_LENGTH} characters
+						</span>
+					</div>
+				</Label>
+			</div>
+		</div>
+	{/if}
+
 	<Button
 		wrapperClasses="self-start"
 		disabled={!Object.values(aiProviders).every((p) => p.resource_path) ||

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

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