@graineai/inapp-react-native 0.36.0 → 0.38.0

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

@@ -0,0 +1,255 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { Animated, Easing, Image, PixelRatio, Platform, Pressable, ScrollView, Text, TextInput, View } from "react-native";
+import { Ctx, useGraineAgent } from "./index.js";
+import { GraineLoader } from "./loader.js";
+import { GraineWidget } from "./widget.js";
+import { resolveNativeAppearance } from "./appearance.js";
+import { useDesign } from "./use-design.js";
+import { glyphPixels, launcherRadius, letterSpacing, lineHeight, shadowStyle, surfaceFill } from "./design-math.js";
+import { useKeyboardLift } from "./keyboard.js";
+import { useDraggablePlacement } from "./placement.js";
+import { glyphUrl, SDK_ICONS } from "../theme.js";
+const BAR_HEIGHT = 60;
+const BUTTON = 38;
+const METER = [0.55, 1, 0.7, 0.4];
+function statusOf(api, isChat, chatConnected) {
+    const conn = api.connectivity?.state;
+    const say = (text) => ({ text, waiting: null, meter: false });
+    if (api.error)
+        return say("Unavailable");
+    if (isChat)
+        return chatConnected ? say("Online") : { text: "Connecting…", waiting: "connecting", meter: false };
+    if (api.network === "offline")
+        return say("No connection");
+    if (api.reconnecting || conn === "retrying")
+        return { text: "Reconnecting…", waiting: "reconnecting", meter: false };
+    if (api.micDenied)
+        return say("Needs microphone");
+    if (conn === "failed")
+        return say("Couldn’t load · tap to retry");
+    if (!api.ready || api.connecting)
+        return { text: "Connecting…", waiting: "connecting", meter: false };
+    if (api.muted)
+        return say("Muted");
+    if (api.connected && api.phase === "thinking")
+        return { text: "Thinking…", waiting: "thinking", meter: false };
+    if (api.connected && api.caption?.role === "agent" && api.caption.live)
+        return { text: "Speaking", waiting: null, meter: true };
+    if (api.connected && api.quality === "poor")
+        return say("Weak connection");
+    if (api.connected)
+        return { text: "Listening", waiting: null, meter: true };
+    return say("Tap to talk");
+}
+export function GraineVoiceBar({ api, onClose, bottomInset, draggable = true, placement, onPlacementChange, name: nameProp, }) {
+    const ctx = useContext(Ctx);
+    const { messages, send, connected: chatConnected, appearance, surface, canSwitch, setSurface, launcherInset } = useGraineAgent();
+    const look = useDesign();
+    const t = look.tokens;
+    const c = t.colors;
+    const kit = ctx?.svg ?? null;
+    const origin = ctx?.client?.opts?.baseUrl || "https://www.graine.ai";
+    const dash = resolveNativeAppearance(appearance, { accent: c.accent, heading: "Assistant" });
+    const heading = dash.heading;
+    const spoken = nameProp || heading;
+    const isChat = surface === "chat";
+    const keyboardLift = useKeyboardLift();
+    const baseBottom = bottomInset ?? launcherInset?.bottom ?? 96;
+    const drag = useDraggablePlacement({
+        baseBottom,
+        enabled: draggable,
+        initialOffset: placement?.bottomOffset,
+        onChange: (bottomOffset) => onPlacementChange?.({ bottomOffset }),
+    });
+    const status = statusOf(api, isChat, chatConnected);
+    const conn = api.connectivity?.state;
+    const micBlocked = !!api.error || api.micDenied || api.connecting || (!api.ready && conn !== "failed");
+    const caption = !isChat && api.captionsOn && api.caption?.text ? api.caption : null;
+    const body = (size, weight) => ({
+        ...look.face(t.font.body, weight),
+        fontSize: size,
+        letterSpacing: letterSpacing(size, t.font.letterSpacing.body),
+    });
+    const endCall = () => {
+        api.end();
+        setTimeout(() => onClose?.(), 400);
+    };
+    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, 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: {
+                        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"),
+                    }, children: [_jsx(View, { style: { width: BUTTON, height: BUTTON, borderRadius: BUTTON / 2, backgroundColor: c.accent, alignItems: "center", justifyContent: "center", overflow: "hidden" }, children: _jsx(Mark, { t: t, size: BUTTON, glyph: 18, kit: kit, origin: origin, logoUrl: dash.logoUrl ?? undefined, initial: heading.charAt(0).toUpperCase() || "A", cover: true }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { numberOfLines: 1, style: { ...body(14, t.font.weights.strong), color: c.text, lineHeight: 17.5 }, children: heading }), _jsx(View, { style: { flexDirection: "row", alignItems: "center", gap: 6, marginTop: 1 }, children: status.waiting ? (_jsx(GraineLoader, { moment: status.waiting, size: 14 })) : (_jsxs(_Fragment, { children: [status.meter ? _jsx(Meter, { look: look, color: c.accent }) : null, _jsx(Text, { numberOfLines: 1, style: { ...body(t.font.scale.caption, t.font.weights.body), color: c.textMuted, lineHeight: lineHeight(t.font.scale.caption, 1.3) }, children: status.text })] })) })] }), canSwitch ? (_jsx(RoundButton, { label: isChat ? "Switch to a call" : "Switch to chat", fill: c.accentSoft, onPress: () => setSurface(isChat ? "voice" : "chat"), children: _jsx(Icon, { name: isChat ? "call" : "chat", t: t, color: c.text, kit: kit }) })) : null, isChat ? null : (_jsx(RoundButton, { label: !api.connected ? `Start talking to ${spoken}` : api.muted ? "Unmute" : "Mute", fill: api.muted ? c.danger : c.accent, disabled: micBlocked, onPress: () => {
+                                if (conn === "failed") {
+                                    api.retry();
+                                    return;
+                                }
+                                if (api.connected)
+                                    api.setMuted(!api.muted);
+                                else
+                                    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 }) })] }) })] }));
+}
+function softShadow(t, level) {
+    return t.elevation.hardOffset ? {} : shadowStyle(t.elevation[level]);
+}
+function Raised({ t, radius, children }) {
+    const hard = t.elevation.hardOffset;
+    if (!hard)
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs(View, { children: [_jsx(View, { pointerEvents: "none", style: { position: "absolute", left: hard.x, top: hard.y, right: -hard.x, bottom: -hard.y, borderRadius: radius, backgroundColor: t.colors.text } }), children] }));
+}
+function RoundButton({ label, fill, disabled = false, onPress, children, }) {
+    return (_jsx(Pressable, { onPress: onPress, disabled: disabled, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: label, style: {
+            width: BUTTON, height: BUTTON, borderRadius: BUTTON / 2, alignItems: "center", justifyContent: "center",
+            backgroundColor: fill, opacity: disabled ? 0.4 : 1,
+        }, children: children }));
+}
+const FALLBACK = {
+    mic: "🎙", micOff: "🔇", end: "✕", send: "↑", chat: "💬", call: "📞", chevron: "⌄", close: "✕",
+};
+function Icon({ name, t, color, size = 18, kit, rotate }) {
+    if (!kit) {
+        return _jsx(Text, { style: { color, fontSize: Math.round(size * 0.8), lineHeight: size, textAlign: "center" }, children: FALLBACK[name] });
+    }
+    const { Svg, Path } = kit;
+    const icon = SDK_ICONS[name];
+    const style = t.icons.style;
+    const sharp = style === "sharp";
+    const filled = style === "filled";
+    const stroke = t.icons.stroke;
+    const common = { stroke: color, strokeLinecap: sharp ? "square" : "round", strokeLinejoin: sharp ? "miter" : "round" };
+    return (_jsx(View, { style: rotate ? { transform: [{ rotate: "180deg" }] } : undefined, children: _jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", children: [icon.body ? (_jsx(Path, { d: icon.body, ...common, fill: filled || style === "duotone" ? color : "none", fillOpacity: style === "duotone" ? 0.28 : 1, strokeWidth: filled ? Math.max(1, stroke * 0.75) : stroke })) : null, icon.lines ? _jsx(Path, { d: icon.lines, ...common, fill: "none", strokeWidth: stroke }) : null] }) }));
+}
+function Mark({ t, size, glyph, kit, origin, logoUrl, initial, cover = false, }) {
+    const on = t.colors.onAccent;
+    const g = t.icons.launcher;
+    if (g) {
+        if (kit) {
+            const { Svg, Path } = kit;
+            return (_jsx(Svg, { width: glyph, height: glyph, viewBox: "0 0 24 24", children: _jsx(Path, { d: g.path, fill: g.stroke ? "none" : on, stroke: g.stroke ? on : "none", strokeWidth: g.stroke ? t.icons.stroke : 0, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+        }
+        return (_jsx(Image, { source: { uri: glyphUrl(origin, g.id, on, glyphPixels(size, PixelRatio.get()), t.icons.stroke) }, style: { width: glyph, height: glyph }, accessibilityIgnoresInvertColors: true }));
+    }
+    if (logoUrl) {
+        return _jsx(Image, { source: { uri: logoUrl }, style: cover ? { width: size, height: size } : { width: glyph, height: glyph }, resizeMode: cover ? "cover" : "contain", accessibilityIgnoresInvertColors: true });
+    }
+    return _jsx(Text, { style: { color: on, fontSize: Math.round(size * 0.4), fontWeight: "700" }, children: initial });
+}
+function Meter({ look, color }) {
+    const still = look.durationMs <= 0;
+    const bars = useRef(METER.map(() => new Animated.Value(1))).current;
+    useEffect(() => {
+        if (still) {
+            bars.forEach((b) => b.setValue(1));
+            return;
+        }
+        const period = Math.max(420, look.durationMs * 3.2);
+        const ease = Easing.inOut(Easing.ease);
+        const runs = bars.map((b, i) => {
+            b.setValue(0.35);
+            return Animated.sequence([
+                Animated.delay(i * 90),
+                Animated.loop(Animated.sequence([
+                    Animated.timing(b, { toValue: 1, duration: period, easing: ease, useNativeDriver: true }),
+                    Animated.timing(b, { toValue: 0.35, duration: period, easing: ease, useNativeDriver: true }),
+                ])),
+            ]);
+        });
+        runs.forEach((r) => r.start());
+        return () => runs.forEach((r) => r.stop());
+    }, [still, look.durationMs, bars]);
+    return (_jsx(View, { style: { flexDirection: "row", alignItems: "flex-end", height: 12, gap: 2 }, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: METER.map((h, i) => (_jsx(Animated.View, { style: {
+                width: 2.5, height: Math.round(12 * h * 10) / 10, borderRadius: 1.25, backgroundColor: color,
+                transform: [{ scaleY: bars[i] }], transformOrigin: "bottom",
+            } }, i))) }));
+}
+function useRise(look) {
+    const v = useRef(new Animated.Value(look.durationMs > 0 ? 0 : 1)).current;
+    useEffect(() => {
+        if (look.durationMs <= 0) {
+            v.setValue(1);
+            return;
+        }
+        const a = Animated.timing(v, { toValue: 1, duration: look.durationMs, easing: look.easing, useNativeDriver: true });
+        a.start();
+        return () => a.stop();
+    }, []);
+    return { opacity: v, transform: [{ translateY: v.interpolate({ inputRange: [0, 1], outputRange: [8, 0] }) }] };
+}
+function CaptionCard({ look, role, text, live }) {
+    const t = look.tokens;
+    const c = t.colors;
+    const rise = useRise(look);
+    return (_jsx(Animated.View, { style: rise, children: _jsx(Raised, { t: t, level: "card", radius: t.shape.radius.lg, children: _jsxs(View, { style: {
+                    backgroundColor: surfaceFill(c.surface, t), borderWidth: t.shape.borderWidth, borderColor: c.border,
+                    borderRadius: t.shape.radius.lg, paddingHorizontal: 12, paddingVertical: 8, ...softShadow(t, "card"),
+                }, children: [role === "customer" ? (_jsx(Text, { style: { ...look.face(t.font.body, t.font.weights.strong), color: c.accent, fontSize: 10.5, letterSpacing: 0.6, textTransform: "uppercase", marginBottom: 2 }, children: "You" })) : null, _jsx(Text, { numberOfLines: 2, style: { ...look.face(t.font.body, t.font.weights.strong), color: c.text, fontSize: 13, lineHeight: 17.5, opacity: live ? 0.75 : 1 }, children: text })] }) }) }));
+}
+function ChatWindow({ look, kit, origin, heading, logoUrl, messages, send, online, lifted, onCollapse, }) {
+    const t = look.tokens;
+    const c = t.colors;
+    const r = t.shape.radius;
+    const bw = t.shape.borderWidth;
+    const pad = t.spacing.cardPadding;
+    const rise = useRise(look);
+    const [draft, setDraft] = useState("");
+    const scroll = useRef(null);
+    useEffect(() => {
+        const id = setTimeout(() => scroll.current?.scrollToEnd?.({ animated: true }), 40);
+        return () => clearTimeout(id);
+    }, [messages.length]);
+    const submit = () => {
+        const text = draft.trim();
+        if (!text)
+            return;
+        setDraft("");
+        send(text);
+    };
+    const markShape = t.shape.launcher === "pill" ? "circle" : t.shape.launcher;
+    const text = (size, weight) => ({
+        ...look.face(t.font.body, weight), fontSize: size,
+        letterSpacing: letterSpacing(size, t.font.letterSpacing.body),
+    });
+    const titleSize = Math.min(t.font.scale.title, 16);
+    return (_jsx(Animated.View, { style: rise, children: _jsx(Raised, { t: t, level: "floating", radius: r.xl, children: _jsx(View, { style: { backgroundColor: c.background, borderWidth: bw, borderColor: c.border, borderRadius: r.xl, ...softShadow(t, "floating") }, children: _jsxs(View, { style: { borderRadius: Math.max(0, r.xl - bw), overflow: "hidden" }, children: [_jsxs(View, { style: { height: 50, flexDirection: "row", alignItems: "center", gap: 10, paddingHorizontal: 12, backgroundColor: surfaceFill(c.surface, t), borderBottomWidth: bw, borderBottomColor: c.border }, children: [_jsx(View, { style: { width: 30, height: 30, borderRadius: launcherRadius(markShape, 30, t), backgroundColor: c.accent, alignItems: "center", justifyContent: "center", overflow: "hidden", ...(Platform.OS === "ios" && markShape === "squircle" ? { borderCurve: "continuous" } : null) }, children: _jsx(Mark, { t: t, size: 30, glyph: 14, kit: kit, origin: origin, logoUrl: logoUrl, initial: heading.charAt(0).toUpperCase() || "A" }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { numberOfLines: 1, style: { ...look.face(t.font.heading, t.font.weights.title), color: c.text, fontSize: titleSize, lineHeight: lineHeight(titleSize, t.font.lineHeight.title), letterSpacing: letterSpacing(titleSize, t.font.letterSpacing.title) }, children: heading }), _jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 4 }, children: [online ? _jsx(View, { style: { width: 6, height: 6, borderRadius: 3, backgroundColor: c.success } }) : null, _jsx(Text, { style: { ...text(t.font.scale.caption, t.font.weights.body), color: c.textMuted, lineHeight: lineHeight(t.font.scale.caption, 1.2) }, children: online ? "Online" : "Connecting…" })] })] }), _jsx(Pressable, { onPress: onCollapse, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Collapse", children: _jsx(Icon, { name: "chevron", t: t, color: c.textMuted, kit: kit, rotate: true }) })] }), _jsxs(ScrollView, { ref: scroll, style: { maxHeight: lifted ? 150 : 260 }, contentContainerStyle: { padding: 12, gap: t.spacing.gap }, keyboardShouldPersistTaps: "handled", children: [messages.length === 0 ? (_jsx(Text, { style: { ...text(t.font.scale.body, t.font.weights.body), color: c.textMuted, lineHeight: lineHeight(t.font.scale.body, t.font.lineHeight.body) }, children: online ? `${heading} can see what you’re looking at — ask it anything.` : "Connecting…" })) : null, messages.map((m, i) => {
+                                    const b = bubble(t, m.role !== "agent");
+                                    return (_jsx(View, { style: [{ maxWidth: "84%" }, b.box], children: _jsx(Text, { style: { ...text(t.font.scale.body, t.font.weights.body), color: b.color, lineHeight: lineHeight(t.font.scale.body, t.font.lineHeight.body), opacity: m.live ? 0.75 : 1 }, children: m.text }) }, i));
+                                })] }), _jsxs(View, { style: { height: 58, flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 10, backgroundColor: c.background }, children: [_jsx(TextInput, { value: draft, onChangeText: setDraft, onSubmitEditing: submit, returnKeyType: "send", blurOnSubmit: false, placeholder: "Message\u2026", placeholderTextColor: c.textMuted, style: {
+                                        flex: 1, height: 40, paddingHorizontal: 14, backgroundColor: c.surfaceRaised, borderWidth: bw, borderColor: c.border,
+                                        borderRadius: r.xl, color: c.text, ...look.face(t.font.body, t.font.weights.body), fontSize: t.font.scale.body - 1,
+                                    } }), _jsx(Pressable, { onPress: submit, disabled: !draft.trim(), accessibilityRole: "button", accessibilityLabel: "Send", style: { width: 40, height: 40, borderRadius: 20, alignItems: "center", justifyContent: "center", backgroundColor: c.accent, opacity: draft.trim() ? 1 : 0.4 }, children: _jsx(Icon, { name: "send", t: t, color: c.onAccent, kit: kit }) })] })] }) }) }) }));
+}
+function bubble(t, user) {
+    const c = t.colors;
+    const r = t.shape.radius;
+    const pad = t.spacing.cardPadding;
+    const shape = {
+        alignSelf: user ? "flex-end" : "flex-start",
+        paddingHorizontal: pad, paddingVertical: Math.round(pad * 0.75), borderRadius: r.lg,
+        ...(user ? { borderBottomRightRadius: r.sm } : { borderBottomLeftRadius: r.sm }),
+    };
+    if (t.bubbles === "outline") {
+        return { box: { ...shape, backgroundColor: "transparent", borderWidth: t.shape.borderWidth, borderColor: user ? c.accent : c.border }, color: c.text };
+    }
+    if (t.bubbles === "minimal") {
+        return user
+            ? { box: { ...shape, backgroundColor: c.accentSoft }, color: c.text }
+            : { box: { alignSelf: "flex-start", paddingHorizontal: 2, paddingVertical: 2, backgroundColor: "transparent" }, color: c.text };
+    }
+    return user
+        ? { box: { ...shape, backgroundColor: c.userBubble }, color: c.userBubbleText }
+        : { box: { ...shape, backgroundColor: c.agentBubble }, color: c.agentBubbleText };
+}
+class WidgetGuard extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = { failed: false };
+    }
+    static getDerivedStateFromError() { return { failed: true }; }
+    componentDidCatch(error) { console.error("[graine] the agent's component failed to render", error); }
+    render() { return this.state.failed ? null : this.props.children; }
+}

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

@@ -59,6 +59,8 @@ export interface GraineVoiceApi {
     quality: ConnectionQuality;
     network: "online" | "offline" | "unknown";
     reconnecting: boolean;
+    error: string | null;
+    micDenied: boolean;
 }
 export declare const CAPTION_HISTORY = 12;
 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

@@ -20,6 +20,8 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
     const [connected, setConnected] = useState(false);
     const [connecting, setConnecting] = useState(false);
     const [muted, setMutedState] = useState(false);
+    const [fault, setFault] = useState(null);
+    const [micDenied, setMicDenied] = useState(false);
     const [ready, setReady] = useState(false);
     const readyRef = useRef(false);
     readyRef.current = ready;
@@ -214,6 +216,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         }
         if (!(await ensureMic())) {
             setConnecting(false);
+            setMicDenied(true);
             onMicDenied?.("NotAllowedError");
             client.emit("mic_denied", { reason: "NotAllowedError" });
             return;
@@ -260,6 +263,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                     message: msg.message,
                 });
                 if (msg.reason === "not_configured" && msg.message) {
+                    setFault(String(msg.message));
                     onError?.(String(msg.message));
                 }
                 return;
@@ -346,6 +350,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                 return;
             case "graine:mic-denied":
                 client.emit("mic_denied", { reason: String(msg.reason || "NotAllowedError") });
+                setMicDenied(true);
                 onMicDenied?.(String(msg.reason || "denied"));
                 return;
             case "graine:widget": {
@@ -387,6 +392,8 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         clearCaptions: useCallback(() => setCaptions([]), []),
         start: useCallback(() => {
             setConnecting(true);
+            setMicDenied(false);
+            setFault(null);
             setCaptions([]);
             setAwaitingAgent(false);
             client.clearPendingWidget();
@@ -402,6 +409,8 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         quality,
         network,
         reconnecting,
+        error: fault,
+        micDenied,
         setMuted: useCallback((m) => {
             setMutedState(m);
             post({ type: "graine:set-muted", muted: m });
@@ -449,6 +458,8 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         setConnected(false);
         setConnecting(false);
         setCaptions([]);
+        setMicDenied(false);
+        setFault(null);
         client.clearPendingWidget();
         onCallState?.({ connected: false, connecting: false });
     }, [active]);