@graineai/inapp-react-native 0.33.5 → 0.34.0

package/dist/client.d.ts

@@ -1,4 +1,4 @@
-import { type ActionHandler, type AppActionResult, type AppEvent, type ScreenContext, type ScreenField } from "./protocol.js";
+import { type ActionHandler, type AppActionResult, type AppEvent, type ScreenContext, type ScreenField, type AgentSurface } from "./protocol.js";
 import { type FrictionConfig } from "./friction.js";
 export declare const SUBPROTOCOL = "graine.embed.v1";
 export interface GraineInAppOptions {
@@ -66,6 +66,12 @@ export declare class GraineInAppClient {
     private lastWidget;
     get pendingWidget(): any;
     clearPendingWidget(): void;
+    private voiceHost;
+    get hasVoiceHost(): boolean;
+    setVoiceHost(on: boolean): void;
+    private currentSurface;
+    get surface(): AgentSurface;
+    setSurface(next: AgentSurface): void;
     emit(event: string, payload?: any): void;
     private get fetch();
     session(): Promise<SessionConfig>;
@@ -73,6 +79,7 @@ export declare class GraineInAppClient {
     private reportActionMismatch;
     private ticket;
     connect(): Promise<void>;
+    private get socketIsVoice();
     private openSocket;
     private send;
     private onFrame;

package/dist/client.js

@@ -1,4 +1,4 @@
-import { ACTION_DEADLINE_MS, CONTEXT_THROTTLE_MS, } from "./protocol.js";
+import { contextToken, ACTION_DEADLINE_MS, CONTEXT_THROTTLE_MS, } from "./protocol.js";
 import { maskDeep } from "./mask.js";
 import { FrictionDetector, resolveFriction } from "./friction.js";
 export const SUBPROTOCOL = "graine.embed.v1";
@@ -29,6 +29,8 @@ export class GraineInAppClient {
         this.appVersion = null;
         this.recentEvents = [];
         this.lastWidget = null;
+        this.voiceHost = false;
+        this.currentSurface = "voice";
         if (!opts?.publishableKey)
             throw new Error("[Graine] publishableKey is required.");
         if (!opts?.baseUrl)
@@ -64,6 +66,26 @@ export class GraineInAppClient {
     clearPendingWidget() {
         this.lastWidget = null;
     }
+    get hasVoiceHost() {
+        return this.voiceHost;
+    }
+    setVoiceHost(on) {
+        if (this.voiceHost === on)
+            return;
+        this.voiceHost = on;
+        this.emit("voice_host", { present: on });
+    }
+    get surface() {
+        return this.currentSurface;
+    }
+    setSurface(next) {
+        if (next !== "voice" && next !== "chat")
+            return;
+        if (this.currentSurface === next)
+            return;
+        this.currentSurface = next;
+        this.emit("surface", { surface: next });
+    }
     emit(event, payload) {
         if (event === "widget")
             this.lastWidget = payload ?? null;
@@ -138,7 +160,7 @@ export class GraineInAppClient {
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({
                     publishableKey: this.opts.publishableKey,
-                    mode: this.opts.voice ? "voice" : "text",
+                    mode: this.socketIsVoice ? "voice" : "text",
                 }),
             });
             if (!res.ok)
@@ -157,6 +179,9 @@ export class GraineInAppClient {
         this.connecting = this.openSocket().finally(() => { this.connecting = null; });
         return this.connecting;
     }
+    get socketIsVoice() {
+        return !!this.opts.voice && this.currentSurface !== "chat";
+    }
     async openSocket() {
         if (!this.config)
             await this.session();
@@ -171,10 +196,13 @@ export class GraineInAppClient {
         }
         else {
             const host = (this.config.wsHost || "wss://ws.graine.ai").replace(/\/$/, "");
-            const mode = this.opts.voice ? "webcall=1" : "text_chat=1";
+            const mode = this.socketIsVoice ? "webcall=1" : "text_chat=1";
             url = `${host}/chat/v1/${encodeURIComponent(agentId)}?${mode}`;
             this.transport = "direct";
         }
+        const token = contextToken({ ...(this.config.variables ?? {}), ...(this.opts.variables ?? {}), ...this.identity }, this.socketIsVoice ? "webcall" : "text_chat");
+        if (token)
+            url += `${url.includes("?") ? "&" : "?"}context_token=${encodeURIComponent(token)}`;
         const WS = this.opts.WebSocketImpl ?? globalThis.WebSocket;
         const ws = new WS(url, protocols);
         this.ws = ws;

package/dist/index.d.ts

@@ -6,19 +6,22 @@ export { LOADER_KINDS, LOADER_SIZES, LOADER_SPEEDS, LOADER_MOMENTS, DEFAULT_LOAD
 export type { LoaderKind, LoaderSize, LoaderSpeed, LoaderMoment, LoaderText, LoaderStyle, LoaderLook } from "./protocol.js";
 export { normaliseSelectAction, fillSelectArgs, fillSelectTemplate, selectCall, NAVIGATE_ACTION, SELECT_ARG_MAX, SELECT_VALUE_MAX } from "./protocol.js";
 export { WIDGET_SELECTS, MAX_SELECT_DEFAULT, manySummary } from "./protocol.js";
+export { contextToken } from "./protocol.js";
+export { resolveSurface } from "./protocol.js";
+export type { AgentSurface, SurfacePolicy } from "./protocol.js";
 export type { WidgetSelect } from "./protocol.js";
 export type { WidgetSelectAction } from "./protocol.js";
 export { GraineWidget } from "./react-native/widget.js";
 export { GraineLoader, useGraineLoader } from "./react-native/loader.js";
 export type { GraineLoaderProps } from "./react-native/loader.js";
-export { PENDING_WIDGET_MS } from "./react-native/index.js";
+export { PENDING_WIDGET_MS, AWAITING_REPLY_MS, MIN_LOADER_MS } from "./react-native/index.js";
 export type { GraineWidgetProps, GraineWidgetTheme } from "./react-native/widget.js";
 export { GraineInAppClient, type GraineInAppOptions, type SessionConfig, type ActionDiagnosis, } from "./client.js";
 export { FrictionDetector, resolveFriction, rulesFor, DEFAULT_FRICTION, type FrictionConfig, type FrictionScreenRules, type FrictionNudge, type FrictionSignal, type FrictionKind, } from "./friction.js";
 export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RATE, type AudioAdapter, type VoiceSessionOptions, } from "./voice.js";
 export { EchoGuard, decodeAgentAudio, decodeMuLaw, decodePcm16, base64ToBytes, type AudioFormat, type DecodedAudio, } from "./audio.js";
 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 { GraineProvider, useGraineAgent, useGraineSurface, 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, resolveWidgetImages } from "./protocol.js";

package/dist/index.js

@@ -3,15 +3,17 @@ export { WIDGET_PRESETS, WIDGET_IMAGE_SIZES, WIDGET_DENSITIES, WIDGET_BUTTONS, W
 export { LOADER_KINDS, LOADER_SIZES, LOADER_SPEEDS, LOADER_MOMENTS, DEFAULT_LOADER_KIND, DEFAULT_LOADER_TEXT, LOADER_TEXT_MAX, normaliseLoaderStyle, resolveLoader, } from "./protocol.js";
 export { normaliseSelectAction, fillSelectArgs, fillSelectTemplate, selectCall, NAVIGATE_ACTION, SELECT_ARG_MAX, SELECT_VALUE_MAX } from "./protocol.js";
 export { WIDGET_SELECTS, MAX_SELECT_DEFAULT, manySummary } from "./protocol.js";
+export { contextToken } from "./protocol.js";
+export { resolveSurface } from "./protocol.js";
 export { GraineWidget } from "./react-native/widget.js";
 export { GraineLoader, useGraineLoader } from "./react-native/loader.js";
-export { PENDING_WIDGET_MS } from "./react-native/index.js";
+export { PENDING_WIDGET_MS, AWAITING_REPLY_MS, MIN_LOADER_MS } from "./react-native/index.js";
 export { GraineInAppClient, } from "./client.js";
 export { FrictionDetector, resolveFriction, rulesFor, DEFAULT_FRICTION, } from "./friction.js";
 export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RATE, } from "./voice.js";
 export { EchoGuard, decodeAgentAudio, decodeMuLaw, decodePcm16, base64ToBytes, } from "./audio.js";
 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 { GraineProvider, useGraineAgent, useGraineSurface, 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, resolveWidgetImages } from "./protocol.js";

package/dist/protocol.d.ts

@@ -179,3 +179,11 @@ export declare function selectCall(onSelect: WidgetSelectAction | undefined | nu
     args: Record<string, string>;
 } | null;
 export declare function fillSelectArgs(args: Record<string, string> | undefined, item: Record<string, unknown>): Record<string, string>;
+export declare function contextToken(variables: Record<string, unknown> | null | undefined, callType?: string): string | null;
+export type AgentSurface = "voice" | "chat";
+export interface SurfacePolicy {
+    allowed: AgentSurface[];
+    start: AgentSurface;
+    canSwitch: boolean;
+}
+export declare function resolveSurface(appearance?: Record<string, any> | null, prefer?: AgentSurface | null): SurfacePolicy;

package/dist/protocol.js

@@ -204,7 +204,7 @@ export function resolveLoader(style) {
         px: LOADER_PX[s.size ?? "medium"],
         periodMs: LOADER_PERIOD[s.speed ?? "normal"],
         text: { ...DEFAULT_LOADER_TEXT, ...(s.text ?? {}) },
-        skeleton: s.skeleton ?? true,
+        skeleton: s.skeleton ?? false,
     };
 }
 const ACTION_NAME = /^[a-z][a-z0-9_]{0,63}$/;
@@ -261,3 +261,62 @@ export function fillSelectArgs(args, item) {
         out[k] = fillSelectTemplate(v, item);
     return out;
 }
+export function contextToken(variables, callType = "webcall") {
+    const vals = {};
+    for (const [k, v] of Object.entries(variables ?? {})) {
+        if (v === null || v === undefined || typeof v === "object")
+            continue;
+        const key = String(k).trim();
+        if (key)
+            vals[key] = typeof v === "string" ? v : String(v);
+    }
+    if (!Object.keys(vals).length)
+        return null;
+    const payload = { ...vals, call_type: callType, recipient_data: { ...vals, call_type: callType } };
+    try {
+        return base64(JSON.stringify(payload));
+    }
+    catch {
+        return null;
+    }
+}
+const B64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+function base64(text) {
+    const bytes = [];
+    for (let i = 0; i < text.length; i++) {
+        let c = text.charCodeAt(i);
+        if (c < 0x80)
+            bytes.push(c);
+        else if (c < 0x800)
+            bytes.push(0xc0 | (c >> 6), 0x80 | (c & 0x3f));
+        else if (c >= 0xd800 && c <= 0xdbff && i + 1 < text.length) {
+            const lo = text.charCodeAt(++i);
+            c = 0x10000 + ((c - 0xd800) << 10) + (lo - 0xdc00);
+            bytes.push(0xf0 | (c >> 18), 0x80 | ((c >> 12) & 0x3f), 0x80 | ((c >> 6) & 0x3f), 0x80 | (c & 0x3f));
+        }
+        else
+            bytes.push(0xe0 | (c >> 12), 0x80 | ((c >> 6) & 0x3f), 0x80 | (c & 0x3f));
+    }
+    let out = "";
+    for (let i = 0; i < bytes.length; i += 3) {
+        const b0 = bytes[i], b1 = bytes[i + 1], b2 = bytes[i + 2];
+        out += B64[b0 >> 2];
+        out += B64[((b0 & 3) << 4) | ((b1 ?? 0) >> 4)];
+        out += b1 === undefined ? "=" : B64[((b1 & 15) << 2) | ((b2 ?? 0) >> 6)];
+        out += b2 === undefined ? "=" : B64[b2 & 63];
+    }
+    return out;
+}
+export function resolveSurface(appearance, prefer) {
+    const mode = String(appearance?.mode ?? "both").toLowerCase();
+    const allowed = mode === "voice" ? ["voice"] : mode === "chat" ? ["chat"] : ["voice", "chat"];
+    const configured = String(appearance?.start ?? "").toLowerCase();
+    const start = prefer && allowed.includes(prefer)
+        ? prefer
+        : configured === "chat" || configured === "voice"
+            ? allowed.includes(configured)
+                ? configured
+                : allowed[0]
+            : allowed[0];
+    return { allowed, start, canSwitch: allowed.length > 1 };
+}

package/dist/react-native/index.d.ts

@@ -7,6 +7,9 @@ export { GraineFab, GraineTouchCapture } from "./fab.js";
 export type { GraineFabProps, GraineTouchCaptureProps } from "./fab.js";
 export { widgetSurface } from "../protocol.js";
 export type { WidgetSurface } from "../protocol.js";
+export { resolveSurface } from "../protocol.js";
+export type { AgentSurface, SurfacePolicy } from "../protocol.js";
+import { type AgentSurface } from "../protocol.js";
 import type { FrictionConfig } from "../friction.js";
 import { type LauncherInset, type LauncherVisibility } from "./navigation.js";
 interface GraineContextValue {
@@ -31,6 +34,10 @@ interface GraineContextValue {
     onEvent: (fn: (e: GraineEvent) => void) => () => void;
     track: (name: string, data?: Record<string, unknown>) => void;
     identify: (user: Record<string, unknown> | null) => void;
+    surface: AgentSurface;
+    surfaces: AgentSurface[];
+    canSwitch: boolean;
+    setSurface: (surface: AgentSurface) => void;
 }
 export type GraineEvent = {
     type: "conversation_started";
@@ -71,6 +78,7 @@ export type GraineEvent = {
 };
 export declare const PENDING_WIDGET_MS = 12000;
 export declare const AWAITING_REPLY_MS = 12000;
+export declare const MIN_LOADER_MS = 450;
 export interface GraineWidget {
     id: string;
     kind: string;
@@ -96,6 +104,8 @@ export interface GraineProviderProps extends Partial<GraineInAppOptions> {
     children: React.ReactNode;
     client?: GraineInAppClient;
     autoConnect?: boolean;
+    surface?: AgentSurface;
+    onSurfaceChange?: (surface: AgentSurface) => void;
     onProactive?: (text: string) => void;
     endOnBackground?: boolean;
     navigationRef?: {
@@ -111,8 +121,14 @@ export interface GraineProviderProps extends Partial<GraineInAppOptions> {
     launcherDelayMs?: number;
     visibility?: LauncherVisibility;
 }
-export declare function GraineProvider({ children, autoConnect, onProactive, endOnBackground, navigationRef, fab, captureTaps, appVersion, friction, includeScreens, launcherDelayMs, visibility, client: providedClient, ...options }: GraineProviderProps): React.JSX.Element;
+export declare function GraineProvider({ children, autoConnect, surface: surfaceProp, onSurfaceChange, onProactive, endOnBackground, navigationRef, fab, captureTaps, appVersion, friction, includeScreens, launcherDelayMs, visibility, client: providedClient, ...options }: GraineProviderProps): React.JSX.Element;
 export declare function useGraineAgent(): GraineContextValue;
+export declare function useGraineSurface(): {
+    surface: AgentSurface;
+    surfaces: AgentSurface[];
+    canSwitch: boolean;
+    setSurface: (surface: AgentSurface) => void;
+};
 export declare function useGraineEvents(handler: (e: GraineEvent) => void): void;
 export declare function useGraineTrack(): (name: string, data?: Record<string, unknown>) => void;
 export declare function useGraineTap<T extends (...args: any[]) => any>(name: string, handler?: T, data?: Record<string, unknown>): (...args: Parameters<T>) => ReturnType<T> | undefined;

package/dist/react-native/index.js

@@ -7,9 +7,12 @@ import { resolveWidgetImages, normaliseWidgetStyle, normaliseSelectAction, selec
 import { GraineFab, GraineTouchCapture } from "./fab.js";
 export { GraineFab, GraineTouchCapture } from "./fab.js";
 export { widgetSurface } from "../protocol.js";
+export { resolveSurface } from "../protocol.js";
+import { resolveSurface } from "../protocol.js";
 import { LauncherVisibilityTracker, activeRouteName, } from "./navigation.js";
 export const PENDING_WIDGET_MS = 12000;
 export const AWAITING_REPLY_MS = 12000;
+export const MIN_LOADER_MS = 450;
 export const Ctx = createContext(null);
 let defaultClient = null;
 export function setDefaultClient(client) {
@@ -23,7 +26,7 @@ export function useGraineClient() {
     }
     return client;
 }
-export function GraineProvider({ children, autoConnect = true, onProactive, endOnBackground = true, navigationRef, fab, captureTaps, appVersion, friction, includeScreens, launcherDelayMs = 0, visibility, client: providedClient, ...options }) {
+export function GraineProvider({ children, autoConnect = true, surface: surfaceProp, onSurfaceChange, onProactive, endOnBackground = true, navigationRef, fab, captureTaps, appVersion, friction, includeScreens, launcherDelayMs = 0, visibility, client: providedClient, ...options }) {
     const clientRef = useRef(null);
     if (!clientRef.current) {
         clientRef.current =
@@ -56,6 +59,28 @@ export function GraineProvider({ children, autoConnect = true, onProactive, endO
     }, []);
     const [appearance, setAppearance] = useState(null);
     const [sessionReady, setSessionReady] = useState(false);
+    const [chosenSurface, setChosenSurface] = useState(null);
+    const surfacePolicy = useMemo(() => resolveSurface(appearance, chosenSurface ?? surfaceProp ?? null), [appearance, chosenSurface, surfaceProp]);
+    const surface = surfacePolicy.start;
+    const surfaceRef = useRef(surface);
+    surfaceRef.current = surface;
+    const surfaceChangeRef = useRef(onSurfaceChange);
+    surfaceChangeRef.current = onSurfaceChange;
+    const setSurface = useCallback((next) => {
+        if (next !== "voice" && next !== "chat")
+            return;
+        setChosenSurface((cur) => (cur === next ? cur : next));
+    }, []);
+    const announcedSurfaceRef = useRef(null);
+    useEffect(() => { client.setSurface(surface); }, [client, surface]);
+    useEffect(() => {
+        if (announcedSurfaceRef.current === surface)
+            return;
+        const first = announcedSurfaceRef.current === null;
+        announcedSurfaceRef.current = surface;
+        if (!first)
+            surfaceChangeRef.current?.(surface);
+    }, [surface]);
     const [currentScreen, setCurrentScreen] = useState(null);
     const [launcherVisible, setLauncherVisible] = useState(false);
     const [launcherInset, setLauncherInset] = useState({ right: 16, bottom: 20 });
@@ -128,6 +153,12 @@ export function GraineProvider({ children, autoConnect = true, onProactive, endO
     openRef.current = open;
     useEffect(() => {
         const offs = [
+            client.on("call_state", (s) => {
+                if (client.isConnected)
+                    return;
+                setConnected(!!s?.connected);
+                setConnecting(!!s?.connecting);
+            }),
             client.on("open", () => {
                 setConnected(true);
                 setConnecting(false);
@@ -205,7 +236,7 @@ export function GraineProvider({ children, autoConnect = true, onProactive, endO
             client.highlight(name, Number(args?.ttl_ms) || 6000);
             return { status: "ok", message: `Highlighted ${name} for the customer.` };
         }));
-        if (autoConnect) {
+        if (autoConnect && !(client.hasVoiceHost && surfaceRef.current !== "chat")) {
             setConnecting(true);
             client.connect().catch((err) => {
                 setConnecting(false);
@@ -218,6 +249,27 @@ export function GraineProvider({ children, autoConnect = true, onProactive, endO
             client.close();
         };
     }, [client, autoConnect]);
+    useEffect(() => {
+        const apply = () => {
+            if (!client.hasVoiceHost)
+                return;
+            if (surface === "chat") {
+                if (client.isConnected)
+                    return;
+                setConnecting(true);
+                client.connect().catch((err) => {
+                    setConnecting(false);
+                    console.error("[Graine]", err?.message ?? err);
+                    setError(err?.message ?? "Could not start the chat.");
+                });
+                return;
+            }
+            client.close();
+            setConnecting(false);
+        };
+        apply();
+        return client.on("voice_host", apply);
+    }, [client, surface]);
     useEffect(() => {
         if (!endOnBackground)
             return;
@@ -272,8 +324,13 @@ export function GraineProvider({ children, autoConnect = true, onProactive, endO
         onEvent,
         track: (name, data) => client.track(name, data),
         identify: (user) => client.identify(user),
+        surface,
+        surfaces: surfacePolicy.allowed,
+        canSwitch: surfacePolicy.canSwitch,
+        setSurface,
     }), [client, connected, connecting, error, open, messages, widgets, muted, agentSpeaking, caption,
-        launcherVisible, launcherInset, currentScreen, onEvent, appearance, sessionReady]);
+        launcherVisible, launcherInset, currentScreen, onEvent, appearance, sessionReady,
+        surface, surfacePolicy, setSurface]);
     const wantsCapture = captureTaps ?? !!fab;
     const body = fab || wantsCapture ? (_jsxs(GraineTouchCapture, { enabled: wantsCapture, children: [children, fab ? _jsx(GraineFab, { ...fab }) : null] })) : children;
     return _jsx(Ctx.Provider, { value: value, children: body });
@@ -287,6 +344,10 @@ function useGraine() {
 export function useGraineAgent() {
     return useGraine();
 }
+export function useGraineSurface() {
+    const { surface, surfaces, canSwitch, setSurface } = useGraine();
+    return { surface, surfaces, canSwitch, setSurface };
+}
 export function useGraineEvents(handler) {
     const { onEvent } = useGraine();
     const ref = useRef(handler);
@@ -406,6 +467,8 @@ export function useGraineWidget() {
     const [answered, setAnswered] = useState(null);
     const [loading, setLoading] = useState(null);
     const loadingTimer = useRef(null);
+    const shownAt = useRef(null);
+    const minTimer = useRef(null);
     const [awaitingReply, setAwaitingReply] = useState(false);
     const [closed, setClosed] = useState(null);
     const awaitingTimer = useRef(null);
@@ -414,6 +477,8 @@ export function useGraineWidget() {
             clearTimeout(loadingTimer.current);
         if (awaitingTimer.current)
             clearTimeout(awaitingTimer.current);
+        if (minTimer.current)
+            clearTimeout(minTimer.current);
     }, []);
     useEffect(() => {
         const done = () => {
@@ -439,6 +504,7 @@ export function useGraineWidget() {
         if (pending)
             setWidget((cur) => (cur && cur.id === pending.id ? cur : pending));
         const offPending = client.on("widget_pending", (hint) => {
+            shownAt.current = Date.now();
             setLoading({ id: String(hint?.widget_id ?? ""), kind: String(hint?.kind ?? "") });
             if (loadingTimer.current)
                 clearTimeout(loadingTimer.current);
@@ -452,10 +518,21 @@ export function useGraineWidget() {
                 clearTimeout(loadingTimer.current);
                 loadingTimer.current = null;
             }
-            setLoading(null);
-            setClosed(null);
-            setWidget(next);
-            setAnswered(null);
+            const show = () => {
+                shownAt.current = null;
+                setLoading(null);
+                setClosed(null);
+                setWidget(next);
+                setAnswered(null);
+            };
+            const seen = shownAt.current === null ? MIN_LOADER_MS : Date.now() - shownAt.current;
+            if (seen >= MIN_LOADER_MS)
+                show();
+            else {
+                if (minTimer.current)
+                    clearTimeout(minTimer.current);
+                minTimer.current = setTimeout(show, MIN_LOADER_MS - seen);
+            }
         });
         return () => { offPending(); offWidget(); };
     }, [client, adopt]);
@@ -490,6 +567,11 @@ export function useGraineWidget() {
         awaitingTimer.current = setTimeout(() => setAwaitingReply(false), AWAITING_REPLY_MS);
     }, [client, widget]);
     const dismiss = useCallback(() => {
+        if (minTimer.current) {
+            clearTimeout(minTimer.current);
+            minTimer.current = null;
+        }
+        shownAt.current = null;
         if (widget) {
             client.reportEvent({
                 name: "component_dismissed",

package/dist/react-native/ui.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ActivityIndicator, Image, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, useColorScheme, View, } from "react-native";
+import { Image, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, useColorScheme, View, } from "react-native";
 import { useGraineAgent } from "./index.js";
+import { GraineLoader } from "./loader.js";
 import { resolveNativeAppearance } from "./appearance.js";
 const DARK = {
     surface: "#17161A",
@@ -22,7 +23,8 @@ const LIGHT = {
     danger: "#D32F2F",
 };
 export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl: avatarProp, bottomInset = 96, hidden = false, captionsOn = false, scheme = "auto", theme: themeProp, }) {
-    const { connected, connecting, error, messages, send, muted, setMuted, caption, agentSpeaking, launcherVisible, launcherInset, appearance, } = useGraineAgent();
+    const { connected, connecting, error, messages, send, muted, setMuted, caption, agentSpeaking, launcherVisible, launcherInset, appearance, surface, canSwitch, setSurface, } = useGraineAgent();
+    const isChat = surface === "chat";
     const dashboard = resolveNativeAppearance(appearance, {
         accent: "#318CE7",
         heading: "Assistant",
@@ -35,22 +37,26 @@ export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl:
         const base = (scheme === "auto" ? deviceScheme === "light" : scheme === "light") ? LIGHT : DARK;
         return makeStyles(themeProp ? { ...base, ...themeProp } : base);
     }, [scheme, deviceScheme, themeProp]);
-    const [expanded, setExpanded] = useState(false);
+    const [expanded, setExpanded] = useState(surface === "chat");
     const [captions, setCaptions] = useState(captionsOn);
     const [draft, setDraft] = useState("");
     const scrollRef = useRef(null);
     const last = messages[messages.length - 1];
+    const waiting = connecting;
+    const waitingMoment = "connecting";
     const status = error
         ? "unavailable"
         : connecting ? "connecting…"
             : muted ? "muted"
-                : agentSpeaking || (last?.role === "agent" && last.live) ? "speaking"
-                    : connected ? "listening"
+                : agentSpeaking || (last?.role === "agent" && last.live) ? (isChat ? "replying" : "speaking")
+                    : connected ? (isChat ? "ready" : "listening")
                         : "offline";
     useEffect(() => {
         if (expanded)
             requestAnimationFrame(() => scrollRef.current?.scrollToEnd({ animated: true }));
     }, [messages, expanded]);
+    useEffect(() => { if (surface === "chat")
+        setExpanded(true); }, [surface]);
     useEffect(() => {
         if (!expanded && last?.role === "agent")
             setExpanded(true);
@@ -71,10 +77,12 @@ export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl:
                 right: launcherInset.right ?? 12,
                 left: launcherInset.left ?? 12,
             },
-        ], children: [expanded && (_jsxs(View, { style: styles.panel, children: [_jsxs(ScrollView, { ref: scrollRef, style: styles.transcript, contentContainerStyle: styles.transcriptInner, showsVerticalScrollIndicator: false, children: [messages.length === 0 && (_jsx(Text, { style: styles.empty, children: "I can see what you're working on \u2014 ask me anything, or I'll step in if you get stuck." })), messages.map((m, i) => (_jsx(View, { style: [
+        ], children: [expanded && (_jsxs(View, { style: styles.panel, children: [_jsxs(ScrollView, { ref: scrollRef, style: styles.transcript, contentContainerStyle: styles.transcriptInner, showsVerticalScrollIndicator: false, children: [messages.length === 0 && (_jsx(Text, { style: styles.empty, children: isChat
+                                    ? "I can see what you\u2019re working on \u2014 type a question, or I\u2019ll step in if you get stuck."
+                                    : "I can see what you\u2019re working on \u2014 ask me anything, or I\u2019ll step in if you get stuck." })), messages.map((m, i) => (_jsx(View, { style: [
                                     styles.bubble,
                                     m.role === "agent" ? styles.agentBubble : [styles.customerBubble, { backgroundColor: accent }],
-                                ], children: _jsx(Text, { style: m.role === "agent" ? styles.agentText : styles.customerText, children: m.text }) }, i)))] }), _jsx(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : undefined, children: _jsxs(View, { style: styles.composer, children: [_jsx(TextInput, { style: styles.input, value: draft, onChangeText: setDraft, placeholder: "Type a message", placeholderTextColor: styles.placeholder.color, onSubmitEditing: submit, returnKeyType: "send", blurOnSubmit: false }), _jsx(Pressable, { onPress: submit, disabled: !draft.trim(), accessibilityLabel: "Send", style: [styles.send, { backgroundColor: accent, opacity: draft.trim() ? 1 : 0.4 }], children: _jsx(Text, { style: styles.sendLabel, children: "\u2191" }) })] }) })] })), captions && caption?.text ? (_jsx(View, { style: styles.captionWrap, children: _jsx(Text, { numberOfLines: 3, style: [styles.caption, caption.live && styles.captionLive], children: caption.text }) })) : null, _jsxs(View, { style: styles.bar, children: [avatarUrl ? (_jsx(Image, { source: { uri: avatarUrl }, style: styles.avatarImage, accessibilityIgnoresInvertColors: true })) : (_jsx(View, { style: [styles.avatar, { backgroundColor: accent }], children: _jsx(Text, { style: styles.avatarGlyph, children: "\u2726" }) })), _jsxs(Pressable, { onPress: () => setExpanded((v) => !v), style: { flex: 1 }, accessibilityLabel: expanded ? "Collapse" : "Expand", children: [_jsx(Text, { style: styles.name, children: name }), _jsx(Text, { style: styles.status, children: status })] }), connecting ? _jsx(ActivityIndicator, { size: "small", color: accent }) : null, _jsx(Pressable, { onPress: () => setCaptions((v) => !v), hitSlop: 8, accessibilityLabel: captions ? "Hide captions" : "Show captions", style: [styles.round, captions && { backgroundColor: accent }], children: _jsx(Text, { style: [styles.glyph, captions && styles.glyphOnAccent], children: "CC" }) }), _jsx(Pressable, { onPress: () => setMuted(!muted), disabled: !connected, hitSlop: 8, accessibilityLabel: muted ? "Unmute" : "Mute", style: [styles.round, muted && styles.muted, !connected && { opacity: 0.4 }], children: _jsx(Text, { style: [styles.glyph, muted && styles.glyphOnAccent], children: muted ? "🔇" : "🎙" }) }), _jsx(Pressable, { onPress: () => setExpanded((v) => !v), hitSlop: 8, accessibilityLabel: expanded ? "Collapse" : "Expand", style: styles.round, children: _jsx(Text, { style: styles.chevron, children: expanded ? "⌄" : "⌃" }) })] })] }));
+                                ], children: _jsx(Text, { style: m.role === "agent" ? styles.agentText : styles.customerText, children: m.text }) }, i)))] }), _jsx(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : undefined, children: _jsxs(View, { style: styles.composer, children: [_jsx(TextInput, { style: styles.input, value: draft, onChangeText: setDraft, placeholder: "Type a message", placeholderTextColor: styles.placeholder.color, onSubmitEditing: submit, returnKeyType: "send", blurOnSubmit: false }), _jsx(Pressable, { onPress: submit, disabled: !draft.trim(), accessibilityLabel: "Send", style: [styles.send, { backgroundColor: accent, opacity: draft.trim() ? 1 : 0.4 }], children: _jsx(Text, { style: styles.sendLabel, children: "\u2191" }) })] }) })] })), captions && !isChat && caption?.text ? (_jsx(View, { style: styles.captionWrap, children: _jsx(Text, { numberOfLines: 3, style: [styles.caption, caption.live && styles.captionLive], children: caption.text }) })) : null, _jsxs(View, { style: styles.bar, children: [avatarUrl ? (_jsx(Image, { source: { uri: avatarUrl }, style: styles.avatarImage, accessibilityIgnoresInvertColors: true })) : (_jsx(View, { style: [styles.avatar, { backgroundColor: accent }], children: _jsx(Text, { style: styles.avatarGlyph, children: "\u2726" }) })), _jsxs(Pressable, { onPress: () => setExpanded((v) => !v), style: { flex: 1 }, accessibilityLabel: expanded ? "Collapse" : "Expand", children: [_jsx(Text, { style: styles.name, children: name }), waiting ? (_jsx(GraineLoader, { moment: waitingMoment, size: 15 })) : (_jsx(Text, { style: styles.status, children: status }))] }), canSwitch ? (_jsx(Pressable, { onPress: () => setSurface(isChat ? "voice" : "chat"), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: isChat ? "Switch to a call" : "Switch to chat", style: styles.round, children: _jsx(Text, { style: styles.glyph, children: isChat ? "📞" : "💬" }) })) : null, waiting ? null : (_jsxs(_Fragment, { children: [isChat ? null : (_jsxs(_Fragment, { children: [_jsx(Pressable, { onPress: () => setCaptions((v) => !v), hitSlop: 8, accessibilityLabel: captions ? "Hide captions" : "Show captions", style: [styles.round, captions && { backgroundColor: accent }], children: _jsx(Text, { style: [styles.glyph, captions && styles.glyphOnAccent], children: "CC" }) }), _jsx(Pressable, { onPress: () => setMuted(!muted), disabled: !connected, hitSlop: 8, accessibilityLabel: muted ? "Unmute" : "Mute", style: [styles.round, muted && styles.muted, !connected && { opacity: 0.4 }], children: _jsx(Text, { style: [styles.glyph, muted && styles.glyphOnAccent], children: muted ? "🔇" : "🎙" }) })] })), _jsx(Pressable, { onPress: () => setExpanded((v) => !v), hitSlop: 8, accessibilityLabel: expanded ? "Collapse" : "Expand", style: styles.round, children: _jsx(Text, { style: styles.chevron, children: expanded ? "⌄" : "⌃" }) })] }))] })] }));
 }
 export const GraineLauncher = GraineAgentBar;
 const makeStyles = (t) => StyleSheet.create({

package/dist/react-native/voice-launcher.d.ts

@@ -54,4 +54,4 @@ export interface GraineVoiceApi {
     clearCaptions: () => void;
 }
 export declare const CAPTION_HISTORY = 12;
-export declare function GraineVoiceLauncher({ webView: WebView, autoStart, active, transport, onTransport, onCaption, onCallState, onMicDenied, onError, timing, onEnded, children, }: GraineVoiceLauncherProps): React.JSX.Element;
+export declare function GraineVoiceLauncher({ webView: WebView, autoStart, active: activeProp, transport, onTransport, onCaption, onCallState, onMicDenied, onError, timing, onEnded, children, }: GraineVoiceLauncherProps): React.JSX.Element;

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

@@ -4,9 +4,14 @@ import { AppState, View } from "react-native";
 import { useGraineAgent } from "./index.js";
 import { requestMicrophonePermission } from "./permissions.js";
 export const CAPTION_HISTORY = 12;
-export function GraineVoiceLauncher({ webView: WebView, autoStart = false, active = true, transport, onTransport, onCaption, onCallState, onMicDenied, onError, timing, onEnded, children, }) {
-    const { client, appearance } = useGraineAgent();
+export function GraineVoiceLauncher({ webView: WebView, autoStart = false, active: activeProp = true, transport, onTransport, onCaption, onCallState, onMicDenied, onError, timing, onEnded, children, }) {
+    const { client, appearance, surface, surfaces } = useGraineAgent();
+    const active = activeProp && surface !== "chat";
     const ref = useRef(null);
+    useEffect(() => {
+        client.setVoiceHost(true);
+        return () => client.setVoiceHost(false);
+    }, [client]);
     const startedRef = useRef(false);
     const activeRef = useRef(active);
     activeRef.current = active;
@@ -216,6 +221,10 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                 }
                 return;
             case "graine:ready":
+                post({
+                    type: "graine:variables",
+                    variables: { ...(client.opts.variables ?? {}), ...client.getIdentity() },
+                });
                 clearTimer(readyTimerRef);
                 clearTimer(retryTimerRef);
                 attemptRef.current = 0;
@@ -236,6 +245,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                     endedNotifiedRef.current = false;
                 setConnected(!!msg.connected);
                 setConnecting(!!msg.connecting);
+                client.emit?.("call_state", { connected: !!msg.connected, connecting: !!msg.connecting });
                 if (!msg.connected && !msg.connecting)
                     startedRef.current = false;
                 onCallState?.({ connected: !!msg.connected, connecting: !!msg.connecting });
@@ -398,7 +408,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         return () => { if (pending)
             clearTimeout(pending); sub.remove(); };
     }, [post]);
-    if (!voiceAgentId)
+    if (!voiceAgentId || !surfaces.includes("voice"))
         return _jsx(_Fragment, { children: children?.(api) });
     const effectiveTransport = transport ?? (appearance?.audioTransport === "rtc" ? "rtc" : "ws");
     const src = `${client.opts.baseUrl.replace(/\/$/, "")}/embed/${voiceAgentId}` +

package/dist/react-native/widget.js

@@ -123,16 +123,19 @@ export function GraineWidget(props) {
     const chosen = answered ? (_jsx(AnsweredLine, { answered: answered, theme: theme, accent: accent, radius: radius, awaiting: awaitingReply, onClear: dismiss })) : null;
     if (!widget && loading) {
         const loader = resolveLoader(appearance?.loader);
-        const pendingSurface = loader.skeleton ? widgetSurface(loading.kind) : "card";
-        const bone = (w, h, extra = {}) => (_jsx(View, { style: { width: w, height: h, borderRadius: 8, backgroundColor: tint(theme.border, 0.6), ...extra } }));
-        const bones = (_jsxs(View, { style: { gap: 10 }, accessibilityLabel: loader.text.component, children: [[0, 1, 2].map((i) => (_jsxs(View, { style: { borderRadius: Math.max(10, radius - 6), borderWidth: 1, borderColor: theme.border, padding: 10, flexDirection: "row", gap: 10, alignItems: "center" }, children: [bone(72, 72), _jsxs(View, { style: { flex: 1, gap: 8 }, children: [bone("70%", 12), bone("40%", 12), bone("55%", 10)] })] }, i))), _jsx(View, { style: { alignItems: "center", paddingTop: 6 }, children: _jsx(GraineLoader, { moment: "component" }) })] }));
+        const kindSurface = widgetSurface(loading.kind);
+        const pendingSurface = kindSurface;
+        const big = pendingSurface === "screen" ? 34 : pendingSurface === "sheet" ? 26 : undefined;
+        const mark = (_jsx(View, { style: { alignItems: "center", gap: 10 }, children: _jsx(GraineLoader, { moment: "component", size: big, stacked: true }) }));
+        const bone = (w, h) => (_jsx(View, { style: { width: w, height: h, borderRadius: 8, backgroundColor: tint(theme.border, 0.6) } }));
+        const bones = (rows) => (_jsx(View, { style: { gap: 10, opacity: 0.55 }, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: Array.from({ length: rows }, (_, i) => (_jsxs(View, { style: { borderRadius: Math.max(10, radius - 6), borderWidth: 1, borderColor: theme.border, padding: 10, flexDirection: "row", gap: 10, alignItems: "center" }, children: [bone(72, 72), _jsxs(View, { style: { flex: 1, gap: 8 }, children: [bone("70%", 12), bone("40%", 12), bone("55%", 10)] })] }, i))) }));
         if (pendingSurface === "screen") {
-            return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: "fade", onRequestClose: dismiss, transparent: true, presentationStyle: "overFullScreen", statusBarTranslucent: true, children: _jsx(View, { style: { flex: 1, backgroundColor: theme.surface, paddingTop: 64, paddingHorizontal: 18 }, children: bones }) })] }));
+            return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: "fade", onRequestClose: dismiss, transparent: true, presentationStyle: "overFullScreen", statusBarTranslucent: true, children: _jsxs(View, { style: { flex: 1, backgroundColor: theme.surface, paddingTop: 56, paddingHorizontal: 18 }, children: [_jsx(Pressable, { onPress: dismiss, accessibilityRole: "button", accessibilityLabel: "Close and keep talking", hitSlop: 10, style: { width: 44, height: 44, borderRadius: 999, alignItems: "center", justifyContent: "center", backgroundColor: tint(theme.border, 0.4) }, children: _jsx(Text, { style: { color: theme.text, fontSize: 20, fontWeight: "600" }, children: "\u00D7" }) }), _jsx(View, { style: { flex: 1, justifyContent: "center", paddingBottom: loader.skeleton ? 24 : 72 }, children: mark }), loader.skeleton ? bones(3) : null] }) })] }));
         }
         if (pendingSurface === "sheet") {
-            return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: "fade", transparent: true, presentationStyle: "overFullScreen", statusBarTranslucent: true, onRequestClose: dismiss, children: _jsx(View, { style: { flex: 1, backgroundColor: "rgba(0,0,0,0.45)", justifyContent: "flex-end" }, children: _jsx(View, { style: { backgroundColor: theme.surface, borderTopLeftRadius: Math.max(20, radius), borderTopRightRadius: Math.max(20, radius), padding: 18, paddingBottom: 28 }, children: bones }) }) })] }));
+            return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: "fade", transparent: true, presentationStyle: "overFullScreen", statusBarTranslucent: true, onRequestClose: dismiss, children: _jsxs(View, { style: { flex: 1, backgroundColor: "rgba(0,0,0,0.45)", justifyContent: "flex-end" }, children: [_jsx(Pressable, { onPress: dismiss, accessibilityRole: "button", accessibilityLabel: "Close", style: { flex: 1 } }), _jsxs(View, { style: { backgroundColor: theme.surface, borderTopLeftRadius: Math.max(20, radius), borderTopRightRadius: Math.max(20, radius), paddingHorizontal: 18, paddingTop: 10, paddingBottom: 28, gap: 18 }, children: [_jsx(View, { style: { alignItems: "center" }, children: _jsx(View, { style: { width: grammar.grabber.width, height: grammar.grabber.height, borderRadius: 999, backgroundColor: theme.border } }) }), _jsx(View, { style: { paddingVertical: loader.skeleton ? 10 : 34 }, children: mark }), loader.skeleton ? bones(2) : null] })] }) })] }));
         }
-        return (_jsxs(_Fragment, { children: [chosen, _jsx(View, { style: { backgroundColor: theme.surface, borderRadius: radius, borderWidth: 1, borderColor: theme.border, paddingHorizontal: 14, paddingVertical: 12, marginBottom: 8 }, children: _jsx(GraineLoader, { moment: "component" }) })] }));
+        return (_jsxs(_Fragment, { children: [chosen, _jsx(View, { style: { backgroundColor: theme.surface, borderRadius: radius, borderWidth: 1, borderColor: theme.border, paddingHorizontal: 14, paddingVertical: 14, marginBottom: 8, alignItems: "center" }, children: _jsx(GraineLoader, { moment: "component" }) })] }));
     }
     if (!widget)
         return chosen;

package/package.json

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