@graineai/inapp-react-native 0.20.1 → 0.22.0

package/dist/client.d.ts

@@ -17,6 +17,16 @@ export interface SessionConfig {
     appearance?: Record<string, any>;
     variables?: Record<string, string>;
     components?: any[];
+    appActions?: Array<{
+        tool_name?: string;
+        toolName?: string;
+        name?: string;
+    }>;
+}
+export interface ActionDiagnosis {
+    usable: string[];
+    undeclared: string[];
+    unhandled: string[];
 }
 export declare class GraineInAppClient {
     readonly opts: GraineInAppOptions;
@@ -46,6 +56,8 @@ export declare class GraineInAppClient {
     private emit;
     private get fetch();
     session(): Promise<SessionConfig>;
+    checkActions(): ActionDiagnosis;
+    private reportActionMismatch;
     private ticket;
     connect(): Promise<void>;
     private openSocket;

package/dist/client.js

@@ -68,8 +68,37 @@ export class GraineInAppClient {
             throw new Error(data?.error || `Embed rejected (${res.status})`);
         }
         this.config = data;
+        this.reportActionMismatch();
         return this.config;
     }
+    checkActions() {
+        const registered = [...this.actions.keys()];
+        const declared = new Set((this.config?.appActions ?? [])
+            .map((a) => a?.tool_name || a?.toolName || a?.name)
+            .filter((n) => Boolean(n)));
+        return {
+            usable: registered.filter((n) => declared.has(n)),
+            undeclared: registered.filter((n) => !declared.has(n)),
+            unhandled: [...declared].filter((n) => !this.actions.has(n)),
+        };
+    }
+    reportActionMismatch() {
+        if (this.actions.size === 0)
+            return;
+        const { undeclared, unhandled } = this.checkActions();
+        if (!undeclared.length && !unhandled.length)
+            return;
+        this.emit("diagnostic", { type: "actions", ...this.checkActions() });
+        if (undeclared.length) {
+            console.warn(`[Graine] This app registered ${undeclared.length} action(s) the agent is not ` +
+                `configured to call, so the agent cannot use them: ${undeclared.join(", ")}. ` +
+                `Add them to the agent's app_actions in Embed & Widgets.`);
+        }
+        if (unhandled.length) {
+            console.warn(`[Graine] The agent is configured to call ${unhandled.length} action(s) this ` +
+                `build does not implement: ${unhandled.join(", ")}. It will be refused mid-sentence.`);
+        }
+    }
     async ticket() {
         try {
             const res = await this.fetch(`${this.opts.baseUrl}/api/embed/ticket`, {

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 export type { ActionHandler, AppActionRequest, AppActionResult, AppEvent, ScreenContext, ScreenField, } from "./protocol.js";
-export { GraineInAppClient, type GraineInAppOptions, type SessionConfig } from "./client.js";
+export { GraineInAppClient, type GraineInAppOptions, type SessionConfig, type ActionDiagnosis, } from "./client.js";
 export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RATE, type AudioAdapter, type VoiceSessionOptions, } from "./voice.js";
 export { EchoGuard, decodeAgentAudio, decodeMuLaw, decodePcm16, base64ToBytes, type AudioFormat, type DecodedAudio, } from "./audio.js";
 export { addMaskRule, maskDeep, maskString } from "./mask.js";
 export { GraineProvider, useGraineAgent, useGraineScreen, useGraineAction, useGraineVoice, useGraineIdentify, useGraineEvents, useGraineTrack, useGraineTap, useGraineHighlight, useGraineWidget, type GraineEvent, type GraineProviderProps, type Turn, type Caption, } from "./react-native/index.js";
+export { resolveNativeAppearance, type NativeAppearance, type NativeAppearanceFallback, } 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 { GraineVoiceLauncher, type GraineVoiceLauncherProps, type GraineVoiceApi, } from "./react-native/voice-launcher.js";

package/dist/index.js

@@ -1,8 +1,9 @@
-export { GraineInAppClient } from "./client.js";
+export { GraineInAppClient, } from "./client.js";
 export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RATE, } from "./voice.js";
 export { EchoGuard, decodeAgentAudio, decodeMuLaw, decodePcm16, base64ToBytes, } from "./audio.js";
 export { addMaskRule, maskDeep, maskString } from "./mask.js";
 export { GraineProvider, useGraineAgent, useGraineScreen, useGraineAction, useGraineVoice, useGraineIdentify, useGraineEvents, useGraineTrack, useGraineTap, useGraineHighlight, useGraineWidget, } from "./react-native/index.js";
+export { resolveNativeAppearance, } from "./react-native/appearance.js";
 export { RtcVoiceSessionController, RtcVoiceError, } from "./react-native/voice-rtc.js";
 export { GraineAgentBar, GraineLauncher, } from "./react-native/ui.js";
 export { GraineVoiceLauncher, } from "./react-native/voice-launcher.js";

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

@@ -0,0 +1,14 @@
+export interface NativeAppearance {
+    accent: string;
+    heading: string;
+    logoUrl: string | null;
+    radius: number;
+}
+export interface NativeAppearanceFallback {
+    accent: string;
+    heading: string;
+    radius?: number;
+    maxRadius?: number;
+    origin?: string;
+}
+export declare function resolveNativeAppearance(appearance: Record<string, any> | null | undefined, fallback: NativeAppearanceFallback): NativeAppearance;

package/dist/react-native/appearance.js

@@ -0,0 +1,29 @@
+const HEX = /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+const RADIUS_CEILING = 48;
+const DEFAULT_ORIGIN = "https://www.graine.ai";
+function clamp(value, max) {
+    if (value < 0)
+        return 0;
+    return value > max ? max : value;
+}
+function numeric(value) {
+    if (typeof value === "number")
+        return Number.isFinite(value) ? value : null;
+    if (typeof value === "string" && value.trim() !== "") {
+        const n = Number(value);
+        return Number.isFinite(n) ? n : null;
+    }
+    return null;
+}
+export function resolveNativeAppearance(appearance, fallback) {
+    const a = appearance || {};
+    const max = clamp(numeric(fallback.maxRadius) ?? RADIUS_CEILING, RADIUS_CEILING);
+    const rawAccent = String(a.accent ?? "").trim();
+    const accent = HEX.test(rawAccent) ? "#" + rawAccent.replace(/^#/, "") : fallback.accent;
+    const heading = String(a.title ?? "").trim() || fallback.heading;
+    const logoKey = String(a.logo ?? "").trim();
+    const origin = String(fallback.origin || DEFAULT_ORIGIN).replace(/\/+$/, "");
+    const logoUrl = logoKey ? `${origin}/api/embed/logo?k=${encodeURIComponent(logoKey)}` : null;
+    const radius = clamp(numeric(a.radius) ?? numeric(fallback.radius) ?? 18, max);
+    return { accent, heading, logoUrl, radius };
+}

package/dist/react-native/index.js

@@ -148,6 +148,15 @@ export function GraineProvider({ children, autoConnect = true, onProactive, endO
                 ? { ...prev, text: prev.text + text }
                 : { role: "agent", text, live: true })),
         ];
+        (async () => {
+            try {
+                const cfg = client.config ?? (await client.session());
+                if (cfg?.appearance)
+                    setAppearance(cfg.appearance);
+            }
+            catch {
+            }
+        })();
         offs.push(client.registerAction("highlight_element", async (args) => {
             const name = String(args?.name || args?.element || args?.target || "");
             const known = client.getHighlightables();

package/dist/react-native/ui.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } 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 { useGraineAgent } from "./index.js";
+import { resolveNativeAppearance } from "./appearance.js";
 const DARK = {
     surface: "#17161A",
     border: "rgba(255,255,255,0.09)",
@@ -22,9 +23,13 @@ const LIGHT = {
 };
 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 dashboard = resolveNativeAppearance(appearance, {
+        accent: "#318CE7",
+        heading: "Assistant",
+    });
+    const accent = accentProp ?? dashboard.accent;
+    const name = nameProp ?? dashboard.heading;
+    const avatarUrl = avatarProp ?? dashboard.logoUrl ?? undefined;
     const deviceScheme = useColorScheme();
     const styles = useMemo(() => {
         const base = (scheme === "auto" ? deviceScheme === "light" : scheme === "light") ? LIGHT : DARK;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@graineai/inapp-react-native",
-  "version": "0.20.1",
+  "version": "0.22.0",
   "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.",
+  "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,
   "main": "dist/index.js",
@@ -32,7 +32,8 @@
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json",
     "typecheck": "tsc -p tsconfig.build.json --noEmit",
-    "prepublishOnly": "npm run build && node scripts/verify-package-clean.mjs"
+    "test": "npm run build && node --test test/*.test.mjs",
+    "prepublishOnly": "npm test && node scripts/verify-package-clean.mjs"
   },
   "peerDependencies": {
     "react": ">=17",