windmill-components 1.532.0 → 1.542.4

package/package/components/triggers/nats/NatsTriggersConfigSection.svelte.d.ts

@@ -2,10 +2,12 @@ interface Props {
     defaultValues?: Record<string, any> | undefined;
     headless?: boolean;
     natsResourcePath: string;
-    subjects: string[];
-    useJetstream: boolean;
-    streamName: string;
-    consumerName: string;
+    natsCfg: {
+        subjects: string[];
+        use_jetstream: boolean;
+        stream_name?: string;
+        consumer_name?: string;
+    };
     path: string;
     can_write?: boolean;
     showTestingBadge?: boolean;
@@ -27,6 +29,6 @@ declare const NatsTriggersConfigSection: $$__sveltets_2_IsomorphicComponent<Prop
     'valid-config': CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "subjects" | "natsResourcePath" | "useJetstream" | "streamName" | "consumerName">;
+}, {}, {}, "natsResourcePath" | "natsCfg">;
 type NatsTriggersConfigSection = InstanceType<typeof NatsTriggersConfigSection>;
 export default NatsTriggersConfigSection;

package/package/components/triggers/triggers.svelte.d.ts

@@ -27,5 +27,6 @@ export declare class Triggers {
     fetchSqsTriggers(triggersCountStore: Writable<TriggersCount | undefined>, workspaceId: string | undefined, path: string, isFlow: boolean, user?: UserExt | undefined): Promise<void>;
     fetchGcpTriggers(triggersCountStore: Writable<TriggersCount | undefined>, workspaceId: string | undefined, path: string, isFlow: boolean, user?: UserExt | undefined): Promise<void>;
     fetchHttpTriggers(triggersCountStore: Writable<TriggersCount | undefined>, workspaceId: string | undefined, path: string, isFlow: boolean, user?: UserExt | undefined): Promise<void>;
+    fetchEmailTriggers(triggersCountStore: Writable<TriggersCount | undefined>, workspaceId: string | undefined, path: string, isFlow: boolean, user?: UserExt | undefined): Promise<void>;
     fetchTriggers(triggersCountStore: Writable<TriggersCount | undefined>, workspaceId: string | undefined, path: string, isFlow: boolean, primarySchedule?: ScheduleTrigger | undefined | false, user?: UserExt | undefined): Promise<void>;
 }

package/package/components/triggers/triggers.svelte.js

@@ -1,4 +1,4 @@
-import { KafkaTriggerService, MqttTriggerService, NatsTriggerService, PostgresTriggerService, ScheduleService, SqsTriggerService, WebsocketTriggerService, HttpTriggerService, GcpTriggerService } from '../../gen';
+import { KafkaTriggerService, MqttTriggerService, NatsTriggerService, PostgresTriggerService, ScheduleService, SqsTriggerService, WebsocketTriggerService, HttpTriggerService, GcpTriggerService, EmailTriggerService } from '../../gen';
 import { getLightConfig, sortTriggers, updateTriggersCount } from './utils';
 import { canWrite, formatCron, generateRandomString } from '../../utils';
 export class Triggers {
@@ -316,6 +316,27 @@ export class Triggers {
             console.error('Failed to fetch HTTP triggers:', error);
         }
     }
+    async fetchEmailTriggers(triggersCountStore, workspaceId, path, isFlow, user = undefined) {
+        if (!workspaceId)
+            return;
+        try {
+            const emailTriggers = await EmailTriggerService.listEmailTriggers({
+                workspace: workspaceId,
+                path,
+                isFlow
+            });
+            const emailCount = this.updateTriggers(emailTriggers, 'email', user);
+            triggersCountStore.update((triggersCount) => {
+                return {
+                    ...(triggersCount ?? {}),
+                    email_count: emailCount
+                };
+            });
+        }
+        catch (error) {
+            console.error('Failed to fetch email triggers:', error);
+        }
+    }
     async fetchTriggers(triggersCountStore, workspaceId, path, isFlow, primarySchedule = undefined, user = undefined) {
         if (!workspaceId)
             return;
@@ -329,7 +350,8 @@ export class Triggers {
             this.fetchNatsTriggers(triggersCountStore, workspaceId, path, isFlow, user),
             this.fetchMqttTriggers(triggersCountStore, workspaceId, path, isFlow, user),
             this.fetchSqsTriggers(triggersCountStore, workspaceId, path, isFlow, user),
-            this.fetchGcpTriggers(triggersCountStore, workspaceId, path, isFlow, user)
+            this.fetchGcpTriggers(triggersCountStore, workspaceId, path, isFlow, user),
+            this.fetchEmailTriggers(triggersCountStore, workspaceId, path, isFlow, user)
         ]);
     }
 }

