@mrrocket/sdk 0.9.0 → 0.11.0

package/dist/react-native/index.js

@@ -49,7 +49,7 @@ module.exports = __toCommonJS(native_exports);
 var import_react3 = require("react");
 
 // src/core.ts
-var SDK_VERSION = "0.9.0";
+var SDK_VERSION = "0.11.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,6 +172,16 @@ 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 inkOn = (hex) => {
+  const m = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex);
+  if (!m) return "#ffffff";
+  const [r, g, b] = [m[1], m[2], m[3]].map((x) => {
+    const c = parseInt(x, 16) / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.45 ? "#111214" : "#ffffff";
+};
 var ApiError = class extends Error {
   constructor(message, status) {
     super(message);
@@ -319,6 +329,19 @@ var safeUrl = (url) => {
   const u = (url ?? "").trim();
   return /^https?:\/\//i.test(u) || /^\/(?!\/)/.test(u) ? u : void 0;
 };
+var nodesOf = (f) => f.nodes ?? f.steps;
+var waitMs = (w) => Math.max(0, w.amount) * (w.unit === "hours" ? 36e5 : 864e5);
+var pageMatches = (pattern, path) => {
+  const p = pattern.trim();
+  const at = (path.split(/[?#]/)[0] || "/").replace(/\/+$/, "") || "/";
+  if (!p) return false;
+  if (p.endsWith("*")) {
+    const base = p.slice(0, -1).replace(/\/+$/, "");
+    return !base || at === base || at.startsWith(`${base}/`);
+  }
+  return at === (p.replace(/\/+$/, "") || "/");
+};
+var stepsIn = (nodes) => nodes.flatMap((n) => n.kind === "condition" ? [...stepsIn(n.yes), ...stepsIn(n.no)] : n.kind === "wait" ? [] : [n]);
 var createFlows = (env) => {
   let config = null;
   let cancel = null;
@@ -333,25 +356,99 @@ var createFlows = (env) => {
   const shown = /* @__PURE__ */ new Set();
   const listeners = /* @__PURE__ */ new Set();
   const auto = env.auto !== false;
+  const seenEvents = /* @__PURE__ */ new Set();
+  const now = () => env.now?.() ?? Date.now();
+  let timer = null;
   const flows = () => config?.onboarding ?? [];
   const flowById = (id) => id ? flows().find((f) => f.id === id) : void 0;
   const prog = (id) => {
     let p = progress.get(id);
-    if (!p) progress.set(id, p = { done: /* @__PURE__ */ new Set(), dismissed: false });
+    if (!p) progress.set(id, p = { done: /* @__PURE__ */ new Set(), dismissed: false, answers: /* @__PURE__ */ new Map(), at: /* @__PURE__ */ new Map(), reached: /* @__PURE__ */ new Map() });
     return p;
   };
+  let dirty = false;
+  const record = (props) => {
+    env.track(ONBOARDING_EVENT, props);
+    dirty = true;
+  };
+  const markDone = (p, id) => {
+    p.done.add(id);
+    p.at.set(id, now());
+  };
+  const decide = (c) => {
+    if (c.page?.trim()) {
+      const path = env.path?.();
+      return path === void 0 ? false : pageMatches(c.page, path);
+    }
+    if (c.event?.trim()) {
+      if (!known) return void 0;
+      for (const e of seenEvents) if (matchesTrigger(c.event, e)) return true;
+      return false;
+    }
+    return false;
+  };
+  const walkLine = (flow, line, p, live, before = 0, last) => {
+    for (let i = 0; i < line.length; i++) {
+      const n = line[i];
+      if (n.kind === "wait") {
+        if (p.done.has(n.id)) {
+          last = p.at.get(n.id) ?? last;
+          continue;
+        }
+        let since = p.reached.get(n.id);
+        if (since === void 0) {
+          if (!live) return { at: "pending" };
+          since = last ?? now();
+          p.reached.set(n.id, since);
+          record({ flow: flow.id, step: n.id, kind: "wait", action: "shown" });
+        }
+        const until = since + waitMs(n);
+        if (now() < until) return { at: "wait", until };
+        if (!live) return { at: "pending" };
+        markDone(p, n.id);
+        record({ flow: flow.id, step: n.id, kind: "wait", action: "completed" });
+        last = until;
+        continue;
+      }
+      if (n.kind === "condition") {
+        let answer = p.answers.get(n.id);
+        if (answer === void 0) {
+          if (!live) return { at: "pending" };
+          answer = decide(n);
+          if (answer === void 0) return { at: "pending" };
+          p.answers.set(n.id, answer);
+          record({ flow: flow.id, step: n.id, kind: "condition", action: "answered", answer: answer ? "yes" : "no" });
+        }
+        return walkLine(flow, answer ? n.yes : n.no, p, live, before, last);
+      }
+      if (!p.done.has(n.id)) return { at: "step", step: n, line, index: i, before };
+      last = p.at.get(n.id) ?? last;
+      before++;
+    }
+    return { at: "end" };
+  };
   const finished = (f) => {
     const p = progress.get(f.id);
-    return !!p && (p.dismissed || f.steps.every((s) => p.done.has(s.id)));
+    return !!p && (p.dismissed || walkLine(f, nodesOf(f), p, false).at === "end");
   };
   const keyOf = (pid) => `${PROGRESS_KEY}:${pid ?? "visitor"}`;
+  const eventsKeyOf = (pid) => `${PROGRESS_KEY}:events:${pid ?? "visitor"}`;
   const save = () => {
+    dirty = false;
     const store = env.storage?.();
     if (!store) return;
     const out = {};
-    for (const [id, p] of progress) out[id] = { done: [...p.done], ...p.dismissed ? { dismissed: true } : {} };
+    for (const [id, p] of progress)
+      out[id] = {
+        done: [...p.done],
+        ...p.dismissed ? { dismissed: true } : {},
+        ...p.answers.size ? { answers: Object.fromEntries([...p.answers].map(([k, v]) => [k, v ? "yes" : "no"])) } : {},
+        ...p.at.size ? { at: Object.fromEntries(p.at) } : {},
+        ...p.reached.size ? { reached: Object.fromEntries(p.reached) } : {}
+      };
     try {
       store.set(keyOf(env.personId()), JSON.stringify(out));
+      if (seenEvents.size) store.set(eventsKeyOf(env.personId()), JSON.stringify([...seenEvents].slice(-200)));
     } catch {
     }
   };
@@ -360,23 +457,55 @@ var createFlows = (env) => {
       const p = prog(id);
       for (const d of s.done ?? []) p.done.add(d);
       if (s.dismissed) p.dismissed = true;
+      for (const [k, v] of Object.entries(s.answers ?? {})) if (!p.answers.has(k)) p.answers.set(k, v === "yes");
+      for (const [k, v] of Object.entries(s.at ?? {})) if (typeof v === "number" && !p.at.has(k)) p.at.set(k, v);
+      for (const [k, v] of Object.entries(s.reached ?? {})) if (typeof v === "number" && (!p.reached.has(k) || v < p.reached.get(k))) p.reached.set(k, v);
+    }
+  };
+  const wakeAt = (until) => {
+    if (timer) clearTimeout(timer);
+    timer = null;
+    const ms = until - now();
+    if (ms > 0 && ms <= 864e5) {
+      timer = setTimeout(() => (timer = null, emit()), ms + 50);
+      timer.unref?.();
     }
   };
+  let holding = false;
   const onboardingView = () => {
+    holding = false;
     const flow = flowById(active);
     if (!flow) return null;
     const p = prog(flow.id);
-    const at = flow.steps.findIndex((s) => !p.done.has(s.id));
-    if (at < 0 || p.dismissed) return null;
-    const step = flow.steps[at];
+    if (p.dismissed) return null;
+    const w = walkLine(flow, nodesOf(flow), p, true);
+    if (dirty) save();
+    if (w.at === "wait") wakeAt(w.until);
+    holding = w.at === "wait" || w.at === "pending";
+    if (w.at !== "step") return null;
+    const { step, line, index } = w;
+    const isStep = (n) => !!n && n.kind !== "wait" && n.kind !== "condition";
     if (step.kind === "checklist") {
-      let from = at;
-      while (from > 0 && flow.steps[from - 1].kind === "checklist") from--;
-      let to = at;
-      while (to + 1 < flow.steps.length && flow.steps[to + 1].kind === "checklist") to++;
-      return { type: "checklist", flow, items: flow.steps.slice(from, to + 1).map((s) => ({ step: s, done: p.done.has(s.id) })) };
+      let from = index;
+      while (from > 0 && isStep(line[from - 1]) && line[from - 1].kind === "checklist") from--;
+      let to = index;
+      while (to + 1 < line.length && isStep(line[to + 1]) && line[to + 1].kind === "checklist") to++;
+      const items = line.slice(from, to + 1).filter(isStep);
+      for (const i of items)
+        if (!p.done.has(i.id) && !shown.has(`s:${i.id}`)) {
+          shown.add(`s:${i.id}`);
+          env.track(ONBOARDING_EVENT, { flow: flow.id, step: i.id, kind: "checklist", action: "shown" });
+        }
+      return { type: "checklist", flow, items: items.map((s) => ({ step: s, done: p.done.has(s.id) })) };
+    }
+    if (!shown.has(`s:${step.id}`)) {
+      shown.add(`s:${step.id}`);
+      env.track(ONBOARDING_EVENT, { flow: flow.id, step: step.id, kind: step.kind, action: "shown" });
     }
-    return { type: "step", flow, step, index: at, total: flow.steps.length, last: at === flow.steps.length - 1 };
+    const rest = line.slice(index + 1);
+    const fork = rest.findIndex((n) => n.kind === "condition");
+    const ahead = (fork < 0 ? rest : rest.slice(0, fork)).filter(isStep).length;
+    return { type: "step", flow, step, index: w.before, total: w.before + 1 + ahead, last: !ahead && fork < 0 };
   };
   const view = () => {
     if (cancel) {
@@ -396,22 +525,13 @@ var createFlows = (env) => {
     }
     const ob = onboardingView();
     if (ob) return ob;
-    if (active) active = null;
+    if (active && !holding) active = null;
     const m = messages.find((x) => !handled.has(x.id));
     return m ? { type: "message", message: m } : null;
   };
   const emit = () => {
     const v = view();
-    if (v?.type === "step" && !shown.has(`s:${v.step.id}`)) {
-      shown.add(`s:${v.step.id}`);
-      env.track(ONBOARDING_EVENT, { flow: v.flow.id, step: v.step.id, kind: v.step.kind, action: "shown" });
-    } else if (v?.type === "checklist") {
-      for (const i of v.items)
-        if (!i.done && !shown.has(`s:${i.step.id}`)) {
-          shown.add(`s:${i.step.id}`);
-          env.track(ONBOARDING_EVENT, { flow: v.flow.id, step: i.step.id, kind: "checklist", action: "shown" });
-        }
-    } else if (v?.type === "message" && !shown.has(`m:${v.message.id}`)) {
+    if (v?.type === "message" && !shown.has(`m:${v.message.id}`)) {
       shown.add(`m:${v.message.id}`);
       env.track(INAPP_EVENT, { message: v.message.id, journey: v.message.journey, action: "shown" });
     }
@@ -433,13 +553,14 @@ var createFlows = (env) => {
   const autoStart = () => {
     if (!auto || active || !known) return;
     if (!env.personId() && !env.storage?.()) return;
-    const next = flows().find((f) => startsOnLoad(f.trigger) && f.steps.length && !finished(f));
+    const next = flows().find((f) => startsOnLoad(f.trigger) && nodesOf(f).length && !finished(f));
     if (next) start(next);
   };
   const refresh = () => {
     const pid = env.personId();
     if (progressFor !== null && progressFor !== pid) {
       progress.clear();
+      seenEvents.clear();
       handled.clear();
       active = null;
       loadedFor = void 0;
@@ -451,6 +572,10 @@ var createFlows = (env) => {
         try {
           const raw = await store.get(keyOf(pid));
           if (raw) merge(JSON.parse(raw));
+          const seen = await store.get(eventsKeyOf(pid));
+          if (seen) {
+            for (const e of JSON.parse(seen)) if (typeof e === "string") seenEvents.add(e);
+          }
         } catch {
         }
       }
@@ -460,6 +585,7 @@ var createFlows = (env) => {
         const state = await env.fetchInApp(pid).catch(() => null);
         if (state && env.personId() === pid) {
           merge(state.onboarding);
+          for (const e of state.events ?? []) if (typeof e === "string") seenEvents.add(eventSlug(e));
           messages = (state.messages ?? []).filter((m) => m && m.id && m.title);
         }
       }
@@ -536,29 +662,32 @@ var createFlows = (env) => {
     refresh,
     onEvent: (name) => {
       if (!name || name.startsWith("$")) return;
+      const slug = eventSlug(name);
+      const fresh = !!slug && !seenEvents.has(slug);
+      if (fresh) seenEvents.add(slug);
       const flow = flowById(active);
       let ticked = false;
       if (flow) {
         const p = prog(flow.id);
-        for (const s of flow.steps)
+        for (const s of stepsIn(nodesOf(flow)))
           if (s.kind === "checklist" && s.event && !p.done.has(s.id) && matchesTrigger(s.event, name)) {
-            p.done.add(s.id);
+            markDone(p, s.id);
             ticked = true;
             env.track(ONBOARDING_EVENT, { flow: flow.id, step: s.id, kind: s.kind, action: "completed" });
           }
       }
-      if (ticked) {
+      if (ticked || fresh && flow) {
         save();
         emit();
-      }
+      } else if (fresh) save();
       if (!auto || !env.personId() && !env.storage?.()) return;
-      const next = flows().find((f) => f.steps.length && matchesTrigger(f.trigger, name) && !finished(f));
+      const next = flows().find((f) => nodesOf(f).length && matchesTrigger(f.trigger, name) && !finished(f));
       if (next) start(next);
     },
     openCancelFlow,
     startOnboarding: (id) => {
-      const f = id ? flowById(id) : flows().find((x) => x.steps.length && !finished(x));
-      if (!f || !f.steps.length) return false;
+      const f = id ? flowById(id) : flows().find((x) => nodesOf(x).length && !finished(x));
+      if (!f || !nodesOf(f).length) return false;
       const p = prog(f.id);
       p.dismissed = false;
       return start(f);
@@ -629,7 +758,7 @@ var createFlows = (env) => {
       next: () => {
         const v = onboardingView();
         if (v?.type !== "step") return;
-        prog(v.flow.id).done.add(v.step.id);
+        markDone(prog(v.flow.id), v.step.id);
         env.track(ONBOARDING_EVENT, { flow: v.flow.id, step: v.step.id, kind: v.step.kind, action: "completed" });
         save();
         emit();
@@ -639,7 +768,7 @@ var createFlows = (env) => {
         if (v?.type !== "checklist") return;
         const item = v.items.find((i) => i.step.id === stepId);
         if (!item || item.done) return;
-        prog(v.flow.id).done.add(stepId);
+        markDone(prog(v.flow.id), stepId);
         env.track(ONBOARDING_EVENT, { flow: v.flow.id, step: stepId, kind: "checklist", action: "completed" });
         save();
         emit();
@@ -2369,6 +2498,35 @@ var buzz = () => {
   }
 };
 var teamOf = (t) => (t?.messages ?? []).filter((m) => m.from !== "visitor");
+var svg = null;
+try {
+  svg = require("react-native-svg");
+} catch {
+  svg = null;
+}
+var GLYPH = {
+  chat: "M2.5 4.5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v4.5a2 2 0 0 1-2 2H7l-3 2.5V11a2 2 0 0 1-1.5-2z",
+  home: "M2.5 7 8 2.5 13.5 7v6a1 1 0 0 1-1 1h-3v-4h-3v4h-3a1 1 0 0 1-1-1z",
+  help: "M8 14.5A6.5 6.5 0 1 0 8 1.5a6.5 6.5 0 0 0 0 13zM6.2 6.2a1.9 1.9 0 1 1 2.6 1.8c-.5.2-.8.6-.8 1.1v.4M8 11.6v.1",
+  send: "M2.5 8h10M8.5 3.5 13 8l-4.5 4.5",
+  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"
+};
+var FALLBACK = { chat: "\u{1F4AC}", home: "\u2302", help: "?", send: "\u2192", up: "\u2191", next: "\u203A", search: "\u2315", cross: "\xD7" };
+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]);
+  return (0, import_react2.createElement)(Svg, { width: size, height: size, viewBox: "0 0 16 16", fill: "none" }, (0, import_react2.createElement)(svg.Path, { d: GLYPH[name], stroke: color, strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }));
+};
+var alpha = (hex, a) => /^#[0-9a-f]{6}$/i.test(hex) ? `${hex}${Math.round(a * 255).toString(16).padStart(2, "0")}` : hex;
+var teamMark = (title, bg, fg, size = 36) => (0, import_react2.createElement)(
+  RN3.View,
+  { 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 useChat = (client, o, open, view) => {
   const [thread, setThread] = (0, import_react2.useState)(null);
   const [loaded, setLoaded] = (0, import_react2.useState)(false);
@@ -2570,55 +2728,102 @@ var MessengerSheet = ({
       setPending(null);
     }
   };
+  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 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)(RN3.View, { style: { backgroundColor: mine ? p.accent : p.soft, borderRadius: 14, paddingHorizontal: 12, paddingVertical: 8, opacity: isPending ? 0.7 : 1 } }, k.text(m.body, { color: mine ? "#ffffff" : p.fg })),
+      (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,
+            paddingHorizontal: 14,
+            paddingVertical: 9,
+            opacity: isPending ? 0.7 : 1
+          }
+        },
+        k.text(m.body, { color: mine ? ink : p.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: 10, paddingHorizontal: 10, paddingVertical: 6 } },
+          { key: a.id, onPress: () => setView({ article: a.id }), accessibilityRole: "link", style: { borderWidth: 1, borderColor: p.line, borderRadius: 12, paddingHorizontal: 10, paddingVertical: 7 } },
           k.text(`\u{1F4C4} ${a.title}`, { fontSize: 13 })
         )
       ),
-      m.at ? k.muted(`${mine ? "" : `${whoLabel[m.from]} \xB7 `}${isPending ? "Sending\u2026" : timeAgo(m.at)}`, { fontSize: 11, textAlign: mine ? "right" : "left" }) : null
+      m.at ? k.muted(`${mine ? "" : `${whoLabel[m.from]} \xB7 `}${isPending ? "Sending\u2026" : timeAgo(m.at)}`, { fontSize: 11, textAlign: mine ? "right" : "left", paddingHorizontal: 6 }) : null
     );
   };
   const row = (a) => (0, import_react2.createElement)(
     RN3.Pressable,
-    { key: a.id, onPress: () => setView({ article: a.id }), accessibilityRole: "button", style: { flexDirection: "row", alignItems: "center", paddingVertical: 11, paddingHorizontal: 4 } },
+    { key: a.id, onPress: () => setView({ article: a.id }), accessibilityRole: "button", style: { flexDirection: "row", alignItems: "center", gap: 8, paddingVertical: 11, paddingHorizontal: 8 } },
     k.text(a.title, { flex: 1 }),
-    k.muted("\u203A", { fontSize: 18 })
+    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 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 } },
+    k.muted("Search for help", { flex: 1, fontSize: 15 }),
+    glyph("search", p.accent, 16)
   );
-  const card = (children, style = {}) => (0, import_react2.createElement)(RN3.View, { style: { backgroundColor: p.bg, borderRadius: 12, padding: 12, borderWidth: 1, borderColor: p.line, ...style } }, ...children);
-  const search = k.field({ value: query, onChange: setQuery, placeholder: "Search for help", max: 200 });
+  const search = k.field({ value: query, onChange: setQuery, placeholder: "Search for help", max: 200, style: { borderWidth: 0, borderRadius: 12, backgroundColor: raised, ...dark ? {} : lift } });
   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: p.soft }, contentContainerStyle: { padding: 16, gap: 12 }, keyboardShouldPersistTaps: "handled" },
-      (0, import_react2.createElement)(RN3.Text, { style: { color: p.fg, fontSize: 22, fontWeight: "700", paddingVertical: 6 } }, greeting),
+      { 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)),
       (0, import_react2.createElement)(
-        RN3.Pressable,
-        { onPress: () => setView("messages"), accessibilityRole: "button" },
-        card([
-          k.text(last ? "Recent message" : "Send us a message", { fontWeight: "700" }),
-          k.muted(last ? `${last.from === "visitor" ? "You" : whoLabel[last.from]}: ${last.body}` : "We usually answer within a few hours", { marginTop: 2 })
-        ])
-      ),
-      showHelp ? card([(0, import_react2.createElement)(RN3.Pressable, { key: "s", onPress: () => setView("help") }, (0, import_react2.createElement)(RN3.View, { pointerEvents: "none" }, k.muted("\u{1F50D}  Search for help", { paddingVertical: 8 }))), ...(arts.list ?? []).slice(0, 4).map(row)]) : null
+        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,
+        (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 }
+          )
+        ),
+        showHelp ? card([searchRow(() => setView("help")), ...(arts.list ?? []).slice(0, 4).map(row)], { padding: 8, gap: 2 }) : null
+      )
     );
   else if (view === "messages")
     content = (0, import_react2.createElement)(
       RN3.View,
-      { key: "messages", style: { flex: 1 } },
+      { key: "messages", style: { flex: 1, backgroundColor: p.bg } },
       (0, import_react2.createElement)(
         RN3.ScrollView,
-        { ref: scroll, style: { flex: 1 }, contentContainerStyle: { padding: 16, gap: 10 } },
+        { ref: scroll, style: { flex: 1 }, contentContainerStyle: { padding: 16, gap: 12 } },
         bubble({ id: "greeting", from: "team", body: greeting, at: "" }),
         !chat.loaded ? k.muted("Loading\u2026") : null,
         ...(thread?.messages ?? []).map((m) => bubble(m)),
@@ -2627,14 +2832,24 @@ var MessengerSheet = ({
       ),
       (0, import_react2.createElement)(
         RN3.View,
-        { style: { padding: 12, gap: 8, borderTopWidth: 1, borderTopColor: p.line } },
+        { style: { paddingHorizontal: 12, paddingTop: 8, paddingBottom: 10, 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: emailOk ? {} : { borderColor: p.danger } }) : 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,
         (0, import_react2.createElement)(
           RN3.View,
-          { style: { flexDirection: "row", gap: 8, alignItems: "flex-end" } },
-          k.field({ value: body, onChange: setBody, placeholder: "Write a message\u2026", multiline: true, max: 4e3, style: { flex: 1, minHeight: 44, maxHeight: 120 } }),
-          k.btn("Send", "primary", () => void send(), !body.trim() || !!pending || !emailOk)
+          { 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" } }),
+          (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)
+          )
         )
       )
     );
@@ -2643,11 +2858,11 @@ 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: p.soft }, contentContainerStyle: { padding: 16, gap: 12 }, keyboardShouldPersistTaps: "handled" },
+      { key: "help", style: { flex: 1, backgroundColor: canvas }, contentContainerStyle: { padding: 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,
-      ...query.trim() ? arts.list?.length ? [card((arts.list ?? []).map(row))] : [] : [...groups].map(([name, items]) => (0, import_react2.createElement)(RN3.View, { key: name, style: { gap: 6 } }, k.muted(`${name} \xB7 ${items.length}`), card(items.map(row))))
+      ...query.trim() ? arts.list?.length ? [card((arts.list ?? []).map(row), { padding: 8 })] : [] : [...groups].map(([name, items]) => (0, import_react2.createElement)(RN3.View, { key: name, style: { gap: 6 } }, k.muted(`${name} \xB7 ${items.length}`, { fontSize: 12, fontWeight: "600", paddingHorizontal: 2 }), card(items.map(row), { padding: 8 })))
     );
   } else
     content = (0, import_react2.createElement)(
@@ -2656,25 +2871,44 @@ var MessengerSheet = ({
       (0, import_react2.createElement)(ArticleView, { client, p, id: view.article, onAsk: () => setView("messages") })
     );
   const current = typeof view === "string" ? view : "help";
-  const tab = (v, name, glyph, badge = 0) => (0, import_react2.createElement)(
+  const tab = (v, name, icon, badge = 0) => (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: 2 } },
-    k.text(glyph, { fontSize: 18, color: current === v ? p.fg : p.muted }),
-    k.text(name, { fontSize: 12, fontWeight: "600", color: current === v ? p.fg : p.muted }),
-    badge ? (0, import_react2.createElement)(RN3.View, { style: { position: "absolute", top: 4, right: "30%", 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: 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
   );
-  const titleOf = typeof view !== "string" || view === "help" ? "Help" : view === "messages" ? o.title ?? "Chat with us" : o.title ?? "Chat with us";
-  return k.page(titleOf, close, [
-    typeof view !== "string" ? (0, import_react2.createElement)(RN3.Pressable, { key: "back", onPress: () => setView("help"), accessibilityRole: "button", style: { paddingHorizontal: 16, paddingVertical: 8 } }, k.text("\u2039 All articles", { color: p.accent, fontWeight: "600" })) : null,
-    content,
+  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)(
       RN3.View,
-      { key: "tabs", accessibilityRole: "tablist", style: { flexDirection: "row", borderTopWidth: 1, borderTopColor: p.line, paddingBottom: 20, backgroundColor: p.bg } },
-      tab("home", "Home", "\u2302"),
-      tab("messages", "Messages", "\u2709\uFE0E", view === "messages" ? 0 : chat.unseen.length),
-      showHelp ? tab("help", "Help", "?") : null
+      { 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))
+  );
+  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 } },
+      head,
+      content,
+      (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 } },
+        tab("home", "Home", "home"),
+        tab("messages", "Messages", "chat", view === "messages" ? 0 : chat.unseen.length),
+        showHelp ? tab("help", "Help", "help") : null
+      )
     )
-  ]);
+  );
 };
 var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
   const [look, setLook] = (0, import_react2.useState)(null);
