@graineai/inapp-react-native 0.11.1 → 0.12.0

package/INTEGRATION.md

@@ -318,6 +318,62 @@ part. Everything else is unchanged.
 
 ---
 
+## Making the bar yours
+
+Three levels, and most apps stop at the first.
+
+**1. The dashboard.** Accent, title and logo come from Appearance on the agent
+and reach every surface without an app release. Set the colour in Graine and it
+changes here. This is the level a brand team should be working at.
+
+**2. Props, when the dashboard cannot express it.** Any prop passed wins over
+the dashboard, so an app that needs something per-build still can.
+
+```tsx
+<GraineAgentBar
+  scheme="auto"            // "dark" | "light" | "auto" (default) — follows the device
+  accent="#318CE7"         // overrides the dashboard
+  name="Ring"
+  bottomInset={110}        // clear of your tab bar
+  captionsOn
+/>
+```
+
+`scheme` defaults to `auto` rather than dark: an agent that ignores the system
+setting is the one piece of the screen that looks like it came from somewhere
+else. Pin it only if your app pins its own.
+
+**3. The palette, when your brand is not one of the two.** `theme` is merged
+over the scheme's colours, so pass the one you care about:
+
+```tsx
+import type { GraineBarTheme } from "@graineai/inapp-react-native";
+
+<GraineAgentBar theme={{ surface: "#0E1116", border: "#232A33" }} />
+```
+
+| Key | Where it lands |
+|---|---|
+| `surface` | The bar, the expanded panel, the caption bubble |
+| `border` | Hairline around all three |
+| `text` | The agent's name, its replies, what the customer types |
+| `sub` | Status line, placeholder, empty state |
+| `chip` | Quiet round buttons, and the agent's message bubbles |
+| `onAccent` | Text and glyphs sitting on the accent, and on `danger` |
+| `danger` | Muted — the one state worth its own colour |
+
+**4. Or draw your own.** Everything the bar does is built on the public hooks,
+so an app with a design system should ignore the component entirely:
+
+```tsx
+const { connected, muted, setMuted, messages, send, caption } = useGraineAgent();
+```
+
+That is the expected path for anyone with a brand team, and nothing else in the
+SDK depends on this component.
+
+---
+
 ## Session lifecycle
 
 One session per client, and it follows the app.

package/dist/index.d.ts

@@ -4,6 +4,6 @@ export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RAT
 export { EchoGuard, decodeAgentAudio, decodeMuLaw, decodePcm16, base64ToBytes, type AudioFormat, type DecodedAudio, } from "./audio";
 export { addMaskRule, maskDeep, maskString } from "./mask";
 export { GraineProvider, useGraineAgent, useGraineScreen, useGraineAction, useGraineVoice, useGraineIdentify, useGraineEvents, useGraineTrack, useGraineTap, type GraineEvent, type GraineProviderProps, type Turn, type Caption, } from "./react-native/index";
-export { GraineAgentBar, GraineLauncher, type GraineAgentBarProps, type GraineLauncherProps } from "./react-native/ui";
+export { GraineAgentBar, GraineLauncher, type GraineAgentBarProps, type GraineLauncherProps, type GraineBarTheme, } from "./react-native/ui";
 export { GraineVoiceLauncher, type GraineVoiceLauncherProps, type GraineVoiceApi, } from "./react-native/voice-launcher";
 export { LauncherVisibilityTracker, activeRouteName, type LauncherInset, type LauncherContinuity, type LauncherDelayPolicy, type LauncherGroup, type LauncherVisibility, type VisibilityDecision, } from "./react-native/navigation";

package/dist/index.js

@@ -3,6 +3,6 @@ export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RAT
 export { EchoGuard, decodeAgentAudio, decodeMuLaw, decodePcm16, base64ToBytes, } from "./audio";
 export { addMaskRule, maskDeep, maskString } from "./mask";
 export { GraineProvider, useGraineAgent, useGraineScreen, useGraineAction, useGraineVoice, useGraineIdentify, useGraineEvents, useGraineTrack, useGraineTap, } from "./react-native/index";
