@qafka/react-native 2.0.0

package/dist/components/VoicePage.js

@@ -0,0 +1,683 @@
+"use strict";
+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.VoicePage = VoicePage;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const ToolStatusPill_1 = require("./ToolStatusPill");
+const DataChipList_1 = require("./DataChipList");
+const { width: SCREEN_WIDTH } = react_native_1.Dimensions.get('window');
+const STATE_LABELS = {
+    idle: 'Waiting...', connecting: 'Connecting...', listening: 'Listening...',
+    thinking: 'Thinking...', speaking: 'Speaking...',
+};
+const STATE_COLORS = {
+    idle: '#9ca3af', connecting: '#f59e0b', listening: '#22c55e',
+    thinking: '#3b82f6', speaking: '#8b5cf6',
+};
+// Numeric mapping for smooth state→color interpolation via Animated.
+const STATE_NUM = {
+    idle: 0, connecting: 1, listening: 2, thinking: 3, speaking: 4,
+};
+const STATE_COLOR_INPUT = [0, 1, 2, 3, 4];
+const STATE_COLOR_OUTPUT = ['#9ca3af', '#f59e0b', '#22c55e', '#3b82f6', '#8b5cf6'];
+// Anchor box (rings expand inside this). Sized so a 2.8x ring still fits
+// inside the screen and stays clipped by the consumer's voice slot. Compact
+// mode in this file wraps the whole indicator with overflow:hidden, so
+// over-expansion outside the anchor is harmless.
+const ANCHOR = 200;
+const CORE = 70;
+const RING_BASE = CORE; // rings start at core size, scale outward
+const BASELINE_CYCLE_MS = 2400;
+const BASELINE_PHASE_MS = 800;
+const SPIKE_DURATION_MS = 700;
+const SPIKE_THRESHOLD = 0.3;
+const SPIKE_MIN_INTERVAL_MS = 150;
+// --- Default components (used when customer doesn't provide custom ones) ---
+function DefaultVoiceIndicator({ state, amplitude, theme, isMuted }) {
+    // Smoothed amplitude (drives ring opacity factor + core scale).
+    const amplitudeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(amplitudeAnim, {
+            toValue: amplitude,
+            duration: 90,
+            useNativeDriver: true,
+        }).start();
+    }, [amplitude, amplitudeAnim]);
+    // State color interpolation. JS-driven (backgroundColor is not native-drivable),
+    // one-shot per state change, so perf impact is negligible.
+    const stateColorAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(STATE_NUM[state])).current;
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(stateColorAnim, {
+            toValue: STATE_NUM[state],
+            duration: 500,
+            easing: react_native_1.Easing.inOut(react_native_1.Easing.cubic),
+            useNativeDriver: false,
+        }).start();
+    }, [state, stateColorAnim]);
+    const stateColor = stateColorAnim.interpolate({
+        inputRange: STATE_COLOR_INPUT,
+        outputRange: STATE_COLOR_OUTPUT,
+    });
+    // Baseline rings — 3 continuous loops, staggered to feel like a breathing wave.
+    const baselineProgress = (0, react_1.useRef)([
+        new react_native_1.Animated.Value(0),
+        new react_native_1.Animated.Value(0),
+        new react_native_1.Animated.Value(0),
+    ]).current;
+    (0, react_1.useEffect)(() => {
+        const timers = [];
+        const anims = [];
+        baselineProgress.forEach((p, i) => {
+            const timer = setTimeout(() => {
+                const anim = react_native_1.Animated.loop(react_native_1.Animated.timing(p, {
+                    toValue: 1,
+                    duration: BASELINE_CYCLE_MS,
+                    easing: react_native_1.Easing.linear,
+                    useNativeDriver: true,
+                }));
+                anims.push(anim);
+                anim.start();
+            }, i * BASELINE_PHASE_MS);
+            timers.push(timer);
+        });
+        return () => {
+            timers.forEach(clearTimeout);
+            anims.forEach((a) => a.stop());
+            baselineProgress.forEach((p) => p.stopAnimation());
+        };
+    }, [baselineProgress]);
+    // Spike rings — round-robin pool, emitted on amplitude rising edge.
+    // Gives a "voice → ripple" feel for both mic input and AI TTS playback,
+    // since native amplitude stream covers both.
+    const spikeProgress = (0, react_1.useRef)([
+        new react_native_1.Animated.Value(0),
+        new react_native_1.Animated.Value(0),
+        new react_native_1.Animated.Value(0),
+    ]).current;
+    const spikeIndex = (0, react_1.useRef)(0);
+    const lastAmplitude = (0, react_1.useRef)(0);
+    const lastSpikeMs = (0, react_1.useRef)(0);
+    (0, react_1.useEffect)(() => {
+        const now = Date.now();
+        if (amplitude > SPIKE_THRESHOLD &&
+            lastAmplitude.current <= SPIKE_THRESHOLD &&
+            now - lastSpikeMs.current > SPIKE_MIN_INTERVAL_MS) {
+            const idx = spikeIndex.current % spikeProgress.length;
+            spikeIndex.current += 1;
+            lastSpikeMs.current = now;
+            const p = spikeProgress[idx];
+            p.setValue(0);
+            react_native_1.Animated.timing(p, {
+                toValue: 1,
+                duration: SPIKE_DURATION_MS,
+                easing: react_native_1.Easing.out(react_native_1.Easing.cubic),
+                useNativeDriver: true,
+            }).start();
+        }
+        lastAmplitude.current = amplitude;
+    }, [amplitude, spikeProgress]);
+    // Core orb scale: amplitude-driven during active states, settles at 1 otherwise.
+    const coreScale = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    (0, react_1.useEffect)(() => {
+        const isActive = state === 'listening' || state === 'speaking';
+        const target = isActive ? 1 + amplitude * 0.5 : 1;
+        react_native_1.Animated.spring(coreScale, {
+            toValue: target,
+            damping: 14,
+            stiffness: 200,
+            useNativeDriver: true,
+        }).start();
+    }, [amplitude, state, coreScale]);
+    // Amplitude → opacity factor for baseline rings. Silence keeps a low visible
+    // baseline so the orb is never dead; loud voice amplifies up to ~0.45 peak.
+    const ringAmpFactor = amplitudeAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0.15, 0.45],
+        extrapolate: 'clamp',
+    });
+    // Native + JS driver isolation: outer Animated.View runs transform/opacity
+    // on native driver; inner Animated.View runs backgroundColor on JS driver.
+    // Mixing both on a single node throws "moved to native" at runtime.
+    const renderBaselineRing = (i) => {
+        const progress = baselineProgress[i];
+        const scale = progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0.4, 2.8],
+        });
+        const envelope = progress.interpolate({
+            inputRange: [0, 0.12, 1],
+            outputRange: [0, 1, 0],
+        });
+        const opacity = react_native_1.Animated.multiply(envelope, ringAmpFactor);
+        return (<react_native_1.Animated.View key={`b${i}`} pointerEvents="none" style={[ringStyles.ring, { transform: [{ scale }], opacity }]}>
+ <react_native_1.Animated.View style={[ringStyles.ringFill, { backgroundColor: stateColor }]}/>
+ </react_native_1.Animated.View>);
+    };
+    const renderSpikeRing = (i) => {
+        const progress = spikeProgress[i];
+        const scale = progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0.5, 3.4],
+        });
+        const opacity = progress.interpolate({
+            inputRange: [0, 0.08, 1],
+            outputRange: [0, 0.55, 0],
+        });
+        return (<react_native_1.Animated.View key={`s${i}`} pointerEvents="none" style={[ringStyles.ring, { transform: [{ scale }], opacity }]}>
+ <react_native_1.Animated.View style={[ringStyles.ringFill, { backgroundColor: stateColor }]}/>
+ </react_native_1.Animated.View>);
+    };
+    return (<react_native_1.View style={[ringStyles.anchor, isMuted ? { opacity: 0.45 } : null]}>
+ {[0, 1, 2].map(renderBaselineRing)}
+ {[0, 1, 2].map(renderSpikeRing)}
+ <react_native_1.Animated.View pointerEvents="none" style={[ringStyles.core, { transform: [{ scale: coreScale }] }]}>
+ <react_native_1.Animated.View style={[ringStyles.coreFill, { backgroundColor: stateColor }]}/>
+ <react_native_1.View style={ringStyles.highlight}/>
+ </react_native_1.Animated.View>
+ </react_native_1.View>);
+}
+function DefaultVoiceBackground({ children, theme, state }) {
+    // Slow breathing tint overlay — state-colored, very low alpha. Makes the
+    // whole screen "alive" without competing with the orb.
+    const breathAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(breathAnim, {
+                toValue: 1,
+                duration: 3500,
+                easing: react_native_1.Easing.inOut(react_native_1.Easing.sin),
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(breathAnim, {
+                toValue: 0,
+                duration: 3500,
+                easing: react_native_1.Easing.inOut(react_native_1.Easing.sin),
+                useNativeDriver: true,
+            }),
+        ]));
+        loop.start();
+        return () => loop.stop();
+    }, [breathAnim]);
+    const stateColorAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(STATE_NUM[state])).current;
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(stateColorAnim, {
+            toValue: STATE_NUM[state],
+            duration: 600,
+            easing: react_native_1.Easing.inOut(react_native_1.Easing.cubic),
+            useNativeDriver: false,
+        }).start();
+    }, [state, stateColorAnim]);
+    const tintColor = stateColorAnim.interpolate({
+        inputRange: STATE_COLOR_INPUT,
+        outputRange: STATE_COLOR_OUTPUT,
+    });
+    const tintOpacity = breathAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0.025, 0.08],
+    });
+    return (<react_native_1.View style={[styles.container, { width: SCREEN_WIDTH, backgroundColor: theme.colors.background }]}>
+ {/* Outer drives opacity on native; inner drives backgroundColor on JS.
+        Splitting the nodes avoids the "JS-driven anim on native node" crash. */}
+ <react_native_1.Animated.View pointerEvents="none" style={[styles.absoluteFill, { opacity: tintOpacity }]}>
+ <react_native_1.Animated.View style={[styles.absoluteFill, { backgroundColor: tintColor }]}/>
+ </react_native_1.Animated.View>
+ {children}
+ </react_native_1.View>);
+}
+function DefaultVoiceTranscript({ transcript, userTranscript, state, theme, mode = 'centered', history, }) {
+    // Transcripts render on the page background, NOT inside chat bubbles, so
+    // theme.colors.text / textSecondary are the correct fields. The earlier
+    // implementation read bubble-internal colors (userBubbleText/aiBubbleText)
+    // which are typically white-on-colored — invisible on a light page bg.
+    const primaryTextColor = theme.colors.text ?? '#111';
+    const secondaryTextColor = theme.colors.textSecondary ?? '#666';
+    if (mode === 'chat') {
+        return (<ChatTranscript history={history ?? []} liveAiText={transcript} state={state} primaryTextColor={primaryTextColor} secondaryTextColor={secondaryTextColor}/>);
+    }
+    return (<>
+ {transcript ? (<react_native_1.View style={styles.transcriptContainer}>
+ <react_native_1.Text style={[styles.aiTranscript, { color: primaryTextColor }]}>{transcript}</react_native_1.Text>
+ </react_native_1.View>) : null}
+ <react_native_1.Text style={[styles.stateLabel, { color: STATE_COLORS[state] }]}>{STATE_LABELS[state]}</react_native_1.Text>
+ </>);
+}
+/**
+ * Default user-controlled mute toggle. View-only glyph (no SVG/Skia dep)
+ * to keep the SDK's peer-dep footprint lean. Active mute = red fill +
+ * diagonal slash drawn with a rotated 1px-thick View.
+ */
+function DefaultVoiceMuteButton({ isMuted, onToggle, theme, }) {
+    const bg = isMuted
+        ? '#ef4444'
+        : theme?.colors?.surface ?? 'rgba(0,0,0,0.06)';
+    const fg = isMuted ? '#fff' : theme?.colors?.text ?? '#111';
+    return (<react_native_1.Pressable onPress={onToggle} hitSlop={8} accessibilityRole="button" accessibilityLabel={isMuted ? 'Unmute microphone' : 'Mute microphone'} accessibilityState={{ selected: isMuted }} style={({ pressed }) => [
+            muteStyles.button,
+            { backgroundColor: bg, opacity: pressed ? 0.75 : 1 },
+        ]}>
+ <MicGlyph color={fg}/>
+ {isMuted ? <react_native_1.View style={[muteStyles.slash, { backgroundColor: fg }]}/> : null}
+ </react_native_1.Pressable>);
+}
+/**
+ * Minimal microphone glyph built with stock Views — capsule body, stand
+ * post, and base bar. No external icon font, no SVG, no Skia.
+ */
+function MicGlyph({ color }) {
+    return (<react_native_1.View style={micGlyph.wrapper} pointerEvents="none">
+ <react_native_1.View style={[micGlyph.capsule, { backgroundColor: color }]}/>
+ <react_native_1.View style={[micGlyph.post, { backgroundColor: color }]}/>
+ <react_native_1.View style={[micGlyph.base, { backgroundColor: color }]}/>
+ </react_native_1.View>);
+}
+const muteStyles = react_native_1.StyleSheet.create({
+    button: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    slash: {
+        position: 'absolute',
+        width: 28,
+        height: 2,
+        borderRadius: 1,
+        transform: [{ rotate: '45deg' }],
+    },
+});
+const micGlyph = react_native_1.StyleSheet.create({
+    wrapper: {
+        width: 22,
+        height: 22,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    capsule: {
+        width: 8,
+        height: 13,
+        borderRadius: 4,
+    },
+    post: {
+        width: 2,
+        height: 4,
+        marginTop: 1,
+    },
+    base: {
+        width: 10,
+        height: 2,
+        borderRadius: 1,
+        marginTop: 1,
+    },
+});
+/**
+ * Chat-style transcript. Deliberately lighter than text-mode chat:
+ * - No bubble backgrounds — just text on the page
+ * - User right-aligned italic + textSecondary; AI left-aligned + text
+ * - Older turns fade by opacity to feel ephemeral
+ * - Auto-scrolls to bottom on new content
+ * - Live streaming AI text appears at the bottom as a partial line
+ */
+function ChatTranscript({ history, liveAiText, state, primaryTextColor, secondaryTextColor, }) {
+    const scrollRef = (0, react_1.useRef)(null);
+    const lastTurnsToShow = 8;
+    const visible = history.slice(-lastTurnsToShow);
+    (0, react_1.useEffect)(() => {
+        // Defer until layout commits so contentSize is accurate.
+        const t = setTimeout(() => {
+            scrollRef.current?.scrollToEnd({ animated: true });
+        }, 50);
+        return () => clearTimeout(t);
+    }, [history.length, liveAiText]);
+    return (<react_native_1.View style={chatStyles.container}>
+ <react_native_1.ScrollView ref={scrollRef} style={chatStyles.scroll} contentContainerStyle={chatStyles.scrollContent} showsVerticalScrollIndicator={false}>
+ {visible.map((turn, idx) => {
+            // Opacity fade for older turns: newest = 1, then drop ~0.12 per step,
+            // floor at 0.35 so even old turns remain legible.
+            const stepsBack = visible.length - 1 - idx;
+            const opacity = Math.max(0.35, 1 - stepsBack * 0.12);
+            const isUser = turn.role === 'user';
+            return (<react_native_1.View key={turn.id} style={[
+                    chatStyles.row,
+                    { alignItems: isUser ? 'flex-end' : 'flex-start', opacity },
+                ]}>
+ <react_native_1.Text style={[
+                    isUser ? chatStyles.userText : chatStyles.aiText,
+                    { color: isUser ? secondaryTextColor : primaryTextColor },
+                ]}>
+ {turn.text}
+ </react_native_1.Text>
+ </react_native_1.View>);
+        })}
+ {liveAiText ? (<react_native_1.View style={[chatStyles.row, { alignItems: 'flex-start' }]}>
+ <react_native_1.Text style={[chatStyles.aiText, { color: primaryTextColor }]}>
+ {liveAiText}
+ </react_native_1.Text>
+ </react_native_1.View>) : null}
+ </react_native_1.ScrollView>
+ <react_native_1.Text style={[chatStyles.stateLabel, { color: STATE_COLORS[state] }]}>
+ {STATE_LABELS[state]}
+ </react_native_1.Text>
+ </react_native_1.View>);
+}
+// --- Main component ---
+function VoicePage({ state, transcript, userTranscript, transcriptHistory, transcriptMode = 'centered', amplitude, theme, voiceComponents, toolStatus, renderedTools, registeredComponents, transcriptOverrideForTurn = false, DataChipListComponent, isMuted = false, onToggleMute, }) {
+    const Indicator = voiceComponents?.VoiceIndicator || DefaultVoiceIndicator;
+    const Background = voiceComponents?.VoiceBackground || DefaultVoiceBackground;
+    const Transcript = voiceComponents?.VoiceTranscript || DefaultVoiceTranscript;
+    const MuteButton = voiceComponents?.VoiceMuteButton || DefaultVoiceMuteButton;
+    // Disable rendering the button entirely when there's nothing to drive it,
+    // e.g. consumer drives the SDK without using useVoiceChat's mute layer.
+    const showMute = typeof onToggleMute === 'function';
+    const hasToolUI = !transcriptOverrideForTurn && (renderedTools?.length ?? 0) > 0;
+    // When tool UI is rendered, the compact status bar takes over regardless of
+    // chosen mode — preserves the single-screen / hands-free experience.
+    // Chat resumes automatically when the tool UI is dismissed.
+    const showTranscript = (!hasToolUI && transcriptMode !== 'off') || transcriptOverrideForTurn;
+    const isChatLayout = !hasToolUI && transcriptMode === 'chat';
+    // Edge-to-edge bg painting is handled by the parent Qafka container: when
+    // voice is enabled, it wraps the horizontal pager ScrollView with negative
+    // margins so that VoicePage's slot spans the full screen (including the
+    // notch and home-indicator bands). Here we only need to apply safe-area
+    // padding to the inner content so orb/transcript/tool UI stays clear of
+    // those bands. Background paints across the full slot.
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    return (<Background state={state} amplitude={amplitude} theme={theme}>
+ <react_native_1.View style={{
+            flex: 1,
+            width: '100%',
+            paddingTop: insets.top,
+            paddingBottom: insets.bottom,
+        }}>
+ <react_native_1.View style={{
+            flex: 1,
+            width: '100%',
+            alignSelf: 'stretch',
+        }}>
+ {hasToolUI ? (
+        // Compact sticky status bar — replaces the large centered orb when
+        // tool UI is rendered. Maximizes vertical room for the tool cards
+        // below; keeps the indicator visible without dominating the view.
+        <react_native_1.View style={{
+                paddingHorizontal: 20,
+                paddingVertical: 6,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 12,
+                borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
+                borderBottomColor: 'rgba(0,0,0,0.08)',
+                backgroundColor: theme?.colors?.background ?? '#fff',
+            }}>
+ <react_native_1.View style={{
+                width: 44,
+                height: 44,
+                alignItems: 'center',
+                justifyContent: 'center',
+                overflow: 'hidden',
+            }}>
+ {/* Scale the consumer-supplied indicator down to fit a small
+            status-bar slot. Most custom indicators size themselves
+            around 180-200px; 0.22 scale gives ~40px effective. */}
+ <react_native_1.View style={{
+                width: 200,
+                height: 200,
+                alignItems: 'center',
+                justifyContent: 'center',
+                transform: [{ scale: 0.22 }],
+            }} pointerEvents="none">
+ <Indicator state={state} amplitude={amplitude} theme={theme} isMuted={isMuted}/>
+ </react_native_1.View>
+ </react_native_1.View>
+
+ <react_native_1.View style={{ flex: 1 }}>
+ <react_native_1.Text style={{
+                fontSize: 13,
+                fontWeight: react_native_1.Platform.select({ ios: '600', default: 'bold' }),
+                color: STATE_COLORS[state],
+            }} numberOfLines={1}>
+ {STATE_LABELS[state]}
+ </react_native_1.Text>
+ {toolStatus?.loadingMessage ? (<react_native_1.Text style={{ fontSize: 11, color: '#888', marginTop: 1 }} numberOfLines={1}>
+ {toolStatus.loadingMessage}
+ </react_native_1.Text>) : null}
+ </react_native_1.View>
+ {showMute ? (<MuteButton isMuted={isMuted} onToggle={onToggleMute} theme={theme} state={state}/>) : null}
+ </react_native_1.View>) : isChatLayout ? (
+        // Chat layout: orb anchored at the top, chat history fills the rest.
+        // The orb moves up (vs. centered) to give the transcript room to breathe.
+        <react_native_1.View style={{
+                flex: 1,
+                alignItems: 'center',
+                width: '100%',
+                paddingTop: 32,
+            }}>
+ <react_native_1.View style={{ alignItems: 'center', justifyContent: 'center' }}>
+ <Indicator state={state} amplitude={amplitude} theme={theme} isMuted={isMuted}/>
+ </react_native_1.View>
+
+ {toolStatus ? (<react_native_1.View style={{ marginTop: 4, alignItems: 'center' }}>
+ <ToolStatusPill_1.ToolStatusPill message={toolStatus.loadingMessage} theme={theme}/>
+ </react_native_1.View>) : null}
+
+ <react_native_1.View style={{ flex: 1, width: '100%' }}>
+ <Transcript transcript={transcript} userTranscript={userTranscript} state={state} theme={theme} mode="chat" history={transcriptHistory}/>
+ </react_native_1.View>
+ </react_native_1.View>) : (
+        // Centered (default) and 'off' both use the existing centered orb layout.
+        // For 'off' we simply omit the Transcript component.
+        <react_native_1.View style={{
+                flex: 1,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+ <react_native_1.View style={{ alignItems: 'center', justifyContent: 'center' }}>
+ <Indicator state={state} amplitude={amplitude} theme={theme} isMuted={isMuted}/>
+ </react_native_1.View>
+
+ {toolStatus ? (<react_native_1.View style={{ marginTop: 12, alignItems: 'center' }}>
+ <ToolStatusPill_1.ToolStatusPill message={toolStatus.loadingMessage} theme={theme}/>
+ </react_native_1.View>) : null}
+
+ {showTranscript ? (<Transcript transcript={transcript} userTranscript={userTranscript} state={state} theme={theme} mode="centered"/>) : null}
+ </react_native_1.View>)}
+
+ {hasToolUI ? (<react_native_1.ScrollView style={{ flex: 1, width: '100%', alignSelf: 'stretch' }} contentContainerStyle={{
+                paddingHorizontal: 20,
+                paddingTop: 16,
+                paddingBottom: 24,
+                gap: 10,
+            }} showsVerticalScrollIndicator={false}>
+ {renderedTools.map((rtUnion) => {
+                if (rtUnion.kind === 'display') {
+                    const ChipList = DataChipListComponent ?? DataChipList_1.DataChipList;
+                    return (<react_native_1.View key={rtUnion.toolCallId}>
+ <ChipList items={rtUnion.items} theme={theme}/>
+ </react_native_1.View>);
+                }
+                const rt = rtUnion;
+                // Empty-data fallback (matches text chat list-item behavior)
+                const isListTool = rt.tool?.uiConfig?.responseType === 'list';
+                if (isListTool &&
+                    (rt.data?.data === undefined ||
+                        rt.data?.data === null ||
+                        (Array.isArray(rt.data?.data) && rt.data.data.length === 0))) {
+                    return (<react_native_1.View key={rt.toolCallId} style={{
+                            padding: 12,
+                            backgroundColor: '#f0f0f0',
+                            borderRadius: 10,
+                        }}>
+ <react_native_1.Text>No results.</react_native_1.Text>
+ </react_native_1.View>);
+                }
+                const componentKey = rt.tool?.uiConfig?.itemComponent || rt.toolKey;
+                const Component = registeredComponents?.[componentKey];
+                if (!Component) {
+                    if (__DEV__) {
+                        console.warn(`[Qafka] No component registered for "${componentKey}" (available: ${Object.keys(registeredComponents ?? {}).join(', ') || 'none'})`);
+                    }
+                    return null;
+                }
+                // List rendering: uiConfig.responseType === 'list' + dataPath === 'data'
+                const listData = rt.tool?.uiConfig?.responseType === 'list' && rt.data?.data
+                    ? rt.data.data
+                    : null;
+                if (Array.isArray(listData)) {
+                    const max = rt.tool?.uiConfig?.maxItems || 10;
+                    return (<react_native_1.View key={rt.toolCallId} style={{ gap: 10 }}>
+ {listData.slice(0, max).map((item, idx) => (<Component key={`${rt.toolCallId}_${idx}`} data={item}/>))}
+ </react_native_1.View>);
+                }
+                // Non-list: render once with full data
+                return <Component key={rt.toolCallId} data={rt.data}/>;
+            })}
+ </react_native_1.ScrollView>) : null}
+ </react_native_1.View>
+
+ {showMute && !hasToolUI ? (<react_native_1.View style={{
+                position: 'absolute',
+                top: 12,
+                right: 16,
+            }}>
+ <MuteButton isMuted={isMuted} onToggle={onToggleMute} theme={theme} state={state}/>
+ </react_native_1.View>) : null}
+ </react_native_1.View>
+ </Background>);
+}
+const styles = react_native_1.StyleSheet.create({
+    // Background: no horizontal padding so tool-mode ScrollView and consumer
+    // tool components control their own padding (default 20px). For orb-only
+    // mode, the inner content is centered by flex anyway.
+    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+    absoluteFill: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
+    transcriptContainer: { marginBottom: 16, paddingHorizontal: 16, maxWidth: '90%' },
+    userTranscript: { fontSize: 14, opacity: 0.6, textAlign: 'center' },
+    aiTranscript: { fontSize: 18, textAlign: 'center', lineHeight: 26 },
+    stateLabel: { fontSize: 14, marginTop: 24 },
+});
+const ringStyles = react_native_1.StyleSheet.create({
+    anchor: {
+        width: ANCHOR,
+        height: ANCHOR,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 32,
+    },
+    ring: {
+        position: 'absolute',
+        top: (ANCHOR - RING_BASE) / 2,
+        left: (ANCHOR - RING_BASE) / 2,
+        width: RING_BASE,
+        height: RING_BASE,
+        borderRadius: RING_BASE / 2,
+    },
+    ringFill: {
+        width: '100%',
+        height: '100%',
+        borderRadius: RING_BASE / 2,
+    },
+    core: {
+        position: 'absolute',
+        top: (ANCHOR - CORE) / 2,
+        left: (ANCHOR - CORE) / 2,
+        width: CORE,
+        height: CORE,
+        borderRadius: CORE / 2,
+        // iOS-only colored shadow gives a subtle glow at no perf cost.
+        // Android falls back gracefully (no glow, but core stays vivid via core+highlight).
+        ...react_native_1.Platform.select({
+            ios: {
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: 2 },
+                shadowOpacity: 0.15,
+                shadowRadius: 12,
+            },
+            default: {},
+        }),
+    },
+    coreFill: {
+        width: '100%',
+        height: '100%',
+        borderRadius: CORE / 2,
+    },
+    highlight: {
+        position: 'absolute',
+        top: 10,
+        left: 12,
+        width: 22,
+        height: 22,
+        borderRadius: 11,
+        backgroundColor: 'rgba(255,255,255,0.45)',
+    },
+});
+const chatStyles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        width: '100%',
+        paddingHorizontal: 24,
+        paddingTop: 12,
+        paddingBottom: 12,
+    },
+    scroll: { flex: 1, width: '100%' },
+    scrollContent: {
+        flexGrow: 1,
+        justifyContent: 'flex-end',
+        paddingBottom: 8,
+    },
+    row: {
+        width: '100%',
+        marginBottom: 10,
+    },
+    aiText: {
+        fontSize: 16,
+        lineHeight: 22,
+        textAlign: 'left',
+        maxWidth: '92%',
+    },
+    userText: {
+        fontSize: 14,
+        lineHeight: 20,
+        fontStyle: 'italic',
+        textAlign: 'right',
+        maxWidth: '85%',
+    },
+    stateLabel: {
+        fontSize: 13,
+        textAlign: 'center',
+        marginTop: 8,
+        marginBottom: 4,
+    },
+});