windmill-components 1.493.10 → 1.501.4

package/package/components/copilot/utils.js

@@ -1,5 +1,36 @@
 import { capitalize, toCamel } from '../../utils';
 import YAML from 'yaml';
+export const getCommentSymbol = (lang) => {
+    switch (lang) {
+        case 'python3':
+        case 'go':
+        case 'bash':
+        case 'powershell':
+        case 'graphql':
+        case 'ansible':
+        case 'nu':
+            return '#';
+        case 'nativets':
+        case 'bun':
+        case 'deno':
+        case 'php':
+        case 'csharp':
+        case 'java':
+        case 'bunnative':
+            return '//';
+        case 'rust':
+        case 'postgresql':
+        case 'mysql':
+        case 'bigquery':
+        case 'snowflake':
+        case 'mssql':
+        case 'oracledb':
+        case 'duckdb':
+            return '--';
+        default:
+            return '//';
+    }
+};
 export function compile(schema) {
     function rec(x, root = false) {
         let res = '{\n';

package/package/components/custom_ui.d.ts

@@ -9,6 +9,7 @@ export type FlowBuilderWhitelabelCustomUi = {
         diff?: boolean;
         extraDeployOptions?: boolean;
         editableSummary?: boolean;
+        settings?: boolean;
     };
     settingsPanel?: boolean;
     settingsTabs?: {

package/package/components/dbOps.js

@@ -1,6 +1,6 @@
 import { getLanguageByResourceType } from './apps/components/display/dbtable/utils';
 import { makeSelectQuery } from './apps/components/display/dbtable/queries/select';
-import { runPreviewJobAndPollResult } from './jobs/utils';
+import { runScriptAndPollResult } from './jobs/utils';
 import { makeCountQuery } from './apps/components/display/dbtable/queries/count';
 import { makeUpdateQuery } from './apps/components/display/dbtable/queries/update';
 import { makeDeleteQuery } from './apps/components/display/dbtable/queries/delete';
@@ -15,7 +15,7 @@ export function dbTableOpsWithPreviewScripts({ resourcePath, resourceType, table
         colDefs,
         getCount: async ({ quicksearch }) => {
             const countQuery = makeCountQuery(resourceType, tableKey, undefined, colDefs);
-            const result = await runPreviewJobAndPollResult({
+            const result = await runScriptAndPollResult({
                 workspace,
                 requestBody: {
                     args: { database: '$res:' + resourcePath, quicksearch },
@@ -28,7 +28,7 @@ export function dbTableOpsWithPreviewScripts({ resourcePath, resourceType, table
         },
         getRows: async (params) => {
             const query = makeSelectQuery(tableKey, colDefs, undefined, resourceType);
-            let items = (await runPreviewJobAndPollResult({
+            let items = (await runScriptAndPollResult({
                 workspace,
                 requestBody: {
                     args: { database: '$res:' + resourcePath, ...params },
@@ -45,7 +45,7 @@ export function dbTableOpsWithPreviewScripts({ resourcePath, resourceType, table
         },
         onUpdate: async ({ values }, colDef, newValue) => {
             const updateQuery = makeUpdateQuery(tableKey, colDef, colDefs, resourceType);
-            await runPreviewJobAndPollResult({
+            await runScriptAndPollResult({
                 workspace,
                 requestBody: {
                     args: {
@@ -60,7 +60,7 @@ export function dbTableOpsWithPreviewScripts({ resourcePath, resourceType, table
         },
         onDelete: async ({ values }) => {
             const deleteQuery = makeDeleteQuery(tableKey, colDefs, resourceType);
-            await runPreviewJobAndPollResult({
+            await runScriptAndPollResult({
                 workspace,
                 requestBody: {
                     args: { database: '$res:' + resourcePath, ...values },
@@ -71,7 +71,7 @@ export function dbTableOpsWithPreviewScripts({ resourcePath, resourceType, table
         },
         onInsert: async ({ values }) => {
             const insertQuery = makeInsertQuery(tableKey, colDefs, resourceType);
-            runPreviewJobAndPollResult({
+            runScriptAndPollResult({
                 workspace,
                 requestBody: {
                     args: { database: '$res:' + resourcePath, ...values },
@@ -91,7 +91,7 @@ export function dbDeleteTableActionWithPreviewScript({ workspace, resourcePath,
         successText: `Table '${tableKey}' deleted successfully`,
         action: async () => {
             const deleteQuery = makeDeleteTableQuery(tableKey, resourceType);
-            await runPreviewJobAndPollResult({
+            await runScriptAndPollResult({
                 workspace,
                 requestBody: {
                     args: { database: '$res:' + resourcePath },

package/package/components/details/DetailPageDetailPanel.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">import { Tabs, Tab, TabContent } from '../common';
 import HighlightTheme from '../HighlightTheme.svelte';
 import FlowViewerInner from '../FlowViewerInner.svelte';
-export let flow_json = undefined;
-export let isOperator = false;
-export let selected;
+let { flow_json = undefined, isOperator = false, selected = $bindable(), save_inputs, script, triggers, flow_step } = $props();
 </script>
 
 <HighlightTheme />
@@ -23,26 +21,26 @@ export let selected;
 			<Tab value="flow_step">Step</Tab>
 		{/if}
 
-		<svelte:fragment slot="content">
+		{#snippet content()}
 			<div class="min-h-0 grow">
 				<TabContent value="saved_inputs" class="h-full">
-					<slot name="save_inputs" />
+					{@render save_inputs?.()}
 				</TabContent>
 				<TabContent value="script" class="h-full">
-					<slot name="script" />
+					{@render script?.()}
 				</TabContent>
 				<TabContent value="triggers" class="h-full">
-					<slot name="triggers" />
+					{@render triggers?.()}
 				</TabContent>
 				{#if flow_json}
 					<TabContent value="raw" class="flex flex-col flex-1 h-full overflow-auto p-2">
 						<FlowViewerInner flow={flow_json} />
 					</TabContent>
 					<TabContent value="flow_step" class="flex flex-col flex-1 h-full">
-						<slot name="flow_step" />
+						{@render flow_step?.()}
 					</TabContent>
 				{/if}
 			</div>
-		</svelte:fragment>
+		{/snippet}
 	</Tabs>
 </div>

package/package/components/details/DetailPageDetailPanel.svelte.d.ts

@@ -1,27 +1,12 @@
-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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DetailPageDetailPanel: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     flow_json?: any | undefined;
     isOperator?: boolean;
     selected: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    save_inputs: {};
-    script: {};
-    triggers: {};
-    flow_step: {};
-}, {}, string>;
-type DetailPageDetailPanel = InstanceType<typeof DetailPageDetailPanel>;
+    save_inputs?: import('svelte').Snippet;
+    script?: import('svelte').Snippet;
+    triggers?: import('svelte').Snippet;
+    flow_step?: import('svelte').Snippet;
+}
+declare const DetailPageDetailPanel: import("svelte").Component<Props, {}, "selected">;
+type DetailPageDetailPanel = ReturnType<typeof DetailPageDetailPanel>;
 export default DetailPageDetailPanel;

package/package/components/details/DetailPageHeader.svelte

@@ -5,14 +5,8 @@ import { twMerge } from 'tailwind-merge';
 import { userStore } from '../../stores';
 import { createEventDispatcher, getContext, tick } from 'svelte';
 import { Calendar } from 'lucide-svelte';
-const { triggersCount, triggersState } = getContext('TriggerContext');
-export let mainButtons = [];
-export let menuItems = [];
-export let title;
-export let tag;
-export let errorHandlerKind;
-export let scriptOrFlowPath;
-export let errorHandlerMuted;
+const { triggersCount, triggersState } = $state(getContext('TriggerContext'));
+let { mainButtons = [], menuItems = [], title, tag, errorHandlerKind, scriptOrFlowPath, errorHandlerMuted = $bindable(), children, trigger_badges } = $props();
 const dispatch = createEventDispatcher();
 </script>
 
@@ -30,7 +24,7 @@ const dispatch = createEventDispatcher();
 				</div>{#if tag}
 					<Badge>tag: {tag}</Badge>
 				{/if}
-				<slot />
+				{@render children?.()}
 				{#if triggersState?.triggers?.some((t) => t.isPrimary && !t.isDraft)}
 					{@const primarySchedule = triggersState.triggers.findIndex(
 						(t) => t.isPrimary && !t.isDraft
@@ -50,7 +44,7 @@ const dispatch = createEventDispatcher();
 						{$triggersCount?.primary_schedule?.schedule ?? ''}
 					</Button>
 				{/if}
-				<slot name="trigger-badges" />
+				{@render trigger_badges?.()}
 			</div>
 			<div class="flex gap-1 md:gap-2 items-center">
 				{#if menuItems.length > 0}

package/package/components/details/DetailPageHeader.svelte.d.ts

@@ -1,3 +1,26 @@
+type ButtonProps = any;
+type MenuItemButton = {
+    label: string;
+    Icon: any;
+    onclick: () => void;
+    color?: 'red';
+};
+type MainButton = {
+    label: string;
+    href: string;
+    buttonProps: ButtonProps;
+};
+interface Props {
+    mainButtons?: MainButton[];
+    menuItems?: MenuItemButton[];
+    title: string;
+    tag: string | undefined;
+    errorHandlerKind: 'flow' | 'script';
+    scriptOrFlowPath: string;
+    errorHandlerMuted: boolean | undefined;
+    children?: import('svelte').Snippet;
+    trigger_badges?: import('svelte').Snippet;
+}
 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,38 +34,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const DetailPageHeader: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    mainButtons?: {
-        label: string;
-        href: string;
-        buttonProps: any;
-    }[];
-    menuItems?: {
-        label: string;
-        Icon: any;
-        onclick: () => void;
-        color?: "red";
-    }[];
-    title: string;
-    tag: string | undefined;
-    errorHandlerKind: "flow" | "script";
-    scriptOrFlowPath: string;
-    errorHandlerMuted: boolean | undefined;
-}, {
-    default: {};
-    'trigger-badges': {};
-}>, {
+declare const DetailPageHeader: $$__sveltets_2_IsomorphicComponent<Props, {
     seeTriggers: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    'trigger-badges': {};
-}, {}, string>;
+}, {}, {}, "errorHandlerMuted">;
 type DetailPageHeader = InstanceType<typeof DetailPageHeader>;
 export default DetailPageHeader;

package/package/components/details/DetailPageLayout.svelte

@@ -2,28 +2,38 @@
 import SplitPanesWrapper from '../splitPanes/SplitPanesWrapper.svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import DetailPageDetailPanel from './DetailPageDetailPanel.svelte';
-export let isOperator = false;
-export let flow_json = undefined;
-export let selected;
-let mobileTab = 'form';
-let clientWidth = window.innerWidth;
+let { isOperator = false, flow_json = undefined, selected = $bindable(), header, form, scriptRender: script, save_inputs, flow_step, triggers } = $props();
+let mobileTab = $state('form');
+let clientWidth = $state(window.innerWidth);
+const script_render = $derived(script);
+const save_inputs_render = $derived(save_inputs);
+const flow_step_render = $derived(flow_step);
+const triggers_render = $derived(triggers);
 </script>
 
 <main class="h-screen w-full" bind:clientWidth>
 	{#if clientWidth >= 768}
 		<div class="h-full w-full">
-			<slot name="header" />
+			{@render header?.()}
 			<SplitPanesWrapper>
 				<Splitpanes>
 					<Pane size={65} minSize={50}>
-						<slot name="form" />
+						{@render form?.()}
 					</Pane>
 					<Pane size={35} minSize={15}>
 						<DetailPageDetailPanel bind:selected {isOperator} {flow_json}>
-							<slot slot="script" name="script" />
-							<slot slot="save_inputs" name="save_inputs" />
-							<slot slot="flow_step" name="flow_step" />
-							<slot slot="triggers" name="triggers" />
+							{#snippet script()}
+								{@render script_render?.()}
+							{/snippet}
+							{#snippet save_inputs()}
+								{@render save_inputs_render?.()}
+							{/snippet}
+							{#snippet flow_step()}
+								{@render flow_step_render?.()}
+							{/snippet}
+							{#snippet triggers()}
+								{@render triggers_render?.()}
+							{/snippet}
 						</DetailPageDetailPanel>
 					</Pane>
 				</Splitpanes>
@@ -31,7 +41,7 @@ let clientWidth = window.innerWidth;
 		</div>
 	{:else}
 		<div class="h-full w-full">
-			<slot name="header" />
+			{@render header?.()}
 			<Tabs bind:selected={mobileTab}>
 				<Tab value="form">Run form</Tab>
 				<Tab value="saved_inputs">Inputs</Tab>
@@ -44,23 +54,23 @@ let clientWidth = window.innerWidth;
 					<Tab value="script">Script</Tab>
 				{/if}
 
-				<svelte:fragment slot="content">
+				{#snippet content()}
 					<div class="h-full">
 						<TabContent value="form" class="flex flex-col flex-1 h-full">
-							<slot name="form" />
+							{@render form?.()}
 						</TabContent>
 
 						<TabContent value="saved_inputs" class="flex flex-col flex-1 h-full">
-							<slot name="save_inputs" />
+							{@render save_inputs?.()}
 						</TabContent>
 						<TabContent value="triggers" class="flex flex-col flex-1 h-full mt-[-2px]">
-							<slot name="triggers" />
+							{@render triggers?.()}
 						</TabContent>
 						<TabContent value="script" class="flex flex-col flex-1 h-full">
-							<slot name="script" />
+							{@render script?.()}
 						</TabContent>
 					</div>
-				</svelte:fragment>
+				{/snippet}
 			</Tabs>
 		</div>
 	{/if}

package/package/components/details/DetailPageLayout.svelte.d.ts

@@ -1,31 +1,14 @@
-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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DetailPageLayout: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     isOperator?: boolean;
     flow_json?: any | undefined;
     selected: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    header: {};
-    form: {};
-    script: {};
-    save_inputs: {};
-    flow_step: {
-        slot: string;
-    };
-    triggers: {};
-}, {}, string>;
-type DetailPageLayout = InstanceType<typeof DetailPageLayout>;
+    header?: import('svelte').Snippet;
+    form?: import('svelte').Snippet;
+    scriptRender?: import('svelte').Snippet;
+    save_inputs?: import('svelte').Snippet;
+    flow_step?: import('svelte').Snippet;
+    triggers?: import('svelte').Snippet;
+}
+declare const DetailPageLayout: import("svelte").Component<Props, {}, "selected">;
+type DetailPageLayout = ReturnType<typeof DetailPageLayout>;
 export default DetailPageLayout;

package/package/components/details/DetailPageTriggerPanel.svelte

@@ -1,14 +1,13 @@
-<script lang="ts">import { Tabs, Tab } from '../common';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { Tabs, Tab } from '../common';
 import { CalendarCheck2, MailIcon, Route, Terminal, Webhook, Unplug, PlugZap, Database } from 'lucide-svelte';
 import HighlightTheme from '../HighlightTheme.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import { MqttIcon, NatsIcon, KafkaIcon, AwsIcon } from '../icons';
 import GoogleCloudIcon from '../icons/GoogleCloudIcon.svelte';
-export let triggerSelected = 'webhooks';
-export let simplfiedPoll = false;
-export let eventStreamType = 'kafka';
-$: {
+let { triggerSelected = $bindable('webhooks'), simplfiedPoll = false, eventStreamType = $bindable('kafka'), webhooks, routes, emails, schedules, websockets, postgres, kafka, nats, sqs, mqtt, gcp, cli } = $props();
+run(() => {
     if (triggerSelected === 'kafka' ||
         triggerSelected === 'nats' ||
         triggerSelected === 'sqs' ||
@@ -16,7 +15,7 @@ $: {
         triggerSelected === 'gcp') {
         eventStreamType = triggerSelected;
     }
-}
+});
 </script>
 
 <HighlightTheme />
@@ -73,48 +72,50 @@ $: {
 				</span>
 			</Tab>
 
-			<svelte:fragment slot="content">
+			{#snippet content()}
 				<div class="min-h-0 grow overflow-y-auto">
 					{#if triggerSelected === 'webhooks'}
-						<slot name="webhooks" />
+						{@render webhooks?.()}
 					{:else if triggerSelected === 'routes'}
-						<slot name="routes" />
+						{@render routes?.()}
 					{:else if triggerSelected === 'emails'}
-						<slot name="emails" />
+						{@render emails?.()}
 					{:else if triggerSelected === 'schedules'}
-						<slot name="schedules" />
+						{@render schedules?.()}
 					{:else if triggerSelected === 'websockets'}
-						<slot name="websockets" />
+						{@render websockets?.()}
 					{:else if triggerSelected === 'postgres'}
-						<slot name="postgres" />
+						{@render postgres?.()}
 					{:else if triggerSelected === 'kafka' || triggerSelected === 'nats' || triggerSelected === 'sqs' || triggerSelected === 'mqtt' || triggerSelected === 'gcp'}
 						<div class="m-1.5">
-							<ToggleButtonGroup bind:selected={eventStreamType} let:item>
-								<ToggleButton value="kafka" label="Kafka" icon={KafkaIcon} {item} />
-								<ToggleButton value="nats" label="NATS" icon={NatsIcon} {item} />
-								<ToggleButton value="mqtt" label="MQTT" icon={MqttIcon} {item} />
-								<ToggleButton value="sqs" label="SQS" icon={AwsIcon} {item} />
-								<ToggleButton value="gcp" label="GCP Pub/Sub" icon={GoogleCloudIcon} {item} />
+							<ToggleButtonGroup bind:selected={eventStreamType}>
+								{#snippet children({ item })}
+									<ToggleButton value="kafka" label="Kafka" icon={KafkaIcon} {item} />
+									<ToggleButton value="nats" label="NATS" icon={NatsIcon} {item} />
+									<ToggleButton value="mqtt" label="MQTT" icon={MqttIcon} {item} />
+									<ToggleButton value="sqs" label="SQS" icon={AwsIcon} {item} />
+									<ToggleButton value="gcp" label="GCP Pub/Sub" icon={GoogleCloudIcon} {item} />
+								{/snippet}
 							</ToggleButtonGroup>
 						</div>
 						{#if eventStreamType === 'kafka'}
-							<slot name="kafka" />
+							{@render kafka?.()}
 						{:else if eventStreamType === 'nats'}
-							<slot name="nats" />
+							{@render nats?.()}
 						{:else if eventStreamType === 'sqs'}
-							<slot name="sqs" />
+							{@render sqs?.()}
 						{:else if eventStreamType === 'mqtt'}
-							<slot name="mqtt" />
+							{@render mqtt?.()}
 						{:else if eventStreamType === 'gcp'}
-							<slot name="gcp" />
+							{@render gcp?.()}
 						{/if}
 					{:else if triggerSelected === 'cli'}
-						<slot name="cli" />
+						{@render cli?.()}
 					{/if}
 				</div>
-			</svelte:fragment>
+			{/snippet}
 		</Tabs>
 	</div>
 {:else}
-	<slot name="schedules" />
+	{@render schedules?.()}
 {/if}

package/package/components/details/DetailPageTriggerPanel.svelte.d.ts

@@ -1,35 +1,20 @@
-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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DetailPageTriggerPanel: $$__sveltets_2_IsomorphicComponent<{
-    triggerSelected?: "webhooks" | "emails" | "schedules" | "cli" | "routes" | "websockets" | "kafka" | "postgres" | "nats" | "sqs" | "mqtt" | "gcp" | "scheduledPoll";
+interface Props {
+    triggerSelected?: 'webhooks' | 'emails' | 'schedules' | 'cli' | 'routes' | 'websockets' | 'kafka' | 'postgres' | 'nats' | 'sqs' | 'mqtt' | 'gcp' | 'scheduledPoll';
     simplfiedPoll?: boolean;
-    eventStreamType?: "kafka" | "nats" | "sqs" | "mqtt" | "gcp";
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    webhooks: {};
-    routes: {};
-    emails: {};
-    schedules: {};
-    websockets: {};
-    postgres: {};
-    kafka: {};
-    nats: {};
-    sqs: {};
-    mqtt: {};
-    gcp: {};
-    cli: {};
-}, {}, string>;
-type DetailPageTriggerPanel = InstanceType<typeof DetailPageTriggerPanel>;
+    eventStreamType?: 'kafka' | 'nats' | 'sqs' | 'mqtt' | 'gcp';
+    webhooks?: import('svelte').Snippet;
+    routes?: import('svelte').Snippet;
+    emails?: import('svelte').Snippet;
+    schedules?: import('svelte').Snippet;
+    websockets?: import('svelte').Snippet;
+    postgres?: import('svelte').Snippet;
+    kafka?: import('svelte').Snippet;
+    nats?: import('svelte').Snippet;
+    sqs?: import('svelte').Snippet;
+    mqtt?: import('svelte').Snippet;
+    gcp?: import('svelte').Snippet;
+    cli?: import('svelte').Snippet;
+}
+declare const DetailPageTriggerPanel: import("svelte").Component<Props, {}, "triggerSelected" | "eventStreamType">;
+type DetailPageTriggerPanel = ReturnType<typeof DetailPageTriggerPanel>;
 export default DetailPageTriggerPanel;

package/package/components/details/EmailTriggerConfigSection.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import Button from '../common/button/Button.svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import Button from '../common/button/Button.svelte';
 import Label from '../Label.svelte';
 import Tooltip from '../Tooltip.svelte';
 import { AlertTriangle } from 'lucide-svelte';
@@ -9,13 +10,7 @@ import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelt
 import ClipboardPanel from './ClipboardPanel.svelte';
 import Alert from '../common/alert/Alert.svelte';
 import { base32 } from 'rfc4648';
-export let token = '';
-export let isFlow = false;
-export let hash = undefined;
-export let path;
-export let userSettings;
-export let emailDomain = null;
-let requestType = 'path';
+let requestType = $state('path');
 function emailAddress(requestType, path, hash, isFlow, token) {
     const pathOrHash = requestType === 'hash' ? hash : path.replaceAll('/', '.');
     const plainPrefix = `${$workspaceStore}+${(requestType === 'hash' ? 'hash.' : isFlow ? 'flow.' : '') + pathOrHash}+${token}`;
@@ -26,8 +21,10 @@ function emailAddress(requestType, path, hash, isFlow, token) {
         .toLowerCase();
     return `${pathOrHash}+${encodedPrefix}@${emailDomain}`;
 }
-export let email = '';
-$: email = emailAddress(requestType, path, hash, isFlow, token);
+let { token = $bindable(''), isFlow = false, hash = undefined, path, userSettings, emailDomain = null, email = $bindable('') } = $props();
+run(() => {
+    email = emailAddress(requestType, path, hash, isFlow, token);
+});
 </script>
 
 <div>
@@ -66,9 +63,11 @@ $: email = emailAddress(requestType, path, hash, isFlow, token);
 			<div class="flex flex-col gap-2">
 				<div class="flex flex-row justify-between">
 					<div class="text-xs font-semibold flex flex-row items-center">Call method</div>
-					<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType} let:item>
-						<ToggleButton label="By path" value="path" {item} />
-						<ToggleButton label="By hash" value="hash" {item} />
+					<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType}>
+						{#snippet children({ item })}
+							<ToggleButton label="By path" value="path" {item} />
+							<ToggleButton label="By hash" value="hash" {item} />
+						{/snippet}
 					</ToggleButtonGroup>
 				</div>
 			</div>