-export { GraineAgentBar, GraineLauncher } from "./react-native/ui";
+export { GraineAgentBar, GraineLauncher, } from "./react-native/ui";
 export { GraineVoiceLauncher, } from "./react-native/voice-launcher";
 export { LauncherVisibilityTracker, activeRouteName, } from "./react-native/navigation";

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

@@ -1,4 +1,13 @@
 import React from "react";
+export interface GraineBarTheme {
+    surface: string;
+    border: string;
+    text: string;
+    sub: string;
+    chip: string;
+    onAccent: string;
+    danger: string;
+}
 export interface GraineAgentBarProps {
     accent?: string;
     name?: string;
@@ -6,7 +15,9 @@ export interface GraineAgentBarProps {
     bottomInset?: number;
     hidden?: boolean;
     captionsOn?: boolean;
+    scheme?: "dark" | "light" | "auto";
+    theme?: Partial<GraineBarTheme>;
 }
-export declare function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl: avatarProp, bottomInset, hidden, captionsOn, }: GraineAgentBarProps): React.JSX.Element | null;
+export declare function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl: avatarProp, bottomInset, hidden, captionsOn, scheme, theme: themeProp, }: GraineAgentBarProps): React.JSX.Element | null;
 export declare const GraineLauncher: typeof GraineAgentBar;
 export type GraineLauncherProps = GraineAgentBarProps;

package/dist/react-native/ui.js

@@ -1,12 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { ActivityIndicator, Image, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from "react-native";
+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";
-export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl: avatarProp, bottomInset = 96, hidden = false, captionsOn = false, }) {
+const DARK = {
+    surface: "#17161A",
+    border: "rgba(255,255,255,0.09)",
+    text: "#F2F3F5",
+    sub: "#9aa0a6",
+    chip: "rgba(255,255,255,0.08)",
+    onAccent: "#FFFFFF",
+    danger: "#E5484D",
+};
+const LIGHT = {
+    surface: "#FFFFFF",
+    border: "rgba(0,0,0,0.10)",
+    text: "#16181C",
+    sub: "#61666D",
+    chip: "rgba(0,0,0,0.05)",
+    onAccent: "#FFFFFF",
+    danger: "#D32F2F",
+};
+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 deviceScheme = useColorScheme();
+    const styles = useMemo(() => {
+        const base = (scheme === "auto" ? deviceScheme === "light" : scheme === "light") ? LIGHT : DARK;
+        return makeStyles(themeProp ? { ...base, ...themeProp } : base);
+    }, [scheme, deviceScheme, themeProp]);
     const [expanded, setExpanded] = useState(false);
     const [captions, setCaptions] = useState(captionsOn);
     const [draft, setDraft] = useState("");
@@ -18,7 +41,7 @@ export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl:
             : muted ? "muted"
                 : agentSpeaking || (last?.role === "agent" && last.live) ? "speaking"
                     : connected ? "listening"
-                        : "starting…";
+                        : "offline";
     useEffect(() => {
         if (expanded)
             requestAnimationFrame(() => scrollRef.current?.scrollToEnd({ animated: true }));
@@ -46,51 +69,55 @@ 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: "#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" }) })] }) })] })), 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 && { color: "#fff" }], 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 && { color: "#fff" }], 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 }), _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 ? "⌄" : "⌃" }) })] })] }));
 }
 export const GraineLauncher = GraineAgentBar;
