@tmls-ai/support 0.1.5 → 0.1.7

package/dist/index.d.ts

@@ -38,10 +38,19 @@ interface SupportWidgetProps {
     getContext?: () => Record<string, unknown>;
     /** App version string for the base context. */
     appVersion?: string;
+    /** Show the built-in floating launcher (FAB on desktop, peek-tab on mobile).
+     *  Default true. Set false to drive the panel entirely from your own trigger
+     *  (a menu entry, a settings row) via the exported openSupport(). */
+    showLauncher?: boolean;
 }
 
 declare function SupportWidget(props: SupportWidgetProps): react.JSX.Element;
 
+/** Open the support panel. No-op if no <SupportWidget> is mounted. */
+declare function openSupport(): void;
+/** Close the support panel. */
+declare function closeSupport(): void;
+
 /**
  * Vanilla mount for any app (React or not). Renders the widget into a Shadow
  * DOM root so the host's CSS and the widget's CSS can never collide. React apps
@@ -49,4 +58,4 @@ declare function SupportWidget(props: SupportWidgetProps): react.JSX.Element;
  */
 declare function mountSupportWidget(props: SupportWidgetProps): () => void;
 
-export { type Conversation, type Message, type ReportType, type Severity, SupportWidget, type SupportWidgetProps, mountSupportWidget };
+export { type Conversation, type Message, type ReportType, type Severity, SupportWidget, type SupportWidgetProps, closeSupport, mountSupportWidget, openSupport };

package/dist/index.js

@@ -94,6 +94,21 @@ var SupportApi = class {
   }
 };
 
+// src/controller.ts
+var listeners = /* @__PURE__ */ new Set();
+function openSupport() {
+  listeners.forEach((l) => l("open"));
+}
+function closeSupport() {
+  listeners.forEach((l) => l("close"));
+}
+function subscribeSupport(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
 // src/SupportWidget.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var TYPES = [
@@ -117,15 +132,16 @@ var deeplinkTicket = (() => {
   return tn;
 })();
 function SupportWidget(props) {
-  const { productId, apiUrl, getToken, accent = "#0a84ff", getContext, appVersion } = props;
+  const { productId, apiUrl, getToken, accent = "#0a84ff", getContext, appVersion, showLauncher = true } = props;
   const api = useMemo(() => new SupportApi(apiUrl, getToken), [apiUrl, getToken]);
   const [open, setOpen] = useState(false);
   const [view, setView] = useState("new");
   const [type, setType] = useState("bug");
   const [severity, setSeverity] = useState("annoying");
   const [message, setMessage] = useState("");
-  const [withShot, setWithShot] = useState(true);
+  const [withShot, setWithShot] = useState(false);
   const [shotPreview, setShotPreview] = useState(null);
+  const [files, setFiles] = useState([]);
   const [capturing, setCapturing] = useState(false);
   const [sending, setSending] = useState(false);
   const [lastTicket, setLastTicket] = useState(null);
@@ -135,6 +151,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();
   }, []);
@@ -169,16 +196,31 @@ function SupportWidget(props) {
       setCapturing(false);
     }
   }, []);
