windmill-components 1.613.4 → 1.623.1

package/package/components/text_input/TextInput.svelte.d.ts

@@ -24,7 +24,6 @@ declare function $$render<UnderlyingInputElT extends 'input' | 'textarea' = 'inp
     props: Props<UnderlyingInputElT>;
     exports: {
         focus: () => void;
-        select: () => void;
     };
     bindings: "value";
     slots: {};
@@ -37,7 +36,6 @@ declare class __sveltets_Render<UnderlyingInputElT extends 'input' | 'textarea'
     bindings(): "value";
     exports(): {
         focus: () => void;
-        select: () => void;
     };
 }
 interface $$IsomorphicComponent {

package/package/components/triggers/utils.js

@@ -5,6 +5,7 @@ import MqttIcon from '../icons/MqttIcon.svelte';
 import AwsIcon from '../icons/AwsIcon.svelte';
 import GoogleCloudIcon from '../icons/GoogleCloudIcon.svelte';
 import SchedulePollIcon from '../icons/SchedulePollIcon.svelte';
+import {} from './';
 import { saveScheduleFromCfg } from '../flows/scheduleUtils';
 import { saveHttpRouteFromCfg } from './http/utils';
 import { saveWebsocketTriggerFromCfg } from './websocket/utils';

package/package/components/tutorials/FlowBuilderLiveTutorial.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { getContext } from 'svelte';
-import { isFlowTainted, triggerPointerDown, clickButtonBySelector, DELAY_SHORT, DELAY_MEDIUM, DELAY_LONG, DELAY_ANIMATION, DELAY_ANIMATION_LONG, DELAY_TYPING, DELAY_CODE_CHAR, DELAY_CODE_NEWLINE, moveCursorToElement, createFakeCursor } from './utils';
+import { isFlowTainted, triggerPointerDown, clickButtonBySelector } from './utils';
 import Tutorial from './Tutorial.svelte';
 import { initFlow } from '../flows/flowStore.svelte';
 import { loadFlowModuleState } from '../flows/flowStateUtils.svelte';
@@ -16,6 +16,15 @@ let step3Complete = $state(false);
 let step4Complete = $state(false);
 let step5Complete = $state(false);
 let step6Complete = $state(false);
+// Constants for delays
+const DELAY_SHORT = 100;
+const DELAY_MEDIUM = 300;
+const DELAY_LONG = 500;
+const DELAY_ANIMATION = 1500;
+const DELAY_ANIMATION_LONG = 2500;
+const DELAY_TYPING = 50;
+const DELAY_CODE_CHAR = 2;
+const DELAY_CODE_NEWLINE = 5;
 // Helper function to get driver overlay
 function getDriverOverlay() {
     return document.querySelector('.driver-overlay');
@@ -61,9 +70,29 @@ function cleanupCustomOverlay() {
         customOverlay.remove();
     }
 }
-// Helper function to create and animate a fake cursor (extended version with start element support)
-async function createFakeCursorWithStart(startElement, endElement, transitionDuration = 1.5) {
-    const fakeCursor = createFakeCursor();
+// Helper function to move cursor to element (for continuous cursor movement)
+async function moveCursorToElement(cursor, element, duration = DELAY_ANIMATION) {
+    const rect = element.getBoundingClientRect();
+    cursor.style.transition = `all ${duration / 1000}s ease-in-out`;
+    cursor.style.left = `${rect.left + rect.width / 2}px`;
+    cursor.style.top = `${rect.top + rect.height / 2}px`;
+    await wait(duration);
+}
+// Helper function to create and animate a fake cursor
+async function createFakeCursor(startElement, endElement, transitionDuration = 1.5) {
+    const fakeCursor = document.createElement('div');
+    fakeCursor.style.cssText = `
+			position: fixed;
+			width: 20px;
+			height: 20px;
+			border-radius: 50%;
+			background-color: rgba(59, 130, 246, 0.8);
+			border: 2px solid white;
+			pointer-events: none;
+			z-index: 10000;
+			transition: all ${transitionDuration}s ease-in-out;
+		`;
+    document.body.appendChild(fakeCursor);
     const endRect = endElement.getBoundingClientRect();
     let startX, startY;
     if (startElement) {
@@ -252,7 +281,7 @@ const flowJson = {
 					// Animate cursor to the add step button
 					const button = document.querySelector('#flow-editor-add-step-0') as HTMLElement
 					if (button) {
-						const fakeCursor1 = await createFakeCursorWithStart(null, button, 1.5)
+						const fakeCursor1 = await createFakeCursor(null, button, 1.5)
 						await wait(DELAY_SHORT)
 						button.click()
 						fakeCursor1.remove()
@@ -270,7 +299,7 @@ const flowJson = {
 
 					if (bunSpan) {
 						// Animate cursor from add step button to TypeScript (Bun) span
-						const fakeCursor2 = await createFakeCursorWithStart(button, bunSpan, 1.5)
+						const fakeCursor2 = await createFakeCursor(button, bunSpan, 1.5)
 						await wait(DELAY_MEDIUM)
 						fakeCursor2.remove()
 

package/package/components/tutorials/TroubleshootFlowTutorial.svelte

@@ -4,7 +4,6 @@ import { initFlow } from '../flows/flowStore.svelte';
 import { wait } from '../../utils';
 import { sendUserToast } from '../../toast';
 import { updateProgress } from '../../tutorialUtils';
-import { DELAY_SHORT, DELAY_MEDIUM, DELAY_LONG, createFakeCursor } from './utils';
 let { index } = $props();
 const { flowStore, flowStateStore } = getContext('FlowEditorContext');
 let tutorial = undefined;
@@ -18,6 +17,10 @@ let stepComplete = $state({
     6: false,
     7: false
 });
+// Constants for delays
+const DELAY_SHORT = 100;
+const DELAY_MEDIUM = 300;
+const DELAY_LONG = 500;
 // Constants for cursor animation
 const CURSOR_START_OFFSET = -100;
 const CURSOR_CLICK_SCALE = 0.8;
@@ -40,9 +43,21 @@ function checkStepComplete(step) {
     }
     return true;
 }
-// Helper function to create and animate a fake cursor with start position
-async function createFakeCursorWithStart(startElement, endElement, transitionDuration = 1.5) {
-    const fakeCursor = createFakeCursor();
+// Helper function to create and animate a fake cursor
+async function createFakeCursor(startElement, endElement, transitionDuration = 1.5) {
+    const fakeCursor = document.createElement('div');
+    fakeCursor.style.cssText = `
+			position: fixed;
+			width: 20px;
+			height: 20px;
+			border-radius: 50%;
+			background-color: rgba(59, 130, 246, 0.8);
+			border: 2px solid white;
+			pointer-events: none;
+			z-index: 10000;
+			transition: all ${transitionDuration}s ease-in-out;
+		`;
+    document.body.appendChild(fakeCursor);
     const endRect = endElement.getBoundingClientRect();
     let startX, startY;
     if (startElement) {
@@ -73,7 +88,7 @@ function getElementBySelector(selector) {
 }
 // Helper function to animate a fake cursor click
 async function animateFakeCursorClick(element, transitionDuration = 1.5, options) {
-    const fakeCursor = await createFakeCursorWithStart(null, element, transitionDuration);
+    const fakeCursor = await createFakeCursor(null, element, transitionDuration);
     await wait(DELAY_MEDIUM);
     // Animate click (shrink cursor briefly)
     fakeCursor.style.transform = `scale(${CURSOR_CLICK_SCALE})`;

package/package/components/tutorials/utils.d.ts

@@ -1,13 +1,5 @@
 import type { FlowModule, OpenFlow } from '../../gen';
 import type { App } from '../apps/types';
-export declare const DELAY_SHORT = 100;
-export declare const DELAY_MEDIUM = 300;
-export declare const DELAY_LONG = 500;
-export declare const DELAY_ANIMATION = 1500;
-export declare const DELAY_ANIMATION_LONG = 2500;
-export declare const DELAY_TYPING = 50;
-export declare const DELAY_CODE_CHAR = 2;
-export declare const DELAY_CODE_NEWLINE = 5;
 export declare function setInputBySelector(selector: string, value: string): void;
 export declare function clickButtonBySelector(selector: string): void;
 export declare function clickFirstButtonBySelector(selector: string): void;
@@ -21,11 +13,3 @@ export declare function updateInlineRunnableCode(app: App, componentId: string,
 export declare function connectComponentSourceToOutput(app: App, componentId: string, targetId: string): void;
 export declare function connectInlineRunnableInputToComponentOutput(app: App, sourceComponentId: string, sourceField: string, targetComponentId: string, targetField: string, fieldType?: string): void;
 export declare function waitForElementLoading(selector: string, callback: () => void, interval?: number, maxAttempts?: number): void;
-export declare function moveCursorToElement(cursor: HTMLElement, element: HTMLElement, duration?: number): Promise<void>;
-export declare function createFakeCursor(): HTMLElement;
-export declare function createFakeCursorWithStart(startElement: HTMLElement | null, endElement: HTMLElement, transitionDuration?: number): Promise<HTMLElement>;
-export declare function animateFakeCursorClick(element: HTMLElement, transitionDuration?: number, options?: {
-    usePointerEvents?: boolean;
-    startElement?: HTMLElement | null;
-}): Promise<void>;
-export declare function animateCursorToElementAndClick(cursor: HTMLElement, element: HTMLElement, startOffset?: number): Promise<void>;

package/package/components/tutorials/utils.js

@@ -2,16 +2,6 @@ import { deepEqual } from 'fast-equals';
 import { emptyApp } from '../apps/editor/appUtils';
 import { findGridItem } from '../apps/editor/appUtilsCore';
 import { isRunnableByName } from '../apps/inputType';
-import { wait } from '../../utils';
-// Tutorial animation delay constants
-export const DELAY_SHORT = 100;
-export const DELAY_MEDIUM = 300;
-export const DELAY_LONG = 500;
-export const DELAY_ANIMATION = 1500;
-export const DELAY_ANIMATION_LONG = 2500;
-export const DELAY_TYPING = 50;
-export const DELAY_CODE_CHAR = 2;
-export const DELAY_CODE_NEWLINE = 5;
 export function setInputBySelector(selector, value) {
     const input = document.querySelector(selector);
     if (input) {
@@ -154,89 +144,3 @@ export function waitForElementLoading(selector, callback, interval = 50, maxAtte
         attempts++;
     }, interval);
 }
-// Helper function to move cursor to element (for continuous cursor movement in tutorials)
-export async function moveCursorToElement(cursor, element, duration = DELAY_ANIMATION) {
-    const rect = element.getBoundingClientRect();
-    cursor.style.transition = `all ${duration / 1000}s ease-in-out`;
-    cursor.style.left = `${rect.left + rect.width / 2}px`;
-    cursor.style.top = `${rect.top + rect.height / 2}px`;
-    await wait(duration);
-}
-// Helper function to create a fake cursor element for tutorial animations
-export function createFakeCursor() {
-    const fakeCursor = document.createElement('div');
-    fakeCursor.style.cssText = `
-		position: fixed;
-		width: 20px;
-		height: 20px;
-		border-radius: 50%;
-		background-color: rgba(59, 130, 246, 0.8);
-		border: 2px solid white;
-		pointer-events: none;
-		z-index: 10000;
-		transition: all 1.5s ease-in-out;
-	`;
-    document.body.appendChild(fakeCursor);
-    return fakeCursor;
-}
-// Constants for cursor animation
-const CURSOR_START_OFFSET = -100;
-const CURSOR_CLICK_SCALE = 0.8;
-// Helper function to create and animate a fake cursor with start position
-export async function createFakeCursorWithStart(startElement, endElement, transitionDuration = 1.5) {
-    const fakeCursor = createFakeCursor();
-    const endRect = endElement.getBoundingClientRect();
-    let startX, startY;
-    if (startElement) {
-        const startRect = startElement.getBoundingClientRect();
-        startX = startRect.left + startRect.width / 2;
-        startY = startRect.top + startRect.height / 2;
-    }
-    else {
-        startX = endRect.left + CURSOR_START_OFFSET;
-        startY = endRect.top + endRect.height / 2;
-    }
-    fakeCursor.style.left = `${startX}px`;
-    fakeCursor.style.top = `${startY}px`;
-    await wait(DELAY_SHORT);
-    fakeCursor.style.left = `${endRect.left + endRect.width / 2}px`;
-    fakeCursor.style.top = `${endRect.top + endRect.height / 2}px`;
-    await wait(transitionDuration * 1000);
-    return fakeCursor;
-}
-// Helper function to animate a fake cursor click
-export async function animateFakeCursorClick(element, transitionDuration = 1.5, options) {
-    const fakeCursor = await createFakeCursorWithStart(options?.startElement ?? null, element, transitionDuration);
-    await wait(DELAY_MEDIUM);
-    // Animate click (shrink cursor briefly)
-    fakeCursor.style.transform = `scale(${CURSOR_CLICK_SCALE})`;
-    await wait(DELAY_SHORT);
-    fakeCursor.style.transform = 'scale(1)';
-    await wait(DELAY_SHORT);
-    // Trigger pointer events if needed (flow graph uses pointer events instead of click)
-    if (options?.usePointerEvents) {
-        element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
-        element.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }));
-    }
-    // Click the element
-    element.click();
-    await wait(DELAY_SHORT);
-    // Remove fake cursor
-    fakeCursor.remove();
-}
-// Helper function to animate cursor to element and click (for reusing a cursor across multiple clicks)
-export async function animateCursorToElementAndClick(cursor, element, startOffset = CURSOR_START_OFFSET) {
-    const rect = element.getBoundingClientRect();
-    // Set initial position (off-screen to the left)
-    cursor.style.left = `${rect.left + startOffset}px`;
-    cursor.style.top = `${rect.top + rect.height / 2}px`;
-    await wait(DELAY_SHORT);
-    // Animate to target position
-    cursor.style.left = `${rect.left + rect.width / 2}px`;
-    cursor.style.top = `${rect.top + rect.height / 2}px`;
-    await wait(DELAY_ANIMATION);
-    await wait(DELAY_MEDIUM);
-    // Click on the element
-    element.click();
-    await wait(DELAY_SHORT);
-}

package/package/components/vscode.js

@@ -55,13 +55,13 @@ export function buildWorkerDefinition() {
                 return new Worker(new URL('@codingame/monaco-vscode-standalone-css-language-features/worker', import.meta.url), {
                     type: 'module'
                 });
+            },
+            graphql: () => {
+                console.log('Creating graphql worker');
+                return new Worker(new URL(`../monaco_workers/graphql.worker.bundle.js`, import.meta.url), {
+                    name: 'graphql'
+                });
             }
-            // graphql: () => {
-            // 	console.log('Creating graphql worker')
-            // 	return new Worker(new URL(`../monaco_workers/graphql.worker.bundle.js`, import.meta.url), {
-            // 		name: 'graphql'
-            // 	})
-            // }
         };
         const workerFunc = workerLoaders[selector];
         if (workerFunc !== undefined) {

package/package/components/workspaceSettings/AISettings.svelte

@@ -7,7 +7,7 @@ import Description from '../Description.svelte';
 import Label from '../Label.svelte';
 import ResourcePicker from '../ResourcePicker.svelte';
 import Toggle from '../Toggle.svelte';
-import Select from '../select/Select.svelte';
+import ArgEnum from '../ArgEnum.svelte';
 import Button from '../common/button/Button.svelte';
 import MultiSelect from '../select/MultiSelect.svelte';
 import { safeSelectItems } from '../select/utils.svelte';
@@ -15,20 +15,10 @@ import Badge from '../common/badge/Badge.svelte';
 import Tooltip from '../Tooltip.svelte';
 import ModelTokenLimits from './ModelTokenLimits.svelte';
 import { setCopilotInfo } from '../../aiStore';
-import AIPromptsModal from '../settings/AIPromptsModal.svelte';
-import { Save, Settings } from 'lucide-svelte';
-import { slide } from 'svelte/transition';
+import CustomAIPrompts from '../copilot/CustomAIPrompts.svelte';
 let { aiProviders = $bindable(), codeCompletionModel = $bindable(), defaultModel = $bindable(), customPrompts = $bindable(), maxTokensPerModel = $bindable(), usingOpenaiClientCredentialsOauth = $bindable(), onSave } = $props();
 let fetchedAiModels = $state(false);
 let availableAiModels = $state(Object.fromEntries(Object.keys(AI_PROVIDERS).map((provider) => [provider, AI_PROVIDERS[provider].defaultModels])));
-let modalOpen = $state(false);
-let initialPrompts = $state($state.snapshot(customPrompts));
-let hasPromptsChanges = $derived(Array.from(new Set([...Object.keys(customPrompts), ...Object.keys(initialPrompts)])).some((key) => {
-    const currentValue = customPrompts[key] || '';
-    const initialValue = initialPrompts[key] || '';
-    return currentValue !== initialValue;
-}));
-let promptCount = $derived(Object.values(customPrompts).filter((p) => p?.trim().length > 0).length);
 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(() => {
@@ -56,10 +46,6 @@ $effect(() => {
         fetchedAiModels = true;
     })();
 });
-function resetPrompts() {
-    customPrompts = { ...initialPrompts };
-    sendUserToast('Reset to last saved state');
-}
 async function editCopilotConfig() {
     if (Object.keys(aiProviders ?? {}).length > 0) {
         const code_completion_model = codeCompletionModel && modelProviderMap[codeCompletionModel]
@@ -92,8 +78,7 @@ async function editCopilotConfig() {
         });
         setCopilotInfo({});
     }
-    sendUserToast(`AI settings updated`);
-    initialPrompts = { ...customPrompts }; // Update initial prompts after successful save
+    sendUserToast(`Copilot settings updated`);
     onSave?.();
 }
 async function onAiProviderChange(provider) {
@@ -113,36 +98,37 @@ async function onAiProviderChange(provider) {
         aiProviders[provider].models = availableAiModels[provider].slice(0, 1);
     }
 }
-const autocompleteModels = $derived(selectedAiModels.filter((m) => m.startsWith('codestral-') && !m.startsWith('codestral-embed')));
 </script>
 
-<div class="flex flex-col gap-4 mt-4">
+<div class="flex flex-col gap-4 my-8">
 	<div class="flex flex-col gap-1">
-		<div class="text-emphasis text-sm font-semibold flex flex-row gap-2 justify-between">
-			Windmill AI <Button
-				variant="accent"
-				unifiedSize="md"
-				wrapperClasses="self-start"
-				disabled={!Object.values(aiProviders).every((p) => p.resource_path) ||
-					(codeCompletionModel != undefined && codeCompletionModel.length === 0) ||
-					(Object.keys(aiProviders).length > 0 && !defaultModel)}
-				onClick={editCopilotConfig}
-				startIcon={{ icon: Save }}
-			>
-				Save AI settings
-			</Button></div
-		>
+		<div class="text-emphasis text-sm font-semibold"> Windmill AI</div>
 		<Description link="https://www.windmill.dev/docs/core_concepts/ai_generation">
 			Windmill AI integrates with your favorite AI providers and models.
 		</Description>
 	</div>
 </div>
 
-<div class="flex flex-col gap-8 mt-4">
-	<Label label="AI Providers">
-		<div class="flex flex-col gap-4 p-4 rounded-md border bg-surface-tertiary">
+<div class="flex flex-row-reverse gap-2 pb-4">
+	<Button
+		variant="accent"
+		size="xl"
+		wrapperClasses="self-start"
+		disabled={!Object.values(aiProviders).every((p) => p.resource_path) ||
+			(codeCompletionModel != undefined && codeCompletionModel.length === 0) ||
+			(Object.keys(aiProviders).length > 0 && !defaultModel)}
+		on:click={editCopilotConfig}
+	>
+		Save
+	</Button>
+</div>
+
+<div class="flex flex-col gap-8">
+	<div class="flex flex-col gap-2">
+		<p class="font-semibold text-xs text-emphasis">AI Providers</p>
+		<div class="flex flex-col gap-4">
 			{#each Object.entries(AI_PROVIDERS) as [provider, details]}
-				<div class="flex flex-col">
+				<div class="flex flex-col gap-2">
 					<div class="flex flex-row gap-2">
 						<Toggle
 							options={{
@@ -200,33 +186,28 @@ const autocompleteModels = $derived(selectedAiModels.filter((m) => m.startsWith(
 					</div>
 
 					{#if aiProviders[provider]}
-						<div
-							class="mb-4 flex flex-col gap-6 border p-4 rounded-md mt-2"
-							transition:slide|local={{ duration: 150 }}
-						>
-							<Label label="Resource">
-								<div class="flex flex-row gap-1">
-									<ResourcePicker
-										selectFirst
-										resourceType={provider === 'openai' && usingOpenaiClientCredentialsOauth
-											? 'openai_client_credentials_oauth'
-											: provider}
-										initialValue={aiProviders[provider].resource_path}
-										bind:value={
-											() => aiProviders[provider].resource_path || undefined,
-											(v) => {
-												aiProviders[provider].resource_path = v ?? ''
-												onAiProviderChange(provider as AIProvider)
-											}
+						<div class="mb-4 flex flex-col gap-2">
+							<div class="flex flex-row gap-1">
+								<ResourcePicker
+									selectFirst
+									resourceType={provider === 'openai' && usingOpenaiClientCredentialsOauth
+										? 'openai_client_credentials_oauth'
+										: provider}
+									initialValue={aiProviders[provider].resource_path}
+									bind:value={
+										() => aiProviders[provider].resource_path || undefined,
+										(v) => {
+											aiProviders[provider].resource_path = v ?? ''
+											onAiProviderChange(provider as AIProvider)
 										}
-									/>
-									<TestAiKey
-										aiProvider={provider as AIProvider}
-										resourcePath={aiProviders[provider].resource_path}
-										model={aiProviders[provider].models[0]}
-									/>
-								</div>
-							</Label>
+									}
+								/>
+								<TestAiKey
+									aiProvider={provider as AIProvider}
+									resourcePath={aiProviders[provider].resource_path}
+									model={aiProviders[provider].models[0]}
+								/>
+							</div>
 
 							<Label label="Enabled models">
 								<MultiSelect
@@ -239,98 +220,79 @@ const autocompleteModels = $derived(selectedAiModels.filter((m) => m.startsWith(
 									onCreateItem={(item) =>
 										(aiProviders[provider].models = [...aiProviders[provider].models, item])}
 								/>
-								<p class="text-2xs text-hint">
-									If you don't see the model you want, you can type it manually in the selector.
-								</p>
 							</Label>
+							<p class="text-xs">
+								If you don't see the model you want, you can type it manually in the selector.
+							</p>
 						</div>
 					{/if}
 				</div>
 			{/each}
 		</div>
-	</Label>
-
-	<Label label="Default chat model">
-		{#key Object.keys(aiProviders).length}
-			<Select
-				items={safeSelectItems(selectedAiModels)}
-				bind:value={defaultModel}
-				disabled={false}
-				placeholder="Select a default model"
-				size="sm"
-			/>
-		{/key}
-	</Label>
-
-	<!-- Code completion group for animation purposes -->
-	<div>
-		<Label label="Code completion">
-			<Toggle
-				on:change={(e) => {
-					if (e.detail) {
-						codeCompletionModel = autocompleteModels[0] ?? ''
-					} else {
-						codeCompletionModel = undefined
-					}
-				}}
-				checked={codeCompletionModel != undefined}
-				disabled={autocompleteModels.length == 0}
-				options={{
-					right: 'Enable code completion',
-					rightTooltip: 'We currently only support Mistral Codestral models for code completion.'
-				}}
-			/>
-		</Label>
-
-		{#if codeCompletionModel != undefined}
-			<div transition:slide|local={{ duration: 150 }} class="mt-6">
-				<Label label="Code completion model">
-					<Select
-						items={safeSelectItems(autocompleteModels)}
-						bind:value={codeCompletionModel}
-						disabled={false}
-						placeholder="Select a code completion model"
-						size="sm"
-					/>
-				</Label>
-			</div>
-		{/if}
 	</div>
 
-	<ModelTokenLimits {aiProviders} bind:maxTokensPerModel />
+	{#if Object.keys(aiProviders).length > 0}
+		{@const autocompleteModels = selectedAiModels.filter(
+			(m) => m.startsWith('codestral-') && !m.startsWith('codestral-embed')
+		)}
+		<div class="flex flex-col gap-2">
+			<p class="font-semibold">Settings</p>
+			<div class="flex flex-col gap-4">
+				<Label label="Default chat model">
+					{#key Object.keys(aiProviders).length}
+						<ArgEnum
+							enum_={selectedAiModels}
+							bind:value={defaultModel}
+							disabled={false}
+							autofocus={false}
+							defaultValue={undefined}
+							valid={true}
+							create={false}
+						/>
+					{/key}
+				</Label>
 
-	<Label label="Custom system prompts">
-		<p class="text-xs text-secondary">
-			Customize AI behavior with workspace-level system prompts. These apply to all workspace
-			members.
-		</p>
+				<div class="flex flex-col gap-2">
+					<Toggle
+						on:change={(e) => {
+							if (e.detail) {
+								codeCompletionModel = autocompleteModels[0] ?? ''
+							} else {
+								codeCompletionModel = undefined
+							}
+						}}
+						checked={codeCompletionModel != undefined}
+						disabled={autocompleteModels.length == 0}
+						options={{
+							right: 'Code completion (Codestral only)',
+							rightTooltip:
+								'We currently only support Mistral Codestral models for code completion.'
+						}}
+					/>
 
-		<div class="flex items-center gap-2 pt-1">
-			<Button
-				onclick={() => (modalOpen = true)}
-				variant="default"
-				unifiedSize="sm"
-				startIcon={{ icon: Settings }}
-				disabled={Object.keys(aiProviders ?? {}).length === 0}
-			>
-				Configure AI prompts
-			</Button>
-			{#if promptCount > 0}
-				<span class="text-xs text-secondary">({promptCount} configured)</span>
-			{/if}
-			{#if hasPromptsChanges}
-				<Badge color="yellow">Unsaved changes</Badge>
-			{/if}
+					{#if codeCompletionModel != undefined}
+						<Label label="Code completion model">
+							<ArgEnum
+								enum_={autocompleteModels}
+								bind:value={codeCompletionModel}
+								disabled={false}
+								autofocus={false}
+								defaultValue={undefined}
+								valid={true}
+								create={false}
+							/>
+						</Label>
+					{/if}
+				</div>
+			</div>
 		</div>
-	</Label>
+	{/if}
 
-	<div class="py-6"></div>
-</div>
+	{#if Object.keys(aiProviders).length > 0}
+		<ModelTokenLimits {aiProviders} bind:maxTokensPerModel />
+	{/if}
 
-<AIPromptsModal
-	bind:open={modalOpen}
-	bind:customPrompts
-	onReset={resetPrompts}
-	hasChanges={hasPromptsChanges}
-	isWorkspaceSettings={true}
-/>
+	{#if Object.keys(aiProviders).length > 0}
+		<CustomAIPrompts bind:customPrompts title="Custom system prompts" />
+	{/if}
+</div>