@tmls-ai/support 0.1.5 → 0.1.6

package/dist/index.js

@@ -135,6 +135,17 @@ function SupportWidget(props) {
   const [messages, setMessages] = useState([]);
   const [shotUrls, setShotUrls] = useState({});
   const [reply, setReply] = useState("");
+  const [isMobile, setIsMobile] = useState(
+    () => typeof window !== "undefined" && window.matchMedia("(max-width: 767px)").matches
+  );
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia("(max-width: 767px)");
+    const onChange = () => setIsMobile(mq.matches);
+    onChange();
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
   useEffect(() => {
     installErrorCapture();
   }, []);
@@ -251,27 +262,92 @@ function SupportWidget(props) {
     background: active ? accent : "transparent",
     color: active ? "#fff" : "#c8c8d0"
   });
+  const toggle = () => {
+    if (open) deeplinkTicket = null;
+    setOpen((o) => !o);
+    if (!open && withShot) captureShot();
+  };
+  const panelStyle = isMobile ? {
+    position: "fixed",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: "auto",
+    maxHeight: "85vh",
+    background: "#141418",
+    color: "#e8e8ea",
+    borderTop: "0.5px solid rgba(255,255,255,0.12)",
+    borderRadius: "16px 16px 0 0",
+    boxShadow: "0 -16px 48px rgba(0,0,0,0.5)",
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    zIndex: 2147483e3,
+    paddingBottom: "env(safe-area-inset-bottom, 0px)"
+  } : {
+    position: "absolute",
+    bottom: 60,
+    right: 0,
+    width: 360,
+    maxHeight: 560,
+    background: "#141418",
+    color: "#e8e8ea",
+    border: "0.5px solid rgba(255,255,255,0.12)",
+    borderRadius: 16,
+    boxShadow: "0 16px 48px rgba(0,0,0,0.5)",
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column"
+  };
+  const launcherStyle = isMobile ? {
+    position: "fixed",
+    right: 0,
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: 30,
+    height: 56,
+    borderRadius: "14px 0 0 14px",
+    border: "none",
+    cursor: "pointer",
+    background: accent,
+    color: "#fff",
+    fontSize: 20,
+    boxShadow: "-3px 0 14px rgba(0,0,0,0.4)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingRight: 4,
+    zIndex: 2147483e3
+  } : {
+    width: 48,
+    height: 48,
+    borderRadius: 999,
+    border: "none",
+    cursor: "pointer",
+    background: accent,
+    color: "#fff",
+    fontSize: 22,
+    boxShadow: "0 4px 16px rgba(0,0,0,0.35)"
+  };
   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,
-      right: 0,
-      width: 360,
-      maxHeight: 560,
-      background: "#141418",
-      color: "#e8e8ea",
-      border: "0.5px solid rgba(255,255,255,0.12)",
-      borderRadius: 16,
-      boxShadow: "0 16px 48px rgba(0,0,0,0.5)",
-      overflow: "hidden",
-      display: "flex",
-      flexDirection: "column"
-    }, children: [
+    open && /* @__PURE__ */ jsxs("div", { style: panelStyle, children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 14px", borderBottom: "0.5px solid rgba(255,255,255,0.08)" }, children: [
         /* @__PURE__ */ jsx("strong", { style: { fontSize: 14 }, children: "Support" }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, fontSize: 12 }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, fontSize: 12, alignItems: "center" }, children: [
           /* @__PURE__ */ jsx("button", { onClick: () => setView("new"), style: tab(view === "new" || view === "sent", accent), children: "New" }),
-          /* @__PURE__ */ jsx("button", { onClick: openThreads, style: tab(view === "threads" || view === "thread", accent), children: "My tickets" })
+          /* @__PURE__ */ jsx("button", { onClick: openThreads, style: tab(view === "threads" || view === "thread", accent), children: "My tickets" }),
+          isMobile && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => {
+                deeplinkTicket = null;
+                setOpen(false);
+              },
+              "aria-label": "Close",
+              style: { background: "transparent", border: "none", cursor: "pointer", color: "#8a8a92", fontSize: 20, lineHeight: 1, padding: "0 2px" },
+              children: "\xD7"
+            }
+          )
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { style: { padding: 14, overflowY: "auto" }, children: [
@@ -362,29 +438,7 @@ function SupportWidget(props) {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: () => {
-          if (open) deeplinkTicket = null;
-          setOpen((o) => !o);
-          if (!open && withShot) captureShot();
-        },
-        "aria-label": "Support",
-        style: {
-          width: 48,
-          height: 48,
-          borderRadius: 999,
-          border: "none",
-          cursor: "pointer",
-          background: accent,
-          color: "#fff",
-          fontSize: 22,
-          boxShadow: "0 4px 16px rgba(0,0,0,0.35)"
-        },
-        children: open ? "\xD7" : "?"
-      }
-    )
+    (!isMobile || !open) && /* @__PURE__ */ jsx("button", { onClick: toggle, "aria-label": "Support", style: launcherStyle, children: open && !isMobile ? "\xD7" : "?" })
   ] });
 }
 var tab = (active, accent) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tmls-ai/support",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "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",