improve windmill-components compat with hub (#7437)

frontend/.gitignore

@@ -16,3 +16,4 @@ ui_builder.tar.gz
 ui_builder_serve/
 src/lib/components/copilot/chat/__tests__/flow/results/
 src/lib/components/copilot/chat/__tests__/app/results/
+.npmrc

frontend/package.json

@@ -11,7 +11,7 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
 		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
-		"package": "svelte-package -o package",
+		"package": "svelte-package -o package && node scripts/package-system-prompts.js",
 		"generate-backend-client": "openapi-ts --input ../backend/windmill-api/openapi.yaml --output ./src/lib/gen --useOptions --enums javascript --format false",
 		"generate-backend-client-mac": "openapi-ts --input ../backend/windmill-api/openapi.yaml --output ./src/lib/gen --useOptions --enums javascript",
 		"pretest": "tsc --incremental -p tests/tsconfig.json",
@@ -251,6 +251,16 @@
 			"svelte": "./package/components/common/tabs/Tab.svelte",
 			"default": "./package/components/common/tabs/Tab.svelte"
 		},
+		"./components/common/toggleButton-v2/ToggleButtonGroup.svelte": {
+			"types": "./package/components/common/toggleButton-v2/ToggleButtonGroup.svelte.d.ts",
+			"svelte": "./package/components/common/toggleButton-v2/ToggleButtonGroup.svelte",
+			"default": "./package/components/common/toggleButton-v2/ToggleButtonGroup.svelte"
+		},
+		"./components/common/toggleButton-v2/ToggleButton.svelte": {
+			"types": "./package/components/common/toggleButton-v2/ToggleButton.svelte.d.ts",
+			"svelte": "./package/components/common/toggleButton-v2/ToggleButton.svelte",
+			"default": "./package/components/common/toggleButton-v2/ToggleButton.svelte"
+		},
 		"./components/common/alert/Alert.svelte": {
 			"types": "./package/components/common/alert/Alert.svelte.d.ts",
 			"svelte": "./package/components/common/alert/Alert.svelte",
@@ -446,6 +456,12 @@
 			"components/Toggle.svelte": [
 				"./package/components/Toggle.svelte.d.ts"
 			],
+			"components/common/toggleButton-v2/ToggleButtonGroup.svelte": [
+				"./package/components/common/toggleButton-v2/ToggleButtonGroup.svelte.d.ts"
+			],
+			"components/common/toggleButton-v2/ToggleButton.svelte": [
+				"./package/components/common/toggleButton-v2/ToggleButton.svelte.d.ts"
+			],
 			"components/common/tabs/Tabs.svelte": [
 				"./package/components/common/tabs/Tabs.svelte.d.ts"
 			],
@@ -548,4 +564,4 @@
 		"@rollup/rollup-linux-x64-gnu": "^4.35.0",
 		"fsevents": "^2.3.3"
 	}
-}
+}

frontend/scripts/package-system-prompts.js