+  const filePreviews = useMemo(() => files.map((f) => URL.createObjectURL(f)), [files]);
+  useEffect(() => () => {
+    filePreviews.forEach(URL.revokeObjectURL);
+  }, [filePreviews]);
+  const addFiles = (picked) => {
+    const imgs = Array.from(picked || []).filter((f) => f.type.startsWith("image/"));
+    if (imgs.length) setFiles((prev) => [...prev, ...imgs]);
+  };
+  const removeFile = (idx) => setFiles((prev) => prev.filter((_, i) => i !== idx));
   const submit = useCallback(async () => {
     if (!message.trim() || sending) return;
     setSending(true);
     try {
-      let attachmentKeys = [];
+      const attachmentKeys = [];
+      for (const f of files) {
+        try {
+          attachmentKeys.push(await api.uploadScreenshot(f));
+        } catch {
+        }
+      }
       if (withShot && !captureShot._blob) await captureShot();
       const blob = withShot ? captureShot._blob : void 0;
       if (blob) {
         try {
-          attachmentKeys = [await api.uploadScreenshot(blob)];
+          attachmentKeys.push(await api.uploadScreenshot(blob));
         } catch {
         }
       }
@@ -192,6 +234,7 @@ function SupportWidget(props) {
       setLastTicket(ticketNumber);
       setMessage("");
       setShotPreview(null);
+      setFiles([]);
       setView("sent");
     } catch {
       setLastTicket(null);
@@ -199,7 +242,7 @@ function SupportWidget(props) {
     } finally {
       setSending(false);
     }
-  }, [api, type, severity, message, withShot, getContext, appVersion, sending, captureShot]);
+  }, [api, type, severity, message, withShot, files, getContext, appVersion, sending, captureShot]);
   const openThreads = useCallback(async () => {
     setThreads(await api.listConversations());
     setView("threads");
@@ -251,27 +294,103 @@ function SupportWidget(props) {
     background: active ? accent : "transparent",
     color: active ? "#fff" : "#c8c8d0"
   });
+  const openPanel = () => {
+    setOpen(true);
+    if (withShot) captureShot();
+  };
+  const closePanel = () => {
+    deeplinkTicket = null;
+    setOpen(false);
+  };
+  const toggle = () => {
+    if (open) closePanel();
+    else openPanel();
+  };
+  useEffect(() => subscribeSupport((action) => {
+    if (action === "open") openPanel();
+    else closePanel();
+  }), [withShot]);
+  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: [
@@ -288,16 +407,45 @@ function SupportWidget(props) {
               style: { width: "100%", background: "rgba(255,255,255,0.05)", color: "#fff", border: "0.5px solid #3a3a42", borderRadius: 10, padding: 10, fontSize: 14, resize: "vertical" }
             }
           ),
+          /* @__PURE__ */ jsxs("label", { style: { display: "inline-flex", alignItems: "center", gap: 8, alignSelf: "flex-start", padding: "8px 12px", fontSize: 13, color: "#c8c8d0", cursor: "pointer", border: "0.5px dashed #4a4a52", borderRadius: 10, background: "rgba(255,255,255,0.03)" }, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "file",
+                accept: "image/*",
+                multiple: true,
+                style: { display: "none" },
+                onChange: (e) => {
+                  addFiles(e.target.files);
+                  e.currentTarget.value = "";
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 15, lineHeight: 1 }, children: "+" }),
+            files.length ? `Add more images (${files.length})` : "Attach image(s)"
+          ] }),
+          filePreviews.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 8 }, children: filePreviews.map((src, i) => /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ jsx("img", { src, alt: "", style: { width: 64, height: 64, objectFit: "cover", borderRadius: 8, border: "0.5px solid #3a3a42", display: "block" } }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => removeFile(i),
+                "aria-label": "Remove image",
+                style: { position: "absolute", top: -6, right: -6, width: 20, height: 20, borderRadius: 999, border: "none", cursor: "pointer", background: "#1a1a20", color: "#fff", fontSize: 13, lineHeight: "20px", padding: 0, boxShadow: "0 1px 4px rgba(0,0,0,0.5)" },
+                children: "\xD7"
+              }
+            )
+          ] }, i)) }),
           /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "#a0a0a8", cursor: "pointer" }, children: [
             /* @__PURE__ */ jsx("input", { type: "checkbox", checked: withShot, onChange: (e) => {
               setWithShot(e.target.checked);
               if (e.target.checked) captureShot();
               else setShotPreview(null);
             } }),
-            "Attach a screenshot"
+            "Also include a screenshot of the app"
           ] }),
           withShot && capturing && !shotPreview && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#8a8a92", padding: "10px 0", textAlign: "center" }, children: "Capturing screenshot\u2026" }),
-          shotPreview && /* @__PURE__ */ jsx("img", { src: shotPreview, alt: "", style: { width: "100%", borderRadius: 8, border: "0.5px solid #3a3a42" } }),
+          withShot && shotPreview && /* @__PURE__ */ jsx("img", { src: shotPreview, alt: "", style: { width: "100%", borderRadius: 8, border: "0.5px solid #3a3a42" } }),
           /* @__PURE__ */ jsx("button", { onClick: submit, disabled: !message.trim() || sending, style: { ...primary(accent), opacity: !message.trim() || sending ? 0.5 : 1 }, children: sending ? "Sending\u2026" : "Send report" })
         ] }),
         view === "sent" && /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "20px 0" }, children: [
@@ -362,29 +510,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" : "?"
-      }
-    )
+    showLauncher && (!isMobile || !open) && /* @__PURE__ */ jsx("button", { onClick: toggle, "aria-label": "Support", style: launcherStyle, children: open && !isMobile ? "\xD7" : "?" })
   ] });
 }
 var tab = (active, accent) => ({
@@ -435,5 +561,7 @@ function mountSupportWidget(props) {
 }
 export {
   SupportWidget,
-  mountSupportWidget
+  closeSupport,
+  mountSupportWidget,
+  openSupport
 };

package/package.json

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