windmill-components 1.444.2 → 1.447.5

package/package/components/apps/editor/component/default-codes.d.ts

@@ -1,3 +1,3 @@
 import type { AppComponent } from '.';
 export declare function defaultCode(component: string, language: string): string | undefined;
-export declare const DEFAULT_CODES: Partial<Record<AppComponent['type'], Partial<Record<'deno' | 'python3' | 'go' | 'bash' | 'pgsql' | 'mysql' | 'postgresql' | 'snowflake' | 'mssql' | 'bigquery', string>>>>;
+export declare const DEFAULT_CODES: Partial<Record<AppComponent['type'], Partial<Record<'deno' | 'python3' | 'go' | 'bash' | 'pgsql' | 'mysql' | 'postgresql' | 'snowflake' | 'mssql' | 'bigquery' | 'oracledb', string>>>>;

package/package/components/apps/editor/component/default-codes.js

@@ -198,12 +198,12 @@ LIMIT @limit OFFSET @offset;`,
 SELECT * FROM demo 
 WHERE LENGTH(?) = 0 OR CONCAT("ID") ILIKE CONCAT('%', ?, '%') OR CONCAT("NAME") ILIKE CONCAT('%', ?, '%') 
 LIMIT 100 OFFSET 0`,
-        mssql: `-- @p1 limit (int)
--- @p2 offset (int)
--- @p3 search (text)
-SELECT * FROM Demo WHERE (@p3 = '' OR CONCAT([col1], [col2], [col3]) LIKE '%' + @p3 + '%') 
+        mssql: `-- @P1 limit (int)
+-- @P2 offset (int)
+-- @P3 search (text)
+SELECT * FROM Demo WHERE (@P3 = '' OR CONCAT([col1], [col2], [col3]) LIKE '%' + @P3 + '%') 
 ORDER BY col1
