@locdo.tech/botiq-chat-sdk 0.1.0 → 0.2.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 BotIQ (LocDo.Tech)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 BotIQ (LocDo.Tech)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -21,13 +21,7 @@ You also need a **Widget Embed Key** (`sk-biq-...`) issued from your BotIQ admin
 ```ts
 import { init } from '@locdo.tech/botiq-chat-sdk';
 
-const dispose = init({
-  apiKey: 'sk-biq-xxxxxxxxxxxxxxxx',
-  apiUrl: 'https://api.botiq.vn',
-  botName: 'SpaBot',
-  position: 'bottom-right',
-  primaryColor: '#F97316',
-});
+const dispose = init({ apiKey: 'sk-biq-xxxxxxxxxxxxxxxx' });
 
 // Later, to remove the widget:
 dispose();
@@ -43,19 +37,11 @@ dispose();
 import { BotIQWidget } from '@locdo.tech/botiq-chat-sdk/react';
 
 export function App() {
-  return (
-    <BotIQWidget
-      apiKey="sk-biq-xxxxxxxxxxxxxxxx"
-      apiUrl="https://api.botiq.vn"
-      botName="SpaBot"
-      position="bottom-right"
-      primaryColor="#F97316"
-    />
-  );
+  return <BotIQWidget apiKey="sk-biq-xxxxxxxxxxxxxxxx" />;
 }
 ```
 
-> The widget reinitialises only when `apiKey` changes. To apply other prop changes, unmount and remount the component.
+> The widget reinitialises only when `apiKey` changes.
 
 ---
 
@@ -67,13 +53,7 @@ import { BotIQWidget } from '@locdo.tech/botiq-chat-sdk/vue';
 </script>
 
 <template>
-  <BotIQWidget
-    api-key="sk-biq-xxxxxxxxxxxxxxxx"
-    api-url="https://api.botiq.vn"
-    bot-name="SpaBot"
-    position="bottom-right"
-    primary-color="#F97316"
-  />
+  <BotIQWidget api-key="sk-biq-xxxxxxxxxxxxxxxx" />
 </template>
 ```
 
@@ -81,15 +61,11 @@ import { BotIQWidget } from '@locdo.tech/botiq-chat-sdk/vue';
 
 ## Configuration
 
-| Prop | Type | Required | Default |
-|---|---|---|---|
-| `apiKey` | `string` | ✅ | — |
-| `apiUrl` | `string` | ✅ | — |
-| `botName` | `string` | ✅ | — |
-| `position` | `'bottom-right' \| 'bottom-left'` | — | `'bottom-right'` |
-| `primaryColor` | `string` (hex) | — | `'#F97316'` |
+| Prop | Type | Required |
+|---|---|---|
+| `apiKey` | `string` | ✅ |
 
-The full visual design (colors, layout, greeting message) is **server-driven** via the `/widget/design` endpoint — admin/tenant pick a preset in the BotIQ dashboard and the widget fetches it on init.
+That's it. The bot name, colors, layout, position, greeting message, and all other visual options are configured by your admin/tenant in the BotIQ dashboard and fetched at runtime from `/widget/meta` — keeping integration code dead simple and letting non-developers tweak the UI without re-deploying.
 
 ---
 
@@ -101,9 +77,6 @@ For static HTML (no bundler), use the CDN build:
 <script
   src="https://bot-q-frontend.vercel.app/widget.js"
   data-api-key="sk-biq-xxxxxxxxxxxxxxxx"
-  data-api-url="https://api.botiq.vn"
-  data-bot-name="SpaBot"
-  data-position="bottom-right"
 ></script>
 ```
 
@@ -117,6 +90,17 @@ The Widget Embed Key (`sk-biq-...`) is **safe to expose** in HTML/source. Each k
 
 ---
 
