crowdplaysdk 0.3.1 → 0.3.4

package/ios/CrowdPlayRNModule.swift

@@ -42,6 +42,16 @@ final class CrowdPlayRNCore {
                 self?.send("crowdplay:recording", body)
             }.store(in: &cancellables)
 
+        // Live captions (M8 voice UI): each line the AI or user speaks, as
+        // broadcast by the agent on the data channel.
+        engine.$latestCaption
+            .compactMap { $0 }
+            .sink { [weak self] caption in
+                self?.send("crowdplay:caption", [
+                    "role": caption.role, "text": caption.text,
+                ])
+            }.store(in: &cancellables)
+
         engine.$uploads
             .combineLatest(engine.$uploadsOnWiFi)
             .sink { [weak self] uploads, onWifi in
@@ -122,6 +132,38 @@ final class CrowdPlayRNCore {
                       message: engine.micPolicyViolation ?? "")
     }
 
+    // MARK: - Voice-agent activity (M8 voice UI)
+
+    private var voiceTimer: Timer?
+
+    /// Fast (0.15 s) voice-activity stream for the animated voice UI —
+    /// runs only while some JS component is subscribed, so the bridge
+    /// stays quiet for apps that never render it.
+    func startVoiceActivity() {
+        guard voiceTimer == nil else { return }
+        voiceTimer = Timer.scheduledTimer(withTimeInterval: 0.15, repeats: true) { _ in
+            Task { @MainActor in CrowdPlayRNCore.shared.voiceTick() }
+        }
+    }
+
+    func stopVoiceActivity() {
+        voiceTimer?.invalidate()
+        voiceTimer = nil
+    }
+
+    private func voiceTick() {
+        guard emitter != nil else { return }
+        let activity = engine.voiceActivity()
+        send("crowdplay:voiceActivity", [
+            "agentPresent": activity.agentPresent,
+            "agentSpeaking": activity.agentSpeaking,
+            "agentLevel": activity.agentLevel,
+            "localLevelDbfs": activity.localLevelDbfs as Any,
+            "localSpeaking": activity.localSpeaking,
+            "connected": engine.phase == .connected,
+        ])
+    }
+
     private func updateWarning(_ kind: String, active: Bool, message: String) {
         let was = activeWarnings.contains(kind)
         guard was != active else { return }
@@ -178,7 +220,15 @@ public final class CrowdPlayRNModule: RCTEventEmitter {
     public override static func requiresMainQueueSetup() -> Bool { true }
 
     public override func supportedEvents() -> [String]! {
-        ["crowdplay:phase", "crowdplay:recording", "crowdplay:uploads", "crowdplay:participants", "crowdplay:warning", "crowdplay:audioRoute"]
+        ["crowdplay:phase", "crowdplay:recording", "crowdplay:uploads", "crowdplay:participants", "crowdplay:warning", "crowdplay:audioRoute", "crowdplay:voiceActivity", "crowdplay:caption"]
+    }
+
+    @objc public func startVoiceActivityUpdates() {
+        Task { @MainActor in CrowdPlayRNCore.shared.startVoiceActivity() }
+    }
+
+    @objc public func stopVoiceActivityUpdates() {
+        Task { @MainActor in CrowdPlayRNCore.shared.stopVoiceActivity() }
     }
 
     public override func startObserving() {

package/ios/CrowdPlayReactNative.m

@@ -27,6 +27,8 @@ RCT_EXTERN_METHOD(setAudioOutput : (NSString *)output)
 RCT_EXTERN_METHOD(retryRecording)
 RCT_EXTERN_METHOD(retryUploads)
 RCT_EXTERN_METHOD(warmUp)
+RCT_EXTERN_METHOD(startVoiceActivityUpdates)
+RCT_EXTERN_METHOD(stopVoiceActivityUpdates)
 RCT_EXTERN_METHOD(snapshot : (RCTPromiseResolveBlock)resolve
                   rejecter : (RCTPromiseRejectBlock)reject)
 RCT_EXTERN_METHOD(doctor : (RCTPromiseResolveBlock)resolve

package/ios/wire.rb

@@ -25,7 +25,7 @@ SDK_URL = 'https://github.com/symbiateam/crowdplaysdk'
 # The ENGINE release this bridge was tested against. The npm package
 # version may be AHEAD of this (bridge/docs fixes ship without a new
 # engine binary); that is deliberate, not drift.
-SDK_VERSION = '0.3.1'
+SDK_VERSION = '0.3.4'
 BRIDGE_FILES = ['CrowdPlayRNModule.swift', 'CrowdPlayRNVideoView.swift', 'CrowdPlayReactNative.m'].freeze
 
 project_name = ARGV[0] or abort 'usage: ruby wire.rb <YourProjectName>'

package/lib/VoiceView.d.ts

@@ -0,0 +1,53 @@
+/**
+ * The standard voice-AI visual (founders, 2026-08-22): a breathing orb in
+ * the style of realtime assistants — calm while idle, a cool ring while the
+ * user talks, an energetic pulse while the AI speaks. The React Native
+ * counterpart of the native SDK's CrowdPlayVoiceView, driven by the same
+ * engine signal over a fast bridge event that runs only while mounted.
+ *
+ * Two levels of customization:
+ * 1. Props on <CrowdPlayVoiceView> — colors and size of the built-in orb.
+ * 2. useVoiceActivity() — the phase + smoothed energy underneath, for apps
+ *    that want to draw something entirely their own.
+ */
+import React from 'react';
+export type VoicePhase = 'connecting' | 'idle' | 'listening' | 'speaking';
+export interface VoiceActivity {
+    phase: VoicePhase;
+    /** 0…1, smoothed (fast attack, slow release). */
+    energy: number;
+}
+/** Live phase + energy from the call engine. Subscribing starts the native
+ * fast stream; the last unmount stops it. */
+export declare function useVoiceActivity(): VoiceActivity;
+export interface VoiceCaption {
+    role: 'agent' | 'user';
+    text: string;
+}
+/** The latest live transcript line (speech bubbles, subtitles). Captions
+ * are broadcast by the voice agent as it speaks; null until the first one. */
+export declare function useLatestCaption(): VoiceCaption | null;
+/** Make ANY child view breathe, pulse, and glow with the conversation —
+ * the one-line path from the app's own art (mascot, logo, character) to a
+ * living AI presence. */
+export declare function VoiceReactive({ children, glowColor, }: {
+    children: React.ReactNode;
+    glowColor?: string;
+}): React.JSX.Element;
+export interface CrowdPlayVoiceViewProps {
+    /** Built-in visual shape: the breathing orb (default) or equalizer bars.
+     * Passing children switches to the halo (ring + glow around YOUR art). */
+    variant?: 'orb' | 'bars';
+    /** Orb color while the AI is speaking. */
+    agentColor?: string;
+    /** Ring color while the user is speaking. */
+    listeningColor?: string;
+    /** Resting color (dimmed while connecting). */
+    idleColor?: string;
+    /** Diameter in points. */
+    size?: number;
+    /** App-provided center content (mascot portrait, logo): rendered inside
+     * an animated halo instead of the orb. */
+    children?: React.ReactNode;
+}
+export declare function CrowdPlayVoiceView({ variant, agentColor, listeningColor, idleColor, size, children, }: CrowdPlayVoiceViewProps): React.JSX.Element;

package/lib/VoiceView.js

@@ -0,0 +1,231 @@
+"use strict";
+/**
+ * The standard voice-AI visual (founders, 2026-08-22): a breathing orb in
+ * the style of realtime assistants — calm while idle, a cool ring while the
+ * user talks, an energetic pulse while the AI speaks. The React Native
+ * counterpart of the native SDK's CrowdPlayVoiceView, driven by the same
+ * engine signal over a fast bridge event that runs only while mounted.
+ *
+ * Two levels of customization:
+ * 1. Props on <CrowdPlayVoiceView> — colors and size of the built-in orb.
+ * 2. useVoiceActivity() — the phase + smoothed energy underneath, for apps
+ *    that want to draw something entirely their own.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVoiceActivity = useVoiceActivity;
+exports.useLatestCaption = useLatestCaption;
+exports.VoiceReactive = VoiceReactive;
+exports.CrowdPlayVoiceView = CrowdPlayVoiceView;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+/** Live phase + energy from the call engine. Subscribing starts the native
+ * fast stream; the last unmount stops it. */
+function useVoiceActivity() {
+    const [activity, setActivity] = (0, react_1.useState)({ phase: 'connecting', energy: 0 });
+    const energyRef = (0, react_1.useRef)(0);
+    (0, react_1.useEffect)(() => {
+        const module = react_native_1.NativeModules.CrowdPlayReactNative;
+        if (!module)
+            return;
+        const emitter = new react_native_1.NativeEventEmitter(module);
+        const sub = emitter.addListener('crowdplay:voiceActivity', (e) => {
+            let phase;
+            let target;
+            if (!e.connected || !e.agentPresent) {
+                phase = 'connecting';
+                target = 0;
+            }
+            else if (e.agentSpeaking) {
+                phase = 'speaking';
+                target = 0.55 + Math.min(0.45, e.agentLevel * 3.0);
+            }
+            else if (e.localSpeaking) {
+                phase = 'listening';
+                const db = e.localLevelDbfs ?? -50;
+                target = Math.max(0.2, Math.min(1.0, (db + 50) / 40));
+            }
+            else {
+                phase = 'idle';
+                target = 0;
+            }
+            // Fast attack, slow release — speech onsets snap, tails breathe out.
+            const rate = target > energyRef.current ? 0.55 : 0.12;
+            energyRef.current += (target - energyRef.current) * rate;
+            setActivity({ phase, energy: energyRef.current });
+        });
+        module.startVoiceActivityUpdates?.();
+        return () => {
+            sub.remove();
+            module.stopVoiceActivityUpdates?.();
+        };
+    }, []);
+    return activity;
+}
+/** The latest live transcript line (speech bubbles, subtitles). Captions
+ * are broadcast by the voice agent as it speaks; null until the first one. */
+function useLatestCaption() {
+    const [caption, setCaption] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        const module = react_native_1.NativeModules.CrowdPlayReactNative;
+        if (!module)
+            return;
+        const emitter = new react_native_1.NativeEventEmitter(module);
+        const sub = emitter.addListener('crowdplay:caption', (e) => setCaption(e));
+        return () => sub.remove();
+    }, []);
+    return caption;
+}
+/** Make ANY child view breathe, pulse, and glow with the conversation —
+ * the one-line path from the app's own art (mascot, logo, character) to a
+ * living AI presence. */
+function VoiceReactive({ children, glowColor = '#598CFF', }) {
+    const { energy } = useVoiceActivity();
+    const scale = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    const glow = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.spring(scale, {
+            toValue: 1 + 0.08 * energy, useNativeDriver: true, speed: 20, bounciness: 12,
+        }).start();
+        react_native_1.Animated.timing(glow, {
+            toValue: energy, duration: 120, useNativeDriver: true,
+        }).start();
+    }, [energy, scale, glow]);
+    return (<react_native_1.View style={styles.container}>
+      <react_native_1.Animated.View pointerEvents="none" style={[react_native_1.StyleSheet.absoluteFillObject, styles.reactiveGlow, {
+                backgroundColor: glowColor,
+                opacity: react_native_1.Animated.multiply(glow, 0.35),
+                transform: [{ scale: 1.25 }],
+            }]}/>
+      <react_native_1.Animated.View style={{ transform: [{ scale }] }}>{children}</react_native_1.Animated.View>
+    </react_native_1.View>);
+}
+function CrowdPlayVoiceView({ variant = 'orb', agentColor = '#598CFF', listeningColor = '#4DD9B3', idleColor = '#BFBFBF', size = 180, children, }) {
+    const { phase, energy } = useVoiceActivity();
+    const breathe = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const scale = (0, react_1.useRef)(new react_native_1.Animated.Value(0.62)).current;
+    const halo = (0, react_1.useRef)(new react_native_1.Animated.Value(0.85)).current;
+    // Continuous idle breathing, independent of the event stream.
+    (0, react_1.useEffect)(() => {
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(breathe, {
+                toValue: 1, duration: 2200, easing: react_native_1.Easing.inOut(react_native_1.Easing.sin), useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(breathe, {
+                toValue: 0, duration: 2200, easing: react_native_1.Easing.inOut(react_native_1.Easing.sin), useNativeDriver: true,
+            }),
+        ]));
+        loop.start();
+        return () => loop.stop();
+    }, [breathe]);
+    // Energy drives the core + halo scale; spring gives the organic wobble
+    // that the native version synthesizes with sines.
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.spring(scale, {
+            toValue: 0.62 + 0.22 * energy, useNativeDriver: true,
+            speed: 20, bounciness: 12,
+        }).start();
+        react_native_1.Animated.spring(halo, {
+            toValue: 0.85 + 0.35 * energy, useNativeDriver: true,
+            speed: 14, bounciness: 8,
+        }).start();
+    }, [energy, scale, halo]);
+    const color = phase === 'speaking' ? agentColor
+        : phase === 'listening' ? listeningColor
+            : idleColor;
+    const dim = phase === 'connecting' ? 0.45 : 1;
+    const breatheScale = breathe.interpolate({ inputRange: [0, 1], outputRange: [1, 1.05] });
+    return (<react_native_1.View style={[styles.container, { width: size, height: size }]} accessibilityLabel={phase === 'speaking' ? 'Assistant is speaking'
+            : phase === 'listening' ? 'Listening'
+                : phase === 'idle' ? 'Assistant is ready'
+                    : 'Connecting to assistant'}>
+      <react_native_1.Animated.View style={[styles.circle, {
+                width: size, height: size, borderRadius: size / 2,
+                backgroundColor: color,
+                opacity: 0.18 * dim + 0.25 * energy,
+                transform: [{ scale: react_native_1.Animated.multiply(halo, breatheScale) }],
+            }]}/>
+      {(phase === 'listening' || children != null) && (<react_native_1.View style={[styles.circle, {
+                    width: size * 0.8, height: size * 0.8, borderRadius: size * 0.4,
+                    borderWidth: Math.max(2, size * (children != null ? 0.02 : 0.015)),
+                    borderColor: color,
+                    backgroundColor: 'transparent',
+                }]}/>)}
+      {children != null ? (
+        // Halo mode: the app's own art at the center, ring + glow around it.
+        <react_native_1.Animated.View style={{
+                width: size * 0.72, height: size * 0.72,
+                borderRadius: size * 0.36, overflow: 'hidden',
+                transform: [{ scale: react_native_1.Animated.multiply(scale, breatheScale) }],
+            }}>
+          {children}
+        </react_native_1.Animated.View>) : variant === 'bars' ? (<BarsVisual color={color} dim={dim} energy={energy} size={size}/>) : (<react_native_1.Animated.View style={[styles.circle, {
+                    width: size, height: size, borderRadius: size / 2,
+                    backgroundColor: color,
+                    opacity: dim,
+                    transform: [{ scale: react_native_1.Animated.multiply(scale, breatheScale) }],
+                }]}/>)}
+    </react_native_1.View>);
+}
+/** Equalizer-style bars: heights mix energy with per-bar sines so they
+ * dance during speech and rest at a low idle. */
+function BarsVisual({ color, dim, energy, size }) {
+    const [tick, setTick] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        const id = setInterval(() => setTick((t) => t + 1), 90);
+        return () => clearInterval(id);
+    }, []);
+    const t = tick * 0.09;
+    return (<react_native_1.View style={styles.barsRow}>
+      {[0, 1, 2, 3, 4].map((index) => {
+            const phase = index * 1.3;
+            const wave = 0.5 + 0.5 * Math.sin(t * (5 + index * 1.7) + phase);
+            const height = 0.15 + 0.08 * Math.sin(t * 1.4 + phase) + energy * wave * 0.8;
+            return (<react_native_1.View key={index} style={{
+                    width: size * 0.1,
+                    height: size * Math.min(1, height),
+                    borderRadius: size * 0.04,
+                    backgroundColor: color,
+                    opacity: dim,
+                }}/>);
+        })}
+    </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    container: { alignItems: 'center', justifyContent: 'center' },
+    circle: { position: 'absolute' },
+    barsRow: { flexDirection: 'row', alignItems: 'center', columnGap: 8 },
+    reactiveGlow: { borderRadius: 9999 },
+});

