@graineai/inapp-react-native 0.11.0 → 0.12.0

package/INTEGRATION.md

@@ -18,6 +18,24 @@ Package: `@graineai/inapp-react-native`
 | Peer install | `react-native-webview` — autolinks, no setup code |
 | From Graine | your **publishable key**, from Agent → Embed & Widgets |
 
+### Two dashboard steps first
+
+Each takes a minute and each, skipped, produces a failure that looks like
+something else.
+
+**1. Give the app its own agent.** Clone the website agent rather than pointing
+the app at it. Actions are declared per agent and every surface that agent serves
+is offered all of them, so a shared agent hands your website tools that only
+exist inside the app — and picks worse for having them. The clone carries the
+prompt, knowledge base and voice across; change only what differs.
+
+**2. Add `app://` to that agent's Allowed domains** (Agent → Embed & Widgets →
+Install & domains). A native app has no `Origin` header, and there is no header a
+client could send that we would trust instead — so `app://` is how you say "this
+agent may also be reached from an app". Without it the connection is refused with
+`no_origin` and **the launcher never renders**, which reads exactly like a bad
+key. An empty allowlist refuses everything for the same reason.
+
 **There is no native setup.** No `MainApplication.kt` edit, no `AppDelegate.swift`
 edit, no ProGuard rules, no babel plugin ordering. The microphone and speaker run
 inside a WebView pointed at your hosted agent page, so every fix to the audio
@@ -140,9 +158,33 @@ screen; when it fires it names the field that is `invalid` or `empty`, so the
 agent opens with "the PAN isn't being accepted" rather than "need a hand?".
 Without `status` it can only manage the second one.
 
+| `status` | Means | What the agent does |
+|---|---|---|
+| `empty` | Nothing entered | Offers to fill it |
+| `filled` | Has a value | Leaves it alone |
+| `invalid` | Rejected — pair with `error` | Names the problem, offers the fix |
+| `pending` | In flight | Waits instead of claiming either outcome |
+| `locked` | Not changeable from here | Routes elsewhere rather than offering to type |
+
+`locked` is the one worth remembering. An OS permission the customer must grant
+in system settings is not `empty` — nobody can fill it on this screen. Marked
+`empty`, the agent offers to do it and fails; marked `locked`, it says where to go.
+
 Report the real value. Masking happens on the way out and again on arrival — a
 screen that pre-redacts just blinds the agent.
 
+**Name every screen.** The route the SDK reports is an identifier, not a name.
+Ship `kyc_documents` and the agent reads your routing table to your customers.
+Keep a `Record<ScreenName, string>` of the words actually printed on each screen,
+typed over your route union so the screen somebody adds next year fails the build
+instead of reaching a customer as a slug.
+
+**Where the hook goes.** Below every piece of state it reads — the object is
+built during render, so a `const` declared under it is in its temporal dead zone
+and throws — and above every early return, or the hook order changes between
+renders. Action handlers have neither constraint: their bodies only run when the
+agent calls them.
+
 ---
 
 ## Step 4 — Let it act
@@ -276,8 +318,111 @@ part. Everything else is unchanged.
 
 ---
 
