@mobileai/react-native 0.9.17 → 0.9.18

package/src/components/AgentErrorBoundary.tsx

@@ -1,78 +0,0 @@
-/**
- * AgentErrorBoundary — Catches React rendering errors caused by AI agent actions.
- *
- * When the AI taps, scrolls, or navigates, the action itself may succeed
- * but trigger async side-effects (useEffect, onViewableItemsChanged) that
- * crash during the next React render cycle. This boundary catches those
- * errors, preventing red screen crashes and auto-recovering the UI.
- *
- * Recovery strategy:
- * 1. Catch the error via getDerivedStateFromError
- * 2. Log it and report to agent runtime via onError callback
- * 3. Auto-reset after a brief delay — remounts children cleanly
- */
-
-import React from 'react';
-import { logger } from '../utils/logger';
-
-interface Props {
-  children: React.ReactNode;
-  /** Called when an error is caught — reports back to agent runtime */
-  onError?: (error: Error, componentStack?: string) => void;
-  telemetryRef?: React.RefObject<any>; // Using any to avoid circular import, we duck-type track()
-}
-
-interface State {
-  hasError: boolean;
-}
-
-export class AgentErrorBoundary extends React.Component<Props, State> {
-  state: State = { hasError: false };
-  private resetTimer: ReturnType<typeof setTimeout> | null = null;
-
-  static getDerivedStateFromError(_error: Error): State {
-    return { hasError: true };
-  }
-
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
-    const componentStack = errorInfo?.componentStack || '';
-    logger.warn(
-      'AgentErrorBoundary',
-      `🛡️ Caught rendering error: ${error.message}\n${componentStack}`
-    );
-    this.props.onError?.(error, componentStack);
-
-    // Track the render error silently in analytics
-    if (this.props.telemetryRef?.current?.track) {
-      this.props.telemetryRef.current.track('render_error', {
-        message: error.message,
-        component: componentStack?.split('\n')[1]?.trim() ?? 'unknown',
-        screen: this.props.telemetryRef.current.screen,
-      });
-    }
-  }
-
-  componentDidUpdate(_prevProps: Props, prevState: State): void {
-    // Auto-recover: reset error state after brief delay to remount children
-    if (this.state.hasError && !prevState.hasError) {
-      this.resetTimer = setTimeout(() => {
-        this.setState({ hasError: false });
-      }, 50);
-    }
-  }
-
-  componentWillUnmount(): void {
-    if (this.resetTimer) {
-      clearTimeout(this.resetTimer);
-    }
-  }
-
-  render(): React.ReactNode {
-    if (this.state.hasError) {
-      // Return null briefly — children will remount on next tick
-      // when hasError resets to false via componentDidUpdate
-      return null;
-    }
-    return this.props.children;
-  }
-}

package/src/components/AgentOverlay.tsx

@@ -1,73 +0,0 @@
-/**
- * AgentOverlay — Subtle thinking indicator shown while the AI agent is processing.
- * Includes a cancel button to stop the agent mid-execution.
- */
-
-import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity } from 'react-native';
-import { CloseIcon } from './Icons';
-
-interface AgentOverlayProps {
-  visible: boolean;
-  statusText: string;
-  onCancel?: () => void;
-}
-
-export function AgentOverlay({ visible, statusText, onCancel }: AgentOverlayProps) {
-  if (!visible) return null;
-
-  return (
-    <View style={styles.overlay} pointerEvents="box-none">
-      <View style={styles.pill}>
-        <ActivityIndicator size="small" color="#fff" />
-        <Text style={styles.text}>{statusText || 'Thinking...'}</Text>
-        {onCancel && (
-          <TouchableOpacity
-            onPress={onCancel}
-            style={styles.cancelButton}
-            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-          >
-            <CloseIcon size={12} color="#fff" />
-          </TouchableOpacity>
-        )}
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  overlay: {
-    position: 'absolute',
-    top: 60,
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-    zIndex: 9999,
-  },
-  pill: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    backgroundColor: 'rgba(26, 26, 46, 0.9)',
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    borderRadius: 20,
-    maxWidth: '85%',
-  },
-  text: {
-    color: '#fff',
-    fontSize: 14,
-    fontWeight: '500',
-    flexShrink: 1,
-  },
-  cancelButton: {
-    marginLeft: 4,
-    width: 22,
-    height: 22,
-    borderRadius: 11,
-    backgroundColor: 'rgba(255, 255, 255, 0.2)',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-  },
-});
-

