@graineai/inapp-react-native 0.1.0 → 0.2.0

package/README.md

@@ -9,30 +9,57 @@ Android and iOS from one package.
 npm install @graineai/inapp-react-native
 ```
 
-Full documentation: **https://app.graine.ai/docs/in-app**
+Full documentation: **https://www.graine.ai/docs/in-app**
+
+---
+
+## Before you write any code
+
+**Add `app://` to the agent's Allowed domains** — dashboard → your agent →
+Embed & Widgets → Allowed domains.
+
+A mobile app sends no `Origin` header; there is no page, so there is nothing for
+a browser to report. Without that entry every call is refused:
+
+```
+403  This endpoint must be called from a browser page.
+```
+
+Nothing in your code fixes that, which is why it is the first thing on this
+page. The SDK detects this specific failure and says so, rather than passing the
+server's browser-shaped message through.
 
 ---
 
 ## Quick start
 
 ```tsx
-import { GraineProvider, GraineLauncher } from "@graineai/inapp-react-native";
+import { GraineProvider, GraineAgentBar } from "@graineai/inapp-react-native";
 
 export default function App() {
   return (
     <GraineProvider
-      baseUrl="https://app.graine.ai"
+      baseUrl="https://www.graine.ai"
       publishableKey="pk_live_…"
       variables={{ customer_name: user.firstName }}
     >
       <RootNavigator />
-      <GraineLauncher accent="#318CE7" title="Assistant" />
+      <GraineAgentBar accent="#318CE7" name="Assistant" />
     </GraineProvider>
   );
 }
 ```
 
-Your publishable key is in the Graine dashboard under **Install & domains**.
+Your publishable key is in the dashboard under **Embed & Widgets**.
+
+**Mount the bar at your root, never inside a screen.** The agent's job is to
+move the customer to the right screen — and a bar rendered inside one unmounts
+the instant it does, killing the conversation on the very action that proves the
+feature works.
+
+It is a bar rather than a sheet for the same reason: a sheet covers the screen
+the agent is helping with, so the moment it says "tap Continue", Continue is
+behind it.
 
 ## Tell the agent what the customer can see
 
@@ -55,8 +82,17 @@ discuss a screen the customer has left.
 
 ## Let the agent act
 
