@heedb/web-sdk 0.1.1 → 0.1.2

package/README.md

@@ -14,7 +14,7 @@ The fastest way — no build step, no dependencies. Add one line before `</body>
 
 ```html
 <script
-  src="https://cdn.jsdelivr.net/npm/@heedb/web-sdk/dist/widget.js"
+  src="https://cdn.jsdelivr.net/npm/@heedb/web-sdk/widget.js"
   data-api-key="YOUR_API_KEY"
   data-host="https://heedb.com"
 ></script>
@@ -391,7 +391,7 @@ Use the CDN script tag — no build tools needed:
 
 ```html
 <script
-  src="https://cdn.jsdelivr.net/npm/@heedb/web-sdk/dist/widget.js"
+  src="https://cdn.jsdelivr.net/npm/@heedb/web-sdk/widget.js"
   data-api-key="YOUR_API_KEY"
   data-host="https://heedb.com"
 ></script>

package/dist/widget.js

@@ -1,5 +1,5 @@
 /* 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=`
+"use strict";(()=>{(function(){var $,D,q,O,R;let y=document.currentScript||document.querySelector("script[data-api-key]"),k=($=y==null?void 0:y.getAttribute("data-api-key"))!=null?$:"",_=(D=y==null?void 0:y.src)!=null?D:"",C=(y==null?void 0:y.getAttribute("data-host"))||(_?new URL(_).origin:"");if(!k){console.warn("[Heedb] Missing data-api-key on <script> tag.");return}let M=!1,b="contact",I="",T=(q=localStorage.getItem("heedb_name"))!=null?q:"",m=(O=localStorage.getItem("heedb_email"))!=null?O:"",f=(R=localStorage.getItem("heedb_token"))!=null?R:"",v=null,P=null;async function F(e,t){try{let o=await S("/api/threads/token",{api_key:k,email:e,userHash:t});if(o.ok){let l=await o.json();if(l.widgetToken){f=l.widgetToken,localStorage.setItem("heedb_token",l.widgetToken);return}}f="",localStorage.removeItem("heedb_token")}catch(o){f="",localStorage.removeItem("heedb_token")}}window.Heedb={init(e={}){e.name&&(T=e.name,localStorage.setItem("heedb_name",e.name)),e.email&&(m=e.email,localStorage.setItem("heedb_email",e.email),e.userHash?F(e.email,e.userHash).then(()=>{B(),M&&v&&h()}):(B(),M&&v&&h()))}};function S(e,t){return fetch(`${C}${e}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)})}function J(e){let t=new URL(`${C}/api/threads`);return t.searchParams.set("api_key",k),t.searchParams.set("email",e),f&&t.searchParams.set("token",f),fetch(t.toString()).then(o=>o.json())}function K(e){let t=new URL(`${C}/api/threads/${e}`);return t.searchParams.set("api_key",k),t.searchParams.set("email",m),t.searchParams.set("token",f),fetch(t.toString()).then(o=>o.json())}function U(e,t){return S(`/api/threads/${e}/reply`,{api_key:k,email:m,token:f,message:t})}let W=`
   .llp-btn {
     position: fixed; bottom: 24px; right: 24px; z-index: 999998;
     width: 52px; height: 52px; border-radius: 50%; border: none;
@@ -11,7 +11,7 @@
   .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;
+    width: 370px; max-height: 560px; 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;
@@ -61,8 +61,8 @@
   .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;
+    margin-bottom: 8px; cursor: pointer; display: block; color: inherit;
+    transition: background .1s; background: none;
   }
   .llp-thread-item:hover { background: #f4f4f5; }
   .llp-thread-label { font-size: 12px; color: #71717a; margin-bottom: 2px; }
@@ -77,8 +77,53 @@
     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=`
+
+  /* Chat view */
+  .llp-chat-back {
+    background: none; border: none; cursor: pointer; font-size: 13px;
+    color: #6366f1; padding: 0; margin-bottom: 12px; font-weight: 500;
+    display: flex; align-items: center; gap: 4px;
+  }
+  .llp-chat-back:hover { text-decoration: underline; }
+  .llp-chat-messages {
+    display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;
+    max-height: 320px; overflow-y: auto;
+  }
+  .llp-chat-bubble {
+    padding: 8px 12px; border-radius: 12px; font-size: 13px;
+    line-height: 1.45; max-width: 85%; word-wrap: break-word;
+    white-space: pre-wrap;
+  }
+  .llp-chat-inbound {
+    background: #f4f4f5; color: #18181b; align-self: flex-start;
+    border-bottom-left-radius: 4px;
+  }
+  .llp-chat-outbound {
+    background: #18181b; color: #fff; align-self: flex-end;
+    border-bottom-right-radius: 4px;
+  }
+  .llp-chat-time {
+    font-size: 10px; color: #a1a1aa; margin-top: 2px;
+  }
+  .llp-chat-time-right { text-align: right; }
+  .llp-chat-reply {
+    display: flex; gap: 8px; border-top: 1px solid #e4e4e7; padding-top: 12px;
+  }
+  .llp-chat-reply-input {
+    flex: 1; padding: 8px 10px; border: 1px solid #d4d4d8; border-radius: 8px;
+    font-size: 13px; font-family: inherit; color: #18181b;
+    resize: none; min-height: 36px; max-height: 80px; box-sizing: border-box;
+  }
+  .llp-chat-reply-input:focus { outline: none; border-color: #18181b; }
+  .llp-chat-send {
+    padding: 8px 14px; background: #18181b; color: #fff; border: none;
+    border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
+    transition: opacity .15s; white-space: nowrap; align-self: flex-end;
+  }
+  .llp-chat-send:hover { opacity: .85; }
+  .llp-chat-send:disabled { opacity: .5; cursor: not-allowed; }
+  `;function n(e,t={},o=[]){let l=document.createElement(e);for(let[a,s]of Object.entries(t))a==="class"?l.className=s:a==="style"?l.setAttribute("style",s):a.startsWith("on")&&typeof s=="function"?l.addEventListener(a.slice(2),s):l.setAttribute(a,String(s));for(let a of o)l.appendChild(typeof a=="string"?document.createTextNode(a):a);return l}function z(e,t,o=""){let l=document.createElement("input");return l.type=e,l.id=t,l.placeholder=o,l.className="llp-input",l}function V(e,t=""){let o=document.createElement("textarea");return o.id=e,o.placeholder=t,o.className="llp-textarea",o}function Y(e,t){let o=document.createElement("select");o.id=e,o.className="llp-select";for(let l of t){let a=document.createElement("option");a.value=l.value,a.textContent=l.label,o.appendChild(a)}return o}function h(){if(!v)return;let e=v.querySelector(".llp-body");e.innerHTML="",b==="contact"?G(e):b==="privacy"?Q(e):b==="threads"?X(e):b==="thread-detail"&&ee(e),L&&(L.style.display=b==="thread-detail"?"none":"flex")}function G(e,t=""){let o=!!(T&&m),l=n("label",{class:"llp-label"},["Name"]),a=z("text","llp-name","Jane Smith");T&&(a.value=T);let s=n("label",{class:"llp-label"},["Email"]),r=z("email","llp-email","jane@example.com");(t||m)&&(r.value=t||m);let u=n("label",{class:"llp-label"},["Message"]),p=V("llp-message","How can we help?"),c=n("div",{class:"llp-error",style:"display:none"}),i=n("button",{class:"llp-btn-submit"},["Send message"]);i.onclick=async()=>{let d=a.value.trim(),g=r.value.trim(),x=p.value.trim();if(c.style.display="none",!d||!g||!x){c.textContent="Please fill in all fields.",c.style.display="block";return}i.disabled=!0,i.textContent="Sending\u2026";try{let w=await S("/api/contact",{api_key:k,name:d,email:g,message:x});if(w.ok)m=g,localStorage.setItem("heedb_email",g),B(),A(e,"Message sent!","We'll get back to you soon. Check your inbox for a confirmation email.");else{let ne=await w.json();c.textContent=ne.error||"Something went wrong.",c.style.display="block",i.disabled=!1,i.textContent="Send message"}}catch(w){c.textContent="Network error. Please try again.",c.style.display="block",i.disabled=!1,i.textContent="Send message"}},o?e.append(u,p,c,i):e.append(l,a,s,r,u,p,c,i)}function Q(e){let t=!!(T&&m),o=n("label",{class:"llp-label"},["Name"]),l=z("text","llp-priv-name","Jane Smith");T&&(l.value=T);let a=n("label",{class:"llp-label"},["Email"]),s=z("email","llp-priv-email","jane@example.com");m&&(s.value=m);let r=n("label",{class:"llp-label"},["Request type"]),u=Y("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"}]),p=n("div",{class:"llp-error",style:"display:none"}),c=n("button",{class:"llp-btn-submit"},["Submit request"]);c.onclick=async()=>{let i=l.value.trim(),d=s.value.trim(),g=u.value;if(p.style.display="none",!i||!d){p.textContent="Please fill in all fields.",p.style.display="block";return}c.disabled=!0,c.textContent="Submitting\u2026";try{let x=await S("/api/privacy-request",{api_key:k,name:i,email:d,request_type:g});if(x.ok)m=d,localStorage.setItem("heedb_email",d),B(),A(e,"Request submitted!","Your privacy request has been received. We'll respond within 30 days.");else{let w=await x.json();p.textContent=w.error||"Something went wrong.",p.style.display="block",c.disabled=!1,c.textContent="Submit request"}}catch(x){p.textContent="Network error. Please try again.",p.style.display="block",c.disabled=!1,c.textContent="Submit request"}},t?e.append(r,u,p,c):e.append(o,l,a,s,r,u,p,c)}async function X(e){var t;if(!f){e.innerHTML="";let o=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."]),l=n("div",{class:"llp-new-msg"}),a=n("button",{},["+ Send a message"]);a.onclick=()=>{b="contact",E("contact"),h()},l.appendChild(a),e.append(o,l);return}e.innerHTML='<p style="color:#71717a;text-align:center">Loading\u2026</p>';try{let{threads:o}=await J(m);if(e.innerHTML="",o.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 o){let r=n("span",{class:`llp-badge llp-badge-${s.status}`},[s.status]),u=n("div",{class:"llp-thread-label"},[s.type==="privacy"?"Privacy request":"Message"," \u2022 "]);u.appendChild(r);let p=n("div",{class:"llp-thread-text"},[(t=s.preview)!=null?t:""]),c=new Date(s.createdAt).toLocaleDateString(),i=n("div",{class:"llp-thread-meta"},[c]),d=n("div",{class:"llp-thread-item"});d.append(u,p,i),d.onclick=()=>Z(s.id),e.appendChild(d)}let l=n("div",{class:"llp-new-msg"}),a=n("button",{},["+ Send a new message"]);a.onclick=()=>{b="contact",E("contact"),h()},l.appendChild(a),e.appendChild(l)}catch(o){e.innerHTML='<p style="color:#ef4444;text-align:center">Failed to load messages.</p>'}}function Z(e){I=e,b="thread-detail",h()}async function ee(e){e.innerHTML='<p style="color:#71717a;text-align:center">Loading\u2026</p>';let t=n("button",{class:"llp-chat-back"},["\u2190 Back to messages"]);t.onclick=()=>{b="threads",E("threads"),h()};try{let l=(await K(I)).messages||[];e.innerHTML="",e.style.padding="12px",e.appendChild(t);let a=n("div",{class:"llp-chat-messages"});for(let i of l){let d=i.direction==="inbound",g=n("div",{style:`display:flex;flex-direction:column;${d?"align-items:flex-start":"align-items:flex-end"}`}),x=n("div",{class:`llp-chat-bubble ${d?"llp-chat-inbound":"llp-chat-outbound"}`},[i.body]),w=n("div",{class:`llp-chat-time ${d?"":"llp-chat-time-right"}`},[te(i.createdAt)]);g.append(x,w),a.appendChild(g)}e.appendChild(a),requestAnimationFrame(()=>{a.scrollTop=a.scrollHeight});let s=n("div",{class:"llp-chat-reply"}),r=document.createElement("textarea");r.className="llp-chat-reply-input",r.placeholder="Type a reply\u2026",r.rows=1,r.addEventListener("input",()=>{r.style.height="auto",r.style.height=Math.min(r.scrollHeight,80)+"px"});let u=n("button",{class:"llp-chat-send"},["Send"]),p=n("div",{class:"llp-error",style:"display:none;margin-top:4px"});async function c(){let i=r.value.trim();if(i){u.disabled=!0,u.textContent="\u2026",p.style.display="none";try{let d=await U(I,i);if(d.ok){let g=n("div",{style:"display:flex;flex-direction:column;align-items:flex-start"}),x=n("div",{class:"llp-chat-bubble llp-chat-inbound"},[i]),w=n("div",{class:"llp-chat-time"},["Just now"]);g.append(x,w),a.appendChild(g),a.scrollTop=a.scrollHeight,r.value="",r.style.height="auto"}else{let g=await d.json();p.textContent=g.error||"Failed to send.",p.style.display="block"}}catch(d){p.textContent="Network error. Please try again.",p.style.display="block"}u.disabled=!1,u.textContent="Send"}}u.onclick=c,r.addEventListener("keydown",i=>{i.key==="Enter"&&!i.shiftKey&&(i.preventDefault(),c())}),s.append(r,u),e.append(s,p),requestAnimationFrame(()=>r.focus())}catch(o){e.innerHTML="",e.appendChild(t),e.appendChild(n("p",{style:"color:#ef4444;text-align:center"},["Failed to load conversation."]))}}function te(e){let t=new Date(e),l=new Date().getTime()-t.getTime(),a=Math.floor(l/6e4);if(a<1)return"Just now";if(a<60)return`${a}m ago`;let s=Math.floor(a/60);return s<24?`${s}h ago`:t.toLocaleDateString()}function A(e,t,o){e.innerHTML="";let l=n("div",{class:"llp-success"});l.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()})();})();
+      <h3>${t}</h3>
+      <p>${o}</p>
+    `;let a=n("a",{href:`${C}/app?email=${encodeURIComponent(m)}`,target:"_blank",style:"display:inline-block;margin-top:12px;color:#18181b;font-size:13px;font-weight:600"},["View your messages \u2192"]);l.appendChild(a),e.appendChild(l)}let L=null,H=null;function E(e){b=e,L&&L.querySelectorAll(".llp-tab").forEach(t=>{t.classList.toggle("active",t.dataset.mode===e)})}function B(){H&&(H.style.display=m&&f?"":"none")}function j(){let e=document.createElement("style");e.textContent=W,document.head.appendChild(e),P=n("button",{class:"llp-btn",title:"Contact us","aria-label":"Open contact widget"},["\u{1F4AC}"]),P.onclick=N,document.body.appendChild(P),v=n("div",{class:"llp-panel",style:"display:none"});let t=n("div",{class:"llp-header"}),o=n("h2",{},["Contact us"]),l=n("button",{class:"llp-close","aria-label":"Close"},["\u2715"]);l.onclick=N,t.append(o,l),L=n("div",{class:"llp-tabs"});let a=n("button",{class:"llp-tab active","data-mode":"contact"},["Message"]),s=n("button",{class:"llp-tab","data-mode":"privacy"},["Privacy"]);H=n("button",{class:"llp-tab","data-mode":"threads"},["Messages"]),H.style.display=m&&f?"":"none",a.onclick=()=>{E("contact"),h()},s.onclick=()=>{E("privacy"),h()},H.onclick=()=>{E("threads"),h()},L.append(a,s,H);let r=n("div",{class:"llp-body"});v.append(t,L,r),document.body.appendChild(v)}function N(){M=!M,v&&(v.style.display=M?"flex":"none",M&&(m&&f&&b!=="privacy"&&b!=="thread-detail"&&(b="threads",E("threads")),h()))}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",j):j()})();})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heedb/web-sdk",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Drop-in feedback widget with email conversations for any website",
   "license": "MIT",
   "repository": {
@@ -24,6 +24,7 @@
   },
   "files": [
     "dist",
+    "widget.js",
     "README.md"
   ],
   "scripts": {

package/widget.js

@@ -0,0 +1,129 @@
+/* Heedb Widget — https://heedb.com */
+"use strict";(()=>{(function(){var $,D,q,O,R;let y=document.currentScript||document.querySelector("script[data-api-key]"),k=($=y==null?void 0:y.getAttribute("data-api-key"))!=null?$:"",_=(D=y==null?void 0:y.src)!=null?D:"",C=(y==null?void 0:y.getAttribute("data-host"))||(_?new URL(_).origin:"");if(!k){console.warn("[Heedb] Missing data-api-key on <script> tag.");return}let M=!1,b="contact",I="",T=(q=localStorage.getItem("heedb_name"))!=null?q:"",m=(O=localStorage.getItem("heedb_email"))!=null?O:"",f=(R=localStorage.getItem("heedb_token"))!=null?R:"",v=null,P=null;async function F(e,t){try{let o=await S("/api/threads/token",{api_key:k,email:e,userHash:t});if(o.ok){let l=await o.json();if(l.widgetToken){f=l.widgetToken,localStorage.setItem("heedb_token",l.widgetToken);return}}f="",localStorage.removeItem("heedb_token")}catch(o){f="",localStorage.removeItem("heedb_token")}}window.Heedb={init(e={}){e.name&&(T=e.name,localStorage.setItem("heedb_name",e.name)),e.email&&(m=e.email,localStorage.setItem("heedb_email",e.email),e.userHash?F(e.email,e.userHash).then(()=>{B(),M&&v&&h()}):(B(),M&&v&&h()))}};function S(e,t){return fetch(`${C}${e}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)})}function J(e){let t=new URL(`${C}/api/threads`);return t.searchParams.set("api_key",k),t.searchParams.set("email",e),f&&t.searchParams.set("token",f),fetch(t.toString()).then(o=>o.json())}function K(e){let t=new URL(`${C}/api/threads/${e}`);return t.searchParams.set("api_key",k),t.searchParams.set("email",m),t.searchParams.set("token",f),fetch(t.toString()).then(o=>o.json())}function U(e,t){return S(`/api/threads/${e}/reply`,{api_key:k,email:m,token:f,message:t})}let W=`
+  .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: 370px; max-height: 560px; 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; cursor: pointer; display: block; color: inherit;
+    transition: background .1s; background: none;
+  }
+  .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; }
+
+  /* Chat view */
+  .llp-chat-back {
+    background: none; border: none; cursor: pointer; font-size: 13px;
+    color: #6366f1; padding: 0; margin-bottom: 12px; font-weight: 500;
+    display: flex; align-items: center; gap: 4px;
+  }
+  .llp-chat-back:hover { text-decoration: underline; }
+  .llp-chat-messages {
+    display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;
+    max-height: 320px; overflow-y: auto;
+  }
+  .llp-chat-bubble {
+    padding: 8px 12px; border-radius: 12px; font-size: 13px;
+    line-height: 1.45; max-width: 85%; word-wrap: break-word;
+    white-space: pre-wrap;
+  }
+  .llp-chat-inbound {
+    background: #f4f4f5; color: #18181b; align-self: flex-start;
+    border-bottom-left-radius: 4px;
+  }
+  .llp-chat-outbound {
+    background: #18181b; color: #fff; align-self: flex-end;
+    border-bottom-right-radius: 4px;
+  }
+  .llp-chat-time {
+    font-size: 10px; color: #a1a1aa; margin-top: 2px;
+  }
+  .llp-chat-time-right { text-align: right; }
+  .llp-chat-reply {
+    display: flex; gap: 8px; border-top: 1px solid #e4e4e7; padding-top: 12px;
+  }
+  .llp-chat-reply-input {
+    flex: 1; padding: 8px 10px; border: 1px solid #d4d4d8; border-radius: 8px;
+    font-size: 13px; font-family: inherit; color: #18181b;
+    resize: none; min-height: 36px; max-height: 80px; box-sizing: border-box;
+  }
+  .llp-chat-reply-input:focus { outline: none; border-color: #18181b; }
+  .llp-chat-send {
+    padding: 8px 14px; background: #18181b; color: #fff; border: none;
+    border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
+    transition: opacity .15s; white-space: nowrap; align-self: flex-end;
+  }
+  .llp-chat-send:hover { opacity: .85; }
+  .llp-chat-send:disabled { opacity: .5; cursor: not-allowed; }
+  `;function n(e,t={},o=[]){let l=document.createElement(e);for(let[a,s]of Object.entries(t))a==="class"?l.className=s:a==="style"?l.setAttribute("style",s):a.startsWith("on")&&typeof s=="function"?l.addEventListener(a.slice(2),s):l.setAttribute(a,String(s));for(let a of o)l.appendChild(typeof a=="string"?document.createTextNode(a):a);return l}function z(e,t,o=""){let l=document.createElement("input");return l.type=e,l.id=t,l.placeholder=o,l.className="llp-input",l}function V(e,t=""){let o=document.createElement("textarea");return o.id=e,o.placeholder=t,o.className="llp-textarea",o}function Y(e,t){let o=document.createElement("select");o.id=e,o.className="llp-select";for(let l of t){let a=document.createElement("option");a.value=l.value,a.textContent=l.label,o.appendChild(a)}return o}function h(){if(!v)return;let e=v.querySelector(".llp-body");e.innerHTML="",b==="contact"?G(e):b==="privacy"?Q(e):b==="threads"?X(e):b==="thread-detail"&&ee(e),L&&(L.style.display=b==="thread-detail"?"none":"flex")}function G(e,t=""){let o=!!(T&&m),l=n("label",{class:"llp-label"},["Name"]),a=z("text","llp-name","Jane Smith");T&&(a.value=T);let s=n("label",{class:"llp-label"},["Email"]),r=z("email","llp-email","jane@example.com");(t||m)&&(r.value=t||m);let u=n("label",{class:"llp-label"},["Message"]),p=V("llp-message","How can we help?"),c=n("div",{class:"llp-error",style:"display:none"}),i=n("button",{class:"llp-btn-submit"},["Send message"]);i.onclick=async()=>{let d=a.value.trim(),g=r.value.trim(),x=p.value.trim();if(c.style.display="none",!d||!g||!x){c.textContent="Please fill in all fields.",c.style.display="block";return}i.disabled=!0,i.textContent="Sending\u2026";try{let w=await S("/api/contact",{api_key:k,name:d,email:g,message:x});if(w.ok)m=g,localStorage.setItem("heedb_email",g),B(),A(e,"Message sent!","We'll get back to you soon. Check your inbox for a confirmation email.");else{let ne=await w.json();c.textContent=ne.error||"Something went wrong.",c.style.display="block",i.disabled=!1,i.textContent="Send message"}}catch(w){c.textContent="Network error. Please try again.",c.style.display="block",i.disabled=!1,i.textContent="Send message"}},o?e.append(u,p,c,i):e.append(l,a,s,r,u,p,c,i)}function Q(e){let t=!!(T&&m),o=n("label",{class:"llp-label"},["Name"]),l=z("text","llp-priv-name","Jane Smith");T&&(l.value=T);let a=n("label",{class:"llp-label"},["Email"]),s=z("email","llp-priv-email","jane@example.com");m&&(s.value=m);let r=n("label",{class:"llp-label"},["Request type"]),u=Y("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"}]),p=n("div",{class:"llp-error",style:"display:none"}),c=n("button",{class:"llp-btn-submit"},["Submit request"]);c.onclick=async()=>{let i=l.value.trim(),d=s.value.trim(),g=u.value;if(p.style.display="none",!i||!d){p.textContent="Please fill in all fields.",p.style.display="block";return}c.disabled=!0,c.textContent="Submitting\u2026";try{let x=await S("/api/privacy-request",{api_key:k,name:i,email:d,request_type:g});if(x.ok)m=d,localStorage.setItem("heedb_email",d),B(),A(e,"Request submitted!","Your privacy request has been received. We'll respond within 30 days.");else{let w=await x.json();p.textContent=w.error||"Something went wrong.",p.style.display="block",c.disabled=!1,c.textContent="Submit request"}}catch(x){p.textContent="Network error. Please try again.",p.style.display="block",c.disabled=!1,c.textContent="Submit request"}},t?e.append(r,u,p,c):e.append(o,l,a,s,r,u,p,c)}async function X(e){var t;if(!f){e.innerHTML="";let o=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."]),l=n("div",{class:"llp-new-msg"}),a=n("button",{},["+ Send a message"]);a.onclick=()=>{b="contact",E("contact"),h()},l.appendChild(a),e.append(o,l);return}e.innerHTML='<p style="color:#71717a;text-align:center">Loading\u2026</p>';try{let{threads:o}=await J(m);if(e.innerHTML="",o.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 o){let r=n("span",{class:`llp-badge llp-badge-${s.status}`},[s.status]),u=n("div",{class:"llp-thread-label"},[s.type==="privacy"?"Privacy request":"Message"," \u2022 "]);u.appendChild(r);let p=n("div",{class:"llp-thread-text"},[(t=s.preview)!=null?t:""]),c=new Date(s.createdAt).toLocaleDateString(),i=n("div",{class:"llp-thread-meta"},[c]),d=n("div",{class:"llp-thread-item"});d.append(u,p,i),d.onclick=()=>Z(s.id),e.appendChild(d)}let l=n("div",{class:"llp-new-msg"}),a=n("button",{},["+ Send a new message"]);a.onclick=()=>{b="contact",E("contact"),h()},l.appendChild(a),e.appendChild(l)}catch(o){e.innerHTML='<p style="color:#ef4444;text-align:center">Failed to load messages.</p>'}}function Z(e){I=e,b="thread-detail",h()}async function ee(e){e.innerHTML='<p style="color:#71717a;text-align:center">Loading\u2026</p>';let t=n("button",{class:"llp-chat-back"},["\u2190 Back to messages"]);t.onclick=()=>{b="threads",E("threads"),h()};try{let l=(await K(I)).messages||[];e.innerHTML="",e.style.padding="12px",e.appendChild(t);let a=n("div",{class:"llp-chat-messages"});for(let i of l){let d=i.direction==="inbound",g=n("div",{style:`display:flex;flex-direction:column;${d?"align-items:flex-start":"align-items:flex-end"}`}),x=n("div",{class:`llp-chat-bubble ${d?"llp-chat-inbound":"llp-chat-outbound"}`},[i.body]),w=n("div",{class:`llp-chat-time ${d?"":"llp-chat-time-right"}`},[te(i.createdAt)]);g.append(x,w),a.appendChild(g)}e.appendChild(a),requestAnimationFrame(()=>{a.scrollTop=a.scrollHeight});let s=n("div",{class:"llp-chat-reply"}),r=document.createElement("textarea");r.className="llp-chat-reply-input",r.placeholder="Type a reply\u2026",r.rows=1,r.addEventListener("input",()=>{r.style.height="auto",r.style.height=Math.min(r.scrollHeight,80)+"px"});let u=n("button",{class:"llp-chat-send"},["Send"]),p=n("div",{class:"llp-error",style:"display:none;margin-top:4px"});async function c(){let i=r.value.trim();if(i){u.disabled=!0,u.textContent="\u2026",p.style.display="none";try{let d=await U(I,i);if(d.ok){let g=n("div",{style:"display:flex;flex-direction:column;align-items:flex-start"}),x=n("div",{class:"llp-chat-bubble llp-chat-inbound"},[i]),w=n("div",{class:"llp-chat-time"},["Just now"]);g.append(x,w),a.appendChild(g),a.scrollTop=a.scrollHeight,r.value="",r.style.height="auto"}else{let g=await d.json();p.textContent=g.error||"Failed to send.",p.style.display="block"}}catch(d){p.textContent="Network error. Please try again.",p.style.display="block"}u.disabled=!1,u.textContent="Send"}}u.onclick=c,r.addEventListener("keydown",i=>{i.key==="Enter"&&!i.shiftKey&&(i.preventDefault(),c())}),s.append(r,u),e.append(s,p),requestAnimationFrame(()=>r.focus())}catch(o){e.innerHTML="",e.appendChild(t),e.appendChild(n("p",{style:"color:#ef4444;text-align:center"},["Failed to load conversation."]))}}function te(e){let t=new Date(e),l=new Date().getTime()-t.getTime(),a=Math.floor(l/6e4);if(a<1)return"Just now";if(a<60)return`${a}m ago`;let s=Math.floor(a/60);return s<24?`${s}h ago`:t.toLocaleDateString()}function A(e,t,o){e.innerHTML="";let l=n("div",{class:"llp-success"});l.innerHTML=`
+      <div class="llp-success-icon">\u2705</div>
+      <h3>${t}</h3>
+      <p>${o}</p>
+    `;let a=n("a",{href:`${C}/app?email=${encodeURIComponent(m)}`,target:"_blank",style:"display:inline-block;margin-top:12px;color:#18181b;font-size:13px;font-weight:600"},["View your messages \u2192"]);l.appendChild(a),e.appendChild(l)}let L=null,H=null;function E(e){b=e,L&&L.querySelectorAll(".llp-tab").forEach(t=>{t.classList.toggle("active",t.dataset.mode===e)})}function B(){H&&(H.style.display=m&&f?"":"none")}function j(){let e=document.createElement("style");e.textContent=W,document.head.appendChild(e),P=n("button",{class:"llp-btn",title:"Contact us","aria-label":"Open contact widget"},["\u{1F4AC}"]),P.onclick=N,document.body.appendChild(P),v=n("div",{class:"llp-panel",style:"display:none"});let t=n("div",{class:"llp-header"}),o=n("h2",{},["Contact us"]),l=n("button",{class:"llp-close","aria-label":"Close"},["\u2715"]);l.onclick=N,t.append(o,l),L=n("div",{class:"llp-tabs"});let a=n("button",{class:"llp-tab active","data-mode":"contact"},["Message"]),s=n("button",{class:"llp-tab","data-mode":"privacy"},["Privacy"]);H=n("button",{class:"llp-tab","data-mode":"threads"},["Messages"]),H.style.display=m&&f?"":"none",a.onclick=()=>{E("contact"),h()},s.onclick=()=>{E("privacy"),h()},H.onclick=()=>{E("threads"),h()},L.append(a,s,H);let r=n("div",{class:"llp-body"});v.append(t,L,r),document.body.appendChild(v)}function N(){M=!M,v&&(v.style.display=M?"flex":"none",M&&(m&&f&&b!=="privacy"&&b!=="thread-detail"&&(b="threads",E("threads")),h()))}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",j):j()})();})();