+## Migrating from 0.1.x
+
+`0.2.0` removes the following props from `init()`, `<BotIQWidget>`, and the `<script>` tag — they were redundant because the same values come from your bot config on the backend:
+
+- `apiUrl` — production URL is now baked into the bundle
+- `botName`, `position`, `primaryColor`, `data-bot-name`, `data-position`, `data-primary-color`, `data-api-url`
+
+If you were setting these from snippet config, the dashboard values now win. Visit **Admin → Bots → Design** to confirm the bot name and colors look right after upgrading.
+
+---
+
 ## License
 
 MIT © [BotIQ (LocDo.Tech)](https://botiq.vn)

package/dist/sdk/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "./npm-Dbo9SB2H.js";
+import { t as e } from "./npm-Bo1fPZM3.js";
 export { e as init };

package/dist/sdk/{npm-Dbo9SB2H.js → npm-Bo1fPZM3.js}

@@ -1,69 +1,101 @@
 //#region src/core/config.ts
-var e = {
-	colors: {
-		primary: "#F97316",
-		header: "#F97316",
-		userBubble: "#F97316",
-		botBubble: "#1A1A1A",
-		background: "#000000",
-		text: "#FFFFFF"
-	},
-	layout: {
-		position: "bottom-right",
-		buttonShape: "circle",
-		width: 360,
-		height: 520
-	},
-	content: {
-		greeting: "Xin chào! Tôi có thể giúp gì cho bạn?",
-		suggestionChips: [],
-		placeholder: "Nhắn tin..."
-	},
-	font: "inter"
-}, t = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
-function n(e) {
-	let n = e.primaryColor ?? "";
+var e = "http://localhost:3001", t = {
+	name: "BotIQ",
+	design: {
+		colors: {
+			primary: "#F97316",
+			header: "#F97316",
+			userBubble: "#F97316",
+			botBubble: "#1A1A1A",
+			background: "#000000",
+			text: "#FFFFFF"
+		},
+		layout: {
+			position: "bottom-right",
+			buttonShape: "circle",
+			width: 360,
+			height: 520
+		},
+		content: {
+			greeting: "Xin chào! Tôi có thể giúp gì cho bạn?",
+			suggestionChips: [],
+			placeholder: "Nhắn tin..."
+		},
+		font: "inter"
+	}
+}, n = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/, r = new Set(["bottom-right", "bottom-left"]), i = new Set(["circle", "square"]), a = new Set([
+	"inter",
+	"plus-jakarta",
+	"poppins"
+]);
+function o(e) {
+	let t = e.colors;
+	if (![
+		t.primary,
+		t.header,
+		t.userBubble,
+		t.botBubble,
+		t.background,
+		t.text
+	].every((e) => typeof e == "string" && n.test(e)) || !r.has(e.layout.position) || !i.has(e.layout.buttonShape) || !a.has(e.font)) return !1;
+	let { width: o, height: s } = e.layout;
+	return !(!Number.isFinite(o) || o < 280 || o > 800 || !Number.isFinite(s) || s < 200 || s > 900);
+}
+async function s(e, n) {
+	try {
+		let r = await fetch(`${n}/widget/meta`, {
+			headers: { "X-Api-Key": e },
+			signal: AbortSignal.timeout(5e3)
+		});
+		if (!r.ok) return t;
+		let i = await r.json();
+		return !i?.design?.colors || !i?.design?.layout || !i?.design?.content || !o(i.design) ? t : {
+			name: typeof i.name == "string" && i.name.length > 0 ? i.name : "BotIQ",
+			design: i.design
+		};
+	} catch {
+		return t;
+	}
+}
+function c(t) {
 	return {
-		apiKey: e.apiKey,
-		apiUrl: (e.apiUrl ?? "https://api.botiq.vn").replace(/\/$/, ""),
-		botName: e.botName ?? "BotIQ",
-		position: e.position === "bottom-left" ? "bottom-left" : "bottom-right",
-		primaryColor: t.test(n) ? n : "#F97316"
+		apiKey: t.apiKey,
+		apiUrl: e
 	};
 }
 //#endregion
 //#region src/core/session.ts
-var r = "botiq:sessionId", i = "botiq:history:", a = 10;
-function o() {
+var l = "botiq:sessionId", u = "botiq:history:", d = 10;
+function f() {
 	try {
-		let e = localStorage.getItem(r);
-		return e || (e = crypto.randomUUID(), localStorage.setItem(r, e)), e;
+		let e = localStorage.getItem(l);
+		return e || (e = crypto.randomUUID(), localStorage.setItem(l, e)), e;
 	} catch {
 		return crypto.randomUUID();
 	}
 }
-function s(e) {
+function p(e) {
 	try {
-		let t = localStorage.getItem(i + e);
+		let t = localStorage.getItem(u + e);
 		return t ? JSON.parse(t) : [];
 	} catch {
 		return [];
 	}
 }
-function c(e, t) {
+function m(e, t) {
 	try {
-		let n = [...s(e), ...t].slice(-a);
-		localStorage.setItem(i + e, JSON.stringify(n));
+		let n = [...p(e), ...t].slice(-d);
+		localStorage.setItem(u + e, JSON.stringify(n));
 	} catch {}
 }
 //#endregion
 //#region src/core/api.ts
-var l = {
+var h = {
 	401: "API key không hợp lệ.",
 	403: "Widget không được phép trên trang này.",
 	429: "Bot đã đạt giới hạn tin nhắn tháng này."
 };
-async function u(e, t, n, r, i) {
+async function g(e, t, n, r, i) {
 	try {
 		let a = await fetch(`${e}/widget/chat`, {
 			method: "POST",
@@ -77,35 +109,35 @@ async function u(e, t, n, r, i) {
 				history: i
 			})
 		});
-		return a.ok ? (await a.json()).reply || "Không có phản hồi từ bot." : l[a.status] ?? "Đang gặp sự cố kỹ thuật, vui lòng liên hệ trực tiếp.";
+		return a.ok ? (await a.json()).reply || "Không có phản hồi từ bot." : h[a.status] ?? "Đang gặp sự cố kỹ thuật, vui lòng liên hệ trực tiếp.";
 	} catch {
 		return "Xin lỗi, không thể kết nối. Vui lòng thử lại.";
 	}
 }
 //#endregion
 //#region src/core/state.ts
-var d = {
+var _ = {
 	messages: [],
 	isLoading: !1,
 	isOpen: !1
-}, f = /* @__PURE__ */ new Set();
-function p() {
-	return d;
+}, v = /* @__PURE__ */ new Set();
+function y() {
+	return _;
 }
-function m(e) {
-	Object.assign(d, e);
+function b(e) {
+	Object.assign(_, e);
 	let t = {
-		...d,
-		messages: [...d.messages]
+		..._,
+		messages: [..._.messages]
 	};
-	f.forEach((e) => e(t));
+	v.forEach((e) => e(t));
 }
-function h(e) {
-	return f.add(e), () => f.delete(e);
+function x(e) {
+	return v.add(e), () => v.delete(e);
 }
 //#endregion
 //#region src/core/styles.ts
-var g = {
+var S = {
 	inter: {
 		url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap",
 		family: "'Inter', system-ui, -apple-system, sans-serif"
@@ -119,8 +151,8 @@ var g = {
 		family: "'Poppins', system-ui, -apple-system, sans-serif"
 	}
 };
-function _(e) {
-	let { colors: t, layout: n, font: r } = e, i = g[r] ?? g.inter, a = n.buttonShape === "square" ? "14px" : "50%", o = n.position === "bottom-left" ? "right: auto; left: 24px;" : "right: 24px;", s = n.position === "bottom-left" ? "bottom left" : "bottom right", c = n.position === "bottom-left" ? "right: auto; left: 0;" : "right: 0;";
+function C(e) {
+	let { colors: t, layout: n, font: r } = e, i = S[r] ?? S.inter, a = n.buttonShape === "square" ? "14px" : "50%", o = n.position === "bottom-left" ? "right: auto; left: 24px;" : "right: 24px;", s = n.position === "bottom-left" ? "bottom left" : "bottom right", c = n.position === "bottom-left" ? "right: auto; left: 0;" : "right: 0;";
 	return `
 @import url('${i.url}');
 
@@ -377,6 +409,23 @@ function _(e) {
 
 .input-row { display: flex; align-items: flex-end; gap: 8px; }
 
+/* Subtle attribution — half-opacity, hover lifts to full. Doesn't steal focus
+   from tenant branding but reminds the customer this is powered by BotIQ. */
+.botiq-badge {
+  display: block;
+  text-align: center;
+  font-size: 10px;
+  font-weight: 400;
+  color: var(--color-text);
+  opacity: 0.4;
+  text-decoration: none;
+  margin-top: 6px;
+  letter-spacing: 0.02em;
+  transition: opacity .15s;
+}
+.botiq-badge:hover { opacity: 0.85; }
+.botiq-badge-name { font-weight: 600; color: var(--color-primary); }
+
 .input {
   flex: 1;
   min-height: 38px;
@@ -420,23 +469,23 @@ function _(e) {
 }
 //#endregion
 //#region src/core/ui.ts
-var v = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M20 2H4a2 2 0 00-2 2v18l4-4h14a2 2 0 002-2V4a2 2 0 00-2-2z\"/>\n</svg>", y = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n</svg>", b = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 2a2 2 0 012 2c0 .74-.4 1.38-1 1.72V7h3a3 3 0 013 3v8a3 3 0 01-3 3H8a3 3 0 01-3-3v-8a3 3 0 013-3h3V5.72A2 2 0 0110 4a2 2 0 012-2zm-2 9a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm4 0a1.5 1.5 0 100 3 1.5 1.5 0 000-3z\"/>\n</svg>", x = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M2.01 21L23 12 2.01 3 2 10l15 2-15 2z\"/>\n</svg>", S = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M20 2H4a2 2 0 00-2 2v18l4-4h14a2 2 0 002-2V4a2 2 0 00-2-2zm-2 10H6v-2h12v2zm0-3H6V7h12v2z\"/>\n</svg>";
-function C(e) {
+var w = "https://bot-q-frontend.vercel.app/", T = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M20 2H4a2 2 0 00-2 2v18l4-4h14a2 2 0 002-2V4a2 2 0 00-2-2z\"/>\n</svg>", E = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n</svg>", D = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 2a2 2 0 012 2c0 .74-.4 1.38-1 1.72V7h3a3 3 0 013 3v8a3 3 0 01-3 3H8a3 3 0 01-3-3v-8a3 3 0 013-3h3V5.72A2 2 0 0110 4a2 2 0 012-2zm-2 9a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm4 0a1.5 1.5 0 100 3 1.5 1.5 0 000-3z\"/>\n</svg>", O = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M2.01 21L23 12 2.01 3 2 10l15 2-15 2z\"/>\n</svg>", k = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M20 2H4a2 2 0 00-2 2v18l4-4h14a2 2 0 002-2V4a2 2 0 00-2-2zm-2 10H6v-2h12v2zm0-3H6V7h12v2z\"/>\n</svg>";
+function A(e) {
 	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
 }
-function w(e, t, n, r) {
-	let i, a, o, s, c, l, { content: u } = t;
-	function d(n) {
-		n.setAttribute("data-position", t.layout.position), i = n.attachShadow({ mode: "open" });
-		let d = document.createElement("style");
-		d.textContent = _(t), i.appendChild(d), a = document.createElement("button"), a.className = "bubble", a.setAttribute("aria-label", `Open ${e.botName} chat`), a.innerHTML = `
-      <span class="icon-chat">${v}</span>
-      <span class="icon-close">${y}</span>
-    `, a.addEventListener("click", r), i.appendChild(a), o = document.createElement("div"), o.className = "chat-window", o.setAttribute("role", "dialog"), o.setAttribute("aria-label", `${e.botName} chat`), o.innerHTML = `
+function j(e, t, n, r) {
+	let { name: i, design: a } = t, o, s, c, l, u, d, { content: f } = a;
+	function p(e) {
+		e.setAttribute("data-position", a.layout.position), o = e.attachShadow({ mode: "open" });
+		let t = document.createElement("style");
+		t.textContent = C(a), o.appendChild(t), s = document.createElement("button"), s.className = "bubble", s.setAttribute("aria-label", `Open ${i} chat`), s.innerHTML = `
+      <span class="icon-chat">${T}</span>
+      <span class="icon-close">${E}</span>
+    `, s.addEventListener("click", r), o.appendChild(s), c = document.createElement("div"), c.className = "chat-window", c.setAttribute("role", "dialog"), c.setAttribute("aria-label", `${i} chat`), c.innerHTML = `
       <div class="chat-header">
-        <div class="avatar">${b}</div>
+        <div class="avatar">${D}</div>
         <div class="header-text">
-          <span class="bot-name">${C(e.botName)}</span>
+          <span class="bot-name">${A(i)}</span>
           <span class="bot-status">Trực tuyến</span>
         </div>
         <button class="close-btn" aria-label="Close chat">×</button>
@@ -446,108 +495,101 @@ function w(e, t, n, r) {
         <div class="input-row">
           <textarea
             class="input"
-            placeholder="${C(u.placeholder)}"
+            placeholder="${A(f.placeholder)}"
             rows="1"
             maxlength="2000"
             aria-label="Message input"
           ></textarea>
           <button class="send-btn" aria-label="Send message">
-            ${x}
+            ${O}
           </button>
         </div>
+        <a class="botiq-badge" href="${w}" target="_blank" rel="noopener noreferrer">
+          Powered by <span class="botiq-badge-name">BotIQ</span>
+        </a>
       </div>
-    `, o.querySelector(".close-btn").addEventListener("click", r), s = o.querySelector("#messages-container"), c = o.querySelector(".input"), l = o.querySelector(".send-btn"), c.addEventListener("input", () => {
-			c.style.height = "auto", c.style.height = Math.min(c.scrollHeight, 100) + "px";
-		}), c.addEventListener("keydown", (e) => {
-			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), f());
-		}), l.addEventListener("click", f), i.appendChild(o);
+    `, c.querySelector(".close-btn").addEventListener("click", r), l = c.querySelector("#messages-container"), u = c.querySelector(".input"), d = c.querySelector(".send-btn"), u.addEventListener("input", () => {
+			u.style.height = "auto", u.style.height = Math.min(u.scrollHeight, 100) + "px";
+		}), u.addEventListener("keydown", (e) => {
+			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), m());
+		}), d.addEventListener("click", m), o.appendChild(c);
 	}
-	function f() {
-		let e = c.value.trim();
-		!e || l.disabled || (c.value = "", c.style.height = "auto", n(e));
+	function m() {
+		let e = u.value.trim();
+		!e || d.disabled || (u.value = "", u.style.height = "auto", n(e));
 	}
-	function p(e) {
+	function h(e) {
 		if (e.messages.length === 0 && !e.isLoading) {
-			let e = u.suggestionChips.length > 0 ? `<div class="chips">${u.suggestionChips.map((e) => `<button class="chip">${C(e)}</button>`).join("")}</div>` : "";
-			s.innerHTML = `
+			let e = f.suggestionChips.length > 0 ? `<div class="chips">${f.suggestionChips.map((e) => `<button class="chip">${A(e)}</button>`).join("")}</div>` : "";
+			l.innerHTML = `
         <div class="empty-state">
-          ${S}
-          <span class="greeting">${C(u.greeting)}</span>
+          ${k}
+          <span class="greeting">${A(f.greeting)}</span>
           ${e}
         </div>
-      `, s.querySelectorAll(".chip").forEach((e) => {
+      `, l.querySelectorAll(".chip").forEach((e) => {
 				e.addEventListener("click", () => n(e.textContent ?? ""));
 			});
 			return;
 		}
 		let t = e.messages.map((e) => `
         <div class="message ${e.role}">
-          <div class="message-bubble">${C(e.content)}</div>
+          <div class="message-bubble">${A(e.content)}</div>
         </div>
       `).join(""), r = e.isLoading ? "<div class=\"typing\"><span></span><span></span><span></span></div>" : "";
-		s.innerHTML = t + r, s.scrollTop = s.scrollHeight;
+		l.innerHTML = t + r, l.scrollTop = l.scrollHeight;
 	}
-	function m(t) {
-		t.isOpen ? (o.classList.add("open"), a.classList.add("open"), a.setAttribute("aria-label", `Close ${e.botName} chat`), requestAnimationFrame(() => c.focus())) : (o.classList.remove("open"), a.classList.remove("open"), a.setAttribute("aria-label", `Open ${e.botName} chat`)), l.disabled = t.isLoading, p(t);
+	function g(e) {
+		e.isOpen ? (c.classList.add("open"), s.classList.add("open"), s.setAttribute("aria-label", `Close ${i} chat`), requestAnimationFrame(() => u.focus())) : (c.classList.remove("open"), s.classList.remove("open"), s.setAttribute("aria-label", `Open ${i} chat`)), d.disabled = e.isLoading, h(e);
 	}
 	return {
-		mount: d,
-		update: m
+		mount: p,
+		update: g
 	};
 }
 //#endregion
 //#region src/builds/npm/index.ts
-function T(t) {
-	if (!t.apiKey) return console.warn("[BotIQ] apiKey is required"), () => void 0;
-	let r = n(t), i = {
-		...e,
-		colors: {
-			...e.colors,
-			primary: r.primaryColor,
-			header: r.primaryColor,
-			userBubble: r.primaryColor
-		},
-		layout: {
-			...e.layout,
-			position: r.position
-		}
-	}, a = o();
-	m({ messages: s(a) });
-	let l = document.createElement("div");
-	document.body.appendChild(l);
-	let d = w(r, i, g, _);
-	d.mount(l);
-	let f = h((e) => d.update(e));
-	d.update(p());
-	function g(e) {
-		let t = p();
-		if (t.isLoading) return;
-		let n = {
+function M(e) {
+	if (!e.apiKey) return console.warn("[BotIQ] apiKey is required"), () => void 0;
+	let t = c(e), n = f();
+	b({ messages: p(n) });
+	let r = document.createElement("div");
+	document.body.appendChild(r);
+	let i = () => void 0, a = !1;
+	s(t.apiKey, t.apiUrl).then((e) => {
+		if (a) return;
+		let n = j(t, e, o, l);
+		n.mount(r), i = x((e) => n.update(e)), n.update(y());
+	});
+	function o(e) {
+		let r = y();
+		if (r.isLoading) return;
+		let i = {
 			role: "user",
 			content: e
 		};
-		m({
-			messages: [...t.messages, n],
+		b({
+			messages: [...r.messages, i],
 			isLoading: !0
-		}), u(r.apiUrl, r.apiKey, a, e, t.messages).then((e) => {
+		}), g(t.apiUrl, t.apiKey, n, e, r.messages).then((e) => {
 			let t = {
 				role: "assistant",
 				content: e
 			};
-			m({
-				messages: [...p().messages, t],
+			b({
+				messages: [...y().messages, t],
 				isLoading: !1
-			}), c(a, [n, t]);
+			}), m(n, [i, t]);
 		}).catch(() => {
-			m({ isLoading: !1 });
+			b({ isLoading: !1 });
 		});
 	}
-	function _() {
-		m({ isOpen: !p().isOpen });
+	function l() {
+		b({ isOpen: !y().isOpen });
 	}
 	return () => {
-		f(), l.remove();
+		a = !0, i(), r.remove();
 	};
 }
 //#endregion
-export { T as t };
+export { M as t };

package/dist/sdk/react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./npm-Dbo9SB2H.js";
+import { t as e } from "./npm-Bo1fPZM3.js";
 import { useEffect as t } from "react";
 //#region src/builds/npm/react.tsx
 function n(n) {

package/dist/sdk/vue.d.ts

@@ -1,50 +1,13 @@
-import { PropType } from 'vue';
 import { BotIQConfig } from './index.ts';
+export type { BotIQConfig };
 export declare const BotIQWidget: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     apiKey: {
         type: StringConstructor;
         required: true;
     };
-    apiUrl: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    botName: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    position: {
-        type: PropType<BotIQConfig["position"]>;
-        default: undefined;
-    };
-    primaryColor: {
-        type: StringConstructor;
-        default: undefined;
-    };
 }>, () => null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     apiKey: {
         type: StringConstructor;
         required: true;
     };
-    apiUrl: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    botName: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    position: {
-        type: PropType<BotIQConfig["position"]>;
-        default: undefined;
-    };
-    primaryColor: {
-        type: StringConstructor;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    primaryColor: string;
-    apiUrl: string;
-    botName: string;
-    position: "bottom-right" | "bottom-left" | undefined;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/sdk/vue.js

@@ -1,40 +1,16 @@
-import { t as e } from "./npm-Dbo9SB2H.js";
+import { t as e } from "./npm-Bo1fPZM3.js";
 import { defineComponent as t, onMounted as n, onUnmounted as r } from "vue";
 //#region src/builds/npm/vue.ts
 var i = t({
 	name: "BotIQWidget",
-	props: {
-		apiKey: {
-			type: String,
-			required: !0
-		},
-		apiUrl: {
-			type: String,
-			default: void 0
-		},
-		botName: {
-			type: String,
-			default: void 0
-		},
-		position: {
-			type: String,
-			default: void 0
-		},
-		primaryColor: {
-			type: String,
-			default: void 0
-		}
-	},
+	props: { apiKey: {
+		type: String,
+		required: !0
+	} },
 	setup(t) {
 		let i;
 		return n(() => {
-			i = e({
-				apiKey: t.apiKey,
-				apiUrl: t.apiUrl,
-				botName: t.botName,
-				position: t.position,
-				primaryColor: t.primaryColor
-			});
+			i = e({ apiKey: t.apiKey });
 		}), r(() => {
 			i?.();
 		}), () => null;

package/package.json

@@ -1,87 +1,87 @@
-{
-  "name": "@locdo.tech/botiq-chat-sdk",
-  "version": "0.1.0",
-  "description": "BotIQ chat widget SDK — embed AI chatbot into any website with vanilla JS, React, or Vue.",
-  "keywords": [
-    "botiq",
-    "chatbot",
-    "ai",
-    "widget",
-    "react",
-    "vue",
-    "customer-support"
-  ],
-  "license": "MIT",
-  "author": "BotIQ (LocDo.Tech)",
-  "homepage": "https://botiq.vn",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/locdo-tech/botiq.git",
-    "directory": "apps/widget"
-  },
-  "bugs": {
-    "url": "https://github.com/locdo-tech/botiq/issues"
-  },
-  "type": "module",
-  "main": "./dist/sdk/index.js",
-  "module": "./dist/sdk/index.js",
-  "types": "./dist/sdk/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/sdk/index.js",
-      "types": "./dist/sdk/index.d.ts"
-    },
-    "./react": {
-      "import": "./dist/sdk/react.js",
-      "types": "./dist/sdk/react.d.ts"
-    },
-    "./vue": {
-      "import": "./dist/sdk/vue.js",
-      "types": "./dist/sdk/vue.d.ts"
-    }
-  },
-  "files": [
-    "dist/sdk",
-    "README.md",
-    "LICENSE"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "sideEffects": false,
-  "peerDependencies": {
-    "react": ">=17",
-    "vue": ">=3"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "vue": {
-      "optional": true
-    }
-  },
-  "scripts": {
-    "dev": "vite",
-    "build:cdn": "tsc && vite build",
-    "build:sdk": "tsc -p tsconfig.sdk.json --noEmit && vite build --config vite.config.sdk.ts",
-    "build": "npm run build:cdn && npm run build:sdk",
-    "preview": "vite preview",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "prepublishOnly": "npm run build:sdk"
-  },
-  "devDependencies": {
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitest/coverage-v8": "^4.1.6",
-    "jsdom": "^29.1.1",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
-    "typescript": "~6.0.2",
-    "vite": "^8.0.12",
-    "vite-plugin-dts": "^5.0.0",
-    "vitest": "^4.1.6",
-    "vue": "^3.5.34"
-  }
-}
+{
+  "name": "@locdo.tech/botiq-chat-sdk",
+  "version": "0.2.0",
+  "description": "BotIQ chat widget SDK — embed AI chatbot into any website with vanilla JS, React, or Vue.",
+  "keywords": [
+    "botiq",
+    "chatbot",
+    "ai",
+    "widget",
+    "react",
+    "vue",
+    "customer-support"
+  ],
+  "license": "MIT",
+  "author": "BotIQ (LocDo.Tech)",
+  "homepage": "https://botiq.vn",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/locdo-tech/botiq.git",
+    "directory": "apps/widget"
+  },
+  "bugs": {
+    "url": "https://github.com/locdo-tech/botiq/issues"
+  },
+  "type": "module",
+  "main": "./dist/sdk/index.js",
+  "module": "./dist/sdk/index.js",
+  "types": "./dist/sdk/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/sdk/index.js",
+      "types": "./dist/sdk/index.d.ts"
+    },
+    "./react": {
+      "import": "./dist/sdk/react.js",
+      "types": "./dist/sdk/react.d.ts"
+    },
+    "./vue": {
+      "import": "./dist/sdk/vue.js",
+      "types": "./dist/sdk/vue.d.ts"
+    }
+  },
+  "files": [
+    "dist/sdk",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": ">=17",
+    "vue": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build:cdn": "tsc && vite build",
+    "build:sdk": "tsc -p tsconfig.sdk.json --noEmit && vite build --config vite.config.sdk.ts",
+    "build": "npm run build:cdn && npm run build:sdk",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build:sdk"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitest/coverage-v8": "^4.1.6",
+    "jsdom": "^29.1.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "typescript": "~6.0.2",
+    "vite": "^8.0.12",
+    "vite-plugin-dts": "^5.0.0",
+    "vitest": "^4.1.6",
+    "vue": "^3.5.34"
+  }
+}