@@ -0,0 +1,91 @@
+import { execSync } from 'child_process'
+import { writeFileSync, mkdirSync, cpSync, existsSync, rmSync, readdirSync, readFileSync } from 'fs'
+import { fileURLToPath } from 'url'
+import { dirname, join, resolve, relative } from 'path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const frontendDir = resolve(__dirname, '..')
+const rootDir = resolve(frontendDir, '..')
+const systemPromptsDir = join(rootDir, 'system_prompts', 'auto-generated')
+const packageDir = join(frontendDir, 'package')
+const packageSystemPromptsDir = join(packageDir, 'system_prompts')
+
+// Create package/system_prompts directory
+if (!existsSync(packageSystemPromptsDir)) {
+	mkdirSync(packageSystemPromptsDir, { recursive: true })
+}
+
+// Create a temporary tsconfig for compiling system_prompts
+const tempTsConfig = {
+	compilerOptions: {
+		target: 'ES2021',
+		module: 'ESNext',
+		moduleResolution: 'bundler',
+		lib: ['ES2021'],
+		declaration: true,
+		declarationMap: false,
+		sourceMap: false,
+		outDir: packageSystemPromptsDir,
+		rootDir: systemPromptsDir,
+		esModuleInterop: true,
+		skipLibCheck: true,
+		strict: false,
+		isolatedModules: true,
+		resolveJsonModule: true,
+		allowSyntheticDefaultImports: true
+	},
+	include: [join(systemPromptsDir, '**/*.ts')],
+	exclude: ['node_modules']
+}
+
+const tempTsConfigPath = join(frontendDir, 'tsconfig.system-prompts.json')
+writeFileSync(tempTsConfigPath, JSON.stringify(tempTsConfig, null, 2))
+
+try {
+	// Compile TypeScript files
+	console.log('Compiling system_prompts...')
+	execSync(`npx tsc --project ${tempTsConfigPath}`, {
+		stdio: 'inherit',
+		cwd: frontendDir
+	})
+
+	console.log('system_prompts compiled and copied to package/system_prompts')
+
+	// Rewrite imports in packaged files to use the correct path
+	console.log('Rewriting $system_prompts imports in packaged files...')
+
+	function rewriteImportsInFile(filePath) {
+		const content = readFileSync(filePath, 'utf-8')
+
+		// Specifically rewrite: ../../../../../../../system_prompts/auto-generated to ../../../../system_prompts
+		const pattern = /from\s+['"](\.\.\/){7}system_prompts\/auto-generated['"]/g
+
+		const modified = content.replace(pattern, "from '../../../../system_prompts'")
+
+		if (modified !== content) {
+			writeFileSync(filePath, modified, 'utf-8')
+		}
+	}
+
+	function processDirectory(dir) {
+		const entries = readdirSync(dir, { withFileTypes: true })
+		for (const entry of entries) {
+			const fullPath = join(dir, entry.name)
+			if (entry.isDirectory()) {
+				processDirectory(fullPath)
+			} else if (entry.isFile() && entry.name.endsWith('.js')) {
+				rewriteImportsInFile(fullPath)
+			}
+		}
+	}
+
+	processDirectory(packageDir)
+	console.log('Finished rewriting imports')
+} finally {
+	// Clean up temporary tsconfig
+	if (existsSync(tempTsConfigPath)) {
+		rmSync(tempTsConfigPath)
+	}
+}

frontend/src/lib/components/ArrayTypeNarrowing.svelte

@@ -185,13 +185,14 @@
 			() => {
 				return itemsType?.properties != undefined
 			},
-			async (v) => {
-				await tick()
-				if (v) {
-					itemsType = { type: 'object', properties: {} }
-				} else {
-					itemsType = { type: 'object', properties: undefined }
-				}
+			(v) => {
+				tick().then(() => {
+					if (v) {
+						itemsType = { type: 'object', properties: {} }
+					} else {
+						itemsType = { type: 'object', properties: undefined }
+					}
+				})
 			}
 		}
 		options={{ left: 'JSON', right: 'Custom Object' }}

frontend/src/lib/components/copilot/chat/sharedChatState.svelte.ts

@@ -1,17 +1,21 @@
+import { BROWSER } from 'esm-env'
+
 export const triggerablesByAi = $state<TriggerablesMap>({})
 
 export type TriggerablesMap = Record<
-    string,
-    {
-        description: string
-        onTrigger: ((value?: string) => void) | undefined
-    }
+	string,
+	{
+		description: string
+		onTrigger: ((value?: string) => void) | undefined
+	}
 >
 export const DEFAULT_SIZE = 22
 
 type ChatState = {
-    size: number
+	size: number
 }
+
+// we first check BROWSER before localStorage to avoid SSR issues when using Drawer in a SvelteKit app (chatState is imported in Drawer.svelte)
 export const chatState = $state<ChatState>({
-    size: localStorage.getItem('ai-chat-open') === 'true' ? DEFAULT_SIZE : 0,
+	size: BROWSER && localStorage.getItem('ai-chat-open') === 'true' ? DEFAULT_SIZE : 0
 })

frontend/src/lib/components/icons/index.ts

@@ -103,6 +103,7 @@ import ApifyIcon from './ApifyIcon.svelte'
 import McpIcon from './McpIcon.svelte'
 import SageIcon from './SageIcon.svelte'
 import ZohoIcon from './ZohoIcon.svelte'
+import type { Component } from 'svelte'
 export const APP_TO_ICON_COMPONENT = {
 	postgresql: PostgresIcon,
 	mysql: Mysql,
@@ -211,7 +212,7 @@ export const APP_TO_ICON_COMPONENT = {
 	apify: ApifyIcon,
 	mcp: McpIcon,
 	zoho: ZohoIcon
-} as const
+} as unknown as Record<string, Component> // to generate correct svelte package types
 
 export {
 	AirtableIcon,