windmill-components 1.394.7 → 1.405.0

package/package/components/apps/svelte-select/lib/Select.svelte

@@ -843,7 +843,7 @@
 		right: 0;
 		bottom: 0;
 		left: 0;
-		background: transparent;
+		background: transparent !important;
 		font-size: var(--font-size, 16px);
 	}
 

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

@@ -148,7 +148,7 @@ async function uploadFileToS3(fileToUpload, fileToUploadKey) {
         });
         return;
     }
-    dispatch('addition', { path: uploadData.path });
+    dispatch('addition', { path: uploadData.path, filename: fileToUpload.name });
     sendUserToast('File upload finished!');
     uploadData.progress = 100;
     $fileUploads = $fileUploads.map((fileUpload) => {

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

@@ -14,6 +14,7 @@ import BunIcon from '../../icons/BunIcon.svelte';
 import DenoIcon from '../../icons/DenoIcon.svelte';
 import PHPIcon from '../../icons/PHPIcon.svelte';
 import RustIcon from '../../icons/RustIcon.svelte';
+import AnsibleIcon from '../../icons/AnsibleIcon.svelte';
 export let lang;
 export let width = 30;
 export let height = 30;
@@ -34,7 +35,8 @@ const languageLabel = {
     mssql: 'MS SQL Server',
     bun: 'TypeScript',
     php: 'PHP',
-    rust: 'Rust'
+    rust: 'Rust',
+    ansible: 'Ansible Playbook'
 };
 const langToComponent = {
     go: GoIcon,
@@ -57,7 +59,8 @@ const langToComponent = {
     nativets: RestIcon,
     graphql: GraphqlIcon,
     php: PHPIcon,
-    rust: RustIcon
+    rust: RustIcon,
+    ansible: AnsibleIcon
 };
 let subIconScale = width === 30 ? 0.6 : 0.8;
 </script>

package/package/components/common/menu/Menu.svelte

@@ -41,7 +41,8 @@ const placementsClasses = {
     'bottom-start': 'origin-top-left left-0',
     'bottom-end': 'origin-top-right right-0',
     'top-start': 'origin-bottom-left left-0 bottom-0',
-    'top-end': 'origin-bottom-right right-0 bottom-0'
+    'top-end': 'origin-bottom-right right-0 bottom-0',
+    'top-center': 'origin-top-left -top-full left-1/2  transform -translate-x-1/2 -translate-y-full'
 };
 const dispatch = createEventDispatcher();
 </script>

package/package/components/common/menu/MenuV2.svelte

@@ -7,6 +7,7 @@ import ResolveOpen from './ResolveOpen.svelte';
 export let placement = 'bottom-start';
 export let justifyEnd = false;
 export let lightMode = false;
+export let maxHeight = 900;
 const [floatingRef, floatingContent] = createFloatingActions({
     strategy: 'fixed',
     middleware: [offset(), flip(), shift()],
@@ -34,9 +35,10 @@ const [floatingRef, floatingContent] = createFloatingActions({
 			>
 				<MenuItems
 					class={twMerge(
-						'border w-56 origin-top-right rounded-md shadow-md focus:outline-none',
+						'border w-56 origin-top-right rounded-md shadow-md focus:outline-none overflow-y-auto',
 						lightMode ? 'bg-surface-inverse' : 'bg-surface'
 					)}
+					style="max-height: {maxHeight}px;"
 				>
 					<div class="my-1">
 						<slot />

package/package/components/common/menu/MenuV2.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         placement?: any;
         justifyEnd?: boolean | undefined;
         lightMode?: boolean | undefined;
+        maxHeight?: number | undefined;
     };
     events: {
         open: CustomEvent<any>;

package/package/components/common/popup/Popup.svelte

@@ -6,10 +6,12 @@ export let floatingConfig = {
     placement: 'bottom-start'
 };
 export let containerClasses = 'rounded-lg shadow-md border p-4 bg-surface';
+export let floatingClasses = '';
 const [floatingRef, floatingContent] = createFloatingActions(floatingConfig);
 export let blockOpen = false;
 export let shouldUsePortal = true;
 export let target = undefined;
+export let noTransition = false;
 </script>
 
 <Popover on:close class="leading-none">
@@ -19,22 +21,30 @@ export let target = undefined;
 		</div>
 	</PopoverButton>
 	<ConditionalPortal condition={shouldUsePortal} {target}>
-		<div use:floatingContent class="z5000">
-			<Transition
-				show={blockOpen || undefined}
-				enter="transition ease-out duration-200"
-				enterFrom="opacity-0 translate-y-1"
-				enterTo="opacity-100 translate-y-0"
-				leave="transition ease-in duration-150"
-				leaveFrom="opacity-100 translate-y-0"
-				leaveTo="opacity-0 translate-y-1"
-			>
-				<PopoverPanel let:close static={blockOpen}>
+		<div use:floatingContent class={`z5000 ${floatingClasses}`}>
+			{#if !noTransition}
+				<Transition
+					show={blockOpen || undefined}
+					enter="transition ease-out duration-200"
+					enterFrom="opacity-0 translate-y-1"
+					enterTo="opacity-100 translate-y-0"
+					leave="transition ease-in duration-150"
+					leaveFrom="opacity-100 translate-y-0"
+					leaveTo="opacity-0 translate-y-1"
+				>
+					<PopoverPanel let:close static={blockOpen}>
+						<div class={containerClasses}>
+							<slot {close} />
+						</div>
+					</PopoverPanel>
+				</Transition>
+			{:else}
+				<PopoverPanel focus={false} let:close static={blockOpen}>
 					<div class={containerClasses}>
 						<slot {close} />
 					</div>
 				</PopoverPanel>
-			</Transition>
+			{/if}
 		</div>
 	</ConditionalPortal>
 </Popover>

package/package/components/common/popup/Popup.svelte.d.ts

@@ -4,9 +4,11 @@ declare const __propDef: {
     props: {
         floatingConfig?: ComputeConfig | undefined;
         containerClasses?: string | undefined;
+        floatingClasses?: string | undefined;
         blockOpen?: boolean | undefined;
         shouldUsePortal?: boolean | undefined;
         target?: string | HTMLElement | undefined;
+        noTransition?: boolean | undefined;
     };
     events: {
         close: CustomEvent<any>;

package/package/components/common/popup/PopupV2.svelte

@@ -0,0 +1,58 @@
+<script>import Portal from '../../Portal.svelte';
+import { clickOutside } from '../../../utils';
+import { createFloatingActions } from 'svelte-floating-ui';
+export let floatingConfig = {
+    strategy: 'absolute',
+    //@ts-ignore
+    placement: 'bottom-center'
+};
+export let open = false;
+export let target = undefined;
+// export let containerClasses: string = 'rounded-lg shadow-md border p-4 bg-surface'
+// export let floatingClasses: string = ''
+const [floatingRef, floatingContent] = createFloatingActions(floatingConfig);
+function close(div) {
+    open = false;
+}
+let acceptClickoutside = false;
+function pointerup() {
+    setTimeout(() => {
+        acceptClickoutside = true;
+    }, 100);
+}
+function pointerdown() {
+    if (acceptClickoutside && open) {
+        open = false;
+    }
+    else {
+        acceptClickoutside = false;
+        open = true;
+    }
+}
+</script>
+
+<div use:floatingRef>
+	<slot {pointerup} {pointerdown} name="button" />
+</div>
+
+<Portal {target}>
+	{#if open}
+		<div
+			class="border rounded-lg shadow-lg bg-surface z5000"
+			style="position:absolute"
+			use:floatingContent
+		>
+			<div
+				use:clickOutside
+				on:click_outside={() => {
+					if (acceptClickoutside) {
+						acceptClickoutside = false
+						open = false
+					}
+				}}
+			>
+				<slot {close} />
+			</div>
+		</div>
+	{/if}
+</Portal>

package/package/components/common/popup/PopupV2.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import { type ComputeConfig } from 'svelte-floating-ui';
+declare const __propDef: {
+    props: {
+        floatingConfig?: ComputeConfig | undefined;
+        open?: boolean | undefined;
+        target?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        button: {
+            pointerup: () => void;
+            pointerdown: () => void;
+        };
+        default: {
+            close: (div: Element | null) => void;
+        };
+    };
+};
+export type PopupV2Props = typeof __propDef.props;
+export type PopupV2Events = typeof __propDef.events;
+export type PopupV2Slots = typeof __propDef.slots;
+export default class PopupV2 extends SvelteComponent<PopupV2Props, PopupV2Events, PopupV2Slots> {
+}
+export {};

package/package/components/copilot/CronGen.svelte

@@ -11,7 +11,7 @@ let instructionsField = undefined;
 let genLoading = false;
 let abortController = new AbortController();
 $: instructionsField && setTimeout(() => instructionsField?.focus(), 100);
-const SYSTEM = "You are a helpful assitant for creating CRON schedules. The structure is 'second minute hour dayOfMonth month dayOfWeek'. Weekdays are Sunday (1), Monday (2), Tuesday (3), Wednesday (4), Thursday (5), Friday (6), Saturday (7). You only return the CRON string. If it is invalid, you will return an error message preceeded by 'ERROR:'.";
+const SYSTEM = "You are a helpful assitant for creating CRON schedules. The structure is 'second minute hour dayOfMonth month dayOfWeek'. Weekdays are Sunday (1), Monday (2), Tuesday (3), Wednesday (4), Thursday (5), Friday (6), Saturday (7). You only return the CRON string without any wrapping characters. If it is invalid, you will return an error message preceeded by 'ERROR:'.";
 const USER = 'CRON schedule instructions: {instructions}';
 async function generateCron() {
     genLoading = true;

package/package/components/copilot/RegexGen.svelte

@@ -14,7 +14,7 @@ let input;
 let abortController = undefined;
 const dispatch = createEventDispatcher();
 async function onGenerate() {
-    if (funcDesc.length <= 0) {
+    if (funcDesc?.length <= 0) {
         return;
     }
     savePrompt();
@@ -24,7 +24,7 @@ async function onGenerate() {
         const res = await getNonStreamingCompletion([
             {
                 role: 'system',
-                content: 'Generate a regex pattern that one can use in a javascript Regex object. Output only the regex itself. The regex should match the following:'
+                content: 'Generate a regex pattern that one can use in a javascript Regex object. Output only the regex itself without any wrapping characters including the / characters. The regex should match the following:'
             },
             {
                 role: 'user',
@@ -113,7 +113,7 @@ function clearPromptHistory() {
 						bind:this={input}
 						bind:value={funcDesc}
 						on:keypress={({ key }) => {
-							if (key === 'Enter' && funcDesc.length > 0) {
+							if (key === 'Enter' && funcDesc?.length > 0) {
 								close(input || null)
 								onGenerate()
 							}
@@ -130,7 +130,7 @@ function clearPromptHistory() {
 							close(input || null)
 							onGenerate()
 						}}
-						disabled={funcDesc.length <= 0}
+						disabled={funcDesc?.length <= 0}
 						iconOnly
 						startIcon={{ icon: Wand2 }}
 					/>

package/package/components/copilot/StepGen.svelte

@@ -93,7 +93,7 @@ $: {
 	f={(x) => (emptyString(x.summary) ? x.path : x.summary + ' (' + x.path + ')')}
 />
 
-<div class="text-primary transition-all {funcDesc.length > 0 ? 'w-96' : 'w-60'}">
+<div class="text-primary transition-all {funcDesc?.length > 0 ? 'w-96' : 'w-60'}">
 	<div>
 		<div class="flex p-2 relative">
 			<input
@@ -101,7 +101,7 @@ $: {
 				bind:this={input}
 				bind:value={funcDesc}
 				on:input={() => {
-					if (funcDesc.length > 2) {
+					if (funcDesc?.length > 2) {
 						getHubCompletions(funcDesc)
 					} else {
 						hubCompletions = []
@@ -109,14 +109,14 @@ $: {
 				}}
 				placeholder="Search {trigger ? 'triggers' : 'scripts'} or AI gen"
 			/>
-			{#if funcDesc.length === 0}
+			{#if funcDesc?.length === 0}
 				<Wand2
 					size={14}
 					class="absolute right-4 top-1/2 -translate-y-1/2 fill-current opacity-70 text-violet-800 dark:text-violet-400"
 				/>
 			{/if}
 		</div>
-		{#if !disableAi && funcDesc.length > 0}
+		{#if !disableAi && funcDesc?.length > 0}
 			<ul class="transition-all divide-y">
 				<li>
 					<button
@@ -164,11 +164,11 @@ $: {
 				</li>
 			</ul>
 		{/if}
-		{#if funcDesc.length > 0 && filteredItems.length > 0}
+		{#if funcDesc?.length > 0 && filteredItems?.length > 0}
 			<div class="text-left mt-2">
 				<p class="text-xs text-secondary ml-2">Workspace {trigger ? 'Triggers' : 'Scripts'}</p>
 				<ul class="transition-all divide-y">
-					{#each filteredItems.slice(0, 3) as item (item.path)}
+					{#each filteredItems?.slice(0, 3) ?? [] as item (item.path)}
 						<li>
 							<button
 								class="py-2 gap-4 flex flex-row hover:bg-surface-hover transition-all items-center justify-between w-full"

package/package/components/copilot/StepGenQuick.svelte

@@ -0,0 +1,57 @@
+<script>import { workspaceStore } from '../../stores';
+import { ScriptService } from '../../gen';
+import { Wand2, Loader2 } from 'lucide-svelte';
+import SearchItems from '../SearchItems.svelte';
+import { emptyString } from '../../utils';
+import { onMount } from 'svelte';
+export let funcDesc;
+export let trigger = false;
+export let loading = false;
+export let preFilter;
+let scripts = undefined;
+export let filteredItems = [];
+$: prefilteredItems = scripts ?? [];
+async function loadScripts() {
+    const loadedScripts = await ScriptService.listScripts({
+        workspace: $workspaceStore,
+        perPage: 300,
+        kinds: trigger ? 'trigger' : 'script'
+    });
+    scripts = loadedScripts;
+}
+$: scripts == undefined && funcDesc?.length > 1 && loadScripts();
+let input;
+$: preFilter &&
+    setTimeout(() => {
+        input?.focus();
+    }, 50);
+onMount(() => {
+    input?.focus();
+});
+</script>
+
+<SearchItems
+	filter={funcDesc}
+	items={prefilteredItems}
+	bind:filteredItems
+	f={(x) => (emptyString(x.summary) ? x.path : x.summary + ' (' + x.path + ')')}
+/>
+
+<div class="relative text-primary items-center transition-all flex-grow">
+	<div class="grow items-cente">
+		<input
+			bind:this={input}
+			type="text"
+			bind:value={funcDesc}
+			placeholder="Search {trigger ? 'triggers' : 'scripts'} or AI gen"
+		/>
+	</div>
+	<div class="absolute inset-y-0 right-3 flex items-center pointer-events-none">
+		{#if loading}
+			<Loader2 size={16} class="animate-spin text-gray-400" />
+		{/if}
+		{#if funcDesc?.length === 0 && !loading}
+			<Wand2 size={14} class="fill-current opacity-70 text-violet-800 dark:text-violet-400" />
+		{/if}
+	</div>
+</div>

package/package/components/copilot/StepGenQuick.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import { type Script } from '../../gen';
+declare const __propDef: {
+    props: {
+        funcDesc: string;
+        trigger?: boolean | undefined;
+        loading?: boolean | undefined;
+        preFilter: string;
+        filteredItems?: any[] | (Script & {
+            marked?: string | undefined;
+        })[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StepGenQuickProps = typeof __propDef.props;
+export type StepGenQuickEvents = typeof __propDef.events;
+export type StepGenQuickSlots = typeof __propDef.slots;
+export default class StepGenQuick extends SvelteComponent<StepGenQuickProps, StepGenQuickEvents, StepGenQuickSlots> {
+}
+export {};

package/package/components/copilot/flow.d.ts

@@ -16,6 +16,8 @@ export type FlowCopilotModule = {
         kind: string;
         app: string;
         ask_id: number;
+        id: number;
+        version_id: number;
     }[];
     selectedCompletion: {
         path: string;

package/package/components/copilot/flow.js

@@ -41,6 +41,59 @@ To maintain state across runs, you can use get_state() and set_state(value) whic
 
 {additionalInformation}`
 };
+// const preprocessorPrompts: {
+// 	bun: string
+// 	python3: string
+// } = {
+// 	bun: `I'm building a workflow which is a sequence of script steps. Write the preprocessor step in {codeLang} which should check for {description} and return an array.
+// The preprocessor step is executed before flow begins to map trigger specific inputs to the flow inputs.
+// Here is an example of what the preprocessor step should look like:
+// \`\`\`{codeLang}
+// export async function preprocessor(
+// 	wm_trigger: {
+// 		kind: 'http' | 'email' | 'webhook',
+// 		http?: {
+// 			route: string // The route path, e.g. "/users/:id"
+// 			path: string // The actual path called, e.g. "/users/123"
+// 			method: string
+// 			params: Record<string, string>
+// 			query: Record<string, string>
+// 			headers: Record<string, string>
+// 		}
+// 	},
+// 	/* your other args */ 
+// ) {
+// 	return {
+// 		// return the args to be passed to the flow
+// 	}
+// }
+// \`\`\`
+// {additionalInformation}`,
+// 	python3: `I'm building a workflow which is a sequence of script steps. Write the preprocessor step in {codeLang} which should check for {description} and return an array.
+// The preprocessor step is executed before flow begins to map trigger specific inputs to the flow inputs.
+// Here is an example of what the preprocessor step should look like:
+// \`\`\`{codeLang}
+// from typing import TypedDict, Literal
+// class Http(TypedDict):
+// 	route: str # The route path, e.g. "/users/:id"
+// 	path: str # The actual path called, e.g. "/users/123"
+// 	method: str
+// 	params: dict[str, str]
+// 	query: dict[str, str]
+// 	headers: dict[str, str]
+// class WmTrigger(TypedDict):
+//     kind: Literal["http", "email", "webhook"]
+//     http: Http | None
+// def preprocessor(
+// 	wm_trigger: WmTrigger,
+// 	# your other args
+// ):
+// 	return {
+// 		# return the args to be passed to the flow
+// 	}
+// \`\`\`
+// {additionalInformation}`
+// }
 const firstActionPrompt = `I'm building a workflow which is a sequence of script steps. Write a script in {codeLang} which should {description}.
 Return the script's output.
 
@@ -111,6 +164,8 @@ export async function stepCopilot(module, deltaCodeStore, workspace, pastModule,
     const codeLang = lang === 'python3' ? 'python' : 'typescript (Node.js)';
     let prompt = module.type === 'trigger'
         ? triggerPrompts[lang]
+        // : module.type === 'preprocessor'
+        // 	? preprocessorPrompts[lang]
         : pastModule === undefined
             ? firstActionPrompt
             : isFirstInLoop

package/package/components/details/DetailPageDetailPanel.svelte

@@ -1,5 +1,5 @@
 <script>import { Tabs, Tab, TabContent } from '../common';
-import { CalendarCheck2, MailIcon, Terminal, Webhook } from 'lucide-svelte';
+import { CalendarCheck2, MailIcon, Route, Terminal, Webhook } from 'lucide-svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import HighlightTheme from '../HighlightTheme.svelte';
 import FlowViewerInner from '../FlowViewerInner.svelte';
@@ -54,6 +54,12 @@ $: !hasStepDetails && selected === 'flow_step' && (selected = 'saved_inputs');
 											Schedules
 										</span>
 									</Tab>
+									<Tab value="routes">
+										<span class="flex flex-row gap-2 items-center">
+											<Route size={14} />
+											HTTP
+										</span>
+									</Tab>
 									<Tab value="email">
 										<span class="flex flex-row gap-2 items-center">
 											<MailIcon size={14} />
@@ -72,6 +78,8 @@ $: !hasStepDetails && selected === 'flow_step' && (selected = 'saved_inputs');
 									<div class="h-full overflow-auto">
 										{#if triggerSelected === 'webhooks'}
 											<slot name="webhooks" />
+										{:else if triggerSelected === 'routes'}
+											<slot name="routes" />
 										{:else if triggerSelected === 'email'}
 											<slot name="email" />
 										{:else if triggerSelected === 'schedule'}

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        triggerSelected?: "email" | "schedule" | "webhooks" | "cli" | undefined;
+        triggerSelected?: "email" | "schedule" | "webhooks" | "cli" | "routes" | undefined;
         flow_json?: any | undefined;
         hasStepDetails?: boolean | undefined;
         isOperator?: boolean | undefined;
@@ -14,6 +14,7 @@ declare const __propDef: {
         save_inputs: {};
         details: {};
         webhooks: {};
+        routes: {};
         email: {};
         schedule: {};
         cli: {};

package/package/components/details/DetailPageLayout.svelte

@@ -29,6 +29,7 @@ let clientWidth = window.innerWidth;
 							{hasStepDetails}
 						>
 							<slot slot="webhooks" name="webhooks" />
+							<slot slot="routes" name="routes" />
 							<slot slot="email" name="email" />
 							<slot slot="schedule" name="schedule" />
 							<slot slot="cli" name="cli" />
@@ -54,6 +55,7 @@ let clientWidth = window.innerWidth;
 					<TabContent value="detail" class="flex flex-col flex-1 h-full">
 						<DetailPageDetailPanel bind:triggerSelected bind:selected {isOperator} {hasStepDetails}>
 							<slot slot="webhooks" name="webhooks" />
+							<slot slot="routes" name="routes" />
 							<slot slot="email" name="email" />
 							<slot slot="schedule" name="schedule" />
 							<slot slot="cli" name="cli" />

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

@@ -16,6 +16,9 @@ declare const __propDef: {
         webhooks: {
             slot: string;
         };
+        routes: {
+            slot: string;
+        };
         email: {
             slot: string;
         };

package/package/components/details/utils.d.ts

@@ -4,5 +4,4 @@ export declare function archiveScript(hash: string, workspace: string): Promise<
 export declare function unarchiveScript(hash: string, workspace: string): Promise<string>;
 export declare function getScriptDeploymentStatus(hash: string, workspace: string): Promise<any>;
 export declare function loadScript(hash: string, workspace: string): Promise<any>;
-export declare function runScript(scheduledForStr: string | undefined, args: Record<string, any>, hash: string, workspace: string, invisibleToOwner?: boolean): Promise<string>;
 export declare function curlCommand(async: boolean, args: any, $page: any, workspace: string, script: any): string;

package/package/components/details/utils.js

@@ -1,4 +1,4 @@
-import { ScriptService, JobService } from '../../gen';
+import { ScriptService } from '../../gen';
 export async function deleteScript(hash, workspace) {
     return await ScriptService.deleteScriptByHash({ workspace: workspace, hash });
 }
@@ -34,17 +34,6 @@ export async function loadScript(hash, workspace) {
     }
     return { script, hash };
 }
-export async function runScript(scheduledForStr, args, hash, workspace, invisibleToOwner) {
-    const scheduledFor = scheduledForStr ? new Date(scheduledForStr).toISOString() : undefined;
-    let run = await JobService.runScriptByHash({
-        workspace: workspace,
-        hash: hash,
-        requestBody: args,
-        scheduledFor,
-        invisibleToOwner
-    });
-    return run;
-}
 export function curlCommand(async, args, $page, workspace, script) {
     return `curl -H 'Content-Type: application/json' -H "Authorization: Bearer $TOKEN" -X POST -d '${JSON.stringify(args)}' ${$page.url.protocol}//${$page.url.hostname}/api/w/${workspace}/jobs/run${async ? '' : '_wait_result'}/p/${script?.path}`;
 }

package/package/components/flows/FlowEditor.svelte

@@ -12,11 +12,12 @@ export let disableTutorials = false;
 export let disableAi = false;
 export let disableSettings = false;
 export let smallErrorHandler = false;
-let size = 40;
+let size = 50;
 const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotContext');
 </script>
 
 <div
+	id="flow-editor"
 	class={classNames(
 		'h-full overflow-hidden transition-colors duration-[400ms] ease-linear border-t',
 		$copilotCurrentStepStore !== undefined ? 'border-gray-500/75' : ''