@tmls-ai/support 0.1.0 → 0.1.2

package/dist/index.js

@@ -75,6 +75,16 @@ var SupportApi = class {
     const res = await fetch(`${this.apiUrl}/v1/conversations/${conversationId}/messages`, { headers: await this.auth() });
     return res.ok ? res.json() : [];
   }
+  /** Full thread: meta (type/severity/status) + messages + attachments. */
+  async getConversation(conversationId) {
+    const res = await fetch(`${this.apiUrl}/v1/conversations/${conversationId}`, { headers: await this.auth() });
+    return res.ok ? res.json() : null;
+  }
+  /** Fetch a screenshot the user owns; returns an object URL (auth header can't ride an <img src>). */
+  async getScreenshot(r2Key) {
+    const res = await fetch(`${this.apiUrl}/v1/screenshots/${r2Key}`, { headers: await this.auth() });
+    return res.ok ? URL.createObjectURL(await res.blob()) : null;
+  }
   async reply(conversationId, body) {
     await fetch(`${this.apiUrl}/v1/conversations/${conversationId}/messages`, {
       method: "POST",
@@ -110,14 +120,23 @@ function SupportWidget(props) {
   const [lastTicket, setLastTicket] = useState(null);
   const [threads, setThreads] = useState([]);
   const [activeId, setActiveId] = useState(null);
+  const [activeConvo, setActiveConvo] = useState(null);
   const [messages, setMessages] = useState([]);
+  const [shotUrls, setShotUrls] = useState({});
   const [reply, setReply] = useState("");
   useEffect(() => {
     installErrorCapture();
   }, []);
   const captureShot = useCallback(async () => {
     try {
-      const blob = await domToBlob(document.body, { quality: 0.8, scale: 0.75 });
+      const root = document.documentElement;
+      const blob = await domToBlob(root, {
+        quality: 0.8,
+        scale: 0.75,
+        width: root.clientWidth || window.innerWidth,
+        height: root.clientHeight || window.innerHeight,
+        filter: (node) => !(node instanceof HTMLElement && node.dataset.tmlsSupportRoot === "true")
+      });
       setShotPreview(URL.createObjectURL(blob));
       captureShot._blob = blob;
     } catch {
@@ -159,14 +178,28 @@ function SupportWidget(props) {
   }, [api]);
   const openThread = useCallback(async (id) => {
     setActiveId(id);
-    setMessages(await api.listMessages(id));
+    setActiveConvo(null);
+    setMessages([]);
+    setShotUrls({});
     setView("thread");
+    const detail = await api.getConversation(id);
+    if (!detail) return;
+    setActiveConvo(detail);
+    setMessages(detail.messages);
+    for (const att of detail.attachments) {
+      const url = await api.getScreenshot(att.r2_key);
+      if (url) setShotUrls((prev) => ({ ...prev, [att.r2_key]: url }));
+    }
   }, [api]);
   const sendReply = useCallback(async () => {
     if (!reply.trim() || !activeId) return;
     await api.reply(activeId, reply.trim());
     setReply("");
-    setMessages(await api.listMessages(activeId));
+    const detail = await api.getConversation(activeId);
+    if (detail) {
+      setActiveConvo(detail);
+      setMessages(detail.messages);
+    }
   }, [api, reply, activeId]);
   const chip = (active) => ({
     padding: "6px 12px",
@@ -178,7 +211,7 @@ function SupportWidget(props) {
     background: active ? accent : "transparent",
     color: active ? "#fff" : "#c8c8d0"
   });
-  return /* @__PURE__ */ jsxs("div", { style: { position: "fixed", bottom: 20, right: 20, zIndex: 2147483e3, fontFamily: "system-ui, sans-serif" }, children: [
+  return /* @__PURE__ */ jsxs("div", { "data-tmls-support-root": "true", style: { position: "fixed", bottom: 20, right: 20, zIndex: 2147483e3, fontFamily: "system-ui, sans-serif" }, children: [
     open && /* @__PURE__ */ jsxs("div", { style: {
       position: "absolute",
       bottom: 60,
@@ -253,6 +286,15 @@ function SupportWidget(props) {
           ] }, t.id))
         ] }),
         view === "thread" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
+          activeConvo && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap", paddingBottom: 8, borderBottom: "0.5px solid rgba(255,255,255,0.08)" }, children: [
+            /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 600 }, children: [
+              "#",
+              activeConvo.ticket_number
+            ] }),
+            /* @__PURE__ */ jsx("span", { style: metaPill("#c8c8d0"), children: activeConvo.type }),
+            /* @__PURE__ */ jsx("span", { style: metaPill(SEV_COLOR[activeConvo.severity]), children: activeConvo.severity }),
+            /* @__PURE__ */ jsx("span", { style: metaPill(activeConvo.status === "resolved" ? "#30d158" : accent), children: activeConvo.status })
+          ] }),
           messages.map((m) => /* @__PURE__ */ jsx("div", { style: {
             alignSelf: m.author === "user" ? "flex-end" : "flex-start",
             maxWidth: "85%",
@@ -262,6 +304,7 @@ function SupportWidget(props) {
             borderRadius: 12,
             fontSize: 13
           }, children: m.body }, m.id)),
+          activeConvo?.attachments.map((att) => shotUrls[att.r2_key] ? /* @__PURE__ */ jsx("a", { href: shotUrls[att.r2_key], target: "_blank", rel: "noreferrer", style: { display: "block" }, children: /* @__PURE__ */ jsx("img", { src: shotUrls[att.r2_key], alt: "Attached screenshot", style: { width: "100%", borderRadius: 8, border: "0.5px solid #3a3a42" } }) }, att.id) : /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "#8a8a92" }, children: "Loading screenshot\u2026" }, att.id)),
           /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
             /* @__PURE__ */ jsx(
               "input",
@@ -320,6 +363,18 @@ var primary = (accent) => ({
   fontWeight: 600,
   cursor: "pointer"
 });
+var SEV_COLOR = { blocking: "#ff453a", annoying: "#ff9f0a", minor: "#8e8e93" };
+var metaPill = (color) => ({
+  padding: "1px 8px",
+  borderRadius: 100,
+  fontSize: 10.5,
+  fontWeight: 700,
+  textTransform: "uppercase",
+  letterSpacing: "0.03em",
+  color,
+  border: `1px solid ${color}55`,
+  background: "transparent"
+});
 
 // src/index.ts
 function mountSupportWidget(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tmls-ai/support",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Embeddable Timeless support widget — bottom-right report overlay (type / severity / screenshot) + ticket thread. Auto-captures context, talks to tmls-support-api.",
   "license": "UNLICENSED",
   "type": "module",
@@ -8,12 +8,31 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" } },
-  "files": ["dist"],
-  "repository": { "type": "git", "url": "git+https://github.com/tmls-ai/tmls-support-widget.git" },
-  "keywords": ["support", "widget", "timeless", "tmls"],
-  "publishConfig": { "access": "public" },
-  "engines": { "node": ">=18" },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tmls-ai/tmls-support-widget.git"
+  },
+  "keywords": [
+    "support",
+    "widget",
+    "timeless",
+    "tmls"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  },
   "scripts": {
     "build": "tsup src/index.ts --format esm --dts --clean",
     "typecheck": "tsc --noEmit",