package/src/components/DiscoveryTooltip.tsx

@@ -1,148 +0,0 @@
-/**
- * DiscoveryTooltip — One-time tooltip shown above the FAB on first use.
- *
- * Tells users the AI can navigate the app and do things for them.
- * Shows once, then persists dismissal via AsyncStorage.
- * Bilingual: EN/AR.
- */
-
-import { useEffect, useRef } from 'react';
-import {
-  View,
-  Text,
-  Pressable,
-  StyleSheet,
-  Animated,
-} from 'react-native';
-
-interface DiscoveryTooltipProps {
-  language: 'en' | 'ar';
-  primaryColor?: string;
-  onDismiss: () => void;
-}
-
-const LABELS = {
-  en: '✨ I can help you navigate the app and do things for you!',
-  ar: '✨ أقدر أساعدك تتنقل في التطبيق وأعمل حاجات بدالك!',
-};
-
-const AUTO_DISMISS_MS = 6000;
-
-export function DiscoveryTooltip({
-  language,
-  primaryColor,
-  onDismiss,
-}: DiscoveryTooltipProps) {
-  const scaleAnim = useRef(new Animated.Value(0)).current;
-  const opacityAnim = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    // Spring-in entry
-    Animated.parallel([
-      Animated.spring(scaleAnim, {
-        toValue: 1,
-        friction: 6,
-        tension: 80,
-        useNativeDriver: true,
-      }),
-      Animated.timing(opacityAnim, {
-        toValue: 1,
-        duration: 200,
-        useNativeDriver: true,
-      }),
-    ]).start();
-
-    // Auto-dismiss after timeout
-    const timer = setTimeout(() => {
-      dismissWithAnimation();
-    }, AUTO_DISMISS_MS);
-
-    return () => clearTimeout(timer);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const dismissWithAnimation = () => {
-    Animated.parallel([
-      Animated.timing(scaleAnim, {
-        toValue: 0,
-        duration: 200,
-        useNativeDriver: true,
-      }),
-      Animated.timing(opacityAnim, {
-        toValue: 0,
-        duration: 200,
-        useNativeDriver: true,
-      }),
-    ]).start(() => onDismiss());
-  };
-
-  const isArabic = language === 'ar';
-  const bgColor = primaryColor || '#1a1a2e';
-
-  return (
-    <Animated.View
-      style={[
-        styles.container,
-        {
-          backgroundColor: bgColor,
-          transform: [{ scale: scaleAnim }],
-          opacity: opacityAnim,
-        },
-      ]}
-    >
-      <Pressable onPress={dismissWithAnimation} style={styles.contentArea}>
-        <Text style={[styles.text, isArabic && styles.textRTL]}>
-          {LABELS[language]}
-        </Text>
-      </Pressable>
-
-      {/* Triangle pointer toward FAB */}
-      <View style={[styles.pointer, { borderTopColor: bgColor }]} />
-    </Animated.View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    bottom: 70,
-    right: -4,
-    minWidth: 200,
-    maxWidth: 260,
-    borderRadius: 16,
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-    elevation: 6,
-  },
-  contentArea: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  text: {
-    color: '#ffffff',
-    fontSize: 13,
-    lineHeight: 19,
-    fontWeight: '500',
-  },
-  textRTL: {
-    textAlign: 'right',
-    writingDirection: 'rtl',
-  },
-  pointer: {
-    position: 'absolute',
-    bottom: -8,
-    right: 22,
-    width: 0,
-    height: 0,
-    borderLeftWidth: 8,
-    borderRightWidth: 8,
-    borderTopWidth: 8,
-    borderLeftColor: 'transparent',
-    borderRightColor: 'transparent',
-    borderTopColor: '#1a1a2e',
-  },
-});

