@graineai/inapp-react-native 0.20.1 → 0.21.0

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RAT
 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

@@ -3,6 +3,7 @@ export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RAT
 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,6 +1,6 @@
 {
   "name": "@graineai/inapp-react-native",
-  "version": "0.20.1",
+  "version": "0.21.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.",
   "license": "MIT",
@@ -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",