windmill-components 1.269.3 → 1.291.4

package/package/components/ContentSearch.svelte

@@ -9,8 +9,8 @@ import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import FlowIcon from './home/FlowIcon.svelte';
 import { Alert, Button } from './common';
+import { goto } from '$app/navigation';
 import YAML from 'yaml';
-import { createEventDispatcher } from 'svelte';
 let search = '';
 export async function open(nsearch) {
     isOpen = true;
@@ -71,7 +71,6 @@ $: counts =
             flows: getCounts(filteredFlowItems.length),
             scripts: getCounts(filteredScriptItems.length)
         };
-const dispatch = createEventDispatcher();
 </script>
 
 <SearchItems
@@ -262,7 +261,7 @@ const dispatch = createEventDispatcher();
 													<div class="flex gap-2">
 														<Button
 															on:click|once={() => {
-																dispatch('editScript', item.path)
+																goto(`/scripts/edit/${item.path}?no_draft=true`)
 															}}
 															color="light"
 															size="sm"
@@ -302,7 +301,7 @@ const dispatch = createEventDispatcher();
 													<div class="flex gap-2">
 														<Button
 															on:click|once={() => {
-																dispatch('editFlow', item.path)
+																goto(`/flows/edit/${item.path}?no_draft=true`)
 															}}
 															color="light"
 															size="sm"

package/package/components/ContentSearch.svelte.d.ts

