@revvue/embed 0.0.0-beta.3 → 0.0.0-beta.5

package/dist/package/package.cjs

@@ -3,6 +3,51 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var tenantId = (id) => id;
 var formId = (id) => id;
 var embedId = (id) => id;
+var integrationProfileId = (id) => id;
+//#endregion
+//#region src/utils/create-env.ts
+function createEnv(schema, source = {}) {
+	const result = {};
+	for (const key in schema) {
+		const field = schema[key];
+		const raw = source[key];
+		if (raw !== void 0) result[key] = field.parse ? field.parse(raw) : raw;
+		else if (field.default !== void 0) result[key] = field.default;
+		else if (field.required) throw new Error(`[embed] Missing required env variable: ${key}`);
+	}
+	return result;
+}
+//#endregion
+//#region src/config/env.ts
+var removeTrailingSlash = (url) => url.replace(/\/$/, "");
+var env = createEnv({
+	CHAT_URL: {
+		default: "https://app.revvue.ai/chat",
+		parse: removeTrailingSlash
+	},
+	FORM_URL: {
+		default: "https://app.revvue.ai/survey",
+		parse: removeTrailingSlash
+	},
+	CDN_URL: {
+		default: "https://cdn.revvue.ai/v1",
+		parse: removeTrailingSlash
+	},
+	EMBED_LOOKUP_URL: {
+		default: "https://app.revvue.ai/api/v1/embeds",
+		parse: removeTrailingSlash
+	},
+	DEBUG: {
+		default: false,
+		parse: (v) => v === "true"
+	}
+}, {
+	"BASE_URL": "/",
+	"DEV": false,
+	"MODE": "production",
+	"PROD": true,
+	"SSR": false
+});
 //#endregion
 //#region src/utils/refresh-iframe.ts
 function refreshIframe(iframe) {
@@ -17,12 +62,21 @@ function refreshIframe(iframe) {
 	}
 }
 //#endregion
+//#region src/core/iframe-messages.ts
+var IFRAME_MESSAGES = {
+	close: "rvv-embed-close",
+	focus: "rvv-embed-focus"
+};
+//#endregion
 //#region src/core/create-iframe.ts