package/src/components/HighlightOverlay.tsx

@@ -1,136 +0,0 @@
-import { useEffect, useState, useRef } from 'react';
-import { View, Text, StyleSheet, Animated, Pressable, DeviceEventEmitter } from 'react-native';
-
-export interface HighlightEventData {
-  pageX: number;
-  pageY: number;
-  width: number;
-  height: number;
-  message: string;
-  autoRemoveAfterMs?: number;
-}
-
-export function HighlightOverlay() {
-  const [highlight, setHighlight] = useState<HighlightEventData | null>(null);
-  const pulseAnim = useRef(new Animated.Value(1)).current;
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    const sub = DeviceEventEmitter.addListener('MOBILE_AI_HIGHLIGHT', (data: HighlightEventData | null) => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-      
-      setHighlight(data);
-
-      if (data) {
-        // Start pulsing ring
-        pulseAnim.setValue(1);
-        Animated.loop(
-          Animated.sequence([
-            Animated.timing(pulseAnim, { toValue: 1.2, duration: 800, useNativeDriver: true }),
-            Animated.timing(pulseAnim, { toValue: 1, duration: 800, useNativeDriver: true }),
-          ])
-        ).start();
-
-        // Auto-dismiss
-        const ms = data.autoRemoveAfterMs || 5000;
-        timerRef.current = setTimeout(() => {
-          setHighlight(null);
-        }, ms);
-      }
-    });
-
-    return () => sub.remove();
-  }, [pulseAnim]);
-
-  if (!highlight) return null;
-
-  const { pageX, pageY, width, height, message } = highlight;
-  
-  // Calculate tooltip position (prefer top, fallback to bottom if too close to top edge)
-  const isTooHigh = pageY < 60;
-  const tooltipTop = isTooHigh ? pageY + height + 12 : pageY - 45;
-
-  return (
-    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
-      {/* Invisible pressable to dismiss on tap anywhere */}
-      <Pressable testID="highlight-close-zone" style={StyleSheet.absoluteFill} onPress={() => setHighlight(null)} />
-
-      {/* The Animated Ring */}
-      <Animated.View
-        style={[
-          styles.ring,
-          {
-            left: pageX - 4,
-            top: pageY - 4,
-            width: width + 8,
-            height: height + 8,
-            transform: [{ scale: pulseAnim }],
-          }
-        ]}
-        pointerEvents="none"
-      />
-
-      {/* The Tooltip */}
-      <View style={[styles.tooltip, { top: tooltipTop }]} pointerEvents="none">
-        <Text style={styles.message}>{message}</Text>
-        <View style={isTooHigh ? styles.arrowUp : styles.arrowDown} />
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  ring: {
-    position: 'absolute',
-    borderWidth: 3,
-    borderColor: '#007AFF', // iOS blue
-    borderRadius: 8,
-    backgroundColor: 'rgba(0, 122, 255, 0.15)', // Very subtle fill
-  },
-  tooltip: {
-    position: 'absolute',
-    alignSelf: 'center',
-    backgroundColor: '#007AFF',
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 8,
-    maxWidth: '80%',
-    shadowColor: '#000',
-    shadowOpacity: 0.2,
-    shadowOffset: { width: 0, height: 2 },
-    shadowRadius: 4,
-    elevation: 4,
-  },
-  message: {
-    color: '#fff',
-    fontSize: 14,
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  arrowDown: {
-    position: 'absolute',
-    bottom: -6,
-    alignSelf: 'center',
-    width: 0,
-    height: 0,
-    borderLeftWidth: 6,
-    borderRightWidth: 6,
-    borderTopWidth: 6,
-    borderLeftColor: 'transparent',
-    borderRightColor: 'transparent',
-    borderTopColor: '#007AFF',
-  },
-  arrowUp: {
-    position: 'absolute',
-    top: -6,
-    alignSelf: 'center',
-    width: 0,
-    height: 0,
-    borderLeftWidth: 6,
-    borderRightWidth: 6,
-    borderBottomWidth: 6,
-    borderLeftColor: 'transparent',
-    borderRightColor: 'transparent',
-    borderBottomColor: '#007AFF',
-  }
-});

