@heedb/web-sdk 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/widget.js +90 -32
- package/package.json +2 -1
- package/widget.js +142 -0
package/README.md
CHANGED
|
@@ -14,7 +14,7 @@ The fastest way — no build step, no dependencies. Add one line before `</body>
|
|
|
14
14
|
|
|
15
15
|
```html
|
|
16
16
|
<script
|
|
17
|
-
src="https://cdn.jsdelivr.net/npm/@heedb/web-sdk/
|
|
17
|
+
src="https://cdn.jsdelivr.net/npm/@heedb/web-sdk/widget.js"
|
|
18
18
|
data-api-key="YOUR_API_KEY"
|
|
19
19
|
data-host="https://heedb.com"
|
|
20
20
|
></script>
|
|
@@ -391,7 +391,7 @@ Use the CDN script tag — no build tools needed:
|
|
|
391
391
|
|
|
392
392
|
```html
|
|
393
393
|
<script
|
|
394
|
-
src="https://cdn.jsdelivr.net/npm/@heedb/web-sdk/
|
|
394
|
+
src="https://cdn.jsdelivr.net/npm/@heedb/web-sdk/widget.js"
|
|
395
395
|
data-api-key="YOUR_API_KEY"
|
|
396
396
|
data-host="https://heedb.com"
|
|
397
397
|
></script>
|
package/dist/widget.js
CHANGED
|
@@ -1,24 +1,28 @@
|
|
|
1
1
|
/* Heedb Widget — https://heedb.com */
|
|
2
|
-
"use strict";(()=>{(function(){var
|
|
2
|
+
"use strict";(()=>{(function(){var W,U,K,J,G;let k=document.currentScript||document.querySelector("script[data-api-key]"),L=(W=k==null?void 0:k.getAttribute("data-api-key"))!=null?W:"",N=(U=k==null?void 0:k.src)!=null?U:"",_=(k==null?void 0:k.getAttribute("data-host"))||(N?new URL(N).origin:"");if(!L){console.warn("[Heedb] Missing data-api-key on <script> tag.");return}let p={},m=!1,Y={primary:"#18181b",text:"#18181b",bg:"#ffffff"},Q={primary:"#e4e4e7",text:"#e4e4e7",bg:"#1a1a1a"};function q(){return p.mode==="dark"?!0:p.mode==="light"?!1:p.mode==="system"?window.matchMedia("(prefers-color-scheme: dark)").matches:!1}function V(){return m?Q:Y}function S(e,t){let n=p[e];return n!=null?String(n):t}let C=!1,b="contact",A="",E=(K=localStorage.getItem("heedb_name"))!=null?K:"",f=(J=localStorage.getItem("heedb_email"))!=null?J:"",x=(G=localStorage.getItem("heedb_token"))!=null?G:"",y=null,H=null;async function X(e,t){try{let n=await P("/api/threads/token",{api_key:L,email:e,userHash:t});if(n.ok){let o=await n.json();if(o.widgetToken){x=o.widgetToken,localStorage.setItem("heedb_token",o.widgetToken);return}}x="",localStorage.removeItem("heedb_token")}catch(n){x="",localStorage.removeItem("heedb_token")}}window.Heedb={init(e={}){e.name&&(E=e.name,localStorage.setItem("heedb_name",e.name)),e.email&&(f=e.email,localStorage.setItem("heedb_email",e.email),e.userHash?X(e.email,e.userHash).then(()=>{I(),C&&y&&v()}):(I(),C&&y&&v()))},reset(){E="",f="",x="",localStorage.removeItem("heedb_name"),localStorage.removeItem("heedb_email"),localStorage.removeItem("heedb_token"),b="contact",C=!1,y&&(y.style.display="none"),I()}};function P(e,t){return fetch(`${_}${e}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)})}function Z(e){let t=new URL(`${_}/api/threads`);return t.searchParams.set("api_key",L),t.searchParams.set("email",e),x&&t.searchParams.set("token",x),fetch(t.toString()).then(n=>n.json())}function ee(e){let t=new URL(`${_}/api/threads/${e}`);return t.searchParams.set("api_key",L),t.searchParams.set("email",f),t.searchParams.set("token",x),fetch(t.toString()).then(n=>n.json())}function te(e,t){return P(`/api/threads/${e}/reply`,{api_key:L,email:f,token:x,message:t})}async function ne(){var e;try{let t=new URL(`${_}/api/widget-config`);t.searchParams.set("api_key",L);let n=await fetch(t.toString());if(n.ok)return(e=(await n.json()).config)!=null?e:{}}catch(t){}return{}}function R(){var c;let e=V(),t=S(m?"darkPrimaryColor":"primaryColor",e.primary),n=S(m?"darkTextColor":"textColor",e.text),o=S(m?"darkBgColor":"bgColor",e.bg),l=(c=p.borderRadius)!=null?c:16,s=p.fontFamily||"system-ui, -apple-system, sans-serif",d=p.position==="bottom-left",u=l>=20?"50%":`${l}px`,i=Math.round(l*.5);return`
|
|
3
3
|
.llp-btn {
|
|
4
|
-
position: fixed; bottom: 24px; right: 24px; z-index: 999998;
|
|
5
|
-
width: 52px; height: 52px; border-radius:
|
|
6
|
-
background:
|
|
4
|
+
position: fixed; bottom: 24px; ${d?"left: 24px":"right: 24px"}; z-index: 999998;
|
|
5
|
+
width: 52px; height: 52px; border-radius: ${u}; border: none;
|
|
6
|
+
background: ${t}; color: #fff; font-size: 22px; cursor: pointer;
|
|
7
7
|
box-shadow: 0 4px 16px rgba(0,0,0,.25);
|
|
8
|
-
display: flex; align-items: center; justify-content: center;
|
|
8
|
+
display: ${p.triggerMode==="embedded"?"none":"flex"}; align-items: center; justify-content: center;
|
|
9
9
|
transition: transform .15s;
|
|
10
10
|
}
|
|
11
11
|
.llp-btn:hover { transform: scale(1.08); }
|
|
12
|
+
.llp-btn-label { font-size: 14px; font-weight: 600; margin-left: 6px; }
|
|
13
|
+
.llp-btn-icon { display: flex; align-items: center; justify-content: center; }
|
|
14
|
+
.llp-btn-icon svg { width: 22px; height: 22px; fill: currentColor; }
|
|
15
|
+
.llp-btn:has(.llp-btn-label) { width: auto; padding: 0 18px; gap: 4px; }
|
|
12
16
|
.llp-panel {
|
|
13
|
-
position: fixed; bottom: 88px; right: 24px; z-index: 999999;
|
|
14
|
-
width:
|
|
15
|
-
background:
|
|
17
|
+
position: fixed; bottom: 88px; ${d?"left: 24px":"right: 24px"}; z-index: 999999;
|
|
18
|
+
width: 370px; max-height: 560px; border-radius: ${l}px;
|
|
19
|
+
background: ${o}; box-shadow: 0 8px 32px rgba(0,0,0,.18);
|
|
16
20
|
display: flex; flex-direction: column; overflow: hidden;
|
|
17
|
-
font-family:
|
|
21
|
+
font-family: ${s}; font-size: 14px; color: ${n};
|
|
18
22
|
transition: opacity .15s, transform .15s;
|
|
19
23
|
}
|
|
20
24
|
.llp-header {
|
|
21
|
-
background:
|
|
25
|
+
background: ${t}; color: #fff; padding: 14px 16px;
|
|
22
26
|
display: flex; align-items: center; justify-content: space-between;
|
|
23
27
|
}
|
|
24
28
|
.llp-header h2 { margin: 0; font-size: 15px; font-weight: 600; }
|
|
@@ -27,29 +31,29 @@
|
|
|
27
31
|
font-size: 18px; line-height: 1; padding: 0;
|
|
28
32
|
}
|
|
29
33
|
.llp-tabs {
|
|
30
|
-
display: flex; border-bottom: 1px solid #e4e4e7;
|
|
34
|
+
display: flex; border-bottom: 1px solid ${m?"#333":"#e4e4e7"};
|
|
31
35
|
}
|
|
32
36
|
.llp-tab {
|
|
33
37
|
flex: 1; padding: 10px 0; border: none; background: none;
|
|
34
38
|
cursor: pointer; font-size: 13px; font-weight: 500; color: #71717a;
|
|
35
39
|
border-bottom: 2px solid transparent; margin-bottom: -1px;
|
|
36
40
|
}
|
|
37
|
-
.llp-tab.active { color:
|
|
41
|
+
.llp-tab.active { color: ${n}; border-bottom-color: ${t}; }
|
|
38
42
|
.llp-body { padding: 16px; overflow-y: auto; flex: 1; }
|
|
39
43
|
.llp-label { display: block; font-size: 12px; font-weight: 600; color: #52525b; margin-bottom: 4px; }
|
|
40
44
|
.llp-input, .llp-textarea, .llp-select {
|
|
41
45
|
width: 100%; box-sizing: border-box; padding: 8px 10px;
|
|
42
|
-
border: 1px solid #d4d4d8; border-radius:
|
|
43
|
-
font-size: 13px; color:
|
|
44
|
-
font-family: inherit; background: #
|
|
46
|
+
border: 1px solid ${m?"#444":"#d4d4d8"}; border-radius: ${i}px;
|
|
47
|
+
font-size: 13px; color: ${n}; margin-bottom: 10px;
|
|
48
|
+
font-family: inherit; background: ${m?"#222":o};
|
|
45
49
|
}
|
|
46
50
|
.llp-textarea { min-height: 80px; resize: vertical; }
|
|
47
51
|
.llp-input:focus, .llp-textarea:focus, .llp-select:focus {
|
|
48
|
-
outline: none; border-color:
|
|
52
|
+
outline: none; border-color: ${t};
|
|
49
53
|
}
|
|
50
54
|
.llp-btn-submit {
|
|
51
|
-
width: 100%; padding: 10px; background:
|
|
52
|
-
border: none; border-radius:
|
|
55
|
+
width: 100%; padding: 10px; background: ${t}; color: #fff;
|
|
56
|
+
border: none; border-radius: ${i}px; font-size: 14px; font-weight: 600;
|
|
53
57
|
cursor: pointer; transition: opacity .15s;
|
|
54
58
|
}
|
|
55
59
|
.llp-btn-submit:hover { opacity: .85; }
|
|
@@ -57,28 +61,82 @@
|
|
|
57
61
|
.llp-error { color: #ef4444; font-size: 12px; margin-bottom: 8px; }
|
|
58
62
|
.llp-success { text-align: center; padding: 24px 8px; }
|
|
59
63
|
.llp-success-icon { font-size: 36px; }
|
|
60
|
-
.llp-success h3 { margin: 12px 0 6px; font-size: 15px; color:
|
|
64
|
+
.llp-success h3 { margin: 12px 0 6px; font-size: 15px; color: ${n}; }
|
|
61
65
|
.llp-success p { margin: 0; color: #71717a; font-size: 13px; line-height: 1.5; }
|
|
62
66
|
.llp-thread-item {
|
|
63
|
-
padding: 10px 12px; border: 1px solid #e4e4e7; border-radius:
|
|
64
|
-
margin-bottom: 8px;
|
|
65
|
-
transition: background .1s;
|
|
67
|
+
padding: 10px 12px; border: 1px solid ${m?"#333":"#e4e4e7"}; border-radius: ${i}px;
|
|
68
|
+
margin-bottom: 8px; cursor: pointer; display: block; color: inherit;
|
|
69
|
+
transition: background .1s; background: none;
|
|
66
70
|
}
|
|
67
|
-
.llp-thread-item:hover { background: #f4f4f5; }
|
|
71
|
+
.llp-thread-item:hover { background: ${m?"#252525":"#f4f4f5"}; }
|
|
68
72
|
.llp-thread-label { font-size: 12px; color: #71717a; margin-bottom: 2px; }
|
|
69
|
-
.llp-thread-text { font-size: 13px; color:
|
|
73
|
+
.llp-thread-text { font-size: 13px; color: ${n}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
70
74
|
.llp-thread-meta { font-size: 11px; color: #a1a1aa; margin-top: 3px; }
|
|
71
75
|
.llp-badge { display: inline-block; padding: 1px 6px; border-radius: 9999px; font-size: 10px; font-weight: 600; }
|
|
72
76
|
.llp-badge-open { background: #d1fae5; color: #065f46; }
|
|
73
77
|
.llp-badge-replied { background: #dbeafe; color: #1e40af; }
|
|
74
|
-
.llp-new-msg { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e4e4e7; }
|
|
78
|
+
.llp-new-msg { margin-top: 12px; padding-top: 12px; border-top: 1px solid ${m?"#333":"#e4e4e7"}; }
|
|
75
79
|
.llp-new-msg button {
|
|
76
|
-
width: 100%; padding: 8px; background: none; border: 1px solid #d4d4d8;
|
|
77
|
-
border-radius:
|
|
80
|
+
width: 100%; padding: 8px; background: none; border: 1px solid ${m?"#444":"#d4d4d8"};
|
|
81
|
+
border-radius: ${i}px; font-size: 13px; cursor: pointer; color: ${m?"#999":"#52525b"};
|
|
78
82
|
}
|
|
79
|
-
.llp-new-msg button:hover { background: #f4f4f5; }
|
|
80
|
-
|
|
83
|
+
.llp-new-msg button:hover { background: ${m?"#252525":"#f4f4f5"}; }
|
|
84
|
+
.llp-footer {
|
|
85
|
+
padding: 6px 16px; text-align: center; border-top: 1px solid ${m?"#333":"#f0f0f0"};
|
|
86
|
+
}
|
|
87
|
+
.llp-footer a {
|
|
88
|
+
font-size: 10px; color: #a1a1aa; text-decoration: none; font-weight: 500;
|
|
89
|
+
}
|
|
90
|
+
.llp-footer a:hover { color: #71717a; text-decoration: underline; }
|
|
91
|
+
|
|
92
|
+
/* Chat view */
|
|
93
|
+
.llp-chat-back {
|
|
94
|
+
background: none; border: none; cursor: pointer; font-size: 13px;
|
|
95
|
+
color: ${t}; padding: 0; margin-bottom: 12px; font-weight: 500;
|
|
96
|
+
display: flex; align-items: center; gap: 4px;
|
|
97
|
+
}
|
|
98
|
+
.llp-chat-back:hover { text-decoration: underline; }
|
|
99
|
+
.llp-chat-messages {
|
|
100
|
+
display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;
|
|
101
|
+
max-height: 320px; overflow-y: auto;
|
|
102
|
+
}
|
|
103
|
+
.llp-chat-bubble {
|
|
104
|
+
padding: 8px 12px; border-radius: ${Math.max(i,8)}px; font-size: 13px;
|
|
105
|
+
line-height: 1.45; max-width: 85%; word-wrap: break-word;
|
|
106
|
+
white-space: pre-wrap;
|
|
107
|
+
}
|
|
108
|
+
.llp-chat-inbound {
|
|
109
|
+
background: ${m?"#252525":"#f4f4f5"}; color: ${n}; align-self: flex-start;
|
|
110
|
+
border-bottom-left-radius: 4px;
|
|
111
|
+
}
|
|
112
|
+
.llp-chat-outbound {
|
|
113
|
+
background: ${t}; color: #fff; align-self: flex-end;
|
|
114
|
+
border-bottom-right-radius: 4px;
|
|
115
|
+
}
|
|
116
|
+
.llp-chat-time {
|
|
117
|
+
font-size: 10px; color: #a1a1aa; margin-top: 2px;
|
|
118
|
+
}
|
|
119
|
+
.llp-chat-time-right { text-align: right; }
|
|
120
|
+
.llp-chat-reply {
|
|
121
|
+
display: flex; gap: 8px; border-top: 1px solid ${m?"#333":"#e4e4e7"}; padding-top: 12px;
|
|
122
|
+
}
|
|
123
|
+
.llp-chat-reply-input {
|
|
124
|
+
flex: 1; padding: 8px 10px; border: 1px solid ${m?"#444":"#d4d4d8"}; border-radius: ${i}px;
|
|
125
|
+
font-size: 13px; font-family: inherit; color: ${n}; background: ${m?"#222":o};
|
|
126
|
+
resize: none; min-height: 36px; max-height: 80px; box-sizing: border-box;
|
|
127
|
+
}
|
|
128
|
+
.llp-chat-reply-input:focus { outline: none; border-color: ${t}; }
|
|
129
|
+
.llp-chat-send {
|
|
130
|
+
padding: 8px 14px; background: ${t}; color: #fff; border: none;
|
|
131
|
+
border-radius: ${i}px; font-size: 13px; font-weight: 600; cursor: pointer;
|
|
132
|
+
transition: opacity .15s; white-space: nowrap; align-self: flex-end;
|
|
133
|
+
}
|
|
134
|
+
.llp-chat-send:hover { opacity: .85; }
|
|
135
|
+
.llp-chat-send:disabled { opacity: .5; cursor: not-allowed; }
|
|
136
|
+
`}function a(e,t={},n=[]){let o=document.createElement(e);for(let[l,s]of Object.entries(t))l==="class"?o.className=s:l==="style"?o.setAttribute("style",s):l.startsWith("on")&&typeof s=="function"?o.addEventListener(l.slice(2),s):o.setAttribute(l,String(s));for(let l of n)o.appendChild(typeof l=="string"?document.createTextNode(l):l);return o}function j(e,t,n=""){let o=document.createElement("input");return o.type=e,o.id=t,o.placeholder=n,o.className="llp-input",o}function le(e,t=""){let n=document.createElement("textarea");return n.id=e,n.placeholder=t,n.className="llp-textarea",n}function ae(e,t){let n=document.createElement("select");n.id=e,n.className="llp-select";for(let o of t){let l=document.createElement("option");l.value=o.value,l.textContent=o.label,n.appendChild(l)}return n}function v(){if(!y)return;let e=y.querySelector(".llp-body");e.innerHTML="",b==="contact"?oe(e):b==="privacy"?ie(e):b==="threads"?re(e):b==="thread-detail"&&ce(e),M&&(M.style.display=b==="thread-detail"?"none":"flex")}function oe(e,t=""){let n=!!(E&&f),o=a("label",{class:"llp-label"},["Name"]),l=j("text","llp-name","Jane Smith");E&&(l.value=E);let s=a("label",{class:"llp-label"},["Email"]),d=j("email","llp-email","jane@example.com");(t||f)&&(d.value=t||f);let u=a("label",{class:"llp-label"},["Message"]),i=le("llp-message","How can we help?"),c=a("div",{class:"llp-error",style:"display:none"}),r=a("button",{class:"llp-btn-submit"},["Send message"]);r.onclick=async()=>{let g=l.value.trim(),h=d.value.trim(),w=i.value.trim();if(c.style.display="none",!g||!h||!w){c.textContent="Please fill in all fields.",c.style.display="block";return}r.disabled=!0,r.textContent="Sending\u2026";try{let T=await P("/api/contact",{api_key:L,name:g,email:h,message:w});if(T.ok)f=h,localStorage.setItem("heedb_email",h),I(),O(e,"Message sent!","We'll get back to you soon. Check your inbox for a confirmation email.");else{let me=await T.json();c.textContent=me.error||"Something went wrong.",c.style.display="block",r.disabled=!1,r.textContent="Send message"}}catch(T){c.textContent="Network error. Please try again.",c.style.display="block",r.disabled=!1,r.textContent="Send message"}},n?e.append(u,i,c,r):e.append(o,l,s,d,u,i,c,r)}function ie(e){let t=!!(E&&f),n=a("label",{class:"llp-label"},["Name"]),o=j("text","llp-priv-name","Jane Smith");E&&(o.value=E);let l=a("label",{class:"llp-label"},["Email"]),s=j("email","llp-priv-email","jane@example.com");f&&(s.value=f);let d=a("label",{class:"llp-label"},["Request type"]),u=ae("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"}]),i=a("div",{class:"llp-error",style:"display:none"}),c=a("button",{class:"llp-btn-submit"},["Submit request"]);c.onclick=async()=>{let r=o.value.trim(),g=s.value.trim(),h=u.value;if(i.style.display="none",!r||!g){i.textContent="Please fill in all fields.",i.style.display="block";return}c.disabled=!0,c.textContent="Submitting\u2026";try{let w=await P("/api/privacy-request",{api_key:L,name:r,email:g,request_type:h});if(w.ok)f=g,localStorage.setItem("heedb_email",g),I(),O(e,"Request submitted!","Your privacy request has been received. We'll respond within 30 days.");else{let T=await w.json();i.textContent=T.error||"Something went wrong.",i.style.display="block",c.disabled=!1,c.textContent="Submit request"}}catch(w){i.textContent="Network error. Please try again.",i.style.display="block",c.disabled=!1,c.textContent="Submit request"}},t?e.append(d,u,i,c):e.append(n,o,l,s,d,u,i,c)}async function re(e){var t;if(!x){e.innerHTML="";let n=a("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."]),o=a("div",{class:"llp-new-msg"}),l=a("button",{},["+ Send a message"]);l.onclick=()=>{b="contact",$("contact"),v()},o.appendChild(l),e.append(n,o);return}e.innerHTML='<p style="color:#71717a;text-align:center">Loading\u2026</p>';try{let{threads:n}=await Z(f);if(e.innerHTML="",n.length===0){let s=a("p",{style:"color:#71717a;text-align:center;margin:8px 0"},["No open messages yet."]);e.appendChild(s)}else for(let s of n){let d=a("span",{class:`llp-badge llp-badge-${s.status}`},[s.status]),u=a("div",{class:"llp-thread-label"},[s.type==="privacy"?"Privacy request":"Message"," \u2022 "]);u.appendChild(d);let i=a("div",{class:"llp-thread-text"},[(t=s.preview)!=null?t:""]),c=new Date(s.createdAt).toLocaleDateString(),r=a("div",{class:"llp-thread-meta"},[c]),g=a("div",{class:"llp-thread-item"});g.append(u,i,r),g.onclick=()=>se(s.id),e.appendChild(g)}let o=a("div",{class:"llp-new-msg"}),l=a("button",{},["+ Send a new message"]);l.onclick=()=>{b="contact",$("contact"),v()},o.appendChild(l),e.appendChild(o)}catch(n){e.innerHTML='<p style="color:#ef4444;text-align:center">Failed to load messages.</p>'}}function se(e){A=e,b="thread-detail",v()}async function ce(e){e.innerHTML='<p style="color:#71717a;text-align:center">Loading\u2026</p>';let t=a("button",{class:"llp-chat-back"},["\u2190 Back to messages"]);t.onclick=()=>{b="threads",$("threads"),v()};try{let o=(await ee(A)).messages||[];e.innerHTML="",e.style.padding="12px",e.appendChild(t);let l=a("div",{class:"llp-chat-messages"});for(let r of o){let g=r.direction==="inbound",h=a("div",{style:`display:flex;flex-direction:column;${g?"align-items:flex-start":"align-items:flex-end"}`}),w=a("div",{class:`llp-chat-bubble ${g?"llp-chat-inbound":"llp-chat-outbound"}`},[de(r.body)]),T=a("div",{class:`llp-chat-time ${g?"":"llp-chat-time-right"}`},[pe(r.createdAt)]);h.append(w,T),l.appendChild(h)}e.appendChild(l),requestAnimationFrame(()=>{l.scrollTop=l.scrollHeight});let s=a("div",{class:"llp-chat-reply"}),d=document.createElement("textarea");d.className="llp-chat-reply-input",d.placeholder="Type a reply\u2026",d.rows=1,d.addEventListener("input",()=>{d.style.height="auto",d.style.height=Math.min(d.scrollHeight,80)+"px"});let u=a("button",{class:"llp-chat-send"},["Send"]),i=a("div",{class:"llp-error",style:"display:none;margin-top:4px"});async function c(){let r=d.value.trim();if(r){u.disabled=!0,u.textContent="\u2026",i.style.display="none";try{let g=await te(A,r);if(g.ok){let h=a("div",{style:"display:flex;flex-direction:column;align-items:flex-start"}),w=a("div",{class:"llp-chat-bubble llp-chat-inbound"},[r]),T=a("div",{class:"llp-chat-time"},["Just now"]);h.append(w,T),l.appendChild(h),l.scrollTop=l.scrollHeight,d.value="",d.style.height="auto"}else{let h=await g.json();i.textContent=h.error||"Failed to send.",i.style.display="block"}}catch(g){i.textContent="Network error. Please try again.",i.style.display="block"}u.disabled=!1,u.textContent="Send"}}u.onclick=c,d.addEventListener("keydown",r=>{r.key==="Enter"&&!r.shiftKey&&(r.preventDefault(),c())}),s.append(d,u),e.append(s,i),requestAnimationFrame(()=>d.focus())}catch(n){e.innerHTML="",e.appendChild(t),e.appendChild(a("p",{style:"color:#ef4444;text-align:center"},["Failed to load conversation."]))}}function de(e){let t=e.split(`
|
|
137
|
+
`),n=[];for(let o of t){let l=o.trim();if(/^(On|Em|El|Le|Am|Il giorno) .+(<[^>]+@[^>]+>).*(wrote|escreveu|escribi|crit|schrieb|scritto)\s?:$/i.test(l)||/<[^>]+@[^>]+>/.test(l)&&l.endsWith(":")||/^-{3,}$/.test(l))break;/^>{1,}\s/.test(l)||n.push(o)}return n.join(`
|
|
138
|
+
`).trim()}function pe(e){let t=new Date(e),o=new Date().getTime()-t.getTime(),l=Math.floor(o/6e4);if(l<1)return"Just now";if(l<60)return`${l}m ago`;let s=Math.floor(l/60);return s<24?`${s}h ago`:t.toLocaleDateString()}function O(e,t,n){e.innerHTML="";let o=a("div",{class:"llp-success"});o.innerHTML=`
|
|
81
139
|
<div class="llp-success-icon">\u2705</div>
|
|
82
|
-
<h3>${
|
|
83
|
-
<p>${
|
|
84
|
-
|
|
140
|
+
<h3>${t}</h3>
|
|
141
|
+
<p>${n}</p>
|
|
142
|
+
`,e.appendChild(o)}let M=null,z=null;function $(e){b=e,M&&M.querySelectorAll(".llp-tab").forEach(t=>{t.classList.toggle("active",t.dataset.mode===e)})}function I(){z&&(z.style.display=f&&x?"":"none")}let B=null;function ge(){m=q(),B&&(B.textContent=R())}async function F(){p=await ne(),m=q(),B=document.createElement("style"),B.textContent=R(),document.head.appendChild(B),p.mode==="system"&&window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",()=>{ge(),C&&y&&v()});let e=p.triggerIcon?p.triggerIcon:p.triggerEmoji||"\u{1F4AC}",t=p.triggerText||"";if(H=a("button",{class:"llp-btn",title:"Contact us","aria-label":"Open contact widget"}),p.triggerIcon){let r=a("span",{class:"llp-btn-icon"});r.innerHTML=p.triggerIcon,H.appendChild(r)}else H.appendChild(document.createTextNode(p.triggerEmoji||"\u{1F4AC}"));if(t&&H.appendChild(a("span",{class:"llp-btn-label"},[t])),H.onclick=D,document.body.appendChild(H),p.triggerMode==="embedded"&&p.triggerSelector){let r=document.querySelector(p.triggerSelector);r&&r.addEventListener("click",g=>{g.preventDefault(),D()})}y=a("div",{class:"llp-panel",style:"display:none"});let n=a("div",{class:"llp-header"}),o=a("h2",{},[p.headerTitle||"Contact us"]),l=a("button",{class:"llp-close","aria-label":"Close"},["\u2715"]);l.onclick=D,n.append(o,l),M=a("div",{class:"llp-tabs"});let s=a("button",{class:"llp-tab active","data-mode":"contact"},["Message"]),d=a("button",{class:"llp-tab","data-mode":"privacy"},["Privacy"]);z=a("button",{class:"llp-tab","data-mode":"threads"},["Messages"]),z.style.display=f&&x?"":"none",s.onclick=()=>{$("contact"),v()},d.onclick=()=>{$("privacy"),v()},z.onclick=()=>{$("threads"),v()},M.append(s,d,z);let u=a("div",{class:"llp-body"}),i=a("div",{class:"llp-footer"}),c=a("a",{href:"https://heedb.com",target:"_blank",rel:"noopener noreferrer"},["Powered by Heedb"]);i.appendChild(c),y.append(n,M,u,i),document.body.appendChild(y)}function D(){C=!C,y&&(y.style.display=C?"flex":"none",C&&(f&&x&&b!=="privacy"&&b!=="thread-detail"&&(b="threads",$("threads")),v()))}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",F):F()})();})();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@heedb/web-sdk",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Drop-in feedback widget with email conversations for any website",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
},
|
|
25
25
|
"files": [
|
|
26
26
|
"dist",
|
|
27
|
+
"widget.js",
|
|
27
28
|
"README.md"
|
|
28
29
|
],
|
|
29
30
|
"scripts": {
|
package/widget.js
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
/* Heedb Widget — https://heedb.com */
|
|
2
|
+
"use strict";(()=>{(function(){var W,U,K,J,G;let k=document.currentScript||document.querySelector("script[data-api-key]"),L=(W=k==null?void 0:k.getAttribute("data-api-key"))!=null?W:"",N=(U=k==null?void 0:k.src)!=null?U:"",_=(k==null?void 0:k.getAttribute("data-host"))||(N?new URL(N).origin:"");if(!L){console.warn("[Heedb] Missing data-api-key on <script> tag.");return}let p={},m=!1,Y={primary:"#18181b",text:"#18181b",bg:"#ffffff"},Q={primary:"#e4e4e7",text:"#e4e4e7",bg:"#1a1a1a"};function q(){return p.mode==="dark"?!0:p.mode==="light"?!1:p.mode==="system"?window.matchMedia("(prefers-color-scheme: dark)").matches:!1}function V(){return m?Q:Y}function S(e,t){let n=p[e];return n!=null?String(n):t}let C=!1,b="contact",A="",E=(K=localStorage.getItem("heedb_name"))!=null?K:"",f=(J=localStorage.getItem("heedb_email"))!=null?J:"",x=(G=localStorage.getItem("heedb_token"))!=null?G:"",y=null,H=null;async function X(e,t){try{let n=await P("/api/threads/token",{api_key:L,email:e,userHash:t});if(n.ok){let o=await n.json();if(o.widgetToken){x=o.widgetToken,localStorage.setItem("heedb_token",o.widgetToken);return}}x="",localStorage.removeItem("heedb_token")}catch(n){x="",localStorage.removeItem("heedb_token")}}window.Heedb={init(e={}){e.name&&(E=e.name,localStorage.setItem("heedb_name",e.name)),e.email&&(f=e.email,localStorage.setItem("heedb_email",e.email),e.userHash?X(e.email,e.userHash).then(()=>{I(),C&&y&&v()}):(I(),C&&y&&v()))},reset(){E="",f="",x="",localStorage.removeItem("heedb_name"),localStorage.removeItem("heedb_email"),localStorage.removeItem("heedb_token"),b="contact",C=!1,y&&(y.style.display="none"),I()}};function P(e,t){return fetch(`${_}${e}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)})}function Z(e){let t=new URL(`${_}/api/threads`);return t.searchParams.set("api_key",L),t.searchParams.set("email",e),x&&t.searchParams.set("token",x),fetch(t.toString()).then(n=>n.json())}function ee(e){let t=new URL(`${_}/api/threads/${e}`);return t.searchParams.set("api_key",L),t.searchParams.set("email",f),t.searchParams.set("token",x),fetch(t.toString()).then(n=>n.json())}function te(e,t){return P(`/api/threads/${e}/reply`,{api_key:L,email:f,token:x,message:t})}async function ne(){var e;try{let t=new URL(`${_}/api/widget-config`);t.searchParams.set("api_key",L);let n=await fetch(t.toString());if(n.ok)return(e=(await n.json()).config)!=null?e:{}}catch(t){}return{}}function R(){var c;let e=V(),t=S(m?"darkPrimaryColor":"primaryColor",e.primary),n=S(m?"darkTextColor":"textColor",e.text),o=S(m?"darkBgColor":"bgColor",e.bg),l=(c=p.borderRadius)!=null?c:16,s=p.fontFamily||"system-ui, -apple-system, sans-serif",d=p.position==="bottom-left",u=l>=20?"50%":`${l}px`,i=Math.round(l*.5);return`
|
|
3
|
+
.llp-btn {
|
|
4
|
+
position: fixed; bottom: 24px; ${d?"left: 24px":"right: 24px"}; z-index: 999998;
|
|
5
|
+
width: 52px; height: 52px; border-radius: ${u}; border: none;
|
|
6
|
+
background: ${t}; color: #fff; font-size: 22px; cursor: pointer;
|
|
7
|
+
box-shadow: 0 4px 16px rgba(0,0,0,.25);
|
|
8
|
+
display: ${p.triggerMode==="embedded"?"none":"flex"}; align-items: center; justify-content: center;
|
|
9
|
+
transition: transform .15s;
|
|
10
|
+
}
|
|
11
|
+
.llp-btn:hover { transform: scale(1.08); }
|
|
12
|
+
.llp-btn-label { font-size: 14px; font-weight: 600; margin-left: 6px; }
|
|
13
|
+
.llp-btn-icon { display: flex; align-items: center; justify-content: center; }
|
|
14
|
+
.llp-btn-icon svg { width: 22px; height: 22px; fill: currentColor; }
|
|
15
|
+
.llp-btn:has(.llp-btn-label) { width: auto; padding: 0 18px; gap: 4px; }
|
|
16
|
+
.llp-panel {
|
|
17
|
+
position: fixed; bottom: 88px; ${d?"left: 24px":"right: 24px"}; z-index: 999999;
|
|
18
|
+
width: 370px; max-height: 560px; border-radius: ${l}px;
|
|
19
|
+
background: ${o}; box-shadow: 0 8px 32px rgba(0,0,0,.18);
|
|
20
|
+
display: flex; flex-direction: column; overflow: hidden;
|
|
21
|
+
font-family: ${s}; font-size: 14px; color: ${n};
|
|
22
|
+
transition: opacity .15s, transform .15s;
|
|
23
|
+
}
|
|
24
|
+
.llp-header {
|
|
25
|
+
background: ${t}; color: #fff; padding: 14px 16px;
|
|
26
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
27
|
+
}
|
|
28
|
+
.llp-header h2 { margin: 0; font-size: 15px; font-weight: 600; }
|
|
29
|
+
.llp-close {
|
|
30
|
+
background: none; border: none; color: #fff; cursor: pointer;
|
|
31
|
+
font-size: 18px; line-height: 1; padding: 0;
|
|
32
|
+
}
|
|
33
|
+
.llp-tabs {
|
|
34
|
+
display: flex; border-bottom: 1px solid ${m?"#333":"#e4e4e7"};
|
|
35
|
+
}
|
|
36
|
+
.llp-tab {
|
|
37
|
+
flex: 1; padding: 10px 0; border: none; background: none;
|
|
38
|
+
cursor: pointer; font-size: 13px; font-weight: 500; color: #71717a;
|
|
39
|
+
border-bottom: 2px solid transparent; margin-bottom: -1px;
|
|
40
|
+
}
|
|
41
|
+
.llp-tab.active { color: ${n}; border-bottom-color: ${t}; }
|
|
42
|
+
.llp-body { padding: 16px; overflow-y: auto; flex: 1; }
|
|
43
|
+
.llp-label { display: block; font-size: 12px; font-weight: 600; color: #52525b; margin-bottom: 4px; }
|
|
44
|
+
.llp-input, .llp-textarea, .llp-select {
|
|
45
|
+
width: 100%; box-sizing: border-box; padding: 8px 10px;
|
|
46
|
+
border: 1px solid ${m?"#444":"#d4d4d8"}; border-radius: ${i}px;
|
|
47
|
+
font-size: 13px; color: ${n}; margin-bottom: 10px;
|
|
48
|
+
font-family: inherit; background: ${m?"#222":o};
|
|
49
|
+
}
|
|
50
|
+
.llp-textarea { min-height: 80px; resize: vertical; }
|
|
51
|
+
.llp-input:focus, .llp-textarea:focus, .llp-select:focus {
|
|
52
|
+
outline: none; border-color: ${t};
|
|
53
|
+
}
|
|
54
|
+
.llp-btn-submit {
|
|
55
|
+
width: 100%; padding: 10px; background: ${t}; color: #fff;
|
|
56
|
+
border: none; border-radius: ${i}px; font-size: 14px; font-weight: 600;
|
|
57
|
+
cursor: pointer; transition: opacity .15s;
|
|
58
|
+
}
|
|
59
|
+
.llp-btn-submit:hover { opacity: .85; }
|
|
60
|
+
.llp-btn-submit:disabled { opacity: .5; cursor: not-allowed; }
|
|
61
|
+
.llp-error { color: #ef4444; font-size: 12px; margin-bottom: 8px; }
|
|
62
|
+
.llp-success { text-align: center; padding: 24px 8px; }
|
|
63
|
+
.llp-success-icon { font-size: 36px; }
|
|
64
|
+
.llp-success h3 { margin: 12px 0 6px; font-size: 15px; color: ${n}; }
|
|
65
|
+
.llp-success p { margin: 0; color: #71717a; font-size: 13px; line-height: 1.5; }
|
|
66
|
+
.llp-thread-item {
|
|
67
|
+
padding: 10px 12px; border: 1px solid ${m?"#333":"#e4e4e7"}; border-radius: ${i}px;
|
|
68
|
+
margin-bottom: 8px; cursor: pointer; display: block; color: inherit;
|
|
69
|
+
transition: background .1s; background: none;
|
|
70
|
+
}
|
|
71
|
+
.llp-thread-item:hover { background: ${m?"#252525":"#f4f4f5"}; }
|
|
72
|
+
.llp-thread-label { font-size: 12px; color: #71717a; margin-bottom: 2px; }
|
|
73
|
+
.llp-thread-text { font-size: 13px; color: ${n}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
74
|
+
.llp-thread-meta { font-size: 11px; color: #a1a1aa; margin-top: 3px; }
|
|
75
|
+
.llp-badge { display: inline-block; padding: 1px 6px; border-radius: 9999px; font-size: 10px; font-weight: 600; }
|
|
76
|
+
.llp-badge-open { background: #d1fae5; color: #065f46; }
|
|
77
|
+
.llp-badge-replied { background: #dbeafe; color: #1e40af; }
|
|
78
|
+
.llp-new-msg { margin-top: 12px; padding-top: 12px; border-top: 1px solid ${m?"#333":"#e4e4e7"}; }
|
|
79
|
+
.llp-new-msg button {
|
|
80
|
+
width: 100%; padding: 8px; background: none; border: 1px solid ${m?"#444":"#d4d4d8"};
|
|
81
|
+
border-radius: ${i}px; font-size: 13px; cursor: pointer; color: ${m?"#999":"#52525b"};
|
|
82
|
+
}
|
|
83
|
+
.llp-new-msg button:hover { background: ${m?"#252525":"#f4f4f5"}; }
|
|
84
|
+
.llp-footer {
|
|
85
|
+
padding: 6px 16px; text-align: center; border-top: 1px solid ${m?"#333":"#f0f0f0"};
|
|
86
|
+
}
|
|
87
|
+
.llp-footer a {
|
|
88
|
+
font-size: 10px; color: #a1a1aa; text-decoration: none; font-weight: 500;
|
|
89
|
+
}
|
|
90
|
+
.llp-footer a:hover { color: #71717a; text-decoration: underline; }
|
|
91
|
+
|
|
92
|
+
/* Chat view */
|
|
93
|
+
.llp-chat-back {
|
|
94
|
+
background: none; border: none; cursor: pointer; font-size: 13px;
|
|
95
|
+
color: ${t}; padding: 0; margin-bottom: 12px; font-weight: 500;
|
|
96
|
+
display: flex; align-items: center; gap: 4px;
|
|
97
|
+
}
|
|
98
|
+
.llp-chat-back:hover { text-decoration: underline; }
|
|
99
|
+
.llp-chat-messages {
|
|
100
|
+
display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;
|
|
101
|
+
max-height: 320px; overflow-y: auto;
|
|
102
|
+
}
|
|
103
|
+
.llp-chat-bubble {
|
|
104
|
+
padding: 8px 12px; border-radius: ${Math.max(i,8)}px; font-size: 13px;
|
|
105
|
+
line-height: 1.45; max-width: 85%; word-wrap: break-word;
|
|
106
|
+
white-space: pre-wrap;
|
|
107
|
+
}
|
|
108
|
+
.llp-chat-inbound {
|
|
109
|
+
background: ${m?"#252525":"#f4f4f5"}; color: ${n}; align-self: flex-start;
|
|
110
|
+
border-bottom-left-radius: 4px;
|
|
111
|
+
}
|
|
112
|
+
.llp-chat-outbound {
|
|
113
|
+
background: ${t}; color: #fff; align-self: flex-end;
|
|
114
|
+
border-bottom-right-radius: 4px;
|
|
115
|
+
}
|
|
116
|
+
.llp-chat-time {
|
|
117
|
+
font-size: 10px; color: #a1a1aa; margin-top: 2px;
|
|
118
|
+
}
|
|
119
|
+
.llp-chat-time-right { text-align: right; }
|
|
120
|
+
.llp-chat-reply {
|
|
121
|
+
display: flex; gap: 8px; border-top: 1px solid ${m?"#333":"#e4e4e7"}; padding-top: 12px;
|
|
122
|
+
}
|
|
123
|
+
.llp-chat-reply-input {
|
|
124
|
+
flex: 1; padding: 8px 10px; border: 1px solid ${m?"#444":"#d4d4d8"}; border-radius: ${i}px;
|
|
125
|
+
font-size: 13px; font-family: inherit; color: ${n}; background: ${m?"#222":o};
|
|
126
|
+
resize: none; min-height: 36px; max-height: 80px; box-sizing: border-box;
|
|
127
|
+
}
|
|
128
|
+
.llp-chat-reply-input:focus { outline: none; border-color: ${t}; }
|
|
129
|
+
.llp-chat-send {
|
|
130
|
+
padding: 8px 14px; background: ${t}; color: #fff; border: none;
|
|
131
|
+
border-radius: ${i}px; font-size: 13px; font-weight: 600; cursor: pointer;
|
|
132
|
+
transition: opacity .15s; white-space: nowrap; align-self: flex-end;
|
|
133
|
+
}
|
|
134
|
+
.llp-chat-send:hover { opacity: .85; }
|
|
135
|
+
.llp-chat-send:disabled { opacity: .5; cursor: not-allowed; }
|
|
136
|
+
`}function a(e,t={},n=[]){let o=document.createElement(e);for(let[l,s]of Object.entries(t))l==="class"?o.className=s:l==="style"?o.setAttribute("style",s):l.startsWith("on")&&typeof s=="function"?o.addEventListener(l.slice(2),s):o.setAttribute(l,String(s));for(let l of n)o.appendChild(typeof l=="string"?document.createTextNode(l):l);return o}function j(e,t,n=""){let o=document.createElement("input");return o.type=e,o.id=t,o.placeholder=n,o.className="llp-input",o}function le(e,t=""){let n=document.createElement("textarea");return n.id=e,n.placeholder=t,n.className="llp-textarea",n}function ae(e,t){let n=document.createElement("select");n.id=e,n.className="llp-select";for(let o of t){let l=document.createElement("option");l.value=o.value,l.textContent=o.label,n.appendChild(l)}return n}function v(){if(!y)return;let e=y.querySelector(".llp-body");e.innerHTML="",b==="contact"?oe(e):b==="privacy"?ie(e):b==="threads"?re(e):b==="thread-detail"&&ce(e),M&&(M.style.display=b==="thread-detail"?"none":"flex")}function oe(e,t=""){let n=!!(E&&f),o=a("label",{class:"llp-label"},["Name"]),l=j("text","llp-name","Jane Smith");E&&(l.value=E);let s=a("label",{class:"llp-label"},["Email"]),d=j("email","llp-email","jane@example.com");(t||f)&&(d.value=t||f);let u=a("label",{class:"llp-label"},["Message"]),i=le("llp-message","How can we help?"),c=a("div",{class:"llp-error",style:"display:none"}),r=a("button",{class:"llp-btn-submit"},["Send message"]);r.onclick=async()=>{let g=l.value.trim(),h=d.value.trim(),w=i.value.trim();if(c.style.display="none",!g||!h||!w){c.textContent="Please fill in all fields.",c.style.display="block";return}r.disabled=!0,r.textContent="Sending\u2026";try{let T=await P("/api/contact",{api_key:L,name:g,email:h,message:w});if(T.ok)f=h,localStorage.setItem("heedb_email",h),I(),O(e,"Message sent!","We'll get back to you soon. Check your inbox for a confirmation email.");else{let me=await T.json();c.textContent=me.error||"Something went wrong.",c.style.display="block",r.disabled=!1,r.textContent="Send message"}}catch(T){c.textContent="Network error. Please try again.",c.style.display="block",r.disabled=!1,r.textContent="Send message"}},n?e.append(u,i,c,r):e.append(o,l,s,d,u,i,c,r)}function ie(e){let t=!!(E&&f),n=a("label",{class:"llp-label"},["Name"]),o=j("text","llp-priv-name","Jane Smith");E&&(o.value=E);let l=a("label",{class:"llp-label"},["Email"]),s=j("email","llp-priv-email","jane@example.com");f&&(s.value=f);let d=a("label",{class:"llp-label"},["Request type"]),u=ae("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"}]),i=a("div",{class:"llp-error",style:"display:none"}),c=a("button",{class:"llp-btn-submit"},["Submit request"]);c.onclick=async()=>{let r=o.value.trim(),g=s.value.trim(),h=u.value;if(i.style.display="none",!r||!g){i.textContent="Please fill in all fields.",i.style.display="block";return}c.disabled=!0,c.textContent="Submitting\u2026";try{let w=await P("/api/privacy-request",{api_key:L,name:r,email:g,request_type:h});if(w.ok)f=g,localStorage.setItem("heedb_email",g),I(),O(e,"Request submitted!","Your privacy request has been received. We'll respond within 30 days.");else{let T=await w.json();i.textContent=T.error||"Something went wrong.",i.style.display="block",c.disabled=!1,c.textContent="Submit request"}}catch(w){i.textContent="Network error. Please try again.",i.style.display="block",c.disabled=!1,c.textContent="Submit request"}},t?e.append(d,u,i,c):e.append(n,o,l,s,d,u,i,c)}async function re(e){var t;if(!x){e.innerHTML="";let n=a("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."]),o=a("div",{class:"llp-new-msg"}),l=a("button",{},["+ Send a message"]);l.onclick=()=>{b="contact",$("contact"),v()},o.appendChild(l),e.append(n,o);return}e.innerHTML='<p style="color:#71717a;text-align:center">Loading\u2026</p>';try{let{threads:n}=await Z(f);if(e.innerHTML="",n.length===0){let s=a("p",{style:"color:#71717a;text-align:center;margin:8px 0"},["No open messages yet."]);e.appendChild(s)}else for(let s of n){let d=a("span",{class:`llp-badge llp-badge-${s.status}`},[s.status]),u=a("div",{class:"llp-thread-label"},[s.type==="privacy"?"Privacy request":"Message"," \u2022 "]);u.appendChild(d);let i=a("div",{class:"llp-thread-text"},[(t=s.preview)!=null?t:""]),c=new Date(s.createdAt).toLocaleDateString(),r=a("div",{class:"llp-thread-meta"},[c]),g=a("div",{class:"llp-thread-item"});g.append(u,i,r),g.onclick=()=>se(s.id),e.appendChild(g)}let o=a("div",{class:"llp-new-msg"}),l=a("button",{},["+ Send a new message"]);l.onclick=()=>{b="contact",$("contact"),v()},o.appendChild(l),e.appendChild(o)}catch(n){e.innerHTML='<p style="color:#ef4444;text-align:center">Failed to load messages.</p>'}}function se(e){A=e,b="thread-detail",v()}async function ce(e){e.innerHTML='<p style="color:#71717a;text-align:center">Loading\u2026</p>';let t=a("button",{class:"llp-chat-back"},["\u2190 Back to messages"]);t.onclick=()=>{b="threads",$("threads"),v()};try{let o=(await ee(A)).messages||[];e.innerHTML="",e.style.padding="12px",e.appendChild(t);let l=a("div",{class:"llp-chat-messages"});for(let r of o){let g=r.direction==="inbound",h=a("div",{style:`display:flex;flex-direction:column;${g?"align-items:flex-start":"align-items:flex-end"}`}),w=a("div",{class:`llp-chat-bubble ${g?"llp-chat-inbound":"llp-chat-outbound"}`},[de(r.body)]),T=a("div",{class:`llp-chat-time ${g?"":"llp-chat-time-right"}`},[pe(r.createdAt)]);h.append(w,T),l.appendChild(h)}e.appendChild(l),requestAnimationFrame(()=>{l.scrollTop=l.scrollHeight});let s=a("div",{class:"llp-chat-reply"}),d=document.createElement("textarea");d.className="llp-chat-reply-input",d.placeholder="Type a reply\u2026",d.rows=1,d.addEventListener("input",()=>{d.style.height="auto",d.style.height=Math.min(d.scrollHeight,80)+"px"});let u=a("button",{class:"llp-chat-send"},["Send"]),i=a("div",{class:"llp-error",style:"display:none;margin-top:4px"});async function c(){let r=d.value.trim();if(r){u.disabled=!0,u.textContent="\u2026",i.style.display="none";try{let g=await te(A,r);if(g.ok){let h=a("div",{style:"display:flex;flex-direction:column;align-items:flex-start"}),w=a("div",{class:"llp-chat-bubble llp-chat-inbound"},[r]),T=a("div",{class:"llp-chat-time"},["Just now"]);h.append(w,T),l.appendChild(h),l.scrollTop=l.scrollHeight,d.value="",d.style.height="auto"}else{let h=await g.json();i.textContent=h.error||"Failed to send.",i.style.display="block"}}catch(g){i.textContent="Network error. Please try again.",i.style.display="block"}u.disabled=!1,u.textContent="Send"}}u.onclick=c,d.addEventListener("keydown",r=>{r.key==="Enter"&&!r.shiftKey&&(r.preventDefault(),c())}),s.append(d,u),e.append(s,i),requestAnimationFrame(()=>d.focus())}catch(n){e.innerHTML="",e.appendChild(t),e.appendChild(a("p",{style:"color:#ef4444;text-align:center"},["Failed to load conversation."]))}}function de(e){let t=e.split(`
|
|
137
|
+
`),n=[];for(let o of t){let l=o.trim();if(/^(On|Em|El|Le|Am|Il giorno) .+(<[^>]+@[^>]+>).*(wrote|escreveu|escribi|crit|schrieb|scritto)\s?:$/i.test(l)||/<[^>]+@[^>]+>/.test(l)&&l.endsWith(":")||/^-{3,}$/.test(l))break;/^>{1,}\s/.test(l)||n.push(o)}return n.join(`
|
|
138
|
+
`).trim()}function pe(e){let t=new Date(e),o=new Date().getTime()-t.getTime(),l=Math.floor(o/6e4);if(l<1)return"Just now";if(l<60)return`${l}m ago`;let s=Math.floor(l/60);return s<24?`${s}h ago`:t.toLocaleDateString()}function O(e,t,n){e.innerHTML="";let o=a("div",{class:"llp-success"});o.innerHTML=`
|
|
139
|
+
<div class="llp-success-icon">\u2705</div>
|
|
140
|
+
<h3>${t}</h3>
|
|
141
|
+
<p>${n}</p>
|
|
142
|
+
`,e.appendChild(o)}let M=null,z=null;function $(e){b=e,M&&M.querySelectorAll(".llp-tab").forEach(t=>{t.classList.toggle("active",t.dataset.mode===e)})}function I(){z&&(z.style.display=f&&x?"":"none")}let B=null;function ge(){m=q(),B&&(B.textContent=R())}async function F(){p=await ne(),m=q(),B=document.createElement("style"),B.textContent=R(),document.head.appendChild(B),p.mode==="system"&&window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",()=>{ge(),C&&y&&v()});let e=p.triggerIcon?p.triggerIcon:p.triggerEmoji||"\u{1F4AC}",t=p.triggerText||"";if(H=a("button",{class:"llp-btn",title:"Contact us","aria-label":"Open contact widget"}),p.triggerIcon){let r=a("span",{class:"llp-btn-icon"});r.innerHTML=p.triggerIcon,H.appendChild(r)}else H.appendChild(document.createTextNode(p.triggerEmoji||"\u{1F4AC}"));if(t&&H.appendChild(a("span",{class:"llp-btn-label"},[t])),H.onclick=D,document.body.appendChild(H),p.triggerMode==="embedded"&&p.triggerSelector){let r=document.querySelector(p.triggerSelector);r&&r.addEventListener("click",g=>{g.preventDefault(),D()})}y=a("div",{class:"llp-panel",style:"display:none"});let n=a("div",{class:"llp-header"}),o=a("h2",{},[p.headerTitle||"Contact us"]),l=a("button",{class:"llp-close","aria-label":"Close"},["\u2715"]);l.onclick=D,n.append(o,l),M=a("div",{class:"llp-tabs"});let s=a("button",{class:"llp-tab active","data-mode":"contact"},["Message"]),d=a("button",{class:"llp-tab","data-mode":"privacy"},["Privacy"]);z=a("button",{class:"llp-tab","data-mode":"threads"},["Messages"]),z.style.display=f&&x?"":"none",s.onclick=()=>{$("contact"),v()},d.onclick=()=>{$("privacy"),v()},z.onclick=()=>{$("threads"),v()},M.append(s,d,z);let u=a("div",{class:"llp-body"}),i=a("div",{class:"llp-footer"}),c=a("a",{href:"https://heedb.com",target:"_blank",rel:"noopener noreferrer"},["Powered by Heedb"]);i.appendChild(c),y.append(n,M,u,i),document.body.appendChild(y)}function D(){C=!C,y&&(y.style.display=C?"flex":"none",C&&(f&&x&&b!=="privacy"&&b!=="thread-detail"&&(b="threads",$("threads")),v()))}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",F):F()})();})();
|