-const styles = StyleSheet.create({
+const makeStyles = (t) => StyleSheet.create({
     root: { position: "absolute", left: 12, right: 12, zIndex: 900 },
     panel: {
-        backgroundColor: "#17161A", borderRadius: 22, borderWidth: 1, borderColor: "rgba(255,255,255,0.09)",
+        backgroundColor: t.surface, borderRadius: 22, borderWidth: 1, borderColor: t.border,
         marginBottom: 8, overflow: "hidden",
     },
     transcript: { maxHeight: 240 },
     transcriptInner: { padding: 14, gap: 8 },
-    empty: { color: "#9aa0a6", fontSize: 14, lineHeight: 21 },
+    empty: { color: t.sub, 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 },
+    agentBubble: { alignSelf: "flex-start", backgroundColor: t.chip, borderBottomLeftRadius: 5 },
     customerBubble: { alignSelf: "flex-end", borderBottomRightRadius: 5 },
-    agentText: { color: "#F2F3F5", fontSize: 14.5, lineHeight: 21 },
-    customerText: { color: "#fff", fontSize: 14.5, lineHeight: 21 },
+    agentText: { color: t.text, fontSize: 14.5, lineHeight: 21 },
+    customerText: { color: t.onAccent, fontSize: 14.5, lineHeight: 21 },
     composer: { flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 12, paddingBottom: 12 },
     input: {
-        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,
+        flex: 1, borderWidth: 1, borderColor: t.border, borderRadius: 16,
+        paddingHorizontal: 12, paddingVertical: Platform.OS === "ios" ? 10 : 7, color: t.text, fontSize: 14.5,
     },
     send: { width: 38, height: 38, borderRadius: 19, alignItems: "center", justifyContent: "center" },
-    sendLabel: { color: "#fff", fontSize: 17, lineHeight: 20 },
+    sendLabel: { color: t.onAccent, fontSize: 17, lineHeight: 20 },
     bar: {
         flexDirection: "row", alignItems: "center", gap: 11,
-        backgroundColor: "#17161A", borderRadius: 26, borderWidth: 1, borderColor: "rgba(255,255,255,0.09)",
+        backgroundColor: t.surface, borderRadius: 26, borderWidth: 1, borderColor: t.border,
         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" },
-    avatarImage: { width: 38, height: 38, borderRadius: 19, backgroundColor: "rgba(255,255,255,0.08)" },
+    avatarImage: { width: 38, height: 38, borderRadius: 19, backgroundColor: t.chip },
     captionWrap: {
-        backgroundColor: "rgba(0,0,0,0.72)", borderRadius: 16, paddingHorizontal: 14, paddingVertical: 10, marginBottom: 8,
+        backgroundColor: t.surface, borderRadius: 18, borderWidth: 1, borderColor: t.border,
+        paddingHorizontal: 14, paddingVertical: 11, marginBottom: 8,
+        shadowColor: "#000", shadowOpacity: 0.18, shadowRadius: 12, shadowOffset: { width: 0, height: 4 }, elevation: 6,
     },
-    caption: { color: "#fff", fontSize: 15, lineHeight: 21, fontWeight: "600" },
+    caption: { color: t.text, fontSize: 15, lineHeight: 21, fontWeight: "600" },
     captionLive: { opacity: 0.8 },
-    glyph: { color: "#F2F3F5", fontSize: 13, fontWeight: "800" },
-    muted: { backgroundColor: "#E5484D" },
-    avatarGlyph: { color: "#fff", fontSize: 17, lineHeight: 20 },
-    name: { color: "#F2F3F5", fontSize: 15, fontWeight: "800" },
-    status: { color: "#9aa0a6", fontSize: 12.5, marginTop: 1 },
+    glyph: { color: t.text, fontSize: 13, fontWeight: "800" },
+    glyphOnAccent: { color: t.onAccent },
+    placeholder: { color: t.sub },
+    muted: { backgroundColor: t.danger },
+    avatarGlyph: { color: t.onAccent, fontSize: 17, lineHeight: 20 },
+    name: { color: t.text, fontSize: 15, fontWeight: "800" },
+    status: { color: t.sub, fontSize: 12.5, marginTop: 1 },
     round: {
         width: 38, height: 38, borderRadius: 19, alignItems: "center", justifyContent: "center",
-        backgroundColor: "rgba(255,255,255,0.08)",
+        backgroundColor: t.chip,
     },
-    chevron: { color: "#F2F3F5", fontSize: 16, lineHeight: 18 },
+    chevron: { color: t.text, fontSize: 16, lineHeight: 18 },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graineai/inapp-react-native",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "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,