@guidelytech/react-native 0.13.0 → 0.15.0

package/README.md

@@ -88,7 +88,7 @@ tasks).
 | `<GuidelyMask>` | Keeps its children out of tap-analytics text and session recordings (it sets its own `nativeID`) |
 
 Provider props: `projectId`, `apiUrl`, `environment`, `storage`, `user`, `debug`, `analytics`,
-`consent` (`granted` / `pending` / `denied`), `appVersion` (for *App version* rules), `theme`,
+`consent` (`granted` / `pending` / `denied`), `appVersion` (overrides the detected version, see below), `theme`,
 `configRefreshMs`, `onNavigate`, `onError`, `showChecklistLauncher` (default `true`),
 `showResourceCenterLauncher` (default `false`), `showMessengerLauncher` (default `true`), `insets`,
 `launcherOffset` (default 72), `autocapture`, `appBuild`, `sessionReplay`.
@@ -111,7 +111,7 @@ runs when the project turns it on (Settings → Product analytics) and analytics
 | `rage_click` | 3+ taps within 1 s and 30 pt | the `click` properties of the tapped (or hit) view + `count` |
 | `heatmap` | Every 40 taps, on screen change and when the app goes to the background | `path?`, `viewportWidth`, `viewportHeight`, `pageHeight`, `platform`, `points` |
 | `page_leave` | The screen changes or the app goes to the background | `path?`, `screen`, `durationMs`, `scrollDepth: 100`, `platform` |
-| `page_view` | `screen()` with a new name; after returning to the foreground with `resumed: true` | `path`, `screen`, `platform` |
+| `page_view` | `screen()` with a new name; after returning to the foreground with `resumed: true` | `path`, `screen`, `platform`, `deviceType`, `os`, `osVersion` |
 | `app_install` / `app_update` | First launch / a launch with a new `appVersion` or `appBuild` | `appVersion`, `build`, `previousVersion`, `previousBuild` |
 | `app_open` / `app_background` | Cold start and return to the foreground / background | `coldStart` / `foregroundMs` |
 