package/lib/index.d.ts

@@ -193,3 +193,5 @@ declare const CrowdPlay: {
 export default CrowdPlay;
 export { CrowdPlayConsentScreen } from './ConsentScreen';
 export { CrowdPlayVideoView } from './VideoView';
+export { CrowdPlayVoiceView, VoiceReactive, useVoiceActivity, useLatestCaption } from './VoiceView';
+export type { CrowdPlayVoiceViewProps, VoiceActivity, VoicePhase, VoiceCaption } from './VoiceView';

package/lib/index.js

@@ -22,7 +22,7 @@
  * path that records without it.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CrowdPlayVideoView = exports.CrowdPlayConsentScreen = void 0;
+exports.useLatestCaption = exports.useVoiceActivity = exports.VoiceReactive = exports.CrowdPlayVoiceView = exports.CrowdPlayVideoView = exports.CrowdPlayConsentScreen = void 0;
 const react_native_1 = require("react-native");
 function native() {
     const module = react_native_1.NativeModules.CrowdPlayReactNative;
@@ -143,3 +143,8 @@ var ConsentScreen_1 = require("./ConsentScreen");
 Object.defineProperty(exports, "CrowdPlayConsentScreen", { enumerable: true, get: function () { return ConsentScreen_1.CrowdPlayConsentScreen; } });
 var VideoView_1 = require("./VideoView");
 Object.defineProperty(exports, "CrowdPlayVideoView", { enumerable: true, get: function () { return VideoView_1.CrowdPlayVideoView; } });
+var VoiceView_1 = require("./VoiceView");
+Object.defineProperty(exports, "CrowdPlayVoiceView", { enumerable: true, get: function () { return VoiceView_1.CrowdPlayVoiceView; } });
+Object.defineProperty(exports, "VoiceReactive", { enumerable: true, get: function () { return VoiceView_1.VoiceReactive; } });
+Object.defineProperty(exports, "useVoiceActivity", { enumerable: true, get: function () { return VoiceView_1.useVoiceActivity; } });
+Object.defineProperty(exports, "useLatestCaption", { enumerable: true, get: function () { return VoiceView_1.useLatestCaption; } });

package/llms.txt

@@ -147,7 +147,68 @@ Default export `CrowdPlay`:
       handler: (payload: CrowdPlayEvents[E]) => void): { remove(): void }
 
 Named exports: CrowdPlayConsentScreen (props: onConsent(grant)), CrowdPlayVideoView
-(props: participant: string | 'local', plus standard View style).
+(props: participant: string | 'local', plus standard View style),
+CrowdPlayVoiceView (props: agentColor?, listeningColor?, idleColor?, size?),
+useVoiceActivity() -> { phase: 'connecting'|'idle'|'listening'|'speaking', energy: 0…1 }.
+
+The voice AI (apps with the Voice AI switch enabled on the dashboard):
+
+How it works — all server-side, nothing to wire up. When any user joins a
+call, CrowdPlay's servers put a live AI participant into the room within
+~3 seconds. It joins with name "agent" (identity "agent-<8hex>"), greets
+the user, and holds a real spoken conversation (speech-to-speech: it
+hears the user directly, answers in natural voice, can be interrupted).
+The app writes ZERO AI code — no model API calls, no AI keys, no chat
+backend, no STT/TTS. Persona (system prompt), voice, and model are set by
+the BUILDER on the CrowdPlay dashboard and apply from the next call.
+Conversations are recorded and transcribed by the platform automatically.
+RECOMMENDED: voice-AI apps should be AUDIO-ONLY (audioOnly: true — no
+camera permission, no video anywhere); a camera adds nothing to talking
+with an AI. Keep video only when the app ALSO has calls between people.
+
+The AI conversation screen — the approved standard layout: the animated
+visual front and center, large (it IS the screen); NO self camera
+preview and NO video tiles on this screen, ever; around it only the AI's
+name/persona, a small REC indicator, a leave button, and the small
+audio-output menu. One calm screen, one living visual, nothing competing
+with it.
+
+What the app builds — the AI's on-screen presence. The AI publishes
+AUDIO ONLY: never a camera tile, an empty box, or a static image; never
+count it as a generic user. Detect it in the participants event by name
+"agent" (or identity prefix "agent-").
+- The visual is a MENU, zero-effort to fully custom (0.3.4+ for 2-5):
+  1. Orb (default): <CrowdPlayVoiceView /> — breathes idle, rings with
+     the user's voice, pulses with the AI's. Props: agentColor,
+     listeningColor, idleColor, size.
+  2. Bars: <CrowdPlayVoiceView variant='bars' /> — equalizer look, good
+     under other content (scoreboards, question cards, quizzes).
+  3. Halo around the app's own art: pass a mascot portrait / logo /
+     character as children of <CrowdPlayVoiceView> — animated ring +
+     glow around whatever you provide.
+  4. Make ANY view alive: wrap it in <VoiceReactive> — breathing, pulse
+     and speech glow on the app's own art in one line.
+  5. Fully custom (best for characters): drive ANY visual from the
+     useVoiceActivity() hook — { phase: 'connecting'|'idle'|'listening'|
+     'speaking', energy: 0…1 smoothed loudness }. Example, an illustrated
+     tutor that reacts to the conversation:
+
+      function TutorAvatar() {
+        const { phase, energy } = useVoiceActivity();
+        return <Character                    // the app's own art
+          mouthOpen={phase === 'speaking' ? energy : 0}
+          pose={phase === 'listening' ? 'leanIn' : 'idleBlink'} />;
+      }
+
+  Any art pipeline works (Animated, Lottie, Rive, sprite frames) — bind
+  mouth/pose/glow to phase + energy.
+- Live captions (0.3.4+): each line the AI and the user say is streamed
+  as it is spoken — the useLatestCaption() hook returns { role, text }.
+  For speech bubbles, subtitles, language-learning corrections. Optional
+  UI; the full timestamped transcript is always delivered with the
+  session regardless.
+- Testing: the AI appears only on a real iPhone (simulators have no
+  microphone). Join a room, wait ~3 s, it speaks first.
 
 Types:
   CrowdPlayConfig { serverUrl; appKey; audioOnly?=false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "crowdplaysdk",
-  "version": "0.3.1",
+  "version": "0.3.4",
   "description": "CrowdPlay lossless conversation capture for React Native (iOS). Studio-grade per-participant recording during live video calls, delivered to CrowdPlay automatically.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/VoiceView.tsx

@@ -0,0 +1,292 @@
+/**
+ * The standard voice-AI visual (founders, 2026-08-22): a breathing orb in
+ * the style of realtime assistants — calm while idle, a cool ring while the
+ * user talks, an energetic pulse while the AI speaks. The React Native
+ * counterpart of the native SDK's CrowdPlayVoiceView, driven by the same
+ * engine signal over a fast bridge event that runs only while mounted.
+ *
+ * Two levels of customization:
+ * 1. Props on <CrowdPlayVoiceView> — colors and size of the built-in orb.
+ * 2. useVoiceActivity() — the phase + smoothed energy underneath, for apps
+ *    that want to draw something entirely their own.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, NativeEventEmitter, NativeModules, StyleSheet, View } from 'react-native';
+
+export type VoicePhase = 'connecting' | 'idle' | 'listening' | 'speaking';
+
+export interface VoiceActivity {
+  phase: VoicePhase;
+  /** 0…1, smoothed (fast attack, slow release). */
+  energy: number;
+}
+
+interface VoiceActivityEvent {
+  agentPresent: boolean;
+  agentSpeaking: boolean;
+  agentLevel: number;
+  localLevelDbfs: number | null;
+  localSpeaking: boolean;
+  connected: boolean;
+}
+
+/** Live phase + energy from the call engine. Subscribing starts the native
+ * fast stream; the last unmount stops it. */
+export function useVoiceActivity(): VoiceActivity {
+  const [activity, setActivity] = useState<VoiceActivity>({ phase: 'connecting', energy: 0 });
+  const energyRef = useRef(0);
+
+  useEffect(() => {
+    const module = NativeModules.CrowdPlayReactNative;
+    if (!module) return;
+    const emitter = new NativeEventEmitter(module);
+    const sub = emitter.addListener('crowdplay:voiceActivity', (e: VoiceActivityEvent) => {
+      let phase: VoicePhase;
+      let target: number;
+      if (!e.connected || !e.agentPresent) {
+        phase = 'connecting';
+        target = 0;
+      } else if (e.agentSpeaking) {
+        phase = 'speaking';
+        target = 0.55 + Math.min(0.45, e.agentLevel * 3.0);
+      } else if (e.localSpeaking) {
+        phase = 'listening';
+        const db = e.localLevelDbfs ?? -50;
+        target = Math.max(0.2, Math.min(1.0, (db + 50) / 40));
+      } else {
+        phase = 'idle';
+        target = 0;
+      }
+      // Fast attack, slow release — speech onsets snap, tails breathe out.
+      const rate = target > energyRef.current ? 0.55 : 0.12;
+      energyRef.current += (target - energyRef.current) * rate;
+      setActivity({ phase, energy: energyRef.current });
+    });
+    module.startVoiceActivityUpdates?.();
+    return () => {
+      sub.remove();
+      module.stopVoiceActivityUpdates?.();
+    };
+  }, []);
+
+  return activity;
+}
+
+export interface VoiceCaption {
+  role: 'agent' | 'user';
+  text: string;
+}
+
+/** The latest live transcript line (speech bubbles, subtitles). Captions
+ * are broadcast by the voice agent as it speaks; null until the first one. */
+export function useLatestCaption(): VoiceCaption | null {
+  const [caption, setCaption] = useState<VoiceCaption | null>(null);
+  useEffect(() => {
+    const module = NativeModules.CrowdPlayReactNative;
+    if (!module) return;
+    const emitter = new NativeEventEmitter(module);
+    const sub = emitter.addListener('crowdplay:caption', (e: VoiceCaption) => setCaption(e));
+    return () => sub.remove();
+  }, []);
+  return caption;
+}
+
+/** Make ANY child view breathe, pulse, and glow with the conversation —
+ * the one-line path from the app's own art (mascot, logo, character) to a
+ * living AI presence. */
+export function VoiceReactive({
+  children,
+  glowColor = '#598CFF',
+}: {
+  children: React.ReactNode;
+  glowColor?: string;
+}): React.JSX.Element {
+  const { energy } = useVoiceActivity();
+  const scale = useRef(new Animated.Value(1)).current;
+  const glow = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.spring(scale, {
+      toValue: 1 + 0.08 * energy, useNativeDriver: true, speed: 20, bounciness: 12,
+    }).start();
+    Animated.timing(glow, {
+      toValue: energy, duration: 120, useNativeDriver: true,
+    }).start();
+  }, [energy, scale, glow]);
+
+  return (
+    <View style={styles.container}>
+      <Animated.View
+        pointerEvents="none"
+        style={[StyleSheet.absoluteFillObject, styles.reactiveGlow, {
+          backgroundColor: glowColor,
+          opacity: Animated.multiply(glow, 0.35),
+          transform: [{ scale: 1.25 }],
+        }]}
+      />
+      <Animated.View style={{ transform: [{ scale }] }}>{children}</Animated.View>
+    </View>
+  );
+}
+
+export interface CrowdPlayVoiceViewProps {
+  /** Built-in visual shape: the breathing orb (default) or equalizer bars.
+   * Passing children switches to the halo (ring + glow around YOUR art). */
+  variant?: 'orb' | 'bars';
+  /** Orb color while the AI is speaking. */
+  agentColor?: string;
+  /** Ring color while the user is speaking. */
+  listeningColor?: string;
+  /** Resting color (dimmed while connecting). */
+  idleColor?: string;
+  /** Diameter in points. */
+  size?: number;
+  /** App-provided center content (mascot portrait, logo): rendered inside
+   * an animated halo instead of the orb. */
+  children?: React.ReactNode;
+}
+
+export function CrowdPlayVoiceView({
+  variant = 'orb',
+  agentColor = '#598CFF',
+  listeningColor = '#4DD9B3',
+  idleColor = '#BFBFBF',
+  size = 180,
+  children,
+}: CrowdPlayVoiceViewProps): React.JSX.Element {
+  const { phase, energy } = useVoiceActivity();
+  const breathe = useRef(new Animated.Value(0)).current;
+  const scale = useRef(new Animated.Value(0.62)).current;
+  const halo = useRef(new Animated.Value(0.85)).current;
+
+  // Continuous idle breathing, independent of the event stream.
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(breathe, {
+          toValue: 1, duration: 2200, easing: Easing.inOut(Easing.sin), useNativeDriver: true,
+        }),
+        Animated.timing(breathe, {
+          toValue: 0, duration: 2200, easing: Easing.inOut(Easing.sin), useNativeDriver: true,
+        }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [breathe]);
+
+  // Energy drives the core + halo scale; spring gives the organic wobble
+  // that the native version synthesizes with sines.
+  useEffect(() => {
+    Animated.spring(scale, {
+      toValue: 0.62 + 0.22 * energy, useNativeDriver: true,
+      speed: 20, bounciness: 12,
+    }).start();
+    Animated.spring(halo, {
+      toValue: 0.85 + 0.35 * energy, useNativeDriver: true,
+      speed: 14, bounciness: 8,
+    }).start();
+  }, [energy, scale, halo]);
+
+  const color = phase === 'speaking' ? agentColor
+    : phase === 'listening' ? listeningColor
+    : idleColor;
+  const dim = phase === 'connecting' ? 0.45 : 1;
+  const breatheScale = breathe.interpolate({ inputRange: [0, 1], outputRange: [1, 1.05] });
+
+  return (
+    <View
+      style={[styles.container, { width: size, height: size }]}
+      accessibilityLabel={
+        phase === 'speaking' ? 'Assistant is speaking'
+        : phase === 'listening' ? 'Listening'
+        : phase === 'idle' ? 'Assistant is ready'
+        : 'Connecting to assistant'
+      }
+    >
+      <Animated.View
+        style={[styles.circle, {
+          width: size, height: size, borderRadius: size / 2,
+          backgroundColor: color,
+          opacity: 0.18 * dim + 0.25 * energy,
+          transform: [{ scale: Animated.multiply(halo, breatheScale) }],
+        }]}
+      />
+      {(phase === 'listening' || children != null) && (
+        <View
+          style={[styles.circle, {
+            width: size * 0.8, height: size * 0.8, borderRadius: size * 0.4,
+            borderWidth: Math.max(2, size * (children != null ? 0.02 : 0.015)),
+            borderColor: color,
+            backgroundColor: 'transparent',
+          }]}
+        />
+      )}
+      {children != null ? (
+        // Halo mode: the app's own art at the center, ring + glow around it.
+        <Animated.View
+          style={{
+            width: size * 0.72, height: size * 0.72,
+            borderRadius: size * 0.36, overflow: 'hidden',
+            transform: [{ scale: Animated.multiply(scale, breatheScale) }],
+          }}
+        >
+          {children}
+        </Animated.View>
+      ) : variant === 'bars' ? (
+        <BarsVisual color={color} dim={dim} energy={energy} size={size} />
+      ) : (
+        <Animated.View
+          style={[styles.circle, {
+            width: size, height: size, borderRadius: size / 2,
+            backgroundColor: color,
+            opacity: dim,
+            transform: [{ scale: Animated.multiply(scale, breatheScale) }],
+          }]}
+        />
+      )}
+    </View>
+  );
+}
+
+/** Equalizer-style bars: heights mix energy with per-bar sines so they
+ * dance during speech and rest at a low idle. */
+function BarsVisual({ color, dim, energy, size }: {
+  color: string; dim: number; energy: number; size: number;
+}): React.JSX.Element {
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => setTick((t) => t + 1), 90);
+    return () => clearInterval(id);
+  }, []);
+  const t = tick * 0.09;
+  return (
+    <View style={styles.barsRow}>
+      {[0, 1, 2, 3, 4].map((index) => {
+        const phase = index * 1.3;
+        const wave = 0.5 + 0.5 * Math.sin(t * (5 + index * 1.7) + phase);
+        const height = 0.15 + 0.08 * Math.sin(t * 1.4 + phase) + energy * wave * 0.8;
+        return (
+          <View
+            key={index}
+            style={{
+              width: size * 0.1,
+              height: size * Math.min(1, height),
+              borderRadius: size * 0.04,
+              backgroundColor: color,
+              opacity: dim,
+            }}
+          />
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { alignItems: 'center', justifyContent: 'center' },
+  circle: { position: 'absolute' },
+  barsRow: { flexDirection: 'row', alignItems: 'center', columnGap: 8 },
+  reactiveGlow: { borderRadius: 9999 },
+});

package/src/index.ts

@@ -297,3 +297,5 @@ const CrowdPlay = {
 export default CrowdPlay;
 export { CrowdPlayConsentScreen } from './ConsentScreen';
 export { CrowdPlayVideoView } from './VideoView';
+export { CrowdPlayVoiceView, VoiceReactive, useVoiceActivity, useLatestCaption } from './VoiceView';
+export type { CrowdPlayVoiceViewProps, VoiceActivity, VoicePhase, VoiceCaption } from './VoiceView';