windmill-components 1.558.3 → 1.596.0

package/package/components/tutorials/workspace/WorkspaceOnboardingTutorial.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">import { updateProgress } from '../../../tutorialUtils';
+import Tutorial from '../Tutorial.svelte';
+import { goto } from '$app/navigation';
+import { base } from '../../../base';
+import { page } from '$app/stores';
+let { index } = $props();
+let tutorial = $state(undefined);
+export function runTutorial() {
+    // Check if we're on the homepage
+    if ($page.url.pathname !== `${base}/` && $page.url.pathname !== `${base}`) {
+        // Redirect to homepage with a tutorial parameter
+        goto(`${base}/?tutorial=workspace-onboarding`);
+    }
+    else {
+        tutorial?.runTutorial();
+    }
+}
+</script>
+
+<Tutorial
+	bind:this={tutorial}
+	index={index}
+	name="workspace-onboarding"
+	tainted={false}
+	on:skipAll
+	getSteps={(driver) => {
+		const steps: DriveStep[] = [
+			{
+				popover: {
+					title: 'Welcome to your Windmill workspace! 🎉',
+					description:
+						"Let's take a quick tour! We will show you the main sections of your workspace.",
+					onNextClick: () => {
+						// Wait a bit to ensure the page is fully rendered before moving to next step
+						setTimeout(() => {
+							const button = document.querySelector('#create-script-button') as HTMLElement | null
+							if (button) {
+								driver.moveNext()
+							} else {
+								alert('Could not find the Create Script button. Please make sure you are on the home page.')
+							}
+						}, 100)
+					}
+				}
+			},
+			{
+				popover: {
+					title: 'Create your first script',
+					description:
+						'<img src="/languages.png" alt="Programming Languages" style="width: 100%; max-width: 400px; margin-bottom: 12px; border-radius: 8px; display: block; margin-left: auto; margin-right: auto;" /><p>Scripts turn code into tools. Write in Python, TypeScript, Go, Bash, SQL and more. Run them manually, on schedule, or via webhooks.</p>',
+					onNextClick: async () => {
+						// Move to the next step (Create Flow button)
+						setTimeout(() => {
+							const button = document.querySelector('#create-flow-button') as HTMLElement | null
+							if (button) {
+								driver.moveNext()
+							} else {
+								alert('Could not find the Create Flow button. Please make sure you are on the home page.')
+							}
+						}, 100)
+					}
+				},
+				element: '#create-script-button',
+			},
+			{
+				popover: {
+					title: 'Create your first flow',
+					description:
+						'<img src="/flow.png" alt="Flow" style="width: 100%; max-width: 400px; margin-bottom: 12px; border-radius: 8px; display: block; margin-left: auto; margin-right: auto;" /><p>Flows orchestrate multiple scripts. Chain them together with branching, loops, and error handling to build complex workflows.</p>',
+					onNextClick: async () => {
+						// Move to the next step (Create App button)
+						setTimeout(() => {
+							const button = document.querySelector('#create-app-button') as HTMLElement | null
+							if (button) {
+								driver.moveNext()
+							} else {
+								alert('Could not find the Create App button. Please make sure you are on the home page.')
+							}
+						}, 100)
+					}
+				},
+				element: '#create-flow-button',
+			},
+			{
+				popover: {
+					title: 'Create your first app',
+					description:
+						'<img src="/app.png" alt="App" style="width: 100%; max-width: 400px; margin-bottom: 12px; border-radius: 8px; display: block; margin-left: auto; margin-right: auto;" /><p>Apps are custom UIs built with drag-and-drop. Combine tables, forms, charts, and buttons that trigger your scripts and flows.. That\'s it for the tour!</p><p style="margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(128,128,128,0.3); font-size: 0.9em; opacity: 0.9;"><strong>💡 Want to learn more?</strong> Access more tutorials from the <strong>Tutorials</strong> page in the main menu or in the <strong>Help</strong> submenu.</p>',
+					onNextClick: async () => {
+						// Mark tutorial as complete
+						updateProgress(index)
+						driver.destroy()
+
+						// Clean up URL parameter if present
+						if ($page.url.searchParams.has('tutorial')) {
+							goto(`${base}/`, { replaceState: true })
+						}
+					}
+				},
+				element: '#create-app-button',
+			}
+		]
+
+		return steps
+	}}
+/>

package/package/components/tutorials/{FlowBuilderTutorialSimpleFlow.svelte.d.ts → workspace/WorkspaceOnboardingTutorial.svelte.d.ts}