@@ -2686,7 +2920,19 @@ var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
     return () => ctrl.abort();
   }, [client]);
   const defined = Object.fromEntries(Object.entries(given).filter(([, v]) => v !== void 0));
-  const options = look ? { title: look.title, greeting: look.greeting, help: look.help, preview: look.preview, askEmail: look.askEmail, ...defined } : given;
+  const options = look ? {
+    title: look.title,
+    greeting: look.greeting,
+    replyTime: look.replyTime,
+    launcher: look.appLauncher ?? false,
+    position: look.position,
+    label: look.label,
+    help: look.help,
+    preview: look.preview,
+    askEmail: look.askEmail,
+    haptics: look.sound,
+    ...defined
+  } : given;
   const p = usePalette({ theme: appearance?.theme ?? look?.theme, accent: appearance?.accent ?? look?.accent });
   const k = kit(p);
   const open = messengerOpen.useOpen();
@@ -2711,6 +2957,9 @@ var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
     if (open) setBanner(null);
   }, [open]);
   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 launcher = options.launcher ? (0, import_react2.createElement)(
     RN3.Pressable,
     {
@@ -2718,9 +2967,28 @@ var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
       onPress: () => openAt(unseen ? "messages" : "home"),
       accessibilityRole: "button",
       accessibilityLabel: unseen ? `Open chat, ${unseen} new` : "Open chat",
-      style: { position: "absolute", right: 20, bottom: 34, width: 54, height: 54, borderRadius: 27, backgroundColor: p.accent, alignItems: "center", justifyContent: "center", shadowColor: "#000", shadowOpacity: 0.2, shadowRadius: 10, elevation: 6 }
+      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
+      }
     },
-    k.text("\u{1F4AC}", { fontSize: 22 }),
+    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)(
@@ -2730,10 +2998,15 @@ var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
       onPress: () => openAt("messages"),
       accessibilityRole: "button",
       accessibilityLiveRegion: "polite",
-      style: { position: "absolute", top: 54, left: 16, right: 16, backgroundColor: p.bg, borderRadius: 14, padding: 14, gap: 2, borderWidth: 1, borderColor: p.line, shadowColor: "#000", shadowOpacity: 0.18, shadowRadius: 16, elevation: 8 }
+      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 }
     },
-    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)
+    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)
+    )
   ) : null;
   if (!launcher && !toast && !open) return null;
   return (0, import_react2.createElement)(