+## Making the bar yours
+
+Three levels, and most apps stop at the first.
+
+**1. The dashboard.** Accent, title and logo come from Appearance on the agent
+and reach every surface without an app release. Set the colour in Graine and it
+changes here. This is the level a brand team should be working at.
+
+**2. Props, when the dashboard cannot express it.** Any prop passed wins over
+the dashboard, so an app that needs something per-build still can.
+
+```tsx
+<GraineAgentBar
+  scheme="auto"            // "dark" | "light" | "auto" (default) — follows the device
+  accent="#318CE7"         // overrides the dashboard
+  name="Ring"
+  bottomInset={110}        // clear of your tab bar
+  captionsOn
+/>
+```
+
+`scheme` defaults to `auto` rather than dark: an agent that ignores the system
+setting is the one piece of the screen that looks like it came from somewhere
+else. Pin it only if your app pins its own.
+
+**3. The palette, when your brand is not one of the two.** `theme` is merged
+over the scheme's colours, so pass the one you care about:
+
+```tsx
+import type { GraineBarTheme } from "@graineai/inapp-react-native";
+
+<GraineAgentBar theme={{ surface: "#0E1116", border: "#232A33" }} />
+```
+
+| Key | Where it lands |
+|---|---|
+| `surface` | The bar, the expanded panel, the caption bubble |
+| `border` | Hairline around all three |
+| `text` | The agent's name, its replies, what the customer types |
+| `sub` | Status line, placeholder, empty state |
+| `chip` | Quiet round buttons, and the agent's message bubbles |
+| `onAccent` | Text and glyphs sitting on the accent, and on `danger` |
+| `danger` | Muted — the one state worth its own colour |
+
+**4. Or draw your own.** Everything the bar does is built on the public hooks,
+so an app with a design system should ignore the component entirely:
+
+```tsx
+const { connected, muted, setMuted, messages, send, caption } = useGraineAgent();
+```
+
+That is the expected path for anyone with a brand team, and nothing else in the
+SDK depends on this component.
+
+---
+
+## Session lifecycle
+
+One session per client, and it follows the app.
+
+**Backgrounding ends the call.** Switching apps does not unmount a React tree,
+so without this the WebView stays mounted with the microphone open and the
+conversation still billing while nobody is listening. iOS makes it worse rather
+than better: it suspends the WebView's audio without telling the socket, so the
+call survives as a leg that can no longer hear anything and bills for silence.
+
+The session ends on `background`, never on `inactive` — iOS reports `inactive`
+for the app switcher, a pulled-down notification, and the moment a permission
+dialog appears, so ending on it would mean the microphone prompt hangs up the
+call that asked for it.
+
+```tsx
+<GraineProvider … endOnBackground={false}>   {/* default: true */}
+```
+
+Turn it off only if a conversation should genuinely survive a switch to another
+app, and you are prepared to explain the open microphone.
+
+Text sessions reconnect when the app returns. **Voice does not auto-resume** — a
+call is something a person chose to start, and starting one again because they
+came back to the app is a microphone opening unasked. `connected` goes false;
+draw from that.
+
+**`connect()` is idempotent.** Calling it twice returns the same session rather
+than opening a second socket. This matters under React 18 strict mode, which
+mounts effects twice: previously the first socket was orphaned with no reference
+to close it, and the runtime kept it open and billing until its own timeout.
+
+**`close()` sends a stop frame** before dropping the socket, so the conversation
+is filed as ended rather than as a customer who vanished mid-turn. It is called
+for you on unmount and on backgrounding.
+
+---
+
 ## Troubleshooting
 
+**Nothing renders at all, and the console says `no_origin`.**
+The agent's Allowed domains has no `app://` entry. `no_domains_configured` means
+the allowlist is empty, which denies everything. Both are dashboard fixes, not
+code.
+
+**The agent offers to do things this app cannot.**
+The website agent is being reused. Actions are declared per agent and offered on
+every surface it serves — clone it and give the app its own.
+
 **The agent talks but does not know what screen I am on.**
 `navigationRef` must be the same ref you pass to `NavigationContainer`, and
 `GraineProvider` must wrap it.

package/dist/client.d.ts

