@graineai/inapp-react-native 0.33.5 → 0.33.6

package/dist/index.d.ts

@@ -11,7 +11,7 @@ export type { WidgetSelectAction } from "./protocol.js";
 export { GraineWidget } from "./react-native/widget.js";
 export { GraineLoader, useGraineLoader } from "./react-native/loader.js";
 export type { GraineLoaderProps } from "./react-native/loader.js";
-export { PENDING_WIDGET_MS } from "./react-native/index.js";
+export { PENDING_WIDGET_MS, AWAITING_REPLY_MS, MIN_LOADER_MS } from "./react-native/index.js";
 export type { GraineWidgetProps, GraineWidgetTheme } from "./react-native/widget.js";
 export { GraineInAppClient, type GraineInAppOptions, type SessionConfig, type ActionDiagnosis, } from "./client.js";
 export { FrictionDetector, resolveFriction, rulesFor, DEFAULT_FRICTION, type FrictionConfig, type FrictionScreenRules, type FrictionNudge, type FrictionSignal, type FrictionKind, } from "./friction.js";

package/dist/index.js

@@ -5,7 +5,7 @@ export { normaliseSelectAction, fillSelectArgs, fillSelectTemplate, selectCall,
 export { WIDGET_SELECTS, MAX_SELECT_DEFAULT, manySummary } from "./protocol.js";
 export { GraineWidget } from "./react-native/widget.js";
 export { GraineLoader, useGraineLoader } from "./react-native/loader.js";
-export { PENDING_WIDGET_MS } from "./react-native/index.js";
+export { PENDING_WIDGET_MS, AWAITING_REPLY_MS, MIN_LOADER_MS } from "./react-native/index.js";
 export { GraineInAppClient, } from "./client.js";
 export { FrictionDetector, resolveFriction, rulesFor, DEFAULT_FRICTION, } from "./friction.js";
 export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RATE, } from "./voice.js";

package/dist/protocol.js

@@ -204,7 +204,7 @@ export function resolveLoader(style) {
         px: LOADER_PX[s.size ?? "medium"],
         periodMs: LOADER_PERIOD[s.speed ?? "normal"],
         text: { ...DEFAULT_LOADER_TEXT, ...(s.text ?? {}) },
-        skeleton: s.skeleton ?? true,
+        skeleton: s.skeleton ?? false,
     };
 }
 const ACTION_NAME = /^[a-z][a-z0-9_]{0,63}$/;

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

@@ -71,6 +71,7 @@ export type GraineEvent = {
 };
 export declare const PENDING_WIDGET_MS = 12000;
 export declare const AWAITING_REPLY_MS = 12000;
