@graineai/inapp-react-native 0.28.0 → 0.31.0

package/dist/client.d.ts

@@ -63,6 +63,9 @@ export declare class GraineInAppClient {
     configureFriction(override: FrictionConfig | null | undefined): void;
     get friction(): Required<FrictionConfig>;
     on(event: string, fn: Listener): () => void;
+    private lastWidget;
+    get pendingWidget(): any;
+    clearPendingWidget(): void;
     emit(event: string, payload?: any): void;
     private get fetch();
     session(): Promise<SessionConfig>;

package/dist/client.js

@@ -28,6 +28,7 @@ export class GraineInAppClient {
         this.identity = {};
         this.appVersion = null;
         this.recentEvents = [];
+        this.lastWidget = null;
         if (!opts?.publishableKey)
             throw new Error("[Graine] publishableKey is required.");
         if (!opts?.baseUrl)
@@ -57,7 +58,15 @@ export class GraineInAppClient {
         this.listeners.get(event).add(fn);
         return () => this.listeners.get(event)?.delete(fn);
     }
+    get pendingWidget() {
+        return this.lastWidget;
+    }
+    clearPendingWidget() {
+        this.lastWidget = null;
+    }
     emit(event, payload) {
+        if (event === "widget")
+            this.lastWidget = payload ?? null;
         for (const fn of this.listeners.get(event) ?? []) {
             try {
                 fn(payload);

package/dist/friction.d.ts

@@ -20,6 +20,7 @@ export interface FrictionScreenRules {
     repeatedErrors?: RepeatedErrorsRule | false;
     backAndForth?: BackAndForthRule | false;
     rageTaps?: RageTapsRule | false;
+    incompleteSubmit?: IncompleteSubmitRule | false;
     screenError?: boolean;
     message?: string;
 }
@@ -34,10 +35,13 @@ export interface FrictionConfig extends FrictionScreenRules {
     nudge?: FrictionNudge;
     screens?: Record<string, FrictionScreenRules>;
 }
+export interface IncompleteSubmitRule {
+    taps: string[];
+}
 export declare const DEFAULT_FRICTION: Readonly<Required<Omit<FrictionConfig, "message" | "ignore">>>;
 export declare function resolveFriction(...layers: Array<FrictionConfig | null | undefined>): Required<FrictionConfig>;
 export declare function rulesFor(config: Required<FrictionConfig>, screenId: string | null | undefined): Required<FrictionScreenRules>;
-export type FrictionKind = "stalled_on_step" | "repeated_field_error" | "looping_between_screens" | "rage_taps" | "screen_error";
+export type FrictionKind = "stalled_on_step" | "repeated_field_error" | "looping_between_screens" | "rage_taps" | "incomplete_submit" | "screen_error";
 export interface FrictionSignal {
     name: FrictionKind;
     screen: string;

package/dist/friction.js

@@ -3,6 +3,9 @@ const DEFAULT_RULES = {
     repeatedErrors: { count: 2, windowMs: 60000 },
     backAndForth: { visits: 3, windowMs: 45000 },
     rageTaps: { taps: 4, windowMs: 1500 },
+    incompleteSubmit: {
+        taps: ["submit", "next", "continue", "save", "proceed", "apply", "confirm", "done", "pay", "verify"],
+    },
 };
 export const DEFAULT_FRICTION = Object.freeze({
     enabled: true,
@@ -25,8 +28,19 @@ function rule(raw, shape) {
         return undefined;
     const out = {};
     for (const [k, fallback] of Object.entries(shape)) {
-        const v = num(raw[k]);
-        out[k] = v ?? fallback;
+        const given = raw[k];
+        if (typeof fallback === "number") {
+            out[k] = num(given) ?? fallback;
+        }
+        else if (Array.isArray(fallback)) {
+            out[k] = Array.isArray(given) && given.length ? given.map((v) => String(v)) : fallback;
+        }
+        else if (typeof fallback === "boolean") {
+            out[k] = typeof given === "boolean" ? given : fallback;
+        }
+        else {
+            out[k] = given ?? fallback;
+        }
     }
     return out;
 }
@@ -49,6 +63,9 @@ function screenRules(raw, base) {
     const rage = rule(r.rageTaps, base.rageTaps || DEFAULT_RULES.rageTaps);
     if (rage !== undefined)
         out.rageTaps = rage;
+    const inc = rule(r.incompleteSubmit, base.incompleteSubmit || DEFAULT_RULES.incompleteSubmit);
+    if (inc !== undefined)
+        out.incompleteSubmit = inc;
     if (typeof r.screenError === "boolean")
         out.screenError = r.screenError;
     if (typeof r.message === "string" && r.message.trim())
@@ -100,6 +117,7 @@ export function rulesFor(config, screenId) {
         ignore: over.ignore ?? false,
         idle: over.idle ?? config.idle,
         repeatedErrors: over.repeatedErrors ?? config.repeatedErrors,
+        incompleteSubmit: over.incompleteSubmit ?? config.incompleteSubmit,
         backAndForth: over.backAndForth ?? config.backAndForth,
         rageTaps: over.rageTaps ?? config.rageTaps,
         screenError: over.screenError ?? config.screenError,
@@ -109,6 +127,7 @@ export function rulesFor(config, screenId) {
 function fill(template, vars) {
     return template.replace(/\{(\w+)\}/g, (_, k) => (vars[k] === undefined || vars[k] === null ? "" : String(vars[k])));
 }
+const outstanding = (fields) => (fields ?? []).filter((f) => f.error || (!f.optional && (f.status === "invalid" || f.status === "empty")));
 const stuckField = (fields) => (fields ?? []).find((f) => f.status === "invalid" || f.error) ?? (fields ?? []).find((f) => f.status === "empty");
 export class FrictionDetector {
     constructor(config) {
@@ -213,10 +232,26 @@ export class FrictionDetector {
     }
     onTrack(name, now) {
         const rules = this.active();
-        if (!rules || !rules.rageTaps || !this.screen)
+        if (!rules || !this.screen)
             return [];
         if (!name.startsWith("tap:"))
             return [];
+        if (!rules.rageTaps && !rules.incompleteSubmit)
+            return [];
+        const label0 = name.slice(4);
+        if (rules.incompleteSubmit) {
+            const lower = label0.toLowerCase();
+            const isSubmit = rules.incompleteSubmit.taps.some((t) => lower.includes(t.toLowerCase()));
+            const left = outstanding(this.screen.fields);
+            if (isSubmit && left.length) {
+                const names = left.map((f) => f.label || f.name).filter(Boolean);
+                const s = this.signal("incomplete_submit", { tap: label0, count: left.length, fields: names.join(", "), first: names[0] ?? "" }, "The customer pressed \"{tap}\" on the \"{title}\" screen with {count} still to fill: {fields}. Tell them what is missing before they hit the error.", now);
+                if (s)
+                    return [s];
+            }
+        }
+        if (!rules.rageTaps)
+            return [];
         const { taps, windowMs } = rules.rageTaps;
         const key = `${this.screen.screen}:${name}`;
         const times = (this.taps.get(key) ?? []).filter((t) => now - t <= windowMs);
@@ -225,7 +260,7 @@ export class FrictionDetector {
         if (times.length < taps)
             return [];
         this.taps.set(key, []);
-        const label = name.slice(4);
+        const label = label0;
         const s = this.signal("rage_taps", { tap: label, count: times.length, seconds: (windowMs / 1000).toFixed(1) }, label === "screen"
             ? `The customer tapped the "{title}" screen {count} times in {seconds}s — something on it may not be responding or not doing what they expect.`
             : `The customer tapped "{tap}" {count} times in {seconds}s on the "{title}" screen — it may not be responding or not doing what they expect.`, now);

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { addMaskRule, maskDeep, maskString } from "./mask.js";
 export { GraineProvider, useGraineAgent, useGraineScreen, useGraineAction, useGraineVoice, useGraineIdentify, useGraineEvents, useGraineField, useGraineClient, setDefaultClient, useGraineTrack, useGraineTap, useGraineHighlight, useGraineWidget, useGraineReady, useGraineInit, type GraineEvent, type GraineProviderProps, type Turn, type Caption, } from "./react-native/index.js";
 export { requestMicrophonePermission } from "./react-native/permissions.js";
 export { GraineFab, GraineTouchCapture, TAP_MAX_MOVE_PX, TAP_MAX_MS, type GraineFabProps, type GraineTouchCaptureProps, } from "./react-native/fab.js";
-export { UNNAMED_TAP } from "./protocol.js";
+export { UNNAMED_TAP, resolveWidgetImages } from "./protocol.js";
 export { resolveNativeAppearance, type NativeAppearance, type NativeAppearanceFallback, } from "./react-native/appearance.js";
 export { RtcVoiceSessionController, RtcVoiceError, type RtcVoiceState, type RtcVoiceErrorCode, type RtcVoiceSession, type RtcVoiceOptions, } from "./react-native/voice-rtc.js";
 export { GraineAgentBar, GraineLauncher, type GraineAgentBarProps, type GraineLauncherProps, type GraineBarTheme, } from "./react-native/ui.js";

package/dist/index.js

@@ -6,7 +6,7 @@ export { addMaskRule, maskDeep, maskString } from "./mask.js";
 export { GraineProvider, useGraineAgent, useGraineScreen, useGraineAction, useGraineVoice, useGraineIdentify, useGraineEvents, useGraineField, useGraineClient, setDefaultClient, useGraineTrack, useGraineTap, useGraineHighlight, useGraineWidget, useGraineReady, useGraineInit, } from "./react-native/index.js";
 export { requestMicrophonePermission } from "./react-native/permissions.js";
 export { GraineFab, GraineTouchCapture, TAP_MAX_MOVE_PX, TAP_MAX_MS, } from "./react-native/fab.js";
-export { UNNAMED_TAP } from "./protocol.js";
+export { UNNAMED_TAP, resolveWidgetImages } from "./protocol.js";
 export { resolveNativeAppearance, } from "./react-native/appearance.js";
 export { RtcVoiceSessionController, RtcVoiceError, } from "./react-native/voice-rtc.js";
 export { GraineAgentBar, GraineLauncher, } from "./react-native/ui.js";

package/dist/protocol.d.ts

@@ -4,6 +4,7 @@ export interface ScreenField {
     value?: string | number | null;
     status?: "empty" | "filled" | "invalid" | "pending" | "locked";
     error?: string;
+    optional?: boolean;
 }
 export interface ScreenContext {
     screen: string;
@@ -12,6 +13,7 @@ export interface ScreenContext {
         name: string;
         step?: number;
         of?: number;
+        next?: string;
     };
     fields?: ScreenField[];
     error?: string;
@@ -59,3 +61,4 @@ export type ActionHandler = (args: Record<string, any>) => AppActionResult | voi
 export declare const ACTION_DEADLINE_MS = 6000;
 export declare const CONTEXT_THROTTLE_MS = 400;
 export declare const UNNAMED_TAP = "tap:screen";
+export declare function resolveWidgetImages(data: Record<string, unknown>, baseUrl: string): Record<string, unknown>;

package/dist/protocol.js

@@ -1,3 +1,31 @@
 export const ACTION_DEADLINE_MS = 6000;
 export const CONTEXT_THROTTLE_MS = 400;
 export const UNNAMED_TAP = "tap:screen";
+const IMAGE_KEY = /^(image|imageurl|image_url|icon|iconurl|icon_url|logo|logourl|logo_url|photo|photourl|photo_url|thumbnail|thumbnailurl|thumbnail_url)$/i;
+function resolveOne(value, base) {
+    if (typeof value !== "string" || !value.startsWith("/") || value.startsWith("//"))
+        return value;
+    return `${base.replace(/\/+$/, "")}${value}`;
+}
+export function resolveWidgetImages(data, baseUrl) {
+    if (!data || typeof data !== "object" || !baseUrl)
+        return data;
+    const out = {};
+    for (const [k, v] of Object.entries(data)) {
+        if (IMAGE_KEY.test(k)) {
+            out[k] = resolveOne(v, baseUrl);
+        }
+        else if (Array.isArray(v)) {
+            out[k] = v.map((row) => row && typeof row === "object" && !Array.isArray(row)
+                ? Object.fromEntries(Object.entries(row).map(([rk, rv]) => [
+                    rk,
+                    IMAGE_KEY.test(rk) ? resolveOne(rv, baseUrl) : rv,
+                ]))
+                : row);
+        }
+        else {
+            out[k] = v;
+        }
+    }
+    return out;
+}

package/dist/react-native/index.js

@@ -3,6 +3,7 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useRef, use
 import { AppState } from "react-native";
 import { GraineInAppClient } from "../client.js";
 import { VoiceSession } from "../voice.js";
+import { resolveWidgetImages } from "../protocol.js";
 import { GraineFab, GraineTouchCapture } from "./fab.js";
 export { GraineFab, GraineTouchCapture } from "./fab.js";
 import { LauncherVisibilityTracker, activeRouteName, } from "./navigation.js";
@@ -388,24 +389,36 @@ export function useGraineHighlight(name) {
 }
 export function useGraineWidget() {
     const client = useGraineClient();
-    const [widget, setWidget] = useState(null);
-    useEffect(() => client.on("widget", (w) => {
-        if (!w?.widget_id)
-            return;
-        setWidget({
+    const adopt = useCallback((w) => w?.widget_id
+        ? {
             id: String(w.widget_id),
             kind: String(w.kind || ""),
-            data: (w.data || {}),
+            data: resolveWidgetImages((w.data || {}), client.opts.baseUrl),
             fallbackText: String(w.fallback_text || ""),
+        }
+        : null, [client]);
+    const [widget, setWidget] = useState(() => adopt(client.pendingWidget));
+    useEffect(() => {
+        const pending = adopt(client.pendingWidget);
+        if (pending)
+            setWidget((cur) => (cur && cur.id === pending.id ? cur : pending));
+        return client.on("widget", (w) => {
+            const next = adopt(w);
+            if (next)
+                setWidget(next);
         });
-    }), [client]);
+    }, [client, adopt]);
     const submit = useCallback((data, summary) => {
         if (!widget)
             return;
         client.submitWidget(widget.id, data, summary);
+        client.clearPendingWidget();
         setWidget(null);
     }, [client, widget]);
-    const dismiss = useCallback(() => setWidget(null), []);
+    const dismiss = useCallback(() => {
+        client.clearPendingWidget();
+        setWidget(null);
+    }, [client]);
     return { widget, submit, dismiss };
 }
 export function useGraineAction(name, handler) {

package/dist/react-native/voice-launcher.js

@@ -20,6 +20,12 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
     const foldCaption = useCallback((next) => {
         setCaptions((prev) => {
             const tail = prev[prev.length - 1];
+            if (!next.text) {
+                if (tail && tail.live && tail.role === next.role) {
+                    return [...prev.slice(0, -1), { ...tail, live: false }];
+                }
+                return prev;
+            }
             const continues = tail && tail.live && tail.role === next.role;
             const merged = continues ? [...prev.slice(0, -1), next] : [...prev, next];
             return merged.length > CAPTION_HISTORY ? merged.slice(-CAPTION_HISTORY) : merged;
@@ -132,6 +138,9 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                     startedRef.current = true;
                     void beginCall();
                 }
+                else if (!activeRef.current && !startedRef.current) {
+                    post({ type: "graine:warm" });
+                }
                 return;
             case "graine:call":
                 setConnected(!!msg.connected);
@@ -194,6 +203,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         start: useCallback(() => {
             setConnecting(true);
             setCaptions([]);
+            client.clearPendingWidget();
             if (!ready) {
                 pendingStartRef.current = true;
                 return;
@@ -237,6 +247,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         setConnected(false);
         setConnecting(false);
         setCaptions([]);
+        client.clearPendingWidget();
         onCallState?.({ connected: false, connecting: false });
     }, [active]);
     useEffect(() => {

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@graineai/inapp-react-native",
-  "version": "0.28.0",
+  "version": "0.31.0",
   "type": "module",
-  "description": "Graine in-app agent for React Native — an agent that sees the screen your customer is on and can act on it.",
+  "description": "Graine in-app agent for React Native \u2014 an agent that sees the screen your customer is on and can act on it.",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",