@@ -23,6 +23,7 @@ export declare class GraineInAppClient {
     config: SessionConfig | null;
     transport: "gateway" | "direct" | null;
     private ws;
+    private connecting;
     private listeners;
     private actions;
     private screen;
@@ -46,6 +47,7 @@ export declare class GraineInAppClient {
     session(): Promise<SessionConfig>;
     private ticket;
     connect(): Promise<void>;
+    private openSocket;
     private send;
     private onFrame;
     executeAction(name: string, args?: Record<string, unknown>): Promise<AppActionResult>;

package/dist/client.js

@@ -7,6 +7,7 @@ export class GraineInAppClient {
         this.config = null;
         this.transport = null;
         this.ws = null;
+        this.connecting = null;
         this.listeners = new Map();
         this.actions = new Map();
         this.screen = null;
@@ -87,6 +88,14 @@ export class GraineInAppClient {
         }
     }
     async connect() {
+        if (this.ws && (this.ws.readyState === 0 || this.ws.readyState === 1))
+            return;
+        if (this.connecting)
+            return this.connecting;
+        this.connecting = this.openSocket().finally(() => { this.connecting = null; });
+        return this.connecting;
+    }
+    async openSocket() {
         if (!this.config)
             await this.session();
         const agentId = this.config.webcallAgentId || this.config.agentId;
@@ -410,6 +419,7 @@ export class GraineInAppClient {
     }
     close() {
         this.stopTimers();
+        this.connecting = null;
         const sock = this.ws;
         this.ws = null;
         if (!sock)

package/dist/index.d.ts

@@ -4,6 +4,6 @@ export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RAT
 export { EchoGuard, decodeAgentAudio, decodeMuLaw, decodePcm16, base64ToBytes, type AudioFormat, type DecodedAudio, } from "./audio";
 export { addMaskRule, maskDeep, maskString } from "./mask";
 export { GraineProvider, useGraineAgent, useGraineScreen, useGraineAction, useGraineVoice, useGraineIdentify, useGraineEvents, useGraineTrack, useGraineTap, type GraineEvent, type GraineProviderProps, type Turn, type Caption, } from "./react-native/index";
-export { GraineAgentBar, GraineLauncher, type GraineAgentBarProps, type GraineLauncherProps } from "./react-native/ui";
+export { GraineAgentBar, GraineLauncher, type GraineAgentBarProps, type GraineLauncherProps, type GraineBarTheme, } from "./react-native/ui";
 export { GraineVoiceLauncher, type GraineVoiceLauncherProps, type GraineVoiceApi, } from "./react-native/voice-launcher";
 export { LauncherVisibilityTracker, activeRouteName, type LauncherInset, type LauncherContinuity, type LauncherDelayPolicy, type LauncherGroup, type LauncherVisibility, type VisibilityDecision, } from "./react-native/navigation";

package/dist/index.js

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

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

@@ -64,6 +64,7 @@ export interface GraineProviderProps extends GraineInAppOptions {
     children: React.ReactNode;
     autoConnect?: boolean;
     onProactive?: (text: string) => void;
+    endOnBackground?: boolean;
     navigationRef?: {
         current: any;
     } | null;
@@ -71,7 +72,7 @@ export interface GraineProviderProps extends GraineInAppOptions {
     launcherDelayMs?: number;
     visibility?: LauncherVisibility;
 }
-export declare function GraineProvider({ children, autoConnect, onProactive, navigationRef, includeScreens, launcherDelayMs, visibility, ...options }: GraineProviderProps): React.JSX.Element;
+export declare function GraineProvider({ children, autoConnect, onProactive, endOnBackground, 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;

package/dist/react-native/index.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { AppState } from "react-native";
 import { GraineInAppClient } from "../client";
 import { VoiceSession } from "../voice";
 import { LauncherVisibilityTracker, activeRouteName, } from "./navigation";
 const Ctx = createContext(null);
-export function GraineProvider({ children, autoConnect = true, onProactive, navigationRef, includeScreens, launcherDelayMs = 0, visibility, ...options }) {
+export function GraineProvider({ children, autoConnect = true, onProactive, endOnBackground = true, navigationRef, includeScreens, launcherDelayMs = 0, visibility, ...options }) {
     const clientRef = useRef(null);
     if (!clientRef.current)
         clientRef.current = new GraineInAppClient(options);
@@ -158,6 +159,29 @@ export function GraineProvider({ children, autoConnect = true, onProactive, navi
             client.close();
         };
     }, [client, autoConnect]);
+    useEffect(() => {
+        if (!endOnBackground)
+            return;
+        let last = AppState.currentState;
+        const sub = AppState.addEventListener("change", (next) => {
+            const wasActive = last === "active";
+            last = next;
+            if (next === "background" && wasActive) {
+                client.close();
+                setConnected(false);
+                setConnecting(false);
+                return;
+            }
+            if (next === "active" && !wasActive && autoConnect) {
+                setConnecting(true);
+                client.connect().catch((err) => {
+                    setConnecting(false);
+                    console.error("[Graine]", err?.message ?? err);
+                });
+            }
+        });
+        return () => sub.remove();
+    }, [client, endOnBackground, autoConnect]);
     const value = useMemo(() => ({
         client,
         connected,

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

@@ -1,4 +1,13 @@
 import React from "react";
+export interface GraineBarTheme {
+    surface: string;
+    border: string;
+    text: string;
+    sub: string;
+    chip: string;
+    onAccent: string;
+    danger: string;
+}
 export interface GraineAgentBarProps {
     accent?: string;
     name?: string;
@@ -6,7 +15,9 @@ export interface GraineAgentBarProps {
     bottomInset?: number;
     hidden?: boolean;
     captionsOn?: boolean;
+    scheme?: "dark" | "light" | "auto";
+    theme?: Partial<GraineBarTheme>;
 }
-export declare function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl: avatarProp, bottomInset, hidden, captionsOn, }: GraineAgentBarProps): React.JSX.Element | null;
+export declare function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl: avatarProp, bottomInset, hidden, captionsOn, scheme, theme: themeProp, }: GraineAgentBarProps): React.JSX.Element | null;
 export declare const GraineLauncher: typeof GraineAgentBar;
 export type GraineLauncherProps = GraineAgentBarProps;

package/dist/react-native/ui.js

@@ -1,12 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { ActivityIndicator, Image, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from "react-native";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ActivityIndicator, Image, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, useColorScheme, View, } from "react-native";
 import { useGraineAgent } from "./index";
-export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl: avatarProp, bottomInset = 96, hidden = false, captionsOn = false, }) {
+const DARK = {
+    surface: "#17161A",
+    border: "rgba(255,255,255,0.09)",
+    text: "#F2F3F5",
+    sub: "#9aa0a6",
+    chip: "rgba(255,255,255,0.08)",
+    onAccent: "#FFFFFF",
+    danger: "#E5484D",
+};
+const LIGHT = {
+    surface: "#FFFFFF",
+    border: "rgba(0,0,0,0.10)",
+    text: "#16181C",
+    sub: "#61666D",
+    chip: "rgba(0,0,0,0.05)",
+    onAccent: "#FFFFFF",
+    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 accent = accentProp ?? appearance?.accent ?? "#318CE7";
     const name = nameProp ?? appearance?.title ?? "Assistant";
     const avatarUrl = avatarProp ?? appearance?.logo ?? undefined;
+    const deviceScheme = useColorScheme();
+    const styles = useMemo(() => {
+        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 [captions, setCaptions] = useState(captionsOn);
     const [draft, setDraft] = useState("");
@@ -18,7 +41,7 @@ export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl:
             : muted ? "muted"
                 : agentSpeaking || (last?.role === "agent" && last.live) ? "speaking"
                     : connected ? "listening"
-                        : "starting…";
+                        : "offline";
     useEffect(() => {
         if (expanded)
             requestAnimationFrame(() => scrollRef.current?.scrollToEnd({ animated: true }));
@@ -46,51 +69,55 @@ export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl:
         ], 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 ? "⌄" : "⌃" }) })] })] }));
