windmill-components 1.22.0 → 1.22.42

package/components/Editor.svelte

@@ -1,6 +1,6 @@
 <script>import { browser, dev } from '$app/env';
 import { page } from '$app/stores';
-import { buildExtraLib } from '../utils';
+import { buildExtraLib, sendUserToast } from '../utils';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
@@ -19,6 +19,7 @@ export let websocketAlive = { pyright: false, black: false, deno: false };
 export let extraLib = lang == 'typescript' && !deno ? buildExtraLib() : '';
 export let extraLibPath = 'file:///node_modules/@types/windmill/index.d.ts';
 let websockets = [];
+let websocketInterval;
 let uri = '';
 let disposeMethod;
 const dispatch = createEventDispatcher();
@@ -129,8 +130,7 @@ export async function reloadWebsocket() {
                     const writer = new WebSocketMessageWriter(socket);
                     const languageClient = createLanguageClient({ reader, writer }, name, options);
                     languageClient.start();
-                    socket.onClose((_code, _reason) => {
-                        websocketAlive[name] = false;
+                    reader.onClose(() => {
                         try {
                             languageClient.stop();
                         }
@@ -138,6 +138,9 @@ export async function reloadWebsocket() {
                             console.error(err);
                         }
                     });
+                    socket.onClose((_code, _reason) => {
+                        websocketAlive[name] = false;
+                    });
                     if (name == 'deno') {
                         vscode.commands.getCommands().then((v) => {
                             if (!v.includes('deno.cache')) {
@@ -212,6 +215,15 @@ export async function reloadWebsocket() {
                 }
             });
         }
+        websocketInterval && clearInterval(websocketInterval);
+        websocketInterval = setInterval(() => {
+            if (document.visibilityState == 'visible') {
+                if (!websocketAlive.black && !websocketAlive.deno && !websocketAlive.pyright) {
+                    sendUserToast('Smart assistant got disconnected. Reconnecting to windmill language server for smart assistance');
+                    reloadWebsocket();
+                }
+            }
+        }, 5000);
     }
 }
 function closeWebsockets() {
@@ -224,6 +236,7 @@ function closeWebsockets() {
         }
     }
     websockets = [];
+    websocketInterval && clearInterval(websocketInterval);
 }
 async function loadMonaco() {
     const monaco = await import('monaco-editor');

package/components/EditorBar.svelte

@@ -0,0 +1,204 @@
+<script>import { ResourceService, ScriptService, VariableService } from '../gen';
+import { getScriptByPath, loadHubScripts, sendUserToast } from '../utils';
+import Icon from 'svelte-awesome';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { workspaceStore, hubScripts } from '../stores';
+import ItemPicker from './ItemPicker.svelte';
+import VariableEditor from './VariableEditor.svelte';
+import ResourceEditor from './ResourceEditor.svelte';
+import { Highlight } from 'svelte-highlight';
+import { python, typescript } from 'svelte-highlight/languages';
+import github from 'svelte-highlight/styles/github';
+import Modal from './Modal.svelte';
+export let lang;
+export let editor;
+export let websocketAlive;
+let variablePicker;
+let resourcePicker;
+let scriptPicker;
+let variableEditor;
+let resourceEditor;
+let codeViewer;
+let codeLang = 'deno';
+let codeContent = '';
+async function loadVariables() {
+    let r = [];
+    const variables = (await VariableService.listVariable({ workspace: $workspaceStore ?? 'NO_W' })).map((x) => {
+        return { name: x.path, ...x };
+    });
+    const rvariables = await VariableService.listContextualVariables({
+        workspace: $workspaceStore ?? 'NO_W'
+    });
+    r = r.concat(variables).concat(rvariables);
+    return r;
+}
+async function loadScripts() {
+    const workspaceScripts = await ScriptService.listScripts({
+        workspace: $workspaceStore ?? 'NO_W'
+    });
+    await loadHubScripts();
+    const hubScripts_ = $hubScripts ?? [];
+    return workspaceScripts.concat(hubScripts_);
+}
+</script>
+
+<svelte:head>
+	{@html github}
+</svelte:head>
+
+<ItemPicker
+	bind:this={scriptPicker}
+	pickCallback={async (path, _) => {
+		const { language, content } = await getScriptByPath(path ?? '')
+		codeContent = content
+		codeLang = language
+		codeViewer.openModal()
+	}}
+	closeOnClick={false}
+	itemName="script"
+	extraField="summary"
+	loadItems={loadScripts}
+/>
+
+<Modal bind:this={codeViewer}>
+	<div slot="title">Code</div>
+	<div slot="content">
+		{#if codeLang == 'python3'}
+			<Highlight language={python} code={codeContent} />
+		{:else if codeLang == 'deno'}
+			<Highlight language={typescript} code={codeContent} />
+		{/if}
+	</div></Modal
+>
+
+<ItemPicker
+	bind:this={variablePicker}
+	pickCallback={(path, name) => {
+		if (!path) {
+			if (lang == 'deno') {
+				editor.insertAtCursor(`Deno.env.get('${name}')`)
+			} else {
+				if (!editor.getCode().includes('import os')) {
+					editor.insertAtBeginning('import os\n')
+				}
+				editor.insertAtCursor(`os.environ.get("${name}")`)
+			}
+			sendUserToast(`${name} inserted at cursor`)
+		} else {
+			if (lang == 'deno') {
+				if (!editor.getCode().includes('import * as wmill from')) {
+					editor.insertAtBeginning(
+						`import * as wmill from 'https://deno.land/x/windmill@v${__pkg__.version}/index.ts'\n`
+					)
+				}
+				editor.insertAtCursor(`(await wmill.getVariable('${path}'))`)
+			} else {
+				if (!editor.getCode().includes('import wmill')) {
+					editor.insertAtBeginning('import wmill\n')
+				}
+				editor.insertAtCursor(`wmill.get_variable("${path}")`)
+			}
+			sendUserToast(`${name} inserted at cursor`)
+		}
+	}}
+	itemName="Variable"
+	extraField="name"
+	loadItems={loadVariables}
+>
+	<div slot="submission" class="flex flex-row">
+		<div class="text-xs mr-2 align-middle">
+			The variable you were looking for does not exist yet?
+		</div>
+		<button
+			class="default-button-secondary"
+			type="button"
+			on:click={() => {
+				variableEditor.initNew()
+			}}
+		>
+			Create a new variable
+		</button>
+	</div>
+</ItemPicker>
+
+<ItemPicker
+	bind:this={resourcePicker}
+	pickCallback={(path, _) => {
+		if (lang == 'deno') {
+			if (!editor.getCode().includes('import * as wmill from')) {
+				editor.insertAtBeginning(
+					`import * as wmill from 'https://deno.land/x/windmill@v${__pkg__.version}/index.ts'\n`
+				)
+			}
+			editor.insertAtCursor(`(await wmill.getResource('${path}'))`)
+		} else {
+			if (!editor.getCode().includes('import wmill')) {
+				editor.insertAtBeginning('import wmill\n')
+			}
+			editor.insertAtCursor(`wmill.get_resource("${path}")`)
+		}
+		sendUserToast(`${path} inserted at cursor`)
+	}}
+	itemName="Resource"
+	extraField="resource_type"
+	loadItems={async () =>
+		await ResourceService.listResource({ workspace: $workspaceStore ?? 'NO_W' })}
+>
+	<div slot="submission" class="flex flex-row">
+		<div class="text-xs mr-2 align-middle">
+			The resource you were looking for does not exist yet?
+		</div>
+		<button
+			class="default-button-secondary"
+			type="button"
+			on:click={() => {
+				resourceEditor.initNew()
+			}}
+		>
+			Create a new resource
+		</button>
+	</div>
+</ItemPicker>
+
+<ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openModal} />
+
+<VariableEditor bind:this={variableEditor} on:create={variablePicker.openModal} />
+
+<div class="flex flex-row justify-around w-full">
+	<button
+		class="default-button-secondary font-semibold py-px mr-2 text-xs align-middle max-h-8"
+		on:click|stopPropagation={() => {
+			variablePicker.openModal()
+		}}
+		>Variable picker <Icon data={faSearch} scale={0.7} />
+	</button>
+
+	<button
+		class="default-button-secondary font-semibold py-px text-xs mr-2 align-middle max-h-8"
+		on:click|stopPropagation={() => {
+			resourcePicker.openModal()
+		}}
+		>Resource picker <Icon data={faSearch} scale={0.7} />
+	</button>
+	<button
+		class="default-button-secondary font-semibold py-px text-xs mr-2 align-middle max-h-8"
+		on:click|stopPropagation={() => {
+			scriptPicker.openModal()
+		}}
+		>Script explorer <Icon data={faSearch} scale={0.7} />
+	</button>
+
+	<button
+		class="default-button-secondary py-px max-h-8 text-xs"
+		on:click|stopPropagation={() => {
+			editor.reloadWebsocket()
+		}}
+	>
+		Reload assistants (status: {#if lang == 'deno'}<span
+				class={websocketAlive.deno ? 'text-green-600' : 'text-red-600'}>deno</span
+			>{:else if lang == 'python3'}<span
+				class={websocketAlive.pyright ? 'text-green-600' : 'text-red-600'}>pyright</span
+			>
+			<span class={websocketAlive.black ? 'text-green-600' : 'text-red-600'}> black</span>{/if})
+	</button>
+</div>

package/components/EditorBar.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type Editor from './Editor.svelte';
+declare const __propDef: {
+    props: {
+        lang: 'python3' | 'deno';
+        editor: Editor;
+        websocketAlive: {
+            pyright: boolean;
+            black: boolean;
+            deno: boolean;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type EditorBarProps = typeof __propDef.props;
+export declare type EditorBarEvents = typeof __propDef.events;
+export declare type EditorBarSlots = typeof __propDef.slots;
+export default class EditorBar extends SvelteComponentTyped<EditorBarProps, EditorBarEvents, EditorBarSlots> {
+}
+export {};

package/components/FlowBuilder.svelte

@@ -2,7 +2,7 @@
 import { page } from '$app/stores';
 import { FlowService, ScriptService } from '../gen';
 import { clearPreviewResults, hubScripts, workspaceStore } from '../stores';
-import { sendUserToast, setQueryWithoutLoad } from '../utils';
+import { loadHubScripts, sendUserToast, setQueryWithoutLoad } from '../utils';
 import { faFileExport, faFileImport } from '@fortawesome/free-solid-svg-icons';
 import { onMount } from 'svelte';
 import Icon from 'svelte-awesome';
@@ -14,15 +14,6 @@ export let initialPath = '';
 let pathError = '';
 let mode;
 $: step = Number($page.url.searchParams.get('step')) || 1;
-async function loadSearchData() {
-    const scripts = await ScriptService.listHubScripts();
-    $hubScripts = scripts.map((x) => ({
-        path: `hub/${x.id}/${x.summary.toLowerCase().replaceAll(/\s+/g, '_')}`,
-        summary: `${x.summary} (${x.app})`,
-        approved: x.approved,
-        is_trigger: x.is_trigger
-    }));
-}
 async function saveFlow() {
     const newFlow = flowToMode($flowStore, mode);
     if (initialPath === '') {
@@ -60,7 +51,7 @@ flowStore.subscribe((flow) => {
     setQueryWithoutLoad($page.url, 'state', btoa(JSON.stringify(flowToMode(flow, mode))));
 });
 onMount(() => {
-    loadSearchData();
+    loadHubScripts();
     clearPreviewResults();
 });
 </script>

package/components/FlowViewer.svelte

@@ -7,6 +7,8 @@ import { FlowModuleValue } from '../gen';
 import github from 'svelte-highlight/styles/github';
 import { slide } from 'svelte/transition';
 import Tabs from './Tabs.svelte';
+import SchemaViewer from './SchemaViewer.svelte';
+import FieldHeader from './FieldHeader.svelte';
 export let flow;
 let flowFiltered = {
     summary: flow.summary,
@@ -27,22 +29,48 @@ let open = {};
 	<Tabs
 		tabs={[
 			['ui', 'Flow rendered'],
-			['json', 'JSON']
+			['json', 'JSON'],
+			['schema', 'Input schema of the flow']
 		]}
 		bind:tab
 	/>
 {/if}
 {#if tab == 'ui'}
 	<div class="flow-root w-full p-4">
-		<p class="font-black text-lg mb-6 w-full ml-2">
-			<span>{flow.value.modules.length} Steps </span>
+		<p class="font-black text-lg w-full ml-2">
+			<span>Inputs</span>
+		</p>
+		{#if flow.schema && flow.schema.properties && Object.keys(flow.schema.properties).length > 0 && flow.schema}
+			<ul class="my-4 ml-6">
+				{#each Object.entries(flow.schema.properties) as [inp, v]}
+					<li class="list-disc flex flex-row">
+						<FieldHeader
+							label={inp}
+							required={flow.schema.required?.includes(inp)}
+							type={v?.type}
+							contentEncoding={v?.contentEncoding}
+							format={v?.format}
+							itemsType={v?.itemsType}
+						/><span class="ml-4 mt-2 text-xs"
+							>{v.default != undefined ? 'default: ' + JSON.stringify(v.default) : ''}</span
+						>
+					</li>
+				{/each}
+			</ul>
+		{:else}
+			<div class="text-gray-700 text-xs italic mb-4">
+				This script has no argument or is ill-defined
+			</div>
+		{/if}
+		<p class="font-black text-lg my-6 w-full ml-2">
+			<span>{flow?.value?.modules?.length} Steps </span>
 			<span class="mt-4" />
 		</p>
 		<ul class="-mb-8 w-full">
-			{#each flow.value.modules ?? [] as mod, i}
+			{#each flow?.value?.modules ?? [] as mod, i}
 				<li class="w-full">
 					<div class="relative pb-8 w-full">
-						{#if i < (flow.value.modules ?? []).length - 1}
+						{#if i < (flow?.value?.modules ?? []).length - 1}
 							<span
 								class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
 								aria-hidden="true"
@@ -58,33 +86,33 @@ let open = {};
 							<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 w-full">
 								<div class="w-full">
 									<p class="text-sm text-gray-500">
-										{#if mod.value.type == FlowModuleValue.type.SCRIPT}
+										{#if mod?.value?.type == FlowModuleValue.type.SCRIPT}
 											Script at path <a
 												target="_blank"
-												href={scriptPathToHref(mod.value.path ?? '')}
-												class="font-medium text-gray-900">{mod.value.path}</a
+												href={scriptPathToHref(mod?.value?.path ?? '')}
+												class="font-medium text-gray-900">{mod?.value?.path}</a
 											>
-										{:else if mod.value.type == FlowModuleValue.type.RAWSCRIPT}
+										{:else if mod?.value?.type == FlowModuleValue.type.RAWSCRIPT}
 											<button
 												on:click={() => (open[i] = !open[i])}
 												class="mb-2 underline text-black"
 											>
-												Raw {mod.value.language} script {open[i] ? '(-)' : '(+)'}</button
+												Raw {mod?.value?.language} script {open[i] ? '(-)' : '(+)'}</button
 											>
 
 											{#if open[i]}
 												<div transition:slide class="border border-black p-2 bg-gray-50 w-full">
 													<Highlight
-														language={mod.value.language == 'deno' ? typescript : python}
-														code={mod.value.content}
+														language={mod?.value?.language == 'deno' ? typescript : python}
+														code={mod?.value?.content}
 													/>
 												</div>
 											{/if}
-										{:else if mod.value.type == FlowModuleValue.type.FLOW}
-											Flow at path {mod.value.path}
-										{:else if mod.value.type == FlowModuleValue.type.FORLOOPFLOW}
+										{:else if mod?.value?.type == FlowModuleValue.type.FLOW}
+											Flow at path {mod?.value?.path}
+										{:else if mod?.value?.type == FlowModuleValue.type.FORLOOPFLOW}
 											For loop over step {i}'s result':
-											<svelte:self flow={mod.value} embedded={true} />
+											<svelte:self flow={mod?.value} embedded={true} />
 										{/if}
 									</p>
 								</div>
@@ -95,6 +123,14 @@ let open = {};
 			{/each}
 		</ul>
 	</div>
-{:else}
+{:else if tab == 'json'}
+	<button
+		on:click={async () => {
+			await navigator.clipboard.writeText(JSON.stringify(flowFiltered, null, 4))
+		}}
+		class="default-primary-button-v2 float-right my-2 ml-4">copy content</button
+	>
 	<Highlight language={json} code={JSON.stringify(flowFiltered, null, 4)} />
+{:else if tab == 'schema'}
+	<SchemaViewer schema={flow.schema} />
 {/if}

package/components/FlowViewer.svelte.d.ts

@@ -9,7 +9,7 @@ declare const __propDef: {
             schema?: any;
         };
         embedded?: boolean | undefined;
-        tab?: "json" | "ui" | undefined;
+        tab?: "json" | "schema" | "ui" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/ModuleStep.svelte

@@ -4,6 +4,7 @@ import { buildExtraLib, objectToTsType, schemaToObject, schemaToTsType } from '.
 import { faRobot } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import Editor from './Editor.svelte';
+import EditorBar from './EditorBar.svelte';
 import FlowPreview from './FlowPreview.svelte';
 import FlowInputs from './flows/FlowInputs.svelte';
 import FlowModuleHeader from './flows/FlowModuleHeader.svelte';
@@ -15,6 +16,8 @@ export let mode;
 export let i;
 export let mod;
 export let args = {};
+let editor;
+let websocketAlive = { pyright: false, black: false, deno: false };
 $: schema = $schemasStore[i];
 $: shouldPick = mod.value.path === '' && mod.value.language === undefined;
 $: previousSchema = i === 0 ? schemaToObject($flowStore?.schema) : $previewResults[i];
@@ -66,7 +69,12 @@ $: extraLib = buildExtraLib(i === 0 ? schemaToTsType($flowStore?.schema) : objec
 					/>
 				{/if}
 				{#if mod.value.type === FlowModuleValue.type.RAWSCRIPT}
+					<div class="p-1 overflow-hidden">
+						<EditorBar {editor} {websocketAlive} lang={mod.value.language ?? 'deno'} />
+					</div>
 					<Editor
+						bind:websocketAlive
+						bind:this={editor}
 						class="h-80 border p-2 rounded"
 						bind:code={mod.value.content}
 						deno={mod.value.language === FlowModuleValue.language.DENO}

package/components/Path.svelte

@@ -4,7 +4,6 @@ import { GroupService } from '../gen';
 import Tooltip from './Tooltip.svelte';
 import { userStore, workspaceStore } from '../stores';
 import { sleep } from '../utils';
-import { workspace } from 'vscode';
 export let meta = {
     ownerKind: 'user',
     owner: '',

package/components/RunForm.svelte

@@ -52,8 +52,8 @@ let scheduledForStr;
 	{#if runnable?.schema}
 		{#if detailed}
 			<h2>
-				Arguments<Tooltip class="px-2 mb-6"
-					>Optioal fields, if left blank, will use the placeholder value as default.</Tooltip
+				Arguments <Tooltip
+					>The optional fields, if left blank, will use the placeholder value as default.</Tooltip
 				>
 			</h2>
 		{/if}

package/components/SchemaViewer.svelte

@@ -67,7 +67,7 @@ let viewJsonSchema = false;
 				</TableCustom>
 			</div>
 		{:else}
-			<div class="text-gray-700 text-xs italic">This script has no argument</div>
+			<div class="text-gray-700 text-xs italic">This script has no arguments</div>
 		{/if}
 	</div>
 	<div class={viewJsonSchema ? '' : 'hidden'}>

package/components/ScriptEditor.svelte

@@ -1,8 +1,8 @@
-<script>import { JobService, Job, CompletedJob, VariableService, ResourceService, ScriptService } from '../gen';
-import { sendUserToast, emptySchema, displayDate } from '../utils';
+<script>import { JobService, Job, CompletedJob, VariableService, ScriptService } from '../gen';
+import { emptySchema, displayDate } from '../utils';
 import { fade } from 'svelte/transition';
 import Icon from 'svelte-awesome';
-import { faCheck, faChevronDown, faChevronUp, faExclamationTriangle, faMagic, faSearch, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { faCheck, faChevronDown, faChevronUp, faExclamationTriangle, faMagic, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons';
 import Editor from './Editor.svelte';
 import Tooltip from './Tooltip.svelte';
 import { onDestroy, onMount } from 'svelte';
@@ -10,17 +10,14 @@ import { userStore, workspaceStore } from '../stores';
 import TableCustom from './TableCustom.svelte';
 import { check } from 'svelte-awesome/icons';
 import Modal from './Modal.svelte';
-import { Highlight } from 'svelte-highlight';
-import { json, python, typescript } from 'svelte-highlight/languages';
-import github from 'svelte-highlight/styles/github';
-import ItemPicker from './ItemPicker.svelte';
-import VariableEditor from './VariableEditor.svelte';
-import ResourceEditor from './ResourceEditor.svelte';
 import { inferArgs } from '../infer';
 // @ts-ignore
 import { VSplitPane } from 'svelte-split-pane';
 import SchemaForm from './SchemaForm.svelte';
 import DisplayResult from './DisplayResult.svelte';
+import EditorBar from './EditorBar.svelte';
+import { Highlight } from 'svelte-highlight';
+import { json, python, typescript } from 'svelte-highlight/languages';
 // Exported
 export let schema = emptySchema();
 export let code;
@@ -30,6 +27,9 @@ export let lang;
 export let viewPreview = true;
 export let previewTab = 'logs';
 let websocketAlive = { pyright: false, black: false, deno: false };
+let modalViewerTitle = '';
+let modalViewerContent;
+let modalViewerMode = 'logs';
 // Internal state
 let editor;
 // Preview args input
@@ -41,14 +41,6 @@ let previewIntervalId;
 let previewJob;
 let pastPreviews = [];
 let modalViewer;
-let modalViewerTitle = '';
-let modalViewerContent;
-let modalViewerMode = 'logs';
-let variablePicker;
-let resourcePicker;
-let scriptPicker;
-let variableEditor;
-let resourceEditor;
 let syncIteration = 0;
 let ITERATIONS_BEFORE_SLOW_REFRESH = 100;
 let lastSave;
@@ -158,20 +150,6 @@ function syncer(id) {
         loadPreviewJob(id);
     }
 }
-async function loadVariables() {
-    let r = [];
-    const variables = (await VariableService.listVariable({ workspace: $workspaceStore ?? 'NO_W' })).map((x) => {
-        return { name: x.path, ...x };
-    });
-    const rvariables = await VariableService.listContextualVariables({
-        workspace: $workspaceStore ?? 'NO_W'
-    });
-    r = r.concat(variables).concat(rvariables);
-    return r;
-}
-async function loadScripts() {
-    return await ScriptService.listScripts({ workspace: $workspaceStore ?? 'NO_W' });
-}
 let syncCode;
 onMount(() => {
     syncCode = setInterval(() => {
@@ -194,29 +172,6 @@ onDestroy(() => {
 });
 </script>
 
-<svelte:head>
-	{@html github}
-</svelte:head>
-
-<ItemPicker
-	bind:this={scriptPicker}
-	pickCallback={async (path, _) => {
-		modalViewerMode = 'code'
-		modalViewerTitle = 'Script ' + path
-		modalViewerContent = (
-			await ScriptService.getScriptByPath({
-				workspace: $workspaceStore ?? '',
-				path
-			})
-		).content
-		modalViewer.openModal()
-	}}
-	closeOnClick={false}
-	itemName="script"
-	extraField="summary"
-	loadItems={loadScripts}
-/>
-
 <Modal bind:this={modalViewer}>
 	<div slot="title">{modalViewerTitle}</div>
 	<div slot="content">
@@ -236,101 +191,7 @@ onDestroy(() => {
 	</div></Modal
 >
 
-<ItemPicker
-	bind:this={variablePicker}
-	pickCallback={(path, name) => {
-		if (!path) {
-			if (lang == 'deno') {
-				getEditor().insertAtCursor(`Deno.env.get('${name}')`)
-			} else {
-				if (!getEditor().getCode().includes('import os')) {
-					getEditor().insertAtBeginning('import os\n')
-				}
-				getEditor().insertAtCursor(`os.environ.get("${name}")`)
-			}
-			sendUserToast(`${name} inserted at cursor`)
-		} else {
-			if (lang == 'deno') {
-				if (!getEditor().getCode().includes('import * as wmill from')) {
-					getEditor().insertAtBeginning(
-						`import * as wmill from 'https://deno.land/x/windmill@v${__pkg__.version}/index.ts'\n`
-					)
-				}
-				getEditor().insertAtCursor(`(await wmill.getVariable('${path}'))`)
-			} else {
-				if (!getEditor().getCode().includes('import wmill')) {
-					getEditor().insertAtBeginning('import wmill\n')
-				}
-				getEditor().insertAtCursor(`wmill.get_variable("${path}")`)
-			}
-			sendUserToast(`${name} inserted at cursor`)
-		}
-	}}
-	itemName="Variable"
-	extraField="name"
-	loadItems={loadVariables}
->
-	<div slot="submission" class="flex flex-row">
-		<div class="text-xs mr-2 align-middle">
-			The variable you were looking for does not exist yet?
-		</div>
-		<button
-			class="default-button-secondary"
-			type="button"
-			on:click={() => {
-				variableEditor.initNew()
-			}}
-		>
-			Create a new variable
-		</button>
-	</div>
-</ItemPicker>
-
-<ItemPicker
-	bind:this={resourcePicker}
-	pickCallback={(path, _) => {
-		if (lang == 'deno') {
-			if (!getEditor().getCode().includes('import * as wmill from')) {
-				getEditor().insertAtBeginning(
-					`import * as wmill from 'https://deno.land/x/windmill@v${__pkg__.version}/index.ts'\n`
-				)
-			}
-			getEditor().insertAtCursor(`(await wmill.getResource('${path}'))`)
-		} else {
-			if (!getEditor().getCode().includes('import wmill')) {
-				getEditor().insertAtBeginning('import wmill\n')
-			}
-			getEditor().insertAtCursor(`wmill.get_resource("${path}")`)
-		}
-		sendUserToast(`${path} inserted at cursor`)
-	}}
-	itemName="Resource"
-	extraField="resource_type"
-	loadItems={async () =>
-		await ResourceService.listResource({ workspace: $workspaceStore ?? 'NO_W' })}
->
-	<div slot="submission" class="flex flex-row">
-		<div class="text-xs mr-2 align-middle">
-			The resource you were looking for does not exist yet?
-		</div>
-		<button
-			class="default-button-secondary"
-			type="button"
-			on:click={() => {
-				resourceEditor.initNew()
-			}}
-		>
-			Create a new resource
-		</button>
-	</div>
-</ItemPicker>
-
-<ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openModal} />
-
-<VariableEditor bind:this={variableEditor} on:create={variablePicker.openModal} />
-
 <VSplitPane
-	class="h-full"
 	topPanelSize={viewPreview ? '75%' : '90%'}
 	downPanelSize={viewPreview ? '25%' : '10%'}
 	updateCallback={() => {
@@ -342,46 +203,7 @@ onDestroy(() => {
 	<top slot="top">
 		<div class="flex flex-col h-full">
 			<div class="header">
-				<div class="flex flex-row justify-around w-full">
-					<button
-						class="default-button-secondary font-semibold py-px mr-2 text-xs align-middle max-h-8"
-						on:click|stopPropagation={() => {
-							variablePicker.openModal()
-						}}
-						>Variable picker <Icon data={faSearch} scale={0.7} />
-					</button>
-
-					<button
-						class="default-button-secondary font-semibold py-px text-xs mr-2 align-middle max-h-8"
-						on:click|stopPropagation={() => {
-							resourcePicker.openModal()
-						}}
-						>Resource picker <Icon data={faSearch} scale={0.7} />
-					</button>
-					<button
-						class="default-button-secondary font-semibold py-px text-xs mr-2 align-middle max-h-8"
-						on:click|stopPropagation={() => {
-							scriptPicker.openModal()
-						}}
-						>Script explorer <Icon data={faSearch} scale={0.7} />
-					</button>
-
-					<button
-						class="default-button-secondary py-px max-h-8 text-xs"
-						on:click|stopPropagation={() => {
-							editor.reloadWebsocket()
-						}}
-					>
-						Reload assistants (status: {#if lang == 'deno'}<span
-								class={websocketAlive.deno ? 'text-green-600' : 'text-red-600'}>deno</span
-							>{:else if lang == 'python3'}<span
-								class={websocketAlive.pyright ? 'text-green-600' : 'text-red-600'}>pyright</span
-							>
-							<span class={websocketAlive.black ? 'text-green-600' : 'text-red-600'}>
-								black</span
-							>{/if})
-					</button>
-				</div>
+				<EditorBar {editor} {lang} {websocketAlive} />
 			</div>
 			<div class="flex-1 overflow-hidden">
 				<Editor
@@ -395,6 +217,7 @@ onDestroy(() => {
 					formatAction={() => {
 						code = getEditor().getCode()
 						localStorage.setItem(path ?? 'last_save', code)
+						lastSave = code
 					}}
 					class="h-full"
 					deno={lang == 'deno'}

package/components/ScriptPicker.svelte

@@ -9,6 +9,7 @@ import Modal from './Modal.svelte';
 import { Highlight } from 'svelte-highlight';
 import { python, typescript } from 'svelte-highlight/languages';
 import github from 'svelte-highlight/styles/github';
+import { getScript, getScriptByPath } from '../utils';
 export let scriptPath = undefined;
 export let allowFlow = false;
 export let allowHub = false;
@@ -23,20 +24,6 @@ let options = [['Script', 'script']];
 allowHub && options.unshift(['Hub', 'hub']);
 allowFlow && options.push(['Flow', 'flow']);
 const dispatch = createEventDispatcher();
-async function getScript() {
-    if (itemKind == 'hub') {
-        code = await ScriptService.getHubScriptContentByPath({ path: scriptPath });
-        lang = Script.language.DENO;
-    }
-    else {
-        const script = await ScriptService.getScriptByPath({
-            workspace: $workspaceStore,
-            path: scriptPath
-        });
-        code = script.content;
-        lang = script.language;
-    }
-}
 async function loadItems() {
     if (itemKind == 'flow') {
         items = await FlowService.listFlows({ workspace: $workspaceStore });
@@ -86,7 +73,9 @@ $: {
 		<button
 			class="text-xs text-blue-500"
 			on:click={async () => {
-				await getScript()
+				const { language, content } = await getScriptByPath(scriptPath ?? '')
+				code = content
+				lang = language
 				modalViewer.openModal()
 			}}>show code</button
 		>

package/components/flows/FlowModuleHeader.svelte

@@ -1,4 +1,5 @@
 <script>import { FlowModuleValue, Script } from '../../gen';
+import { getScriptByPath } from '../../utils';
 import { faCode, faCodeBranch, faSave, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import { Highlight } from 'svelte-highlight';
@@ -6,14 +7,14 @@ import { python, typescript } from 'svelte-highlight/languages';
 import github from 'svelte-highlight/styles/github';
 import Modal from '../Modal.svelte';
 import { createScriptFromInlineScript, fork, removeModule } from './flowStore';
-import { getScriptByPath, scrollIntoView } from './utils';
+import { scrollIntoView } from './utils';
 export let open;
 export let i;
 export let shouldPick = false;
 export let mod;
 let modalViewer;
 let modalViewerContent = '';
-let modalViewerLanguage = Script.language.DENO;
+let modalViewerLanguage = 'deno';
 async function viewCode() {
     const { content, language } = await getScriptByPath(mod.value.path);
     modalViewerContent = content;

package/components/flows/utils.d.ts

@@ -6,10 +6,6 @@ export declare function flattenForloopFlows(flow: Flow): Flow;
 export declare function getTypeAsString(arg: any): string;
 export declare function formatValue(arg: any): any;
 export declare function getFirstStepSchema(flow: Flow): Promise<Schema>;
-export declare function getScriptByPath(path: string): Promise<{
-    content: string;
-    language: FlowModuleValue.language;
-}>;
 export declare function createInlineScriptModuleFromPath(path: string): Promise<FlowModuleValue>;
 export declare function scrollIntoView(el: any): void;
 export declare function loadSchemaFromModule(module: FlowModule): Promise<{

package/components/flows/utils.js

@@ -1,9 +1,7 @@
 import { FlowModuleValue, InputTransform, ScriptService } from '../../gen';
 import { inferArgs } from '../../infer';
 import { loadSchema } from '../../scripts';
-import { workspaceStore } from '../../stores';
-import { emptySchema } from '../../utils';
-import { get } from 'svelte/store';
+import { emptySchema, getScriptByPath } from '../../utils';
 export function flowToMode(flow, mode) {
     if (mode == 'pull') {
         const newFlow = JSON.parse(JSON.stringify(flow));
@@ -66,25 +64,6 @@ export async function getFirstStepSchema(flow) {
     }
     return emptySchema();
 }
-export async function getScriptByPath(path) {
-    if (path.startsWith('hub/')) {
-        const content = await ScriptService.getHubScriptContentByPath({ path });
-        return {
-            content,
-            language: FlowModuleValue.language.DENO
-        };
-    }
-    else {
-        const script = await ScriptService.getScriptByPath({
-            workspace: get(workspaceStore),
-            path: path ?? ''
-        });
-        return {
-            content: script.content,
-            language: script.language
-        };
-    }
-}
 export async function createInlineScriptModuleFromPath(path) {
     const { content, language } = await getScriptByPath(path);
     return {
@@ -121,7 +100,7 @@ export async function loadSchemaFromModule(module) {
             input_transform = keys.reduce((accu, key) => {
                 accu[key] = {
                     type: 'static',
-                    value: ''
+                    value: undefined
                 };
                 return accu;
             }, {});

package/gen/core/OpenAPI.js

@@ -1,6 +1,6 @@
 export const OpenAPI = {
     BASE: '/api',
-    VERSION: '1.21.0',
+    VERSION: '1.22.0',
     WITH_CREDENTIALS: false,
     CREDENTIALS: 'include',
     TOKEN: undefined,

package/gen/index.d.ts

@@ -30,6 +30,7 @@ export type { MainArgSignature } from './models/MainArgSignature';
 export type { NewSchedule } from './models/NewSchedule';
 export type { NewToken } from './models/NewToken';
 export type { NewUser } from './models/NewUser';
+export type { OpenFlow } from './models/OpenFlow';
 export { Preview } from './models/Preview';
 export { QueuedJob } from './models/QueuedJob';
 export type { Resource } from './models/Resource';

package/gen/models/OpenFlow.d.ts

@@ -0,0 +1,7 @@
+import type { FlowValue } from './FlowValue';
+export declare type OpenFlow = {
+    summary: string;
+    description?: string;
+    value: FlowValue;
+    schema?: any;
+};

package/gen/models/OpenFlow.js

@@ -0,0 +1,4 @@
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export {};

package/gen/services/FlowService.d.ts

@@ -2,6 +2,19 @@ import type { Flow } from '../models/Flow';
 import type { FlowValue } from '../models/FlowValue';
 import type { CancelablePromise } from '../core/CancelablePromise';
 export declare class FlowService {
+    /**
+     * list all available hub flows
+     * @returns any hub flows list
+     * @throws ApiError
+     */
+    static listHubFlows(): CancelablePromise<Array<{
+        id: number;
+        flow_id: number;
+        summary: string;
+        apps: Array<string>;
+        approved: boolean;
+        votes: number;
+    }>>;
     /**
      * list all available flows
      * @returns Flow All available flow

package/gen/services/FlowService.js

@@ -1,6 +1,17 @@
 import { OpenAPI } from '../core/OpenAPI';
 import { request as __request } from '../core/request';
 export class FlowService {
+    /**
+     * list all available hub flows
+     * @returns any hub flows list
+     * @throws ApiError
+     */
+    static listHubFlows() {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/flows/hub/list',
+        });
+    }
     /**
      * list all available flows
      * @returns Flow All available flow

package/gen/services/ScriptService.d.ts

@@ -9,11 +9,22 @@ export declare class ScriptService {
      */
     static listHubScripts(): CancelablePromise<Array<{
         id: number;
+        ask_id: number;
         summary: string;
         app: string;
         approved: boolean;
         is_trigger: boolean;
+        votes: number;
+        views: number;
     }>>;
+    /**
+     * get hub flow by id
+     * @returns string flow
+     * @throws ApiError
+     */
+    static getHubFlowById({ id, }: {
+        id: number;
+    }): CancelablePromise<string>;
     /**
      * get hub script content by path
      * @returns string script details

package/gen/services/ScriptService.js

@@ -12,6 +12,20 @@ export class ScriptService {
             url: '/scripts/hub/list',
         });
     }
+    /**
+     * get hub flow by id
+     * @returns string flow
+     * @throws ApiError
+     */
+    static getHubFlowById({ id, }) {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/flows/hub/get/{id}',
+            path: {
+                'id': id,
+            },
+        });
+    }
     /**
      * get hub script content by path
      * @returns string script details

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "windmill-components",
-  "version": "1.22.0",
+  "version": "1.22.42",
   "devDependencies": {
     "@playwright/test": "^1.23.4",
     "@sveltejs/adapter-static": "^1.0.0-next.37",
@@ -17,6 +17,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "openapi-typescript-codegen": "^0.23.0",
+    "path-browserify": "^1.0.1",
     "postcss": "^8.4.5",
     "postcss-load-config": "^4.0.1",
     "prettier": "^2.7.1",
@@ -64,6 +65,7 @@
     "./components/DisplayResult.svelte": "./components/DisplayResult.svelte",
     "./components/Dropdown.svelte": "./components/Dropdown.svelte",
     "./components/Editor.svelte": "./components/Editor.svelte",
+    "./components/EditorBar.svelte": "./components/EditorBar.svelte",
     "./components/FieldHeader.svelte": "./components/FieldHeader.svelte",
     "./components/FlowBuilder.svelte": "./components/FlowBuilder.svelte",
     "./components/FlowEditor.svelte": "./components/FlowEditor.svelte",
@@ -164,6 +166,7 @@
     "./gen/models/NewSchedule": "./gen/models/NewSchedule.js",
     "./gen/models/NewToken": "./gen/models/NewToken.js",
     "./gen/models/NewUser": "./gen/models/NewUser.js",
+    "./gen/models/OpenFlow": "./gen/models/OpenFlow.js",
     "./gen/models/Preview": "./gen/models/Preview.js",
     "./gen/models/QueuedJob": "./gen/models/QueuedJob.js",
     "./gen/models/Resource": "./gen/models/Resource.js",

package/stores.d.ts

@@ -18,6 +18,7 @@ export declare const hubScripts: import("svelte/store").Writable<{
     summary: string;
     approved: boolean;
     is_trigger: boolean;
+    app: string;
 }[] | undefined>;
 export declare function clearStores(): void;
 export declare const previewResults: import("svelte/store").Writable<Record<number, Object>>;

package/utils.d.ts

@@ -1,6 +1,6 @@
-import type { User } from './gen';
+import { type User } from './gen';
 import type { Schema } from './common';
-import type { UserExt } from './stores';
+import { type UserExt } from './stores';
 export declare function isToday(someDate: Date): boolean;
 export declare function daysAgo(someDate: Date): number;
 export declare function secondsAgo(date: Date): number;
@@ -65,3 +65,16 @@ export declare function objectToTsType(object: Object): string;
 export declare type InputCat = "string" | "number" | "boolean" | "list" | "resource-object" | "enum" | "date" | "base64" | "resource-string" | "object";
 export declare function setInputCat(type: string | undefined, format: string | undefined, itemsType: string | undefined, enum_: any, contentEncoding: string | undefined): InputCat;
 export declare function scriptPathToHref(path: string): string;
+export declare function getScriptByPath(path: string): Promise<{
+    content: string;
+    language: 'deno' | 'python3';
+}>;
+export declare function loadHubScripts(): Promise<void>;
+export declare function loadHubFlows(): Promise<{
+    id: number;
+    flow_id: number;
+    summary: string;
+    apps: string[];
+    approved: boolean;
+    votes: number;
+}[]>;

package/utils.js

@@ -1,6 +1,9 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import { goto } from '$app/navigation';
+import { FlowService, Script, ScriptService } from './gen';
 import { toast } from '@zerodevx/svelte-toast';
+import { get } from 'svelte/store';
+import { hubScripts, workspaceStore } from './stores';
 export function isToday(someDate) {
     const today = new Date();
     return (someDate.getDate() == today.getDate() &&
@@ -351,9 +354,47 @@ export function setInputCat(type, format, itemsType, enum_, contentEncoding) {
 }
 export function scriptPathToHref(path) {
     if (path.startsWith('hub/')) {
-        return 'https://hub.windmill.dev/scripts/get/' + path.substring(4);
+        return 'https://hub.windmill.dev/from_version/' + path.substring(4);
     }
     else {
         return `/scripts/get/${path}`;
     }
 }
+export async function getScriptByPath(path) {
+    if (path.startsWith('hub/')) {
+        const content = await ScriptService.getHubScriptContentByPath({ path });
+        return {
+            content,
+            language: 'deno'
+        };
+    }
+    else {
+        const script = await ScriptService.getScriptByPath({
+            workspace: get(workspaceStore),
+            path: path ?? ''
+        });
+        return {
+            content: script.content,
+            language: script.language
+        };
+    }
+}
+export async function loadHubScripts() {
+    const scripts = await ScriptService.listHubScripts();
+    const processed = scripts.map((x) => ({
+        path: `hub/${x.id}/${x.summary.toLowerCase().replaceAll(/\s+/g, '_')}`,
+        summary: `${x.summary} (${x.app}) ${x.views} uses`,
+        approved: x.approved,
+        is_trigger: x.is_trigger,
+        app: x.app,
+        views: x.views,
+        votes: x.votes,
+        ask_id: x.ask_id,
+    })).sort((a, b) => b.views - a.views);
+    hubScripts.set(processed);
+}
+export async function loadHubFlows() {
+    const flows = await FlowService.listHubFlows();
+    const processed = flows.sort((a, b) => b.votes - a.votes);
+    return processed;
+}