@@ -141,10 +141,18 @@ import { GuidelyMask } from "@guidelytech/react-native";
 <GuidelyMask><Pressable onPress={showCard}><Text>{cardNumber}</Text></Pressable></GuidelyMask>
 ```
 
-**App lifecycle.** `app_install` / `app_update` need the `appVersion` prop (e.g.
-`Application.nativeApplicationVersion` from `expo-application`; `appBuild` from
-`nativeBuildVersion`) and `storage`; the last version is stored per public key. An app that already
-had Guidely installed stores its version silently on the first launch with this release.
+**App and OS versions.** The SDK detects them on iOS and Android. The OS version (`18.1`, or `14` on
+Android) comes from React Native and is sent as `osVersion` on `page_view` and as the `osVersion`
+flag attribute. React Native has no API for the app's own version and build, so they are read from
+the first linked native module that knows them: `@guidelytech/react-native-replay`
+(`CFBundleShortVersionString` / `versionName`, `CFBundleVersion` / `versionCode`), then
+`expo-application` (not in Expo Go, which reports its own version), then `react-native-device-info`.
+If none of these is installed, pass `appVersion` / `appBuild`. Passing them also overrides the
+detected values.
+
+**App lifecycle.** `app_install` / `app_update` need a known app version (detected or the
+`appVersion` prop) and `storage`. The last version is stored per public key. An app that already had
+Guidely installed stores its version silently on the first launch with this release.
 
 **Limitations.** React Native has no public API for "which component is under this point", so
 element resolution (steps 2 and 3, `tag`, `text`) reads React's internal component tree of the touch
@@ -217,7 +225,7 @@ useGuidely().isFeatureEnabled("new-checkout"); // or getFeatureValue / getFeatur
 
 Flags evaluate on the device with `id` (user id, else the anonymous id), `anonymousId`, identify
 traits, `account`, `$audiences`, `screen`, `path`, `platform` (`ios` / `android`), `deviceType`,
-`appVersion`, `locale` and `environment`, plus `flagAttributes` from the provider. The last payload
+`appVersion`, `osVersion`, `locale` and `environment`, plus `flagAttributes` from the provider. The last payload
 is kept in `storage`, so flags work offline from a cold start; they refresh when the app returns to
 the foreground. Experiment exposures are tracked as `experiment_viewed` events.
 

package/dist/index.cjs

@@ -46,6 +46,8 @@ __export(index_exports, {
   TargetRegistry: () => TargetRegistry,
   createFlagsClient: () => import_flags6.createFlagsClient,
   createSseParser: () => createSseParser,
+  detectAppVersion: () => detectAppVersion,
+  detectOsVersion: () => detectOsVersion,
   guidelyScreenLayout: () => guidelyScreenLayout,
   htmlToText: () => htmlToText,
   noopClient: () => noopClient,
@@ -1445,14 +1447,14 @@ function quoteValue(value) {
 function attrSelector(name, value) {
   return `[${name}=${quoteValue(value)}]`.slice(0, 300);
 }
-function cleanText(text) {
-  const t = (text ?? "").replace(/\s+/g, " ").trim();
+function cleanText(text2) {
+  const t = (text2 ?? "").replace(/\s+/g, " ").trim();
   return t ? t.slice(0, 100) : void 0;
 }
 function tapProperties(el, x, y, platform, maskAll) {
   const props = { selector: el.selector.slice(0, 300), tag: el.tag || "View", x: Math.round(x) || 0, y: Math.round(y) || 0, platform };
-  const text = maskAll ? void 0 : cleanText(el.text);
-  if (text) props.text = text;
+  const text2 = maskAll ? void 0 : cleanText(el.text);
+  if (text2) props.text = text2;
   return props;
 }
 var r2 = (n) => Math.round(Math.min(1, Math.max(0, n)) * 100) / 100;
@@ -2073,10 +2075,10 @@ function xhrStreamPost() {
       const type = xhr.getResponseHeader("content-type") || "";
       if (!type.includes("text/event-stream")) return;
       streamed = true;
-      const text = xhr.responseText || "";
-      if (text.length > seen) {
-        onChunk(text.slice(seen));
-        seen = text.length;
+      const text2 = xhr.responseText || "";
+      if (text2.length > seen) {
+        onChunk(text2.slice(seen));
+        seen = text2.length;
       }
     };
     xhr.open("POST", url);
@@ -2151,14 +2153,14 @@ function fetchStreamPost(fetchImpl) {
         if (rest) onChunk(rest);
         return { status: res.status, json: null, streamed: true };
       }
-      const text = await race(res.text());
+      const text2 = await race(res.text());
       if (sse) {
-        onChunk(text);
+        onChunk(text2);
         return { status: res.status, json: null, streamed: true };
       }
       let json = null;
       try {
-        json = JSON.parse(text || "null");
+        json = JSON.parse(text2 || "null");
       } catch {
         json = null;
       }
@@ -2271,10 +2273,10 @@ var Messenger = class {
     if (v.kind === "tab" && v.tab === "messages") void this.refreshConversations();
   }
   /** Opens a new thread (optionally pre-filling the composer). */
-  showNewMessage(text = "") {
+  showNewMessage(text2 = "") {
     this.stopThreadPolling();
     if (!this.snapshot.open) this.deps.onOpen();
-    this.set({ open: true, view: { kind: "thread", conversationId: null }, thread: { conversation: null, messages: [], streaming: {}, sending: false, error: null, draft: text } });
+    this.set({ open: true, view: { kind: "thread", conversationId: null }, thread: { conversation: null, messages: [], streaming: {}, sending: false, error: null, draft: text2 } });
   }
   async openConversation(id) {
     const known = this.snapshot.conversations.find((c) => c.id === id) ?? null;
@@ -2318,8 +2320,8 @@ var Messenger = class {
     }
   }
   /** Sends the composer text: starts a conversation or posts to the open one. Streams Scout's reply. */
-  async send(text) {
-    const body = text.trim().slice(0, 4e3);
+  async send(text2) {
+    const body = text2.trim().slice(0, 4e3);
     const thread = this.snapshot.thread;
     if (!body || !thread || thread.sending) return;
     this.setThread({ sending: true, error: null, draft: "" });
@@ -2967,7 +2969,7 @@ var PersistentStore = class {
 
 // src/core/client.ts
 var SDK_NAME = "@guidelytech/react-native";
-var SDK_VERSION = "0.13.0";
+var SDK_VERSION = "0.15.0";
 var DEFAULT_API_URL = "https://guidelytech.com";
 var PAGE_SCOPED = /* @__PURE__ */ new Set(["page_load", "url_match", "element_click", "element_visible", "delay"]);
 var CACHED_START_MS = 1500;
@@ -3611,7 +3613,7 @@ var GuidelyClient = class {
     const opts = this.options.sessionReplay ?? {};
     const ids = new Set((r?.blockSelectors ?? []).map((sel) => guidelyIdFromSelector(sel)).filter((id) => !!id));
     const rects = await Promise.all(Array.from(ids, (id) => this.targets.measure(id)));
-    return { maskAllText: !!opts.maskAllText || !!r?.maskAllText, maskAllImages: !!opts.maskAllImages, blockRects: rects.filter((rect) => !!rect) };
+    return { maskAllText: !!opts.maskAllText || !!r?.maskAllText, maskAllImages: !!opts.maskAllImages || !!r?.maskAllImages, blockRects: rects.filter((rect) => !!rect) };
   }
   /**
    * Records this session even when it was not sampled (still needs `sessionReplay.enabled`, replay
@@ -3739,12 +3741,12 @@ var GuidelyClient = class {
   /** `{ appVersion, build }` of this launch, without unknown keys. */
   appInfo() {
     const appVersion = this.options.appVersion ?? this.bridge.device.appVersion;
-    const build = this.options.appBuild;
+    const build = this.options.appBuild ?? (this.options.appVersion ? void 0 : this.bridge.device.appBuild);
     return { ...appVersion ? { appVersion: String(appVersion) } : {}, ...build ? { build: String(build) } : {} };
   }
   /**
    * Once per launch, as soon as a config is known: `app_install` / `app_update` from the stored
-   * version (when the app passes `appVersion` and `storage`), then `app_open` with `coldStart: true`.
+   * version (when the app version is known and the app passes `storage`), then `app_open` with `coldStart: true`.
    */
   checkLaunch() {
     if (this.launchChecked || !this.config || this.destroyed || !this.hydrated) return;
@@ -4561,8 +4563,8 @@ var GuidelyClient = class {
     this.messenger?.close();
   }
   /** Opens a new messenger conversation, optionally pre-filling the message. */
-  showNewMessage(text) {
-    this.whenHydrated(() => this.messenger?.showNewMessage(text));
+  showNewMessage(text2) {
+    this.whenHydrated(() => this.messenger?.showNewMessage(text2));
   }
   // ---------------------------------------------------------------------------
   // Feature flags
@@ -4586,7 +4588,7 @@ var GuidelyClient = class {
   /** Device facts on every screen view, read by the Pages devices / browsers breakdowns. */
   deviceProperties() {
     const d = this.bridge.device;
-    return { platform: d.platform, deviceType: d.deviceType, os: d.platform };
+    return { platform: d.platform, deviceType: d.deviceType, os: d.platform, ...d.osVersion ? { osVersion: d.osVersion } : {} };
   }
   /** Attributes flags are evaluated with: identity, traits, account, audiences, screen and device. */
   flagContext() {
@@ -4597,6 +4599,7 @@ var GuidelyClient = class {
       deviceType: d.deviceType,
       locale: d.locale,
       appVersion: this.options.appVersion ?? d.appVersion,
+      osVersion: d.osVersion,
       environment: this.options.environment,
       ...this.screenName ? { screen: this.screenName, path: this.currentUrl() } : {},
       ...this.user?.traits ?? {},
@@ -4687,6 +4690,51 @@ function withoutCode(guide) {
   return { ...guide, config: { ...guide.config, steps: guide.config.steps.map(({ code: _code, ...step }) => step) } };
 }
 
+// src/core/device.ts
+function text(value) {
+  if (typeof value === "number" && Number.isFinite(value)) return String(value);
+  if (typeof value !== "string") return void 0;
+  const v = value.trim();
+  return v ? v.slice(0, 64) : void 0;
+}
+function constant(mod, key) {
+  if (!mod || typeof mod !== "object" && typeof mod !== "function") return void 0;
+  const m = mod;
+  try {
+    const fromGetter = typeof m.getConstants === "function" ? m.getConstants()?.[key] : void 0;
+    return fromGetter ?? m[key];
+  } catch {
+    return void 0;
+  }
+}
+function read(mod, versionKey, buildKey) {
+  const appVersion = text(constant(mod, versionKey));
+  if (!appVersion) return null;
+  const appBuild = text(constant(mod, buildKey));
+  return { appVersion, ...appBuild ? { appBuild } : {} };
+}
+function inExpoGo(src) {
+  const c = src.expoModules?.ExponentConstants ?? src.nativeModules.ExponentConstants;
+  return constant(c, "executionEnvironment") === "storeClient" || constant(c, "appOwnership") === "expo";
+}
+function detectAppVersion(src) {
+  try {
+    const expo = inExpoGo(src) ? null : src.expoModules?.ExpoApplication ?? src.nativeModules.ExpoApplication;
+    return read(src.nativeModules.GuidelyReplay, "appVersion", "appBuild") ?? read(expo, "nativeApplicationVersion", "nativeBuildVersion") ?? read(src.nativeModules.RNDeviceInfo, "appVersion", "buildNumber") ?? {};
+  } catch {
+    return {};
+  }
+}
+function detectOsVersion(src) {
+  try {
+    const c = src.platform.constants ?? {};
+    if (src.platform.OS === "android") return text(c.Release) ?? text(src.platform.Version);
+    return text(c.osVersion) ?? text(src.platform.Version);
+  } catch {
+    return void 0;
+  }
+}
+
 // src/ui/Autocapture.tsx
 var import_react8 = require("react");
 var import_react_native11 = require("react-native");
@@ -4818,8 +4866,8 @@ function describe(f, masked, opts, withText) {
     if (!sub.masked) {
       const hostProps = host?.memoizedProps && typeof host.memoizedProps === "object" ? host.memoizedProps : {};
       const label = props.accessibilityLabel ?? props["aria-label"] ?? hostProps.accessibilityLabel ?? hostProps["aria-label"];
-      const text = cleanText(sub.text) ?? (typeof label === "string" ? cleanText(label) : void 0);
-      if (text) el.text = text;
+      const text2 = cleanText(sub.text) ?? (typeof label === "string" ? cleanText(label) : void 0);
+      if (text2) el.text = text2;
     }
   }
   if (host) el.measure = () => measureHost(host);
@@ -4975,17 +5023,17 @@ function parseHtml(html) {
     flush();
     current = { kind, level, marker, runs: [] };
   };
-  const push = (text) => {
-    if (!text) return;
+  const push = (text2) => {
+    if (!text2) return;
     if (!current) current = { kind: "paragraph", level: 1, runs: [] };
-    const run = { text };
+    const run = { text: text2 };
     if (style.bold) run.bold = true;
     if (style.italic) run.italic = true;
     if (style.underline) run.underline = true;
     if (style.code) run.code = true;
     if (hrefs.length) run.href = hrefs[hrefs.length - 1];
     const last = current.runs[current.runs.length - 1];
-    if (last && last.bold === run.bold && last.italic === run.italic && last.underline === run.underline && last.code === run.code && last.href === run.href) last.text += text;
+    if (last && last.bold === run.bold && last.italic === run.italic && last.underline === run.underline && last.code === run.code && last.href === run.href) last.text += text2;
     else current.runs.push(run);
   };
   const size = (attrs, name) => {
@@ -5001,18 +5049,18 @@ function parseHtml(html) {
   const re = /<!--[\s\S]*?-->|<\/?([a-zA-Z][a-zA-Z0-9]*)\b([^>]*)>|([^<]+|<)/g;
   let m;
   while (m = re.exec(html || "")) {
-    const [token, rawTag, attrs = "", text] = m;
-    if (text !== void 0) {
+    const [token, rawTag, attrs = "", text2] = m;
+    if (text2 !== void 0) {
       if (skipping) continue;
       if (pdf) {
-        if (pdf.inLink) pdf.name += decodeEntities(text);
+        if (pdf.inLink) pdf.name += decodeEntities(text2);
         continue;
       }
       if (fileLink) {
-        fileLink.name += decodeEntities(text);
+        fileLink.name += decodeEntities(text2);
         continue;
       }
-      push(decodeEntities(text.replace(/\s+/g, " ")));
+      push(decodeEntities(text2.replace(/\s+/g, " ")));
       continue;
     }
     if (!rawTag) continue;
@@ -5586,13 +5634,13 @@ function Conversations({ store, palette: p }) {
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GButton, { label: "New conversation", palette: p, onPress: () => store.showNewMessage(), style: styles4.fullWidth })
   ] });
 }
-function Bubble({ m, text, name, palette: p, onArticle, onGuide }) {
+function Bubble({ m, text: text2, name, palette: p, onArticle, onGuide }) {
   if (m.author === "system")
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { accessibilityRole: "text", style: [styles4.system, { color: p.muted }], children: text });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { accessibilityRole: "text", style: [styles4.system, { color: p.muted }], children: text2 });
   const mine = m.author === "user";
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: [styles4.bubbleWrap, mine ? styles4.mine : styles4.theirs], children: [
     !mine ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { style: [styles4.author, { color: p.muted }], children: m.author === "agent" ? m.authorName || "Team" : name }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style: [styles4.bubble, { borderRadius: Math.max(12, p.radius) }, mine ? { backgroundColor: p.primary } : { backgroundColor: p.surface }], children: m.status === "pending" && !text ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TypingDots, { color: p.muted }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { style: [styles4.bubbleText, { color: mine ? p.onPrimary : p.text }], children: text }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style: [styles4.bubble, { borderRadius: Math.max(12, p.radius) }, mine ? { backgroundColor: p.primary } : { backgroundColor: p.surface }], children: m.status === "pending" && !text2 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TypingDots, { color: p.muted }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { style: [styles4.bubbleText, { color: mine ? p.onPrimary : p.text }], children: text2 }) }),
     m.citations.length || m.suggestedGuides.length ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: styles4.chips, children: [
       m.citations.map((c) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Pressable, { accessibilityRole: "link", accessibilityLabel: `Article: ${c.title}`, onPress: () => onArticle(c.articleId), style: [styles4.chip, { borderColor: p.border }], children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.Text, { style: [styles4.chipText, { color: p.text }], children: [
         "\u{1F4C4} ",
@@ -5611,7 +5659,7 @@ function TypingDots({ color }) {
 function Thread({ store, palette: p, bottomInset }) {
   const snap = useMessenger(store);
   const t = snap.thread;
-  const [text, setText] = (0, import_react3.useState)(t?.draft ?? "");
+  const [text2, setText] = (0, import_react3.useState)(t?.draft ?? "");
   const scroll = (0, import_react3.useRef)(null);
   const convo = t?.conversation ?? null;
   (0, import_react3.useEffect)(() => {
@@ -5620,7 +5668,7 @@ function Thread({ store, palette: p, bottomInset }) {
   const streamingIds = (0, import_react3.useMemo)(() => Object.keys(t?.streaming ?? {}).filter((id) => !t?.messages.some((m) => m.id === id)), [t]);
   if (!t) return null;
   const send = () => {
-    const value = text;
+    const value = text2;
     setText("");
     void store.send(value);
   };
@@ -5642,7 +5690,7 @@ function Thread({ store, palette: p, bottomInset }) {
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_react_native5.TextInput,
         {
-          value: text,
+          value: text2,
           onChangeText: (v) => setText(v.slice(0, 4e3)),
           placeholder: convo ? "Reply\u2026" : "Write a message\u2026",
           placeholderTextColor: p.muted,
@@ -5651,7 +5699,7 @@ function Thread({ store, palette: p, bottomInset }) {
           style: [styles4.input, { color: p.text, backgroundColor: p.surface, borderRadius: Math.min(18, p.radius + 6) }]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GButton, { label: "Send", palette: p, onPress: send, disabled: !text.trim() || t.sending })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GButton, { label: "Send", palette: p, onPress: send, disabled: !text2.trim() || t.sending })
     ] })
   ] });
 }
@@ -6555,15 +6603,15 @@ function palette(theme, systemScheme, explicit) {
   const wantsDark = theme.dark === "dark" || theme.dark === "auto" && systemScheme === "dark";
   const dark = wantsDark && !explicit?.backgroundColor;
   const background = dark ? DARK.background : theme.backgroundColor ?? "#ffffff";
-  const text = dark ? DARK.text : theme.textColor ?? "#111827";
+  const text2 = dark ? DARK.text : theme.textColor ?? "#111827";
   return {
     primary,
     onPrimary: luminance(primary) > 0.45 ? "#111827" : "#ffffff",
     background,
-    text,
-    muted: dark ? DARK.muted : mix(text, 0.65),
-    border: dark ? DARK.border : mix(text, 0.12),
-    surface: dark ? DARK.surface : mix(text, 0.05),
+    text: text2,
+    muted: dark ? DARK.muted : mix(text2, 0.65),
+    border: dark ? DARK.border : mix(text2, 0.12),
+    surface: dark ? DARK.surface : mix(text2, 0.05),
     radius: theme.borderRadius ?? 12,
     overlay: `rgba(15, 23, 42, ${theme.overlayOpacity ?? 0.55})`,
     fontFamily: nativeFont(theme.fontFamily)
@@ -6790,14 +6838,25 @@ function deviceLocale() {
     return void 0;
   }
 }
-function defaultBridge(appVersion) {
+function nativeSources() {
+  return {
+    platform: import_react_native13.Platform,
+    nativeModules: import_react_native13.NativeModules,
+    expoModules: globalThis.expo?.modules
+  };
+}
+function defaultBridge(appVersion, appBuild) {
   const { width, height } = import_react_native13.Dimensions.get("window");
+  const sources = nativeSources();
+  const detected = appVersion ? {} : detectAppVersion(sources);
   return {
     device: {
       platform: import_react_native13.Platform.OS === "android" ? "android" : "ios",
       deviceType: import_react_native13.Platform.OS === "ios" && import_react_native13.Platform.isPad || Math.min(width, height) >= 600 ? "tablet" : "mobile",
       locale: deviceLocale(),
-      appVersion
+      appVersion: appVersion ?? detected.appVersion,
+      appBuild: appBuild ?? detected.appBuild,
+      osVersion: detectOsVersion(sources)
     },
     openExternal: (url) => void import_react_native13.Linking.openURL(url).catch(() => {
     }),
@@ -6842,7 +6901,7 @@ function GuidelyProvider({ children, user, insets, launcherOffset = 72, flagsPay
           onNavigate: (url) => optionsRef.current.onNavigate?.(url),
           onError: (err) => optionsRef.current.onError?.(err)
         },
-        defaultBridge(latest.appVersion)
+        defaultBridge(latest.appVersion, latest.appBuild)
       );
     } catch (err) {
       optionsRef.current.onError?.(err instanceof Error ? err : new Error(String(err)));
@@ -7045,6 +7104,8 @@ function useActiveGuide() {
   TargetRegistry,
   createFlagsClient,
   createSseParser,
+  detectAppVersion,
+  detectOsVersion,
   guidelyScreenLayout,
   htmlToText,
   noopClient,