package/package/components/triggers/utils.js

@@ -16,6 +16,7 @@ import { saveNatsTriggerFromCfg } from './nats/utils';
 import { saveMqttTriggerFromCfg } from './mqtt/utils';
 import { saveGcpTriggerFromCfg } from './gcp/utils';
 import { emptyString } from '../../utils';
+import { saveEmailTriggerFromCfg } from './email/utils';
 export const CLOUD_DISABLED_TRIGGER_TYPES = [
     'nats',
     'kafka',
@@ -29,6 +30,7 @@ export const CLOUD_DISABLED_TRIGGER_TYPES = [
 export const triggerIconMap = {
     webhook: Webhook,
     email: Mail,
+    default_email: Mail,
     schedule: Calendar,
     http: Route,
     websocket: Unplug,
@@ -52,6 +54,7 @@ export function triggerTypeToCaptureKind(triggerType) {
     const capturableTriggerTypes = [
         'webhook',
         'email',
+        'default_email',
         'http',
         'websocket',
         'postgres',
@@ -71,7 +74,7 @@ export function updateTriggersCount(triggersCountStore, type, action, primaryCfg
     // Map trigger types to their corresponding count property names
     const countPropertyMap = {
         webhook: undefined,
-        email: undefined,
+        default_email: undefined,
         schedule: 'schedule_count',
         http: 'http_routes_count',
         websocket: 'websocket_count',
@@ -81,6 +84,7 @@ export function updateTriggersCount(triggersCountStore, type, action, primaryCfg
         mqtt: 'mqtt_count',
         sqs: 'sqs_count',
         gcp: 'gcp_count',
+        email: 'email_count',
         poll: undefined,
         cli: undefined
     };
@@ -126,6 +130,8 @@ export function triggerKindToTriggerType(kind) {
             return 'webhook';
         case 'emails':
             return 'email';
+        case 'default_emails':
+            return 'default_email';
         case 'schedules':
             return 'schedule';
         case 'routes':
@@ -164,7 +170,7 @@ export async function deployTriggers(triggersToDeploy, workspaceId, isAdmin, use
     // Map of trigger types to their save functions
     const triggerSaveFunctions = {
         webhook: undefined,
-        email: undefined,
+        default_email: undefined,
         schedule: (trigger) => {
             if (trigger.isPrimary && initialPath) {
                 trigger.draftConfig = {
@@ -183,6 +189,7 @@ export async function deployTriggers(triggersToDeploy, workspaceId, isAdmin, use
         mqtt: (trigger) => saveMqttTriggerFromCfg(trigger.path ?? trigger.draftConfig?.path ?? '', trigger.draftConfig ?? {}, !trigger.isDraft, workspaceId, usedTriggerKinds),
         sqs: (trigger) => saveSqsTriggerFromCfg(trigger.path ?? trigger.draftConfig?.path ?? '', trigger.draftConfig ?? {}, !trigger.isDraft, workspaceId, usedTriggerKinds),
         gcp: (trigger) => saveGcpTriggerFromCfg(trigger.path ?? trigger.draftConfig?.path ?? '', trigger.draftConfig ?? {}, !trigger.isDraft, workspaceId, usedTriggerKinds),
+        email: (trigger) => saveEmailTriggerFromCfg(trigger.path ?? trigger.draftConfig?.path ?? '', trigger.draftConfig ?? {}, !trigger.isDraft, workspaceId, isAdmin, usedTriggerKinds),
         poll: undefined,
         cli: undefined
     };
@@ -262,6 +269,9 @@ export function getLightConfig(triggerType, trigger) {
     else if (triggerType === 'gcp') {
         return { gcp_resource_path: trigger.gcp_resource_path, topic: trigger.topic };
     }
+    else if (triggerType === 'email') {
+        return { local_part: trigger.local_part };
+    }
     else {
         return undefined;
     }
@@ -272,7 +282,7 @@ export function getTriggerLabel(trigger) {
     if (type === 'webhook') {
         return 'Webhook';
     }
-    else if (type === 'email') {
+    else if (type === 'default_email') {
         return 'Email';
     }
     else if (type === 'cli') {
@@ -303,6 +313,9 @@ export function getTriggerLabel(trigger) {
     else if (type === 'websocket' && config?.url) {
         return `${config?.url}`;
     }
+    else if (type === 'email' && config?.local_part) {
+        return `${config?.local_part}`;
+    }
     else if (isDraft && draftConfig?.path) {
         return `${draftConfig?.path}`;
     }
@@ -317,7 +330,7 @@ export function sortTriggers(triggers) {
     const triggerTypeOrder = [
         'webhook',
         'cli',
-        'email',
+        'default_email',
         'poll',
         'schedule',
         'http',
@@ -327,7 +340,8 @@ export function sortTriggers(triggers) {
         'nats',
         'mqtt',
         'sqs',
-        'gcp'
+        'gcp',
+        'email'
     ];
     return triggers.sort((a, b) => {
         // Draft triggers always come last

package/package/components/triggers/websocket/WebsocketTriggerEditorInner.svelte

@@ -331,8 +331,8 @@ $effect(() => {
 				</Label>
 			</div>
 
-			{#if !hideTarget}
-				<Section label="Runnable" class="flex flex-col gap-4">
+			<Section label={hideTarget ? 'Runnable options' : 'Runnable'} class="flex flex-col gap-4">
+				{#if !hideTarget}
 					<div>
 						<p class="text-xs mb-1 text-tertiary">
 							Pick a script or flow to be triggered<Required required={true} />
@@ -363,21 +363,21 @@ $effect(() => {
 							{/if}
 						</div>
 					</div>
+				{/if}
 
-					<Toggle
-						checked={can_return_message}
-						on:change={() => {
-							can_return_message = !can_return_message
-						}}
-						options={{
-							right: 'Send runnable result',
-							rightTooltip:
-								'Whether the runnable result should be sent as a message to the websocket server when not null.'
-						}}
-						disabled={!can_write}
-					/>
-				</Section>
-			{/if}
+				<Toggle
+					checked={can_return_message}
+					on:change={() => {
+						can_return_message = !can_return_message
+					}}
+					options={{
+						right: 'Send runnable result',
+						rightTooltip:
+							'Whether the runnable result should be sent as a message to the websocket server when not null.'
+					}}
+					disabled={!can_write}
+				/>
+			</Section>
 
 			<WebsocketEditorConfigSection
 				bind:url

package/package/components/triggers.d.ts

@@ -16,5 +16,5 @@ export type TriggerContext = {
     triggersState: Triggers;
 };
 export declare function setScheduledPollSchedule(triggersState: Triggers, triggersCount: Writable<TriggersCount | undefined>): void;
-export type TriggerKind = 'webhooks' | 'emails' | 'schedules' | 'cli' | 'routes' | 'websockets' | 'scheduledPoll' | 'kafka' | 'nats' | 'postgres' | 'mqtt' | 'sqs' | 'gcp';
+export type TriggerKind = 'webhooks' | 'emails' | 'default_emails' | 'schedules' | 'cli' | 'routes' | 'websockets' | 'scheduledPoll' | 'kafka' | 'nats' | 'postgres' | 'mqtt' | 'sqs' | 'gcp';
 export declare function captureTriggerKindToTriggerKind(kind: CaptureTriggerKind): TriggerKind;

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;