@graineai/inapp-react-native 0.33.6 → 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,6 +6,9 @@ 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";
@@ -18,7 +21,7 @@ export { FrictionDetector, resolveFriction, rulesFor, DEFAULT_FRICTION, type Fri
 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,6 +3,8 @@ 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, AWAITING_REPLY_MS, MIN_LOADER_MS } from "./react-native/index.js";
@@ -11,7 +13,7 @@ export { FrictionDetector, resolveFriction, rulesFor, DEFAULT_FRICTION, } from "
 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

@@ -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";
@@ -97,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?: {
@@ -112,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,6 +7,8 @@ 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;
@@ -24,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 =
@@ -57,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 });
@@ -212,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);
@@ -225,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;
@@ -279,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 });
@@ -294,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);

package/dist/react-native/ui.js

@@ -23,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",
@@ -36,7 +37,7 @@ 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);
@@ -47,13 +48,15 @@ export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl:
         ? "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);
@@ -74,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 }), waiting ? (_jsx(GraineLoader, { moment: waitingMoment, size: 15 })) : (_jsx(Text, { style: styles.status, children: status }))] }), waiting ? 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 ? "⌄" : "⌃" }) })] }))] })] }));
+                                ], 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;
@@ -399,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/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@graineai/inapp-react-native",
-  "version": "0.33.6",
+  "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",