@tellyouai/plugin 0.1.7 → 0.1.8

package/README.md

@@ -86,6 +86,30 @@ Existing script integrations remain supported:
 Query-string configuration belongs to the CDN entry. npm consumers pass all
 configuration to `initialize` directly.
 
+## Placement
+
+Position the launcher with named anchors, or supply exact CSS offsets per
+instance. The popup uses the same horizontal anchor and opens above a bottom
+launcher or below a top launcher. The popup's z-index is always one greater
+than the configured launcher z-index (8 and 9 by default).
+
+```ts
+await initialize({
+  entityId: "YOUR_ENTITY_ID",
+  position: { x: "left", y: "top", z: 123 },
+});
+
+// Exact offsets override the corresponding named axis when both are supplied.
+await initialize({
+  entityId: "YOUR_ENTITY_ID",
+  style: { top: "22rem", left: "auto", right: "12px", zIndex: 99 },
+});
+```
+
+The modal-style `overlay` and `bar` popups retain their preset layout; placement
+offsets apply to their launcher. `style.zIndex` takes precedence over
+`position.z`.
+
 ## User identity
 
 Pass the host application's stable user ID to reuse and update the same

package/dist/package/index.js

@@ -67019,26 +67019,26 @@ var rV, iV, Bpe = o((() => {
 			deleteDelay: 18,
 			betweenDelay: 120
 		}
-	}, YV = ({ type: e, isLoading: t, isOpen: n, onClickButton: r, isCustomTarget: i, quickActions: a, onClickQuickAction: o, onMessages: s, sendMessage: c, hasChatUserMessages: l, userMessages: u, onClickCall: d, callIsConnected: f, callIsConnecting: p }) => {
-		let [m, h] = (0, KV.useState)(!1), { locale: g, formatMessage: _ } = cA(), v = g.split("-")[0].trim(), { styles: { themeColors: y, openerDimensions: b, marginRight: x, marginBottom: S, transitionSpeed: C, color: w, colorBright: T, colorDark: E, backgroundColor: D, shadowOuter: O, borderColor: ee, borderRadiusLg: k } } = gA(), te = y?.[0], A = dn(te), [j, M] = (0, KV.useState)(!1), { config: { greeting: N, mediaUrl: P, mediaUrls: F, quickActionsSpeed: ne, withVoice: re } } = Kl(), { widgetId: ie } = ql(), ae = !ie && e === "button" ? P : void 0, oe = F?.[2]?.url || ae, I = t ? "" : N?._ || N?.[v] || N?.en || _({ id: "ask-us-anything" }), se = (0, KV.useMemo)(() => {
-			let e = a?.map((e) => e.strings._ || e.strings[v] || e.strings.en).filter((e) => !!e) ?? [];
-			return [I, ...e].filter((e, t, n) => !!e && n.indexOf(e) === t);
+	}, YV = ({ type: e, isLoading: t, isOpen: n, onClickButton: r, isCustomTarget: i, zIndex: a, placement: o, quickActions: s, onClickQuickAction: c, onMessages: l, sendMessage: u, hasChatUserMessages: d, userMessages: f, onClickCall: p, callIsConnected: m, callIsConnecting: h }) => {
+		let [g, _] = (0, KV.useState)(!1), { locale: v, formatMessage: y } = cA(), b = v.split("-")[0].trim(), { styles: { themeColors: x, openerDimensions: S, marginRight: C, transitionSpeed: w, color: T, colorBright: E, colorDark: D, backgroundColor: O, shadowOuter: ee, borderColor: k, borderRadiusLg: te } } = gA(), A = x?.[0], j = dn(A), [M, N] = (0, KV.useState)(!1), { config: { greeting: P, mediaUrl: F, mediaUrls: ne, quickActionsSpeed: re, withVoice: ie } } = Kl(), { widgetId: ae } = ql(), oe = !ae && e === "button" ? F : void 0, I = ne?.[2]?.url || oe, se = t ? "" : P?._ || P?.[b] || P?.en || y({ id: "ask-us-anything" }), ce = (0, KV.useMemo)(() => {
+			let e = s?.map((e) => e.strings._ || e.strings[b] || e.strings.en).filter((e) => !!e) ?? [];
+			return [se, ...e].filter((e, t, n) => !!e && n.indexOf(e) === t);
 		}, [
-			I,
-			v,
-			a
-		]), [ce, le] = (0, KV.useState)(""), [ue, de] = (0, KV.useState)(!1);
+			se,
+			b,
+			s
+		]), [le, ue] = (0, KV.useState)(""), [de, fe] = (0, KV.useState)(!1);
 		(0, KV.useEffect)(() => {
-			let e = window.matchMedia("(prefers-reduced-motion: reduce)"), t = () => de(e.matches);
+			let e = window.matchMedia("(prefers-reduced-motion: reduce)"), t = () => fe(e.matches);
 			return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
 		}, []), (0, KV.useEffect)(() => {
-			if (se.length <= 1 || ue) {
-				le("");
+			if (ce.length <= 1 || de) {
+				ue("");
 				return;
 			}
-			let e = JV[ne || "normal"], t = 0, n = 0, r = !1, i, a = () => {
-				let o = se[t] ?? "";
-				if (le(o.slice(0, n)), !r && n < o.length) {
+			let e = JV[re || "normal"], t = 0, n = 0, r = !1, i, a = () => {
+				let o = ce[t] ?? "";
+				if (ue(o.slice(0, n)), !r && n < o.length) {
 					n += 1, i = setTimeout(a, e.typeDelay);
 					return;
 				}
@@ -67050,137 +67050,135 @@ var rV, iV, Bpe = o((() => {
 					--n, i = setTimeout(a, e.deleteDelay);
 					return;
 				}
-				r = !1, t = (t + 1) % se.length, i = setTimeout(a, e.betweenDelay);
+				r = !1, t = (t + 1) % ce.length, i = setTimeout(a, e.betweenDelay);
 			};
 			return i = setTimeout(a, 0), () => {
 				clearTimeout(i);
 			};
 		}, [
-			se,
-			ue,
-			ne
+			ce,
+			de,
+			re
 		]);
-		let fe = se.length <= 1 || ue ? se[0] ?? "" : ce;
+		let pe = ce.length <= 1 || de ? ce[0] ?? "" : le;
 		return /* @__PURE__ */ (0, qV.jsxs)("div", {
 			style: {
-				zIndex: 8,
-				bottom: S,
-				right: e === "input" ? "50%" : x,
-				transform: e === "input" ? "translateX(50%)" : void 0,
+				zIndex: a,
+				...o,
 				position: i ? "absolute" : "fixed",
-				maxWidth: `calc(${i ? "100%" : "100dvw"} - ${x} - ${x})`,
+				maxWidth: `calc(${i ? "100%" : "100dvw"} - ${C} - ${C})`,
 				lineHeight: "initial",
 				fontSize: "initial"
 			},
-			children: [e === "input" && /* @__PURE__ */ (0, qV.jsxs)(qV.Fragment, { children: [!n && a?.map((e, t) => {
-				let n = e.strings._ || e.strings[v] || e.strings.en;
+			children: [e === "input" && /* @__PURE__ */ (0, qV.jsxs)(qV.Fragment, { children: [!n && s?.map((e, t) => {
+				let n = e.strings._ || e.strings[b] || e.strings.en;
 				return /* @__PURE__ */ (0, qV.jsx)(xV, {
 					size: "sm",
-					onClick: () => o?.(n, e.context),
+					onClick: () => c?.(n, e.context),
 					style: {
-						position: j ? "static" : "absolute",
+						position: M ? "static" : "absolute",
 						bottom: `${t * 40 + 2}px`,
 						left: 0,
-						zIndex: 8,
+						zIndex: a,
 						whiteSpace: "nowrap",
 						height: "36px",
-						borderRadius: k,
+						borderRadius: te,
 						fontWeight: "inherit",
 						fontSize: 14,
 						padding: "12px 12px",
 						marginBottom: "8px",
-						opacity: +!!j,
-						visibility: j ? "visible" : "hidden",
-						pointerEvents: j ? void 0 : "none",
-						transform: j ? "translateY(0)" : "translateY(40px)",
-						transition: "all " + C,
-						boxShadow: O
+						opacity: +!!M,
+						visibility: M ? "visible" : "hidden",
+						pointerEvents: M ? void 0 : "none",
+						transform: M ? "translateY(0)" : "translateY(40px)",
+						transition: "all " + w,
+						boxShadow: ee
 					},
 					className: "tellyouai-quick-action-button",
 					children: n
 				}, n);
 			}), /* @__PURE__ */ (0, qV.jsx)(WV, {
-				placeholder: fe,
-				onMessages: s,
-				sendMessage: c,
-				userMessages: u,
+				placeholder: pe,
+				onMessages: l,
+				sendMessage: u,
+				userMessages: f,
 				onClick: () => {
-					l && !n && r?.();
+					d && !n && r?.();
 				},
 				style: {
-					borderRadius: k,
+					borderRadius: te,
 					padding: "1px",
-					backgroundImage: y ? "linear-gradient(45deg, " + y.join(", ") + ") " : void 0,
-					boxShadow: O + ", 0 0 12px -4px " + (te || "transparent")
+					backgroundImage: x ? "linear-gradient(45deg, " + x.join(", ") + ") " : void 0,
+					boxShadow: ee + ", 0 0 12px -4px " + (A || "transparent")
 				},
 				containerStyle: {
-					background: D,
-					borderRadius: k
+					background: O,
+					borderRadius: te
 				},
 				inputStyle: {
-					width: e === "input" ? j || n ? "calc(560px)" : "calc(400px)" : void 0,
+					width: e === "input" ? M || n ? "calc(560px)" : "calc(400px)" : void 0,
 					maxWidth: "100%",
-					transition: "width " + C,
-					borderRadius: k,
+					transition: "width " + w,
+					borderRadius: te,
 					whiteSpace: "nowrap",
 					fontSize: "initial",
 					borderWidth: 0,
 					background: "none"
 				},
 				onFocus: () => {
-					M(!0);
+					N(!0);
 				},
 				onBlur: (e) => {
-					e.relatedTarget?.classList?.contains("tellyouai-quick-action-button") || M(!1);
+					e.relatedTarget?.classList?.contains("tellyouai-quick-action-button") || N(!1);
 				},
 				withEmoji: !1,
-				withFiles: n || l ? void 0 : !1,
-				withVoice: re,
-				onClickCall: d,
-				callIsConnected: f,
-				callIsConnecting: p
-			})] }), e === "button" && /* @__PURE__ */ (0, qV.jsxs)(qV.Fragment, { children: [!n && a?.map((e, t) => {
-				let n = e.strings._ || e.strings[v] || e.strings.en, r = t === 0 ? -10 : t === 1 ? -5 : t === 2 ? 40 : 0;
+				withFiles: n || d ? void 0 : !1,
+				withVoice: ie,
+				onClickCall: p,
+				callIsConnected: m,
+				callIsConnecting: h
+			})] }), e === "button" && /* @__PURE__ */ (0, qV.jsxs)(qV.Fragment, { children: [!n && s?.map((e, t) => {
+				let n = e.strings._ || e.strings[b] || e.strings.en, r = t === 0 ? -10 : t === 1 ? -5 : t === 2 ? 40 : 0;
 				return /* @__PURE__ */ (0, qV.jsx)(xV, {
 					size: "sm",
-					onClick: () => o?.(n, e.context),
+					onClick: () => c?.(n, e.context),
 					style: {
 						position: "absolute",
 						bottom: `${t * 40 + 2}px`,
-						right: `calc(${b} - ${r}px)`,
-						zIndex: 8,
+						right: `calc(${S} - ${r}px)`,
+						zIndex: a,
 						whiteSpace: "nowrap",
 						height: "32px",
 						borderRadius: "16px",
 						fontSize: 14,
 						padding: "10px 12px",
-						boxShadow: O
+						boxShadow: ee
 					},
 					children: n
 				}, n);
 			}), /* @__PURE__ */ (0, qV.jsxs)("button", {
 				"aria-expanded": n,
-				onPointerEnter: () => h(!0),
-				onPointerLeave: () => h(!1),
-				onFocus: () => h(!0),
-				onBlur: () => h(!1),
+				onPointerEnter: () => _(!0),
+				onPointerLeave: () => _(!1),
+				onFocus: () => _(!0),
+				onBlur: () => _(!1),
 				style: {
 					display: "flex",
 					alignItems: "center",
 					justifyContent: "center",
-					width: b,
-					height: b,
+					width: S,
+					height: S,
 					boxSizing: "border-box",
-					padding: oe ? "" : 11.9,
-					border: `0.5px solid ${ee}`,
+					padding: I ? "" : 11.9,
+					border: `0.5px solid ${k}`,
 					borderRadius: "100%",
-					backgroundColor: t ? "transparent" : n || oe ? D : te,
-					color: n ? w : A === !0 ? E : A === !1 ? T : void 0,
+					backgroundColor: t ? "transparent" : n || I ? O : A,
+					color: n ? T : j === !0 ? D : j === !1 ? E : void 0,
 					cursor: "pointer",
-					boxShadow: O,
-					transition: "all " + C,
+					boxShadow: ee,
+					transition: "all " + w,
 					opacity: +!t,
-					scale: m ? 1.1 : 1,
+					scale: g ? 1.1 : 1,
 					overflow: "hidden"
 				},
 				disabled: t,
@@ -67188,7 +67186,7 @@ var rV, iV, Bpe = o((() => {
 				children: [!t && /* @__PURE__ */ (0, qV.jsx)(qV.Fragment, { children: n ? /* @__PURE__ */ (0, qV.jsx)(TV, {
 					id: "down",
 					size: "md"
-				}) : oe ? /* @__PURE__ */ (0, qV.jsx)("img", {
+				}) : I ? /* @__PURE__ */ (0, qV.jsx)("img", {
 					alt: "",
 					style: {
 						width: "100%",
@@ -67196,13 +67194,13 @@ var rV, iV, Bpe = o((() => {
 						objectFit: "cover",
 						objectPosition: "center"
 					},
-					src: oe
+					src: I
 				}) : /* @__PURE__ */ (0, qV.jsx)(hV, {
 					animation: "appear",
 					size: "80%"
 				}) }), /* @__PURE__ */ (0, qV.jsx)("span", {
 					className: "tellyouai-sr-only",
-					children: _(n ? { id: "close" } : { id: "chat-with-me" })
+					children: y(n ? { id: "close" } : { id: "chat-with-me" })
 				})]
 			})] })]
 		});
@@ -68560,77 +68558,90 @@ var rV, iV, Bpe = o((() => {
 	};
 })), Pq, Fq, Iq, eye = o((() => {
 	Pq = /* @__PURE__ */ u(m(), 1), yA(), Gpe(), fH(), hH(), Nq(), Fq = nn(), Iq = ({ canStore: e, displayMode: t, displaySize: n, onClickQuickAction: r, onClickDisplaySize: i, onMessages: a, sendMessage: o, children: s, onOpenChange: c, hasChatUserMessages: l, userMessages: u, mode: d, onClickNewChat: f, onClickCall: p, callIsConnected: m, callIsConnecting: h }) => {
-		let { formatMessage: g } = cA(), { isMobile: _ } = Tu(), { config: { entityId: v, withQuickActions: y, quickActions: b, withLocale: x, withConsent: S, privacyUrl: C }, isLoading: w } = Kl(), { entityId: T } = xu(), E = y === "visible" || y === "visible-desktop" && !_, { background: D, styles: { color: O, borderColor: ee, backgroundColor70: k, spacingXS: te, spacingMD: A, marginRight: j, marginBottom: M, openerDimensions: N, transitionSpeed: P, borderRadiusLg: F, shadowOuter: ne, themeColors: re } } = gA(), { config: ie, target: ae, isCustomTarget: oe } = ql(), { session: I, setSession: se } = Yl(v, T, ae, ie.widgetId, e), [ce, le] = (0, Pq.useState)(), ue = ce ?? ie.isOpen ?? I.isOpen ?? !1, de = I.isMaximized ?? ie.isMaximized ?? !1, fe = (0, Pq.useRef)(null), pe = (0, Pq.useRef)(null), L = (0, Pq.useRef)(!1), me = (0, Pq.useCallback)((e) => {
-			le(e), se({ isOpen: e }), c?.(e);
-		}, [se, c]), he = (0, Pq.useCallback)((e) => {
-			se({ isMaximized: e });
-		}, [se]);
+		let { formatMessage: g } = cA(), { isMobile: _ } = Tu(), { config: { entityId: v, withQuickActions: y, quickActions: b, withLocale: x, withConsent: S, privacyUrl: C, position: w, style: T }, isLoading: E } = Kl(), { entityId: D } = xu(), O = y === "visible" || y === "visible-desktop" && !_, { background: ee, styles: { color: k, borderColor: te, backgroundColor70: A, spacingXS: j, spacingMD: M, marginRight: N, marginBottom: P, openerDimensions: F, transitionSpeed: ne, borderRadiusLg: re, shadowOuter: ie, themeColors: ae } } = gA(), { config: oe, target: I, isCustomTarget: se } = ql(), { session: ce, setSession: le } = Yl(v, D, I, oe.widgetId, e), [ue, de] = (0, Pq.useState)(), fe = ue ?? oe.isOpen ?? ce.isOpen ?? !1, pe = ce.isMaximized ?? oe.isMaximized ?? !1, L = oe.position === void 0 ? w : oe.position, me = oe.style === void 0 ? T : oe.style, he = me?.zIndex ?? L?.z ?? 8, ge = (0, Pq.useRef)(null), _e = (0, Pq.useRef)(null), R = (0, Pq.useRef)(!1), ve = (0, Pq.useCallback)((e) => {
+			de(e), le({ isOpen: e }), c?.(e);
+		}, [le, c]), ye = (0, Pq.useCallback)((e) => {
+			le({ isMaximized: e });
+		}, [le]);
 		(0, Pq.useEffect)(() => {
 			let e = (e) => {
 				let t = e.detail?.id, n = e.detail?.open;
-				t && t !== ae || n !== void 0 && (console.log("tellyouai open event", t, n), me(n));
+				t && t !== I || n !== void 0 && (console.log("tellyouai open event", t, n), ve(n));
 			};
 			return window.addEventListener("tellyouai-plugin", e), () => {
 				window.removeEventListener("tellyouai-plugin", e);
 			};
 		}, [
 			t,
-			ae,
-			me
+			I,
+			ve
 		]), (0, Pq.useEffect)(() => {
-			if (ue && !L.current) {
-				pe.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+			if (fe && !R.current) {
+				_e.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
 				let e = requestAnimationFrame(() => {
-					(fe.current?.querySelector("textarea, input:not([type=\"hidden\"]), select, button, a[href], [tabindex]:not([tabindex=\"-1\"])") ?? fe.current)?.focus();
+					(ge.current?.querySelector("textarea, input:not([type=\"hidden\"]), select, button, a[href], [tabindex]:not([tabindex=\"-1\"])") ?? ge.current)?.focus();
 				});
-				return L.current = !0, () => cancelAnimationFrame(e);
-			}
-			!ue && L.current && (pe.current?.focus(), pe.current = null, L.current = !1);
-		}, [ue]);
-		let ge = (e, t) => {
-			me(!0), r(e, t);
-		}, _e = t === "overlay" || t === "overlay-maximized" || t === "bar" || t === "bar-maximized", R = t === "overlay" || t === "overlay-maximized", ve = _e ? de ? "90dvw" : "560px" : de ? "700px" : "400px", ye = R ? "90dvh" : de || _ ? "100dvh" : t === "bar" ? "500px" : "700px", be = _e ? "50%" : j, xe = R ? "53%" : t === "bar" ? `calc(${M} + 64px)` : _ ? `calc(${M})` : `calc(${M} + ${N} + ${A})`, Se = F, Ce = t !== "bar" && t !== "bar-maximized" ? "button" : "input", we = dH(D, re, "bottom"), Te = uH(t, d, D), Ee = d === "text" && S !== !0;
+				return R.current = !0, () => cancelAnimationFrame(e);
+			}
+			!fe && R.current && (_e.current?.focus(), _e.current = null, R.current = !1);
+		}, [fe]);
+		let be = (e, t) => {
+			ve(!0), r(e, t);
+		}, xe = t === "overlay" || t === "overlay-maximized" || t === "bar" || t === "bar-maximized", Se = t === "overlay" || t === "overlay-maximized", Ce = xe ? pe ? "90dvw" : "560px" : pe ? "700px" : "400px", we = Se ? "90dvh" : pe || _ ? "100dvh" : t === "bar" ? "500px" : "700px", Te = xe ? "50%" : N, Ee = Se ? "53%" : t === "bar" ? `calc(${P} + 64px)` : _ ? `calc(${P})` : `calc(${P} + ${F} + ${M})`, De = re, Oe = t !== "bar" && t !== "bar-maximized" ? "button" : "input", ke = me, Ae = L?.x ?? (Oe === "input" ? "center" : "right"), je = L?.y ?? "bottom", Me = ke?.left !== void 0 || ke?.right !== void 0, Ne = ke?.top !== void 0 || ke?.bottom !== void 0, Pe = {
+			left: Me ? ke?.left : Ae === "left" ? N : Ae === "center" ? "50%" : void 0,
+			right: Me ? ke?.right : Ae === "right" ? N : void 0,
+			top: Ne ? ke?.top : je === "top" ? P : je === "center" ? "50%" : void 0,
+			bottom: Ne ? ke?.bottom : je === "bottom" ? P : void 0,
+			transform: `translate(${!Me && Ae === "center" ? "-50%" : "0"}, ${!Ne && je === "center" ? "-50%" : "0"})`
+		}, Fe = Pe.top !== void 0 && Pe.top !== "auto", Ie = Fe ? `calc(${Pe.top} + ${F} + ${M})` : void 0, Le = Fe ? void 0 : Pe.bottom !== void 0 && Pe.bottom !== "auto" ? `calc(${Pe.bottom} + ${F} + ${M})` : Ee, Re = {
+			top: Ie,
+			bottom: Le,
+			left: Pe.left,
+			right: Pe.right,
+			transform: `translate(${!Me && Ae === "center" ? "-50%" : "0"}, 0)`
+		}, ze = !xe && !Se, Be = ze ? Ie ?? Le ?? Ee : Ee, Ve = dH(ee, ae, "bottom"), He = uH(t, d, ee), Ue = d === "text" && S !== !0;
 		return /* @__PURE__ */ (0, Fq.jsxs)(Fq.Fragment, { children: [/* @__PURE__ */ (0, Fq.jsxs)("div", {
-			ref: fe,
+			ref: ge,
 			role: "dialog",
 			"aria-label": g({ id: "chat-with-me" }),
 			tabIndex: -1,
 			onKeyDown: (e) => {
-				e.key === "Escape" && (e.stopPropagation(), me(!1));
+				e.key === "Escape" && (e.stopPropagation(), ve(!1));
 			},
 			style: {
-				position: oe ? "absolute" : "fixed",
-				zIndex: 9,
-				transform: `translate(${_e ? "50%" : "0"}, ${R ? "50%" : "0"})`,
-				bottom: xe,
-				right: be,
-				backgroundColor: k,
+				position: se ? "absolute" : "fixed",
+				zIndex: he + 1,
+				transform: `translate(${xe ? "50%" : "0"}, ${Se ? "50%" : "0"})`,
+				bottom: Ee,
+				right: Te,
+				...ze ? Re : {},
+				backgroundColor: A,
 				backdropFilter: "blur(48px)",
 				boxSizing: "border-box",
-				width: `min(calc(100% - ${j} - ${j}), ${ve})`,
-				height: R ? "80dvh" : `min(calc(100dvh - ${M} - ${xe}), ${ye})`,
-				maxWidth: _e ? "1000px" : void 0,
-				maxHeight: R ? "1000px" : `calc(100dvh - ${xe} - ${A})`,
+				width: `min(calc(100% - ${N} - ${N}), ${Ce})`,
+				height: Se ? "80dvh" : `min(calc(100dvh - ${P} - ${Be}), ${we})`,
+				maxWidth: xe ? "1000px" : void 0,
+				maxHeight: Se ? "1000px" : `calc(100dvh - ${Be} - ${M})`,
 				display: "flex",
-				visibility: ue ? "visible" : "hidden",
-				opacity: ue ? "1" : "0",
-				translate: ue ? "0 0" : "0 100%",
+				visibility: fe ? "visible" : "hidden",
+				opacity: fe ? "1" : "0",
+				translate: fe ? "0 0" : "0 100%",
 				flexDirection: "column",
 				alignItems: "center",
-				border: `0.5px solid ${ee}`,
-				borderRadius: Se,
-				boxShadow: ne,
-				transition: "all " + P,
-				color: O,
+				border: `0.5px solid ${te}`,
+				borderRadius: De,
+				boxShadow: ie,
+				transition: "all " + ne,
+				color: k,
 				fontSize: `${14 + (n - 1)}px`,
 				lineHeight: `${(14 + (n - 1)) * 1.7}px`
 			},
 			children: [/* @__PURE__ */ (0, Fq.jsx)(jq.Provider, {
 				value: {
 					onClickDisplaySize: i,
-					onChangeDisplayMode: () => he(!de),
-					maximized: de,
-					onClose: () => me(!ue),
+					onChangeDisplayMode: () => ye(!pe),
+					maximized: pe,
+					onClose: () => ve(!fe),
 					onClickNewChat: f,
 					withLocale: x
 				},
@@ -68639,16 +68650,16 @@ var rV, iV, Bpe = o((() => {
 				style: {
 					opacity: "0.5",
 					flexShrink: 0,
-					color: Te ? we : void 0,
-					paddingBottom: te,
+					color: He ? Ve : void 0,
+					paddingBottom: j,
 					width: "100%",
 					textAlign: "center",
-					borderBottomLeftRadius: Se,
-					borderBottomRightRadius: Se
+					borderBottomLeftRadius: De,
+					borderBottomRightRadius: De
 				},
 				children: /* @__PURE__ */ (0, Fq.jsx)("span", {
 					style: { fontSize: "0.7em" },
-					children: Ee ? g({ id: "chat-privacy-notice" }, { 0: C ? /* @__PURE__ */ (0, Fq.jsx)(mH, {
+					children: Ue ? g({ id: "chat-privacy-notice" }, { 0: C ? /* @__PURE__ */ (0, Fq.jsx)(mH, {
 						href: C,
 						target: "_blank",
 						rel: "noopener noreferrer",
@@ -68670,25 +68681,27 @@ var rV, iV, Bpe = o((() => {
 				})
 			})]
 		}), /* @__PURE__ */ (0, Fq.jsx)(YV, {
-			type: Ce,
-			isLoading: w,
-			isOpen: ue,
+			type: Oe,
+			isLoading: E,
+			isOpen: fe,
 			onClickButton: () => {
-				me(!ue);
+				ve(!fe);
 			},
 			hasChatUserMessages: l,
 			userMessages: u,
-			isCustomTarget: oe,
-			quickActions: E ? b : [],
-			onClickQuickAction: ge,
+			isCustomTarget: se,
+			zIndex: he,
+			placement: Pe,
+			quickActions: O ? b : [],
+			onClickQuickAction: be,
 			onMessages: (e) => {
-				a(e), me(!0);
+				a(e), ve(!0);
 			},
 			sendMessage: (e) => {
-				o(e), me(!0);
+				o(e), ve(!0);
 			},
 			onClickCall: () => {
-				m || me(!0), p();
+				m || ve(!0), p();
 			},
 			callIsConnected: m,
 			callIsConnecting: h

package/dist/package/public.d.ts

@@ -93,6 +93,18 @@ export type InstanceOptions = {
 export type InstanceConfig = {
     target?: string;
     displayMode?: DisplayMode;
+    position?: {
+        x?: "left" | "center" | "right";
+        y?: "top" | "center" | "bottom";
+        z?: number;
+    };
+    style?: {
+        top?: string;
+        right?: string;
+        bottom?: string;
+        left?: string;
+        zIndex?: number;
+    };
     isOpen?: boolean;
     options?: InstanceOptions;
     isMaximized?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellyouai/plugin",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Framework-agnostic browser SDK for the Tellyou AI plugin",
   "repository": {
     "type": "git",