@@ -1,3 +1,6 @@
+interface Props {
+    index: number;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,16 +14,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const FlowBuilderTutorialSimpleFlow: $$__sveltets_2_IsomorphicComponent<{
-    runTutorial?: () => void;
-}, {
-    error: CustomEvent<any>;
+declare const WorkspaceOnboardingTutorial: $$__sveltets_2_IsomorphicComponent<Props, {
     skipAll: CustomEvent<any>;
-    reload: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     runTutorial: () => void;
-}, string>;
-type FlowBuilderTutorialSimpleFlow = InstanceType<typeof FlowBuilderTutorialSimpleFlow>;
-export default FlowBuilderTutorialSimpleFlow;
+}, "">;
+type WorkspaceOnboardingTutorial = InstanceType<typeof WorkspaceOnboardingTutorial>;
+export default WorkspaceOnboardingTutorial;

package/package/components/vscode.d.ts

@@ -4,3 +4,4 @@ export declare let isInitializing: boolean;
 export declare function buildWorkerDefinition(): void;
 export declare function initializeVscode(caller?: string, htmlContainer?: HTMLElement): Promise<void>;
 export declare function keepModelAroundToAvoidDisposalOfWorkers(): void;
+export declare let MONACO_Y_PADDING: number;

package/package/components/vscode.js

@@ -4,6 +4,7 @@ export let isInitialized = false;
 export let isInitializing = false;
 import { getEnhancedMonacoEnvironment, MonacoVscodeApiWrapper } from 'monaco-languageclient/vscodeApiWrapper';
 import getLanguagesServiceOverride from '@codingame/monaco-vscode-languages-service-override';
+import { getCssColor } from '../utils';
 export function buildWorkerDefinition() {
     const envEnhanced = getEnhancedMonacoEnvironment();
     const getWorker = (moduleId, label) => {
@@ -34,8 +35,10 @@ export function buildWorkerDefinition() {
                 });
             },
             typescript: () => {
-                return new Worker(new URL('@codingame/monaco-vscode-standalone-typescript-language-features/worker', import.meta.url), {
-                    type: 'module'
+                // Use our custom TypeScript worker with SQL type inference plugin
+                return new Worker(new URL('../monaco_workers/sqlTypePlugin.worker.js', import.meta.url), {
+                    type: 'module',
+                    name: 'typescript-sql-aware'
                 });
             },
             json: () => {
@@ -110,7 +113,7 @@ export async function initializeVscode(caller, htmlContainer) {
                         token: ''
                     },
                     {
-                        foreground: '808b9f',
+                        foreground: '98A7C1',
                         token: 'comment'
                     },
                     {
@@ -189,14 +192,16 @@ export async function initializeVscode(caller, htmlContainer) {
                 ],
                 colors: {
                     'editor.foreground': '#D8DEE9',
-                    'editor.background': '#00000000',
+                    'editor.background': getCssColor('surface-input', { format: 'hex-dark' }),
                     'editor.selectionBackground': '#515A6D',
                     'editor.inactiveSelectionBackground': '#515A6DB0',
                     'editor.lineHighlightBackground': '#3B4252',
                     'editorCursor.foreground': '#D8DEE9',
                     'editorWhitespace.foreground': '#515A6D',
                     'editorIndentGuide.background1': '#5A647860',
-                    'editorIndentGuide.activeBackground1': '#6A7488'
+                    'editorIndentGuide.activeBackground1': '#6A7488',
+                    'editorLineNumber.foreground': '#515A6D',
+                    'editorLineNumber.activeForeground': '#D8DEE980'
                 }
             });
             meditor.defineTheme('myTheme', {
@@ -204,7 +209,7 @@ export async function initializeVscode(caller, htmlContainer) {
                 inherit: true,
                 rules: [],
                 colors: {
-                    'editor.background': '#FFFFFF00',
+                    'editor.background': '#FFFFFF',
                     'editor.foreground': '#2d3748',
                     'editorLineNumber.foreground': '#C2C9D1',
                     'editorLineNumber.activeForeground': '#989DA5',
@@ -239,3 +244,4 @@ export function keepModelAroundToAvoidDisposalOfWorkers() {
         meditor.createModel('', 'typescript', keepEditorUri);
     }
 }
+export let MONACO_Y_PADDING = 6.5;

package/package/components/wizards/AgChartWizard.svelte

@@ -4,7 +4,7 @@ import Label from '../Label.svelte';
 import { offset, flip, shift } from 'svelte-floating-ui/dom';
 import Button from '../common/button/Button.svelte';
 import OneOfInputSpecsEditor from '../apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte';
-import { findGridItem } from '../apps/editor/appUtils';
+import { findGridItem } from '../apps/editor/appUtilsCore';
 const { selectedComponent, app } = getContext('AppViewerContext');
 let component = $state(undefined);
 $effect(() => {

package/package/components/wizards/AgGridWizard.svelte

@@ -144,62 +144,62 @@ $effect(() => {
 
 				{#if !isActionsColumn}
 					<Label label="Value formatter">
-					{#snippet header()}
-						<Tooltip
-							documentationLink="https://www.ag-grid.com/javascript-data-grid/value-formatters/"
-						>
-							Value formatters allow you to format values for display. This is useful when data is
-							one type (e.g. numeric) but needs to be converted for human reading (e.g. putting in
-							currency symbols and number formatting).
-						</Tooltip>
-					{/snippet}
-					{#snippet action()}
-						<Button
-							size="xs"
-							color="light"
-							variant="border"
-							on:click={() => {
-								// @ts-ignore
-								value.valueFormatter = null
-								renderCount++
-							}}
-						>
-							Clear
-						</Button>
-					{/snippet}
-				</Label>
-				<div>
-					{#key renderCount}
-						<div class="flex flex-col gap-4">
-							<div class="relative">
-								{#if !presets.find((preset) => preset.value === value?.valueFormatter)}
-									<div class="z-50 absolute bg-opacity-50 bg-surface top-0 left-0 bottom-0 right-0"
-									></div>
-								{/if}
-								<div class="text-xs font-semibold">Presets</div>
-								<select
-									bind:value={value.valueFormatter}
-									onchange={() => {
-										renderCount++
-									}}
-									placeholder="Code"
-								>
-									{#each presets as preset}
-										<option value={preset.value}>{preset.label}</option>
-									{/each}
-								</select>
-							</div>
+						{#snippet header()}
+							<Tooltip
+								documentationLink="https://www.ag-grid.com/javascript-data-grid/value-formatters/"
+							>
+								Value formatters allow you to format values for display. This is useful when data is
+								one type (e.g. numeric) but needs to be converted for human reading (e.g. putting in
+								currency symbols and number formatting).
+							</Tooltip>
+						{/snippet}
+						{#snippet action()}
+							<Button
+								size="xs"
+								variant="default"
+								on:click={() => {
+									// @ts-ignore
+									value.valueFormatter = null
+									renderCount++
+								}}
+							>
+								Clear
+							</Button>
+						{/snippet}
+					</Label>
+					<div>
+						{#key renderCount}
+							<div class="flex flex-col gap-4">
+								<div class="relative">
+									{#if !presets.find((preset) => preset.value === value?.valueFormatter)}
+										<div
+											class="z-50 absolute bg-opacity-50 bg-surface top-0 left-0 bottom-0 right-0"
+										></div>
+									{/if}
+									<div class="text-xs font-semibold">Presets</div>
+									<select
+										bind:value={value.valueFormatter}
+										onchange={() => {
+											renderCount++
+										}}
+										placeholder="Code"
+									>
+										{#each presets as preset}
+											<option value={preset.value}>{preset.label}</option>
+										{/each}
+									</select>
+								</div>
 
-							<SimpleEditor
-								extraLib={'declare const value: any'}
-								autoHeight
-								lang="javascript"
-								bind:code={value.valueFormatter}
-							/>
-							<div class="text-xs text-secondary -mt-4">Use `value` in the formatter</div>
-						</div>
-					{/key}
-				</div>
+								<SimpleEditor
+									extraLib={'declare const value: any'}
+									autoHeight
+									lang="javascript"
+									bind:code={value.valueFormatter}
+								/>
+								<div class="text-xs text-secondary -mt-4">Use `value` in the formatter</div>
+							</div>
+						{/key}
+					</div>
 
 					<Label label="Sort">
 						<select bind:value={value.sort}>

package/package/components/wizards/DBExplorerWizard.svelte

@@ -317,8 +317,7 @@ let warning = $derived(computeWarning(value, value));
 						{#snippet action()}
 							<Button
 								size="xs"
-								color="light"
-								variant="border"
+								variant="default"
 								on:click={() => {
 									// @ts-ignore
 									value.valueFormatter = null

package/package/components/wizards/LoggedWizardResult.svelte

@@ -37,7 +37,7 @@ $effect(() => {
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
-			class="flex flex-col bg-surface rounded-md py-1.5 px-3 cursor-pointer"
+			class="flex flex-col bg-surface rounded-md py-1.5 pr-2 cursor-pointer"
 			role=""
 			onclick={() => {
 				if (step.description) {
@@ -47,7 +47,7 @@ $effect(() => {
 			}}
 		>
 			<div class="flex gap-3">
-				<span class="inline-flex w-10 h-10 shrink-0 justify-center items-center">
+				<span class="inline-flex w-5 h-10 shrink-0 justify-center items-center">
 					{#if step.status == 'SKIP'}
 						<Circle size={20} class="inline text-hint/50" />
 					{:else if step.status == 'FAIL'}
@@ -78,7 +78,7 @@ $effect(() => {
 							/>
 						{/if}
 					</span>
-					<ResizeTransitionWrapper vertical class="relative text-xs text-secondary">
+					<ResizeTransitionWrapper vertical class="text-xs text-secondary">
 						{#if descriptionOpened}
 							<div
 								class="whitespace-pre-wrap cursor-default mt-1.5"

package/package/components/wizards/TableActionsWizard.svelte

@@ -48,11 +48,8 @@ const trigger_render = $derived(trigger);
 						/>
 						<Button
 							size="xs"
-							color="light"
-							startIcon={{
-								icon: Code
-							}}
-							variant="border"
+							startIcon={{ icon: Code }}
+							variant="default"
 							on:click={() => {
 								actionsOrder = undefined
 							}}
@@ -62,11 +59,8 @@ const trigger_render = $derived(trigger);
 					{:else}
 						<Button
 							size="xs"
-							color="light"
-							startIcon={{
-								icon: Code
-							}}
-							variant="border"
+							startIcon={{ icon: Code }}
+							variant="default"
 							on:click={() => {
 								actionsOrder = {
 									fieldType: 'text',

package/package/components/wizards/TableActionsWizard.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { BaseAppComponent, RichConfiguration } from '../apps/types';
-import type { ButtonComponent, CheckboxComponent, SelectComponent } from '../apps/editor/component';
+import type { ButtonComponent, CheckboxComponent, ModalComponent, SelectComponent } from '../apps/editor/component';
 interface Props {
     actionsOrder?: RichConfiguration | undefined;
     selectedId?: string | undefined;
-    components: (BaseAppComponent & (ButtonComponent | CheckboxComponent | SelectComponent))[] | undefined;
+    components: (BaseAppComponent & (ButtonComponent | CheckboxComponent | SelectComponent | ModalComponent))[] | undefined;
     trigger?: import('svelte').Snippet;
 }
 declare const TableActionsWizard: import("svelte").Component<Props, {}, "actionsOrder">;

package/package/components/worker_group.js

@@ -25,8 +25,9 @@ export const defaultTags = [
     'csharp',
     'nu',
     'java',
-    'ruby'
-    // for related places search: ADD_NEW_LANG 
+    'ruby',
+    'duckdb'
+    // for related places search: ADD_NEW_LANG
 ];
 export const nativeTags = [
     'nativets',

package/package/components/workspaceSettings/AISettings.svelte

@@ -13,18 +13,12 @@ import MultiSelect from '../select/MultiSelect.svelte';
 import { safeSelectItems } from '../select/utils.svelte';
 import Badge from '../common/badge/Badge.svelte';
 import Tooltip from '../Tooltip.svelte';
-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(), maxTokensPerModel = $bindable(), usingOpenaiClientCredentialsOauth = $bindable() } = $props();
+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])));
-// 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(() => {
@@ -85,6 +79,7 @@ async function editCopilotConfig() {
         setCopilotInfo({});
     }
     sendUserToast(`Copilot settings updated`);
+    onSave?.();
 }
 async function onAiProviderChange(provider) {
     if (aiProviders[provider].resource_path) {
@@ -107,16 +102,30 @@ async function onAiProviderChange(provider) {
 
 <div class="flex flex-col gap-4 my-8">
 	<div class="flex flex-col gap-1">
-		<div class="text-primary text-lg font-semibold"> Windmill AI</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-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">AI Providers</p>
+		<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 gap-2">
@@ -168,7 +177,7 @@ async function onAiProviderChange(provider) {
 						{#if provider === 'anthropic'}
 							<Badge color="blue">
 								Recommended
-								<Tooltip class="text-blue-800 dark:text-blue-800 mt-0.5">
+								<Tooltip>
 									Anthropic models handle tool calls better than other providers, which makes them a
 									better choice for AI chat.
 								</Tooltip>
@@ -284,64 +293,6 @@ async function onAiProviderChange(provider) {
 	{/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>
+		<CustomAIPrompts bind:customPrompts title="Custom system prompts" />
 	{/if}
-
-	<Button
-		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>

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

@@ -6,7 +6,8 @@ type $$ComponentProps = {
     customPrompts: Record<string, string>;
     maxTokensPerModel: Record<string, number>;
     usingOpenaiClientCredentialsOauth: boolean;
+    onSave?: () => void;
 };
-declare const AISettings: import("svelte").Component<$$ComponentProps, {}, "codeCompletionModel" | "defaultModel" | "aiProviders" | "maxTokensPerModel" | "customPrompts" | "usingOpenaiClientCredentialsOauth">;
+declare const AISettings: import("svelte").Component<$$ComponentProps, {}, "codeCompletionModel" | "defaultModel" | "customPrompts" | "aiProviders" | "maxTokensPerModel" | "usingOpenaiClientCredentialsOauth">;
 type AISettings = ReturnType<typeof AISettings>;
 export default AISettings;