windmill-components 1.56.5 → 1.57.2

package/components/flows/content/FlowSettings.svelte

@@ -34,7 +34,7 @@ let topHeight = 0;
 							<input
 								type="text"
 								bind:value={$flowStore.summary}
-								placeholder="A very short summary of the flow displayed when the flow is listed"
+								placeholder="A short summary of the flow displayed when the flow is listed"
 								rows="1"
 								id="flow-summary"
 							/>

package/components/flows/header/FlowImportExportMenu.svelte

@@ -23,7 +23,7 @@ let jsonViewerDrawer;
 </div>
 
 <Drawer bind:this={jsonViewerDrawer} size="800px">
-	<DrawerContent title="See JSON" on:close={() => jsonViewerDrawer.toggleDrawer()}>
+	<DrawerContent title="OpenFlow JSON" on:close={() => jsonViewerDrawer.toggleDrawer()}>
 		{#if $flowStore}
 			<FlowViewer flow={cleanInputs($flowStore)} tab="json" />
 		{/if}

package/components/flows/map/FlowConstantsItem.svelte

@@ -1,15 +1,13 @@
 <script>import { getContext } from 'svelte';
-import Icon from 'svelte-awesome';
-import { faDollarSign } from '@fortawesome/free-solid-svg-icons';
 import { classNames } from '../../../utils';
+import { DollarSign } from 'lucide-svelte';
 const { select, selectedId } = getContext('FlowEditorContext');
 $: settingsClass = classNames('border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center', $selectedId == 'constants' ? 'outline outline-offset-1 outline-2  outline-slate-900' : '');
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div on:click={() => select('constants')} class={settingsClass}>
-	<Icon data={faDollarSign} class="mr-2" />
-	<span class="text-xs flex flex-row justify-between w-full gap-2 items-center truncate">
+<button on:click={() => select('constants')} class={settingsClass}>
+	<DollarSign size={16} />
+	<span class="text-xs flex flex-row justify-between w-full gap-2 items-center truncate ml-1">
 		All Static Inputs
 	</span>
-</div>
+</button>

package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -89,13 +89,9 @@ $: confirmationModalOpen = indexToRemove !== undefined;
 <div class="flex flex-col h-full relative">
 	{#if root}
 		<div
-			class="z-10 sticky inline-flex top-0 bg-gray-50 flex-initial  px-3 py-2 items-center h-full max-h-12 border-b border-gray-300"
+			class="z-10 sticky inline-flex flex-col gap-2 top-0 bg-gray-50 flex-initial p-2 items-center border-b border-gray-300"
 		>
 			<FlowSettingsItem />
-		</div>
-		<div
-			class="z-10 sticky inline-flex top-0 bg-gray-50 flex-initial  px-3 py-2 items-center h-full max-h-12 border-b border-gray-300"
-		>
 			<FlowConstantsItem />
 		</div>
 	{/if}

package/components/flows/map/FlowSettingsItem.svelte

@@ -1,23 +1,21 @@
 <script>import { getContext } from 'svelte';
-import Icon from 'svelte-awesome';
-import { faSliders } from '@fortawesome/free-solid-svg-icons';
 import { classNames } from '../../../utils';
 import { Badge } from '../../common';
 import { flowStore } from '../flowStore';
+import { SlidersHorizontal } from 'lucide-svelte';
 const { select, selectedId } = getContext('FlowEditorContext');
 $: settingsClass = classNames('border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center', $selectedId?.startsWith('settings')
     ? 'outline outline-offset-1 outline-2  outline-slate-900'
     : '');
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div on:click={() => select('settings-metadata')} class={settingsClass}>
-	<Icon data={faSliders} class="mr-2" />
-	<span class="text-xs font-bold flex flex-row justify-between w-full gap-2 items-center truncate">
+<button on:click={() => select('settings-metadata')} class={settingsClass}>
+	<SlidersHorizontal size={16} />
+	<span class="text-xs font-bold flex flex-row justify-between w-full gap-2 items-center truncate ml-1">
 		Settings
 
 		{#if $flowStore.value.same_worker}
 			<Badge color="blue" baseClass="truncate">./shared</Badge>
 		{/if}
 	</span>
-</div>
+</button>

package/components/flows/pickers/PickHubApp.svelte

@@ -0,0 +1,73 @@
+<script>import { createEventDispatcher, onMount } from 'svelte';
+import { Badge, Skeleton } from '../../common';
+import SearchItems from '../../SearchItems.svelte';
+import { loadHubApps } from '../../../utils';
+import ListFilters from '../../home/ListFilters.svelte';
+import NoItemFound from '../../home/NoItemFound.svelte';
+import RowIcon from '../../common/table/RowIcon.svelte';
+export let filter = '';
+let hubApps = undefined;
+let filteredItems = [];
+let appFilter = undefined;
+$: prefilteredItems = appFilter
+    ? (hubApps ?? []).filter((i) => i.apps.includes(appFilter))
+    : hubApps ?? [];
+$: apps = Array.from(new Set(filteredItems?.flatMap((x) => x.apps) ?? [])).sort();
+const dispatch = createEventDispatcher();
+onMount(async () => {
+    hubApps = await loadHubApps();
+});
+</script>
+
+<SearchItems
+	{filter}
+	items={prefilteredItems}
+	bind:filteredItems
+	f={(x) => x.summary + ' (' + x.apps.join(', ') + ')'}
+/>
+<div class="w-full flex mt-1 items-center gap-2">
+	<slot />
+	<input type="text" placeholder="Search Hub Apps" bind:value={filter} class="text-2xl grow" />
+</div>
+<ListFilters filters={apps} bind:selectedFilter={appFilter} resourceType />
+
+{#if hubApps}
+	{#if filteredItems.length == 0}
+		<NoItemFound />
+	{:else}
+		<ul class="divide-y divide-gray-200 border rounded-md">
+			{#each filteredItems as item (item)}
+				<li class="flex flex-row w-full">
+					<button
+						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+						on:click={() => dispatch('pick', item)}
+					>
+						<div class="flex items-center gap-4">
+							<RowIcon kind="app" />
+
+							<div class="w-full text-left font-normal ">
+								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+									{#if item.marked}
+										{@html item.marked ?? ''}
+									{:else}
+										{item.summary ?? ''}
+									{/if}
+								</div>
+							</div>
+						</div>
+						<div class="min-w-1/3 gap-2 flex flex-wrap justify-end">
+							{#each item.apps as app}
+								<Badge color="gray" baseClass="border">{app}</Badge>
+							{/each}
+						</div>
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+{:else}
+	<div class="my-2" />
+	{#each Array(10).fill(0) as _}
+		<Skeleton layout={[[4], 0.5]} />
+	{/each}
+{/if}

package/components/flows/pickers/PickHubApp.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        filter?: string | undefined;
+    };
+    events: {
+        pick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PickHubAppProps = typeof __propDef.props;
+export type PickHubAppEvents = typeof __propDef.events;
+export type PickHubAppSlots = typeof __propDef.slots;
+export default class PickHubApp extends SvelteComponentTyped<PickHubAppProps, PickHubAppEvents, PickHubAppSlots> {
+}
+export {};

package/components/flows/pickers/PickHubFlow.svelte

@@ -27,7 +27,7 @@ onMount(async () => {
 />
 <div class="w-full flex mt-1 items-center gap-2">
 	<slot />
-	<input type="text" placeholder="Search Hub Scripts" bind:value={filter} class="text-2xl grow" />
+	<input type="text" placeholder="Search Hub Flows" bind:value={filter} class="text-2xl grow" />
 </div>
 <ListFilters filters={apps} bind:selectedFilter={appFilter} resourceType />
 
@@ -66,6 +66,8 @@ onMount(async () => {
 		</ul>
 	{/if}
 {:else}
+	<div class="my-2" />
+
 	{#each Array(10).fill(0) as _}
 		<Skeleton layout={[[4], 0.5]} />
 	{/each}

package/components/flows/pickers/PickHubScript.svelte

@@ -81,6 +81,7 @@ const maxItems = 40;
 		</div>
 	{/if}
 {:else}
+	<div class="my-2" />
 	{#each Array(10).fill(0) as _}
 		<Skeleton layout={[0.5, [4]]} />
 	{/each}

package/components/flows/propPicker/PropPickerWrapper.svelte

@@ -3,6 +3,7 @@
 
 <script>import PropPicker from '../../propertyPicker/PropPicker.svelte';
 import PropPickerResult from '../../propertyPicker/PropPickerResult.svelte';
+import { clickOutside } from '../../../utils';
 import { createEventDispatcher, setContext } from 'svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { writable } from 'svelte/store';
@@ -28,34 +29,44 @@ setContext('PropPickerWrapper', {
 });
 </script>
 
-<Splitpanes>
-	<Pane minSize={20} size={60} class="relative p-4 !transition-none">
-		<slot />
-	</Pane>
-	<Pane minSize={20} size={40} class="py-2 relative !transition-none">
-		{#if result}
-			<PropPickerResult
-				{result}
-				on:select={({ detail }) => {
-					dispatch('select', detail)
-					if ($propPickerConfig?.onSelect(detail)) {
-						propPickerConfig.set(undefined)
-					}
-				}}
-			/>
-		{:else if pickableProperties}
-			<PropPicker
-				{displayContext}
-				{error}
-				{pickableProperties}
-				{notSelectable}
-				on:select={({ detail }) => {
-					dispatch('select', detail)
-					if ($propPickerConfig?.onSelect(detail)) {
-						propPickerConfig.set(undefined)
-					}
-				}}
-			/>
-		{/if}
-	</Pane>
-</Splitpanes>
+<div
+	class="h-full w-full"
+	use:clickOutside
+	on:click_outside={() => propPickerConfig.set(undefined)}
+>
+	<Splitpanes>
+		<Pane minSize={20} size={60} class="relative p-4 !transition-none">
+			<slot />
+		</Pane>
+		<Pane
+			minSize={20}
+			size={40}
+			class="pt-2 relative !transition-none {$propPickerConfig ? 'border-2 border-blue-500' : ''}"
+		>
+			{#if result}
+				<PropPickerResult
+					{result}
+					on:select={({ detail }) => {
+						dispatch('select', detail)
+						if ($propPickerConfig?.onSelect(detail)) {
+							propPickerConfig.set(undefined)
+						}
+					}}
+				/>
+			{:else if pickableProperties}
+				<PropPicker
+					{displayContext}
+					{error}
+					{pickableProperties}
+					{notSelectable}
+					on:select={({ detail }) => {
+						dispatch('select', detail)
+						if ($propPickerConfig?.onSelect(detail)) {
+							propPickerConfig.set(undefined)
+						}
+					}}
+				/>
+			{/if}
+		</Pane>
+	</Splitpanes>
+</div>

package/components/home/ItemsList.svelte

@@ -167,8 +167,8 @@ $: items && resetScroll();
 />
 
 <CenteredPage>
-	<div class="flex flex-col md:flex-row gap-2 items-center sm:justify-between w-full">
-		<div>
+	<div class="flex flex-wrap gap-2 items-center justify-between w-full">
+		<div class="flex justify-start">
 			<ToggleButtonGroup bind:selected={itemKind}>
 				<ToggleButton light position="left" value="all" size="sm">All</ToggleButton>
 				<ToggleButton light position="center" value="script" size="sm">
@@ -192,7 +192,7 @@ $: items && resetScroll();
 			</ToggleButtonGroup>
 		</div>
 
-		<div class="relative text-gray-600 w-full">
+		<div class="relative text-gray-600 grow min-w-[100px]">
 			<!-- svelte-ignore a11y-autofocus -->
 			<input
 				autofocus
@@ -236,7 +236,7 @@ $: items && resetScroll();
 		{:else}
 			<div class="border rounded-md divide-y divide-gray-200 mb-80">
 				<!-- <VirtualList {items} let:item bind:start bind:end> -->
-				{#each items ?? [] as item, i (item.type + '/' + item.path)}
+				{#each items ?? [] as item, i (item.type + '/' + item.path + (item.summary ?? ''))}
 					{#if item.type == 'script'}
 						<ScriptRow
 							starred={item.starred ?? false}
@@ -261,6 +261,8 @@ $: items && resetScroll();
 							marked={item.marked}
 							on:change={loadApps}
 							app={item}
+							{moveDrawer}
+							{shareModal}
 						/>
 					{/if}
 				{/each}

package/components/icons/ClickhouseIcon.svelte

@@ -0,0 +1,22 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	x="0px"
+	y="0px"
+	{width}
+	{height}
+	viewBox="0 0 168 168"
+	fill="none"
+>
+	<path
+		d="M0 139.667H18.6667V158.333H0V139.667Z"
+		fill="#FF0000"
+	/>
+	<path
+		d="M0 9H18.6667V139.667H0V9ZM37.3333 9H56V158.333H37.3333V9ZM74.6667 9H93.3333V158.333H74.6667V9ZM112 9H130.667V158.333H112V9ZM149.333 69.6667H168V97.6667H149.333V69.6667Z"
+		fill="#FFCC00"
+	/>
+</svg>

package/components/icons/ClickhouseIcon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ClickhouseIconProps = typeof __propDef.props;
+export type ClickhouseIconEvents = typeof __propDef.events;
+export type ClickhouseIconSlots = typeof __propDef.slots;
+export default class ClickhouseIcon extends SvelteComponentTyped<ClickhouseIconProps, ClickhouseIconEvents, ClickhouseIconSlots> {
+}
+export {};

package/components/icons/FaunadbIcon.svelte

@@ -0,0 +1,19 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	x="0px"
+	y="0px"
+	{width}
+	{height}
+	viewBox="0 0 168 168"
+	fill="none"
+>
+	<path
+		d="M124.222 37.638C114.302 40.949 109.525 46.888 106.271 56.138C105.431 58.609 103.331 61.342 100.969 63.182L109.105 71.907L83.28 53.827L12 4C12 4 17.144 37.428 18.929 49.727C20.189 58.399 22.34 62.288 29.164 66.23L31.894 67.702L43.651 73.904L36.67 70.277L68.898 87.885L68.688 88.358L33.993 72.274C35.83 78.582 39.399 90.723 40.922 96.084C42.549 101.865 44.386 103.968 50.002 106.018L60.342 109.802L66.746 107.279L58.611 112.693L17.931 164.358C44.963 139.235 67.849 130.3 84.593 122.994C105.956 113.744 118.816 107.805 127.214 86.466C133.198 71.486 137.869 52.302 143.801 44.891L156.451 28.703C156.451 28.703 130.258 35.641 124.222 37.638Z"
+		fill="#3F00A5"
+	/>
+</svg>
+		

package/components/icons/FaunadbIcon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FaunadbIconProps = typeof __propDef.props;
+export type FaunadbIconEvents = typeof __propDef.events;
+export type FaunadbIconSlots = typeof __propDef.slots;
+export default class FaunadbIcon extends SvelteComponentTyped<FaunadbIconProps, FaunadbIconEvents, FaunadbIconSlots> {
+}
+export {};

package/components/icons/OpenaiIcon.svelte

@@ -0,0 +1,18 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	x="0px"
+	y="0px"
+	{width}
+	{height}
+	viewBox="0 0 168 168"
+	fill="none"
+>
+	<path
+		d="M75.3666 0.990772C56.9205 0.990772 40.5323 12.7091 34.82 30.0051C28.9578 31.1972 23.4203 33.6075 18.5758 37.0754C13.7313 40.5434 9.69106 44.9895 6.7239 50.1179C-2.52748 65.8927 -0.414958 85.724 11.9789 99.245C8.15248 110.57 9.46573 122.963 15.5767 133.218C24.7714 149.049 43.2721 157.162 61.3762 153.387C65.3401 157.8 70.2122 161.329 75.6676 163.739C81.123 166.148 87.0364 167.382 93.0135 167.359C111.46 167.359 127.848 155.641 133.56 138.345C145.438 135.921 155.661 128.597 161.6 118.232C170.908 102.457 168.795 82.6257 156.403 69.1047V69.0488C158.293 63.451 158.95 57.5194 158.33 51.6509C157.709 45.7825 155.826 40.1123 152.805 35.0198C143.609 19.245 125.106 11.13 107.06 14.905C103.078 10.503 98.1934 6.98605 92.7294 4.58725C87.2654 2.18845 81.3471 0.962552 75.3666 0.990772ZM75.3666 11.8088L75.31 11.8646C82.7341 11.8646 89.873 14.4 95.5833 19.0773C95.3546 19.1891 94.8973 19.4706 94.5554 19.6403L60.9776 38.7389C59.2637 39.6971 58.2358 41.4998 58.2358 43.4722V88.3172L43.7881 80.0924V43.021C43.7849 34.7519 47.1089 26.8196 53.03 20.9669C58.9511 15.1141 66.9849 11.8195 75.3666 11.8068V11.8088ZM115.816 24.8646C121.381 24.854 126.849 26.2929 131.669 29.0359C136.489 31.7788 140.49 35.7285 143.267 40.4857C146.921 46.796 148.291 54.1764 147.034 61.3311C146.806 61.1614 146.351 60.9378 146.063 60.7682L112.485 41.6116C111.641 41.1403 110.687 40.8926 109.716 40.8926C108.746 40.8926 107.792 41.1403 106.947 41.6116L67.6005 64.0341V47.5826L100.094 29.0469C104.871 26.3143 110.294 24.8711 115.816 24.8626V24.8646ZM32.7662 41.8931V81.2742C32.7662 83.2466 33.7941 84.9933 35.508 86.0075L74.796 108.374L60.2896 116.655L27.8531 98.1749C20.6043 94.0304 15.3186 87.2176 13.1561 79.232C10.9937 71.2464 12.1313 62.7407 16.3193 55.5818C20.0137 49.2641 25.8321 44.4207 32.7662 41.8911V41.8931ZM108.032 51.639L140.525 70.1189C155.659 78.7389 160.796 97.7817 152.059 112.712L152.115 112.768C148.404 119.078 142.579 123.923 135.669 126.403V87.0196C135.669 85.0472 134.641 83.2446 132.927 82.2883L93.582 59.8638L108.032 51.639ZM84.1607 65.2179L100.723 74.6824V93.5555L84.1607 103.02L67.6005 93.5555V74.6824L84.1607 65.2179ZM110.201 80.0924L124.649 88.3172V125.333C124.649 142.573 110.486 156.545 93.0701 156.545V156.489C85.7026 156.489 78.5071 153.954 72.8534 149.278C73.0821 149.167 73.5961 148.883 73.8814 148.713L107.459 129.615C109.173 128.657 110.258 126.854 110.199 124.882L110.201 80.0924ZM100.778 104.318V120.767L68.2844 139.247C53.1508 147.811 33.8487 142.74 25.1113 127.866H25.168C21.4569 121.612 20.1416 114.175 21.3982 107.021C21.6269 107.19 22.0842 107.414 22.3695 107.584L55.9472 126.74C56.792 127.211 57.7459 127.459 58.7164 127.459C59.6868 127.459 60.6408 127.211 61.4855 126.74L100.778 104.318Z"
+		fill="#0F0F0F"
+	/>
+</svg>

package/components/icons/OpenaiIcon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type OpenaiIconProps = typeof __propDef.props;
+export type OpenaiIconEvents = typeof __propDef.events;
+export type OpenaiIconSlots = typeof __propDef.slots;
+export default class OpenaiIcon extends SvelteComponentTyped<OpenaiIconProps, OpenaiIconEvents, OpenaiIconSlots> {
+}
+export {};

package/components/icons/index.d.ts

@@ -30,6 +30,9 @@ import TelegramIcon from './TelegramIcon.svelte';
 import FunkwhaleIcon from './FunkwhaleIcon.svelte';
 import GdocsIcon from './GdocsIcon.svelte';
 import NextcloudIcon from './NextcloudIcon.svelte';
+import FaunadbIcon from './FaunadbIcon.svelte';
+import ClickhouseIcon from './ClickhouseIcon.svelte';
+import OpenaiIcon from './OpenaiIcon.svelte';
 export declare const APP_TO_ICON_COMPONENT: {
     readonly postgresql: typeof PostgresIcon;
     readonly mysql: typeof Mysql;
@@ -66,5 +69,8 @@ export declare const APP_TO_ICON_COMPONENT: {
     readonly windmillhub: typeof WindmillIcon;
     readonly gdocs: typeof GdocsIcon;
     readonly ocs: typeof NextcloudIcon;
+    readonly faunadb: typeof FaunadbIcon;
+    readonly clickhouse: typeof ClickhouseIcon;
+    readonly openai: typeof OpenaiIcon;
 };
-export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, };
+export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, FaunadbIcon, ClickhouseIcon, OpenaiIcon, };

package/components/icons/index.js

@@ -30,6 +30,9 @@ import TelegramIcon from './TelegramIcon.svelte';
 import FunkwhaleIcon from './FunkwhaleIcon.svelte';
 import GdocsIcon from './GdocsIcon.svelte';
 import NextcloudIcon from './NextcloudIcon.svelte';
+import FaunadbIcon from './FaunadbIcon.svelte';
+import ClickhouseIcon from './ClickhouseIcon.svelte';
+import OpenaiIcon from './OpenaiIcon.svelte';
 export const APP_TO_ICON_COMPONENT = {
     postgresql: PostgresIcon,
     mysql: Mysql,
@@ -65,6 +68,9 @@ export const APP_TO_ICON_COMPONENT = {
     helper: WindmillIcon,
     windmillhub: WindmillIcon,
     gdocs: GdocsIcon,
-    ocs: NextcloudIcon
+    ocs: NextcloudIcon,
+    faunadb: FaunadbIcon,
+    clickhouse: ClickhouseIcon,
+    openai: OpenaiIcon,
 };
-export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, };
+export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, FaunadbIcon, ClickhouseIcon, OpenaiIcon, };

package/components/propertyPicker/ObjectViewer.svelte

@@ -3,6 +3,7 @@ import { createEventDispatcher } from 'svelte';
 import { Badge } from '../common';
 import { NEVER_TESTED_THIS_FAR } from '../flows/utils';
 import { getTypeAsString } from '../flows/utils';
+import Popover from '../Popover.svelte';
 import { computeKey } from './utils';
 import WarningMessage from './WarningMessage.svelte';
 export let json;
@@ -49,7 +50,7 @@ function selectProp(key) {
 		<ul class="w-full">
 			{#each keys as key, index}
 				<li class="pt-1">
-					<button on:click={() => selectProp(key)}>
+					<button on:click={() => selectProp(key)} class="whitespace-nowrap">
 						{#if topLevelNode}
 							<Badge baseClass="border border-blue-600" color="indigo">{key}</Badge>
 						{:else}
@@ -82,9 +83,13 @@ function selectProp(key) {
 							{#if json[key] === NEVER_TESTED_THIS_FAR}
 								<WarningMessage />
 							{:else if json[key] == undefined}
-								<span>undefined</span>
+								<span class="text-2xs">undefined</span>
+							{:else if typeof json[key] == 'string'}
+								<span title={json[key]} class="text-2xs">"{truncate(json[key], 200)}"</span>
 							{:else}
-								<span>{truncate(JSON.stringify(json[key]), 40)}</span>
+								<span title={JSON.stringify(json[key])} class="text-2xs"
+									>{truncate(JSON.stringify(json[key]), 200)}</span
+								>
 							{/if}
 						</button>
 					{/if}
@@ -109,8 +114,10 @@ function selectProp(key) {
 	{#if !isLast && collapsed}
 		<span class="text-black">,</span>
 	{/if}
-{:else}
+{:else if topBrackets}
 	<span class="text-black">{openBracket}{closeBracket}</span>
+{:else}
+	<span class="text-gray-600 text-xs">No items</span>
 {/if}
 
 <style>

package/components/propertyPicker/PropPicker.svelte

@@ -38,7 +38,7 @@ async function loadResources() {
 }
 </script>
 
-<div class="flex flex-col h-full">
+<div class="flex flex-col h-full ">
 	<div class="px-2">
 		{#if !notSelectable}
 			<div class="flex flex-row space-x-1">

package/components/scriptEditor/LogPanel.svelte

@@ -15,9 +15,9 @@ import { json } from 'svelte-highlight/languages';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
 import HighlightCode from '../HighlightCode.svelte';
 import LogViewer from '../LogViewer.svelte';
-import { Pane } from 'svelte-splitpanes';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
 import SplitPanesWrapper from '../splitPanes/SplitPanesWrapper.svelte';
-import { fade } from 'svelte/transition';
+import { Loader2 } from 'lucide-svelte';
 export let path;
 export let lang;
 export let previewIsLoading = false;
@@ -65,27 +65,31 @@ function closeDrawer() {
 			because SplitPanesWrapper uses the parent element as a reference point.
 		-->
 		{#if selectedTab === 'logs'}
-			<SplitPanesWrapper horizontal>
-				<Pane class="!duration-[0ms] relative">
-					<LogViewer
-						duration={previewJob?.['duration_ms']}
-						content={previewJob?.logs}
-						isLoading={previewIsLoading}
-					/>
-				</Pane>
-				<Pane class="!duration-[0ms]">
-					{#if previewJob != undefined && 'result' in previewJob && previewJob.result != undefined}
-						<pre
-							transition:fade={{ duration: 50 }}
-							class="overflow-x-auto break-words relative h-full p-2"
-							><DisplayResult result={previewJob.result} />
+			<SplitPanesWrapper>
+				<Splitpanes horizontal>
+					<Pane class="relative">
+						<LogViewer
+							duration={previewJob?.['duration_ms']}
+							content={previewJob?.logs}
+							isLoading={previewIsLoading}
+						/>
+					</Pane>
+					<Pane>
+						{#if previewJob != undefined && 'result' in previewJob && previewJob.result != undefined}
+							<pre class="relative w-full h-full p-2"
+								><DisplayResult result={previewJob.result} />
 						</pre>
-					{:else}
-						<div class="text-sm text-gray-600 p-2">
-							{previewIsLoading ? '' : 'Test to see the result here'}
-						</div>
-					{/if}
-				</Pane>
+						{:else}
+							<div class="text-sm text-gray-600 p-2">
+								{#if previewIsLoading}
+									<Loader2 class="animate-spin" />
+								{:else}
+									Test to see the result here'
+								{/if}
+							</div>
+						{/if}
+					</Pane>
+				</Splitpanes>
 			</SplitPanesWrapper>
 		{/if}
 		<TabContent value="history" class="p-2">

package/components/sidebar/WorkspaceMenu.svelte

@@ -1,6 +1,5 @@
-<script>import { workspaceStore, userWorkspaces } from '../../stores';
+<script>import { workspaceStore, userWorkspaces, switchWorkspace, usersWorkspaceStore } from '../../stores';
 import { classNames } from '../../utils';
-import Icon from 'svelte-awesome';
 import { Building } from 'lucide-svelte';
 import Menu from '../common/menu/Menu.svelte';
 export let isCollapsed = false;
@@ -30,7 +29,7 @@ export let isCollapsed = false;
 					<tr
 						class="text-xs cursor-pointer hover:bg-gray-100"
 						on:click={() => {
-							workspaceStore.set(workspace.id)
+							switchWorkspace(workspace.id)
 							close()
 						}}
 					>