@graineai/inapp-react-native 0.36.0 → 0.37.0

package/dist/react-native/ui.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Image, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, useColorScheme, View, } from "react-native";
+import { Animated, Image, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, useColorScheme, View, } from "react-native";
 import { useKeyboardLift } from "./keyboard.js";
 import { useDraggablePlacement } from "./placement.js";
 import { useGraineAgent } from "./index.js";
 import { GraineLoader } from "./loader.js";
 import { resolveNativeAppearance } from "./appearance.js";
+import { useDesign } from "./use-design.js";
+import { letterSpacing, lineHeight, onAccentFor, shadowStyle, softFor, surfaceFill } from "./design-math.js";
+import { normaliseHex, readableOn } from "../theme.js";
 const DARK = {
     surface: "#17161A",
     border: "rgba(255,255,255,0.09)",
@@ -31,14 +34,17 @@ export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl:
         accent: "#318CE7",
         heading: "Assistant",
     });
-    const accent = accentProp ?? dashboard.accent;
+    const look = useDesign(scheme);
+    const accent = accentProp ?? (look.classic ? dashboard.accent : look.tokens.colors.accent);
     const name = nameProp ?? dashboard.heading;
     const avatarUrl = avatarProp ?? dashboard.logoUrl ?? undefined;
     const deviceScheme = useColorScheme();
     const styles = useMemo(() => {
+        if (!look.classic)
+            return makeDesignStyles(look, accent, themeProp);
         const base = (scheme === "auto" ? deviceScheme === "light" : scheme === "light") ? LIGHT : DARK;
         return makeStyles(themeProp ? { ...base, ...themeProp } : base);
-    }, [scheme, deviceScheme, themeProp]);
+    }, [scheme, deviceScheme, themeProp, look, accent]);
     const [expanded, setExpanded] = useState(surface === "chat");
     const keyboardLift = useKeyboardLift();
     const baseBottom = launcherInset.bottom ?? bottomInset;
@@ -51,6 +57,21 @@ export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl:
     const [captions, setCaptions] = useState(captionsOn);
     const [draft, setDraft] = useState("");
     const scrollRef = useRef(null);
+    const panelIn = useRef(new Animated.Value(1)).current;
+    const lookRef = useRef(look);
+    lookRef.current = look;
+    const still = look.classic || look.durationMs <= 0;
+    useEffect(() => {
+        if (!expanded || still) {
+            panelIn.setValue(1);
+            return;
+        }
+        panelIn.setValue(0);
+        const { durationMs, easing } = lookRef.current;
+        const a = Animated.timing(panelIn, { toValue: 1, duration: durationMs, easing, useNativeDriver: true });
+        a.start();
+        return () => a.stop();
+    }, [expanded, still, panelIn]);
     const last = messages[messages.length - 1];
     const waiting = connecting;
     const waitingMoment = "connecting";
@@ -89,13 +110,16 @@ export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl:
                 right: launcherInset.right ?? 12,
                 left: launcherInset.left ?? 12,
             },
