@graineai/inapp-react-native 0.40.1 → 0.40.2

package/dist/client.d.ts

@@ -86,6 +86,9 @@ export declare class GraineInAppClient {
     private voiceHost;
     get hasVoiceHost(): boolean;
     setVoiceHost(on: boolean): void;
+    private nativeCall;
+    get nativeCallLive(): boolean;
+    setNativeCallLive(live: boolean): void;
     private currentSurface;
     get surface(): AgentSurface;
     setSurface(next: AgentSurface): void;

package/dist/client.js

@@ -95,6 +95,7 @@ export class GraineInAppClient {
         this.recentEvents = [];
         this.lastWidget = null;
         this.voiceHost = false;
+        this.nativeCall = false;
         this.currentSurface = "voice";
         if (!opts?.publishableKey)
             throw new Error("[Graine] publishableKey is required.");
@@ -140,6 +141,16 @@ export class GraineInAppClient {
         this.voiceHost = on;
         this.emit("voice_host", { present: on });
     }
+    get nativeCallLive() {
+        return this.nativeCall;
+    }
+    setNativeCallLive(live) {
+        const next = !!live;
+        if (this.nativeCall === next)
+            return;
+        this.nativeCall = next;
+        this.emit("native_call", { live: next });
+    }
     get surface() {
         return this.currentSurface;
     }

package/dist/index.d.ts

@@ -30,7 +30,7 @@ export { UNNAMED_TAP, resolveWidgetImages } from "./protocol.js";
 export { resolveNativeAppearance, type NativeAppearance, type NativeAppearanceFallback, resolveWidgetPalette, type WidgetPalette, type WidgetMode, } from "./react-native/appearance.js";
 export { RtcVoiceSessionController, RtcVoiceError, type RtcVoiceState, type RtcVoiceErrorCode, type RtcVoiceSession, type RtcVoiceOptions, } from "./react-native/voice-rtc.js";
 export { GraineAgentBar, GraineLauncher, type GraineAgentBarProps, type GraineLauncherProps, type GraineBarTheme, } from "./react-native/ui.js";
-export { GraineVoiceBar, type GraineVoiceBarProps } from "./react-native/voice-bar.js";
+export { GraineVoiceBar, GraineBarAction, type GraineVoiceBarProps, type GraineBarActionProps } from "./react-native/voice-bar.js";
 export { GraineLauncherButton, type GraineLauncherButtonProps } from "./react-native/fab.js";
 export { faceFor, facesForDesign, fontUrl, FONT_ASSET_VERSION, type FontLoader, type FontFace } from "./react-native/fonts.js";
 export { GraineVoiceLauncher, CAPTION_HISTORY, type GraineVoiceLauncherProps, type GraineVoiceApi, } from "./react-native/voice-launcher.js";

package/dist/index.js

@@ -21,7 +21,7 @@ export { UNNAMED_TAP, resolveWidgetImages } from "./protocol.js";
 export { resolveNativeAppearance, resolveWidgetPalette, } from "./react-native/appearance.js";
 export { RtcVoiceSessionController, RtcVoiceError, } from "./react-native/voice-rtc.js";
 export { GraineAgentBar, GraineLauncher, } from "./react-native/ui.js";
-export { GraineVoiceBar } from "./react-native/voice-bar.js";
+export { GraineVoiceBar, GraineBarAction } from "./react-native/voice-bar.js";
 export { GraineLauncherButton } from "./react-native/fab.js";
 export { faceFor, facesForDesign, fontUrl, FONT_ASSET_VERSION } from "./react-native/fonts.js";
 export { GraineVoiceLauncher, CAPTION_HISTORY, } from "./react-native/voice-launcher.js";

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { type SdkIconName } from "../theme.js";
 import type { GraineVoiceApi } from "./voice-launcher.js";
 export interface GraineVoiceBarProps {
     api: GraineVoiceApi;
@@ -12,5 +13,12 @@ export interface GraineVoiceBarProps {
         bottomOffset: number;
     }) => void;
     name?: string;
+    accessory?: React.ReactNode;
 }
-export declare function GraineVoiceBar({ api, onClose, bottomInset, draggable, placement, onPlacementChange, name: nameProp, }: GraineVoiceBarProps): React.JSX.Element;
+export declare function GraineVoiceBar({ api, onClose, bottomInset, draggable, placement, onPlacementChange, name: nameProp, accessory, }: GraineVoiceBarProps): React.JSX.Element;
+export interface GraineBarActionProps {
+    label: string;
+    icon?: Extract<SdkIconName, "call" | "chat">;
+    onPress: () => void;
+}
+export declare function GraineBarAction({ label, icon, onPress }: GraineBarActionProps): React.JSX.Element;

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

@@ -55,7 +55,7 @@ function statusOf(api, isChat, chatConnected, connectingText = DEFAULT_LOADER_TE
         return { text: "Listening", waiting: null, meter: true };
     return say("Tap to talk");
 }
-export function GraineVoiceBar({ api, onClose, bottomInset, draggable = true, placement, onPlacementChange, name: nameProp, }) {
+export function GraineVoiceBar({ api, onClose, bottomInset, draggable = true, placement, onPlacementChange, name: nameProp, accessory, }) {
     const ctx = useContext(Ctx);
     const { messages, send, connected: chatConnected, appearance, surface, canSwitch, setSurface, launcherInset } = useGraineAgent();
     const look = useDesign();
@@ -92,7 +92,7 @@ export function GraineVoiceBar({ api, onClose, bottomInset, draggable = true, pl
     return (_jsxs(View, { pointerEvents: "box-none", ...drag.panHandlers, onLayout: drag.onLayout, style: {
             position: "absolute", zIndex: 900, gap: 8, left: 12, right: 12,
             bottom: baseBottom + drag.offset + keyboardLift,
-        }, children: [_jsx(WidgetGuard, { children: _jsx(GraineWidget, {}) }), isChat ? (_jsx(ChatWindow, { look: look, kit: kit, origin: origin, heading: heading, logoUrl: dash.logoUrl ?? undefined, logoPlate: dash.logoPlate, messages: messages, send: send, online: chatConnected, lifted: keyboardLift > 0, onCollapse: () => (canSwitch ? setSurface("voice") : endCall()) })) : caption ? (_jsx(CaptionCard, { look: look, role: caption.role, text: caption.text, live: !!caption.live })) : null, _jsx(Raised, { t: t, level: "floating", radius: t.shape.radius.xl, children: _jsxs(View, { style: {
+        }, children: [_jsx(WidgetGuard, { children: _jsx(GraineWidget, {}) }), isChat ? (_jsx(ChatWindow, { look: look, kit: kit, origin: origin, heading: heading, logoUrl: dash.logoUrl ?? undefined, logoPlate: dash.logoPlate, messages: messages, send: send, online: chatConnected, lifted: keyboardLift > 0, onCollapse: () => (canSwitch ? setSurface("voice") : endCall()) })) : caption ? (_jsx(CaptionCard, { look: look, role: caption.role, text: caption.text, live: !!caption.live })) : null, draws(accessory) ? _jsx(View, { pointerEvents: "box-none", children: accessory }) : null, _jsx(Raised, { t: t, level: "floating", radius: t.shape.radius.xl, children: _jsxs(View, { style: {
                         height: BAR_HEIGHT, paddingHorizontal: 9, flexDirection: "row", alignItems: "center", gap: 10,
                         backgroundColor: surfaceFill(c.surface, t), borderWidth: t.shape.borderWidth, borderColor: c.border,
                         borderRadius: t.shape.radius.xl, ...softShadow(t, "floating"),
@@ -107,6 +107,34 @@ export function GraineVoiceBar({ api, onClose, bottomInset, draggable = true, pl
                                     api.start();
                             }, children: _jsx(Icon, { name: api.muted ? "micOff" : "mic", t: t, color: api.muted ? "#FFFFFF" : c.onAccent, kit: kit }) })), _jsx(RoundButton, { label: api.connected ? "End call" : "Close", fill: api.connected ? c.danger : c.accentSoft, onPress: endCall, children: _jsx(Icon, { name: api.connected ? "end" : "close", t: t, color: api.connected ? "#FFFFFF" : c.textMuted, kit: kit }) })] }) })] }));
 }
+export function GraineBarAction({ label, icon = "call", onPress }) {
+    const ctx = useContext(Ctx);
+    const look = useDesign();
+    const t = look.tokens;
+    const c = t.colors;
+    const kit = ctx?.svg ?? null;
+    const unit = t.spacing.unit;
+    const outline = t.elevation.hardOffset ? { borderWidth: Math.max(1, t.shape.borderWidth), borderColor: c.text } : {};
+    return (_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: label, hitSlop: 8, onPress: onPress, style: ({ pressed }) => [
+            {
+                alignSelf: "flex-end",
+                flexDirection: "row",
+                alignItems: "center",
+                gap: unit * 1.5,
+                paddingHorizontal: unit * 3.5,
+                paddingVertical: unit * 2,
+                marginBottom: unit * 2,
+                borderRadius: t.shape.radius.xl,
+                backgroundColor: c.accent,
+                opacity: pressed ? 0.85 : 1,
+            },
+            outline,
+            softShadow(t, "floating"),
+        ], children: [_jsx(Icon, { name: icon, t: t, color: c.onAccent, kit: kit, size: 16 }), _jsx(Text, { style: { color: c.onAccent, fontSize: t.font.scale.body, ...look.face(t.font.body, t.font.weights.strong) }, children: label })] }));
+}
+function draws(node) {
+    return node !== null && node !== undefined && typeof node !== "boolean";
+}
 function softShadow(t, level) {
     return t.elevation.hardOffset ? {} : shadowStyle(t.elevation[level]);
 }

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

@@ -5,6 +5,7 @@ import { Ctx, useGraineAgent } from "./index.js";
 import { requestMicrophonePermission } from "./permissions.js";
 export const CAPTION_HISTORY = 12;
 export const SLOW_CONNECT_MS = 4000;
+const CALL_IN_PROGRESS = "A call is already in progress.";
 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 endOnBackground = useContext(Ctx)?.endOnBackground ?? true;
@@ -214,7 +215,18 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         pushContext();
         return client.on("screen", () => pushContext());
     }, [client, ready, pushContext]);
+    const refusedForNativeCall = useCallback(() => {
+        if (!client.nativeCallLive)
+            return false;
+        pendingStartRef.current = false;
+        startedRef.current = false;
+        setConnecting(false);
+        onErrorRef.current?.(CALL_IN_PROGRESS);
+        return true;
+    }, [client]);
     const beginCall = useCallback(async () => {
+        if (refusedForNativeCall())
+            return;
         endedNotifiedRef.current = false;
         if (client.isConnected) {
             console.warn("[graine] The provider has its own connection open while GraineVoiceLauncher " +
@@ -228,8 +240,24 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
             client.emit("mic_denied", { reason: "NotAllowedError" });
             return;
         }
+        if (refusedForNativeCall())
+            return;
         post({ type: "graine:start-call" });
-    }, [client, ensureMic, onMicDenied, post]);
+    }, [client, ensureMic, onMicDenied, post, refusedForNativeCall]);
+    const connectingRef = useRef(false);
+    connectingRef.current = connecting;
+    useEffect(() => client.on("native_call", (e) => {
+        if (!e?.live)
+            return;
+        if (pendingStartRef.current) {
+            pendingStartRef.current = false;
+            setConnecting(false);
+        }
+        if (connectedRef.current || connectingRef.current) {
+            post({ type: "graine:end-call" });
+            armEndWatchdog();
+        }
+    }), [client, post, armEndWatchdog]);
     useEffect(() => {
         if (!connected)
             return;
@@ -425,6 +453,8 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         setCaptionsOn,
         clearCaptions: useCallback(() => setCaptions([]), []),
         start: useCallback(() => {
+            if (refusedForNativeCall())
+                return;
             setConnecting(true);
             setMicDenied(false);
             setFault(null);
@@ -438,7 +468,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                 return;
             }
             void beginCall();
-        }, [beginCall, ready]),
+        }, [beginCall, ready, refusedForNativeCall]),
         end: useCallback(() => { post({ type: "graine:end-call" }); armEndWatchdog(); }, [post, armEndWatchdog]),
         connectivity,
         retry: restartLoad,
@@ -474,6 +504,8 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
             if (autoStart) {
                 if (startedRef.current)
                     return;
+                if (refusedForNativeCall())
+                    return;
                 setConnecting(true);
                 setCaptions([]);
                 if (ready) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graineai/inapp-react-native",
-  "version": "0.40.1",
+  "version": "0.40.2",
   "type": "module",
   "description": "Graine in-app agent for React Native — an agent that sees the screen your customer is on and can act on it.",
   "license": "MIT",