+                                ], 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 ? "⌄" : "⌃" }) })] })] }));
 }
 export const GraineLauncher = GraineAgentBar;
-const styles = StyleSheet.create({
+const makeStyles = (t) => StyleSheet.create({
     root: { position: "absolute", left: 12, right: 12, zIndex: 900 },
     panel: {
-        backgroundColor: "#17161A", borderRadius: 22, borderWidth: 1, borderColor: "rgba(255,255,255,0.09)",
+        backgroundColor: t.surface, borderRadius: 22, borderWidth: 1, borderColor: t.border,
         marginBottom: 8, overflow: "hidden",
     },
     transcript: { maxHeight: 240 },
     transcriptInner: { padding: 14, gap: 8 },
-    empty: { color: "#9aa0a6", fontSize: 14, lineHeight: 21 },
+    empty: { color: t.sub, fontSize: 14, lineHeight: 21 },
     bubble: { maxWidth: "88%", paddingHorizontal: 12, paddingVertical: 9, borderRadius: 16 },
-    agentBubble: { alignSelf: "flex-start", backgroundColor: "rgba(255,255,255,0.08)", borderBottomLeftRadius: 5 },
+    agentBubble: { alignSelf: "flex-start", backgroundColor: t.chip, borderBottomLeftRadius: 5 },
     customerBubble: { alignSelf: "flex-end", borderBottomRightRadius: 5 },
-    agentText: { color: "#F2F3F5", fontSize: 14.5, lineHeight: 21 },
-    customerText: { color: "#fff", fontSize: 14.5, lineHeight: 21 },
+    agentText: { color: t.text, fontSize: 14.5, lineHeight: 21 },
+    customerText: { color: t.onAccent, fontSize: 14.5, lineHeight: 21 },
     composer: { flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 12, paddingBottom: 12 },
     input: {
-        flex: 1, borderWidth: 1, borderColor: "rgba(255,255,255,0.12)", borderRadius: 16,
-        paddingHorizontal: 12, paddingVertical: Platform.OS === "ios" ? 10 : 7, color: "#F2F3F5", fontSize: 14.5,
+        flex: 1, borderWidth: 1, borderColor: t.border, borderRadius: 16,
+        paddingHorizontal: 12, paddingVertical: Platform.OS === "ios" ? 10 : 7, color: t.text, fontSize: 14.5,
     },
     send: { width: 38, height: 38, borderRadius: 19, alignItems: "center", justifyContent: "center" },
-    sendLabel: { color: "#fff", fontSize: 17, lineHeight: 20 },
+    sendLabel: { color: t.onAccent, fontSize: 17, lineHeight: 20 },
     bar: {
         flexDirection: "row", alignItems: "center", gap: 11,
-        backgroundColor: "#17161A", borderRadius: 26, borderWidth: 1, borderColor: "rgba(255,255,255,0.09)",
+        backgroundColor: t.surface, borderRadius: 26, borderWidth: 1, borderColor: t.border,
         paddingHorizontal: 8, paddingVertical: 8,
         shadowColor: "#000", shadowOpacity: 0.3, shadowRadius: 16, shadowOffset: { width: 0, height: 6 }, elevation: 12,
     },
     avatar: { width: 38, height: 38, borderRadius: 19, alignItems: "center", justifyContent: "center" },
-    avatarImage: { width: 38, height: 38, borderRadius: 19, backgroundColor: "rgba(255,255,255,0.08)" },
+    avatarImage: { width: 38, height: 38, borderRadius: 19, backgroundColor: t.chip },
     captionWrap: {
-        backgroundColor: "rgba(0,0,0,0.72)", borderRadius: 16, paddingHorizontal: 14, paddingVertical: 10, marginBottom: 8,
+        backgroundColor: t.surface, borderRadius: 18, borderWidth: 1, borderColor: t.border,
+        paddingHorizontal: 14, paddingVertical: 11, marginBottom: 8,
+        shadowColor: "#000", shadowOpacity: 0.18, shadowRadius: 12, shadowOffset: { width: 0, height: 4 }, elevation: 6,
     },
-    caption: { color: "#fff", fontSize: 15, lineHeight: 21, fontWeight: "600" },
+    caption: { color: t.text, fontSize: 15, lineHeight: 21, fontWeight: "600" },
     captionLive: { opacity: 0.8 },
-    glyph: { color: "#F2F3F5", fontSize: 13, fontWeight: "800" },
-    muted: { backgroundColor: "#E5484D" },
-    avatarGlyph: { color: "#fff", fontSize: 17, lineHeight: 20 },
-    name: { color: "#F2F3F5", fontSize: 15, fontWeight: "800" },
-    status: { color: "#9aa0a6", fontSize: 12.5, marginTop: 1 },
+    glyph: { color: t.text, fontSize: 13, fontWeight: "800" },
+    glyphOnAccent: { color: t.onAccent },
+    placeholder: { color: t.sub },
+    muted: { backgroundColor: t.danger },
+    avatarGlyph: { color: t.onAccent, fontSize: 17, lineHeight: 20 },
+    name: { color: t.text, fontSize: 15, fontWeight: "800" },
+    status: { color: t.sub, fontSize: 12.5, marginTop: 1 },
     round: {
         width: 38, height: 38, borderRadius: 19, alignItems: "center", justifyContent: "center",
-        backgroundColor: "rgba(255,255,255,0.08)",
+        backgroundColor: t.chip,
     },
-    chevron: { color: "#F2F3F5", fontSize: 16, lineHeight: 18 },
+    chevron: { color: t.text, fontSize: 16, lineHeight: 18 },
 });

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

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { View } from "react-native";
+import { AppState, View } from "react-native";
 import { useGraineAgent } from "./index";
 export function GraineVoiceLauncher({ webView: WebView, autoStart = false, onCaption, onCallState, onMicDenied, onEnded, children, }) {
     const { client, appearance } = useGraineAgent();
@@ -91,6 +91,16 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, onCap
         }, [post]),
     };
     useEffect(() => () => { post({ type: "graine:end-call" }); }, [post]);
+    useEffect(() => {
+        let last = AppState.currentState;
+        const sub = AppState.addEventListener("change", (next) => {
+            const wasActive = last === "active";
+            last = next;
+            if (next === "background" && wasActive)
+                post({ type: "graine:end-call" });
+        });
+        return () => sub.remove();
+    }, [post]);
     const agentId = client.config?.agentId;
     if (!agentId)
         return _jsx(_Fragment, { children: children?.(api) });

package/package.json

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