@tmls-ai/support 0.1.6 → 0.1.8

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);
@@ -180,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 {
         }
       }
@@ -203,6 +234,7 @@ function SupportWidget(props) {
       setLastTicket(ticketNumber);
       setMessage("");
       setShotPreview(null);
+      setFiles([]);
       setView("sent");
     } catch {
       setLastTicket(null);
@@ -210,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");
@@ -262,11 +294,22 @@ 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) deeplinkTicket = null;
-    setOpen((o) => !o);
-    if (!open && withShot) captureShot();
+    if (open) closePanel();
+    else openPanel();
   };
+  useEffect(() => subscribeSupport((action) => {
+    if (action === "open") openPanel();
+    else closePanel();
+  }), [withShot]);
   const panelStyle = isMobile ? {
     position: "fixed",
     left: 0,
@@ -327,7 +370,14 @@ function SupportWidget(props) {
     background: accent,
     color: "#fff",
     fontSize: 22,
-    boxShadow: "0 4px 16px rgba(0,0,0,0.35)"
+    boxShadow: "0 4px 16px rgba(0,0,0,0.35)",
+    // Center the ×/? glyph in the circle. Without flex centering the glyph
+    // renders as baseline-aligned inline text and sits visibly off-center.
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    lineHeight: 1,
+    padding: 0
   };
   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: panelStyle, children: [
@@ -364,16 +414,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: [
@@ -438,7 +517,7 @@ function SupportWidget(props) {
         ] })
       ] })
     ] }),
-    (!isMobile || !open) && /* @__PURE__ */ jsx("button", { onClick: toggle, "aria-label": "Support", style: launcherStyle, children: open && !isMobile ? "\xD7" : "?" })
+    showLauncher && (!isMobile || !open) && /* @__PURE__ */ jsx("button", { onClick: toggle, "aria-label": "Support", style: launcherStyle, children: open && !isMobile ? "\xD7" : "?" })
   ] });
 }
 var tab = (active, accent) => ({
@@ -489,5 +568,7 @@ function mountSupportWidget(props) {
 }
 export {
   SupportWidget,
-  mountSupportWidget
+  closeSupport,
+  mountSupportWidget,
+  openSupport
 };

package/package.json

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