@@ -8,9 +8,6 @@ declare const __propDef: {
         loadFlows?: (() => Promise<void>) | undefined;
     };
     events: {
-        editScript: CustomEvent<any>;
-        editFlow: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/DateTimeInput.svelte

@@ -1,21 +1,85 @@
-<script>export let value = undefined;
+<script>import { createEventDispatcher } from 'svelte';
+import { Button } from './common';
+export let value = undefined;
 export let autofocus = false;
-let dateFromValue = value ? new Date(value) : undefined;
-let date = isValidDate(dateFromValue) ? dateFromValue.toISOString().split('T')[0] : undefined;
-let time = isValidDate(dateFromValue) ? dateFromValue.toISOString().split('T')[1] : '00:00';
-$: {
-    if (date && time) {
+export let useDropdown = false;
+export let minDate = undefined;
+export let maxDate = undefined;
+let date = undefined;
+let time = undefined;
+function parseValue(value = undefined) {
+    let dateFromValue = value ? new Date(value) : undefined;
+    date = isValidDate(dateFromValue) ? dateFromValue.toISOString().split('T')[0] : undefined;
+    time = isValidDate(dateFromValue)
+        ? `${dateFromValue.getHours().toString().padStart(2, '0')}:${dateFromValue
+            .getMinutes()
+            .toString()
+            .padStart(2, '0')}`
+        : '12:00';
+}
+$: parseValue(value);
+let initialDate = date;
+let initialTime = time;
+function parseDateAndTime(date, time) {
+    if (date && time && (initialDate != date || initialTime != time)) {
         let newDate = new Date(`${date}T${time}`);
         value = newDate.toISOString();
+        dispatch('change', value);
     }
 }
+$: parseDateAndTime(date, time);
 function isValidDate(d) {
     return d instanceof Date && !isNaN(d);
 }
+const dispatch = createEventDispatcher();
+function setTimeLater(mins) {
+    let newDate = new Date();
+    newDate.setMinutes(newDate.getMinutes() + mins);
+    value = newDate.toISOString();
+    dispatch('change', value);
+}
+let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 </script>
 
-<div class="flex flex-row gap-1 items-center w-full">
+<div class="flex flex-row gap-1 items-center w-full" id={randomId} on:pointerdown on:focus>
 	<!-- svelte-ignore a11y-autofocus -->
-	<input type="date" bind:value={date} {autofocus} class="!w-3/4" />
-	<input type="time" bind:value={time} class="!w-1/4" />
+	<input type="date" bind:value={date} {autofocus} class="!w-3/4" min={minDate} max={maxDate} />
+	<input type="time" bind:value={time} class="!w-1/4 min-w-[100px]" />
+	<Button
+		variant="border"
+		color="light"
+		size="xs"
+		portalTarget={`#${randomId}`}
+		dropdownItems={useDropdown
+			? [
+					{
+						label: 'In 15 minutes',
+						onClick: () => {
+							setTimeLater(15)
+						}
+					},
+					{
+						label: 'In 1 hour',
+						onClick: () => {
+							setTimeLater(60)
+						}
+					},
+					{
+						label: 'Tomorrow',
+						onClick: () => {
+							setTimeLater(60 * 24)
+						}
+					},
+					{
+						label: 'In 1 week',
+						onClick: () => {
+							setTimeLater(7 * 60 * 24)
+						}
+					}
+			  ]
+			: undefined}
+		on:click={() => {
+			setTimeLater(0)
+		}}>Now</Button
+	>
 </div>

package/package/components/DateTimeInput.svelte.d.ts

@@ -2,9 +2,16 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         value?: string | undefined;
-        autofocus?: boolean | undefined;
+        autofocus?: boolean | null | undefined;
+        useDropdown?: boolean | undefined;
+        minDate?: string | undefined;
+        maxDate?: string | undefined;
     };
     events: {
+        pointerdown: PointerEvent;
+        focus: FocusEvent;
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/DefaultScripts.svelte

@@ -0,0 +1,26 @@
+<script>import { userStore } from '../stores';
+import { SettingsIcon } from 'lucide-svelte';
+import { Button } from './common';
+import Drawer from './common/drawer/Drawer.svelte';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import DefaultScriptsInner from './DefaultScriptsInner.svelte';
+import Portal from 'svelte-portal';
+let drawer;
+</script>
+
+{#if $userStore?.is_admin || $userStore?.is_super_admin}
+	<Portal>
+		<Drawer bind:this={drawer} placement="left">
+			<DrawerContent title="Edit Default Scripts" on:close={drawer.closeDrawer}>
+				<DefaultScriptsInner />
+			</DrawerContent>
+		</Drawer>
+	</Portal>
+	<Button
+		on:click={drawer?.openDrawer}
+		startIcon={{ icon: SettingsIcon }}
+		color="light"
+		size="xs2"
+		variant="contained">defaults</Button
+	>
+{/if}

package/package/components/DefaultScripts.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DefaultScriptsProps = typeof __propDef.props;
+export type DefaultScriptsEvents = typeof __propDef.events;
+export type DefaultScriptsSlots = typeof __propDef.slots;
+export default class DefaultScripts extends SvelteComponent<DefaultScriptsProps, DefaultScriptsEvents, DefaultScriptsSlots> {
+}
+export {};

package/package/components/DefaultScriptsInner.svelte

@@ -0,0 +1,75 @@
+<script>import { WorkspaceService } from '../gen';
+import { defaultScripts, workspaceStore } from '../stores';
+import { flip } from 'svelte/animate';
+import Toggle from './Toggle.svelte';
+import { defaultScriptLanguages } from '../scripts';
+import Alert from './common/alert/Alert.svelte';
+$: langs = computeLangs($defaultScripts);
+function computeLangs(defaultScripts) {
+    const allLangs = Object.keys(defaultScriptLanguages);
+    if (!defaultScripts || defaultScripts.order == undefined)
+        return allLangs;
+    return defaultScripts.order?.concat(allLangs.filter((l) => !defaultScripts.order?.includes(l)));
+}
+async function changePosition(i, up) {
+    let norder = langs;
+    if (up) {
+        ;
+        [norder[i], norder[i - 1]] = [norder[i - 1], norder[i]];
+    }
+    else {
+        ;
+        [norder[i], norder[i + 1]] = [norder[i + 1], norder[i]];
+    }
+    defaultScripts.update((s) => ({ ...s, order: norder }));
+    await WorkspaceService.editDefaultScripts({
+        workspace: $workspaceStore,
+        requestBody: $defaultScripts
+    });
+}
+</script>
+
+<Alert title="Global to workspace" type="info" class="mb-4">
+	This setting is only available to admins and will affect all users in the workspace.
+</Alert>
+<div class="h-full w-full flex-col gap-2 flex">
+	{#each langs as lang, i (lang)}
+		<div
+			animate:flip={{ duration: 300 }}
+			class="w-full p-2 rounded border border-seconadry grid grid-cols-3"
+			><h3>{lang}</h3>
+			<div>
+				{#if i > 0}
+					<button on:click={() => changePosition(i ?? 0, true)} class="text-lg mr-2">
+						&uparrow;</button
+					>
+				{/if}
+				{#if i < langs.length - 1}
+					<button on:click={() => changePosition(i ?? 0, false)} class="text-lg mr-2"
+						>&downarrow;</button
+					>
+				{/if}</div
+			>
+			<!-- <Toggle options={{ right: 'custom default' }} size="xs" /> -->
+			<div class="flex justify-end">
+				<Toggle
+					options={{ right: 'hide' }}
+					size="xs"
+					color="red"
+					checked={$defaultScripts?.hidden?.includes(lang)}
+					on:change={(e) => {
+						let toggled = e.detail
+						if (toggled) {
+							defaultScripts.update((s) => ({ ...(s ?? {}), hidden: [...(s?.hidden ?? []), lang] }))
+						} else {
+							defaultScripts.update((s) => ({
+								...(s ?? {}),
+								hidden: (s?.hidden ?? []).filter((h) => h != lang)
+							}))
+						}
+					}}
+				/>
+			</div>
+		</div>
+	{/each}
+</div>

package/package/components/DefaultScriptsInner.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DefaultScriptsInnerProps = typeof __propDef.props;
+export type DefaultScriptsInnerEvents = typeof __propDef.events;
+export type DefaultScriptsInnerSlots = typeof __propDef.slots;
+export default class DefaultScriptsInner extends SvelteComponent<DefaultScriptsInnerProps, DefaultScriptsInnerEvents, DefaultScriptsInnerSlots> {
+}
+export {};

package/package/components/Dev.svelte

@@ -1,12 +1,12 @@
 <script>import SchemaForm from './SchemaForm.svelte';
 import TestJobLoader from './TestJobLoader.svelte';
-import { Button, Kbd } from './common';
+import { Button, Drawer } from './common';
 import { WindmillIcon } from './icons';
 import LogPanel from './scriptEditor/LogPanel.svelte';
-import { CompletedJob, Job, JobService, OpenAPI, Preview, SettingsService } from '../gen';
+import { CompletedJob, Job, JobService, OpenAPI, Preview, WorkspaceService, RawScript } from '../gen';
 import { inferArgs } from '../infer';
-import { enterpriseLicense, userStore, workspaceStore } from '../stores';
-import { emptySchema, getModifierKey, sendUserToast } from '../utils';
+import { copilotInfo, userStore, workspaceStore } from '../stores';
+import { emptySchema, sendUserToast } from '../utils';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { onDestroy, onMount, setContext } from 'svelte';
 import DarkModeToggle from './sidebar/DarkModeToggle.svelte';
@@ -20,8 +20,11 @@ import { writable } from 'svelte/store';
 import { initHistory } from '../history';
 import { dfs } from './flows/dfs';
 import { loadSchemaFromModule } from './flows/flowInfers';
-import { Play } from 'lucide-svelte';
+import { CornerDownLeft, Play } from 'lucide-svelte';
 import Toggle from './Toggle.svelte';
+import { setLicense } from '../enterpriseUtils';
+import { workspacedOpenai } from './copilot/lib';
+import { pickScript } from './flows/flowStateUtils';
 $: token = $page.url.searchParams.get('wm_token') ?? undefined;
 $: workspace = $page.url.searchParams.get('workspace') ?? undefined;
 $: themeDarkRaw = $page.url.searchParams.get('activeColorTheme');
@@ -30,8 +33,51 @@ $: if (token) {
     OpenAPI.WITH_CREDENTIALS = true;
     OpenAPI.TOKEN = $page.url.searchParams.get('wm_token');
 }
+let flowCopilotContext = {
+    drawerStore: writable(undefined),
+    modulesStore: writable([]),
+    currentStepStore: writable(undefined),
+    genFlow,
+    shouldUpdatePropertyType: writable({}),
+    exprsToSet: writable({}),
+    generatedExprs: writable({}),
+    stepInputsLoading: writable(false)
+};
+const { modulesStore } = flowCopilotContext;
+async function genFlow(idx, flowModules, stepOnly = false) {
+    let module = stepOnly ? $modulesStore[0] : $modulesStore[idx];
+    if (module && module.selectedCompletion) {
+        const [hubScriptModule, hubScriptState] = await pickScript(module.selectedCompletion.path, `${module.selectedCompletion.summary} (${module.selectedCompletion.app})`, module.id, undefined);
+        const flowModule = {
+            id: module.id,
+            value: hubScriptModule.value,
+            summary: hubScriptModule.summary
+        };
+        $flowStateStore[module.id] = hubScriptState;
+        flowModules.splice(idx, 0, flowModule);
+        $flowStore = $flowStore;
+        sendUserToast('Added module', false);
+    }
+}
+setContext('FlowCopilotContext', flowCopilotContext);
+async function setCopilotInfo() {
+    if (workspace) {
+        workspacedOpenai.init(workspace, token);
+        try {
+            copilotInfo.set(await WorkspaceService.getCopilotInfo({ workspace }));
+        }
+        catch (err) {
+            copilotInfo.set({
+                exists_openai_resource_path: false,
+                code_completion_enabled: false
+            });
+            console.error('Could not get copilot info');
+        }
+    }
+}
 $: if (workspace) {
     $workspaceStore = workspace;
+    setCopilotInfo();
 }
 $: if (workspace && token) {
     loadUser();
@@ -95,13 +141,8 @@ const el = (event) => {
         sendUserToast(event.data.error.message, true);
     }
 };
-async function setEnterpriseLicense() {
-    if (!$enterpriseLicense) {
-        $enterpriseLicense = await SettingsService.getLicenseId();
-    }
-}
+setLicense();
 onMount(() => {
-    setEnterpriseLicense();
     window.addEventListener('message', el, false);
     document.addEventListener('keydown', (e) => {
         const obj = {
@@ -234,7 +275,8 @@ const scheduleStore = writable({
     args: {},
     cron: '',
     timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-    enabled: false
+    enabled: false,
+    summary: undefined
 });
 const previewArgsStore = writable({});
 const scriptEditorDrawer = writable(undefined);
@@ -256,9 +298,9 @@ setContext('FlowEditorContext', {
     saveDraft: () => { },
     initialPath: ''
 });
-$: updateCode($flowStore);
+$: updateFlow($flowStore);
 let lastSent = undefined;
-function updateCode(flow) {
+function updateFlow(flow) {
     if (lockChanges) {
         return;
     }
@@ -362,12 +404,12 @@ async function inferModuleArgs(selectedIdStore) {
 							icon: Play,
 							classes: 'animate-none'
 						}}
+						shortCut={{ Icon: CornerDownLeft, hide: testIsLoading }}
 					>
 						{#if testIsLoading}
 							Running
 						{:else}
-							Test&nbsp;<Kbd small isModifier>{getModifierKey()}</Kbd>
-							<Kbd small><span class="text-lg font-bold">⏎</span></Kbd>
+							Test
 						{/if}
 					</Button>
 				{/if}
@@ -422,7 +464,7 @@ async function inferModuleArgs(selectedIdStore) {
 					</Pane>
 					<Pane size={33}>
 						{#key reload}
-							<FlowEditorPanel noEditor />
+							<FlowEditorPanel enableAi noEditor />
 						{/key}
 					</Pane>
 				</Splitpanes>

package/package/components/DisplayResult.svelte

@@ -3,7 +3,7 @@ import { json } from 'svelte-highlight/languages';
 import TableCustom from './TableCustom.svelte';
 import { copyToClipboard, roughSizeOfObject, truncate } from '../utils';
 import { Button, Drawer, DrawerContent } from './common';
-import { ClipboardCopy, Download, Expand, PanelRightOpen, Table2 } from 'lucide-svelte';
+import { ClipboardCopy, Download, Expand, PanelRightOpen, Table2, Braces, Highlighter } from 'lucide-svelte';
 import Portal from 'svelte-portal';
 import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
 import S3FilePicker from './S3FilePicker.svelte';
@@ -13,7 +13,8 @@ import Markdown from 'svelte-exmarkdown';
 import Toggle from './Toggle.svelte';
 import FileDownload from './common/fileDownload/FileDownload.svelte';
 import ParqetTableRenderer from './ParqetTableRenderer.svelte';
-import { twMerge } from 'tailwind-merge';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 export let result;
 export let requireHtmlApproval = false;
 export let filename = undefined;
@@ -152,7 +153,7 @@ function isArrayWithObjects(json) {
         json.every((item) => item && typeof item === 'object' && Object.keys(item).length > 0));
 }
 $: isTableDisplay = isArrayWithObjects(result);
-let richRender = true;
+let richRender = !forceJson;
 function transform(input) {
     const maxLength = Math.max(...Object.values(input).map((arr) => arr.length));
     const result = [];
@@ -194,45 +195,52 @@ let globalForceJson = false;
 {:else}
 	<div class="inline-highlight relative grow min-h-[200px]">
 		{#if result != undefined && length != undefined && largeObject != undefined}
-			{#if resultKind && !['json', 's3object', 's3object-list'].includes(resultKind) && !hideAsJson}
-				<div class="top-1 absolute flex flex-row w-full justify-between items-center"
-					><div class="mb-2 text-tertiary text-sm">
-						as JSON&nbsp;<input class="windmillapp" type="checkbox" bind:checked={forceJson} /></div
-					><slot name="copilot-fix" />
-				</div><div
-					class="py-3"
-				/>{/if}{#if result && typeof result == 'object' && Object.keys(result).length > 0}<div
-					class="top-1 mb-2 w-full min-w-[400px] text-sm absolute"
-					>{#if !disableExpand}
-						<div class="text-tertiary text-xs absolute top-5.5 right-0 inline-flex gap-2 z-10">
-							<button on:click={() => copyToClipboard(toJsonStr(result))}
-								><ClipboardCopy size={16} /></button
-							>
-							<button on:click={jsonViewer.openDrawer}><Expand size={16} /></button>
+			<div class="flex justify-between items-center w-full pb-1">
+				<div class="text-tertiary text-sm flex items-center">
+					{#if (resultKind && !['json', 's3object', 's3object-list', 'table-col', 'table-row'].includes(resultKind) && !hideAsJson) || isTableDisplay}
+						<ToggleButtonGroup
+							class="h-6"
+							selected={isTableDisplay
+								? richRender
+									? 'table'
+									: 'json'
+								: forceJson
+								? 'json'
+								: 'pretty'}
+							on:selected={(ev) => {
+								if (isTableDisplay) {
+									richRender = ev.detail === 'table'
+								}
+								forceJson = ev.detail === 'json'
+							}}
+						>
+							{#if resultKind && !['json', 's3object', 's3object-list', 'table-col', 'table-row'].includes(resultKind) && !hideAsJson}
+								<ToggleButton class="px-1.5" value="pretty" label="Pretty" icon={Highlighter} />
+							{/if}
 							{#if isTableDisplay}
-								<button
-									aria-label="Render as table"
-									on:click={() => {
-										richRender = !richRender
-									}}
-									class={twMerge(
-										'flex flex-row gap-1 items-center',
-										richRender ? 'text-blue-500' : ''
-									)}
-								>
-									<Table2 size={16} class={richRender ? 'text-blue-500' : ''} />
-
-									Table view {richRender ? 'enabled' : 'disabled'}
-								</button>
+								<ToggleButton class="px-1.5" value="table" label="Table" icon={Table2} />
 							{/if}
-						</div>
-					{/if}</div
-				>{/if}{#if !forceJson && resultKind == 'table-col'}
+							<ToggleButton class="px-1.5" value="json" label="JSON" icon={Braces} />
+						</ToggleButtonGroup>
+					{/if}
+				</div>
+				<div class="text-tertiary text-xs flex gap-2 z-10 items-center">
+					<slot name="copilot-fix" />
+					{#if !disableExpand}
+						<button on:click={() => copyToClipboard(toJsonStr(result))}
+							><ClipboardCopy size={16} /></button
+						>
+						<button on:click={jsonViewer.openDrawer}><Expand size={16} /></button>
+					{/if}
+				</div>
+			</div>
+
+			{#if !forceJson && resultKind == 'table-col'}
 				{@const data = 'table-col' in result ? result['table-col'] : result}
 				<AutoDataTable objects={transform(data)} />
 			{:else if !forceJson && resultKind == 'table-row'}
 				{@const data = 'table-row' in result ? result['table-row'] : result}
-				<div class="grid grid-flow-col-dense border border-gray-200">
+				<div class="grid grid-flow-col-dense border border-gray-200 dark:border-gray-600">
 					<TableCustom>
 						<tbody slot="body">
 							{#each Array.isArray(asListOfList(data)) ? asListOfList(data) : [] as row}
@@ -346,8 +354,7 @@ let globalForceJson = false;
 				</div>
 			{:else if !forceJson && resultKind == 's3object'}
 				<div
-					class="absolute top-1 h-full w-full {typeof result?.s3 == 'string' &&
-					result?.s3?.endsWith('.parquet')
+					class="h-full w-full {typeof result?.s3 == 'string' && result?.s3?.endsWith('.parquet')
 						? 'h-min-[600px]'
 						: ''}"
 				>
@@ -387,7 +394,7 @@ let globalForceJson = false;
 					{/if}
 				</div>
 			{:else if !forceJson && resultKind == 's3object-list'}
-				<div class="absolute top-1 h-full w-full">
+				<div class="h-full w-full">
 					<div class="flex flex-col gap-2">
 						<Toggle
 							class="flex"
@@ -448,7 +455,7 @@ let globalForceJson = false;
 						<Alert size="xs" title="Large file detected" type="warning">
 							We recommend using persistent storage for large data files.
 							<a
-								href="https://www.windmill.dev/docs/core_concepts/persistent_storage#large-data-files-s3-r2-minio"
+								href="https://www.windmill.dev/docs/core_concepts/persistent_storage#large-data-files-s3-r2-minio-azure-blob"
 								target="_blank"
 								rel="noreferrer"
 								class="hover:underline"
@@ -471,7 +478,7 @@ let globalForceJson = false;
 				</div>
 			{:else}
 				<Highlight
-					class={forceJson ? '' : 'absolute top-1 h-full w-full'}
+					class={forceJson ? '' : 'h-full w-full'}
 					language={json}
 					code={toJsonStr(result).replace(/\\n/g, '\n')}
 				/>
@@ -486,39 +493,38 @@ let globalForceJson = false;
 			<Drawer bind:this={jsonViewer} size="900px">
 				<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
 					<svelte:fragment slot="actions">
-						<a
-							class="text-sm text-secondary mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-gray-100 rounded-lg"
+						<Button
 							download="{filename ?? 'result'}.json"
 							href={workspaceId && jobId
 								? `/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
 								: `data:text/json;charset=utf-8,${encodeURIComponent(toJsonStr(result))}`}
-							>Download <Download size={14} /></a
+							startIcon={{ icon: Download }}
+							color="light"
+							size="xs"
+						>
+							Download
+						</Button>
+						<Button
+							on:click={() => copyToClipboard(toJsonStr(result))}
+							color="light"
+							size="xs"
+							startIcon={{
+								icon: ClipboardCopy
+							}}
 						>
-						<Button on:click={() => copyToClipboard(toJsonStr(result))} color="light" size="xs">
-							<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
+							Copy to clipboard
 						</Button>
 					</svelte:fragment>
-					{#if largeObject}
-						<div class="text-sm mb-2 text-tertiary">
-							<a
-								class="text-sm text-secondary mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-gray-100 rounded-lg"
-								download="{filename ?? 'result'}.json"
-								href={workspaceId && jobId
-									? `/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
-									: `data:text/json;charset=utf-8,${encodeURIComponent(result)}`}
-								>Download <Download size={14} /></a
-							> JSON is too large to be displayed in full.
-						</div>
-					{:else if typeof result == 'string' && result.length > 0}
-						<pre class="text-sm">{result}</pre>
-						<div class="flex">
-							<Button on:click={() => copyToClipboard(result)} color="light" size="xs">
-								<div class="flex gap-2 items-center">Copy <ClipboardCopy size={12} /> </div>
-							</Button>
-						</div>
-					{:else}
-						<Highlight language={json} code={toJsonStr(result).replace(/\\n/g, '\n')} />
-					{/if}
+					<svelte:self
+						{result}
+						{requireHtmlApproval}
+						{filename}
+						{jobId}
+						{workspaceId}
+						{hideAsJson}
+						{forceJson}
+						disableExpand={true}
+					/>
 				</DrawerContent>
 			</Drawer>
 		</Portal>