@heedb/web-sdk 0.1.0

package/README.md

@@ -0,0 +1,49 @@
+# @heedb/web-sdk
+
+Drop-in feedback widget with email conversations for any website.
+
+## CDN (quickest)
+
+```html
+<script
+  src="https://cdn.jsdelivr.net/npm/@heedb/web-sdk/dist/widget.js"
+  data-api-key="YOUR_API_KEY"
+  data-host="https://heedb.com"
+></script>
+```
+
+## npm
+
+```bash
+npm install @heedb/web-sdk
+```
+
+```ts
+import { Heedb } from "@heedb/web-sdk";
+
+Heedb.init({
+  apiKey: "YOUR_API_KEY",
+  email: user.email,      // optional
+  name: user.name,        // optional
+  userHash: serverHash,   // optional — HMAC-SHA256 for verified identity
+});
+```
+
+## Identify users
+
+Generate a `userHash` on your server to verify user identity:
+
+```js
+const crypto = require("crypto");
+const userHash = crypto
+  .createHmac("sha256", WIDGET_SECRET)
+  .update(userEmail)
+  .digest("hex");
+```
+
+Then pass it to `Heedb.init({ email, userHash })`.
+
+## Links
+
+- [Dashboard](https://heedb.com)
+- [GitHub](https://github.com/TheAleSch/heedb)

package/dist/index.cjs

@@ -0,0 +1,65 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Heedb: () => Heedb
+});
+module.exports = __toCommonJS(index_exports);
+var DEFAULT_HOST = "https://heedb.com";
+var Heedb = {
+  _scriptLoaded: false,
+  /**
+   * Load the widget and optionally identify the user.
+   *
+   * ```ts
+   * import { Heedb } from "@heedb/web-sdk";
+   * Heedb.init({ apiKey: "your_key", email: user.email, userHash: hash });
+   * ```
+   */
+  init(opts) {
+    var _a;
+    const host = (_a = opts.host) != null ? _a : DEFAULT_HOST;
+    if (!this._scriptLoaded) {
+      const script = document.createElement("script");
+      script.src = `${host}/widget.js`;
+      script.setAttribute("data-api-key", opts.apiKey);
+      script.setAttribute("data-host", host);
+      script.onload = () => {
+        this._scriptLoaded = true;
+        this._identify(opts);
+      };
+      document.body.appendChild(script);
+    } else {
+      this._identify(opts);
+    }
+  },
+  /** @internal */
+  _identify(opts) {
+    const w = window;
+    if (w.Heedb && typeof w.Heedb.init === "function") {
+      w.Heedb.init({
+        email: opts.email,
+        name: opts.name,
+        userHash: opts.userHash
+      });
+    }
+  }
+};

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export interface HeedbOptions {
+  apiKey: string;
+  host?: string;
+  email?: string;
+  name?: string;
+  userHash?: string;
+}
+
+export declare const Heedb: {
+  _scriptLoaded: boolean;
+  init(opts: HeedbOptions): void;
+  _identify(opts: HeedbOptions): void;
+};

package/dist/index.js

@@ -0,0 +1,44 @@
+// src/index.ts
+var DEFAULT_HOST = "https://heedb.com";
+var Heedb = {
+  _scriptLoaded: false,
+  /**
+   * Load the widget and optionally identify the user.
+   *
+   * ```ts
+   * import { Heedb } from "@heedb/web-sdk";
+   * Heedb.init({ apiKey: "your_key", email: user.email, userHash: hash });
+   * ```
+   */
+  init(opts) {
+    var _a;
+    const host = (_a = opts.host) != null ? _a : DEFAULT_HOST;
+    if (!this._scriptLoaded) {
+      const script = document.createElement("script");
+      script.src = `${host}/widget.js`;
+      script.setAttribute("data-api-key", opts.apiKey);
+      script.setAttribute("data-host", host);
+      script.onload = () => {
+        this._scriptLoaded = true;
+        this._identify(opts);
+      };
+      document.body.appendChild(script);
+    } else {
+      this._identify(opts);
+    }
+  },
+  /** @internal */
+  _identify(opts) {
+    const w = window;
+    if (w.Heedb && typeof w.Heedb.init === "function") {
+      w.Heedb.init({
+        email: opts.email,
+        name: opts.name,
+        userHash: opts.userHash
+      });
+    }
+  }
+};
+export {
+  Heedb
+};

