@graineai/inapp-react-native 0.4.0 → 0.7.1

package/dist/client.d.ts

@@ -37,6 +37,8 @@ export declare class GraineInAppClient {
     private bargedIn;
     private muted;
     private playoutClock;
+    private identity;
+    private recentEvents;
     constructor(opts: GraineInAppOptions);
     on(event: string, fn: Listener): () => void;
     private emit;
@@ -51,9 +53,11 @@ export declare class GraineInAppClient {
     get availableActions(): string[];
     setScreen(context: ScreenContext | null): void;
     reportEvent(event: AppEvent): void;
+    track(name: string, data?: Record<string, unknown>): void;
     private scheduleScreen;
     private flushScreen;
     private armStall;
+    identify(user: Record<string, unknown> | null): void;
     noteInteraction(): void;
     say(text: string): boolean;
     sendAudio(base64: string, sampleRate?: number): boolean;

package/dist/client.js

@@ -21,6 +21,8 @@ export class GraineInAppClient {
         this.bargedIn = false;
         this.muted = false;
         this.playoutClock = null;
+        this.identity = {};
+        this.recentEvents = [];
         if (!opts?.publishableKey)
             throw new Error("[Graine] publishableKey is required.");
         if (!opts?.baseUrl)
@@ -126,7 +128,11 @@ export class GraineInAppClient {
             event: "start",
             meta_data: {
                 client: "graine-inapp-sdk",
-                context_data: { ...(this.config.variables ?? {}), ...(this.opts.variables ?? {}) },
+                context_data: {
+                    ...(this.config.variables ?? {}),
+                    ...(this.opts.variables ?? {}),
+                    ...this.identity,
+                },
             },
         });
         this.pingTimer = setInterval(() => this.send({ type: "ping" }), PING_MS);
@@ -263,6 +269,15 @@ export class GraineInAppClient {
     reportEvent(event) {
         this.send({ type: "app_event", event });
     }
+    track(name, data) {
+        if (!name)
+            return;
+        this.recentEvents.push({ name, at: Date.now(), ...(data ? { data } : {}) });
+        if (this.recentEvents.length > 10)
+            this.recentEvents.shift();
+        if (this.screen)
+            this.scheduleScreen();
+    }
     scheduleScreen() {
         if (this.contextTimer) {
             this.pendingScreen = true;
@@ -284,7 +299,12 @@ export class GraineInAppClient {
         const { availableActions, ...rest } = this.screen;
         return this.send({
             type: "app_context",
-            context: maskDeep({ ...rest, idle_ms: Date.now() - this.screenSince }),
+            context: maskDeep({
+                ...rest,
+                idle_ms: Date.now() - this.screenSince,
+                ...(Object.keys(this.identity).length ? { user: this.identity } : {}),
+                ...(this.recentEvents.length ? { recent_events: this.recentEvents } : {}),
+            }),
             available_actions: (availableActions ?? this.availableActions).filter((a) => this.actions.has(a)),
             seq: ++this.screenSeq,
         });
@@ -310,6 +330,21 @@ export class GraineInAppClient {
             });
         }, after);
     }
+    identify(user) {
+        if (!user) {
+            this.identity = {};
+            return;
+        }
+        const flat = {};
+        for (const [k, v] of Object.entries(user)) {
+            if (v === undefined || v === null)
+                continue;
+            flat[k] = typeof v === "string" ? v : JSON.stringify(v);
+        }
+        this.identity = maskDeep(flat);
+        if (this.screen)
+            this.scheduleScreen();
+    }
     noteInteraction() {
         this.screenSince = Date.now();
         this.armStall();

package/dist/index.d.ts

@@ -3,5 +3,6 @@ export { GraineInAppClient, type GraineInAppOptions, type SessionConfig } from "
 export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RATE, type AudioAdapter, type VoiceSessionOptions, } from "./voice";
 export { EchoGuard, decodeAgentAudio, decodeMuLaw, decodePcm16, base64ToBytes, type AudioFormat, type DecodedAudio, } from "./audio";
 export { addMaskRule, maskDeep, maskString } from "./mask";
-export { GraineProvider, useGraineAgent, useGraineScreen, useGraineAction, useGraineVoice, type GraineProviderProps, type Turn, type Caption, } from "./react-native/index";
+export { GraineProvider, useGraineAgent, useGraineScreen, useGraineAction, useGraineVoice, useGraineIdentify, useGraineEvents, useGraineTrack, type GraineEvent, type GraineProviderProps, type Turn, type Caption, } from "./react-native/index";
 export { GraineAgentBar, GraineLauncher, type GraineAgentBarProps, type GraineLauncherProps } from "./react-native/ui";
+export { LauncherVisibilityTracker, activeRouteName, type LauncherInset, type LauncherContinuity, type LauncherDelayPolicy, type LauncherGroup, type LauncherVisibility, type VisibilityDecision, } from "./react-native/navigation";

package/dist/index.js

@@ -2,5 +2,6 @@ export { GraineInAppClient } from "./client";
 export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RATE, } from "./voice";
 export { EchoGuard, decodeAgentAudio, decodeMuLaw, decodePcm16, base64ToBytes, } from "./audio";
 export { addMaskRule, maskDeep, maskString } from "./mask";
-export { GraineProvider, useGraineAgent, useGraineScreen, useGraineAction, useGraineVoice, } from "./react-native/index";
+export { GraineProvider, useGraineAgent, useGraineScreen, useGraineAction, useGraineVoice, useGraineIdentify, useGraineEvents, useGraineTrack, } from "./react-native/index";
 export { GraineAgentBar, GraineLauncher } from "./react-native/ui";
+export { LauncherVisibilityTracker, activeRouteName, } from "./react-native/navigation";

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

@@ -2,6 +2,7 @@ import React from "react";
 import { GraineInAppClient, type GraineInAppOptions } from "../client";
 import { type AudioAdapter, type VoiceSessionOptions } from "../voice";
 import type { ActionHandler, ScreenContext } from "../protocol";
+import { type LauncherInset, type LauncherVisibility } from "./navigation";
 interface GraineContextValue {
     client: GraineInAppClient;
     connected: boolean;
@@ -16,7 +17,38 @@ interface GraineContextValue {
     setMuted: (muted: boolean) => void;
     agentSpeaking: boolean;
     caption: Caption | null;
+    launcherVisible: boolean;
+    launcherInset: LauncherInset;
+    currentScreen: string | null;
+    onEvent: (fn: (e: GraineEvent) => void) => () => void;
+    track: (name: string, data?: Record<string, unknown>) => void;
+    identify: (user: Record<string, unknown> | null) => void;
 }
+export type GraineEvent = {
+    type: "conversation_started";
+} | {
+    type: "conversation_ended";
+    reason: string;
+} | {
+    type: "agent_speaking";
+    speaking: boolean;
+} | {
+    type: "agent_volunteered";
+    text: string;
+} | {
+    type: "action_requested";
+    name: string;
+} | {
+    type: "action_completed";
+    name: string;
+    status: string;
+} | {
+    type: "muted";
+    muted: boolean;
+} | {
+    type: "error";
+    message: string;
+};
 export interface Caption {
     role: "agent" | "customer";
     text: string;
@@ -31,9 +63,18 @@ export interface GraineProviderProps extends GraineInAppOptions {
     children: React.ReactNode;
     autoConnect?: boolean;
     onProactive?: (text: string) => void;
+    navigationRef?: {
+        current: any;
+    } | null;
+    includeScreens?: string[];
+    launcherDelayMs?: number;
+    visibility?: LauncherVisibility;
 }
-export declare function GraineProvider({ children, autoConnect, onProactive, ...options }: GraineProviderProps): React.JSX.Element;
+export declare function GraineProvider({ children, autoConnect, onProactive, navigationRef, includeScreens, launcherDelayMs, visibility, ...options }: GraineProviderProps): React.JSX.Element;
 export declare function useGraineAgent(): GraineContextValue;
+export declare function useGraineEvents(handler: (e: GraineEvent) => void): void;
+export declare function useGraineTrack(): (name: string, data?: Record<string, unknown>) => void;
+export declare function useGraineIdentify(): (user: Record<string, unknown> | null) => void;
 export declare function useGraineVoice(adapter: AudioAdapter | null, options?: VoiceSessionOptions): {
     listening: boolean;
     agentSpeaking: boolean;

package/dist/react-native/index.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { GraineInAppClient } from "../client";
 import { VoiceSession } from "../voice";
+import { LauncherVisibilityTracker, activeRouteName, } from "./navigation";
 const Ctx = createContext(null);
-export function GraineProvider({ children, autoConnect = true, onProactive, ...options }) {
+export function GraineProvider({ children, autoConnect = true, onProactive, navigationRef, includeScreens, launcherDelayMs = 0, visibility, ...options }) {
     const clientRef = useRef(null);
     if (!clientRef.current)
         clientRef.current = new GraineInAppClient(options);
@@ -19,6 +20,81 @@ export function GraineProvider({ children, autoConnect = true, onProactive, ...o
     const [caption, setCaption] = useState(null);
     const proactiveRef = useRef(onProactive);
     proactiveRef.current = onProactive;
+    const listenersRef = useRef(new Set());
+    const emitEvent = useCallback((e) => {
+        listenersRef.current.forEach((fn) => {
+            try {
+                fn(e);
+            }
+            catch { }
+        });
+    }, []);
+    const onEvent = useCallback((fn) => {
+        listenersRef.current.add(fn);
+        return () => { listenersRef.current.delete(fn); };
+    }, []);
+    const [currentScreen, setCurrentScreen] = useState(null);
+    const [launcherVisible, setLauncherVisible] = useState(false);
+    const [launcherInset, setLauncherInset] = useState({ right: 16, bottom: 20 });
+    const trackerRef = useRef(null);
+    if (!trackerRef.current) {
+        trackerRef.current = new LauncherVisibilityTracker(includeScreens, visibility, launcherDelayMs);
+    }
+    const showTimerRef = useRef(null);
+    useEffect(() => {
+        const nav = navigationRef?.current;
+        if (!nav || typeof nav.addListener !== "function")
+            return;
+        const apply = () => {
+            let route = null;
+            try {
+                route = activeRouteName(nav.getRootState?.());
+            }
+            catch {
+                route = null;
+            }
+            if (!route)
+                return;
+            setCurrentScreen(route);
+            try {
+                client.setScreen({ screen: route, title: route });
+            }
+            catch { }
+            const decision = trackerRef.current.onRoute(route);
+            setLauncherInset(decision.inset);
+            if (showTimerRef.current) {
+                clearTimeout(showTimerRef.current);
+                showTimerRef.current = null;
+            }
+            if (!decision.eligible) {
+                setLauncherVisible(false);
+                return;
+            }
+            if (decision.delayMs <= 0) {
+                setLauncherVisible(true);
+                return;
+            }
+            setLauncherVisible(false);
+            showTimerRef.current = setTimeout(() => {
+                showTimerRef.current = null;
+                setLauncherVisible(true);
+            }, decision.delayMs);
+        };
+        apply();
+        const off = nav.addListener("state", apply);
+        return () => {
+            if (showTimerRef.current)
+                clearTimeout(showTimerRef.current);
+            if (typeof off === "function")
+                off();
+            else if (typeof nav.removeListener === "function")
+                nav.removeListener("state", apply);
+        };
+    }, [navigationRef, client]);
+    useEffect(() => {
+        if (!navigationRef?.current)
+            setLauncherVisible(true);
+    }, [navigationRef]);
     const openRef = useRef(open);
     openRef.current = open;
     useEffect(() => {
@@ -27,8 +103,12 @@ export function GraineProvider({ children, autoConnect = true, onProactive, ...o
                 setConnected(true);
                 setConnecting(false);
                 setError(null);
+                emitEvent({ type: "conversation_started" });
+            }),
+            client.on("close", (info) => {
+                setConnected(false);
+                emitEvent({ type: "conversation_ended", reason: info?.reason || String(info?.code ?? "closed") });
             }),
-            client.on("close", () => setConnected(false)),
             client.on("chunk", (text) => setMessages((prev) => {
                 const last = prev[prev.length - 1];
                 if (last?.role === "agent" && last.live) {
@@ -36,18 +116,24 @@ export function GraineProvider({ children, autoConnect = true, onProactive, ...o
                 }
                 if (prev[prev.length - 1]?.role !== "customer") {
                     proactiveRef.current?.(text);
+                    emitEvent({ type: "agent_volunteered", text });
                     if (!openRef.current)
                         setOpen(true);
                 }
                 return [...prev, { role: "agent", text, live: true }];
             })),
             client.on("widget", (widget) => setWidgets((prev) => [...prev, widget])),
-            client.on("muted", (m) => setMutedState(m)),
+            client.on("muted", (m) => {
+                setMutedState(m);
+                emitEvent({ type: "muted", muted: m });
+            }),
             client.on("agent_speaking", (speaking) => {
                 setAgentSpeaking(speaking);
                 if (speaking)
                     setCaption(null);
+                emitEvent({ type: "agent_speaking", speaking });
             }),
+            client.on("action", (req) => emitEvent({ type: "action_requested", name: req?.name ?? "" })),
             client.on("transcript", ({ text, final }) => {
                 if (text)
                     setCaption({ role: "customer", text, live: !final });
@@ -92,7 +178,14 @@ export function GraineProvider({ children, autoConnect = true, onProactive, ...o
             client.noteInteraction();
             client.say(text);
         },
-    }), [client, connected, connecting, error, open, messages, widgets, muted, agentSpeaking, caption]);
+        launcherVisible,
+        launcherInset,
+        currentScreen,
+        onEvent,
+        track: (name, data) => client.track(name, data),
+        identify: (user) => client.identify(user),
+    }), [client, connected, connecting, error, open, messages, widgets, muted, agentSpeaking, caption,
+        launcherVisible, launcherInset, currentScreen, onEvent]);
     return _jsx(Ctx.Provider, { value: value, children: children });
 }
 function useGraine() {
@@ -104,6 +197,20 @@ function useGraine() {
 export function useGraineAgent() {
     return useGraine();
 }
+export function useGraineEvents(handler) {
+    const { onEvent } = useGraine();
+    const ref = useRef(handler);
+    ref.current = handler;
+    useEffect(() => onEvent((e) => ref.current(e)), [onEvent]);
+}
+export function useGraineTrack() {
+    const { track } = useGraine();
+    return track;
+}
+export function useGraineIdentify() {
+    const { client } = useGraine();
+    return useCallback((user) => client.identify(user), [client]);
+}
 export function useGraineVoice(adapter, options = {}) {
     const { client } = useGraine();
     const [listening, setListening] = useState(false);

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

@@ -0,0 +1,44 @@
+export interface LauncherInset {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+export type LauncherContinuity = "continuous" | "perScreen";
+export type LauncherDelayPolicy = "perScreen" | "oncePerGroupEntry" | "oncePerAppSession";
+export interface LauncherGroup {
+    id: string;
+    screens: string[];
+    continuity: LauncherContinuity;
+    inset?: LauncherInset;
+    delayMs?: number;
+    delayPolicy?: LauncherDelayPolicy;
+}
+export interface LauncherVisibility {
+    defaultDelayMs?: number;
+    defaultInset?: LauncherInset;
+    groups?: LauncherGroup[];
+}
+export interface VisibilityDecision {
+    eligible: boolean;
+    delayMs: number;
+    inset: LauncherInset;
+    groupId: string | null;
+    continuous: boolean;
+}
+export declare class LauncherVisibilityTracker {
+    private includeScreens;
+    private visibility;
+    private defaultDelayMs;
+    private enteredGroups;
+    private sessionDelayedGroups;
+    private lastGroupId;
+    private lastRoute;
+    constructor(includeScreens: string[] | undefined, visibility: LauncherVisibility | undefined, defaultDelayMs?: number);
+    reset(): void;
+    private groupFor;
+    private isEligible;
+    onRoute(route: string): VisibilityDecision;
+}
+export declare function activeRouteName(state: any): string | null;
+export declare function routeParams(state: any): Record<string, unknown> | undefined;

package/dist/react-native/navigation.js

@@ -0,0 +1,98 @@
+const DEFAULT_INSET = { right: 16, bottom: 20 };
+export class LauncherVisibilityTracker {
+    constructor(includeScreens, visibility, defaultDelayMs = 0) {
+        this.includeScreens = includeScreens;
+        this.visibility = visibility;
+        this.defaultDelayMs = defaultDelayMs;
+        this.enteredGroups = new Set();
+        this.sessionDelayedGroups = new Set();
+        this.lastGroupId = null;
+        this.lastRoute = null;
+    }
+    reset() {
+        this.enteredGroups.clear();
+        this.sessionDelayedGroups.clear();
+        this.lastGroupId = null;
+        this.lastRoute = null;
+    }
+    groupFor(route) {
+        for (const g of this.visibility?.groups || []) {
+            if (g.screens.includes(route))
+                return g;
+        }
+        return null;
+    }
+    isEligible(route) {
+        const groups = this.visibility?.groups || [];
+        const hasAllowlist = Array.isArray(this.includeScreens) && this.includeScreens.length > 0;
+        if (!hasAllowlist && groups.length === 0)
+            return true;
+        if (hasAllowlist && this.includeScreens.includes(route))
+            return true;
+        return groups.some((g) => g.screens.includes(route));
+    }
+    onRoute(route) {
+        const eligible = this.isEligible(route);
+        const group = this.groupFor(route);
+        const inset = group?.inset || this.visibility?.defaultInset || DEFAULT_INSET;
+        if (!eligible) {
+            this.lastGroupId = null;
+            this.lastRoute = route;
+            return { eligible: false, delayMs: 0, inset, groupId: group?.id ?? null, continuous: false };
+        }
+        const configuredDelay = group?.delayMs ?? this.visibility?.defaultDelayMs ?? this.defaultDelayMs;
+        const policy = group?.delayPolicy ?? "perScreen";
+        const continuity = group?.continuity ?? "perScreen";
+        const stayingInGroup = group != null && this.lastGroupId === group.id;
+        const movedScreen = this.lastRoute !== route;
+        const continuous = continuity === "continuous" && stayingInGroup && movedScreen;
+        let delayMs = configuredDelay;
+        if (continuous) {
+            delayMs = 0;
+        }
+        else if (group) {
+            if (policy === "oncePerGroupEntry" && stayingInGroup) {
+                delayMs = 0;
+            }
+            else if (policy === "oncePerAppSession") {
+                delayMs = this.sessionDelayedGroups.has(group.id) ? 0 : configuredDelay;
+                this.sessionDelayedGroups.add(group.id);
+            }
+            if (!stayingInGroup)
+                this.enteredGroups.add(group.id);
+        }
+        this.lastGroupId = group?.id ?? null;
+        this.lastRoute = route;
+        return { eligible: true, delayMs, inset, groupId: group?.id ?? null, continuous };
+    }
+}
+export function activeRouteName(state) {
+    if (!state || !Array.isArray(state.routes) || typeof state.index !== "number")
+        return null;
+    let route = state.routes[state.index];
+    while (route?.state) {
+        const child = route.state;
+        if (!Array.isArray(child.routes))
+            break;
+        const idx = typeof child.index === "number" ? child.index : child.routes.length - 1;
+        const next = child.routes[idx];
+        if (!next)
+            break;
+        route = next;
+    }
+    return route?.name ?? null;
+}
+export function routeParams(state) {
+    if (!state || !Array.isArray(state.routes) || typeof state.index !== "number")
+        return undefined;
+    let route = state.routes[state.index];
+    while (route?.state?.routes) {
+        const child = route.state;
+        const idx = typeof child.index === "number" ? child.index : child.routes.length - 1;
+        const next = child.routes[idx];
+        if (!next)
+            break;
+        route = next;
+    }
+    return route?.params && typeof route.params === "object" ? route.params : undefined;
+}

package/dist/react-native/ui.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { ActivityIndicator, Image, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from "react-native";
 import { useGraineAgent } from "./index";
 export function GraineAgentBar({ accent = "#318CE7", name = "Assistant", avatarUrl, bottomInset = 96, hidden = false, captionsOn = false, }) {
-    const { connected, connecting, error, messages, send, muted, setMuted, caption, agentSpeaking } = useGraineAgent();
+    const { connected, connecting, error, messages, send, muted, setMuted, caption, agentSpeaking, launcherVisible, launcherInset, } = useGraineAgent();
     const [expanded, setExpanded] = useState(false);
     const [captions, setCaptions] = useState(captionsOn);
     const [draft, setDraft] = useState("");
@@ -31,9 +31,16 @@ export function GraineAgentBar({ accent = "#318CE7", name = "Assistant", avatarU
         setDraft("");
         send(text);
     }, [draft, send]);
-    if (hidden || error)
+    if (hidden || error || !launcherVisible)
         return null;
-    return (_jsxs(View, { pointerEvents: "box-none", style: [styles.root, { bottom: bottomInset }], 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: [
+    return (_jsxs(View, { pointerEvents: "box-none", style: [
+            styles.root,
+            {
+                bottom: launcherInset.bottom ?? bottomInset,
+                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: [
                                     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: "#8a8f98", 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 && { color: "#fff" }], 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 && { color: "#fff" }], 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 ? "⌄" : "⌃" }) })] })] }));

package/dist/voice.d.ts

@@ -22,9 +22,11 @@ export declare class VoiceSession {
     private format;
     private echo;
     private agentAudible;
+    private lastAudioAt;
     constructor(client: GraineInAppClient, adapter: AudioAdapter, options?: VoiceSessionOptions);
     get active(): boolean;
     start(): Promise<void>;
+    private agentIsAudible;
     stop(): Promise<void>;
 }
 export declare function liveAudioStreamAdapter(LiveAudioStream: any, sink: Pick<AudioAdapter, "play" | "clear">): AudioAdapter;

package/dist/voice.js

@@ -14,6 +14,7 @@ export class VoiceSession {
         this.format = null;
         this.echo = new EchoGuard();
         this.agentAudible = false;
+        this.lastAudioAt = 0;
     }
     get active() {
         return this.capturing;
@@ -29,6 +30,7 @@ export class VoiceSession {
                     return;
                 if (decoded.latch)
                     this.format = decoded.latch;
+                this.lastAudioAt = Date.now();
                 this.adapter.play(decoded.pcm16, decoded.sampleRate);
             }),
             this.client.on("clear", () => {
@@ -51,19 +53,24 @@ export class VoiceSession {
         await this.adapter.startCapture((base64) => {
             const pcm = base64ToPcm16(base64);
             const frameMs = (pcm.length / CAPTURE_SAMPLE_RATE) * 1000;
-            const buffered = this.adapter.bufferedSeconds?.();
-            const audible = buffered !== undefined ? buffered > 0.02 || this.agentAudible : this.agentAudible;
-            for (const frame of this.echo.filter(base64, pcm, audible, frameMs)) {
+            for (const frame of this.echo.filter(base64, pcm, this.agentIsAudible(), frameMs)) {
                 this.client.sendAudio(frame, CAPTURE_SAMPLE_RATE);
             }
         });
     }
+    agentIsAudible() {
+        if (Date.now() - this.lastAudioAt > 1500)
+            return false;
+        const buffered = this.adapter.bufferedSeconds?.();
+        return buffered !== undefined ? buffered > 0.02 || this.agentAudible : this.agentAudible;
+    }
     async stop() {
         if (!this.capturing)
             return;
         this.capturing = false;
         this.format = null;
         this.agentAudible = false;
+        this.lastAudioAt = 0;
         this.echo.reset();
         this.offs.forEach((off) => off());
         this.offs = [];

package/package.json

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