@mrrocket/sdk 0.13.0 → 0.15.0

package/dist/react-native/index.js

@@ -41,6 +41,7 @@ __export(native_exports, {
   useMessenger: () => useMessenger,
   useNavigationTracking: () => useNavigationTracking,
   useOnboarding: () => useOnboarding,
+  usePaywall: () => usePaywall,
   usePush: () => usePush,
   useText: () => useText,
   useVariant: () => useVariant
@@ -49,7 +50,7 @@ module.exports = __toCommonJS(native_exports);
 var import_react3 = require("react");
 
 // src/core.ts
-var SDK_VERSION = "0.13.0";
+var SDK_VERSION = "0.15.0";
 var propOf = (person, name) => {
   const want = name.trim().toLowerCase();
   for (const [k, v] of Object.entries(person)) if (k.toLowerCase() === want) return v;
@@ -172,7 +173,14 @@ var textChanges = (config, distinctId, preview) => {
 var newDistinctId = () => typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `ck_${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;
 
 // src/api-client.ts
-var replyLine = (t) => t === "minutes" ? "We usually reply in a few minutes" : t === "day" ? "We usually reply within a day" : "We usually reply in a few hours";
+var CHAT_FILE_MAX_BYTES = 10 * 1024 * 1024;
+var CHAT_FILES_PER_MESSAGE = 4;
+var CORNERS = {
+  round: { panel: 22, bubble: 18, tail: 6, card: 16, field: 20 },
+  soft: { panel: 14, bubble: 12, tail: 4, card: 10, field: 10 },
+  square: { panel: 6, bubble: 6, tail: 2, card: 4, field: 4 }
+};
+var BRAND_URL = "https://mrrocket.dev/?utm_source=messenger&utm_medium=powered-by";
 var inkOn = (hex) => {
   const m = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex);
   if (!m) return "#ffffff";
@@ -196,7 +204,8 @@ var call = async (url, init, signal) => {
     res = await fetch(url, {
       ...init,
       signal,
-      headers: init?.body ? { "content-type": "application/json" } : void 0
+      // A form (a file upload) sets its own multipart type with the boundary.
+      headers: typeof init?.body === "string" ? { "content-type": "application/json" } : void 0
     });
   } catch (e) {
     if (e.name === "AbortError") throw e;
@@ -229,7 +238,19 @@ var createApi = (c) => {
     seen: (id) => post(`/surveys/${encodeURIComponent(id)}/seen`, { user: void 0 }),
     respond: (id, r) => post(`/surveys/${encodeURIComponent(id)}/respond`, r),
     chat: (signal) => call(`${base}/messages?${qs({ key: c.apiKey, distinctId: c.distinctId })}`, void 0, signal),
+    /** A message; `attachments` are upload ids from `uploadChatFile` (then the body may be empty). */
     sendChat: (m) => post("/messages", m),
+    /** Uploads one picked file for the next message (pictures and PDFs, at most 10 MB); answers its upload id. */
+    uploadChatFile: (file, signal) => {
+      const form = new FormData();
+      form.append("key", c.apiKey);
+      form.append("distinctId", c.distinctId);
+      if ("uri" in file) form.append("file", file);
+      else form.append("file", file, file.name || "file");
+      return call(`${base}/messages/attachments`, { method: "POST", body: form }, signal);
+    },
+    /** Where a sent file of this visitor's chat is read (an image's src, a PDF's link). */
+    attachmentUrl: (id) => `${base}/messages/attachments/${encodeURIComponent(id)}?${qs({ key: c.apiKey, distinctId: c.distinctId })}`,
     articles: (q, signal) => call(`${base}/articles?${qs({ key: c.apiKey, q })}`, void 0, signal),
     article: (id, signal) => call(`${base}/articles/${encodeURIComponent(id)}?${qs({ key: c.apiKey, distinctId: c.distinctId })}`, void 0, signal),
     messengerLook: (signal) => call(`${base}/messenger?${qs({ key: c.apiKey })}`, void 0, signal),
@@ -342,6 +363,9 @@ var pageMatches = (pattern, path) => {
   return at === (p.replace(/\/+$/, "") || "/");
 };
 var stepsIn = (nodes) => nodes.flatMap((n) => n.kind === "condition" ? [...stepsIn(n.yes), ...stepsIn(n.no)] : n.kind === "wait" ? [] : [n]);
+var monthsSince = (since, now = Date.now()) => since == null || since === "" ? NaN : Math.floor((now - new Date(since).getTime()) / 2630016e3);
+var low = (x) => x?.trim().toLowerCase();
+var ruleMatches = ({ when: w = {} }, c) => (w.answer == null || low(w.answer) === low(c.answer)) && (w.plan == null || [w.plan].flat().some((x) => low(x) === low(c.plan))) && !(c.months >= w.tenureUnder) && !(c.months < w.tenureOver) && (w.tenureUnder == null || c.months >= 0) && (w.tenureOver == null || c.months >= 0);
 var createFlows = (env) => {
   let config = null;
   let cancel = null;
@@ -509,18 +533,23 @@ var createFlows = (env) => {
   };
   const view = () => {
     if (cancel) {
-      const offer = cancel.reason ? cancel.flow.offers[cancel.reason] : void 0;
+      const c = cancel;
+      const followUp = c.flow.followUps?.[c.reason];
+      const f = followUp ? 1 : 0;
+      const steps = c.plain ? 1 : 3 + f + (c.flow.second?.[c.reason] ? 1 : 0);
       return {
         type: "cancel",
-        screen: cancel.screen,
-        flow: cancel.flow,
-        reason: cancel.reason,
-        offer: cancel.screen === "offer" ? offer : void 0,
-        price: cancel.options.price,
-        busy: cancel.busy,
-        error: cancel.error,
-        step: cancel.plain ? 1 : cancel.screen === "survey" ? 1 : cancel.screen === "offer" ? 2 : 3,
-        steps: cancel.plain ? 1 : 3
+        screen: c.screen,
+        flow: c.flow,
+        reason: c.reason,
+        ...c.screen === "followup" && followUp ? { followUp, answer: c.answer } : {},
+        offer: c.screen === "offer" ? c.offer : void 0,
+        ...c.screen === "offer" ? { round: c.round } : {},
+        price: c.options.price,
+        busy: c.busy,
+        error: c.error,
+        step: c.screen === "survey" ? 1 : c.screen === "followup" ? 2 : c.screen === "offer" ? 1 + f + c.round : steps,
+        steps
       };
     }
     const ob = onboardingView();
@@ -599,12 +628,22 @@ var createFlows = (env) => {
     });
     return loading;
   };
+  const offerAt = (c) => c.round > 1 ? { round: 2 } : c.rule >= 0 ? { rule: c.rule } : {};
+  const toOffer = (c) => {
+    const who = { answer: c.answer, plan: c.options.plan, months: monthsSince(c.options.customerSince, env.now?.()) };
+    const rules = c.flow.rules?.[c.reason] ?? [];
+    c.rule = rules.findIndex((r) => ruleMatches(r, who));
+    c.offer = c.rule < 0 ? c.flow.offers[c.reason] : rules[c.rule].offer ?? void 0;
+    c.round = 1;
+    c.screen = c.offer ? "offer" : "confirm";
+  };
   const result = (c, outcome, comment) => {
-    const offer = c.reason ? c.flow.offers[c.reason] : void 0;
+    const offer = c.screen === "offer" ? c.offer : void 0;
     return {
       outcome,
       run: c.run,
       ...c.reason ? { reason: c.reason, reasonLabel: c.flow.reasons.find((r) => r.id === c.reason)?.label } : {},
+      ...c.answer ? { answer: c.answer } : {},
       ...outcome === "saved" && offer ? { offer } : {},
       ...comment?.trim() ? { comment: comment.trim().slice(0, 500) } : {}
     };
@@ -617,7 +656,8 @@ var createFlows = (env) => {
       outcome: r.outcome,
       customer: c.options.customer ?? "consumer",
       ...r.reason ? { reason: r.reason } : {},
-      ...r.offer ? { offer: r.offer.kind } : {},
+      ...r.answer ? { answer: r.answer } : {},
+      ...r.offer ? { offer: r.offer.kind, ...offerAt(c) } : {},
       ...r.comment ? { comment: r.comment } : {}
     });
     if (cancel === c) cancel = null;
@@ -647,7 +687,7 @@ var createFlows = (env) => {
     let resolve = () => {
     };
     const promise = new Promise((r) => resolve = r);
-    const c = { flow, options, plain, screen: plain ? "confirm" : "survey", run: runId(), busy: false, resolve, promise };
+    const c = { flow, options, plain, screen: plain ? "confirm" : "survey", round: 1, run: runId(), busy: false, resolve, promise };
     cancel = c;
     env.track(CANCEL_EVENT, { action: "shown", run: c.run, version: flow.version, customer: options.customer ?? "consumer", plain });
     emit();
@@ -699,29 +739,43 @@ var createFlows = (env) => {
     },
     cancel: {
       pick: (reason) => {
-        if (!cancel || cancel.busy || !cancel.flow.reasons.some((r) => r.id === reason)) return;
+        if (!cancel || cancel.busy || cancel.screen !== "survey" || !cancel.flow.reasons.some((r) => r.id === reason)) return;
+        if (cancel.reason !== reason) cancel.answer = void 0;
         cancel.reason = reason;
         cancel.error = void 0;
         emit();
       },
+      answer: (text2) => {
+        const c = cancel;
+        if (!c || c.busy || c.screen !== "followup") return;
+        const t = text2.slice(0, 500);
+        c.answer = t.trim() ? t : void 0;
+        emit();
+      },
       next: () => {
         const c = cancel;
-        if (!c || c.screen !== "survey" || !c.reason) return;
-        env.track(CANCEL_EVENT, { action: "answered", run: c.run, version: c.flow.version, reason: c.reason });
-        c.screen = c.flow.offers[c.reason] ? "offer" : "confirm";
+        if (!c || !c.reason) return;
+        if (c.screen === "survey") {
+          env.track(CANCEL_EVENT, { action: "answered", run: c.run, version: c.flow.version, reason: c.reason });
+          if (c.flow.followUps?.[c.reason]) c.screen = "followup";
+          else toOffer(c);
+        } else if (c.screen === "followup") {
+          c.answer = c.answer?.trim();
+          toOffer(c);
+        } else return;
         emit();
       },
       accept: (comment) => {
         const c = cancel;
         if (!c || c.screen !== "offer" || !c.reason) return;
-        const offer = c.flow.offers[c.reason];
         if (!c.busy)
           env.track(CANCEL_EVENT, {
             action: "offer",
             run: c.run,
             version: c.flow.version,
             reason: c.reason,
-            offer: offer?.kind,
+            offer: c.offer?.kind,
+            ...offerAt(c),
             outcome: "accepted"
           });
         settle(c, "saved", comment);
@@ -734,10 +788,16 @@ var createFlows = (env) => {
           run: c.run,
           version: c.flow.version,
           reason: c.reason,
-          offer: c.reason ? c.flow.offers[c.reason]?.kind : void 0,
+          offer: c.offer?.kind,
+          ...offerAt(c),
           outcome: "declined"
         });
-        c.screen = "confirm";
+        const second = c.round === 1 && c.reason ? c.flow.second?.[c.reason] : void 0;
+        if (second) {
+          c.offer = second;
+          c.rule = void 0;
+          c.round = 2;
+        } else c.screen = "confirm";
         c.error = void 0;
         emit();
       },
@@ -805,6 +865,131 @@ var createFlows = (env) => {
   return controller;
 };
 
+// src/paywall.ts
+var PAYWALL_EVENT = "$paywall";
+var paywallPages = (config, w, distinctId) => {
+  const e = w.experiment ? config?.experiments.find((x) => x.key === w.experiment) : void 0;
+  const id = e ? assign(e, distinctId) : w.variants[0]?.id;
+  const v = w.variants.find((x) => x.id === id) ?? w.variants[0];
+  return v ? { variant: v.id, pages: v.pages, test: e?.status === "running" && !e.winner ? e.key : void 0 } : null;
+};
+var createPaywallHost = (env) => {
+  let run = null;
+  const listeners = /* @__PURE__ */ new Set();
+  const emit = () => {
+    for (const l of [...listeners]) {
+      try {
+        l();
+      } catch {
+      }
+    }
+  };
+  const base = () => run ? { paywall: run.w.id, placement: run.w.placement, variant: run.variant } : {};
+  const show = () => {
+    if (run && !run.seen.has(run.index)) {
+      run.seen.add(run.index);
+      env.track(PAYWALL_EVENT, { ...base(), page: run.pages[run.index].id, index: run.index, action: "page" });
+    }
+    emit();
+  };
+  const end = (r) => {
+    const c = run;
+    if (!c) return;
+    run = null;
+    if (r.outcome === "closed") c.options.onClose?.(r);
+    c.resolve(r);
+    emit();
+  };
+  const result = (outcome) => ({
+    outcome,
+    index: run?.index ?? 0,
+    ...run ? { paywall: run.w.id, variant: run.variant } : {},
+    ...outcome !== "closed" && run ? { plan: run.plans.find((p) => p.id === run.plan) } : {}
+  });
+  const buy = () => {
+    const c = run;
+    const plan = c?.plans.find((p) => p.id === c.plan);
+    if (!c || !plan || c.busy) return;
+    if (!c.options.onPurchase) return end(result("chosen"));
+    c.busy = true;
+    c.error = void 0;
+    emit();
+    Promise.resolve().then(() => c.options.onPurchase?.(plan)).then(
+      (ok) => {
+        c.busy = false;
+        if (run !== c) return;
+        if (ok === false) return emit();
+        env.track(PAYWALL_EVENT, { ...base(), page: c.pages[c.index].id, index: c.index, plan: plan.id, action: "purchased" });
+        end(result("purchased"));
+      },
+      () => {
+        c.busy = false;
+        c.error = "The purchase did not go through. Please try again.";
+        emit();
+      }
+    );
+  };
+  return {
+    open: (placement, options = {}) => {
+      if (run) return run.promise;
+      const config = env.config();
+      const w = config?.paywalls?.find((x) => x.placement === placement);
+      const picked = w ? paywallPages(config, w, env.distinctId()) : null;
+      if (!w || !picked?.pages.length) return Promise.resolve({ outcome: "closed", index: 0 });
+      const own = new Map((options.plans ?? []).map((p) => [p.id, p]));
+      const plans = w.plans.map((p) => own.get(p.id) ?? p);
+      let resolve = () => {
+      };
+      const promise = new Promise((r) => resolve = r);
+      const plan = plans.some((p) => p.id === w.highlight) ? w.highlight : plans[0]?.id;
+      run = { w, variant: picked.variant, pages: picked.pages, plans, index: 0, plan, busy: false, seen: /* @__PURE__ */ new Set(), options, resolve, promise };
+      if (picked.test) env.track("$exposure", { experiment: picked.test, variant: picked.variant });
+      show();
+      return promise;
+    },
+    view: () => run ? {
+      paywall: run.w,
+      variant: run.variant,
+      page: run.pages[run.index],
+      index: run.index,
+      total: run.pages.length,
+      last: run.index === run.pages.length - 1,
+      plans: run.plans,
+      plan: run.plan,
+      busy: run.busy,
+      error: run.error
+    } : null,
+    subscribe: (l) => {
+      listeners.add(l);
+      return () => listeners.delete(l);
+    },
+    next: () => {
+      if (!run || run.busy) return;
+      if (run.pages[run.index].kind === "plans" || run.index === run.pages.length - 1) return buy();
+      run.index++;
+      run.error = void 0;
+      show();
+    },
+    back: () => {
+      if (!run || run.busy || !run.index) return;
+      run.index--;
+      run.error = void 0;
+      emit();
+    },
+    pick: (id) => {
+      if (!run || run.busy || !run.plans.some((p) => p.id === id)) return;
+      run.plan = id;
+      run.error = void 0;
+      emit();
+    },
+    close: () => {
+      if (!run || run.busy) return;
+      env.track(PAYWALL_EVENT, { ...base(), index: run.index, action: "closed" });
+      end(result("closed"));
+    }
+  };
+};
+
 // src/rage.ts
 var RageDetector = class {
   constructor(windowMs = 1e3, radius = 30, count = 3) {
@@ -1072,6 +1257,7 @@ var createClient = (options, deps) => {
   const errorQueue = [];
   const errorsSeen = /* @__PURE__ */ new Set();
   let errorsSent = 0;
+  const paywall = createPaywallHost({ config: () => config, distinctId: () => distinctId(), track: (event, props) => record(event, props) });
   const flows = createFlows({
     track: (event, props) => record(event, props),
     personId: () => consent !== "off" ? identified : void 0,
@@ -1632,6 +1818,8 @@ var createClient = (options, deps) => {
     },
     openCancelFlow: (o) => flows.openCancelFlow(o),
     startOnboarding: (id) => flows.startOnboarding(id),
+    openPaywall: (placement, o) => paywall.open(placement, o),
+    paywall,
     registerForPush,
     unregisterForPush,
     flows,
@@ -1697,19 +1885,21 @@ var RN = require("react-native");
 var LIGHT = { bg: "#ffffff", fg: "#1c1d20", muted: "#5d6068", soft: "#f4f5f7", line: "#e4e5e8" };
 var DARK = { bg: "#17181b", fg: "#f1f2f4", muted: "#a9acb3", soft: "#232428", line: "#2e2f35" };
 var months = (n) => `${n} ${n === 1 ? "month" : "months"}`;
-var MRRocketFlows = ({ flows, appearance = {} }) => {
+var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
   const scheme = RN.useColorScheme?.();
   const dark = appearance.theme === "dark" || (appearance.theme ?? "auto") === "auto" && scheme === "dark";
   const p = { ...dark ? DARK : LIGHT, accent: appearance.accent ?? "#3f76ff", danger: "#d92d20" };
   const [, setTick] = (0, import_react.useState)(0);
   (0, import_react.useEffect)(() => flows.subscribe(() => setTick((t) => t + 1)), [flows]);
+  (0, import_react.useEffect)(() => paywall?.subscribe(() => setTick((t) => t + 1)), [paywall]);
+  const pw = paywall?.view() ?? null;
   const v = flows.view();
   const [comment, setComment] = (0, import_react.useState)("");
   const screen = v?.type === "cancel" ? v.screen : null;
   (0, import_react.useEffect)(() => {
     if (!screen) setComment("");
   }, [screen]);
-  if (!v) return null;
+  if (!v && !pw) return null;
   const text2 = (children, style = {}) => (0, import_react.createElement)(RN.Text, { style: { color: p.fg, fontSize: 15, ...style } }, children);
   const muted = (children, style = {}) => text2(children, { color: p.muted, fontSize: 13, ...style });
   const title = (children) => (0, import_react.createElement)(RN.Text, { accessibilityRole: "header", style: { color: p.fg, fontSize: 18, fontWeight: "700" } }, children);
@@ -1768,9 +1958,9 @@ var MRRocketFlows = ({ flows, appearance = {} }) => {
       card(children, { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, paddingBottom: 34 })
     )
   );
-  const input = (placeholder) => (0, import_react.createElement)(RN.TextInput, {
-    value: comment,
-    onChangeText: setComment,
+  const input = (placeholder, value = comment, onChange = setComment) => (0, import_react.createElement)(RN.TextInput, {
+    value,
+    onChangeText: onChange,
     placeholder,
     placeholderTextColor: p.muted,
     multiline: true,
@@ -1778,6 +1968,71 @@ var MRRocketFlows = ({ flows, appearance = {} }) => {
     accessibilityLabel: placeholder,
     style: { minHeight: 72, borderWidth: 1, borderColor: p.line, borderRadius: 10, padding: 10, color: p.fg, textAlignVertical: "top" }
   });
+  const paywallSheet = (w) => {
+    const pg = w.page;
+    const host = paywall;
+    return sheet(
+      [
+        (0, import_react.createElement)(
+          RN.View,
+          { key: "top", style: { flexDirection: "row", alignItems: "center", gap: 4 } },
+          ...w.total > 1 ? Array.from(
+            { length: w.total },
+            (_, i) => (0, import_react.createElement)(RN.View, { key: i, style: { width: 16, height: 4, borderRadius: 4, backgroundColor: i <= w.index ? p.accent : p.line } })
+          ) : [],
+          close("Close", host.close)
+        ),
+        title(pg.title),
+        pg.body ? muted(pg.body, { fontSize: 15 }) : null,
+        ...pg.kind === "benefits" ? (pg.items ?? []).map(
+          (item, i) => (0, import_react.createElement)(
+            RN.View,
+            { key: `b${i}`, style: { flexDirection: "row", gap: 10, alignItems: "flex-start" } },
+            text2("\u2713", { color: p.accent, fontWeight: "700" }),
+            text2(item, { flex: 1 })
+          )
+        ) : [],
+        ...pg.kind === "proof" ? (pg.quotes ?? []).map(
+          (q, i) => (0, import_react.createElement)(RN.View, { key: `q${i}`, style: { backgroundColor: p.soft, borderRadius: 12, padding: 12, gap: 6 } }, text2(q.text), q.by ? muted(q.by) : null)
+        ) : [],
+        pg.kind === "plans" ? (0, import_react.createElement)(
+          RN.View,
+          { key: "plans", accessibilityRole: "radiogroup", style: { gap: 6 } },
+          ...w.plans.map(
+            (plan) => (0, import_react.createElement)(
+              RN.Pressable,
+              {
+                key: plan.id,
+                onPress: () => host.pick(plan.id),
+                accessibilityRole: "radio",
+                accessibilityLabel: `${plan.name}, ${plan.price}`,
+                accessibilityState: { checked: w.plan === plan.id },
+                style: {
+                  minHeight: 52,
+                  paddingHorizontal: 12,
+                  borderRadius: 10,
+                  borderWidth: 1,
+                  borderColor: w.plan === plan.id ? p.accent : p.line,
+                  backgroundColor: w.plan === plan.id ? p.soft : p.bg,
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 10
+                }
+              },
+              (0, import_react.createElement)(RN.View, { style: { flex: 1 } }, text2(plan.name, { fontWeight: "600" }), plan.note ? muted(plan.note) : null),
+              text2(plan.price, { fontWeight: "700" })
+            )
+          )
+        ) : null,
+        w.error ? text2(w.error, { color: p.danger, fontSize: 13 }) : null,
+        btn(w.busy ? "One moment\u2026" : pg.button || "Continue", "primary", host.next, w.busy || pg.kind === "plans" && !w.plan),
+        w.index ? btn("Back", "quiet", host.back, w.busy) : null
+      ],
+      host.close
+    );
+  };
+  if (pw) return paywallSheet(pw);
+  if (!v) return null;
   if (v.type === "cancel") {
     const top = (0, import_react.createElement)(
       RN.View,
@@ -1790,38 +2045,49 @@ var MRRocketFlows = ({ flows, appearance = {} }) => {
     );
     const error = v.error ? text2(v.error, { color: p.danger, fontSize: 13 }) : null;
     let body = [];
+    const choices = (items) => (0, import_react.createElement)(
+      RN.ScrollView,
+      { style: { maxHeight: 320 }, contentContainerStyle: { gap: 6 }, accessibilityRole: "radiogroup" },
+      ...items.map(
+        (c) => (0, import_react.createElement)(
+          RN.Pressable,
+          {
+            key: c.key,
+            onPress: c.press,
+            accessibilityRole: "radio",
+            accessibilityState: { checked: c.on },
+            style: {
+              minHeight: 44,
+              paddingHorizontal: 12,
+              borderRadius: 10,
+              borderWidth: 1,
+              borderColor: c.on ? p.accent : p.line,
+              backgroundColor: c.on ? p.soft : p.bg,
+              justifyContent: "center"
+            }
+          },
+          text2(c.label, { fontWeight: "500" })
+        )
+      )
+    );
     if (v.screen === "survey")
       body = [
         title(v.flow.question || "Why are you leaving?"),
-        (0, import_react.createElement)(
-          RN.ScrollView,
-          { style: { maxHeight: 320 }, contentContainerStyle: { gap: 6 }, accessibilityRole: "radiogroup" },
-          ...v.flow.reasons.map(
-            (r) => (0, import_react.createElement)(
-              RN.Pressable,
-              {
-                key: r.id,
-                onPress: () => flows.cancel.pick(r.id),
-                accessibilityRole: "radio",
-                accessibilityState: { checked: v.reason === r.id },
-                style: {
-                  minHeight: 44,
-                  paddingHorizontal: 12,
-                  borderRadius: 10,
-                  borderWidth: 1,
-                  borderColor: v.reason === r.id ? p.accent : p.line,
-                  backgroundColor: v.reason === r.id ? p.soft : p.bg,
-                  justifyContent: "center"
-                }
-              },
-              text2(r.label, { fontWeight: "500" })
-            )
-          )
-        ),
+        choices(v.flow.reasons.map((r) => ({ key: r.id, label: r.label, on: v.reason === r.id, press: () => flows.cancel.pick(r.id) }))),
         btn("Continue", "primary", flows.cancel.next, !v.reason),
         btn("Never mind, keep my plan", "quiet", flows.cancel.close)
       ];
-    else if (v.screen === "offer" && v.offer) {
+    else if (v.screen === "followup" && v.followUp) {
+      const f = v.followUp;
+      const label = v.flow.reasons.find((r) => r.id === v.reason)?.label;
+      body = [
+        label ? muted(`You said: ${label}`) : null,
+        title(f.question),
+        f.answers.length ? choices(f.answers.map((a, i) => ({ key: String(i), label: a, on: v.answer === a, press: () => flows.cancel.answer(a) }))) : input("Your answer (optional)", v.answer ?? "", flows.cancel.answer),
+        btn("Continue", "primary", flows.cancel.next),
+        btn("Never mind, keep my plan", "quiet", flows.cancel.close)
+      ];
+    } else if (v.screen === "offer" && v.offer) {
       const o = v.offer;
       const label = v.flow.reasons.find((r) => r.id === v.reason)?.label;
       const detail = o.kind === "discount" && o.percent ? v.price ? `${money(discounted(v.price.amount, o.percent), v.price.currency)} instead of ${money(v.price.amount, v.price.currency)}${o.months ? ` for ${months(o.months)}` : ""}` : `${o.percent}% off${o.months ? ` for ${months(o.months)}` : ""}` : o.kind === "pause" && o.months ? `Pause for up to ${months(o.months)}. Your data stays.` : o.kind === "downgrade" && o.planName ? o.planName : null;
@@ -2497,6 +2763,13 @@ var buzz = () => {
   } catch {
   }
 };
+var imagePicker = null;
+try {
+  imagePicker = require("expo-image-picker");
+} catch {
+  imagePicker = null;
+}
+var PHOTO_TYPES = { jpg: "image/jpeg", jpeg: "image/jpeg", png: "image/png", webp: "image/webp", gif: "image/gif" };
 var teamOf = (t) => (t?.messages ?? []).filter((m) => m.from !== "visitor");
 var svg = null;
 try {
@@ -2512,9 +2785,10 @@ var GLYPH = {
   up: "M8 13V3M3.5 7.5 8 3l4.5 4.5",
   next: "M6 3.5 10.5 8 6 12.5",
   search: "M7 11.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zM10.5 10.5l3 3",
-  cross: "m4 4 8 8M12 4l-8 8"
+  cross: "m4 4 8 8M12 4l-8 8",
+  clip: "m14.3 7.4-6.1 6.1a4 4 0 0 1-5.7-5.7l5.7-5.7a2.7 2.7 0 0 1 3.8 3.8L6.3 11.6a1.3 1.3 0 0 1-1.9-1.9l5.7-5.6"
 };
-var FALLBACK = { chat: "\u{1F4AC}", home: "\u2302", help: "?", send: "\u2192", up: "\u2191", next: "\u203A", search: "\u2315", cross: "\xD7" };
+var FALLBACK = { chat: "\u{1F4AC}", home: "\u2302", help: "?", send: "\u2192", up: "\u2191", next: "\u203A", search: "\u2315", cross: "\xD7", clip: "\u{1F4CE}" };
 var glyph = (name, color, size = 20) => {
   const Svg = svg?.Svg ?? svg?.default;
   if (!svg || !Svg) return (0, import_react2.createElement)(RN3.Text, { style: { color, fontSize: Math.round(size * 0.85), lineHeight: size + 2, textAlign: "center", minWidth: size } }, FALLBACK[name]);
@@ -2526,7 +2800,11 @@ var teamMark = (title, bg, fg, size = 36) => (0, import_react2.createElement)(
   { style: { width: size, height: size, borderRadius: size / 2, backgroundColor: bg, alignItems: "center", justifyContent: "center" } },
   (0, import_react2.createElement)(RN3.Text, { style: { color: fg, fontSize: Math.round(size * 0.42), fontWeight: "700" } }, (title.trim()[0] ?? "?").toUpperCase())
 );
-var lift = { shadowColor: "#101218", shadowOpacity: 0.07, shadowRadius: 14, shadowOffset: { width: 0, height: 4 }, elevation: 2 };
+var HU = {
+  light: { bg: "#ffffff", surface: "#f4f4f5", def: "#ececee", segment: "#ffffff", fg: "#18181b", muted: "#71717a" },
+  dark: { bg: "#111113", surface: "#1c1c1f", def: "#26262a", segment: "#3a3a40", fg: "#fafafa", muted: "#a1a1aa" }
+};
+var hairline = { shadowColor: "#000", shadowOpacity: 0.07, shadowRadius: 3, shadowOffset: { width: 0, height: 1 }, elevation: 1 };
 var useChat = (client, o, open, view) => {
   const [thread, setThread] = (0, import_react2.useState)(null);
   const [loaded, setLoaded] = (0, import_react2.useState)(false);
@@ -2693,12 +2971,14 @@ var MessengerSheet = ({
   o,
   chat,
   view,
-  setView
+  setView,
+  brand
 }) => {
   const k = kit(p);
   const [body, setBody] = (0, import_react2.useState)("");
   const [email, setEmail] = (0, import_react2.useState)("");
   const [pending, setPending] = (0, import_react2.useState)(null);
+  const [photos, setPhotos] = (0, import_react2.useState)([]);
   const [query, setQuery] = (0, import_react2.useState)("");
   const helpOn = o.help !== false;
   const arts = useArticles(client, helpOn, query);
@@ -2712,52 +2992,135 @@ var MessengerSheet = ({
   }, [count, view]);
   const needEmail = (o.askEmail ?? true) && !thread?.hasEmail && !client.getUser()?.email;
   const emailOk = !email.trim() || EMAIL.test(email.trim());
+  const pickPhotos = async () => {
+    const api = client.api();
+    if (!api || !imagePicker?.launchImageLibraryAsync || pending) return;
+    const room = CHAT_FILES_PER_MESSAGE - photos.length;
+    if (room <= 0) return chat.setError(`Up to ${CHAT_FILES_PER_MESSAGE} files per message.`);
+    let res;
+    try {
+      res = await imagePicker.launchImageLibraryAsync({ allowsMultipleSelection: room > 1, selectionLimit: room, quality: 0.8, exif: false });
+    } catch (e) {
+      return chat.setError(e.message || "The photos could not be opened.");
+    }
+    if (res.canceled || res.cancelled || !res.assets?.length) return;
+    chat.setError("");
+    const added = [];
+    for (const a of res.assets.slice(0, room)) {
+      const name = a.fileName || a.uri.split("/").pop() || "photo.jpg";
+      const type = a.mimeType && Object.values(PHOTO_TYPES).includes(a.mimeType) ? a.mimeType : PHOTO_TYPES[name.split(".").pop()?.toLowerCase() ?? ""];
+      if (!type) {
+        chat.setError("Only pictures (PNG, JPEG, WebP, GIF) can be sent.");
+        continue;
+      }
+      if (a.fileSize && a.fileSize > CHAT_FILE_MAX_BYTES) {
+        chat.setError(`${name} is larger than 10 MB.`);
+        continue;
+      }
+      const ph = { key: `local-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 7)}`, uri: a.uri, name, type, size: a.fileSize ?? 0, up: Promise.resolve() };
+      ph.up = api.uploadChatFile({ uri: a.uri, name, type }).then(
+        (r2) => {
+          ph.id = r2.id;
+          setPhotos((list) => list.map((x) => x.key === ph.key ? { ...ph } : x));
+        },
+        (e) => {
+          setPhotos((list) => list.filter((x) => x.key !== ph.key));
+          chat.setError(`${name}: ${e.message}`);
+        }
+      );
+      added.push(ph);
+    }
+    setPhotos((list) => [...list, ...added]);
+  };
+  const canSend = (!!body.trim() || photos.length > 0) && !pending && emailOk;
   const send = async () => {
     const text2 = body.trim();
     const api = client.api();
-    if (!text2 || pending || !emailOk || !api) return;
-    setPending({ id: "pending", from: "visitor", body: text2, at: (/* @__PURE__ */ new Date()).toISOString() });
+    const files = photos;
+    if (!text2 && !files.length || pending || !emailOk || !api) return;
+    setPending({
+      id: "pending",
+      from: "visitor",
+      body: text2,
+      at: (/* @__PURE__ */ new Date()).toISOString(),
+      ...files.length ? { attachments: files.map((f) => ({ id: f.key, name: f.name, type: f.type, size: f.size })) } : {}
+    });
     setBody("");
+    setPhotos([]);
     chat.setError("");
     try {
-      chat.take(await api.sendChat({ body: text2, email: needEmail && email.trim() ? email.trim() : void 0 }));
+      await Promise.all(files.map((f) => f.up));
+      const ids = files.filter((f) => f.id).map((f) => f.id);
+      if (!text2 && !ids.length) throw new Error("The photo could not be sent.");
+      const win = RN3.Dimensions.get("screen");
+      chat.take(
+        await api.sendChat({
+          body: text2,
+          email: needEmail && email.trim() ? email.trim() : void 0,
+          ...ids.length ? { attachments: ids } : {},
+          // A little context for a bug report: the system and the screen size.
+          context: { os: `${RN3.Platform.OS === "ios" ? "iOS" : RN3.Platform.OS === "android" ? "Android" : RN3.Platform.OS} ${RN3.Platform.Version ?? ""}`.trim(), browser: "App", viewport: `${Math.round(win.width)}\xD7${Math.round(win.height)}` }
+        })
+      );
     } catch (e) {
       setBody(text2);
+      setPhotos(files.filter((f) => f.id));
       chat.setError(e.message);
     } finally {
       setPending(null);
     }
   };
+  const localUris = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+  for (const f of photos) localUris.current.set(f.key, f.uri);
+  const fileUrl = (id) => localUris.current.get(id) ?? client.api()?.attachmentUrl(id) ?? "";
   const ink = inkOn(p.accent);
   const dark = p.bg === DARK.bg;
-  const canvas = dark ? p.bg : p.soft;
-  const raised = dark ? p.soft : p.bg;
-  const title = o.title ?? "Chat with us";
-  const reply = replyLine(o.replyTime);
+  const r = CORNERS[o.corners ?? "round"];
+  const plain = o.header !== "color";
+  const hu = dark ? HU.dark : HU.light;
+  const surf = {};
+  const segLift = dark ? {} : hairline;
+  const canvas = hu.bg;
+  const raised = hu.surface;
+  const title = o.title?.trim() ?? "";
   const bubble = (m, isPending = false) => {
     const mine = m.from === "visitor";
     return (0, import_react2.createElement)(
       RN3.View,
       { key: m.id, style: { alignSelf: mine ? "flex-end" : "flex-start", maxWidth: "82%", gap: 4 } },
-      (0, import_react2.createElement)(
+      ...(m.attachments ?? []).map(
+        (f) => (0, import_react2.createElement)(
+          RN3.Pressable,
+          {
+            key: f.id,
+            onPress: () => void RN3.Linking.openURL(fileUrl(f.id)).catch(() => void 0),
+            accessibilityRole: "imagebutton",
+            accessibilityLabel: f.name,
+            style: { alignSelf: mine ? "flex-end" : "flex-start", opacity: isPending ? 0.7 : 1 }
+          },
+          f.type.startsWith("image/") ? (0, import_react2.createElement)(RN3.Image, { source: { uri: fileUrl(f.id) }, resizeMode: "cover", style: { width: 200, height: 150, borderRadius: r.bubble, backgroundColor: p.soft } }) : (0, import_react2.createElement)(RN3.View, { style: { backgroundColor: p.soft, borderRadius: r.card, paddingHorizontal: 10, paddingVertical: 7 } }, k.text(`\u{1F4C4} ${f.name}`, { fontSize: 13 }))
+        )
+      ),
+      !m.body && m.attachments?.length ? null : (0, import_react2.createElement)(
         RN3.View,
         {
           style: {
-            backgroundColor: mine ? p.accent : dark ? p.soft : "#eeeff1",
-            borderRadius: 18,
-            borderBottomRightRadius: mine ? 6 : 18,
-            borderBottomLeftRadius: mine ? 18 : 6,
+            backgroundColor: mine ? p.accent : hu.surface,
+            ...mine ? {} : surf,
+            borderRadius: r.bubble,
+            borderBottomRightRadius: mine ? r.tail : r.bubble,
+            borderBottomLeftRadius: mine ? r.bubble : r.tail,
             paddingHorizontal: 14,
             paddingVertical: 9,
             opacity: isPending ? 0.7 : 1
           }
         },
-        k.text(m.body, { color: mine ? ink : p.fg })
+        k.text(m.body, { color: mine ? ink : hu.fg })
       ),
       ...(m.articles ?? []).map(
         (a) => (0, import_react2.createElement)(
           RN3.Pressable,
-          { key: a.id, onPress: () => setView({ article: a.id }), accessibilityRole: "link", style: { borderWidth: 1, borderColor: p.line, borderRadius: 12, paddingHorizontal: 10, paddingVertical: 7 } },
+          { key: a.id, onPress: () => setView({ article: a.id }), accessibilityRole: "link", style: { backgroundColor: p.soft, borderRadius: r.card, paddingHorizontal: 10, paddingVertical: 7 } },
           k.text(`\u{1F4C4} ${a.title}`, { fontSize: 13 })
         )
       ),
@@ -2770,60 +3133,80 @@ var MessengerSheet = ({
     k.text(a.title, { flex: 1 }),
     glyph("next", p.accent, 14)
   );
-  const card = (children, style = {}) => (0, import_react2.createElement)(RN3.View, { style: { backgroundColor: raised, borderRadius: 16, padding: 16, ...dark ? { borderWidth: 1, borderColor: p.line } : lift, ...style } }, ...children);
+  const card = (children, style = {}) => (0, import_react2.createElement)(RN3.View, { style: { backgroundColor: raised, borderRadius: r.card, padding: 16, ...surf, ...style } }, ...children);
   const searchRow = (onPress) => (0, import_react2.createElement)(
     RN3.Pressable,
-    { key: "s", onPress, accessibilityRole: "search", style: { flexDirection: "row", alignItems: "center", height: 44, borderRadius: 12, paddingHorizontal: 14, backgroundColor: canvas } },
+    { key: "s", onPress, accessibilityRole: "search", style: { flexDirection: "row", alignItems: "center", height: 44, borderRadius: r.field, paddingHorizontal: 14, backgroundColor: hu.def } },
     k.muted("Search for help", { flex: 1, fontSize: 15 }),
     glyph("search", p.accent, 16)
   );
-  const search = k.field({ value: query, onChange: setQuery, placeholder: "Search for help", max: 200, style: { borderWidth: 0, borderRadius: 12, backgroundColor: raised, ...dark ? {} : lift } });
+  const search = k.field({ value: query, onChange: setQuery, placeholder: "Search for help", max: 200, style: { borderWidth: 0, borderRadius: r.field, backgroundColor: raised, ...surf } });
+  const first = client.getUser()?.name?.trim().split(/\s+/)[0];
+  const rest = greeting.replace(/^(hi|hello|hey|hallo)( there)?\s*[!,.]*\s*/i, "").trim() || "How can we help you today?";
+  const hero = (fg, sub) => (0, import_react2.createElement)(
+    RN3.Text,
+    { key: "hero", accessibilityRole: "header", style: { color: fg, fontSize: 25, fontWeight: "600", letterSpacing: -0.6, lineHeight: 30 } },
+    first ? `Hi, ${first} \u{1F44B}
+` : "Hi there \u{1F44B}\n",
+    (0, import_react2.createElement)(RN3.Text, { style: { color: sub, fontWeight: "500" } }, rest)
+  );
   const last = thread?.messages.at(-1);
   const showHelp = helpOn && arts.any !== false;
   let content;
-  if (view === "home")
-    content = (0, import_react2.createElement)(
-      RN3.ScrollView,
-      { key: "home", style: { flex: 1, backgroundColor: canvas }, contentContainerStyle: { paddingBottom: 24 }, keyboardShouldPersistTaps: "handled" },
-      (0, import_react2.createElement)(RN3.View, { style: { backgroundColor: p.accent, paddingHorizontal: 22, paddingTop: 4, paddingBottom: 64 } }, (0, import_react2.createElement)(RN3.Text, { style: { color: ink, fontSize: 28, fontWeight: "700", letterSpacing: -0.4, lineHeight: 34 } }, greeting)),
+  if (view === "home") {
+    const cards = [
+      // "Ask a question": the words go into the chat's field and are sent as the chat opens.
       (0, import_react2.createElement)(
         RN3.View,
-        { style: { marginTop: -48, paddingHorizontal: 16, gap: 12 } },
-        last ? (0, import_react2.createElement)(
-          RN3.Pressable,
-          { key: "recent", onPress: () => setView("messages"), accessibilityRole: "button" },
-          card([
-            k.muted("Recent message", { fontSize: 12, fontWeight: "600", marginBottom: 10 }),
-            (0, import_react2.createElement)(
-              RN3.View,
-              { key: "r", style: { flexDirection: "row", alignItems: "center", gap: 12 } },
-              teamMark(title, p.accent, ink),
-              (0, import_react2.createElement)(RN3.View, { style: { flex: 1, gap: 2 } }, (0, import_react2.createElement)(RN3.Text, { numberOfLines: 1, style: { color: p.fg, fontSize: 15 } }, last.body), k.muted(`${last.from === "visitor" ? "You" : whoLabel[last.from]} \xB7 ${timeAgo(last.at)}`, { fontSize: 12 })),
-              chat.unseen.length ? (0, import_react2.createElement)(RN3.View, { style: { minWidth: 20, height: 20, borderRadius: 10, paddingHorizontal: 6, backgroundColor: p.danger, alignItems: "center", justifyContent: "center" } }, k.text(String(chat.unseen.length), { color: "#fff", fontSize: 12, fontWeight: "700" })) : glyph("next", p.muted, 14)
-            )
-          ])
-        ) : null,
+        { key: "ask", style: { flexDirection: "row", alignItems: "center", gap: 8, height: 48, borderRadius: 24, paddingLeft: 18, paddingRight: 6, backgroundColor: hu.surface, ...surf } },
+        k.field({ value: body, onChange: setBody, placeholder: "Ask a question", max: 4e3, style: { flex: 1, borderWidth: 0, paddingHorizontal: 0, backgroundColor: "transparent" } }),
         (0, import_react2.createElement)(
           RN3.Pressable,
-          { key: "send", onPress: () => setView("messages"), accessibilityRole: "button" },
-          card(
-            [
-              (0, import_react2.createElement)(RN3.View, { key: "t", style: { flex: 1, gap: 2 } }, k.text("Send us a message", { fontWeight: "700", fontSize: 16 }), k.muted(reply)),
-              (0, import_react2.createElement)(RN3.View, { key: "g", style: { width: 36, height: 36, borderRadius: 18, backgroundColor: alpha(p.accent, 0.12), alignItems: "center", justifyContent: "center" } }, glyph("send", p.accent, 18))
-            ],
-            { flexDirection: "row", alignItems: "center", gap: 12 }
+          {
+            onPress: () => {
+              setView("messages");
+              if (body.trim()) void send();
+            },
+            accessibilityRole: "button",
+            accessibilityLabel: "Send",
+            style: { width: 36, height: 36, borderRadius: 18, alignItems: "center", justifyContent: "center", backgroundColor: body.trim() ? p.accent : hu.def }
+          },
+          glyph("up", body.trim() ? ink : hu.muted, 18)
+        )
+      ),
+      last ? (0, import_react2.createElement)(
+        RN3.Pressable,
+        { key: "recent", onPress: () => setView("messages"), accessibilityRole: "button" },
+        card([
+          (0, import_react2.createElement)(
+            RN3.View,
+            { key: "r", style: { flexDirection: "row", alignItems: "center", gap: 10 } },
+            title ? teamMark(title, alpha(p.accent, 0.16), p.accent, 26) : null,
+            (0, import_react2.createElement)(RN3.View, { style: { flex: 1, gap: 1 } }, (0, import_react2.createElement)(RN3.Text, { numberOfLines: 1, style: { color: hu.fg, fontSize: 14, fontWeight: "500" } }, last.body || (last.attachments?.length ? `Sent ${last.attachments.length === 1 ? last.attachments[0].name : `${last.attachments.length} files`}` : "")), k.muted(`${last.from === "visitor" ? "You" : whoLabel[last.from]} \xB7 ${timeAgo(last.at)}`, { fontSize: 11.5 })),
+            chat.unseen.length ? (0, import_react2.createElement)(RN3.View, { style: { width: 8, height: 8, borderRadius: 4, backgroundColor: p.danger } }) : glyph("next", p.muted, 14)
           )
-        ),
-        showHelp ? card([searchRow(() => setView("help")), ...(arts.list ?? []).slice(0, 4).map(row)], { padding: 8, gap: 2 }) : null
-      )
+        ], { paddingVertical: 10, paddingHorizontal: 12 })
+      ) : null,
+      showHelp ? card([searchRow(() => setView("help")), ...(arts.list ?? []).slice(0, 4).map(row)], { padding: 8, gap: 2 }) : null
+    ];
+    content = plain ? (0, import_react2.createElement)(
+      RN3.ScrollView,
+      { key: "home", style: { flex: 1, backgroundColor: canvas }, contentContainerStyle: { paddingHorizontal: 16, paddingTop: 4, paddingBottom: 24, gap: 12 }, keyboardShouldPersistTaps: "handled" },
+      (0, import_react2.createElement)(RN3.View, { key: "top", style: { paddingHorizontal: 6, paddingBottom: 10 } }, hero(p.fg, p.muted)),
+      ...cards
+    ) : (0, import_react2.createElement)(
+      RN3.ScrollView,
+      { key: "home", style: { flex: 1, backgroundColor: canvas }, contentContainerStyle: { paddingBottom: 24 }, keyboardShouldPersistTaps: "handled" },
+      (0, import_react2.createElement)(RN3.View, { style: { backgroundColor: p.accent, paddingHorizontal: 22, paddingTop: 4, paddingBottom: 64 } }, hero(ink, alpha(ink, 0.8))),
+      (0, import_react2.createElement)(RN3.View, { style: { marginTop: -48, paddingHorizontal: 16, gap: 12 } }, ...cards)
     );
-  else if (view === "messages")
+  } else if (view === "messages")
     content = (0, import_react2.createElement)(
       RN3.View,
-      { key: "messages", style: { flex: 1, backgroundColor: p.bg } },
+      { key: "messages", style: { flex: 1, backgroundColor: hu.bg } },
       (0, import_react2.createElement)(
         RN3.ScrollView,
-        { ref: scroll, style: { flex: 1 }, contentContainerStyle: { padding: 16, gap: 12 } },
+        { ref: scroll, style: { flex: 1 }, contentContainerStyle: { paddingHorizontal: 16, paddingTop: 4, paddingBottom: 16, gap: 12 } },
         bubble({ id: "greeting", from: "team", body: greeting, at: "" }),
         !chat.loaded ? k.muted("Loading\u2026") : null,
         ...(thread?.messages ?? []).map((m) => bubble(m)),
@@ -2832,23 +3215,57 @@ var MessengerSheet = ({
       ),
       (0, import_react2.createElement)(
         RN3.View,
-        { style: { paddingHorizontal: 12, paddingTop: 8, paddingBottom: 10, gap: 8 } },
+        { style: { paddingHorizontal: 12, paddingTop: 8, paddingBottom: 6, gap: 8 } },
         chat.error ? k.text(chat.error, { color: p.danger, fontSize: 12 }) : null,
-        needEmail ? k.field({ value: email, onChange: setEmail, placeholder: "Your email (optional), so we can follow up", email: true, max: 200, style: { borderWidth: emailOk ? 0 : 1, borderColor: p.danger, borderRadius: 12, backgroundColor: canvas } }) : null,
+        needEmail ? k.field({ value: email, onChange: setEmail, placeholder: "Your email (optional), so we can follow up", email: true, max: 200, style: { borderWidth: emailOk ? 0 : 1, borderColor: p.danger, borderRadius: r.field, paddingHorizontal: 16, backgroundColor: hu.surface, ...surf } }) : null,
+        // Photos picked for the next message, each with a way to take it out again.
+        photos.length ? (0, import_react2.createElement)(
+          RN3.View,
+          { style: { flexDirection: "row", flexWrap: "wrap", gap: 10, paddingTop: 6, paddingHorizontal: 2 } },
+          ...photos.map(
+            (f) => (0, import_react2.createElement)(
+              RN3.View,
+              { key: f.key, style: { width: 56, height: 56 } },
+              (0, import_react2.createElement)(RN3.Image, { source: { uri: f.uri }, resizeMode: "cover", accessibilityLabel: f.id ? f.name : `${f.name}, uploading`, style: { width: 56, height: 56, borderRadius: Math.max(4, r.card - 4), backgroundColor: p.soft, opacity: f.id ? 1 : 0.5 } }),
+              (0, import_react2.createElement)(
+                RN3.Pressable,
+                {
+                  onPress: () => setPhotos((list) => list.filter((x) => x.key !== f.key)),
+                  accessibilityRole: "button",
+                  accessibilityLabel: `Remove ${f.name}`,
+                  hitSlop: 8,
+                  style: { position: "absolute", top: -7, right: -7, width: 22, height: 22, borderRadius: 11, borderWidth: 2, borderColor: p.bg, backgroundColor: p.fg, alignItems: "center", justifyContent: "center" }
+                },
+                glyph("cross", p.bg, 10)
+              )
+            )
+          )
+        ) : null,
+        // The message field on top, the paperclip (when the app has expo-image-picker) and the send button under it.
         (0, import_react2.createElement)(
           RN3.View,
-          { style: { flexDirection: "row", alignItems: "flex-end", gap: 6, borderWidth: 1, borderColor: p.line, borderRadius: 22, paddingVertical: 5, paddingRight: 5, paddingLeft: 16, backgroundColor: p.bg } },
-          k.field({ value: body, onChange: setBody, placeholder: "Write a message\u2026", multiline: true, max: 4e3, style: { flex: 1, minHeight: 34, maxHeight: 120, borderWidth: 0, paddingHorizontal: 0, paddingVertical: 7, backgroundColor: "transparent" } }),
+          { style: { gap: 2, borderRadius: 20, paddingTop: 10, paddingBottom: 6, paddingRight: 6, paddingLeft: 16, backgroundColor: hu.surface, ...surf } },
+          k.field({ value: body, onChange: setBody, placeholder: "Write a message\u2026", multiline: true, max: 4e3, style: { minHeight: 28, maxHeight: 120, borderWidth: 0, paddingHorizontal: 0, paddingVertical: 4, backgroundColor: "transparent" } }),
           (0, import_react2.createElement)(
-            RN3.Pressable,
-            {
-              onPress: () => void send(),
-              disabled: !body.trim() || !!pending || !emailOk,
-              accessibilityRole: "button",
-              accessibilityLabel: "Send",
-              style: { width: 34, height: 34, borderRadius: 17, alignItems: "center", justifyContent: "center", backgroundColor: !body.trim() || !!pending || !emailOk ? p.line : p.accent }
-            },
-            glyph("up", !body.trim() || !!pending || !emailOk ? p.muted : ink, 18)
+            RN3.View,
+            { style: { flexDirection: "row", alignItems: "center", marginLeft: -8 } },
+            imagePicker?.launchImageLibraryAsync ? (0, import_react2.createElement)(
+              RN3.Pressable,
+              { onPress: () => void pickPhotos(), disabled: !!pending, accessibilityRole: "button", accessibilityLabel: "Attach a photo or screenshot", hitSlop: 6, style: { width: 34, height: 34, borderRadius: 17, alignItems: "center", justifyContent: "center" } },
+              glyph("clip", hu.muted, 19)
+            ) : null,
+            (0, import_react2.createElement)(RN3.View, { style: { flex: 1 } }),
+            (0, import_react2.createElement)(
+              RN3.Pressable,
+              {
+                onPress: () => void send(),
+                disabled: !canSend,
+                accessibilityRole: "button",
+                accessibilityLabel: "Send",
+                style: { width: 34, height: 34, borderRadius: 17, alignItems: "center", justifyContent: "center", backgroundColor: canSend ? p.accent : hu.def }
+              },
+              glyph("up", canSend ? ink : hu.muted, 18)
+            )
           )
         )
       )
@@ -2858,7 +3275,7 @@ var MessengerSheet = ({
     for (const a of arts.list ?? []) groups.set(a.collection, [...groups.get(a.collection) ?? [], a]);
     content = (0, import_react2.createElement)(
       RN3.ScrollView,
-      { key: "help", style: { flex: 1, backgroundColor: canvas }, contentContainerStyle: { padding: 16, gap: 12 }, keyboardShouldPersistTaps: "handled" },
+      { key: "help", style: { flex: 1, backgroundColor: canvas }, contentContainerStyle: { paddingHorizontal: 16, paddingTop: 4, paddingBottom: 16, gap: 12 }, keyboardShouldPersistTaps: "handled" },
       search,
       arts.list === null ? k.muted("Loading\u2026") : null,
       arts.list?.length === 0 ? (0, import_react2.createElement)(RN3.View, { style: { gap: 10, alignItems: "center", paddingVertical: 24 } }, k.muted(query.trim() ? `Nothing found for \u201C${query.trim()}\u201D.` : "No help articles yet."), k.btn("Send us a message", "primary", () => setView("messages"))) : null,
@@ -2867,46 +3284,73 @@ var MessengerSheet = ({
   } else
     content = (0, import_react2.createElement)(
       RN3.ScrollView,
-      { key: `a-${view.article}`, style: { flex: 1 }, contentContainerStyle: { padding: 16, paddingBottom: 32 } },
+      { key: `a-${view.article}`, style: { flex: 1 }, contentContainerStyle: { paddingHorizontal: 16, paddingTop: 4, paddingBottom: 32 } },
       (0, import_react2.createElement)(ArticleView, { client, p, id: view.article, onAsk: () => setView("messages") })
     );
   const current = typeof view === "string" ? view : "help";
-  const tab = (v, name, icon, badge = 0) => (0, import_react2.createElement)(
+  const tab = (v, name, icon, badge = 0) => {
+    const on = current === v;
+    return (0, import_react2.createElement)(
+      RN3.Pressable,
+      {
+        key: v,
+        onPress: () => setView(v),
+        accessibilityRole: "tab",
+        accessibilityState: { selected: on },
+        style: { flex: 1, flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 6, height: 36, borderRadius: 18, ...on ? { backgroundColor: hu.segment, ...segLift } : {} }
+      },
+      glyph(icon, on ? hu.fg : hu.muted, 17),
+      k.text(name, { fontSize: 13.5, fontWeight: "500", color: on ? hu.fg : hu.muted }),
+      badge ? (0, import_react2.createElement)(RN3.View, { style: { position: "absolute", top: 7, right: 12, width: 8, height: 8, borderRadius: 4, backgroundColor: p.danger } }) : null
+    );
+  };
+  const onAccent = view === "home" && !plain;
+  const ground = onAccent ? p.accent : hu.bg;
+  const back = (to, label) => (0, import_react2.createElement)(
     RN3.Pressable,
-    { key: v, onPress: () => setView(v), accessibilityRole: "tab", accessibilityState: { selected: current === v }, style: { flex: 1, alignItems: "center", paddingTop: 8, paddingBottom: 6, gap: 3 } },
-    glyph(icon, current === v ? p.accent : p.muted, 22),
-    k.text(name, { fontSize: 12, fontWeight: "600", color: current === v ? p.accent : p.muted }),
-    badge ? (0, import_react2.createElement)(RN3.View, { style: { position: "absolute", top: 4, right: "28%", minWidth: 18, height: 18, borderRadius: 9, backgroundColor: p.danger, alignItems: "center", justifyContent: "center" } }, k.text(String(Math.min(badge, 9)), { color: "#fff", fontSize: 11, fontWeight: "700" })) : null
+    { key: "back", onPress: () => setView(to), accessibilityRole: "button", accessibilityLabel: label, hitSlop: 10, style: { width: 32, height: 32, alignItems: "center", justifyContent: "center", transform: [{ rotate: "180deg" }] } },
+    glyph("next", hu.fg, 18)
   );
-  const onHome = view === "home";
-  const headFg = onHome ? ink : p.fg;
   const head = (0, import_react2.createElement)(
     RN3.View,
-    { key: "head", style: { flexDirection: "row", alignItems: "center", gap: 10, paddingLeft: 16, paddingRight: 12, paddingTop: 16, paddingBottom: 12, backgroundColor: onHome ? p.accent : p.bg, borderBottomWidth: onHome ? 0 : 1, borderBottomColor: p.line } },
-    typeof view !== "string" ? (0, import_react2.createElement)(RN3.Pressable, { key: "back", onPress: () => setView("help"), accessibilityRole: "button", hitSlop: 10 }, k.text("\u2039 All articles", { color: p.accent, fontWeight: "600" })) : view === "help" ? null : teamMark(title, onHome ? ink : p.accent, onHome ? p.accent : ink, onHome ? 28 : 36),
-    (0, import_react2.createElement)(
+    { key: "head", style: { flexDirection: "row", alignItems: "center", gap: 8, paddingLeft: 12, paddingRight: 12, paddingTop: 12, paddingBottom: 6, backgroundColor: ground } },
+    typeof view !== "string" ? back("help", "All articles") : view === "messages" ? back("home", "Back to home") : view === "home" && (o.logo || title) ? o.logo ? (0, import_react2.createElement)(RN3.Image, { key: "logo", source: { uri: o.logo }, accessibilityIgnoresInvertColors: true, style: { width: 28, height: 28, borderRadius: 8, marginLeft: 4 } }) : teamMark(title, alpha(p.accent, 0.16), p.accent, 28) : null,
+    // In the chat: who answers, in the middle.
+    view === "messages" && title ? (0, import_react2.createElement)(
       RN3.View,
-      { style: { flex: 1, minWidth: 0 } },
-      typeof view !== "string" ? null : (0, import_react2.createElement)(RN3.Text, { accessibilityRole: "header", numberOfLines: 1, style: { color: headFg, fontSize: 17, fontWeight: "700" } }, view === "help" ? "Help" : title),
-      view === "messages" ? k.muted(reply, { fontSize: 12 }) : null
-    ),
-    (0, import_react2.createElement)(RN3.Pressable, { onPress: close, accessibilityRole: "button", accessibilityLabel: "Close", hitSlop: 12, style: { width: 32, height: 32, borderRadius: 10, alignItems: "center", justifyContent: "center" } }, glyph("cross", onHome ? ink : p.muted, 18))
+      { style: { flex: 1, flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 8 } },
+      teamMark(title, alpha(p.accent, 0.16), p.accent, 28),
+      (0, import_react2.createElement)(RN3.Text, { numberOfLines: 1, style: { flexShrink: 1, color: hu.fg, fontSize: 15, fontWeight: "600" } }, title)
+    ) : (0, import_react2.createElement)(RN3.View, { style: { flex: 1 } }),
+    (0, import_react2.createElement)(RN3.Pressable, { onPress: close, accessibilityRole: "button", accessibilityLabel: "Close", hitSlop: 12, style: { width: 32, height: 32, borderRadius: 10, alignItems: "center", justifyContent: "center" } }, glyph("cross", onAccent ? ink : p.muted, 18))
   );
+  const powered = brand ? (0, import_react2.createElement)(
+    RN3.View,
+    { key: "brand", style: { paddingTop: 2, paddingBottom: 6, alignItems: "center", backgroundColor: hu.bg } },
+    (0, import_react2.createElement)(
+      RN3.Text,
+      { onPress: () => void RN3.Linking.openURL(BRAND_URL).catch(() => void 0), accessibilityRole: "link", hitSlop: 8, style: { color: p.muted, fontSize: 11.5 } },
+      "Powered by ",
+      (0, import_react2.createElement)(RN3.Text, { style: { fontWeight: "600" } }, "MRRocket")
+    )
+  ) : null;
   return (0, import_react2.createElement)(
     RN3.Modal,
     { visible: true, animationType: "slide", presentationStyle: "pageSheet", onRequestClose: close },
     (0, import_react2.createElement)(
       RN3.KeyboardAvoidingView,
-      { behavior: RN3.Platform.OS === "ios" ? "padding" : void 0, style: { flex: 1, backgroundColor: p.bg } },
+      { behavior: RN3.Platform.OS === "ios" ? "padding" : void 0, style: { flex: 1, backgroundColor: hu.bg } },
       head,
       content,
-      (0, import_react2.createElement)(
+      view === "messages" ? null : (0, import_react2.createElement)(
         RN3.View,
-        { key: "tabs", accessibilityRole: "tablist", style: { flexDirection: "row", borderTopWidth: 1, borderTopColor: p.line, paddingHorizontal: 8, paddingBottom: 22, backgroundColor: p.bg } },
+        { key: "tabs", accessibilityRole: "tablist", style: { flexDirection: "row", marginHorizontal: 12, marginTop: 6, marginBottom: 6, padding: 4, borderRadius: 22, backgroundColor: hu.surface } },
         tab("home", "Home", "home"),
-        tab("messages", "Messages", "chat", view === "messages" ? 0 : chat.unseen.length),
+        tab("messages", "Messages", "chat", chat.unseen.length),
         showHelp ? tab("help", "Help", "help") : null
-      )
+      ),
+      powered,
+      (0, import_react2.createElement)(RN3.View, { style: { height: 16 } })
     )
   );
 };
@@ -2931,6 +3375,9 @@ var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
     preview: look.preview,
     askEmail: look.askEmail,
     haptics: look.sound,
+    corners: look.corners,
+    header: look.header,
+    logo: look.logo,
     ...defined
   } : given;
   const p = usePalette({ theme: appearance?.theme ?? look?.theme, accent: appearance?.accent ?? look?.accent });
@@ -2959,37 +3406,42 @@ var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
   const unseen = chat.unseen.length;
   const ink = inkOn(p.accent);
   const label = options.label?.trim() ?? "";
-  const side = options.position === "bottom-left" ? { left: 20 } : { right: 20 };
+  const r = CORNERS[options.corners ?? "round"];
+  const [edge, side] = (options.position ?? "bottom-right").split("-");
+  const place = {
+    ...edge === "top" ? { top: 60 } : edge === "bottom" ? { bottom: 34 } : { top: 0, bottom: 0, justifyContent: "center" },
+    ...side === "left" ? { left: 20 } : side === "right" ? { right: 20 } : { left: 0, right: 0, alignItems: "center" }
+  };
   const launcher = options.launcher ? (0, import_react2.createElement)(
-    RN3.Pressable,
-    {
-      key: "launcher",
-      onPress: () => openAt(unseen ? "messages" : "home"),
-      accessibilityRole: "button",
-      accessibilityLabel: unseen ? `Open chat, ${unseen} new` : "Open chat",
-      style: {
-        position: "absolute",
-        ...side,
-        bottom: 34,
-        height: label ? 50 : 56,
-        minWidth: label ? 0 : 56,
-        paddingHorizontal: label ? 18 : 0,
-        borderRadius: 28,
-        flexDirection: "row",
-        gap: 8,
-        backgroundColor: p.accent,
-        alignItems: "center",
-        justifyContent: "center",
-        shadowColor: p.accent,
-        shadowOpacity: 0.4,
-        shadowRadius: 12,
-        shadowOffset: { width: 0, height: 6 },
-        elevation: 6
-      }
-    },
-    glyph("chat", ink, label ? 20 : 26),
-    label ? k.text(label, { color: ink, fontWeight: "700" }) : null,
-    unseen ? (0, import_react2.createElement)(RN3.View, { style: { position: "absolute", top: -2, right: -2, minWidth: 20, height: 20, borderRadius: 10, backgroundColor: p.danger, alignItems: "center", justifyContent: "center", borderWidth: 2, borderColor: p.bg } }, k.text(String(Math.min(unseen, 9)), { color: "#fff", fontSize: 11, fontWeight: "700" })) : null
+    RN3.View,
+    { key: "launcher", pointerEvents: "box-none", style: { position: "absolute", ...place } },
+    (0, import_react2.createElement)(
+      RN3.Pressable,
+      {
+        onPress: () => openAt(unseen ? "messages" : "home"),
+        accessibilityRole: "button",
+        accessibilityLabel: unseen ? `Open chat, ${unseen} new` : "Open chat",
+        style: {
+          height: label ? 50 : 56,
+          minWidth: label ? 0 : 56,
+          paddingHorizontal: label ? 18 : 0,
+          borderRadius: 28,
+          flexDirection: "row",
+          gap: 8,
+          backgroundColor: p.accent,
+          alignItems: "center",
+          justifyContent: "center",
+          shadowColor: p.accent,
+          shadowOpacity: 0.4,
+          shadowRadius: 12,
+          shadowOffset: { width: 0, height: 6 },
+          elevation: 6
+        }
+      },
+      glyph("chat", ink, label ? 20 : 26),
+      label ? k.text(label, { color: ink, fontWeight: "700" }) : null,
+      unseen ? (0, import_react2.createElement)(RN3.View, { style: { position: "absolute", top: -2, right: -2, minWidth: 20, height: 20, borderRadius: 10, backgroundColor: p.danger, alignItems: "center", justifyContent: "center", borderWidth: 2, borderColor: p.bg } }, k.text(String(Math.min(unseen, 9)), { color: "#fff", fontSize: 11, fontWeight: "700" })) : null
+    )
   ) : null;
   const toast = banner ? (0, import_react2.createElement)(
     RN3.Pressable,
@@ -2998,15 +3450,25 @@ var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
       onPress: () => openAt("messages"),
       accessibilityRole: "button",
       accessibilityLiveRegion: "polite",
-      style: { position: "absolute", top: 54, left: 16, right: 16, flexDirection: "row", alignItems: "flex-start", gap: 12, backgroundColor: p.bg, borderRadius: 18, padding: 14, borderWidth: 1, borderColor: p.line, shadowColor: "#000", shadowOpacity: 0.16, shadowRadius: 18, shadowOffset: { width: 0, height: 8 }, elevation: 8 }
+      style: {
+        position: "absolute",
+        top: 54,
+        left: 16,
+        right: 16,
+        gap: 3,
+        backgroundColor: p.bg === DARK.bg ? p.soft : p.bg,
+        borderRadius: r.card + 2,
+        paddingHorizontal: 16,
+        paddingVertical: 13,
+        shadowColor: "#101218",
+        shadowOpacity: 0.14,
+        shadowRadius: 18,
+        shadowOffset: { width: 0, height: 8 },
+        elevation: 6
+      }
     },
-    teamMark(options.title ?? "Chat with us", p.accent, ink),
-    (0, import_react2.createElement)(
-      RN3.View,
-      { style: { flex: 1, gap: 2 } },
-      k.muted(`${whoLabel[banner.from]}${unseen > 1 ? ` \xB7 ${unseen} new` : ""}`, { fontWeight: "600", fontSize: 12 }),
-      (0, import_react2.createElement)(RN3.Text, { numberOfLines: 3, style: { color: p.fg, fontSize: 15 } }, banner.body)
-    )
+    k.muted(`${whoLabel[banner.from]}${unseen > 1 ? ` \xB7 ${unseen} new` : ""}`, { fontWeight: "600", fontSize: 12 }),
+    (0, import_react2.createElement)(RN3.Text, { numberOfLines: 3, style: { color: p.fg, fontSize: 15, lineHeight: 20 } }, banner.body)
   ) : null;
   if (!launcher && !toast && !open) return null;
   return (0, import_react2.createElement)(
@@ -3014,7 +3476,7 @@ var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
     { pointerEvents: "box-none", style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 } },
     launcher,
     toast,
-    open ? (0, import_react2.createElement)(MessengerSheet, { client, p, o: options, chat, view, setView }) : null
+    open ? (0, import_react2.createElement)(MessengerSheet, { client, p, o: options, chat, view, setView, brand: look?.branding !== false }) : null
   );
 };
 
@@ -3067,7 +3529,7 @@ var MRRocketProvider = ({ client: given, children, consent, flows = true, appear
     Ctx.Provider,
     { value: client },
     heatmaps ? (0, import_react3.createElement)(RN4.View, { style: { flex: 1 }, onTouchStartCapture: (e) => touch(e, false), onTouchEndCapture: (e) => touch(e, true) }, children) : children,
-    flows ? (0, import_react3.createElement)(MRRocketFlows, { flows: client.flows, appearance }) : null,
+    flows ? (0, import_react3.createElement)(MRRocketFlows, { flows: client.flows, paywall: client.paywall, appearance }) : null,
     surveys ? (0, import_react3.createElement)(MRRocketSurveys, { client, appearance }) : null,
     feedback ? (0, import_react3.createElement)(MRRocketFeedback, { client, appearance, options: feedback }) : null,
     messenger ? (0, import_react3.createElement)(MRRocketMessenger, { client, appearance, options: messenger }) : null
@@ -3104,6 +3566,10 @@ var usePush = () => {
   const client = useClient();
   return { register: client.registerForPush, unregister: client.unregisterForPush };
 };
+var usePaywall = () => {
+  const client = useClient();
+  return { open: client.openPaywall };
+};
 var useOnboarding = () => {
   const client = useClient();
   return { start: client.startOnboarding };