package/dist/widget.js

@@ -0,0 +1,84 @@
+/* Heedb Widget — https://heedb.com */
+"use strict";(()=>{(function(){var $,q,A,O,R;let u=document.currentScript||document.querySelector("script[data-api-key]"),w=($=u==null?void 0:u.getAttribute("data-api-key"))!=null?$:"",_=(q=u==null?void 0:u.src)!=null?q:"",H=(u==null?void 0:u.getAttribute("data-host"))||(_?new URL(_).origin:"");if(!w){console.warn("[Heedb] Missing data-api-key on <script> tag.");return}let k=!1,x="contact",v=(A=localStorage.getItem("heedb_name"))!=null?A:"",r=(O=localStorage.getItem("heedb_email"))!=null?O:"",d=(R=localStorage.getItem("heedb_token"))!=null?R:"",b=null,I=null;async function U(e,l){try{let a=await B("/api/threads/token",{api_key:w,email:e,userHash:l});if(a.ok){let t=await a.json();if(t.widgetToken){d=t.widgetToken,localStorage.setItem("heedb_token",t.widgetToken);return}}d="",localStorage.removeItem("heedb_token")}catch(a){d="",localStorage.removeItem("heedb_token")}}window.Heedb={init(e={}){if(e.name&&(v=e.name,localStorage.setItem("heedb_name",e.name)),e.email){let l=e.email!==r;r=e.email,localStorage.setItem("heedb_email",e.email),e.userHash?U(e.email,e.userHash).then(()=>{z(),k&&b&&y()}):(z(),k&&b&&y())}}};function B(e,l){return fetch(`${H}${e}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(l)})}function D(e){let l=new URL(`${H}/api/threads`);return l.searchParams.set("api_key",w),l.searchParams.set("email",e),d&&l.searchParams.set("token",d),fetch(l.toString()).then(a=>a.json())}let K=`
+  .llp-btn {
+    position: fixed; bottom: 24px; right: 24px; z-index: 999998;
+    width: 52px; height: 52px; border-radius: 50%; border: none;
+    background: #18181b; color: #fff; font-size: 22px; cursor: pointer;
+    box-shadow: 0 4px 16px rgba(0,0,0,.25);
+    display: flex; align-items: center; justify-content: center;
+    transition: transform .15s;
+  }
+  .llp-btn:hover { transform: scale(1.08); }
+  .llp-panel {
+    position: fixed; bottom: 88px; right: 24px; z-index: 999999;
+    width: 340px; max-height: 540px; border-radius: 16px;
+    background: #fff; box-shadow: 0 8px 32px rgba(0,0,0,.18);
+    display: flex; flex-direction: column; overflow: hidden;
+    font-family: system-ui, -apple-system, sans-serif; font-size: 14px;
+    transition: opacity .15s, transform .15s;
+  }
+  .llp-header {
+    background: #18181b; color: #fff; padding: 14px 16px;
+    display: flex; align-items: center; justify-content: space-between;
+  }
+  .llp-header h2 { margin: 0; font-size: 15px; font-weight: 600; }
+  .llp-close {
+    background: none; border: none; color: #fff; cursor: pointer;
+    font-size: 18px; line-height: 1; padding: 0;
+  }
+  .llp-tabs {
+    display: flex; border-bottom: 1px solid #e4e4e7;
+  }
+  .llp-tab {
+    flex: 1; padding: 10px 0; border: none; background: none;
+    cursor: pointer; font-size: 13px; font-weight: 500; color: #71717a;
+    border-bottom: 2px solid transparent; margin-bottom: -1px;
+  }
+  .llp-tab.active { color: #18181b; border-bottom-color: #18181b; }
+  .llp-body { padding: 16px; overflow-y: auto; flex: 1; }
+  .llp-label { display: block; font-size: 12px; font-weight: 600; color: #52525b; margin-bottom: 4px; }
+  .llp-input, .llp-textarea, .llp-select {
+    width: 100%; box-sizing: border-box; padding: 8px 10px;
+    border: 1px solid #d4d4d8; border-radius: 8px;
+    font-size: 13px; color: #18181b; margin-bottom: 10px;
+    font-family: inherit; background: #fff;
+  }
+  .llp-textarea { min-height: 80px; resize: vertical; }
+  .llp-input:focus, .llp-textarea:focus, .llp-select:focus {
+    outline: none; border-color: #18181b;
+  }
+  .llp-btn-submit {
+    width: 100%; padding: 10px; background: #18181b; color: #fff;
+    border: none; border-radius: 8px; font-size: 14px; font-weight: 600;
+    cursor: pointer; transition: opacity .15s;
+  }
+  .llp-btn-submit:hover { opacity: .85; }
+  .llp-btn-submit:disabled { opacity: .5; cursor: not-allowed; }
+  .llp-error { color: #ef4444; font-size: 12px; margin-bottom: 8px; }
+  .llp-success { text-align: center; padding: 24px 8px; }
+  .llp-success-icon { font-size: 36px; }
+  .llp-success h3 { margin: 12px 0 6px; font-size: 15px; color: #18181b; }
+  .llp-success p { margin: 0; color: #71717a; font-size: 13px; line-height: 1.5; }
+  .llp-thread-item {
+    padding: 10px 12px; border: 1px solid #e4e4e7; border-radius: 8px;
+    margin-bottom: 8px; text-decoration: none; display: block; color: inherit;
+    transition: background .1s;
+  }
+  .llp-thread-item:hover { background: #f4f4f5; }
+  .llp-thread-label { font-size: 12px; color: #71717a; margin-bottom: 2px; }
+  .llp-thread-text { font-size: 13px; color: #18181b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .llp-thread-meta { font-size: 11px; color: #a1a1aa; margin-top: 3px; }
+  .llp-badge { display: inline-block; padding: 1px 6px; border-radius: 9999px; font-size: 10px; font-weight: 600; }
+  .llp-badge-open { background: #d1fae5; color: #065f46; }
+  .llp-badge-replied { background: #dbeafe; color: #1e40af; }
+  .llp-new-msg { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e4e4e7; }
+  .llp-new-msg button {
+    width: 100%; padding: 8px; background: none; border: 1px solid #d4d4d8;
+    border-radius: 8px; font-size: 13px; cursor: pointer; color: #52525b;
+  }
+  .llp-new-msg button:hover { background: #f4f4f5; }
+  `;function n(e,l={},a=[]){let t=document.createElement(e);for(let[o,s]of Object.entries(l))o==="class"?t.className=s:o==="style"?t.setAttribute("style",s):o.startsWith("on")&&typeof s=="function"?t.addEventListener(o.slice(2),s):t.setAttribute(o,String(s));for(let o of a)t.appendChild(typeof o=="string"?document.createTextNode(o):o);return t}function S(e,l,a=""){let t=document.createElement("input");return t.type=e,t.id=l,t.placeholder=a,t.className="llp-input",t}function F(e,l=""){let a=document.createElement("textarea");return a.id=e,a.placeholder=l,a.className="llp-textarea",a}function J(e,l){let a=document.createElement("select");a.id=e,a.className="llp-select";for(let t of l){let o=document.createElement("option");o.value=t.value,o.textContent=t.label,a.appendChild(o)}return a}function y(){if(!b)return;let e=b.querySelector(".llp-body");e.innerHTML="",x==="contact"?W(e):x==="privacy"?V(e):x==="threads"&&Y(e)}function W(e,l=""){let a=!!(v&&r),t=n("label",{class:"llp-label"},["Name"]),o=S("text","llp-name","Jane Smith");v&&(o.value=v);let s=n("label",{class:"llp-label"},["Email"]),m=S("email","llp-email","jane@example.com");(l||r)&&(m.value=l||r);let g=n("label",{class:"llp-label"},["Message"]),c=F("llp-message","How can we help?"),i=n("div",{class:"llp-error",style:"display:none"}),p=n("button",{class:"llp-btn-submit"},["Send message"]);p.onclick=async()=>{let f=o.value.trim(),h=m.value.trim(),E=c.value.trim();if(i.style.display="none",!f||!h||!E){i.textContent="Please fill in all fields.",i.style.display="block";return}p.disabled=!0,p.textContent="Sending\u2026";try{let C=await B("/api/contact",{api_key:w,name:f,email:h,message:E});if(C.ok)r=h,localStorage.setItem("heedb_email",h),z(),j(e,"Message sent!","We'll get back to you soon. Check your inbox for a confirmation email.");else{let G=await C.json();i.textContent=G.error||"Something went wrong.",i.style.display="block",p.disabled=!1,p.textContent="Send message"}}catch(C){i.textContent="Network error. Please try again.",i.style.display="block",p.disabled=!1,p.textContent="Send message"}},a?e.append(g,c,i,p):e.append(t,o,s,m,g,c,i,p)}function V(e){let l=!!(v&&r),a=n("label",{class:"llp-label"},["Name"]),t=S("text","llp-priv-name","Jane Smith");v&&(t.value=v);let o=n("label",{class:"llp-label"},["Email"]),s=S("email","llp-priv-email","jane@example.com");r&&(s.value=r);let m=n("label",{class:"llp-label"},["Request type"]),g=J("llp-priv-type",[{value:"deletion",label:"Delete my data"},{value:"access",label:"Access my data"},{value:"portability",label:"Export my data"},{value:"correction",label:"Correct my data"},{value:"restriction",label:"Restrict processing"},{value:"objection",label:"Object to processing"},{value:"other",label:"Other"}]),c=n("div",{class:"llp-error",style:"display:none"}),i=n("button",{class:"llp-btn-submit"},["Submit request"]);i.onclick=async()=>{let p=t.value.trim(),f=s.value.trim(),h=g.value;if(c.style.display="none",!p||!f){c.textContent="Please fill in all fields.",c.style.display="block";return}i.disabled=!0,i.textContent="Submitting\u2026";try{let E=await B("/api/privacy-request",{api_key:w,name:p,email:f,request_type:h});if(E.ok)r=f,localStorage.setItem("heedb_email",f),z(),j(e,"Request submitted!","Your privacy request has been received. We'll respond within 30 days.");else{let C=await E.json();c.textContent=C.error||"Something went wrong.",c.style.display="block",i.disabled=!1,i.textContent="Submit request"}}catch(E){c.textContent="Network error. Please try again.",c.style.display="block",i.disabled=!1,i.textContent="Submit request"}},l?e.append(m,g,c,i):e.append(a,t,o,s,m,g,c,i)}async function Y(e){var l;if(!d){e.innerHTML="";let a=n("p",{style:"color:#71717a;text-align:center;margin:8px 0;font-size:13px;line-height:1.5"},["Send a message below to view your message history."]),t=n("div",{class:"llp-new-msg"}),o=n("button",{},["+ Send a message"]);o.onclick=()=>{x="contact",L("contact"),y()},t.appendChild(o),e.append(a,t);return}e.innerHTML='<p style="color:#71717a;text-align:center">Loading\u2026</p>';try{let{threads:a}=await D(r);if(e.innerHTML="",a.length===0){let s=n("p",{style:"color:#71717a;text-align:center;margin:8px 0"},["No open messages yet."]);e.appendChild(s)}else for(let s of a){let m=n("span",{class:`llp-badge llp-badge-${s.status}`},[s.status]),g=n("div",{class:"llp-thread-label"},[s.type==="privacy"?"Privacy request":"Message"," \u2022 "]);g.appendChild(m);let c=n("div",{class:"llp-thread-text"},[(l=s.preview)!=null?l:""]),i=new Date(s.createdAt).toLocaleDateString(),p=n("div",{class:"llp-thread-meta"},[i]),f=`${H}/t/${encodeURIComponent(s.id)}?email=${encodeURIComponent(r)}&token=${encodeURIComponent(d)}&apiKey=${encodeURIComponent(w)}`,h=n("a",{class:"llp-thread-item",href:f,target:"_blank",rel:"noopener noreferrer"});h.append(g,c,p),e.appendChild(h)}let t=n("div",{class:"llp-new-msg"}),o=n("button",{},["+ Send a new message"]);o.onclick=()=>{x="contact",L("contact"),y()},t.appendChild(o),e.appendChild(t)}catch(a){e.innerHTML='<p style="color:#ef4444;text-align:center">Failed to load messages.</p>'}}function j(e,l,a){e.innerHTML="";let t=n("div",{class:"llp-success"});t.innerHTML=`
+      <div class="llp-success-icon">\u2705</div>
+      <h3>${l}</h3>
+      <p>${a}</p>
+    `;let o=n("a",{href:`${H}/app?email=${encodeURIComponent(r)}`,target:"_blank",style:"display:inline-block;margin-top:12px;color:#18181b;font-size:13px;font-weight:600"},["View your messages \u2192"]);t.appendChild(o),e.appendChild(t)}let M=null,T=null;function L(e){x=e,M&&M.querySelectorAll(".llp-tab").forEach(l=>{l.classList.toggle("active",l.dataset.mode===e)})}function z(){T&&(T.style.display=r&&d?"":"none")}function N(){let e=document.createElement("style");e.textContent=K,document.head.appendChild(e),I=n("button",{class:"llp-btn",title:"Contact us","aria-label":"Open contact widget"},["\u{1F4AC}"]),I.onclick=P,document.body.appendChild(I),b=n("div",{class:"llp-panel",style:"display:none"});let l=n("div",{class:"llp-header"}),a=n("h2",{},["Contact us"]),t=n("button",{class:"llp-close","aria-label":"Close"},["\u2715"]);t.onclick=P,l.append(a,t),M=n("div",{class:"llp-tabs"});let o=n("button",{class:"llp-tab active","data-mode":"contact"},["Message"]),s=n("button",{class:"llp-tab","data-mode":"privacy"},["Privacy"]);T=n("button",{class:"llp-tab","data-mode":"threads"},["Messages"]),T.style.display=r&&d?"":"none",o.onclick=()=>{L("contact"),y()},s.onclick=()=>{L("privacy"),y()},T.onclick=()=>{L("threads"),y()},M.append(o,s,T);let m=n("div",{class:"llp-body"});b.append(l,M,m),document.body.appendChild(b)}function P(){k=!k,b&&(b.style.display=k?"flex":"none",k&&(r&&d&&x!=="privacy"&&(x="threads",L("threads")),y()))}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",N):N()})();})();

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@heedb/web-sdk",
+  "version": "0.1.0",
+  "description": "Drop-in feedback widget with email conversations for any website",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TheAleSch/heedb.git",
+    "directory": "packages/web-sdk"
+  },
+  "homepage": "https://heedb.com",
+  "keywords": ["feedback", "widget", "support", "email", "customer-support", "sdk"],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./widget": "./dist/widget.js"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "node build.mjs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "esbuild": "0.27.3"
+  }
+}