@sendystack/widget 0.1.0

package/README.md

@@ -0,0 +1,43 @@
+# @sendystack/widget
+
+Universal AI chat widget for any website. Add it once and it:
+
+- renders a chat bubble, themed from appearance you manage at [app.sendystack.org](https://app.sendystack.org)
+- answers visitor questions using your site's knowledge base (Gemini/Claude/ChatGPT-backed)
+- indexes the current page automatically, and crawls the rest of the site in the background
+- feeds everything it learns into Claude, ChatGPT, and Gemini via MCP
+
+Get an embed token from the **Sources** page in the dashboard (Add site → Any website).
+
+## Plain `<script>` tag (no build step)
+
+```html
+<script async src="https://app.sendystack.org/widget.js" data-token="emb_xxx"></script>
+```
+
+That's it — the widget reads its own `data-token` attribute and initializes itself.
+
+## npm / bundler
+
+```bash
+npm install @sendystack/widget
+```
+
+```ts
+import { init } from "@sendystack/widget"
+
+init({ token: "emb_xxx" })
+```
+
+## How it works
+
+- **Appearance** (colors, position, assistant name, welcome message) is fetched from your
+  dashboard on load — there's nothing to configure in code.
+- **Chat** goes through your workspace's connected AI provider key; replies are grounded in
+  whatever's been indexed for this site.
+- **Indexing**: every page the widget loads on gets reported automatically. A full site crawl
+  also kicks off in the background (throttled server-side to once per 24h) so the rest of the
+  site gets indexed even on pages that never get a visit.
+
+Each embed token is scoped to exactly one site — pasting it on a different domain doesn't grant
+access to any other site's data in your workspace.

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Sendystack universal embed widget. Works as:
+ *  - a plain <script data-token="emb_..."> tag (auto-inits from its own tag), or
+ *  - an npm import: `import { init } from "@sendystack/widget"`.
+ *
+ * On load it fetches appearance (never secrets) from the dashboard, renders
+ * the bubble+panel, wires chat through the embed-token `answer` endpoint,
+ * reports the current page's text to `ingest` so the page is searchable
+ * immediately, and fires a throttled `crawlSite` request so the rest of the
+ * site gets indexed in the background without the visitor waiting on it.
+ */
+export type SendystackOptions = {
+    token: string;
+    apiBase?: string;
+};
+export declare function init(options: SendystackOptions): Promise<void>;

package/dist/index.es.js

@@ -0,0 +1,170 @@
+//#region src/index.ts
+var e = "sendystack-widget-root", t = (e) => `sendystack_session_${e}`, n = (e) => `sendystack_crawled_${e}`;
+async function r(e, t) {
+	let n = await (await fetch(`${e}/embedConfig?embedToken=${encodeURIComponent(t)}`)).json();
+	if (!n.ok) throw Error(n.error || "failed to load widget config");
+	return n.appearance;
+}
+function i(t) {
+	let n = t.position === "left" ? "left" : "right", r = document.createElement("style");
+	r.textContent = `
+#${e} *{box-sizing:border-box;}
+.ssk-bubble{position:fixed;${n}:20px;bottom:20px;width:58px;height:58px;border-radius:50%;
+  background:linear-gradient(135deg,${t.accent2},${t.accent});color:#fff;display:grid;
+  place-items:center;cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.22);z-index:2147483000;border:none;font-size:24px;}
+.ssk-panel{position:fixed;${n}:20px;bottom:90px;width:340px;max-height:70vh;background:#fff;border-radius:16px;
+  box-shadow:0 24px 60px rgba(0,0,0,.25);display:none;flex-direction:column;overflow:hidden;z-index:2147483000;
+  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
+.ssk-panel.open{display:flex;}
+.ssk-head{background:linear-gradient(135deg,${t.accent2},${t.accent});color:#fff;padding:14px 16px;
+  display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:14px;flex-shrink:0;}
+.ssk-head button{background:none;border:none;color:#fff;font-size:16px;cursor:pointer;opacity:.85;padding:0;}
+.ssk-body{flex:1;overflow-y:auto;padding:14px;background:#faf9f7;display:flex;flex-direction:column;gap:8px;min-height:200px;}
+.ssk-msg{max-width:85%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.45;white-space:pre-wrap;}
+.ssk-msg.bot{background:#fff;border:1px solid rgba(0,0,0,.08);align-self:flex-start;color:#1b2733;}
+.ssk-msg.user{background:${t.accent};color:#fff;align-self:flex-end;}
+.ssk-inputrow{display:flex;border-top:1px solid rgba(0,0,0,.08);padding:8px;gap:6px;flex-shrink:0;}
+.ssk-inputrow input{flex:1;border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:9px 11px;font-size:13.5px;outline:none;}
+.ssk-inputrow button{background:${t.accent};color:#fff;border:none;border-radius:10px;padding:0 14px;cursor:pointer;font-weight:700;}
+`, document.head.appendChild(r);
+}
+function a(e, t) {
+	let n = document.createElement("div");
+	n.className = `ssk-msg ${t.role}`, n.textContent = t.text, e.appendChild(n), e.scrollTop = e.scrollHeight;
+}
+function o(e, n) {
+	let r = Array.from(n.children).map((e) => ({
+		role: e.classList.contains("user") ? "user" : "bot",
+		text: e.textContent || ""
+	}));
+	try {
+		sessionStorage.setItem(t(e), JSON.stringify(r.slice(-40)));
+	} catch {}
+}
+function s(e) {
+	try {
+		return JSON.parse(sessionStorage.getItem(t(e)) || "[]");
+	} catch {
+		return [];
+	}
+}
+function c() {
+	let t = document.body.cloneNode(!0);
+	t.querySelectorAll(`script,style,nav,header,footer,svg,noscript,#${e}`).forEach((e) => e.remove());
+	let n = (t.textContent || "").replace(/\s+/g, " ").trim();
+	return {
+		title: document.title,
+		text: n
+	};
+}
+async function l(e, t) {
+	let { title: n, text: r } = c();
+	r.length < 40 || await fetch(`${e}/ingest`, {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({
+			embedToken: t,
+			items: [{
+				url: location.href,
+				title: n,
+				text: r
+			}]
+		})
+	}).catch(() => {});
+}
+async function u(e, t) {
+	let r = !1;
+	try {
+		r = !!sessionStorage.getItem(n(t)), sessionStorage.setItem(n(t), "1");
+	} catch {}
+	r || await fetch(`${e}/crawlSite`, {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({ embedToken: t })
+	}).catch(() => {});
+}
+async function d(t) {
+	if (typeof document > "u" || document.getElementById(e)) return;
+	let n = (t.token || "").trim();
+	if (!n) {
+		console.error("[Sendystack] init() called without a token");
+		return;
+	}
+	let c = t.apiBase || "https://us-central1-sendystack-fab32.cloudfunctions.net", d;
+	try {
+		d = await r(c, n);
+	} catch (e) {
+		console.error("[Sendystack] failed to load widget config:", e);
+		return;
+	}
+	i(d);
+	let f = document.createElement("div");
+	f.id = e;
+	let p = document.createElement("div");
+	p.className = "ssk-body";
+	let m = s(n);
+	if (m.length) for (let e of m) a(p, e);
+	else a(p, {
+		role: "bot",
+		text: d.welcomeMessage
+	});
+	let h = document.createElement("div");
+	h.className = "ssk-head";
+	let g = document.createElement("span");
+	g.textContent = d.assistantName;
+	let _ = document.createElement("button");
+	_.textContent = "✕", h.append(g, _);
+	let v = document.createElement("input");
+	v.type = "text", v.placeholder = "Ask anything…";
+	let y = document.createElement("button");
+	y.textContent = "Send";
+	let b = document.createElement("div");
+	b.className = "ssk-inputrow", b.append(v, y);
+	let x = document.createElement("div");
+	x.className = "ssk-panel", x.append(h, p, b);
+	let S = document.createElement("button");
+	S.className = "ssk-bubble", S.textContent = "💬", S.setAttribute("aria-label", "Open chat"), f.append(x, S), document.body.appendChild(f), S.onclick = () => x.classList.toggle("open"), _.onclick = () => x.classList.remove("open");
+	async function C() {
+		let e = v.value.trim();
+		if (e) {
+			v.value = "", a(p, {
+				role: "user",
+				text: e
+			}), o(n, p), y.disabled = !0;
+			try {
+				let t = await (await fetch(`${c}/answer`, {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({
+						embedToken: n,
+						query: e
+					})
+				})).json();
+				a(p, {
+					role: "bot",
+					text: t.ok ? t.reply : "Sorry, I couldn't process that right now."
+				});
+			} catch {
+				a(p, {
+					role: "bot",
+					text: "Sorry, something went wrong. Please try again."
+				});
+			} finally {
+				y.disabled = !1, o(n, p);
+			}
+		}
+	}
+	y.onclick = C, v.addEventListener("keydown", (e) => {
+		e.key === "Enter" && C();
+	}), l(c, n), u(c, n);
+}
+function f() {
+	let e = document.currentScript || Array.from(document.getElementsByTagName("script")).find((e) => /widget(\.global)?\.js/.test(e.src)), t = e?.dataset.token;
+	t && d({
+		token: t,
+		apiBase: e?.dataset.apiBase
+	});
+}
+typeof document < "u" && f();
+//#endregion
+export { d as init };

package/dist/widget.global.js

@@ -0,0 +1,20 @@
+var Sendystack=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=`https://us-central1-sendystack-fab32.cloudfunctions.net`,n=`sendystack-widget-root`,r=e=>`sendystack_session_${e}`,i=e=>`sendystack_crawled_${e}`;async function a(e,t){let n=await(await fetch(`${e}/embedConfig?embedToken=${encodeURIComponent(t)}`)).json();if(!n.ok)throw Error(n.error||`failed to load widget config`);return n.appearance}function o(e){let t=e.position===`left`?`left`:`right`,r=document.createElement(`style`);r.textContent=`
+#${n} *{box-sizing:border-box;}
+.ssk-bubble{position:fixed;${t}:20px;bottom:20px;width:58px;height:58px;border-radius:50%;
+  background:linear-gradient(135deg,${e.accent2},${e.accent});color:#fff;display:grid;
+  place-items:center;cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.22);z-index:2147483000;border:none;font-size:24px;}
+.ssk-panel{position:fixed;${t}:20px;bottom:90px;width:340px;max-height:70vh;background:#fff;border-radius:16px;
+  box-shadow:0 24px 60px rgba(0,0,0,.25);display:none;flex-direction:column;overflow:hidden;z-index:2147483000;
+  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
+.ssk-panel.open{display:flex;}
+.ssk-head{background:linear-gradient(135deg,${e.accent2},${e.accent});color:#fff;padding:14px 16px;
+  display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:14px;flex-shrink:0;}
+.ssk-head button{background:none;border:none;color:#fff;font-size:16px;cursor:pointer;opacity:.85;padding:0;}
+.ssk-body{flex:1;overflow-y:auto;padding:14px;background:#faf9f7;display:flex;flex-direction:column;gap:8px;min-height:200px;}
+.ssk-msg{max-width:85%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.45;white-space:pre-wrap;}
+.ssk-msg.bot{background:#fff;border:1px solid rgba(0,0,0,.08);align-self:flex-start;color:#1b2733;}
+.ssk-msg.user{background:${e.accent};color:#fff;align-self:flex-end;}
+.ssk-inputrow{display:flex;border-top:1px solid rgba(0,0,0,.08);padding:8px;gap:6px;flex-shrink:0;}
+.ssk-inputrow input{flex:1;border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:9px 11px;font-size:13.5px;outline:none;}
+.ssk-inputrow button{background:${e.accent};color:#fff;border:none;border-radius:10px;padding:0 14px;cursor:pointer;font-weight:700;}
+`,document.head.appendChild(r)}function s(e,t){let n=document.createElement(`div`);n.className=`ssk-msg ${t.role}`,n.textContent=t.text,e.appendChild(n),e.scrollTop=e.scrollHeight}function c(e,t){let n=Array.from(t.children).map(e=>({role:e.classList.contains(`user`)?`user`:`bot`,text:e.textContent||``}));try{sessionStorage.setItem(r(e),JSON.stringify(n.slice(-40)))}catch{}}function l(e){try{return JSON.parse(sessionStorage.getItem(r(e))||`[]`)}catch{return[]}}function u(){let e=document.body.cloneNode(!0);e.querySelectorAll(`script,style,nav,header,footer,svg,noscript,#${n}`).forEach(e=>e.remove());let t=(e.textContent||``).replace(/\s+/g,` `).trim();return{title:document.title,text:t}}async function d(e,t){let{title:n,text:r}=u();r.length<40||await fetch(`${e}/ingest`,{method:`POST`,headers:{"Content-Type":`application/json`},body:JSON.stringify({embedToken:t,items:[{url:location.href,title:n,text:r}]})}).catch(()=>{})}async function f(e,t){let n=!1;try{n=!!sessionStorage.getItem(i(t)),sessionStorage.setItem(i(t),`1`)}catch{}n||await fetch(`${e}/crawlSite`,{method:`POST`,headers:{"Content-Type":`application/json`},body:JSON.stringify({embedToken:t})}).catch(()=>{})}async function p(e){if(typeof document>`u`||document.getElementById(n))return;let r=(e.token||``).trim();if(!r){console.error(`[Sendystack] init() called without a token`);return}let i=e.apiBase||t,u;try{u=await a(i,r)}catch(e){console.error(`[Sendystack] failed to load widget config:`,e);return}o(u);let p=document.createElement(`div`);p.id=n;let m=document.createElement(`div`);m.className=`ssk-body`;let h=l(r);if(h.length)for(let e of h)s(m,e);else s(m,{role:`bot`,text:u.welcomeMessage});let g=document.createElement(`div`);g.className=`ssk-head`;let _=document.createElement(`span`);_.textContent=u.assistantName;let v=document.createElement(`button`);v.textContent=`✕`,g.append(_,v);let y=document.createElement(`input`);y.type=`text`,y.placeholder=`Ask anything…`;let b=document.createElement(`button`);b.textContent=`Send`;let x=document.createElement(`div`);x.className=`ssk-inputrow`,x.append(y,b);let S=document.createElement(`div`);S.className=`ssk-panel`,S.append(g,m,x);let C=document.createElement(`button`);C.className=`ssk-bubble`,C.textContent=`💬`,C.setAttribute(`aria-label`,`Open chat`),p.append(S,C),document.body.appendChild(p),C.onclick=()=>S.classList.toggle(`open`),v.onclick=()=>S.classList.remove(`open`);async function w(){let e=y.value.trim();if(e){y.value=``,s(m,{role:`user`,text:e}),c(r,m),b.disabled=!0;try{let t=await(await fetch(`${i}/answer`,{method:`POST`,headers:{"Content-Type":`application/json`},body:JSON.stringify({embedToken:r,query:e})})).json();s(m,{role:`bot`,text:t.ok?t.reply:`Sorry, I couldn't process that right now.`})}catch{s(m,{role:`bot`,text:`Sorry, something went wrong. Please try again.`})}finally{b.disabled=!1,c(r,m)}}}b.onclick=w,y.addEventListener(`keydown`,e=>{e.key===`Enter`&&w()}),d(i,r),f(i,r)}function m(){let e=document.currentScript||Array.from(document.getElementsByTagName(`script`)).find(e=>/widget(\.global)?\.js/.test(e.src)),t=e?.dataset.token;t&&p({token:t,apiBase:e?.dataset.apiBase})}return typeof document<`u`&&m(),e.init=p,e})({});

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@sendystack/widget",
+  "version": "0.1.0",
+  "description": "Universal AI chat widget for any website -- auto-injects the chatbot, crawls your site into the knowledge base, and feeds Claude/ChatGPT/Gemini via MCP. Appearance is managed at app.sendystack.org.",
+  "type": "module",
+  "license": "MIT",
+  "main": "./dist/index.es.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": true,
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.json --emitDeclarationOnly --outDir dist && npm run copy:cdn",
+    "dev": "vite build --watch",
+    "copy:cdn": "node -e \"require('fs').copyFileSync('dist/widget.global.js', '../public/widget.js')\""
+  },
+  "keywords": [
+    "sendystack",
+    "chatbot",
+    "ai",
+    "mcp",
+    "widget",
+    "wordpress",
+    "woocommerce"
+  ],
+  "homepage": "https://sendystack.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sendystack/chat"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "typescript": "~6.0.2",
+    "vite": "^8.1.0"
+  }
+}