windmill-components 1.448.50 → 1.472.2

package/package/components/Dev.svelte

@@ -26,7 +26,7 @@ import { setLicense } from '../enterpriseUtils';
 import { pickScript } from './flows/flowStateUtils';
 import { approximateFindPythonRelativePath, isTypescriptRelativePath, parseTypescriptDeps } from '../relative_imports';
 import Tooltip from './Tooltip.svelte';
-import { initAllAiWorkspace } from './copilot/lib';
+import { workspaceAIClients } from './copilot/lib';
 $: token = $page.url.searchParams.get('wm_token') ?? undefined;
 $: workspace = $page.url.searchParams.get('workspace') ?? undefined;
 $: themeDarkRaw = $page.url.searchParams.get('activeColorTheme');
@@ -65,15 +65,20 @@ async function genFlow(idx, flowModules, stepOnly = false) {
 setContext('FlowCopilotContext', flowCopilotContext);
 async function setCopilotInfo() {
     if (workspace) {
-        initAllAiWorkspace(workspace);
+        workspaceAIClients.init(workspace);
         try {
-            copilotInfo.set(await WorkspaceService.getCopilotInfo({ workspace }));
+            const info = await WorkspaceService.getCopilotInfo({ workspace });
+            copilotInfo.set({
+                ...info,
+                ai_provider: info.ai_provider ?? 'openai'
+            });
         }
         catch (err) {
             copilotInfo.set({
-                ai_provider: '',
+                ai_provider: 'openai',
                 exists_ai_resource: false,
-                code_completion_enabled: false
+                code_completion_model: undefined,
+                ai_models: []
             });
             console.error('Could not get copilot info');
         }
@@ -137,7 +142,6 @@ const el = (event) => {
         event.preventDefault();
     }
     else if (event.data.type == 'replaceScript') {
-        mode = 'script';
         replaceScript(event.data);
     }
     else if (event.data.type == 'testBundle') {
@@ -161,7 +165,6 @@ const el = (event) => {
         sendUserToast(typeof event.data.error == 'object' ? JSON.stringify(event.data.error) : event.data.error, true);
     }
     else if (event.data.type == 'replaceFlow') {
-        mode = 'flow';
         lockChanges = true;
         replaceFlow(event.data);
         timeout && clearTimeout(timeout);
@@ -248,6 +251,14 @@ onDestroy(() => {
     }
 });
 function connectWs() {
+    try {
+        if (socket) {
+            socket.close();
+        }
+    }
+    catch (e) {
+        console.error('Failed to close websocket', e);
+    }
     const port = searchParams?.get('port') || '3001';
     try {
         socket = new WebSocket(`ws://localhost:${port}/ws`);
@@ -264,7 +275,15 @@ function connectWs() {
                 console.log('Received invalid JSON: ' + msg);
                 return;
             }
-            replaceScript(data);
+            if (data.type == 'script') {
+                replaceScript(data);
+            }
+            else if (data.type == 'flow') {
+                replaceFlow(data);
+            }
+            else {
+                sendUserToast(`Received invalid message type ${data.type}`, true);
+            }
         }
     }
     catch (e) {
@@ -325,6 +344,7 @@ async function onKeyDown(event) {
 let relativePaths = [];
 let lastPath = undefined;
 async function replaceScript(lastEdit) {
+    mode = 'script';
     currentScript = lastEdit;
     if (lastPath !== lastEdit.path) {
         schema = emptySchema();
@@ -356,6 +376,7 @@ const flowStore = writable({
 });
 let lastUriPath = undefined;
 async function replaceFlow(lastEdit) {
+    mode = 'flow';
     lastUriPath = lastEdit.uriPath;
     // sendUserToast(JSON.stringify(lastEdit.flow), true)
     // return
@@ -605,6 +626,7 @@ async function inferModuleArgs(selectedIdStore) {
 				<Splitpanes horizontal class="h-full max-h-screen grow">
 					<Pane size={67}>
 						{#if $flowStore?.value?.modules}
+							<div id="flow-editor" />
 							<FlowModuleSchemaMap
 								bind:modules={$flowStore.value.modules}
 								disableAi

package/package/components/DisplayResult.svelte

@@ -22,6 +22,7 @@ import { convertJsonToCsv } from './table/tableUtils';
 import Tooltip from './Tooltip.svelte';
 import HighlightTheme from './HighlightTheme.svelte';
 import PdfViewer from './display/PdfViewer.svelte';
+import { getContext, hasContext } from 'svelte';
 export let result;
 export let requireHtmlApproval = false;
 export let filename = undefined;
@@ -34,10 +35,12 @@ export let drawerOpen = false;
 export let nodeId = undefined;
 export let language = undefined;
 export let appPath = undefined;
+export let customUi = undefined;
 const IMG_MAX_SIZE = 10000000;
 const TABLE_MAX_SIZE = 5000000;
 const DISPLAY_MAX_SIZE = 100000;
 let resultKind;
+let hasBigInt = false;
 $: resultKind = inferResultKind(result);
 export let forceJson = false;
 let enableHtml = false;
@@ -109,6 +112,12 @@ function inferResultKind(result) {
             else {
                 largeObject = size > DISPLAY_MAX_SIZE;
             }
+            if (!largeObject) {
+                hasBigInt = checkIfHasBigInt(result);
+                if (hasBigInt) {
+                    return 'json';
+                }
+            }
             if (Array.isArray(result)) {
                 if (result.length === 0) {
                     return 'json';
@@ -207,6 +216,18 @@ function toJsonStr(result) {
         return 'error stringifying object: ' + e.toString();
     }
 }
+function checkIfHasBigInt(result) {
+    if (typeof result === 'number' && Number.isInteger(result) && !Number.isSafeInteger(result)) {
+        return true;
+    }
+    if (Array.isArray(result)) {
+        return result.some(checkIfHasBigInt);
+    }
+    if (result && typeof result === 'object') {
+        return Object.values(result).some(checkIfHasBigInt);
+    }
+    return false;
+}
 function contentOrRootString(obj) {
     if (obj == undefined || obj == null) {
         return '';
@@ -286,6 +307,9 @@ function arrayOfRowsToObjects(input) {
 }
 let globalForceJson = false;
 let seeS3PreviewFileFromList = '';
+const disableTooltips = hasContext('disableTooltips')
+    ? getContext('disableTooltips') === true
+    : false;
 </script>
 
 <HighlightTheme />
@@ -299,10 +323,11 @@ let seeS3PreviewFileFromList = '';
 					on:selected={(ev) => {
 						globalForceJson = ev.detail === 'json'
 					}}
+					let:item
 				>
-					<ToggleButton class="px-1.5" value="pretty" label="Pretty" icon={Highlighter} />
+					<ToggleButton class="px-1.5" value="pretty" label="Pretty" icon={Highlighter} {item} />
 
-					<ToggleButton class="px-1.5" value="json" label="JSON" icon={Braces} />
+					<ToggleButton class="px-1.5" value="json" label="JSON" icon={Braces} {item} />
 				</ToggleButtonGroup>
 			</div>
 		{/if}
@@ -321,55 +346,71 @@ let seeS3PreviewFileFromList = '';
 			/>
 		{/each}</div
 	>
-{:else if resultKind === 'nondisplayable'}<div class="text-red-400">Non displayable object</div
-	>{:else}<div
+{:else if resultKind === 'nondisplayable'}
+	<div class="text-red-400">Non displayable object</div>
+{:else}
+	<div
 		class="inline-highlight relative grow {['plain', 'markdown'].includes(resultKind ?? '')
 			? ''
 			: 'min-h-[160px]'}"
-		>{#if result != undefined && length != undefined && largeObject != undefined}<div
-				class="flex justify-between items-center w-full"
-				><div class="text-tertiary text-sm">
+	>
+		{#if result != undefined && length != undefined && largeObject != undefined}
+			<div class="flex justify-between items-center w-full">
+				<div class="text-tertiary text-sm flex flex-row gap-2 items-center">
 					{#if !hideAsJson && !['json', 's3object'].includes(resultKind ?? '') && typeof result === 'object'}<ToggleButtonGroup
 							class="h-6"
 							selected={forceJson ? 'json' : resultKind?.startsWith('table-') ? 'table' : 'pretty'}
+							let:item
 							on:selected={(ev) => {
 								forceJson = ev.detail === 'json'
 							}}
 						>
 							{#if ['table-col', 'table-row', 'table-row-object'].includes(resultKind ?? '')}
-								<ToggleButton class="px-1.5" value="table" label="Table" icon={Table2} />
+								<ToggleButton class="px-1.5" value="table" label="Table" icon={Table2} {item} />
 							{:else}
-								<ToggleButton class="px-1.5" value="pretty" label="Pretty" icon={Highlighter} />
+								<ToggleButton
+									class="px-1.5"
+									value="pretty"
+									label="Pretty"
+									icon={Highlighter}
+									{item}
+								/>
 							{/if}
-							<ToggleButton class="px-1.5" value="json" label="JSON" icon={Braces} />
+							<ToggleButton class="px-1.5" value="json" label="JSON" icon={Braces} {item} />
 						</ToggleButtonGroup>
 					{/if}
 				</div>
 				<div class="text-secondary text-xs flex gap-2.5 z-10 items-center">
-					<slot name="copilot-fix" />
+					{#if customUi?.disableAiFix !== true}
+						<slot name="copilot-fix" />
+					{/if}
 					{#if !disableExpand && !noControls}
-						<a
-							download="{filename ?? 'result'}.json"
-							class="-mt-1 text-current"
-							href={workspaceId && jobId
-								? nodeId
-									? `${base}/api/w/${workspaceId}/jobs/result_by_id/${jobId}/${nodeId}`
-									: `${base}/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
-								: `data:text/json;charset=utf-8,${encodeURIComponent(toJsonStr(result))}`}
-						>
-							<Download size={14} />
-						</a>
-						<Popover
-							documentationLink="https://www.windmill.dev/docs/core_concepts/rich_display_rendering"
-						>
-							<svelte:fragment slot="text">
-								The result renderer in Windmill supports rich display rendering, allowing you to
-								customize the display format of your results.
-							</svelte:fragment>
-							<div class="-mt-1">
-								<InfoIcon size={14} />
-							</div>
-						</Popover>
+						{#if customUi?.disableDownload !== true}
+							<a
+								download="{filename ?? 'result'}.json"
+								class="-mt-1 text-current"
+								href={workspaceId && jobId
+									? nodeId
+										? `${base}/api/w/${workspaceId}/jobs/result_by_id/${jobId}/${nodeId}`
+										: `${base}/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
+									: `data:text/json;charset=utf-8,${encodeURIComponent(toJsonStr(result))}`}
+							>
+								<Download size={14} />
+							</a>
+						{/if}
+						{#if disableTooltips !== true}
+							<Popover
+								documentationLink="https://www.windmill.dev/docs/core_concepts/rich_display_rendering"
+							>
+								<svelte:fragment slot="text">
+									The result renderer in Windmill supports rich display rendering, allowing you to
+									customize the display format of your results.
+								</svelte:fragment>
+								<div class="-mt-1">
+									<InfoIcon size={14} />
+								</div>
+							</Popover>
+						{/if}
 						<button on:click={() => copyToClipboard(toJsonStr(result))} class="-mt-1">
 							<ClipboardCopy size={14} />
 						</button>
@@ -378,8 +419,9 @@ let seeS3PreviewFileFromList = '';
 						</button>
 					{/if}
 				</div>
-			</div><div class="grow"
-				>{#if !forceJson && resultKind === 'table-col'}
+			</div>
+			<div class="grow">
+				{#if !forceJson && resultKind === 'table-col'}
 					{@const data = 'table-col' in result ? result['table-col'] : result}
 					<AutoDataTable objects={objectOfArraysToObjects(data)} />
 				{:else if !forceJson && resultKind === 'table-row'}
@@ -597,16 +639,22 @@ let seeS3PreviewFileFromList = '';
 									<img
 										alt="preview rendered"
 										class="w-auto h-full"
-										src={`/api/w/${workspaceId}/${appPath ? 'apps_u/load_image_preview/' + appPath : 'job_helpers/load_image_preview'}?file_key=${result.s3}` +
-											(result.storage ? `&storage=${result.storage}` : '')}
+										src={`/api/w/${workspaceId}/${
+											appPath
+												? 'apps_u/load_image_preview/' + appPath
+												: 'job_helpers/load_image_preview'
+										}?file_key=${result.s3}` + (result.storage ? `&storage=${result.storage}` : '')}
 									/>
 								</div>
 							{:else if result?.s3?.endsWith('.pdf')}
 								<div class="h-96 mt-2 border">
 									<PdfViewer
 										allowFullscreen
-										source={`/api/w/${workspaceId}/${appPath ? 'apps_u/load_image_preview/' + appPath : 'job_helpers/load_image_preview'}?file_key=${result.s3}` +
-											(result.storage ? `&storage=${result.storage}` : '')}
+										source={`/api/w/${workspaceId}/${
+											appPath
+												? 'apps_u/load_image_preview/' + appPath
+												: 'job_helpers/load_image_preview'
+										}?file_key=${result.s3}` + (result.storage ? `&storage=${result.storage}` : '')}
 									/>
 								</div>
 							{/if}
@@ -693,7 +741,7 @@ let seeS3PreviewFileFromList = '';
 					<div class="prose-xs dark:prose-invert !list-disc !list-outside">
 						<Markdown md={result?.md ?? result?.markdown} />
 					</div>
-				{:else if largeObject}
+				{:else if largeObject || hasBigInt}
 					{#if result && typeof result === 'object' && 'file' in result}
 						<div
 							><a
@@ -703,34 +751,36 @@ let seeS3PreviewFileFromList = '';
 							>
 						</div>
 					{:else}
-						<div class="text-sm text-tertiary"
-							><a
-								download="{filename ?? 'result'}.json"
-								href={workspaceId && jobId
-									? nodeId
-										? `${base}/api/w/${workspaceId}/jobs/result_by_id/${jobId}/${nodeId}`
-										: `${base}/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
-									: `data:text/json;charset=utf-8,${encodeURIComponent(toJsonStr(result))}`}
-							>
-								Download {filename ? '' : 'as JSON'}
-							</a>
-							{#if download_as_csv}
-								<DownloadCsv
-									getContent={() => convertJsonToCsv(result)}
-									customText="Download as CSV"
-								/>
-							{/if}
-						</div>
+						{#if largeObject}
+							<div class="text-sm text-tertiary"
+								><a
+									download="{filename ?? 'result'}.json"
+									href={workspaceId && jobId
+										? nodeId
+											? `${base}/api/w/${workspaceId}/jobs/result_by_id/${jobId}/${nodeId}`
+											: `${base}/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
+										: `data:text/json;charset=utf-8,${encodeURIComponent(toJsonStr(result))}`}
+								>
+									Download {filename ? '' : 'as JSON'}
+								</a>
+								{#if download_as_csv}
+									<DownloadCsv
+										getContent={() => convertJsonToCsv(result)}
+										customText="Download as CSV"
+									/>
+								{/if}
+							</div>
 
-						<div class="mt-1 mb-2">
-							<Alert
-								size="xs"
-								title="Large result detected"
-								type="warning"
-								tooltip="We recommend using persistent object storage for large result. See docs for setting up an object storage service integration using s3 or any other s3 compatible services."
-								documentationLink="https://www.windmill.dev/docs/core_concepts/persistent_storage#object-storage-for-large-data-s3-r2-minio-azure-blob"
-							/>
-						</div>
+							<div class="mt-1 mb-2">
+								<Alert
+									size="xs"
+									title="Large result detected"
+									type="warning"
+									tooltip="We recommend using persistent object storage for large result. See docs for setting up an object storage service integration using s3 or any other s3 compatible services."
+									documentationLink="https://www.windmill.dev/docs/core_concepts/persistent_storage#object-storage-for-large-data-s3-r2-minio-azure-blob"
+								/>
+							</div>
+						{/if}
 						{#if result && result != 'WINDMILL_TOO_BIG'}
 							<ObjectViewer json={result} />
 						{/if}
@@ -770,19 +820,21 @@ let seeS3PreviewFileFromList = '';
 		<Drawer bind:this={jsonViewer} bind:open={drawerOpen} size="900px">
 			<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
 				<svelte:fragment slot="actions">
-					<Button
-						download="{filename ?? 'result'}.json"
-						href={workspaceId && jobId
-							? nodeId
-								? `${base}/api/w/${workspaceId}/jobs/result_by_id/${jobId}/${nodeId}`
-								: `${base}/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
-							: `data:text/json;charset=utf-8,${encodeURIComponent(toJsonStr(result))}`}
-						startIcon={{ icon: Download }}
-						color="light"
-						size="xs"
-					>
-						Download
-					</Button>
+					{#if customUi?.disableDownload !== true}
+						<Button
+							download="{filename ?? 'result'}.json"
+							href={workspaceId && jobId
+								? nodeId
+									? `${base}/api/w/${workspaceId}/jobs/result_by_id/${jobId}/${nodeId}`
+									: `${base}/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
+								: `data:text/json;charset=utf-8,${encodeURIComponent(toJsonStr(result))}`}
+							startIcon={{ icon: Download }}
+							color="light"
+							size="xs"
+						>
+							Download
+						</Button>
+					{/if}
 					<Button
 						on:click={() => copyToClipboard(toJsonStr(result))}
 						color="light"

package/package/components/DisplayResult.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import type { DisplayResultUi } from './custom_ui';
 declare const __propDef: {
     props: {
         result: any;
@@ -13,6 +14,7 @@ declare const __propDef: {
         nodeId?: string | undefined;
         language?: string | undefined;
         appPath?: string | undefined;
+        customUi?: DisplayResultUi | undefined;
         forceJson?: boolean | undefined;
     };
     events: {

package/package/components/DropdownV2.svelte

@@ -1,30 +1,103 @@
+<script context="module">import { writable } from 'svelte/store';
+const activeDropdown = writable({
+    id: null,
+    close: null
+});
+</script>
+
 <script>import { MoreVertical } from 'lucide-svelte';
-import Menu from './common/menu/MenuV2.svelte';
 import DropdownV2Inner from './DropdownV2Inner.svelte';
+import { pointerDownOutside } from '../utils';
+import { createDropdownMenu, melt, createSync } from '@melt-ui/svelte';
+import ResolveOpen from './common/menu/ResolveOpen.svelte';
+import Button from './common/button/Button.svelte';
+import { twMerge } from 'tailwind-merge';
 export let items = [];
-export let justifyEnd = true;
 export let disabled = false;
+export let placement = 'bottom-end';
+export let usePointerDownOutside = false;
+export let closeOnOtherDropdownOpen = true;
+const { elements: { menu, item, trigger }, states, ids: { menu: dropdownId } } = createDropdownMenu({
+    positioning: {
+        placement
+    },
+    loop: true,
+    onOpenChange: ({ next }) => {
+        if (closeOnOtherDropdownOpen) {
+            if (next) {
+                // Close previous dropdown if exists
+                if ($activeDropdown.close && $activeDropdown.id !== $dropdownId) {
+                    $activeDropdown.close();
+                }
+                // Set this dropdown as active
+                activeDropdown.set({ id: $dropdownId, close });
+            }
+            else if ($activeDropdown.id === $dropdownId) {
+                activeDropdown.set({ id: null, close: null });
+            }
+        }
+        return next;
+    }
+});
+let open = false;
+const sync = createSync(states);
+$: sync.open(open, (v) => (open = Boolean(v)));
+export function close() {
+    open = false;
+}
 async function computeItems() {
     if (typeof items === 'function') {
-        return ((await items()) ?? []).filter((item) => !item.hide);
+        const result = await items();
+        return Array.isArray(result) ? result.filter((item) => !item.hide) : [];
     }
     else {
         return items.filter((item) => !item.hide);
     }
 }
+async function getMenuElements() {
+    return Array.from(document.querySelectorAll('[data-menu]'));
+}
 </script>
 
-<Menu placement="bottom-end" {justifyEnd} on:close on:open {disabled}>
-	<div slot="trigger">
-		{#if $$slots.buttonReplacement}
-			<slot name="buttonReplacement" />
-		{:else}
-			<MoreVertical
-				size={16}
-				class="w-8  h-8 p-2 hover:bg-surface-hover cursor-pointer rounded-md"
-			/>
-		{/if}
-	</div>
+<ResolveOpen {open} on:open on:close />
 
-	<DropdownV2Inner items={computeItems} />
-</Menu>
+<button
+	class={twMerge('w-full h-8 flex items-center justify-end', $$props.class)}
+	{...$trigger} use:$trigger.action
+	{disabled}
+	on:click={(e) => e.stopPropagation()}
+	use:pointerDownOutside={{
+		capture: true,
+		stopPropagation: false,
+		exclude: getMenuElements,
+		customEventName: 'pointerdown_menu'
+	}}
+	on:pointerdown_outside={() => {
+		if (usePointerDownOutside) {
+			close()
+		}
+	}}
+	data-menu
+>
+	{#if $$slots.buttonReplacement}
+		<slot name="buttonReplacement" />
+	{:else}
+		<Button
+			nonCaptureEvent
+			size="xs"
+			color="light"
+			startIcon={{ icon: MoreVertical }}
+			btnClasses="bg-transparent"
+		/>
+	{/if}
+</button>
+
+{#if open}
+	<div {...$menu} use:$menu.action data-menu class="z-[6000]">
+		<div
+			class="bg-surface border w-56 origin-top-right rounded-md shadow-md focus:outline-none overflow-y-auto py-1 max-h-[50vh]"
+		>
+			<DropdownV2Inner items={computeItems} meltItem={item} />
+		</div>
+	</div>
+{/if}

package/package/components/DropdownV2.svelte.d.ts

@@ -1,37 +1,19 @@
 import { SvelteComponent } from "svelte";
+import type { Placement } from '@floating-ui/core';
+import type { Item } from '../utils';
 declare const __propDef: {
     props: {
-        items?: {
-            displayName: string;
-            action?: ((e: CustomEvent<any>) => void) | undefined;
-            icon?: any;
-            href?: string | undefined;
-            disabled?: boolean | undefined;
-            type?: "delete" | "action" | undefined;
-            hide?: boolean | undefined;
-        }[] | (() => {
-            displayName: string;
-            action?: ((e: CustomEvent<any>) => void) | undefined;
-            icon?: any;
-            href?: string | undefined;
-            disabled?: boolean | undefined;
-            type?: "delete" | "action" | undefined;
-            hide?: boolean | undefined;
-        }[]) | (() => Promise<{
-            displayName: string;
-            action?: ((e: CustomEvent<any>) => void) | undefined;
-            icon?: any;
-            href?: string | undefined;
-            disabled?: boolean | undefined;
-            type?: "delete" | "action" | undefined;
-            hide?: boolean | undefined;
-        }[]>) | undefined;
-        justifyEnd?: boolean | undefined;
+        [x: string]: any;
+        items?: Item[] | (() => Item[]) | (() => Promise<Item[]>) | undefined;
         disabled?: boolean | undefined;
+        placement?: Placement | undefined;
+        usePointerDownOutside?: boolean | undefined;
+        closeOnOtherDropdownOpen?: boolean | undefined;
+        close?: (() => void) | undefined;
     };
     events: {
-        close: CustomEvent<any>;
         open: CustomEvent<any>;
+        close: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
@@ -43,5 +25,6 @@ export type DropdownV2Props = typeof __propDef.props;
 export type DropdownV2Events = typeof __propDef.events;
 export type DropdownV2Slots = typeof __propDef.slots;
 export default class DropdownV2 extends SvelteComponent<DropdownV2Props, DropdownV2Events, DropdownV2Slots> {
+    get close(): () => void;
 }
 export {};

package/package/components/DropdownV2Inner.svelte

@@ -1,7 +1,8 @@
-<script>import { MenuItem } from '@rgossiaux/svelte-headlessui';
+<script>import { MenuItem } from './meltComponents';
 import { Loader2 } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 export let items = [];
+export let meltItem;
 let computedItems = undefined;
 async function computeItems() {
     if (typeof items === 'function') {
@@ -22,16 +23,18 @@ computeItems();
 				href={item?.href}
 				disabled={item?.disabled}
 				class={twMerge(
-					'px-4 py-2 text-primary hover:bg-surface-hover hover:text-primary cursor-pointer text-xs transition-all',
+					'px-4 py-2 text-primary font-semibold hover:bg-surface-hover cursor-pointer text-xs transition-all',
+					'data-[highlighted]:bg-surface-hover',
 					'flex flex-row gap-2 items-center',
 					item?.disabled && 'text-gray-400 cursor-not-allowed',
 					item?.type === 'delete' &&
 						!item?.disabled &&
-						'text-red-500 hover:bg-red-100 hover:text-red-500'
+						'text-red-500 hover:bg-red-100 hover:text-red-500 data-[highlighted]:text-red-500 data-[highlighted]:bg-red-100'
 				)}
+				item={meltItem}
 			>
 				{#if item.icon}
-					<svelte:component this={item.icon} size={14} />
+					<svelte:component this={item.icon} size={14} color={item.iconColor} />
 				{/if}
 				{item.displayName}
 			</MenuItem>