@tmls-ai/support 0.1.1 → 0.1.3

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,7 +120,9 @@ 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();
@@ -123,6 +135,9 @@ function SupportWidget(props) {
         scale: 0.75,
         width: root.clientWidth || window.innerWidth,
         height: root.clientHeight || window.innerHeight,
+        // Keep scrolled containers (chat log, lists) at their on-screen scroll
+        // position instead of snapping back to the top in the clone.
+        features: { restoreScrollPosition: true },
         filter: (node) => !(node instanceof HTMLElement && node.dataset.tmlsSupportRoot === "true")
       });
       setShotPreview(URL.createObjectURL(blob));
@@ -166,14 +181,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",
@@ -260,6 +289,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%",
@@ -269,6 +307,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",
@@ -327,6 +366,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.1",
+  "version": "0.1.3",
   "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",