@n8n/composables 1.22.0 → 1.24.0

package/dist/useStyles.d.mts

@@ -0,0 +1,31 @@
+//#region src/useStyles.d.ts
+declare const useStyles: () => {
+  APP_Z_INDEXES: {
+    readonly CONTEXT_MENU: 10;
+    readonly APP_HEADER: 99;
+    readonly SELECT_BOX: 100;
+    readonly CANVAS_ADD_BUTTON: 101;
+    readonly APP_SIDEBAR: 999;
+    readonly CANVAS_SELECT_BOX: 100;
+    readonly TOP_BANNERS: 999;
+    readonly NODE_CREATOR: 1700;
+    readonly ASK_ASSISTANT_CHAT: 1750;
+    readonly NDV: 1800;
+    readonly COMMAND_BAR: 1900;
+    readonly DIALOGS: 1950;
+    readonly MODALS: 2000;
+    readonly TOASTS: 2100;
+    readonly ASK_ASSISTANT_FLOATING_BUTTON: 3000;
+    readonly ASK_ASSISTANT_FLOATING_BUTTON_TOOLTIP: 3000;
+    readonly CODEMIRROR_TOOLTIP: 3000;
+    readonly FLOATING_UI: 3000;
+    readonly DRAGGABLE: 9999999;
+    readonly ACTIVE_STICKY: 9999999;
+    readonly WORKFLOW_PREVIEW_NDV: 9999999;
+    readonly NPS_SURVEY_MODAL: 3001;
+  };
+  setAppZIndexes: () => void;
+};
+//#endregion
+export { useStyles };
+//# sourceMappingURL=useStyles.d.mts.map

package/dist/useStyles.mjs

