@heedb/web-sdk 0.1.0 → 0.1.2

package/README.md

@@ -1,18 +1,30 @@
 # @heedb/web-sdk
 
-Drop-in feedback widget with email conversations for any website.
+A lightweight (~12 KB) feedback widget that drops into any website. Customers can send messages, make privacy requests, and view their conversation history — all through email-based threads. No login required.
 
-## CDN (quickest)
+[Dashboard](https://heedb.com) · [GitHub](https://github.com/TheAleSch/heedb)
+
+---
+
+## Quick start
+
+### CDN (recommended)
+
+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>
 ```
 
-## npm
+> **Important:** `data-host` is required when loading from a CDN. It tells the widget where to send API requests. Omit it only when the script is served from the same domain as your Heedb instance.
+
+A floating chat button appears in the bottom-right corner. That's it.
+
+### npm
 
 ```bash
 npm install @heedb/web-sdk
@@ -21,29 +33,452 @@ npm install @heedb/web-sdk
 ```ts
 import { Heedb } from "@heedb/web-sdk";
 
+Heedb.init({ apiKey: "YOUR_API_KEY" });
+```
+
+This dynamically loads the widget and attaches it to the page. Works with React, Next.js, Vue, Svelte, or any framework.
+
+### Self-hosted
+
+If you run your own Heedb instance, serve `widget.js` from your domain:
+
+```html
+<script src="https://your-instance.com/widget.js" data-api-key="YOUR_API_KEY"></script>
+```
+
+The widget auto-detects the API host from the script's origin — no `data-host` needed.
+
+---
+
+## Environment variables
+
+Add these to your `.env` (or equivalent):
+
+```env
+# Public — safe for client-side code, used in data-api-key or Heedb.init()
+NEXT_PUBLIC_HEEDB_API_KEY=your_api_key_here
+
+# Private — server-side only, used to generate userHash
+# NEVER expose this in client-side code, bundle, or git
+HEEDB_WIDGET_SECRET=your_widget_secret_here
+```
+
+Both values are in your [dashboard settings](https://heedb.com/app/settings).
+
+---
+
+## Identify users
+
+By default, the widget shows a form asking for name, email, and message. If the user is already logged in to your app, you can skip that step.
+
+There are three levels:
+
+### 1. Anonymous (default)
+
+No `init()` call needed. The widget shows the full contact form. Good for marketing sites, landing pages, or anywhere users aren't logged in.
+
+### 2. Identified (name + email)
+
+Pre-fills the form and hides the name/email fields. The user only sees the message box. **No server-side code required.**
+
+```ts
 Heedb.init({
   apiKey: "YOUR_API_KEY",
-  email: user.email,      // optional
-  name: user.name,        // optional
-  userHash: serverHash,   // optional — HMAC-SHA256 for verified identity
+  email: "jane@example.com",
+  name: "Jane",
 });
 ```
 
-## Identify users
+Use this when you know the user's identity but don't need to show them their conversation history.
+
+### 3. Verified (name + email + userHash)
+
+Same as identified, plus unlocks the **Messages** tab where the user can view their previous conversation threads.
+
+**This requires a server-generated HMAC.** The `userHash` must be computed on your backend and passed to the frontend — never generate it client-side, as that would expose your Widget Secret.
 
-Generate a `userHash` on your server to verify user identity:
+```ts
+// Client-side — after receiving userHash from your server
+Heedb.init({
+  apiKey: "YOUR_API_KEY",
+  email: "jane@example.com",
+  name: "Jane",
+  userHash: serverGeneratedHash, // from your backend
+});
+```
+
+**Only pass `userHash` when a user is authenticated.** For logged-out users, either call `init()` without it (identified) or don't call `init()` at all (anonymous).
+
+---
+
+## Generate the userHash (server-side)
+
+The `userHash` is an HMAC-SHA256 of the user's email, signed with your **Widget Secret**. It proves your server vouches for this user's identity.
+
+**The flow:**
+1. User logs in to your app
+2. Your server computes `HMAC-SHA256(email, WIDGET_SECRET)` → `userHash`
+3. Your server passes `userHash` to the frontend (via props, API response, or server-rendered HTML)
+4. The frontend calls `Heedb.init({ email, userHash })`
+
+**Never compute the hash client-side — the Widget Secret must stay on your server.**
+
+### Node.js
 
 ```js
 const crypto = require("crypto");
-const userHash = crypto
-  .createHmac("sha256", WIDGET_SECRET)
-  .update(userEmail)
-  .digest("hex");
+
+function heedbUserHash(email) {
+  return crypto
+    .createHmac("sha256", process.env.HEEDB_WIDGET_SECRET)
+    .update(email)
+    .digest("hex");
+}
+```
+
+### Python
+
+```python
+import hmac, hashlib, os
+
+def heedb_user_hash(email: str) -> str:
+    secret = os.environ["HEEDB_WIDGET_SECRET"].encode()
+    return hmac.new(secret, email.encode(), hashlib.sha256).hexdigest()
+```
+
+### PHP
+
+```php
+function heedbUserHash(string $email): string {
+    return hash_hmac('sha256', $email, getenv('HEEDB_WIDGET_SECRET'));
+}
+```
+
+### Ruby
+
+```ruby
+require "openssl"
+
+def heedb_user_hash(email)
+  OpenSSL::HMAC.hexdigest("sha256", ENV["HEEDB_WIDGET_SECRET"], email)
+end
+```
+
+### Go
+
+```go
+import (
+    "crypto/hmac"
+    "crypto/sha256"
+    "encoding/hex"
+    "os"
+)
+
+func heedbUserHash(email string) string {
+    h := hmac.New(sha256.New, []byte(os.Getenv("HEEDB_WIDGET_SECRET")))
+    h.Write([]byte(email))
+    return hex.EncodeToString(h.Sum(nil))
+}
+```
+
+---
+
+## Framework examples
+
+### Next.js (App Router) — full example with verified identity
+
+This is the recommended pattern. The hash is computed in a server component and passed to a client component.
+
+```tsx
+// app/components/HeedbWidget.server.tsx — Server Component
+import { auth } from "@/lib/auth"; // your auth library
+import { headers } from "next/headers";
+import { createHmac } from "crypto";
+import HeedbWidgetClient from "./HeedbWidget.client";
+
+export default async function HeedbWidget() {
+  let email: string | undefined;
+  let name: string | undefined;
+  let userHash: string | undefined;
+
+  try {
+    const session = await auth.api.getSession({ headers: await headers() });
+    if (session?.user?.email) {
+      email = session.user.email;
+      name = session.user.name ?? undefined;
+      // Compute HMAC on the server — secret never reaches the client
+      userHash = createHmac("sha256", process.env.HEEDB_WIDGET_SECRET!)
+        .update(email)
+        .digest("hex");
+    }
+  } catch {
+    // No session — widget will work anonymously
+  }
+
+  return <HeedbWidgetClient email={email} name={name} userHash={userHash} />;
+}
+```
+
+```tsx
+// app/components/HeedbWidget.client.tsx — Client Component
+"use client";
+
+import { useEffect } from "react";
+import { Heedb } from "@heedb/web-sdk";
+
+export default function HeedbWidgetClient({ email, name, userHash }: {
+  email?: string;
+  name?: string;
+  userHash?: string;
+}) {
+  useEffect(() => {
+    Heedb.init({
+      apiKey: process.env.NEXT_PUBLIC_HEEDB_API_KEY!,
+      email,
+      name,
+      userHash,
+    });
+  }, [email, name, userHash]);
+
+  return null;
+}
+```
+
+```tsx
+// app/layout.tsx
+import HeedbWidget from "./components/HeedbWidget.server";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>
+        {children}
+        <HeedbWidget />
+      </body>
+    </html>
+  );
+}
+```
+
+### Next.js (Pages Router)
+
+Compute the hash in `getServerSideProps` and pass it as a prop:
+
+```tsx
+// pages/_app.tsx
+import { useEffect } from "react";
+import { Heedb } from "@heedb/web-sdk";
+
+export default function App({ Component, pageProps }: AppProps) {
+  useEffect(() => {
+    if (pageProps.heedbEmail) {
+      Heedb.init({
+        apiKey: process.env.NEXT_PUBLIC_HEEDB_API_KEY!,
+        email: pageProps.heedbEmail,
+        name: pageProps.heedbName,
+        userHash: pageProps.heedbUserHash,
+      });
+    } else {
+      Heedb.init({ apiKey: process.env.NEXT_PUBLIC_HEEDB_API_KEY! });
+    }
+  }, [pageProps.heedbEmail]);
+
+  return <Component {...pageProps} />;
+}
+```
+
+### React (Vite / CRA) — with API route for hash
+
+When you don't have server components, fetch the hash from an API endpoint:
+
+```ts
+// Server: POST /api/heedb-hash
+import crypto from "crypto";
+export function handler(req, res) {
+  const { email } = req.body;
+  const hash = crypto
+    .createHmac("sha256", process.env.HEEDB_WIDGET_SECRET!)
+    .update(email)
+    .digest("hex");
+  res.json({ userHash: hash });
+}
+```
+
+```tsx
+// Client: App.tsx
+import { useEffect } from "react";
+import { Heedb } from "@heedb/web-sdk";
+
+function App() {
+  const user = useAuth(); // your auth hook
+
+  useEffect(() => {
+    if (!user) {
+      Heedb.init({ apiKey: import.meta.env.VITE_HEEDB_API_KEY });
+      return;
+    }
+
+    // Fetch the hash from your server
+    fetch("/api/heedb-hash", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email: user.email }),
+    })
+      .then((r) => r.json())
+      .then(({ userHash }) => {
+        Heedb.init({
+          apiKey: import.meta.env.VITE_HEEDB_API_KEY,
+          email: user.email,
+          name: user.name,
+          userHash,
+        });
+      });
+  }, [user]);
+
+  return <div>Your app</div>;
+}
+```
+
+### Vue
+
+```vue
+<script setup>
+import { onMounted } from "vue";
+import { Heedb } from "@heedb/web-sdk";
+
+const props = defineProps<{
+  email?: string;
+  name?: string;
+  userHash?: string;
+}>();
+
+onMounted(() => {
+  Heedb.init({
+    apiKey: import.meta.env.VITE_HEEDB_API_KEY,
+    email: props.email,
+    name: props.name,
+    userHash: props.userHash,
+  });
+});
+</script>
 ```
 
-Then pass it to `Heedb.init({ email, userHash })`.
+### Svelte
+
+```svelte
+<script>
+  import { onMount } from "svelte";
+  import { Heedb } from "@heedb/web-sdk";
+
+  export let email = undefined;
+  export let name = undefined;
+  export let userHash = undefined;
+
+  onMount(() => {
+    Heedb.init({
+      apiKey: import.meta.env.VITE_HEEDB_API_KEY,
+      email,
+      name,
+      userHash,
+    });
+  });
+</script>
+```
+
+### Static HTML / WordPress / Webflow
+
+Use the CDN script tag — no build tools needed:
+
+```html
+<script
+  src="https://cdn.jsdelivr.net/npm/@heedb/web-sdk/widget.js"
+  data-api-key="YOUR_API_KEY"
+  data-host="https://heedb.com"
+></script>
+```
+
+For verified identity on static sites, you'll need a small server endpoint that returns the `userHash` — see the React + API route example above.
+
+---
+
+## What the widget does
+
+The widget adds a floating button to your page with three tabs:
+
+| Tab | Description | Requires |
+|-----|-------------|----------|
+| **Message** | Contact form — name, email, and a message. Creates a new support thread. Fields are hidden when the user is identified. | Nothing |
+| **Privacy** | GDPR/privacy request form — data export, deletion, or opt-out. | Nothing |
+| **Messages** | Conversation history — shows open threads. | Verified identity (`userHash`) |
+
+**The full conversation loop:**
+
+1. Customer submits a message via the widget
+2. A thread appears in your [Heedb dashboard](https://heedb.com/app/threads)
+3. You get an email notification
+4. You reply from the dashboard — the customer receives an email
+5. The customer replies to that email — it shows up in the dashboard
+6. If the customer is verified, they can also see the full conversation in the widget's Messages tab
+
+---
+
+## Configuration reference
+
+### Script tag attributes
+
+| Attribute | Required | Description |
+|-----------|----------|-------------|
+| `data-api-key` | Yes | Your project's public API key |
+| `data-host` | CDN: Yes. Self-hosted: No | API host URL. **Required when loading from CDN** (e.g. jsDelivr). When self-hosted, defaults to the script's origin. |
+
+### `Heedb.init()` options
+
+| Option | Type | Required | Description |
+|--------|------|----------|-------------|
+| `apiKey` | `string` | npm: Yes. Script tag: No | Your project's public API key. Script tag reads it from `data-api-key`. |
+| `host` | `string` | No | API host URL. Defaults to `https://heedb.com`. |
+| `email` | `string` | No | User's email — pre-fills the form and hides the email field |
+| `name` | `string` | No | User's name — pre-fills the form and hides the name field |
+| `userHash` | `string` | No | Server-generated HMAC-SHA256 hash — unlocks conversation history. **Must come from your server.** |
+
+### Behavior by identity level
+
+| What happens | Anonymous | Identified | Verified |
+|---|---|---|---|
+| `init()` called | No | Yes (email + name) | Yes (email + name + userHash) |
+| Contact form visible | Yes (full form) | Yes (message only) | Yes (message only) |
+| Privacy tab visible | Yes | Yes | Yes |
+| Messages tab visible | No | No | Yes |
+| Name/email fields | Shown | Hidden | Hidden |
+
+---
+
+## Security
+
+| Credential | Where it lives | Purpose |
+|------------|---------------|---------|
+| **API Key** (`NEXT_PUBLIC_HEEDB_API_KEY`) | Client-side (public) | Identifies your project. Safe to embed in frontend code. |
+| **Widget Secret** (`HEEDB_WIDGET_SECRET`) | Server-side only (private) | Signs the `userHash`. **Never expose in client code, bundles, or git.** |
+
+- The API key controls which project receives the submission — it doesn't grant read access to any data
+- The `userHash` is a cryptographic proof that your server vouches for the user's email — without it, users can submit messages but can't read thread history
+- Restrict which domains can use your API key under **Settings > Allowed Domains** in the dashboard
+- If no allowed domains are configured, the widget works from any origin (useful for development)
+
+---
+
+## Troubleshooting
+
+| Problem | Cause | Fix |
+|---------|-------|-----|
+| Widget doesn't appear | Missing `data-api-key` or invalid API key | Check the key in your [dashboard settings](https://heedb.com/app/settings) |
+| "Origin not allowed" (403) | Your domain isn't in the project's allowed domains list | Add your domain in Settings > Allowed Domains, or leave the list empty to allow all |
+| "Failed to load messages" | `userHash` is missing, invalid, or computed with the wrong secret | Verify you're using the Widget Secret (not the API key) and computing HMAC-SHA256 server-side |
+| Widget loads but `init()` has no effect | `init()` called before script loads | With npm: `Heedb.init()` handles this automatically. With CDN: call `init()` in the script's `onload` or after `DOMContentLoaded` |
+| Messages tab not visible | User is identified but not verified | Pass `userHash` from your server to enable the Messages tab |
+
+---
 
-## Links
+## License
 
-- [Dashboard](https://heedb.com)
-- [GitHub](https://github.com/TheAleSch/heedb)
+MIT

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.0",
+  "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()})();})();