+export declare const MIN_LOADER_MS = 450;
 export interface GraineWidget {
     id: string;
     kind: string;

package/dist/react-native/index.js

@@ -10,6 +10,7 @@ export { widgetSurface } from "../protocol.js";
 import { LauncherVisibilityTracker, activeRouteName, } from "./navigation.js";
 export const PENDING_WIDGET_MS = 12000;
 export const AWAITING_REPLY_MS = 12000;
+export const MIN_LOADER_MS = 450;
 export const Ctx = createContext(null);
 let defaultClient = null;
 export function setDefaultClient(client) {
@@ -128,6 +129,12 @@ export function GraineProvider({ children, autoConnect = true, onProactive, endO
     openRef.current = open;
     useEffect(() => {
         const offs = [
+            client.on("call_state", (s) => {
+                if (client.isConnected)
+                    return;
+                setConnected(!!s?.connected);
+                setConnecting(!!s?.connecting);
+            }),
             client.on("open", () => {
                 setConnected(true);
                 setConnecting(false);
@@ -406,6 +413,8 @@ export function useGraineWidget() {
     const [answered, setAnswered] = useState(null);
     const [loading, setLoading] = useState(null);
     const loadingTimer = useRef(null);
+    const shownAt = useRef(null);
+    const minTimer = useRef(null);
     const [awaitingReply, setAwaitingReply] = useState(false);
     const [closed, setClosed] = useState(null);
     const awaitingTimer = useRef(null);
@@ -414,6 +423,8 @@ export function useGraineWidget() {
             clearTimeout(loadingTimer.current);
         if (awaitingTimer.current)
             clearTimeout(awaitingTimer.current);
+        if (minTimer.current)
+            clearTimeout(minTimer.current);
     }, []);
     useEffect(() => {
         const done = () => {
@@ -439,6 +450,7 @@ export function useGraineWidget() {
         if (pending)
             setWidget((cur) => (cur && cur.id === pending.id ? cur : pending));
         const offPending = client.on("widget_pending", (hint) => {
+            shownAt.current = Date.now();
             setLoading({ id: String(hint?.widget_id ?? ""), kind: String(hint?.kind ?? "") });
             if (loadingTimer.current)
                 clearTimeout(loadingTimer.current);
@@ -452,10 +464,21 @@ export function useGraineWidget() {
                 clearTimeout(loadingTimer.current);
                 loadingTimer.current = null;
             }
-            setLoading(null);
-            setClosed(null);
-            setWidget(next);
-            setAnswered(null);
+            const show = () => {
+                shownAt.current = null;
+                setLoading(null);
+                setClosed(null);
+                setWidget(next);
+                setAnswered(null);
+            };
+            const seen = shownAt.current === null ? MIN_LOADER_MS : Date.now() - shownAt.current;
+            if (seen >= MIN_LOADER_MS)
+                show();
+            else {
+                if (minTimer.current)
+                    clearTimeout(minTimer.current);
+                minTimer.current = setTimeout(show, MIN_LOADER_MS - seen);
+            }
         });
         return () => { offPending(); offWidget(); };
     }, [client, adopt]);
@@ -490,6 +513,11 @@ export function useGraineWidget() {
         awaitingTimer.current = setTimeout(() => setAwaitingReply(false), AWAITING_REPLY_MS);
     }, [client, widget]);
     const dismiss = useCallback(() => {
+        if (minTimer.current) {
+            clearTimeout(minTimer.current);
+            minTimer.current = null;
+        }
+        shownAt.current = null;
         if (widget) {
             client.reportEvent({
                 name: "component_dismissed",

package/dist/react-native/ui.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ActivityIndicator, Image, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, useColorScheme, View, } from "react-native";
+import { Image, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, useColorScheme, View, } from "react-native";
 import { useGraineAgent } from "./index.js";
+import { GraineLoader } from "./loader.js";
 import { resolveNativeAppearance } from "./appearance.js";
 const DARK = {
     surface: "#17161A",
@@ -40,6 +41,8 @@ export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl:
     const [draft, setDraft] = useState("");
     const scrollRef = useRef(null);
     const last = messages[messages.length - 1];
+    const waiting = connecting;
+    const waitingMoment = "connecting";
     const status = error
         ? "unavailable"
         : connecting ? "connecting…"
@@ -74,7 +77,7 @@ 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: styles.placeholder.color, onSubmitEditing: submit, returnKeyType: "send", blurOnSubmit: false }), _jsx(Pressable, { onPress: submit, disabled: !draft.trim(), accessibilityLabel: "Send", style: [styles.send, { backgroundColor: accent, opacity: draft.trim() ? 1 : 0.4 }], children: _jsx(Text, { style: styles.sendLabel, children: "\u2191" }) })] }) })] })), captions && caption?.text ? (_jsx(View, { style: styles.captionWrap, children: _jsx(Text, { numberOfLines: 3, style: [styles.caption, caption.live && styles.captionLive], children: caption.text }) })) : null, _jsxs(View, { style: styles.bar, children: [avatarUrl ? (_jsx(Image, { source: { uri: avatarUrl }, style: styles.avatarImage, accessibilityIgnoresInvertColors: true })) : (_jsx(View, { style: [styles.avatar, { backgroundColor: accent }], children: _jsx(Text, { style: styles.avatarGlyph, children: "\u2726" }) })), _jsxs(Pressable, { onPress: () => setExpanded((v) => !v), style: { flex: 1 }, accessibilityLabel: expanded ? "Collapse" : "Expand", children: [_jsx(Text, { style: styles.name, children: name }), _jsx(Text, { style: styles.status, children: status })] }), connecting ? _jsx(ActivityIndicator, { size: "small", color: accent }) : null, _jsx(Pressable, { onPress: () => setCaptions((v) => !v), hitSlop: 8, accessibilityLabel: captions ? "Hide captions" : "Show captions", style: [styles.round, captions && { backgroundColor: accent }], children: _jsx(Text, { style: [styles.glyph, captions && styles.glyphOnAccent], children: "CC" }) }), _jsx(Pressable, { onPress: () => setMuted(!muted), disabled: !connected, hitSlop: 8, accessibilityLabel: muted ? "Unmute" : "Mute", style: [styles.round, muted && styles.muted, !connected && { opacity: 0.4 }], children: _jsx(Text, { style: [styles.glyph, muted && styles.glyphOnAccent], children: muted ? "🔇" : "🎙" }) }), _jsx(Pressable, { onPress: () => setExpanded((v) => !v), hitSlop: 8, accessibilityLabel: expanded ? "Collapse" : "Expand", style: styles.round, children: _jsx(Text, { style: styles.chevron, children: expanded ? "⌄" : "⌃" }) })] })] }));
+                                ], children: _jsx(Text, { style: m.role === "agent" ? styles.agentText : styles.customerText, children: m.text }) }, i)))] }), _jsx(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : undefined, children: _jsxs(View, { style: styles.composer, children: [_jsx(TextInput, { style: styles.input, value: draft, onChangeText: setDraft, placeholder: "Type a message", placeholderTextColor: styles.placeholder.color, onSubmitEditing: submit, returnKeyType: "send", blurOnSubmit: false }), _jsx(Pressable, { onPress: submit, disabled: !draft.trim(), accessibilityLabel: "Send", style: [styles.send, { backgroundColor: accent, opacity: draft.trim() ? 1 : 0.4 }], children: _jsx(Text, { style: styles.sendLabel, children: "\u2191" }) })] }) })] })), captions && 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 ? "⌄" : "⌃" }) })] }))] })] }));
 }
 export const GraineLauncher = GraineAgentBar;
 const makeStyles = (t) => StyleSheet.create({

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

@@ -236,6 +236,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                     endedNotifiedRef.current = false;
                 setConnected(!!msg.connected);
                 setConnecting(!!msg.connecting);
+                client.emit?.("call_state", { connected: !!msg.connected, connecting: !!msg.connecting });
                 if (!msg.connected && !msg.connecting)
                     startedRef.current = false;
                 onCallState?.({ connected: !!msg.connected, connecting: !!msg.connecting });

package/dist/react-native/widget.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graineai/inapp-react-native",
-  "version": "0.33.5",
+  "version": "0.33.6",
   "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.",
   "license": "MIT",