@@ -0,0 +1,18 @@
+import { APP_Z_INDEXES } from "@n8n/frontend-constants/z-indexes";
+
+//#region src/useStyles.ts
+const setAppZIndexes = () => {
+	Object.keys(APP_Z_INDEXES).forEach((key) => {
+		const variableName = `--${key.toLowerCase().replaceAll("_", "-")}--z`;
+		const value = APP_Z_INDEXES[key];
+		document.documentElement.style.setProperty(variableName, `${value}`);
+	});
+};
+const useStyles = () => ({
+	APP_Z_INDEXES,
+	setAppZIndexes
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=useStyles.mjs.map

package/dist/useStyles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStyles.mjs","names":[],"sources":["../src/useStyles.ts"],"sourcesContent":["import { APP_Z_INDEXES } from '@n8n/frontend-constants/z-indexes';\n\nconst setAppZIndexes = () => {\n\tObject.keys(APP_Z_INDEXES).forEach((key) => {\n\t\tconst variableName = `--${key.toLowerCase().replaceAll('_', '-')}--z`;\n\t\tconst value = APP_Z_INDEXES[key as keyof typeof APP_Z_INDEXES];\n\t\tdocument.documentElement.style.setProperty(variableName, `${value}`);\n\t});\n};\n\nexport const useStyles = () => ({\n\tAPP_Z_INDEXES,\n\tsetAppZIndexes,\n});\n"],"mappings":";;;AAEA,MAAM,uBAAuB;AAC5B,QAAO,KAAK,cAAc,CAAC,SAAS,QAAQ;EAC3C,MAAM,eAAe,KAAK,IAAI,aAAa,CAAC,WAAW,KAAK,IAAI,CAAC;EACjE,MAAM,QAAQ,cAAc;AAC5B,WAAS,gBAAgB,MAAM,YAAY,cAAc,GAAG,QAAQ;GACnE;;AAGH,MAAa,mBAAmB;CAC/B;CACA;CACA"}

package/dist/useTelemetry.cjs

@@ -0,0 +1,4 @@
+require('./telemetryRegistry.cjs');
+const require_useTelemetry = require('./useTelemetry2.cjs');
+
+exports.useTelemetry = require_useTelemetry.useTelemetry;

package/dist/useTelemetry.d.cts

@@ -0,0 +1,7 @@
+import { i as TelemetryNodeParameterChange, n as TelemetryIdentifyOptions, t as Telemetry } from "./telemetryRegistry.cjs";
+
+//#region src/useTelemetry.d.ts
+declare function useTelemetry(): Telemetry;
+//#endregion
+export { type Telemetry, type TelemetryIdentifyOptions, type TelemetryNodeParameterChange, useTelemetry };
+//# sourceMappingURL=useTelemetry.d.cts.map

package/dist/useTelemetry.d.mts

@@ -0,0 +1,7 @@
+import { i as TelemetryNodeParameterChange, n as TelemetryIdentifyOptions, t as Telemetry } from "./telemetryRegistry.mjs";
+
+//#region src/useTelemetry.d.ts
+declare function useTelemetry(): Telemetry;
+//#endregion
+export { type Telemetry, type TelemetryIdentifyOptions, type TelemetryNodeParameterChange, useTelemetry };
+//# sourceMappingURL=useTelemetry.d.mts.map

package/dist/useTelemetry.mjs

@@ -0,0 +1,4 @@
+import "./telemetryRegistry.mjs";
+import { t as useTelemetry } from "./useTelemetry2.mjs";
+
+export { useTelemetry };

package/dist/useTelemetry2.cjs

@@ -0,0 +1,50 @@
+const require_useDebounce = require('./useDebounce.cjs');
+const require_telemetryRegistry = require('./telemetryRegistry.cjs');
+let vue = require("vue");
+
+//#region src/useTelemetry.ts
+/**
+* Null-object telemetry used when no instance has been registered (e.g. in
+* tests that never install the plugin). Telemetry is best-effort and must never
+* throw or break the UI, so every method is a no-op. Any registered instance
+* (via `setTelemetry` or `TelemetryKey`) takes precedence.
+*
+* A plain object literal (not a `Proxy`) so method identity is stable, spies
+* attach, `'track' in noopTelemetry` holds, and there is no accidental `then`
+* that would make `await useTelemetry()` hang.
+*/
+const noopTelemetry = {
+	init() {},
+	identify() {},
+	track() {},
+	page() {},
+	reset() {},
+	flushPageEvents() {},
+	trackAskAI() {},
+	trackAiTransform() {},
+	trackNodeParametersValuesChange() {}
+};
+let warnedAboutMissingTelemetry = false;
+/**
+* Returns the active telemetry instance. Resolution order: a component-provided
+* instance (via `TelemetryKey`), then the app-registered singleton (via
+* `setTelemetry`), then a no-op fallback.
+*/
+function useTelemetry() {
+	const instance = ((0, vue.hasInjectionContext)() ? (0, vue.inject)(require_telemetryRegistry.TelemetryKey, null) : null) ?? require_telemetryRegistry.getRegisteredTelemetry();
+	if (instance) return instance;
+	if ({}.env.DEV && !warnedAboutMissingTelemetry) {
+		warnedAboutMissingTelemetry = true;
+		console.warn("[useTelemetry] No telemetry instance registered; using a no-op. Ensure the telemetry plugin is installed at bootstrap.");
+	}
+	return noopTelemetry;
+}
+
+//#endregion
+Object.defineProperty(exports, 'useTelemetry', {
+  enumerable: true,
+  get: function () {
+    return useTelemetry;
+  }
+});
+//# sourceMappingURL=useTelemetry2.cjs.map

package/dist/useTelemetry2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTelemetry2.cjs","names":["noopTelemetry: Telemetry","TelemetryKey","getRegisteredTelemetry"],"sources":["../src/useTelemetry.ts"],"sourcesContent":["import { hasInjectionContext, inject } from 'vue';\n\nimport {\n\tgetRegisteredTelemetry,\n\tTelemetryKey,\n\ttype Telemetry,\n} from './registries/telemetryRegistry';\n\n// The telemetry *contract* and the *registration* surface deliberately live in\n// `./registries/telemetryRegistry`: this module is `vi.mock`ed in ~100 test\n// files, and a mock factory replaces the whole module. While `setTelemetry`\n// lived here, any partial factory (the common `{ useTelemetry: () => ... }`\n// shape) also starved the telemetry plugin's own bootstrap import of it.\n// Separate modules make that unreachable — the plugin never imports this one.\nexport type {\n\tTelemetry,\n\tTelemetryIdentifyOptions,\n\tTelemetryNodeParameterChange,\n} from './registries/telemetryRegistry';\n\n/**\n * Null-object telemetry used when no instance has been registered (e.g. in\n * tests that never install the plugin). Telemetry is best-effort and must never\n * throw or break the UI, so every method is a no-op. Any registered instance\n * (via `setTelemetry` or `TelemetryKey`) takes precedence.\n *\n * A plain object literal (not a `Proxy`) so method identity is stable, spies\n * attach, `'track' in noopTelemetry` holds, and there is no accidental `then`\n * that would make `await useTelemetry()` hang.\n */\nconst noopTelemetry: Telemetry = {\n\tinit() {},\n\tidentify() {},\n\ttrack() {},\n\tpage() {},\n\treset() {},\n\tflushPageEvents() {},\n\ttrackAskAI() {},\n\ttrackAiTransform() {},\n\ttrackNodeParametersValuesChange() {},\n};\n\nlet warnedAboutMissingTelemetry = false;\n\n/**\n * Returns the active telemetry instance. Resolution order: a component-provided\n * instance (via `TelemetryKey`), then the app-registered singleton (via\n * `setTelemetry`), then a no-op fallback.\n */\nexport function useTelemetry(): Telemetry {\n\tconst injected = hasInjectionContext() ? inject(TelemetryKey, null) : null;\n\tconst instance = injected ?? getRegisteredTelemetry();\n\tif (instance) return instance;\n\n\t// Falling back to the no-op means the plugin has not registered an instance\n\t// yet. That should never happen in the app (bootstrap registers before any\n\t// consumer runs); warn once in dev so an ordering regression stays visible.\n\tif (import.meta.env.DEV && !warnedAboutMissingTelemetry) {\n\t\twarnedAboutMissingTelemetry = true;\n\t\tconsole.warn(\n\t\t\t'[useTelemetry] No telemetry instance registered; using a no-op. Ensure the telemetry plugin is installed at bootstrap.',\n\t\t);\n\t}\n\treturn noopTelemetry;\n}\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAMA,gBAA2B;CAChC,OAAO;CACP,WAAW;CACX,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,kBAAkB;CAClB,aAAa;CACb,mBAAmB;CACnB,kCAAkC;CAClC;AAED,IAAI,8BAA8B;;;;;;AAOlC,SAAgB,eAA0B;CAEzC,MAAM,0CADgC,mBAAUC,wCAAc,KAAK,GAAG,SACzCC,kDAAwB;AACrD,KAAI,SAAU,QAAO;AAKrB,QAAgB,IAAI,OAAO,CAAC,6BAA6B;AACxD,gCAA8B;AAC9B,UAAQ,KACP,yHACA;;AAEF,QAAO"}

package/dist/useTelemetry2.mjs

@@ -0,0 +1,44 @@
+import { n as getRegisteredTelemetry, t as TelemetryKey } from "./telemetryRegistry.mjs";
+import { hasInjectionContext, inject } from "vue";
+
+//#region src/useTelemetry.ts
+/**
+* Null-object telemetry used when no instance has been registered (e.g. in
+* tests that never install the plugin). Telemetry is best-effort and must never
+* throw or break the UI, so every method is a no-op. Any registered instance
+* (via `setTelemetry` or `TelemetryKey`) takes precedence.
+*
+* A plain object literal (not a `Proxy`) so method identity is stable, spies
+* attach, `'track' in noopTelemetry` holds, and there is no accidental `then`
+* that would make `await useTelemetry()` hang.
+*/
+const noopTelemetry = {
+	init() {},
+	identify() {},
+	track() {},
+	page() {},
+	reset() {},
+	flushPageEvents() {},
+	trackAskAI() {},
+	trackAiTransform() {},
+	trackNodeParametersValuesChange() {}
+};
+let warnedAboutMissingTelemetry = false;
+/**
+* Returns the active telemetry instance. Resolution order: a component-provided
+* instance (via `TelemetryKey`), then the app-registered singleton (via
+* `setTelemetry`), then a no-op fallback.
+*/
+function useTelemetry() {
+	const instance = (hasInjectionContext() ? inject(TelemetryKey, null) : null) ?? getRegisteredTelemetry();
+	if (instance) return instance;
+	if (import.meta.env.DEV && !warnedAboutMissingTelemetry) {
+		warnedAboutMissingTelemetry = true;
+		console.warn("[useTelemetry] No telemetry instance registered; using a no-op. Ensure the telemetry plugin is installed at bootstrap.");
+	}
+	return noopTelemetry;
+}
+
+//#endregion
+export { useTelemetry as t };
+//# sourceMappingURL=useTelemetry2.mjs.map

package/dist/useTelemetry2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTelemetry2.mjs","names":["noopTelemetry: Telemetry"],"sources":["../src/useTelemetry.ts"],"sourcesContent":["import { hasInjectionContext, inject } from 'vue';\n\nimport {\n\tgetRegisteredTelemetry,\n\tTelemetryKey,\n\ttype Telemetry,\n} from './registries/telemetryRegistry';\n\n// The telemetry *contract* and the *registration* surface deliberately live in\n// `./registries/telemetryRegistry`: this module is `vi.mock`ed in ~100 test\n// files, and a mock factory replaces the whole module. While `setTelemetry`\n// lived here, any partial factory (the common `{ useTelemetry: () => ... }`\n// shape) also starved the telemetry plugin's own bootstrap import of it.\n// Separate modules make that unreachable — the plugin never imports this one.\nexport type {\n\tTelemetry,\n\tTelemetryIdentifyOptions,\n\tTelemetryNodeParameterChange,\n} from './registries/telemetryRegistry';\n\n/**\n * Null-object telemetry used when no instance has been registered (e.g. in\n * tests that never install the plugin). Telemetry is best-effort and must never\n * throw or break the UI, so every method is a no-op. Any registered instance\n * (via `setTelemetry` or `TelemetryKey`) takes precedence.\n *\n * A plain object literal (not a `Proxy`) so method identity is stable, spies\n * attach, `'track' in noopTelemetry` holds, and there is no accidental `then`\n * that would make `await useTelemetry()` hang.\n */\nconst noopTelemetry: Telemetry = {\n\tinit() {},\n\tidentify() {},\n\ttrack() {},\n\tpage() {},\n\treset() {},\n\tflushPageEvents() {},\n\ttrackAskAI() {},\n\ttrackAiTransform() {},\n\ttrackNodeParametersValuesChange() {},\n};\n\nlet warnedAboutMissingTelemetry = false;\n\n/**\n * Returns the active telemetry instance. Resolution order: a component-provided\n * instance (via `TelemetryKey`), then the app-registered singleton (via\n * `setTelemetry`), then a no-op fallback.\n */\nexport function useTelemetry(): Telemetry {\n\tconst injected = hasInjectionContext() ? inject(TelemetryKey, null) : null;\n\tconst instance = injected ?? getRegisteredTelemetry();\n\tif (instance) return instance;\n\n\t// Falling back to the no-op means the plugin has not registered an instance\n\t// yet. That should never happen in the app (bootstrap registers before any\n\t// consumer runs); warn once in dev so an ordering regression stays visible.\n\tif (import.meta.env.DEV && !warnedAboutMissingTelemetry) {\n\t\twarnedAboutMissingTelemetry = true;\n\t\tconsole.warn(\n\t\t\t'[useTelemetry] No telemetry instance registered; using a no-op. Ensure the telemetry plugin is installed at bootstrap.',\n\t\t);\n\t}\n\treturn noopTelemetry;\n}\n"],"mappings":";;;;;;;;;;;;;;AA8BA,MAAMA,gBAA2B;CAChC,OAAO;CACP,WAAW;CACX,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,kBAAkB;CAClB,aAAa;CACb,mBAAmB;CACnB,kCAAkC;CAClC;AAED,IAAI,8BAA8B;;;;;;AAOlC,SAAgB,eAA0B;CAEzC,MAAM,YADW,qBAAqB,GAAG,OAAO,cAAc,KAAK,GAAG,SACzC,wBAAwB;AACrD,KAAI,SAAU,QAAO;AAKrB,KAAI,OAAO,KAAK,IAAI,OAAO,CAAC,6BAA6B;AACxD,gCAA8B;AAC9B,UAAQ,KACP,yHACA;;AAEF,QAAO"}

package/dist/useToast.cjs

@@ -0,0 +1,170 @@
+const require_useDebounce = require('./useDebounce.cjs');
+const require_useExternalHooks = require('./useExternalHooks2.cjs');
+require('./telemetryRegistry.cjs');
+const require_useTelemetry = require('./useTelemetry2.cjs');
+let vue = require("vue");
+let __n8n_frontend_constants_z_indexes = require("@n8n/frontend-constants/z-indexes");
+let __n8n_frontend_constants_views = require("@n8n/frontend-constants/views");
+let __n8n_frontend_utils_htmlUtils = require("@n8n/frontend-utils/htmlUtils");
+let __n8n_i18n = require("@n8n/i18n");
+let vue_router = require("vue-router");
+
+//#region src/useToast.ts
+let registeredNotify;
+/**
+* Register the notification function. Called once at bootstrap by
+* `editor-ui` (passing a suppression-aware wrapper around `ElNotification`) so
+* `useToast` can issue notifications without importing element-plus directly —
+* keeping the DTS build lightweight.
+*
+* This is the *only* toast dependency the app registers. Whether a notification
+* is actually shown is the notifier's decision, so if you are chasing a toast
+* that never appeared, look at the registration site, not here.
+*/
+function setNotify(fn) {
+	registeredNotify = fn;
+}
+const noopHandle = { close() {} };
+const noopNotify = () => noopHandle;
+let warnedAboutMissingNotify = false;
+function resolveNotify() {
+	if (registeredNotify) return registeredNotify;
+	if ({}.env.DEV && !warnedAboutMissingNotify) {
+		warnedAboutMissingNotify = true;
+		console.warn("[useToast] No notification function registered; toasts will not render. Call setNotify() at app bootstrap.");
+	}
+	return noopNotify;
+}
+const stickyNotificationQueue = [];
+function useToast() {
+	const telemetry = require_useTelemetry.useTelemetry();
+	const route = (0, vue_router.useRoute)();
+	const workflowId = (0, vue.computed)(() => {
+		if (route?.name === __n8n_frontend_constants_views.VIEWS.DEMO || route?.name === __n8n_frontend_constants_views.VIEWS.DEMO_DIFF) return "demo";
+		const id = route?.params?.workflowId;
+		return (Array.isArray(id) ? id[0] : id) ?? "";
+	});
+	const externalHooks = require_useExternalHooks.useExternalHooks();
+	const i18n = (0, __n8n_i18n.useI18n)();
+	function causedByCredential(message) {
+		if (!message || typeof message !== "string") return false;
+		return message.includes("Credentials for") && message.includes("are not set");
+	}
+	function showMessage(messageData, track = true) {
+		const notify = resolveNotify();
+		const messageDefaults = {
+			dangerouslyUseHTMLString: true,
+			position: "bottom-right",
+			zIndex: __n8n_frontend_constants_z_indexes.APP_Z_INDEXES.TOASTS,
+			appendTo: "#n8n-app",
+			customClass: "content-toast"
+		};
+		const { message, title } = messageData;
+		const params = {
+			...messageDefaults,
+			...messageData
+		};
+		if (typeof message === "string") params.message = (0, __n8n_frontend_utils_htmlUtils.sanitizeHtml)(message);
+		if (typeof title === "string") params.title = (0, __n8n_frontend_utils_htmlUtils.sanitizeHtml)(title);
+		const notification = notify(params);
+		if (!notification) return noopHandle;
+		if (params.duration === 0) stickyNotificationQueue.push(notification);
+		if (params.type === "error" && track) {
+			let messageForTelemetry;
+			if (typeof params.message === "string") messageForTelemetry = params.message;
+			else if (params.message && typeof params.message === "object" && "props" in params.message && params.message.props) {
+				const props = params.message.props;
+				const hasErrorMessage = typeof props === "object" && props !== null && "errorMessage" in props;
+				const hasMessage = typeof props === "object" && props !== null && "message" in props;
+				if (hasErrorMessage) messageForTelemetry = String(props.errorMessage);
+				else if (hasMessage) messageForTelemetry = String(props.message);
+				else messageForTelemetry = "Unknown error";
+			} else messageForTelemetry = "Unknown error";
+			telemetry.track("Instance FE emitted error", {
+				error_title: params.title,
+				error_message: messageForTelemetry,
+				caused_by_credential: causedByCredential(messageForTelemetry),
+				workflow_id: workflowId.value
+			});
+		}
+		return notification;
+	}
+	function showToast(config) {
+		let notification;
+		if (config.closeOnClick) {
+			const originalOnClick = config.onClick;
+			config.onClick = () => {
+				if (notification) notification.close();
+				if (originalOnClick) originalOnClick();
+			};
+		}
+		notification = showMessage({
+			title: config.title,
+			message: config.message,
+			onClick: config.onClick,
+			onClose: config.onClose,
+			duration: config.duration,
+			customClass: config.customClass,
+			type: config.type
+		});
+		return notification;
+	}
+	function collapsableDetails(description) {
+		const errorDescription = description.length > 500 ? `${description.slice(0, 500)}...` : description;
+		return `
+				<br>
+				<br>
+				<details>
+					<summary
+						style="color: #ff6d5a; font-weight: bold; cursor: pointer;"
+					>
+						${i18n.baseText("showMessage.showDetails")}
+					</summary>
+					<p>${errorDescription}</p>
+				</details>
+			`;
+	}
+	function showError(e, title, options) {
+		const error = e;
+		const message = options?.message;
+		const description = options?.description ?? error.description;
+		showMessage({
+			title,
+			message: `
+					${message ? `${message}<br/>` : ""}
+					<i>${error.message}</i>
+					${description ? collapsableDetails(description) : ""}`,
+			type: "error",
+			duration: 0
+		}, false);
+		externalHooks.run("showMessage.showError", {
+			title,
+			message,
+			errorMessage: error.message
+		});
+		telemetry.track("Instance FE emitted error", {
+			error_title: title,
+			error_description: message,
+			error_message: error.message,
+			caused_by_credential: causedByCredential(error.message),
+			workflow_id: workflowId.value
+		});
+	}
+	function clearAllStickyNotifications() {
+		stickyNotificationQueue.forEach((notification) => {
+			if (notification) notification.close();
+		});
+		stickyNotificationQueue.length = 0;
+	}
+	return {
+		showMessage,
+		showToast,
+		showError,
+		clearAllStickyNotifications
+	};
+}
+
+//#endregion
+exports.setNotify = setNotify;
+exports.useToast = useToast;
+//# sourceMappingURL=useToast.cjs.map

package/dist/useToast.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.cjs","names":["registeredNotify: NotifyFn | undefined","noopHandle: NotificationHandle","noopNotify: NotifyFn","stickyNotificationQueue: NotificationHandle[]","useTelemetry","VIEWS","useExternalHooks","messageDefaults: Partial<Omit<NotificationOptions, 'message'>>","APP_Z_INDEXES","messageForTelemetry: string","notification: NotificationHandle"],"sources":["../src/useToast.ts"],"sourcesContent":["import { VIEWS } from '@n8n/frontend-constants/views';\nimport { APP_Z_INDEXES } from '@n8n/frontend-constants/z-indexes';\nimport { sanitizeHtml } from '@n8n/frontend-utils/htmlUtils';\nimport { useI18n } from '@n8n/i18n';\nimport { computed } from 'vue';\nimport { useRoute } from 'vue-router';\n\nimport type { NotificationOptions, NotificationType } from './types/notification';\nimport { useExternalHooks } from './useExternalHooks';\nimport { useTelemetry } from './useTelemetry';\n\nexport type {\n\tNotificationOptions,\n\tNotificationPosition,\n\tNotificationType,\n} from './types/notification';\n\n/**\n * Handle returned by the notification function. Declared locally so the DTS\n * build stays free of the full element-plus type graph.\n */\nexport interface NotificationHandle {\n\tclose: () => void;\n}\n\n/**\n * Notification function contract — the app's wrapper around `ElNotification`.\n * Registered at bootstrap via {@link setNotify}; this package owns only the\n * contract.\n *\n * Returning `undefined` means the app declined to show this notification — today\n * that is notification suppression, which lives at the registration site rather\n * than here. `showMessage` treats it as \"dropped\": no sticky-queue\n * entry, no error telemetry, and a no-op handle to the caller.\n */\ntype NotifyFn = (options: Record<string, unknown>) => NotificationHandle | undefined;\n\nlet registeredNotify: NotifyFn | undefined;\n\n/**\n * Register the notification function. Called once at bootstrap by\n * `editor-ui` (passing a suppression-aware wrapper around `ElNotification`) so\n * `useToast` can issue notifications without importing element-plus directly —\n * keeping the DTS build lightweight.\n *\n * This is the *only* toast dependency the app registers. Whether a notification\n * is actually shown is the notifier's decision, so if you are chasing a toast\n * that never appeared, look at the registration site, not here.\n */\nexport function setNotify(fn: NotifyFn): void {\n\tregisteredNotify = fn;\n}\n\nconst noopHandle: NotificationHandle = { close() {} };\nconst noopNotify: NotifyFn = () => noopHandle;\n\nlet warnedAboutMissingNotify = false;\n\nfunction resolveNotify(): NotifyFn {\n\tif (registeredNotify) return registeredNotify;\n\n\t// Falling back means bootstrap never registered. The toast is dropped rather\n\t// than shown, so warn once in dev instead of failing silent.\n\tif (import.meta.env.DEV && !warnedAboutMissingNotify) {\n\t\twarnedAboutMissingNotify = true;\n\t\tconsole.warn(\n\t\t\t'[useToast] No notification function registered; toasts will not render. Call setNotify() at app bootstrap.',\n\t\t);\n\t}\n\treturn noopNotify;\n}\n\nconst stickyNotificationQueue: NotificationHandle[] = [];\n\nexport function useToast() {\n\tconst telemetry = useTelemetry();\n\tconst route = useRoute();\n\tconst workflowId = computed(() => {\n\t\tif (route?.name === VIEWS.DEMO || route?.name === VIEWS.DEMO_DIFF) return 'demo';\n\t\tconst id = route?.params?.workflowId;\n\t\treturn (Array.isArray(id) ? id[0] : id) ?? '';\n\t});\n\tconst externalHooks = useExternalHooks();\n\tconst i18n = useI18n();\n\n\tfunction causedByCredential(message: string | undefined) {\n\t\tif (!message || typeof message !== 'string') return false;\n\n\t\treturn message.includes('Credentials for') && message.includes('are not set');\n\t}\n\n\tfunction showMessage(messageData: Partial<NotificationOptions>, track = true) {\n\t\t// Resolved per call, not once per `useToast()`: a composable captured before\n\t\t// bootstrap registers would otherwise stay bound to the no-op for its whole\n\t\t// lifetime, silently dropping toasts.\n\t\tconst notify = resolveNotify();\n\n\t\tconst messageDefaults: Partial<Omit<NotificationOptions, 'message'>> = {\n\t\t\tdangerouslyUseHTMLString: true,\n\t\t\tposition: 'bottom-right',\n\t\t\t// Layer above NDV and modal overlays, sourced from the shared scale.\n\t\t\tzIndex: APP_Z_INDEXES.TOASTS,\n\t\t\tappendTo: '#n8n-app',\n\t\t\tcustomClass: 'content-toast',\n\t\t};\n\t\tconst { message, title } = messageData;\n\t\tconst params = { ...messageDefaults, ...messageData };\n\n\t\tif (typeof message === 'string') {\n\t\t\tparams.message = sanitizeHtml(message);\n\t\t}\n\n\t\tif (typeof title === 'string') {\n\t\t\tparams.title = sanitizeHtml(title);\n\t\t}\n\n\t\tconst notification = notify(params as unknown as Record<string, unknown>);\n\n\t\t// The app declined to show it (suppression). Return before the sticky queue\n\t\t// and before error telemetry, so a dropped toast leaves no trace — exactly\n\t\t// what the removed in-package suppression branch did.\n\t\tif (!notification) return noopHandle;\n\n\t\tif (params.duration === 0) {\n\t\t\tstickyNotificationQueue.push(notification);\n\t\t}\n\n\t\tif (params.type === 'error' && track) {\n\t\t\t// Extract string message for telemetry - don't send VNode objects as they have circular refs\n\t\t\tlet messageForTelemetry: string;\n\t\t\tif (typeof params.message === 'string') {\n\t\t\t\tmessageForTelemetry = params.message;\n\t\t\t} else if (\n\t\t\t\tparams.message &&\n\t\t\t\ttypeof params.message === 'object' &&\n\t\t\t\t'props' in params.message &&\n\t\t\t\tparams.message.props\n\t\t\t) {\n\t\t\t\t// Extract error message from VNode props (e.g., NodeExecutionErrorMessage component)\n\t\t\t\tconst props = params.message.props;\n\t\t\t\tconst hasErrorMessage =\n\t\t\t\t\ttypeof props === 'object' && props !== null && 'errorMessage' in props;\n\t\t\t\tconst hasMessage = typeof props === 'object' && props !== null && 'message' in props;\n\n\t\t\t\tif (hasErrorMessage) {\n\t\t\t\t\tmessageForTelemetry = String(props.errorMessage);\n\t\t\t\t} else if (hasMessage) {\n\t\t\t\t\tmessageForTelemetry = String(props.message);\n\t\t\t\t} else {\n\t\t\t\t\tmessageForTelemetry = 'Unknown error';\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tmessageForTelemetry = 'Unknown error';\n\t\t\t}\n\n\t\t\ttelemetry.track('Instance FE emitted error', {\n\t\t\t\terror_title: params.title,\n\t\t\t\terror_message: messageForTelemetry,\n\t\t\t\tcaused_by_credential: causedByCredential(messageForTelemetry),\n\t\t\t\tworkflow_id: workflowId.value,\n\t\t\t});\n\t\t}\n\n\t\treturn notification;\n\t}\n\n\tfunction showToast(config: {\n\t\ttitle: string;\n\t\tmessage: NotificationOptions['message'];\n\t\tonClick?: (event?: MouseEvent) => void;\n\t\tonClose?: () => void;\n\t\tduration?: number;\n\t\tcustomClass?: string;\n\t\tcloseOnClick?: boolean;\n\t\ttype?: NotificationType;\n\t}) {\n\t\t// eslint-disable-next-line prefer-const\n\t\tlet notification: NotificationHandle;\n\t\tif (config.closeOnClick) {\n\t\t\tconst originalOnClick = config.onClick;\n\t\t\tconfig.onClick = () => {\n\t\t\t\tif (notification) {\n\t\t\t\t\tnotification.close();\n\t\t\t\t}\n\n\t\t\t\tif (originalOnClick) {\n\t\t\t\t\toriginalOnClick();\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\n\t\tnotification = showMessage({\n\t\t\ttitle: config.title,\n\t\t\tmessage: config.message,\n\t\t\tonClick: config.onClick,\n\t\t\tonClose: config.onClose,\n\t\t\tduration: config.duration,\n\t\t\tcustomClass: config.customClass,\n\t\t\ttype: config.type,\n\t\t});\n\n\t\treturn notification;\n\t}\n\n\tfunction collapsableDetails(description: string) {\n\t\tconst errorDescription =\n\t\t\tdescription.length > 500 ? `${description.slice(0, 500)}...` : description;\n\n\t\treturn `\n\t\t\t\t<br>\n\t\t\t\t<br>\n\t\t\t\t<details>\n\t\t\t\t\t<summary\n\t\t\t\t\t\tstyle=\"color: #ff6d5a; font-weight: bold; cursor: pointer;\"\n\t\t\t\t\t>\n\t\t\t\t\t\t${i18n.baseText('showMessage.showDetails')}\n\t\t\t\t\t</summary>\n\t\t\t\t\t<p>${errorDescription}</p>\n\t\t\t\t</details>\n\t\t\t`;\n\t}\n\n\tfunction showError(\n\t\te: unknown,\n\t\ttitle: string,\n\t\toptions?: { message?: string; description?: string },\n\t) {\n\t\tconst error = e as Error & { description?: string };\n\t\tconst message = options?.message;\n\t\tconst description = options?.description ?? error.description;\n\t\tconst messageLine = message ? `${message}<br/>` : '';\n\t\tshowMessage(\n\t\t\t{\n\t\t\t\ttitle,\n\t\t\t\tmessage: `\n\t\t\t\t\t${messageLine}\n\t\t\t\t\t<i>${error.message}</i>\n\t\t\t\t\t${description ? collapsableDetails(description) : ''}`,\n\t\t\t\ttype: 'error',\n\t\t\t\tduration: 0,\n\t\t\t},\n\t\t\tfalse,\n\t\t);\n\n\t\tvoid externalHooks.run('showMessage.showError', {\n\t\t\ttitle,\n\t\t\tmessage,\n\t\t\terrorMessage: error.message,\n\t\t});\n\n\t\ttelemetry.track('Instance FE emitted error', {\n\t\t\terror_title: title,\n\t\t\terror_description: message,\n\t\t\terror_message: error.message,\n\t\t\tcaused_by_credential: causedByCredential(error.message),\n\t\t\tworkflow_id: workflowId.value,\n\t\t});\n\t}\n\n\tfunction clearAllStickyNotifications() {\n\t\tstickyNotificationQueue.forEach((notification) => {\n\t\t\tif (notification) {\n\t\t\t\tnotification.close();\n\t\t\t}\n\t\t});\n\n\t\tstickyNotificationQueue.length = 0;\n\t}\n\n\treturn {\n\t\tshowMessage,\n\t\tshowToast,\n\t\tshowError,\n\t\tclearAllStickyNotifications,\n\t};\n}\n"],"mappings":"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"}

package/dist/useToast.d.cts

@@ -0,0 +1,29 @@
+import { n as NotificationPosition, r as NotificationType, t as NotificationOptions } from "./notification.cjs";
+
+//#region src/useToast.d.ts
+interface NotificationHandle {
+  close: () => void;
+}
+type NotifyFn = (options: Record<string, unknown>) => NotificationHandle | undefined;
+declare function setNotify(fn: NotifyFn): void;
+declare function useToast(): {
+  showMessage: (messageData: Partial<NotificationOptions>, track?: boolean) => NotificationHandle;
+  showToast: (config: {
+    title: string;
+    message: NotificationOptions["message"];
+    onClick?: (event?: MouseEvent) => void;
+    onClose?: () => void;
+    duration?: number;
+    customClass?: string;
+    closeOnClick?: boolean;
+    type?: NotificationType;
+  }) => NotificationHandle;
+  showError: (e: unknown, title: string, options?: {
+    message?: string;
+    description?: string;
+  }) => void;
+  clearAllStickyNotifications: () => void;
+};
+//#endregion
+export { NotificationHandle, type NotificationOptions, type NotificationPosition, type NotificationType, setNotify, useToast };
+//# sourceMappingURL=useToast.d.cts.map

package/dist/useToast.d.mts

@@ -0,0 +1,29 @@
+import { n as NotificationPosition, r as NotificationType, t as NotificationOptions } from "./notification.mjs";
+
+//#region src/useToast.d.ts
+interface NotificationHandle {
+  close: () => void;
+}
+type NotifyFn = (options: Record<string, unknown>) => NotificationHandle | undefined;
+declare function setNotify(fn: NotifyFn): void;
+declare function useToast(): {
+  showMessage: (messageData: Partial<NotificationOptions>, track?: boolean) => NotificationHandle;
+  showToast: (config: {
+    title: string;
+    message: NotificationOptions["message"];
+    onClick?: (event?: MouseEvent) => void;
+    onClose?: () => void;
+    duration?: number;
+    customClass?: string;
+    closeOnClick?: boolean;
+    type?: NotificationType;
+  }) => NotificationHandle;
+  showError: (e: unknown, title: string, options?: {
+    message?: string;
+    description?: string;
+  }) => void;
+  clearAllStickyNotifications: () => void;
+};
+//#endregion
+export { NotificationHandle, type NotificationOptions, type NotificationPosition, type NotificationType, setNotify, useToast };
+//# sourceMappingURL=useToast.d.mts.map

package/dist/useToast.mjs

@@ -0,0 +1,168 @@
+import { r as useExternalHooks } from "./useExternalHooks2.mjs";
+import "./telemetryRegistry.mjs";
+import { t as useTelemetry } from "./useTelemetry2.mjs";
+import { computed } from "vue";
+import { APP_Z_INDEXES } from "@n8n/frontend-constants/z-indexes";
+import { VIEWS } from "@n8n/frontend-constants/views";
+import { sanitizeHtml } from "@n8n/frontend-utils/htmlUtils";
+import { useI18n } from "@n8n/i18n";
+import { useRoute } from "vue-router";
+
+//#region src/useToast.ts
+let registeredNotify;
+/**
+* Register the notification function. Called once at bootstrap by
+* `editor-ui` (passing a suppression-aware wrapper around `ElNotification`) so
+* `useToast` can issue notifications without importing element-plus directly —
+* keeping the DTS build lightweight.
+*
+* This is the *only* toast dependency the app registers. Whether a notification
+* is actually shown is the notifier's decision, so if you are chasing a toast
+* that never appeared, look at the registration site, not here.
+*/
+function setNotify(fn) {
+	registeredNotify = fn;
+}
+const noopHandle = { close() {} };
+const noopNotify = () => noopHandle;
+let warnedAboutMissingNotify = false;
+function resolveNotify() {
+	if (registeredNotify) return registeredNotify;
+	if (import.meta.env.DEV && !warnedAboutMissingNotify) {
+		warnedAboutMissingNotify = true;
+		console.warn("[useToast] No notification function registered; toasts will not render. Call setNotify() at app bootstrap.");
+	}
+	return noopNotify;
+}
+const stickyNotificationQueue = [];
+function useToast() {
+	const telemetry = useTelemetry();
+	const route = useRoute();
+	const workflowId = computed(() => {
+		if (route?.name === VIEWS.DEMO || route?.name === VIEWS.DEMO_DIFF) return "demo";
+		const id = route?.params?.workflowId;
+		return (Array.isArray(id) ? id[0] : id) ?? "";
+	});
+	const externalHooks = useExternalHooks();
+	const i18n = useI18n();
+	function causedByCredential(message) {
+		if (!message || typeof message !== "string") return false;
+		return message.includes("Credentials for") && message.includes("are not set");
+	}
+	function showMessage(messageData, track = true) {
+		const notify = resolveNotify();
+		const messageDefaults = {
+			dangerouslyUseHTMLString: true,
+			position: "bottom-right",
+			zIndex: APP_Z_INDEXES.TOASTS,
+			appendTo: "#n8n-app",
+			customClass: "content-toast"
+		};
+		const { message, title } = messageData;
+		const params = {
+			...messageDefaults,
+			...messageData
+		};
+		if (typeof message === "string") params.message = sanitizeHtml(message);
+		if (typeof title === "string") params.title = sanitizeHtml(title);
+		const notification = notify(params);
+		if (!notification) return noopHandle;
+		if (params.duration === 0) stickyNotificationQueue.push(notification);
+		if (params.type === "error" && track) {
+			let messageForTelemetry;
+			if (typeof params.message === "string") messageForTelemetry = params.message;
+			else if (params.message && typeof params.message === "object" && "props" in params.message && params.message.props) {
+				const props = params.message.props;
+				const hasErrorMessage = typeof props === "object" && props !== null && "errorMessage" in props;
+				const hasMessage = typeof props === "object" && props !== null && "message" in props;
+				if (hasErrorMessage) messageForTelemetry = String(props.errorMessage);
+				else if (hasMessage) messageForTelemetry = String(props.message);
+				else messageForTelemetry = "Unknown error";
+			} else messageForTelemetry = "Unknown error";
+			telemetry.track("Instance FE emitted error", {
+				error_title: params.title,
+				error_message: messageForTelemetry,
+				caused_by_credential: causedByCredential(messageForTelemetry),
+				workflow_id: workflowId.value
+			});
+		}
+		return notification;
+	}
+	function showToast(config) {
+		let notification;
+		if (config.closeOnClick) {
+			const originalOnClick = config.onClick;
+			config.onClick = () => {
+				if (notification) notification.close();
+				if (originalOnClick) originalOnClick();
+			};
+		}
+		notification = showMessage({
+			title: config.title,
+			message: config.message,
+			onClick: config.onClick,
+			onClose: config.onClose,
+			duration: config.duration,
+			customClass: config.customClass,
+			type: config.type
+		});
+		return notification;
+	}
+	function collapsableDetails(description) {
+		const errorDescription = description.length > 500 ? `${description.slice(0, 500)}...` : description;
+		return `
+				<br>
+				<br>
+				<details>
+					<summary
+						style="color: #ff6d5a; font-weight: bold; cursor: pointer;"
+					>
+						${i18n.baseText("showMessage.showDetails")}
+					</summary>
+					<p>${errorDescription}</p>
+				</details>
+			`;
+	}
+	function showError(e, title, options) {
+		const error = e;
+		const message = options?.message;
+		const description = options?.description ?? error.description;
+		showMessage({
+			title,
+			message: `
+					${message ? `${message}<br/>` : ""}
+					<i>${error.message}</i>
+					${description ? collapsableDetails(description) : ""}`,
+			type: "error",
+			duration: 0
+		}, false);
+		externalHooks.run("showMessage.showError", {
+			title,
+			message,
+			errorMessage: error.message
+		});
+		telemetry.track("Instance FE emitted error", {
+			error_title: title,
+			error_description: message,
+			error_message: error.message,
+			caused_by_credential: causedByCredential(error.message),
+			workflow_id: workflowId.value
+		});
+	}
+	function clearAllStickyNotifications() {
+		stickyNotificationQueue.forEach((notification) => {
+			if (notification) notification.close();
+		});
+		stickyNotificationQueue.length = 0;
+	}
+	return {
+		showMessage,
+		showToast,
+		showError,
+		clearAllStickyNotifications
+	};
+}
+
+//#endregion
+export { setNotify, useToast };
+//# sourceMappingURL=useToast.mjs.map

package/dist/useToast.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.mjs","names":["registeredNotify: NotifyFn | undefined","noopHandle: NotificationHandle","noopNotify: NotifyFn","stickyNotificationQueue: NotificationHandle[]","messageDefaults: Partial<Omit<NotificationOptions, 'message'>>","messageForTelemetry: string","notification: NotificationHandle"],"sources":["../src/useToast.ts"],"sourcesContent":["import { VIEWS } from '@n8n/frontend-constants/views';\nimport { APP_Z_INDEXES } from '@n8n/frontend-constants/z-indexes';\nimport { sanitizeHtml } from '@n8n/frontend-utils/htmlUtils';\nimport { useI18n } from '@n8n/i18n';\nimport { computed } from 'vue';\nimport { useRoute } from 'vue-router';\n\nimport type { NotificationOptions, NotificationType } from './types/notification';\nimport { useExternalHooks } from './useExternalHooks';\nimport { useTelemetry } from './useTelemetry';\n\nexport type {\n\tNotificationOptions,\n\tNotificationPosition,\n\tNotificationType,\n} from './types/notification';\n\n/**\n * Handle returned by the notification function. Declared locally so the DTS\n * build stays free of the full element-plus type graph.\n */\nexport interface NotificationHandle {\n\tclose: () => void;\n}\n\n/**\n * Notification function contract — the app's wrapper around `ElNotification`.\n * Registered at bootstrap via {@link setNotify}; this package owns only the\n * contract.\n *\n * Returning `undefined` means the app declined to show this notification — today\n * that is notification suppression, which lives at the registration site rather\n * than here. `showMessage` treats it as \"dropped\": no sticky-queue\n * entry, no error telemetry, and a no-op handle to the caller.\n */\ntype NotifyFn = (options: Record<string, unknown>) => NotificationHandle | undefined;\n\nlet registeredNotify: NotifyFn | undefined;\n\n/**\n * Register the notification function. Called once at bootstrap by\n * `editor-ui` (passing a suppression-aware wrapper around `ElNotification`) so\n * `useToast` can issue notifications without importing element-plus directly —\n * keeping the DTS build lightweight.\n *\n * This is the *only* toast dependency the app registers. Whether a notification\n * is actually shown is the notifier's decision, so if you are chasing a toast\n * that never appeared, look at the registration site, not here.\n */\nexport function setNotify(fn: NotifyFn): void {\n\tregisteredNotify = fn;\n}\n\nconst noopHandle: NotificationHandle = { close() {} };\nconst noopNotify: NotifyFn = () => noopHandle;\n\nlet warnedAboutMissingNotify = false;\n\nfunction resolveNotify(): NotifyFn {\n\tif (registeredNotify) return registeredNotify;\n\n\t// Falling back means bootstrap never registered. The toast is dropped rather\n\t// than shown, so warn once in dev instead of failing silent.\n\tif (import.meta.env.DEV && !warnedAboutMissingNotify) {\n\t\twarnedAboutMissingNotify = true;\n\t\tconsole.warn(\n\t\t\t'[useToast] No notification function registered; toasts will not render. Call setNotify() at app bootstrap.',\n\t\t);\n\t}\n\treturn noopNotify;\n}\n\nconst stickyNotificationQueue: NotificationHandle[] = [];\n\nexport function useToast() {\n\tconst telemetry = useTelemetry();\n\tconst route = useRoute();\n\tconst workflowId = computed(() => {\n\t\tif (route?.name === VIEWS.DEMO || route?.name === VIEWS.DEMO_DIFF) return 'demo';\n\t\tconst id = route?.params?.workflowId;\n\t\treturn (Array.isArray(id) ? id[0] : id) ?? '';\n\t});\n\tconst externalHooks = useExternalHooks();\n\tconst i18n = useI18n();\n\n\tfunction causedByCredential(message: string | undefined) {\n\t\tif (!message || typeof message !== 'string') return false;\n\n\t\treturn message.includes('Credentials for') && message.includes('are not set');\n\t}\n\n\tfunction showMessage(messageData: Partial<NotificationOptions>, track = true) {\n\t\t// Resolved per call, not once per `useToast()`: a composable captured before\n\t\t// bootstrap registers would otherwise stay bound to the no-op for its whole\n\t\t// lifetime, silently dropping toasts.\n\t\tconst notify = resolveNotify();\n\n\t\tconst messageDefaults: Partial<Omit<NotificationOptions, 'message'>> = {\n\t\t\tdangerouslyUseHTMLString: true,\n\t\t\tposition: 'bottom-right',\n\t\t\t// Layer above NDV and modal overlays, sourced from the shared scale.\n\t\t\tzIndex: APP_Z_INDEXES.TOASTS,\n\t\t\tappendTo: '#n8n-app',\n\t\t\tcustomClass: 'content-toast',\n\t\t};\n\t\tconst { message, title } = messageData;\n\t\tconst params = { ...messageDefaults, ...messageData };\n\n\t\tif (typeof message === 'string') {\n\t\t\tparams.message = sanitizeHtml(message);\n\t\t}\n\n\t\tif (typeof title === 'string') {\n\t\t\tparams.title = sanitizeHtml(title);\n\t\t}\n\n\t\tconst notification = notify(params as unknown as Record<string, unknown>);\n\n\t\t// The app declined to show it (suppression). Return before the sticky queue\n\t\t// and before error telemetry, so a dropped toast leaves no trace — exactly\n\t\t// what the removed in-package suppression branch did.\n\t\tif (!notification) return noopHandle;\n\n\t\tif (params.duration === 0) {\n\t\t\tstickyNotificationQueue.push(notification);\n\t\t}\n\n\t\tif (params.type === 'error' && track) {\n\t\t\t// Extract string message for telemetry - don't send VNode objects as they have circular refs\n\t\t\tlet messageForTelemetry: string;\n\t\t\tif (typeof params.message === 'string') {\n\t\t\t\tmessageForTelemetry = params.message;\n\t\t\t} else if (\n\t\t\t\tparams.message &&\n\t\t\t\ttypeof params.message === 'object' &&\n\t\t\t\t'props' in params.message &&\n\t\t\t\tparams.message.props\n\t\t\t) {\n\t\t\t\t// Extract error message from VNode props (e.g., NodeExecutionErrorMessage component)\n\t\t\t\tconst props = params.message.props;\n\t\t\t\tconst hasErrorMessage =\n\t\t\t\t\ttypeof props === 'object' && props !== null && 'errorMessage' in props;\n\t\t\t\tconst hasMessage = typeof props === 'object' && props !== null && 'message' in props;\n\n\t\t\t\tif (hasErrorMessage) {\n\t\t\t\t\tmessageForTelemetry = String(props.errorMessage);\n\t\t\t\t} else if (hasMessage) {\n\t\t\t\t\tmessageForTelemetry = String(props.message);\n\t\t\t\t} else {\n\t\t\t\t\tmessageForTelemetry = 'Unknown error';\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tmessageForTelemetry = 'Unknown error';\n\t\t\t}\n\n\t\t\ttelemetry.track('Instance FE emitted error', {\n\t\t\t\terror_title: params.title,\n\t\t\t\terror_message: messageForTelemetry,\n\t\t\t\tcaused_by_credential: causedByCredential(messageForTelemetry),\n\t\t\t\tworkflow_id: workflowId.value,\n\t\t\t});\n\t\t}\n\n\t\treturn notification;\n\t}\n\n\tfunction showToast(config: {\n\t\ttitle: string;\n\t\tmessage: NotificationOptions['message'];\n\t\tonClick?: (event?: MouseEvent) => void;\n\t\tonClose?: () => void;\n\t\tduration?: number;\n\t\tcustomClass?: string;\n\t\tcloseOnClick?: boolean;\n\t\ttype?: NotificationType;\n\t}) {\n\t\t// eslint-disable-next-line prefer-const\n\t\tlet notification: NotificationHandle;\n\t\tif (config.closeOnClick) {\n\t\t\tconst originalOnClick = config.onClick;\n\t\t\tconfig.onClick = () => {\n\t\t\t\tif (notification) {\n\t\t\t\t\tnotification.close();\n\t\t\t\t}\n\n\t\t\t\tif (originalOnClick) {\n\t\t\t\t\toriginalOnClick();\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\n\t\tnotification = showMessage({\n\t\t\ttitle: config.title,\n\t\t\tmessage: config.message,\n\t\t\tonClick: config.onClick,\n\t\t\tonClose: config.onClose,\n\t\t\tduration: config.duration,\n\t\t\tcustomClass: config.customClass,\n\t\t\ttype: config.type,\n\t\t});\n\n\t\treturn notification;\n\t}\n\n\tfunction collapsableDetails(description: string) {\n\t\tconst errorDescription =\n\t\t\tdescription.length > 500 ? `${description.slice(0, 500)}...` : description;\n\n\t\treturn `\n\t\t\t\t<br>\n\t\t\t\t<br>\n\t\t\t\t<details>\n\t\t\t\t\t<summary\n\t\t\t\t\t\tstyle=\"color: #ff6d5a; font-weight: bold; cursor: pointer;\"\n\t\t\t\t\t>\n\t\t\t\t\t\t${i18n.baseText('showMessage.showDetails')}\n\t\t\t\t\t</summary>\n\t\t\t\t\t<p>${errorDescription}</p>\n\t\t\t\t</details>\n\t\t\t`;\n\t}\n\n\tfunction showError(\n\t\te: unknown,\n\t\ttitle: string,\n\t\toptions?: { message?: string; description?: string },\n\t) {\n\t\tconst error = e as Error & { description?: string };\n\t\tconst message = options?.message;\n\t\tconst description = options?.description ?? error.description;\n\t\tconst messageLine = message ? `${message}<br/>` : '';\n\t\tshowMessage(\n\t\t\t{\n\t\t\t\ttitle,\n\t\t\t\tmessage: `\n\t\t\t\t\t${messageLine}\n\t\t\t\t\t<i>${error.message}</i>\n\t\t\t\t\t${description ? collapsableDetails(description) : ''}`,\n\t\t\t\ttype: 'error',\n\t\t\t\tduration: 0,\n\t\t\t},\n\t\t\tfalse,\n\t\t);\n\n\t\tvoid externalHooks.run('showMessage.showError', {\n\t\t\ttitle,\n\t\t\tmessage,\n\t\t\terrorMessage: error.message,\n\t\t});\n\n\t\ttelemetry.track('Instance FE emitted error', {\n\t\t\terror_title: title,\n\t\t\terror_description: message,\n\t\t\terror_message: error.message,\n\t\t\tcaused_by_credential: causedByCredential(error.message),\n\t\t\tworkflow_id: workflowId.value,\n\t\t});\n\t}\n\n\tfunction clearAllStickyNotifications() {\n\t\tstickyNotificationQueue.forEach((notification) => {\n\t\t\tif (notification) {\n\t\t\t\tnotification.close();\n\t\t\t}\n\t\t});\n\n\t\tstickyNotificationQueue.length = 0;\n\t}\n\n\treturn {\n\t\tshowMessage,\n\t\tshowToast,\n\t\tshowError,\n\t\tclearAllStickyNotifications,\n\t};\n}\n"],"mappings":"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"}