-function getIframeSrc() {
-	return "http://localhost:5173/";
+function getIframeSrc(options) {
+	const base = options.app === "chat" ? env.CHAT_URL : env.FORM_URL;
+	const params = new URLSearchParams({ tenant_id: options.tenantId });
+	if (options.app === "chat") params.set("integration_profile_id", options.integrationProfileId);
+	return `${base}?${params}`;
 }
-function createIframe(_options) {
-	const src = getIframeSrc();
+function createIframe(options) {
+	const src = getIframeSrc(options);
 	const embedId = crypto.randomUUID();
 	const iframe = document.createElement("iframe");
 	iframe.src = src;
@@ -32,13 +86,52 @@ function createIframe(_options) {
 	iframe.id = embedId;
 	const refresh = () => refreshIframe(iframe);
 	const focus = () => {
-		iframe.contentWindow?.postMessage("rvv-embed-focus", "*");
+		iframe.contentWindow?.postMessage(IFRAME_MESSAGES.focus, "*");
+	};
+	const onMessage = (handler) => {
+		const listener = (event) => {
+			if (event.source !== iframe.contentWindow) return;
+			handler(event.data);
+		};
+		window.addEventListener("message", listener);
+		return () => window.removeEventListener("message", listener);
 	};
 	return {
 		iframe,
 		focus,
 		refresh,
-		embedId
+		embedId,
+		onMessage
+	};
+}
+//#endregion
+//#region src/utils/create-closing-guard.ts
+function createClosingGuard() {
+	let cancelClose = null;
+	function isClosing() {
+		return cancelClose !== null;
+	}
+	function scheduleClose(element, onDone) {
+		const abortController = new AbortController();
+		element.addEventListener("transitionend", () => {
+			cancelClose = null;
+			onDone();
+		}, {
+			signal: abortController.signal,
+			once: true
+		});
+		cancelClose = () => {
+			abortController.abort();
+			cancelClose = null;
+		};
+	}
+	function cancelPendingClose() {
+		cancelClose?.();
+	}
+	return {
+		isClosing,
+		scheduleClose,
+		cancelPendingClose
 	};
 }
 //#endregion
@@ -73,6 +166,26 @@ function onEscape(callback) {
 	});
 }
 //#endregion
+//#region src/utils/open-state-store/open-state-store.ts
+function createOpenStateStore(initial = false) {
+	let state = initial;
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		getState: () => state,
+		setState(next) {
+			if (state === next) return;
+			state = next;
+			for (const listener of listeners) listener();
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+}
+//#endregion
 //#region src/utils/set-element-size.ts
 var getValueWithUnits = (value) => {
 	if (typeof value === "string" && !value.match(/^[0-9]+$/)) return value;
@@ -85,6 +198,7 @@ var setElementSize = (element, { width, height }) => {
 };
 //#endregion
 //#region src/factories/create-dialog/create-dialog.ts
+var noop$3 = () => {};
 function createDialogElement() {
 	const container = document.createElement("dialog");
 	container.classList.add("rvv-dialog");
@@ -99,15 +213,18 @@ function unmountElement$2(element) {
 	element.remove();
 }
 function createDialog(options, element) {
+	const store = createOpenStateStore();
 	if (!is.browser()) return {
-		toggle: () => {},
-		open: () => {},
-		close: () => {},
-		unmount: () => {},
-		refresh: () => {},
-		focus: () => {}
+		toggle: noop$3,
+		open: noop$3,
+		close: noop$3,
+		unmount: noop$3,
+		refresh: noop$3,
+		focus: noop$3,
+		isOpen: store.getState,
+		subscribe: store.subscribe
 	};
-	const { iframe, refresh, focus } = createIframe(options);
+	const { iframe, refresh, focus, onMessage } = createIframe(options);
 	const container = element ?? document.body;
 	const dialog = createDialogElement();
 	const wrapper = createDialogWrapper();
@@ -123,21 +240,35 @@ function createDialog(options, element) {
 			onEscape(close);
 		}
 	};
+	const guard = createClosingGuard();
 	function open() {
-		if (is.open(wrapper)) return;
+		if (is.open(wrapper)) {
+			if (guard.isClosing()) {
+				guard.cancelPendingClose();
+				store.setState(true);
+				return;
+			}
+			return;
+		}
 		dialog.append(wrapper);
 		dialog.showModal();
+		store.setState(true);
 	}
 	function close() {
 		if (!is.open(wrapper)) return;
 		dialog.close();
-		unmountElement$2(wrapper);
+		guard.scheduleClose(dialog, () => unmountElement$2(wrapper));
+		store.setState(false);
 	}
 	function toggle() {
 		is.open(wrapper) ? close() : open();
 	}
+	const removeOnMessageHandler = onMessage((msg) => {
+		if (msg === IFRAME_MESSAGES.close) close();
+	});
 	function unmount() {
 		unmountElement$2(dialog);
+		removeOnMessageHandler();
 	}
 	return {
 		toggle,
@@ -145,59 +276,14 @@ function createDialog(options, element) {
 		close,
 		unmount,
 		refresh,
-		focus
-	};
-}
-//#endregion
-//#region src/utils/built-button/built-button.ts
-var defaultIcon = `
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-icon lucide-message-square"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"/></svg>`;
-var closeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;
-function buildDefaultIcons() {
-	const openEl = document.createElement("span");
-	openEl.classList.add("rvv-button-icon--open");
-	openEl.innerHTML = defaultIcon;
-	const closeEl = document.createElement("span");
-	closeEl.classList.add("rvv-button-icon--close");
-	closeEl.innerHTML = closeIcon;
-	return {
-		openEl,
-		closeEl
-	};
-}
-function buildButtonElement(options) {
-	const button = document.createElement("button");
-	button.classList.add("rvv-button", "rvv-button--trigger");
-	button.setAttribute("type", "button");
-	button.dataset.position = options.position ?? "right";
-	button.dataset.open = "false";
-	if (options.color) button.style.setProperty("--rvv-button-color", options.color);
-	if (options.textColor) button.style.setProperty("--rvv-button-text-color", options.textColor);
-	const iconWrapper = document.createElement("span");
-	iconWrapper.classList.add("rvv-button-icon");
-	iconWrapper.setAttribute("aria-hidden", "true");
-	if (options.label) {
-		const labelEl = document.createElement("span");
-		labelEl.classList.add("rvv-button-label");
-		labelEl.textContent = options.label;
-		button.append(labelEl);
-	}
-	if (options.icon) iconWrapper.innerHTML = options.icon;
-	else if (!options.label) {
-		const { openEl, closeEl } = buildDefaultIcons();
-		iconWrapper.append(openEl, closeEl);
-	}
-	if (iconWrapper.childNodes.length > 0) button.append(iconWrapper);
-	function setOpen(isOpen) {
-		button.dataset.open = String(isOpen);
-	}
-	return {
-		el: button,
-		setOpen
+		focus,
+		isOpen: store.getState,
+		subscribe: store.subscribe
 	};
 }
 //#endregion
 //#region src/factories/create-drawer/create-drawer.ts
+var noop$2 = () => {};
 function createDrawerElement() {
 	const container = document.createElement("div");
 	container.classList.add("rvv-drawer");
@@ -212,15 +298,18 @@ function unmountElement$1(element) {
 	element.remove();
 }
 function createDrawer(options, element) {
+	const store = createOpenStateStore();
 	if (!is.browser()) return {
-		toggle: () => {},
-		open: () => {},
-		close: () => {},
-		unmount: () => {},
-		refresh: () => {},
-		focus: () => {}
+		toggle: noop$2,
+		open: noop$2,
+		close: noop$2,
+		unmount: noop$2,
+		refresh: noop$2,
+		focus: noop$2,
+		isOpen: store.getState,
+		subscribe: store.subscribe
 	};
-	const { iframe, refresh, focus } = createIframe(options);
+	const { iframe, refresh, focus, onMessage } = createIframe(options);
 	const container = element ?? document.body;
 	const drawer = createDrawerElement();
 	const wrapper = createDrawerWrapper();
@@ -230,49 +319,106 @@ function createDrawer(options, element) {
 	});
 	container.append(drawer);
 	wrapper.append(iframe);
-	const { autoOpen = false, autoOpenDelay = 0 } = options;
-	let setButtonOpen = () => {};
-	const { el: buttonEl, setOpen } = buildButtonElement(options);
-	setButtonOpen = setOpen;
-	buttonEl.addEventListener("click", () => toggle());
-	document.body.append(buttonEl);
 	iframe.onload = (event) => {
 		if (event?.isTrusted) {
 			drawer.classList.add("open");
 			onEscape(close);
 		}
 	};
+	const guard = createClosingGuard();
 	function open() {
-		if (is.open(wrapper)) return;
+		if (is.open(wrapper)) {
+			if (guard.isClosing()) {
+				guard.cancelPendingClose();
+				drawer.classList.add("open");
+				store.setState(true);
+				return;
+			}
+			return;
+		}
 		drawer.append(wrapper);
-		setButtonOpen(true);
+		store.setState(true);
 	}
 	function close() {
 		if (!is.open(wrapper)) return;
-		unmountElement$1(wrapper);
 		drawer.classList.remove("open");
-		setButtonOpen(false);
+		store.setState(false);
+		guard.scheduleClose(drawer, () => unmountElement$1(wrapper));
 	}
 	function toggle() {
 		is.open(wrapper) ? close() : open();
 	}
+	const removeOnMessageHandler = onMessage((msg) => {
+		if (msg === IFRAME_MESSAGES.close) close();
+	});
 	function unmount() {
-		buttonEl?.remove();
 		unmountElement$1(drawer);
+		removeOnMessageHandler();
 	}
-	if (autoOpen) if (autoOpenDelay > 0) setTimeout(() => open(), autoOpenDelay);
-	else open();
 	return {
 		toggle,
 		open,
 		close,
 		unmount,
 		refresh,
-		focus
+		focus,
+		isOpen: store.getState,
+		subscribe: store.subscribe
+	};
+}
+//#endregion
+//#region src/utils/icons.ts
+var chatIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-icon lucide-message-square"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"/></svg>`;
+var closeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;
+//#endregion
+//#region src/utils/built-button/built-button.ts
+function buildDefaultIcons() {
+	const openEl = document.createElement("span");
+	openEl.classList.add("rvv-button-icon--open");
+	openEl.innerHTML = chatIcon;
+	const closeEl = document.createElement("span");
+	closeEl.classList.add("rvv-button-icon--close");
+	closeEl.innerHTML = closeIcon;
+	return {
+		openEl,
+		closeEl
+	};
+}
+function buildButtonElement(options) {
+	const button = document.createElement("button");
+	button.classList.add("rvv-button", "rvv-button--trigger");
+	button.setAttribute("type", "button");
+	button.dataset.position = options.position ?? "right";
+	button.dataset.open = "false";
+	if (options.color) button.style.setProperty("--rvv-button-color", options.color);
+	if (options.textColor) button.style.setProperty("--rvv-button-text-color", options.textColor);
+	const iconWrapper = document.createElement("span");
+	iconWrapper.classList.add("rvv-button-icon");
+	iconWrapper.setAttribute("aria-hidden", "true");
+	if (options.label) {
+		const labelEl = document.createElement("span");
+		labelEl.classList.add("rvv-button-label");
+		labelEl.textContent = options.label;
+		button.append(labelEl);
+	}
+	if (options.icon) iconWrapper.innerHTML = options.icon;
+	else if (!options.label) {
+		const { openEl, closeEl } = buildDefaultIcons();
+		iconWrapper.append(openEl, closeEl);
+	}
+	if (iconWrapper.childNodes.length > 0) button.append(iconWrapper);
+	function setOpen(isOpen) {
+		button.dataset.open = String(isOpen);
+	}
+	return {
+		el: button,
+		setOpen
 	};
 }
 //#endregion
 //#region src/factories/create-popover/create-popover.ts
+var noop$1 = () => {};
 function createPopoverElement() {
 	const container = document.createElement("div");
 	container.classList.add("rvv-popover");
@@ -287,15 +433,18 @@ function unmountElement(element) {
 	element.remove();
 }
 function createPopover(options, element) {
+	const store = createOpenStateStore();
 	if (!is.browser()) return {
-		toggle: () => {},
-		close: () => {},
-		open: () => {},
-		unmount: () => {},
-		refresh: () => {},
-		focus: () => {}
+		toggle: noop$1,
+		close: noop$1,
+		open: noop$1,
+		unmount: noop$1,
+		refresh: noop$1,
+		focus: noop$1,
+		isOpen: store.getState,
+		subscribe: store.subscribe
 	};
-	const { iframe, refresh, focus } = createIframe(options);
+	const { iframe, refresh, focus, onMessage } = createIframe(options);
 	const container = element ?? document.body;
 	const popover = createPopoverElement();
 	const wrapper = createPopoverWrapper();
@@ -305,12 +454,17 @@ function createPopover(options, element) {
 	});
 	container.append(popover);
 	wrapper.append(iframe);
-	const { autoOpen = false, autoOpenDelay = 0 } = options;
-	let setButtonOpen = () => {};
-	const { el: buttonEl, setOpen } = buildButtonElement(options);
-	setButtonOpen = setOpen;
-	buttonEl.addEventListener("click", () => toggle());
-	document.body.append(buttonEl);
+	const { autoOpen = false, autoOpenDelay = 0, trigger = "default" } = options;
+	let setButtonOpen = noop$1;
+	let unmountButton = noop$1;
+	if (trigger === "default") {
+		const { el: buttonEl, setOpen } = buildButtonElement(options);
+		buttonEl.classList.add("rvv-button--trigger-popover");
+		setButtonOpen = setOpen;
+		buttonEl.addEventListener("click", () => toggle());
+		document.body.append(buttonEl);
+		unmountButton = () => buttonEl.remove();
+	}
 	function toggle() {
 		is.open(wrapper) ? close() : open();
 	}
@@ -320,20 +474,35 @@ function createPopover(options, element) {
 			onEscape(close);
 		}
 	};
+	const guard = createClosingGuard();
 	function open() {
-		if (is.open(wrapper)) return;
+		if (is.open(wrapper)) {
+			if (guard.isClosing()) {
+				guard.cancelPendingClose();
+				popover.classList.add("open");
+				store.setState(true);
+				return;
+			}
+			return;
+		}
 		popover.append(wrapper);
 		setButtonOpen(true);
+		store.setState(true);
 	}
 	function close() {
 		if (!is.open(wrapper)) return;
 		popover.classList.remove("open");
 		setButtonOpen(false);
-		popover.addEventListener("transitionend", () => unmountElement(wrapper), { once: true });
+		store.setState(false);
+		guard.scheduleClose(popover, () => unmountElement(wrapper));
 	}
+	const removeOnMessageHandler = onMessage((msg) => {
+		if (msg === IFRAME_MESSAGES.close) close();
+	});
 	function unmount() {
-		buttonEl?.remove();
+		unmountButton();
 		unmountElement(popover);
+		removeOnMessageHandler();
 	}
 	if (autoOpen) if (autoOpenDelay > 0) setTimeout(() => open(), autoOpenDelay);
 	else open();
@@ -343,16 +512,19 @@ function createPopover(options, element) {
 		open,
 		unmount,
 		refresh,
-		focus
+		focus,
+		isOpen: store.getState,
+		subscribe: store.subscribe
 	};
 }
 //#endregion
 //#region src/factories/create-widget/create-widget.ts
+var noop = () => {};
 function createWidget(options, element) {
 	if (!is.browser()) return {
-		unmount: () => {},
-		refresh: () => {},
-		focus: () => {}
+		unmount: noop,
+		refresh: noop,
+		focus: noop
 	};
 	const { iframe, refresh, focus } = createIframe(options);
 	const container = element ?? document.body;
@@ -380,4 +552,5 @@ exports.createPopover = createPopover;
 exports.createWidget = createWidget;
 exports.embedId = embedId;
 exports.formId = formId;
+exports.integrationProfileId = integrationProfileId;
 exports.tenantId = tenantId;