-Declare the action on your agent in the dashboard, then implement it where it
-belongs:
+Declare it in the dashboard first — **Embed & Widgets → What this agent may do
+in your app**. Presets cover navigate, fill a field, highlight and retry. Saving
+there also pushes the tools to the agent; a declaration that is saved but not
+synced leaves the agent with the tools it had before, and looks like nothing
+happened.
+
+Declared server-side and nowhere else: a client that could name its own tools
+could invent one and talk the model into calling it. The SDK may only narrow the
+list, never extend it.
+
+Then implement a handler with the same name, where it belongs:
 
 ```tsx
 useGraineAction("fill_pan_from_aadhaar", async () => {
@@ -117,7 +153,7 @@ requests a permission on your behalf.
 > from an APK or IPA, and the web domain allowlist does not apply to mobile
 > apps. Rate limits, single-use connection tickets and your account's credit
 > limits are what bound it. See the
-> [security notes](https://app.graine.ai/docs/in-app/privacy) before launch.
+> [security notes](https://www.graine.ai/docs/in-app/privacy) before launch.
 
 ## Requirements
 
@@ -133,7 +169,7 @@ requests a permission on your behalf.
 | `useGraineScreen(context)` | Report what this screen shows. |
 | `useGraineAction(name, handler)` | Implement one action the agent may call. |
 | `useGraineVoice(adapter, opts)` | Microphone, playback and barge-in. |
-| `GraineLauncher` | Optional default UI. Replace it with your own. |
+| `GraineAgentBar` | Optional default UI. Mount at the root. Replace it with your own. |
 | `addMaskRule(pattern, token)` | Mask an app-specific identifier format. |
 
 `GraineInAppClient` is exported for apps that want the transport without the
@@ -141,7 +177,7 @@ React layer.
 
 ## Support
 
-https://app.graine.ai/docs/in-app
+https://www.graine.ai/docs/in-app
 
 ## License
 

package/dist/client.js

@@ -51,8 +51,16 @@ export class GraineInAppClient {
             body: JSON.stringify({ publishableKey: this.opts.publishableKey }),
         });
         const data = await res.json().catch(() => ({}));
-        if (!res.ok)
+        if (!res.ok) {
+            if (res.status === 403) {
+                throw new Error(`This agent does not accept connections from a mobile app yet. Add "app://" to its ` +
+                    `Allowed domains in the dashboard, under Embed & Widgets. (server said: ${data?.error ?? "forbidden"})`);
+            }
+            if (res.status === 401) {
+                throw new Error(`Publishable key was rejected. Check it against Embed & Widgets in the dashboard.`);
+            }
             throw new Error(data?.error || `Embed rejected (${res.status})`);
+        }
         this.config = data;
         return this.config;
     }

package/dist/index.d.ts

@@ -3,4 +3,4 @@ export { GraineInAppClient, type GraineInAppOptions, type SessionConfig } from "
 export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RATE, type AudioAdapter, type VoiceSessionOptions, } from "./voice";
 export { addMaskRule, maskDeep, maskString } from "./mask";
 export { GraineProvider, useGraineAgent, useGraineScreen, useGraineAction, useGraineVoice, type GraineProviderProps, type Turn, } from "./react-native/index";
-export { GraineLauncher, type GraineLauncherProps } from "./react-native/ui";
+export { GraineAgentBar, GraineLauncher, type GraineAgentBarProps, type GraineLauncherProps } from "./react-native/ui";

package/dist/index.js

@@ -2,4 +2,4 @@ export { GraineInAppClient } from "./client";
 export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RATE, } from "./voice";
 export { addMaskRule, maskDeep, maskString } from "./mask";
 export { GraineProvider, useGraineAgent, useGraineScreen, useGraineAction, useGraineVoice, } from "./react-native/index";
-export { GraineLauncher } from "./react-native/ui";
+export { GraineAgentBar, GraineLauncher } from "./react-native/ui";

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

@@ -1,7 +1,10 @@
 import React from "react";
-export interface GraineLauncherProps {
+export interface GraineAgentBarProps {
     accent?: string;
-    title?: string;
-    bottom?: number;
+    name?: string;
+    bottomInset?: number;
+    hidden?: boolean;
 }
-export declare function GraineLauncher({ accent, title, bottom, }: GraineLauncherProps): React.JSX.Element | null;
+export declare function GraineAgentBar({ accent, name, bottomInset, hidden, }: GraineAgentBarProps): React.JSX.Element | null;
+export declare const GraineLauncher: typeof GraineAgentBar;
+export type GraineLauncherProps = GraineAgentBarProps;

package/dist/react-native/ui.js

@@ -1,125 +1,76 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { ActivityIndicator, Animated, Easing, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ActivityIndicator, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from "react-native";
 import { useGraineAgent } from "./index";
-export function GraineLauncher({ accent = "#318CE7", title = "Assistant", bottom = 24, }) {
-    const { connected, connecting, error, open, setOpen, messages, send } = useGraineAgent();
+export function GraineAgentBar({ accent = "#318CE7", name = "Assistant", bottomInset = 96, hidden = false, }) {
+    const { connected, connecting, error, messages, send } = useGraineAgent();
+    const [expanded, setExpanded] = useState(false);
     const [draft, setDraft] = useState("");
     const scrollRef = useRef(null);
-    const [unread, setUnread] = useState(0);
+    const last = messages[messages.length - 1];
+    const status = error
+        ? "unavailable"
+        : connecting ? "connecting…"
+            : last?.role === "agent" && last.live ? "speaking"
+                : connected ? "listening"
+                    : "starting…";
     useEffect(() => {
-        if (!open && messages[messages.length - 1]?.role === "agent")
-            setUnread((n) => n + 1);
-        if (open)
-            setUnread(0);
-    }, [messages, open]);
-    useEffect(() => {
-        if (open)
+        if (expanded)
             requestAnimationFrame(() => scrollRef.current?.scrollToEnd({ animated: true }));
-    }, [messages, open]);
-    const slide = useRef(new Animated.Value(0)).current;
+    }, [messages, expanded]);
     useEffect(() => {
-        Animated.timing(slide, {
-            toValue: open ? 1 : 0,
-            duration: 180,
-            easing: Easing.out(Easing.quad),
-            useNativeDriver: true,
-        }).start();
-    }, [open, slide]);
-    if (error)
-        return null;
-    const submit = () => {
+        if (!expanded && last?.role === "agent")
+            setExpanded(true);
+    }, [messages.length]);
+    const submit = useCallback(() => {
         const text = draft.trim();
         if (!text)
             return;
         setDraft("");
         send(text);
-    };
-    return (_jsxs(_Fragment, { children: [open && (_jsxs(Animated.View, { style: [
-                    styles.panel,
-                    {
-                        bottom: bottom + 68,
-                        opacity: slide,
-                        transform: [{ translateY: slide.interpolate({ inputRange: [0, 1], outputRange: [12, 0] }) }],
-                    },
-                ], children: [_jsxs(View, { style: [styles.header, { backgroundColor: accent }], children: [_jsx(Text, { style: styles.headerTitle, children: title }), _jsxs(View, { style: styles.headerRight, children: [connected ? _jsx(View, { style: styles.liveDot }) : connecting ? _jsx(ActivityIndicator, { size: "small", color: "#fff" }) : null, _jsx(Pressable, { onPress: () => setOpen(false), hitSlop: 12, accessibilityLabel: "Close assistant", children: _jsx(Text, { style: styles.close, children: "\u2715" }) })] })] }), _jsxs(ScrollView, { ref: scrollRef, style: styles.transcript, contentContainerStyle: styles.transcriptInner, 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: [
+    }, [draft, send]);
+    if (hidden || error)
+        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: [
                                     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: "#9aa0a6", onSubmitEditing: submit, returnKeyType: "send", blurOnSubmit: false }), _jsx(Pressable, { onPress: submit, disabled: !draft.trim(), style: [styles.sendButton, { backgroundColor: accent, opacity: draft.trim() ? 1 : 0.4 }], accessibilityLabel: "Send", children: _jsx(Text, { style: styles.sendLabel, children: "\u2191" }) })] }) })] })), _jsxs(Pressable, { onPress: () => setOpen(!open), style: [styles.launcher, { backgroundColor: accent, bottom }], accessibilityLabel: open ? "Close assistant" : "Open assistant", accessibilityRole: "button", children: [_jsx(Text, { style: styles.launcherIcon, children: open ? "✕" : "✦" }), !open && unread > 0 && _jsx(View, { style: styles.badge })] })] }));
+                                    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" }) })] }) })] })), _jsxs(View, { style: styles.bar, children: [_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: () => 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({
-    launcher: {
-        position: "absolute",
-        right: 20,
-        width: 56,
-        height: 56,
-        borderRadius: 28,
-        alignItems: "center",
-        justifyContent: "center",
-        elevation: 8,
-        shadowColor: "#000",
-        shadowOpacity: 0.22,
-        shadowRadius: 10,
-        shadowOffset: { width: 0, height: 4 },
-    },
-    launcherIcon: { color: "#fff", fontSize: 22, lineHeight: 26 },
-    badge: {
-        position: "absolute",
-        top: 12,
-        right: 12,
-        width: 10,
-        height: 10,
-        borderRadius: 5,
-        backgroundColor: "#ff3b30",
-        borderWidth: 2,
-        borderColor: "#fff",
-    },
+    root: { position: "absolute", left: 12, right: 12, zIndex: 900 },
     panel: {
-        position: "absolute",
-        right: 20,
-        left: 20,
-        maxHeight: 460,
-        backgroundColor: "#fff",
-        borderRadius: 18,
-        overflow: "hidden",
-        elevation: 12,
-        shadowColor: "#000",
-        shadowOpacity: 0.18,
-        shadowRadius: 24,
-        shadowOffset: { width: 0, height: 10 },
+        backgroundColor: "#17161A", borderRadius: 22, borderWidth: 1, borderColor: "rgba(255,255,255,0.09)",
+        marginBottom: 8, overflow: "hidden",
     },
-    header: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", padding: 14 },
-    headerTitle: { color: "#fff", fontWeight: "600", fontSize: 15 },
-    headerRight: { flexDirection: "row", alignItems: "center", gap: 12 },
-    liveDot: { width: 8, height: 8, borderRadius: 4, backgroundColor: "#34d399" },
-    close: { color: "#fff", fontSize: 16 },
-    transcript: { maxHeight: 320 },
-    transcriptInner: { padding: 12, gap: 8 },
-    empty: { color: "#9aa0a6", fontSize: 13, lineHeight: 19, padding: 8 },
-    bubble: { maxWidth: "86%", paddingHorizontal: 12, paddingVertical: 9, borderRadius: 16 },
-    agentBubble: { alignSelf: "flex-start", backgroundColor: "#f1f3f4", borderBottomLeftRadius: 5 },
+    transcript: { maxHeight: 240 },
+    transcriptInner: { padding: 14, gap: 8 },
+    empty: { color: "#9aa0a6", 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 },
     customerBubble: { alignSelf: "flex-end", borderBottomRightRadius: 5 },
-    agentText: { color: "#202124", fontSize: 14, lineHeight: 20 },
-    customerText: { color: "#fff", fontSize: 14, lineHeight: 20 },
-    composer: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 8,
-        padding: 10,
-        borderTopWidth: StyleSheet.hairlineWidth,
-        borderTopColor: "#e8eaed",
-    },
+    agentText: { color: "#F2F3F5", fontSize: 14.5, lineHeight: 21 },
+    customerText: { color: "#fff", fontSize: 14.5, lineHeight: 21 },
+    composer: { flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 12, paddingBottom: 12 },
     input: {
-        flex: 1,
-        paddingHorizontal: 12,
-        paddingVertical: Platform.OS === "ios" ? 10 : 6,
-        backgroundColor: "#f1f3f4",
-        borderRadius: 20,
-        fontSize: 14,
-        color: "#202124",
+        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,
     },
-    sendButton: { width: 36, height: 36, borderRadius: 18, alignItems: "center", justifyContent: "center" },
+    send: { width: 38, height: 38, borderRadius: 19, alignItems: "center", justifyContent: "center" },
     sendLabel: { color: "#fff", fontSize: 17, lineHeight: 20 },
+    bar: {
+        flexDirection: "row", alignItems: "center", gap: 11,
+        backgroundColor: "#17161A", borderRadius: 26, borderWidth: 1, borderColor: "rgba(255,255,255,0.09)",
+        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" },
+    avatarGlyph: { color: "#fff", fontSize: 17, lineHeight: 20 },
+    name: { color: "#F2F3F5", fontSize: 15, fontWeight: "800" },
+    status: { color: "#9aa0a6", fontSize: 12.5, marginTop: 1 },
+    round: {
+        width: 38, height: 38, borderRadius: 19, alignItems: "center", justifyContent: "center",
+        backgroundColor: "rgba(255,255,255,0.08)",
+    },
+    chevron: { color: "#F2F3F5", fontSize: 16, lineHeight: 18 },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graineai/inapp-react-native",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "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",
   "private": false,
@@ -56,8 +56,8 @@
   "engines": {
     "node": ">=18"
   },
-  "homepage": "https://app.graine.ai/docs/in-app",
+  "homepage": "https://www.graine.ai/docs/in-app",
   "bugs": {
-    "url": "https://app.graine.ai/docs/in-app"
+    "url": "https://www.graine.ai/docs/in-app"
   }
 }