package/src/components/Icons.tsx

@@ -1,253 +0,0 @@
-/**
- * Icons — Zero-dependency, View-based icons for the AI Agent chat bar.
- *
- * Why not emoji? iOS Simulator 26+ has a bug where emoji renders as "?".
- * Why not Unicode symbols? They look obscure and unprofessional.
- * Why not icon libraries? This is a library — zero runtime dependencies.
- *
- * These icons are built purely from React Native View components,
- * rendering identically on every platform and screen size.
- */
-
-import { View } from 'react-native';
-
-// ─── Mic Icon (pill + stem + base) ────────────────────────────
-
-export function MicIcon({ size = 20, color = '#fff' }: { size?: number; color?: string }) {
-  const pillW = size * 0.4;
-  const pillH = size * 0.5;
-  const stemW = size * 0.08;
-  const stemH = size * 0.18;
-  const baseW = size * 0.35;
-  const arcW = size * 0.55;
-  const arcH = size * 0.35;
-  const arcBorder = size * 0.07;
-
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      {/* Pill (mic head) */}
-      <View style={{
-        width: pillW,
-        height: pillH,
-        borderRadius: pillW / 2,
-        backgroundColor: color,
-      }} />
-      {/* Arc (U-shape around mic) */}
-      <View style={{
-        width: arcW,
-        height: arcH,
-        borderBottomLeftRadius: arcW / 2,
-        borderBottomRightRadius: arcW / 2,
-        borderWidth: arcBorder,
-        borderTopWidth: 0,
-        borderColor: color,
-        marginTop: -(pillH * 0.3),
-      }} />
-      {/* Stem */}
-      <View style={{
-        width: stemW,
-        height: stemH,
-        backgroundColor: color,
-        marginTop: -1,
-      }} />
-      {/* Base */}
-      <View style={{
-        width: baseW,
-        height: stemW,
-        backgroundColor: color,
-        borderRadius: stemW / 2,
-      }} />
-    </View>
-  );
-}
-
-// ─── Speaker Icon (cone + sound waves) ────────────────────────
-
-export function SpeakerIcon({ size = 20, color = '#fff', muted = false }: { size?: number; color?: string; muted?: boolean }) {
-  const bodyW = size * 0.25;
-  const bodyH = size * 0.3;
-  const coneW = size * 0.2;
-
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }}>
-      {/* Speaker body (rectangle) */}
-      <View style={{
-        width: bodyW,
-        height: bodyH,
-        backgroundColor: color,
-        borderRadius: size * 0.03,
-      }} />
-      {/* Speaker cone (triangle via borders) */}
-      <View style={{
-        width: 0,
-        height: 0,
-        borderTopWidth: size * 0.25,
-        borderTopColor: 'transparent',
-        borderBottomWidth: size * 0.25,
-        borderBottomColor: 'transparent',
-        borderLeftWidth: coneW,
-        borderLeftColor: color,
-        marginLeft: -1,
-      }} />
-      {muted ? (
-        /* Mute slash */
-        <View style={{
-          position: 'absolute',
-          width: size * 0.08,
-          height: size * 0.8,
-          backgroundColor: color,
-          borderRadius: size * 0.04,
-          transform: [{ rotate: '45deg' }],
-        }} />
-      ) : (
-        /* Sound waves */
-        <View style={{ marginLeft: size * 0.05 }}>
-          <View style={{
-            width: size * 0.15,
-            height: size * 0.3,
-            borderWidth: size * 0.05,
-            borderColor: color,
-            borderLeftWidth: 0,
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0,
-            borderTopRightRadius: size * 0.15,
-            borderBottomRightRadius: size * 0.15,
-          }} />
-        </View>
-      )}
-    </View>
-  );
-}
-
-// ─── Send Arrow (upward arrow) ────────────────────────────────
-
-export function SendArrowIcon({ size = 18, color = '#fff' }: { size?: number; color?: string }) {
-  // Filled right-pointing triangle (like iOS Messages send button)
-  const triH = size * 0.55;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View style={{
-        width: 0,
-        height: 0,
-        borderTopWidth: triH / 2,
-        borderTopColor: 'transparent',
-        borderBottomWidth: triH / 2,
-        borderBottomColor: 'transparent',
-        borderLeftWidth: triH * 0.85,
-        borderLeftColor: color,
-        marginLeft: size * 0.1,
-      }} />
-    </View>
-  );
-}
-
-// ─── Stop Icon (filled square) ────────────────────────────────
-
-export function StopIcon({ size = 18, color = '#fff' }: { size?: number; color?: string }) {
-  const sq = size * 0.45;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View style={{
-        width: sq,
-        height: sq,
-        backgroundColor: color,
-        borderRadius: size * 0.05,
-      }} />
-    </View>
-  );
-}
-
-// ─── Recording Dot (pulsing filled circle) ────────────────────
-
-export function RecordingDot({ size = 18, color = '#FF3B30' }: { size?: number; color?: string }) {
-  const dotSize = size * 0.45;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View style={{
-        width: dotSize,
-        height: dotSize,
-        borderRadius: dotSize / 2,
-        backgroundColor: color,
-      }} />
-    </View>
-  );
-}
-
-// ─── Loading Spinner (three dots) ─────────────────────────────
-
-export function LoadingDots({ size = 18, color = '#fff' }: { size?: number; color?: string }) {
-  const dotSize = size * 0.15;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center', flexDirection: 'row', gap: dotSize * 0.8 }}>
-      {[0.4, 0.7, 1].map((opacity, i) => (
-        <View key={i} style={{
-          width: dotSize,
-          height: dotSize,
-          borderRadius: dotSize / 2,
-          backgroundColor: color,
-          opacity,
-        }} />
-      ))}
-    </View>
-  );
-}
-
-// ─── Close / Dismiss (X mark) ─────────────────────────────────
-
-export function CloseIcon({ size = 14, color = 'rgba(255,255,255,0.6)' }: { size?: number; color?: string }) {
-  const barW = size * 0.7;
-  const barH = size * 0.12;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View style={{
-        position: 'absolute',
-        width: barW,
-        height: barH,
-        backgroundColor: color,
-        borderRadius: barH,
-        transform: [{ rotate: '45deg' }],
-      }} />
-      <View style={{
-        position: 'absolute',
-        width: barW,
-        height: barH,
-        backgroundColor: color,
-        borderRadius: barH,
-        transform: [{ rotate: '-45deg' }],
-      }} />
-    </View>
-  );
-}
-
-// ─── AI Badge (for FAB) ───────────────────────────────────────
-
-export function AIBadge({ size = 28 }: { size?: number }) {
-  // Chat bubble — clean, universally represents AI assistant
-  const bubbleW = size * 0.6;
-  const bubbleH = size * 0.45;
-  const tailSize = size * 0.12;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      {/* Bubble body */}
-      <View style={{
-        width: bubbleW,
-        height: bubbleH,
-        backgroundColor: '#fff',
-        borderRadius: size * 0.12,
-        marginBottom: tailSize * 0.5,
-      }} />
-      {/* Tail (small triangle at bottom-left) */}
-      <View style={{
-        position: 'absolute',
-        bottom: size * 0.18,
-        left: size * 0.22,
-        width: 0,
-        height: 0,
-        borderTopWidth: tailSize,
-        borderTopColor: '#fff',
-        borderRightWidth: tailSize,
-        borderRightColor: 'transparent',
-      }} />
-    </View>
-  );
-}