-        ], children: [expanded && (_jsxs(View, { style: styles.panel, children: [_jsxs(ScrollView, { ref: scrollRef, style: [styles.transcript, keyboardLift ? styles.transcriptLifted : null], contentContainerStyle: styles.transcriptInner, showsVerticalScrollIndicator: false, children: [messages.length === 0 && (_jsx(Text, { style: styles.empty, children: isChat
+        ], children: [expanded && (_jsxs(PanelFrame, { animated: !look.classic, style: look.classic ? styles.panel : [styles.panel, {
+                        opacity: panelIn,
+                        transform: [{ translateY: panelIn.interpolate({ inputRange: [0, 1], outputRange: [8, 0] }) }],
+                    }], children: [look.classic ? null : (_jsx(View, { style: styles.header, children: _jsx(Text, { numberOfLines: 1, style: styles.headerTitle, children: name }) })), _jsxs(ScrollView, { ref: scrollRef, style: [styles.transcript, keyboardLift ? styles.transcriptLifted : null], contentContainerStyle: styles.transcriptInner, showsVerticalScrollIndicator: false, children: [messages.length === 0 && (_jsx(Text, { style: styles.empty, children: isChat
                                     ? "I can see what you\u2019re working on \u2014 type a question, or I\u2019ll step in if you get stuck."
                                     : "I can see what you\u2019re working on \u2014 ask me anything, or I\u2019ll step in if you get stuck." })), messages.map((m, i) => (_jsx(View, { style: [
                                     styles.bubble,
-                                    m.role === "agent" ? styles.agentBubble : [styles.customerBubble, { backgroundColor: accent }],
+                                    m.role === "agent" ? styles.agentBubble : [styles.customerBubble, look.classic ? { backgroundColor: accent } : null],
                                 ], children: _jsx(Text, { style: m.role === "agent" ? styles.agentText : styles.customerText, children: m.text }) }, i)))] }), _jsx(View, { 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 && !isChat && 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: () => { if (!drag.dragging)
-                            setExpanded((v) => !v); }, style: { flex: 1 }, accessibilityLabel: expanded ? "Collapse" : "Expand", children: [_jsx(Text, { style: styles.name, children: name }), waiting ? (_jsx(GraineLoader, { moment: waitingMoment, size: 15 })) : (_jsx(Text, { style: styles.status, children: status }))] }), canSwitch ? (_jsx(Pressable, { onPress: () => setSurface(isChat ? "voice" : "chat"), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: isChat ? "Switch to a call" : "Switch to chat", style: styles.round, children: _jsx(Text, { style: styles.glyph, children: isChat ? "📞" : "💬" }) })) : null, waiting ? null : (_jsxs(_Fragment, { children: [isChat ? null : (_jsxs(_Fragment, { children: [_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 ? "⌄" : "⌃" }) })] }))] })] }));
+                            setExpanded((v) => !v); }, style: { flex: 1 }, accessibilityLabel: expanded ? "Collapse" : "Expand", children: [_jsx(Text, { style: styles.name, children: name }), waiting ? (_jsx(GraineLoader, { moment: waitingMoment, size: 15 })) : (_jsx(Text, { style: styles.status, children: status }))] }), canSwitch ? (_jsx(Pressable, { onPress: () => setSurface(isChat ? "voice" : "chat"), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: isChat ? "Switch to a call" : "Switch to chat", style: styles.round, children: _jsx(Text, { style: styles.glyph, children: isChat ? "📞" : "💬" }) })) : null, waiting ? null : (_jsxs(_Fragment, { children: [isChat ? null : (_jsxs(_Fragment, { children: [_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, !look.classic && styles.mic, muted && styles.muted, !connected && { opacity: 0.4 }], children: _jsx(Text, { style: [styles.glyph, !look.classic && styles.glyphOnAccent, muted && (look.classic ? styles.glyphOnAccent : styles.glyphOnDanger)], 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 makeStyles = (t) => StyleSheet.create({
@@ -148,3 +172,112 @@ const makeStyles = (t) => StyleSheet.create({
     },
     chevron: { color: t.text, fontSize: 16, lineHeight: 18 },
 });
+function PanelFrame({ animated, style, children }) {
+    return animated ? _jsx(Animated.View, { style: style, children: children }) : _jsx(View, { style: style, children: children });
+}
+function makeDesignStyles(look, accent, over) {
+    const t = look.tokens;
+    const c = t.colors;
+    const f = t.font;
+    const r = t.shape.radius;
+    const bw = t.shape.borderWidth;
+    const pad = t.spacing.cardPadding;
+    const surface = over?.surface ?? surfaceFill(c.surface, t);
+    const border = over?.border ?? c.border;
+    const text = over?.text ?? c.text;
+    const sub = over?.sub ?? c.textMuted;
+    const chip = over?.chip ?? softFor(accent, t);
+    const onAccent = over?.onAccent ?? onAccentFor(accent, t);
+    const danger = over?.danger ?? c.danger;
+    const bodyFont = look.font(f.body);
+    const headingFont = look.font(f.heading);
+    const body = {
+        fontSize: f.scale.body,
+        lineHeight: lineHeight(f.scale.body, f.lineHeight.body),
+        fontWeight: String(f.weights.body),
+        letterSpacing: letterSpacing(f.scale.body, f.letterSpacing.body),
+        fontFamily: bodyFont,
+    };
+    const mode = t.bubbles === "outline" || t.bubbles === "minimal" ? t.bubbles : "filled";
+    const followsAccent = normaliseHex(c.userBubble) === normaliseHex(c.accent);
+    const ownAccent = normaliseHex(accent) === normaliseHex(c.accent);
+    const userBubble = followsAccent ? accent : c.userBubble;
+    const userText = followsAccent
+        ? (over?.onAccent ?? (ownAccent ? c.userBubbleText : readableOn(accent, [c.userBubbleText, "#FFFFFF", "#101318"])))
+        : c.userBubbleText;
+    const agentBubble = mode === "filled" ? { backgroundColor: over?.chip ?? c.agentBubble }
+        : mode === "outline" ? { backgroundColor: "transparent", borderWidth: bw, borderColor: border }
+            : { backgroundColor: "transparent", paddingHorizontal: 0, paddingVertical: 2, borderRadius: 0 };
+    const customerBubble = mode === "filled" ? { backgroundColor: userBubble }
+        : mode === "outline" ? { backgroundColor: "transparent", borderWidth: bw, borderColor: accent }
+            : { backgroundColor: softFor(accent, t) };
+    return StyleSheet.create({
+        root: { position: "absolute", left: 12, right: 12, zIndex: 900 },
+        panel: {
+            backgroundColor: c.background, borderRadius: r.xl, borderWidth: bw, borderColor: border,
+            marginBottom: 8, overflow: "hidden",
+        },
+        header: {
+            backgroundColor: surface, paddingHorizontal: pad, paddingVertical: Math.round(pad * 0.75),
+            borderBottomWidth: bw, borderBottomColor: border,
+        },
+        headerTitle: {
+            color: text, fontFamily: headingFont, fontSize: f.scale.title, fontWeight: String(f.weights.title),
+            letterSpacing: letterSpacing(f.scale.title, f.letterSpacing.title), lineHeight: lineHeight(f.scale.title, f.lineHeight.title),
+        },
+        transcript: { maxHeight: 240 },
+        transcriptLifted: { maxHeight: 150 },
+        transcriptInner: { padding: pad, gap: Math.max(4, Math.round(t.spacing.gap * 0.8)) },
+        empty: { color: sub, ...body },
+        bubble: {
+            maxWidth: "88%", paddingHorizontal: pad, paddingVertical: Math.round(pad * 0.75), borderRadius: r.lg,
+        },
+        agentBubble: { alignSelf: "flex-start", borderBottomLeftRadius: r.sm, ...agentBubble },
+        customerBubble: { alignSelf: "flex-end", borderBottomRightRadius: r.sm, ...customerBubble },
+        agentText: { color: mode === "filled" ? (over?.text ?? c.agentBubbleText) : text, ...body },
+        customerText: { color: mode === "filled" ? userText : text, ...body },
+        composer: {
+            flexDirection: "row", alignItems: "center", gap: 8,
+            paddingHorizontal: Math.round((pad * 6) / 7), paddingBottom: Math.round((pad * 6) / 7),
+        },
+        input: {
+            flex: 1, backgroundColor: c.surfaceRaised, borderWidth: bw, borderColor: border, borderRadius: r.xl,
+            paddingHorizontal: 14, paddingVertical: Platform.OS === "ios" ? 10 : 7, color: text,
+            fontSize: f.scale.body, fontFamily: bodyFont,
+        },
+        send: { width: 38, height: 38, borderRadius: 19, alignItems: "center", justifyContent: "center" },
+        sendLabel: { color: onAccent, fontSize: 17, lineHeight: 20 },
+        bar: {
+            flexDirection: "row", alignItems: "center", gap: 11,
+            backgroundColor: surface, borderRadius: r.xl, borderWidth: bw, borderColor: border,
+            paddingHorizontal: 8, paddingVertical: 8,
+            ...shadowStyle(t.elevation.floating),
+        },
+        avatar: { width: 38, height: 38, borderRadius: 19, alignItems: "center", justifyContent: "center" },
+        avatarImage: { width: 38, height: 38, borderRadius: 19, backgroundColor: chip },
+        captionWrap: {
+            backgroundColor: surface, borderRadius: r.lg, borderWidth: bw, borderColor: border,
+            paddingHorizontal: pad, paddingVertical: Math.round(pad * 0.8), marginBottom: 8,
+            ...shadowStyle(t.elevation.card),
+        },
+        caption: { color: text, ...body, fontWeight: String(f.weights.strong) },
+        captionLive: { opacity: 0.8 },
+        glyph: { color: text, fontSize: f.scale.caption + 1, fontWeight: String(f.weights.strong) },
+        glyphOnAccent: { color: onAccent },
+        glyphOnDanger: { color: "#FFFFFF" },
+        placeholder: { color: sub },
+        mic: { backgroundColor: accent },
+        muted: { backgroundColor: danger },
+        avatarGlyph: { color: onAccent, fontSize: 17, lineHeight: 20 },
+        name: {
+            color: text, fontSize: f.scale.body, fontWeight: String(f.weights.title), fontFamily: headingFont,
+            letterSpacing: letterSpacing(f.scale.body, f.letterSpacing.title),
+        },
+        status: { color: sub, fontSize: f.scale.caption, marginTop: 1, fontFamily: bodyFont },
+        round: {
+            width: 38, height: 38, borderRadius: 19, alignItems: "center", justifyContent: "center",
+            backgroundColor: chip,
+        },
+        chevron: { color: text, fontSize: 16, lineHeight: 18 },
+    });
+}

package/dist/react-native/use-design.d.ts

@@ -0,0 +1,14 @@
+import { type MotionEasing, type ResolvedDesign, type ThemeTokens } from "../theme.js";
+export declare function useReduceMotion(): boolean;
+export declare function easingOf(easing: MotionEasing | string, bounce: number): (t: number) => number;
+export interface DesignLook {
+    design: ResolvedDesign;
+    tokens: ThemeTokens;
+    classic: boolean;
+    font: (family: string) => string | undefined;
+    durationMs: number;
+    reduceMotion: boolean;
+    easing: (t: number) => number;
+}
+export declare function useDesign(scheme?: "light" | "dark" | "auto"): DesignLook;
+export declare function useGraineTheme(): ThemeTokens;

package/dist/react-native/use-design.js

@@ -0,0 +1,72 @@
+import { useContext, useEffect, useMemo, useState } from "react";
+import { AccessibilityInfo, Easing, useColorScheme } from "react-native";
+import { Ctx } from "./index.js";
+import { sessionDesign } from "../design.js";
+import { pickTokens } from "../theme.js";
+import { fontFamilyFor, isClassicLook } from "./design-math.js";
+const DEFAULT_DESIGN = sessionDesign(null);
+const classicSeen = new WeakMap();
+function classic(design) {
+    let v = classicSeen.get(design);
+    if (v === undefined) {
+        v = isClassicLook(design);
+        classicSeen.set(design, v);
+    }
+    return v;
+}
+export function useReduceMotion() {
+    const [reduce, setReduce] = useState(false);
+    useEffect(() => {
+        let live = true;
+        const info = AccessibilityInfo;
+        try {
+            info?.isReduceMotionEnabled?.()?.then?.((v) => { if (live)
+                setReduce(!!v); }, () => { });
+        }
+        catch { }
+        let sub = null;
+        try {
+            sub = info?.addEventListener?.("reduceMotionChanged", (v) => setReduce(!!v));
+        }
+        catch {
+            sub = null;
+        }
+        return () => { live = false; try {
+            sub?.remove?.();
+        }
+        catch { } };
+    }, []);
+    return reduce;
+}
+export function easingOf(easing, bounce) {
+    if (easing === "linear" || easing === "none")
+        return Easing.linear;
+    if (easing === "emphasized")
+        return Easing.bezier(0.05, 0.7, 0.1, 1);
+    if (easing === "spring")
+        return Easing.out(Easing.back(Math.max(0.5, bounce * 4)));
+    return Easing.bezier(0.2, 0, 0, 1);
+}
+export function useDesign(scheme) {
+    const ctx = useContext(Ctx);
+    const device = useColorScheme();
+    const reduce = useReduceMotion();
+    const design = ctx?.design ?? DEFAULT_DESIGN;
+    const fonts = ctx?.fonts ?? null;
+    return useMemo(() => {
+        const tokens = scheme === "light" ? design.light : scheme === "dark" ? design.dark : pickTokens(design, device);
+        const durationMs = reduce || tokens.motion.easing === "none" ? 0 : Math.max(0, tokens.motion.durationMs);
+        return {
+            design,
+            tokens,
+            classic: classic(design),
+            font: (family) => fontFamilyFor(family, fonts),
+            durationMs,
+            reduceMotion: reduce,
+            easing: easingOf(tokens.motion.easing, tokens.motion.bounce),
+        };
+    }, [design, fonts, device, reduce, scheme]);
+}
+export function useGraineTheme() {
+    return useDesign().tokens;
+}