-OFFSET @p2 ROWS FETCH NEXT @p1 ROWS ONLY`
+OFFSET @P2 ROWS FETCH NEXT @P1 ROWS ONLY`
     },
     aggridinfinitecomponentee: {
         deno: `type User = {
@@ -318,12 +318,12 @@ LIMIT @limit OFFSET @offset;`,
 SELECT * FROM demo 
 WHERE LENGTH(?) = 0 OR CONCAT("ID") ILIKE CONCAT('%', ?, '%') OR CONCAT("NAME") ILIKE CONCAT('%', ?, '%') 
 LIMIT 100 OFFSET 0`,
-        mssql: `-- @p1 limit (int)
--- @p2 offset (int)
--- @p3 search (text)
-SELECT * FROM Demo WHERE (@p3 = '' OR CONCAT([col1], [col2], [col3]) LIKE '%' + @p3 + '%') 
+        mssql: `-- @P1 limit (int)
+-- @P2 offset (int)
+-- @P3 search (text)
+SELECT * FROM Demo WHERE (@P3 = '' OR CONCAT([col1], [col2], [col3]) LIKE '%' + @P3 + '%') 
 ORDER BY col1
-OFFSET @p2 ROWS FETCH NEXT @p1 ROWS ONLY`
+OFFSET @P2 ROWS FETCH NEXT @P1 ROWS ONLY`
     },
     textcomponent: {
         deno: `export async function main() {

package/package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -67,7 +67,7 @@ $: componentInput && onchange?.();
 			<IconSelectInput bind:value={componentInput.value} />
 		{:else if fieldType === 'tab-select'}
 			<TabSelectInput bind:componentInput />
-		{:else if fieldType === 'resource' && subFieldType && ['mysql', 'postgres', 'ms_sql_server', 'snowflake', 'snowflake_oauth', 'bigquery'].includes(subFieldType)}
+		{:else if fieldType === 'resource' && subFieldType && ['mysql', 'postgres', 'ms_sql_server', 'snowflake', 'snowflake_oauth', 'bigquery', 'oracledb'].includes(subFieldType)}
 			<ResourcePicker
 				initialValue={componentInput.value?.split('$res:')?.[1] || ''}
 				on:change={(e) => {
@@ -85,6 +85,7 @@ $: componentInput && onchange?.();
 			/>
 		{:else if fieldType === 'resource' && subFieldType === 's3'}
 			<ResourcePicker
+				placeholder="S3 resource (workspace s3 if empty)"
 				initialValue={componentInput.value?.split('$res:')?.[1] || ''}
 				on:change={(e) => {
 					let path = e.detail

package/package/components/apps/inputType.d.ts

@@ -1,7 +1,7 @@
 import type { ReadFileAs } from '../common/fileInput/model';
 import type { DecisionTreeNode, TypedComponent } from './editor/component';
 import type { InlineScript } from './types';
-export type InputType = 'integer' | 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource' | 'labeledselect' | 'tab-select' | 'schema' | 'ag-grid' | 'table-column' | 'plotly' | 'chartjs' | 'DecisionTreeNode' | 'ag-chart' | 'resource' | 'db-explorer' | 'db-table' | 's3' | 'number-tuple' | 'postgres' | 'mysql' | 'ms_sql_server' | 'snowflake' | 'snowflake_oauth' | 'bigquery' | 'app-path';
+export type InputType = 'integer' | 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource' | 'labeledselect' | 'tab-select' | 'schema' | 'ag-grid' | 'table-column' | 'plotly' | 'chartjs' | 'DecisionTreeNode' | 'ag-chart' | 'resource' | 'db-explorer' | 'db-table' | 's3' | 'number-tuple' | 'postgres' | 'mysql' | 'ms_sql_server' | 'snowflake' | 'snowflake_oauth' | 'bigquery' | 'oracledb' | 'app-path';
 export type InputConnection = {
     componentType?: TypedComponent['type'];
     componentId: string;
@@ -109,7 +109,7 @@ export type StaticOptions = {
         label: string;
     }[];
 };
-export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string, 'db-table'> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'array', (object | string)[], 'labeledselect'> | AppInputSpec<'labeledselect', object> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'> | AppInputSpec<'schema', object> | AppInputSpec<'array', object[], 'ag-grid'> | AppInputSpec<'array', object[], 'db-explorer'> | AppInputSpec<'array', object[], 'table-column'> | AppInputSpec<'array', object[], 'plotly'> | AppInputSpec<'array', object[], 'chartjs'> | AppInputSpec<'array', DecisionTreeNode, 'DecisionTreeNode'> | AppInputSpec<'array', object[], 'ag-chart'> | AppInputSpec<'resource', string> | AppInputSpec<'resource', string, 's3'> | AppInputSpec<'resource', string, 'postgres'> | AppInputSpec<'resource', string, 'mysql'> | AppInputSpec<'resource', string, 'ms_sql_server'> | AppInputSpec<'resource', string, 'snowflake'> | AppInputSpec<'resource', string, 'snowflake_oauth'> | AppInputSpec<'resource', string, 'bigquery'> | AppInputSpec<'array', object[], 'number-tuple'> | AppInputSpec<'app-path', string>;
+export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string, 'db-table'> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'array', (object | string)[], 'labeledselect'> | AppInputSpec<'labeledselect', object> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'> | AppInputSpec<'schema', object> | AppInputSpec<'array', object[], 'ag-grid'> | AppInputSpec<'array', object[], 'db-explorer'> | AppInputSpec<'array', object[], 'table-column'> | AppInputSpec<'array', object[], 'plotly'> | AppInputSpec<'array', object[], 'chartjs'> | AppInputSpec<'array', DecisionTreeNode, 'DecisionTreeNode'> | AppInputSpec<'array', object[], 'ag-chart'> | AppInputSpec<'resource', string> | AppInputSpec<'resource', string, 's3'> | AppInputSpec<'resource', string, 'postgres'> | AppInputSpec<'resource', string, 'mysql'> | AppInputSpec<'resource', string, 'ms_sql_server'> | AppInputSpec<'resource', string, 'snowflake'> | AppInputSpec<'resource', string, 'snowflake_oauth'> | AppInputSpec<'resource', string, 'bigquery'> | AppInputSpec<'resource', string, 'oracledb'> | AppInputSpec<'array', object[], 'number-tuple'> | AppInputSpec<'app-path', string>;
 export type RowAppInput = Extract<AppInput, {
     type: 'row';
 }>;

package/package/components/common/button/Button.svelte

@@ -44,53 +44,6 @@ export function focus() {
 }
 const dispatch = createEventDispatcher();
 // Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
-const colorVariants = {
-    none: {
-        border: '',
-        contained: '',
-        divider: ''
-    },
-    blue: {
-        border: 'border-frost-500 dark:border-frost-300 hover:border-frost-700 dark:hover:border-frost-400 focus-visible:border-frost-700 bg-surface hover:bg-frost-100 dark:hover:bg-frost-900 focus-visible:bg-frost-100 focus-visible:dark:text-frost-100 dark:focus-visible:bg-frost-900 text-frost-500 dark:text-frost-300 dark:hover:text-frost-400 hover:text-frost-700 focus-visible:text-frost-700 focus-visible:ring-frost-300',
-        contained: 'bg-frost-500 hover:bg-frost-700 focus-visible:bg-frost-700 text-white focus-visible:ring-frost-300 dark:bg-frost-500/90 dark:hover:bg-frost-600/90',
-        divider: 'divide-x divide-frost-600'
-    },
-    marine: {
-        border: 'border-marine-300 dark:border-marine-200 hover:border-marine-500 dark:hover:border-marine-400 focus-visible:border-marine-500 bg-surface hover:bg-marine-500 dark:hover:bg-marine-400 focus-visible:bg-marine-100 focus-visible:dark:text-marine-50 dark:focus-visible:bg-marine-500 text-marine-50 dark:text-marine-50 dark:hover:text-marine-50 hover:text-marine-50 focus-visible:text-marine-300 focus-visible:ring-marine-200',
-        contained: 'bg-marine-300 hover:bg-marine-500 focus-visible:bg-marine-500 text-gray-50 focus-visible:ring-marine-200 dark:bg-marine-200 dark:hover:bg-marine-400',
-        divider: 'divide-x divide-marine-500'
-    },
-    red: {
-        border: 'border-red-600/60 hover:border-red-600 bg-surface hover:bg-red-100 text-red-600 hover:text-red-700 focus-visible:ring-red-300 dark:border-red-400/90 dark:text-red-400 dark:hover:border-red-400 dark:hover:bg-red-500/60 dark:hover:text-red-100',
-        contained: 'bg-red-600 hover:bg-red-600 text-white focus-visible:ring-red-300  dark:border-red-400/70 dark:bg-red-700/90 dark:hover:bg-red-900 dark:hover:border-red-300 dark:text-primary',
-        divider: 'divide-x divide-red-700'
-    },
-    green: {
-        border: 'border-green-600 hover:border-green-700 bg-surface hover:bg-green-100 text-green-600 hover:text-green-700 focus-visible:ring-green-300 dark:hover:bg-green-800 dark:border-green-400/90',
-        contained: 'bg-green-600 hover:bg-green-700 text-white focus-visible:ring-green-300 dark:bg-green-700/90 dark:hover:bg-green-800',
-        divider: 'divide-x divide-green-700'
-    },
-    dark: {
-        border: 'border-marine-300 bg-surface hover:bg-surface-hover focus-visible:bg-surface-hover text-primary hover:text-secondary focus-visible:text-secondary focus-visible:ring-surface-selected-inverse dark:border-marine-200',
-        contained: 'bg-marine-400 hover:bg-marine-200 focus-visible:bg-surface-hover-inverse text-primary-inverse focus-visible:ring-surface-selected-inverse dark:bg-marine-50 dark:hover:bg-marine-50/70 dark:text-primary-inverse',
-        divider: 'divide-x divide-gray-800 dark:divide-gray-200'
-    },
-    gray: {
-        border: 'border-gray-500 dark:border-gray-300 hover:border-gray-700 dark:hover:border-gray-400 focus-visible:border-gray-700 bg-surface hover:bg-gray-100 dark:hover:bg-gray-900 focus-visible:bg-gray-100 focus-visible:dark:text-gray-100 dark:focus-visible:bg-gray-900 text-gray-500 dark:text-gray-300 dark:hover:text-gray-400 hover:text-gray-700 focus-visible:text-gray-700 focus-visible:ring-gray-300',
-        contained: 'bg-gray-500 hover:bg-gray-700 focus-visible:bg-gray-700 text-white focus-visible:ring-gray-300',
-        divider: 'divide-x divide-gray-600'
-    },
-    light: {
-        border: 'border  bg-surface hover:bg-surface-hover focus-visible:bg-surface-hover text-primary hover:text-secondary focus-visible:text-secondary focus-visible:ring-surface-selected',
-        contained: 'bg-surface border-transparent hover:bg-surface-hover focus-visible:bg-surface-hover text-primary focus-visible:ring-surface-selected',
-        divider: 'divide-x divide-gray-200 dark:divide-gray-700'
-    },
-    nord: {
-        border: 'border-nord-200 bg-surface hover:bg-surface-hover focus-visible:bg-surface-hover text-primary hover:text-secondary focus-visible:text-secondary focus-visible:ring-surface-selected-inverse dark:border-nord-200',
-        contained: 'bg-nord-300 hover:bg-nord-0 focus-visible:bg-surface-hover-inverse text-primary-inverse focus-visible:ring-surface-selected-inverse dark:bg-nord-400 dark:hover:bg-nord-600 dark:text-primary-inverse',
-        divider: 'divide-x divide-gray-800 dark:divide-gray-200'
-    }
-};
 async function onClick(event) {
     if (!nonCaptureEvent) {
         event.preventDefault();
@@ -102,8 +55,8 @@ async function onClick(event) {
     }
 }
 function getColorClass(color, variant) {
-    if (color in colorVariants) {
-        return colorVariants[color][variant];
+    if (color in ButtonType.ColorVariants) {
+        return ButtonType.ColorVariants[color][variant];
     }
     else {
         return color;
@@ -132,9 +85,14 @@ $: lucideIconSize = (iconMap[size] ?? 12) * 1;
 </script>
 
 <div
-	class="{dropdownItems && dropdownItems.length > 0 && variant === 'contained'
-		? colorVariants[color].divider
-		: ''} {wrapperClasses} flex flex-row"
+	class={twMerge(
+		dropdownItems && dropdownItems.length > 0 && variant === 'contained'
+			? ButtonType.ColorVariants[color].divider
+			: '',
+		wrapperClasses,
+		'flex flex-row',
+		disabled ? 'divide-text-disabled' : ''
+	)}
 	style={wrapperStyle}
 >
 	{#if href}

package/package/components/common/button/PulseButton.svelte

@@ -0,0 +1,81 @@
+<script>
+	export let pulseDuration = 2
+	export let numberOfPulses = 3
+	export let scale = 1.2
+
+	let isPulsing = false
+	let pulseCount = 1
+
+	export function triggerPulse(count) {
+		if (pulseCount < 1) return
+		if (!isPulsing) {
+			pulseCount = count
+			isPulsing = true
+			setTimeout(() => {
+				isPulsing = false
+			}, pulseDuration * count * 1000)
+		}
+	}
+</script>
+
+<div class="relative">
+	<div>
+		<slot />
+	</div>
+	{#each Array(numberOfPulses) as _, i}
+		<div
+			class:deactivate={isPulsing}
+			style={`--pulse-duration: ${pulseDuration}s; --i:${i}; --scale:${scale}; --number-of-pulses:${numberOfPulses}; --pulse-count:${pulseCount};`}
+		>
+			<div class="pulse" class:active={isPulsing} />
+		</div>
+	{/each}
+</div>
+
+<style>
+	.relative {
+		position: relative;
+		display: inline-block;
+	}
+
+	.pulse {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 100%;
+		height: 100%;
+		background: rgb(81, 151, 255);
+		border-radius: 8px;
+		transform: translate(-50%, -50%) scale(1);
+		z-index: 0;
+		pointer-events: none;
+		opacity: 0;
+	}
+
+	.pulse.active {
+		animation: pulse var(--pulse-duration) ease-out infinite;
+		animation-delay: calc(var(--i) * var(--pulse-duration) / var(--number-of-pulses));
+		opacity: 1;
+	}
+
+	.deactivate {
+		animation: fade calc(var(--pulse-duration) * 0.3) ease-out;
+		animation-delay: calc(var(--pulse-duration) * var(--pulse-count) - var(--pulse-duration) * 0.2);
+		opacity: 1;
+	}
+
+	@keyframes fade {
+		0% {
+			opacity: 0.8;
+		}
+		100% {
+			opacity: 0;
+		}
+	}
+
+	@keyframes pulse {
+		100% {
+			transform: translate(-50%, -50%) scale(var(--scale));
+			opacity: 0;
+		}
+	}</style>

package/package/components/common/button/PulseButton.svelte.d.ts

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  PulseButtonProps */
+/** @typedef {typeof __propDef.events}  PulseButtonEvents */
+/** @typedef {typeof __propDef.slots}  PulseButtonSlots */
+export default class PulseButton extends SvelteComponent<{
+    scale?: number | undefined;
+    pulseDuration?: number | undefined;
+    numberOfPulses?: number | undefined;
+    triggerPulse?: ((count: any) => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+    get triggerPulse(): (count: any) => void;
+}
+export type PulseButtonProps = typeof __propDef.props;
+export type PulseButtonEvents = typeof __propDef.events;
+export type PulseButtonSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        scale?: number | undefined;
+        pulseDuration?: number | undefined;
+        numberOfPulses?: number | undefined;
+        triggerPulse?: ((count: any) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/common/button/RoundIconButton.svelte

@@ -0,0 +1,11 @@
+<script>export let color = 'light';
+export let border = false;
+$: colorClasses = {
+    light: 'text-tertiary bg-surface hover:bg-surface-hover text-tertiary',
+    dark: 'text-tertiary hover:bg-surface-hover-dark text-tertiary'
+}[color ?? 'light'];
+</script>
+
+<div class="rounded-full p-1 {colorClasses} {border ? 'border border-tertiary' : ''}">
+	<slot />
+</div>

package/package/components/common/button/RoundIconButton.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: 'light' | 'dark' | undefined;
+        border?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type RoundIconButtonProps = typeof __propDef.props;
+export type RoundIconButtonEvents = typeof __propDef.events;
+export type RoundIconButtonSlots = typeof __propDef.slots;
+export default class RoundIconButton extends SvelteComponent<RoundIconButtonProps, RoundIconButtonEvents, RoundIconButtonSlots> {
+}
+export {};

package/package/components/common/button/model.d.ts

@@ -16,4 +16,5 @@ export declare namespace ButtonType {
         size: Size;
         color: Color;
     }
+    const ColorVariants: Record<ButtonType.Color, Record<ButtonType.Variant, string>>;
 }

package/package/components/common/button/model.js

@@ -47,4 +47,51 @@ export var ButtonType;
             divider: ''
         }
     };
+    ButtonType.ColorVariants = {
+        none: {
+            border: '',
+            contained: '',
+            divider: ''
+        },
+        blue: {
+            border: 'border-frost-500 dark:border-frost-300 hover:border-frost-700 dark:hover:border-frost-400 focus-visible:border-frost-700 bg-surface hover:bg-frost-100 dark:hover:bg-frost-900 focus-visible:bg-frost-100 focus-visible:dark:text-frost-100 dark:focus-visible:bg-frost-900 text-frost-500 dark:text-frost-300 dark:hover:text-frost-400 hover:text-frost-700 focus-visible:text-frost-700 focus-visible:ring-frost-300',
+            contained: 'bg-frost-500 hover:bg-frost-700 focus-visible:bg-frost-700 text-white focus-visible:ring-frost-300 dark:bg-frost-500/90 dark:hover:bg-frost-600/90',
+            divider: 'divide-x divide-frost-600'
+        },
+        marine: {
+            border: 'border-marine-300 dark:border-marine-200 hover:border-marine-500 dark:hover:border-marine-400 focus-visible:border-marine-500 bg-surface hover:bg-marine-500 dark:hover:bg-marine-400 focus-visible:bg-marine-100 focus-visible:dark:text-marine-50 dark:focus-visible:bg-marine-500 text-marine-50 dark:text-marine-50 dark:hover:text-marine-50 hover:text-marine-50 focus-visible:text-marine-300 focus-visible:ring-marine-200',
+            contained: 'bg-marine-300 hover:bg-marine-500 focus-visible:bg-marine-500 text-gray-50 focus-visible:ring-marine-200 dark:bg-marine-200 dark:hover:bg-marine-400',
+            divider: 'divide-x divide-marine-500'
+        },
+        red: {
+            border: 'border-red-600/60 hover:border-red-600 bg-surface hover:bg-red-100 text-red-600 hover:text-red-700 focus-visible:ring-red-300 dark:border-red-400/90 dark:text-red-400 dark:hover:border-red-400 dark:hover:bg-red-500/60 dark:hover:text-red-100',
+            contained: 'bg-red-600 hover:bg-red-600 text-white focus-visible:ring-red-300  dark:border-red-400/70 dark:bg-red-700/90 dark:hover:bg-red-900 dark:hover:border-red-300 dark:text-primary',
+            divider: 'divide-x divide-red-700'
+        },
+        green: {
+            border: 'border-green-600 hover:border-green-700 bg-surface hover:bg-green-100 text-green-600 hover:text-green-700 focus-visible:ring-green-300 dark:hover:bg-green-800 dark:border-green-400/90',
+            contained: 'bg-green-600 hover:bg-green-700 text-white focus-visible:ring-green-300 dark:bg-green-700/90 dark:hover:bg-green-800',
+            divider: 'divide-x divide-green-700'
+        },
+        dark: {
+            border: 'border-marine-300 bg-surface hover:bg-surface-hover focus-visible:bg-surface-hover text-primary hover:text-secondary focus-visible:text-secondary focus-visible:ring-surface-selected-inverse dark:border-marine-200',
+            contained: 'bg-marine-400 hover:bg-marine-200 focus-visible:bg-surface-hover-inverse text-primary-inverse focus-visible:ring-surface-selected-inverse dark:bg-marine-50 dark:hover:bg-marine-50/70 dark:text-primary-inverse',
+            divider: 'divide-x divide-gray-800 dark:divide-gray-200'
+        },
+        gray: {
+            border: 'border-gray-500 dark:border-gray-300 hover:border-gray-700 dark:hover:border-gray-400 focus-visible:border-gray-700 bg-surface hover:bg-gray-100 dark:hover:bg-gray-900 focus-visible:bg-gray-100 focus-visible:dark:text-gray-100 dark:focus-visible:bg-gray-900 text-gray-500 dark:text-gray-300 dark:hover:text-gray-400 hover:text-gray-700 focus-visible:text-gray-700 focus-visible:ring-gray-300',
+            contained: 'bg-gray-500 hover:bg-gray-700 focus-visible:bg-gray-700 text-white focus-visible:ring-gray-300',
+            divider: 'divide-x divide-gray-600'
+        },
+        light: {
+            border: 'border  bg-surface hover:bg-surface-hover focus-visible:bg-surface-hover text-primary hover:text-secondary focus-visible:text-secondary focus-visible:ring-surface-selected',
+            contained: 'bg-surface border-transparent hover:bg-surface-hover focus-visible:bg-surface-hover text-primary focus-visible:ring-surface-selected',
+            divider: 'divide-x divide-gray-200 dark:divide-gray-700'
+        },
+        nord: {
+            border: 'border-nord-200 bg-surface hover:bg-surface-hover focus-visible:bg-surface-hover text-primary hover:text-secondary focus-visible:text-secondary focus-visible:ring-surface-selected-inverse dark:border-nord-200',
+            contained: 'bg-nord-300 hover:bg-nord-0 focus-visible:bg-surface-hover-inverse text-primary-inverse focus-visible:ring-surface-selected-inverse dark:bg-nord-400 dark:hover:bg-nord-600 dark:text-primary-inverse',
+            divider: 'divide-x divide-gray-800 dark:divide-gray-200'
+        }
+    };
 })(ButtonType || (ButtonType = {}));

package/package/components/common/fileUpload/FileUpload.svelte

@@ -25,6 +25,7 @@ export let defaultValue = undefined;
 export let workspace = undefined;
 export let fileUploads = writable([]);
 export let appPath = undefined;
+export let disabled = false;
 export let computeForceViewerPolicies = undefined;
 const dispatch = createEventDispatcher();
 async function handleChange(files) {
@@ -385,6 +386,7 @@ onDestroy(() => {
 		</div>
 	{:else}
 		<FileInput
+			{disabled}
 			accept={acceptedFileTypes?.join(',')}
 			multiple={allowMultiple}
 			returnFileNames
@@ -396,7 +398,7 @@ onDestroy(() => {
 			style={customStyle}
 			defaultFile={defaultValue}
 		>
-			{containerText}
+			{containerText}{#if disabled}<br />(Disabled){/if}
 		</FileInput>
 	{/if}
 </div>

package/package/components/common/fileUpload/FileUpload.svelte.d.ts

@@ -24,6 +24,7 @@ declare const __propDef: {
             file?: File | undefined;
         }[]> | undefined;
         appPath?: string | undefined;
+        disabled?: boolean | undefined;
         computeForceViewerPolicies?: (() => {
             allowed_resources: string[];
             allow_user_resources: boolean;

package/package/components/common/languageIcons/LanguageIcon.svelte

@@ -7,6 +7,7 @@ import DockerIcon from '../../icons/DockerIcon.svelte';
 import RestIcon from '../../icons/RestIcon.svelte';
 import PowershellIcon from '../../icons/PowershellIcon.svelte';
 import BigQueryIcon from '../../icons/BigQueryIcon.svelte';
+import OracleDBIcon from '../../icons/OracleDBIcon.svelte';
 import SnowflakeIcon from '../../icons/SnowflakeIcon.svelte';
 import GraphqlIcon from '../../icons/GraphqlIcon.svelte';
 import MSSqlServerIcon from '../../icons/MSSqlServerIcon.svelte';
@@ -31,6 +32,7 @@ const languageLabel = {
     graphql: 'GraphQL',
     postgresql: 'Postgresql',
     bigquery: 'BigQuery',
+    oracledb: 'Oracle Database',
     snowflake: 'Snowflake',
     mysql: 'MySQL',
     mssql: 'MS SQL Server',
@@ -51,6 +53,7 @@ const langToComponent = {
     pgsql: PostgresIcon,
     mysql: MySQLIcon,
     bigquery: BigQueryIcon,
+    oracledb: OracleDBIcon,
     snowflake: SnowflakeIcon,
     mssql: MSSqlServerIcon,
     javascript: JavaScript,

package/package/components/common/layout/List.svelte

@@ -1,7 +1,9 @@
-<script>export let horizontal = false;
+<script>import { twMerge } from 'tailwind-merge';
+export let horizontal = false;
 export let gap = 'sm';
 export let justify = 'start';
 export let wFull = true;
+export let hFull = true;
 const gapMap = {
     none: '',
     sm: 'gap-2',
@@ -26,9 +28,13 @@ const justifyMap = {
 	</div>
 {:else}
 	<div
-		class="flex flex-col h-full {wFull ? 'w-full' : ''} {gapMap[gap]} items-center {justifyMap[
-			justify
-		]}"
+		class={twMerge(
+			'flex flex-col w-full',
+			hFull ? 'h-full' : '',
+			gapMap[gap],
+			'items-center',
+			justifyMap[justify]
+		)}
 	>
 		<slot />
 	</div>

package/package/components/common/layout/List.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         gap?: "none" | "sm" | "md" | "lg" | undefined;
         justify?: "center" | "start" | "end" | "between" | undefined;
         wFull?: boolean | undefined;
+        hFull?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/common/tabs/Tab.svelte

@@ -10,9 +10,22 @@ export let selectedStyle = '';
 export let id = undefined;
 export let active = false;
 export let exact = false;
+export let otherValues = [];
 export let disabled = false;
 const { selected, update, hashNavigation } = getContext('Tabs');
-$: isSelected = exact ? $selected == value : $selected?.startsWith(value);
+function getIsSelectedFn(exact, otherValues) {
+    if (otherValues.length > 0) {
+        return (selected) => selected == value || otherValues.includes(selected);
+    }
+    else if (exact) {
+        return (selected) => selected == value;
+    }
+    else {
+        return (selected) => selected?.startsWith(value);
+    }
+}
+$: isSelectedFn = getIsSelectedFn(exact, otherValues);
+$: isSelected = isSelectedFn($selected);
 const fontSizeClasses = {
     xs: 'text-xs',
     sm: 'text-sm',

package/package/components/common/tabs/Tab.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         id?: string | undefined;
         active?: boolean | undefined;
         exact?: boolean | undefined;
+        otherValues?: string[] | undefined;
         disabled?: boolean | undefined;
     };
     events: {

package/package/components/copilot/ScriptGen.svelte

@@ -425,7 +425,7 @@ onDestroy(() => {
 						</div>
 					{/if}
 
-					{#if ['postgresql', 'mysql', 'snowflake', 'bigquery', 'mssql', 'graphql'].includes(lang ?? '') && dbSchema?.lang === lang}
+					{#if ['postgresql', 'mysql', 'snowflake', 'bigquery', 'mssql', 'graphql, oracledb'].includes(lang ?? '') && dbSchema?.lang === lang}
 						<div class="flex flex-row items-center justify-between gap-2 w-96">
 							<div class="flex flex-row items-center gap-1">
 								<p class="text-xs text-secondary">

package/package/components/copilot/lib.js

@@ -293,7 +293,7 @@ export function stringifySchema(dbSchema) {
 function addDBSChema(scriptOptions, prompt) {
     const { dbSchema, language } = scriptOptions;
     if (dbSchema &&
-        ['postgresql', 'mysql', 'snowflake', 'bigquery', 'mssql', 'graphql'].includes(language) && // make sure we are using a SQL/query language
+        ['postgresql', 'mysql', 'snowflake', 'bigquery', 'mssql', 'graphql', 'oracledb'].includes(language) && // make sure we are using a SQL/query language
         language === dbSchema.lang // make sure we are using the same language as the schema
     ) {
         let { stringified } = dbSchema;

package/package/components/copilot/prompts/edit.yaml

@@ -112,7 +112,7 @@ prompts:
       {code}
       ```
       <contextual_information>
-      Arguments can be obtained directly in the statement with @p1, @p2, etc.. Name the parameters by adding comments before the statement like that: `-- @p1 name1 ({type})` or `-- @p2 name2 ({type}) = default` (one per row)
+      Arguments can be obtained directly in the statement with @P1, @P2, etc.. Name the parameters by adding comments before the statement like that: `-- @P1 name1 ({type})` or `-- @P2 name2 ({type}) = default` (one per row)
       </contextual_information>
       My instructions: {description}
   graphql:

package/package/components/copilot/prompts/editPrompt.js

@@ -26,7 +26,7 @@ export const EDIT_PROMPT = {
             "prompt": "Here's my snowflake code: \n```sql\n{code}\n```\n<contextual_information>\nArguments can be obtained directly in the statement with ?. Name the parameters by adding comments before the statement like that: `-- ? name1 ({type})` or `-- ? name2 ({type}) = default` (one per row)\n</contextual_information>\nMy instructions: {description}"
         },
         "mssql": {
-            "prompt": "Here's my Microsoft SQL Server code: \n```sql\n{code}\n```\n<contextual_information>\nArguments can be obtained directly in the statement with @p1, @p2, etc.. Name the parameters by adding comments before the statement like that: `-- @p1 name1 ({type})` or `-- @p2 name2 ({type}) = default` (one per row)\n</contextual_information>\nMy instructions: {description}"
+            "prompt": "Here's my Microsoft SQL Server code: \n```sql\n{code}\n```\n<contextual_information>\nArguments can be obtained directly in the statement with @P1, @P2, etc.. Name the parameters by adding comments before the statement like that: `-- @P1 name1 ({type})` or `-- @P2 name2 ({type}) = default` (one per row)\n</contextual_information>\nMy instructions: {description}"
         },
         "graphql": {
             "prompt": "Here's my graphql code: \n```graphql\n{code}\n```\n<contextual_information>\nAdd the needed arguments as query parameters.\n</contextual_information>\nMy instructions: {description}"

package/package/components/copilot/prompts/fix.yaml

@@ -122,7 +122,7 @@ prompts:
       {code}
       ```
       <contextual_information>
-      Arguments can be obtained directly in the statement with @p1, @p2, etc.. Name the parameters by adding comments before the statement like that: `-- @p1 name1 ({type})` or `-- @p2 name2 ({type}) = default` (one per row)
+      Arguments can be obtained directly in the statement with @P1, @P2, etc.. Name the parameters by adding comments before the statement like that: `-- @P1 name1 ({type})` or `-- @P2 name2 ({type}) = default` (one per row)
       </contextual_information>
       I get the following error: {error}
       Fix my code.

package/package/components/copilot/prompts/fixPrompt.js

@@ -26,7 +26,7 @@ export const FIX_PROMPT = {
             "prompt": "Here's my snowflake code: \n```sql\n{code}\n```\n<contextual_information>\nArguments can be obtained directly in the statement with ?. Name the parameters by adding comments before the statement like that: `-- ? name1 ({type})` or `-- ? name2 ({type}) = default` (one per row)\n</contextual_information>\nI get the following error: {error}\nFix my code."
         },
         "mssql": {
-            "prompt": "Here's my Microsoft SQL Server code: \n```sql\n{code}\n```\n<contextual_information>\nArguments can be obtained directly in the statement with @p1, @p2, etc.. Name the parameters by adding comments before the statement like that: `-- @p1 name1 ({type})` or `-- @p2 name2 ({type}) = default` (one per row)\n</contextual_information>\nI get the following error: {error}\nFix my code."
+            "prompt": "Here's my Microsoft SQL Server code: \n```sql\n{code}\n```\n<contextual_information>\nArguments can be obtained directly in the statement with @P1, @P2, etc.. Name the parameters by adding comments before the statement like that: `-- @P1 name1 ({type})` or `-- @P2 name2 ({type}) = default` (one per row)\n</contextual_information>\nI get the following error: {error}\nFix my code."
         },
         "graphql": {
             "prompt": "Here's my graphql code: \n```graphql\n{code}\n```\n<contextual_information>\nAdd the needed arguments as query parameters.\n</contextual_information>\nI get the following error: {error}\nFix my code."

package/package/components/copilot/prompts/gen.yaml

@@ -78,7 +78,7 @@ prompts:
   mssql:
     prompt: |-
       <contextual_information>
-      You have to write a statement for Microsoft SQL Server. Arguments can be obtained directly in the statement with @p1, @p2, etc.. Name the parameters by adding comments before the statement like that: `-- @p1 name1 ({type})` or `-- @p2 name2 ({type}) = default` (one per row)
+      You have to write a statement for Microsoft SQL Server. Arguments can be obtained directly in the statement with @P1, @P2, etc.. Name the parameters by adding comments before the statement like that: `-- @P1 name1 ({type})` or `-- @P2 name2 ({type}) = default` (one per row)
       </contextual_information>
       My instructions: {description}
   graphql:

package/package/components/copilot/prompts/genPrompt.js

@@ -26,7 +26,7 @@ export const GEN_PROMPT = {
             "prompt": "<contextual_information>\nYou have to write a statement for Snowflake. Arguments can be obtained directly in the statement with ?. Name the parameters by adding comments before the statement like that: `-- ? name1 ({type})` or `-- ? name2 ({type}) = default` (one per row)\n</contextual_information>\nMy instructions: {description}"
         },
         "mssql": {
-            "prompt": "<contextual_information>\nYou have to write a statement for Microsoft SQL Server. Arguments can be obtained directly in the statement with @p1, @p2, etc.. Name the parameters by adding comments before the statement like that: `-- @p1 name1 ({type})` or `-- @p2 name2 ({type}) = default` (one per row)\n</contextual_information>\nMy instructions: {description}"
+            "prompt": "<contextual_information>\nYou have to write a statement for Microsoft SQL Server. Arguments can be obtained directly in the statement with @P1, @P2, etc.. Name the parameters by adding comments before the statement like that: `-- @P1 name1 ({type})` or `-- @P2 name2 ({type}) = default` (one per row)\n</contextual_information>\nMy instructions: {description}"
         },
         "graphql": {
             "prompt": "<contextual_information>\nYou have to write a query for GraphQL. Add the needed arguments as query parameters.\n</contextual_information>\nMy instructions: {description}"

package/package/components/custom_ui.d.ts

@@ -23,6 +23,7 @@ export type FlowBuilderWhitelabelCustomUi = {
     triggers?: boolean;
     flowNode?: boolean;
     hub?: boolean;
+    hubCode?: boolean;
     graph?: {
         aiBuilder?: boolean;
         dataflow?: boolean;