@mobileai/react-native 0.9.18 → 0.9.20

package/lib/module/components/AgentOverlay.js

@@ -49,7 +49,8 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     alignItems: 'center',
-    zIndex: 9999
+    zIndex: 100001,
+    elevation: 1000
   },
   pill: {
     flexDirection: 'row',

package/lib/module/components/DiscoveryTooltip.js

@@ -12,14 +12,16 @@ import { useEffect, useRef } from 'react';
 import { View, Text, Pressable, StyleSheet, Animated } from 'react-native';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const LABELS = {
-  en: '✨ I can help you navigate the app and do things for you!',
-  ar: '✨ أقدر أساعدك تتنقل في التطبيق وأعمل حاجات بدالك!'
+  en: 'Ask me to find items, answer questions, or complete tasks for you.',
+  ar: 'اطلب مني ألاقي العناصر، أجاوب على الأسئلة، أو أكمل المهام عنك.'
 };
 const AUTO_DISMISS_MS = 6000;
 export function DiscoveryTooltip({
   language,
   primaryColor,
-  onDismiss
+  onDismiss,
+  side = 'left',
+  message
 }) {
   const scaleAnim = useRef(new Animated.Value(0)).current;
   const opacityAnim = useRef(new Animated.Value(0)).current;
@@ -57,7 +59,7 @@ export function DiscoveryTooltip({
   const isArabic = language === 'ar';
   const bgColor = primaryColor || '#1a1a2e';
   return /*#__PURE__*/_jsxs(Animated.View, {
-    style: [styles.container, {
+    style: [styles.container, side === 'right' ? styles.containerRight : styles.containerLeft, {
       backgroundColor: bgColor,
       transform: [{
         scale: scaleAnim
@@ -69,10 +71,10 @@ export function DiscoveryTooltip({
       style: styles.contentArea,
       children: /*#__PURE__*/_jsx(Text, {
         style: [styles.text, isArabic && styles.textRTL],
-        children: LABELS[language]
+        children: message || LABELS[language]
       })
     }), /*#__PURE__*/_jsx(View, {
-      style: [styles.pointer, {
+      style: [styles.pointer, side === 'right' ? styles.pointerRight : styles.pointerLeft, {
         borderTopColor: bgColor
       }]
     })]
@@ -82,8 +84,7 @@ const styles = StyleSheet.create({
   container: {
     position: 'absolute',
     bottom: 70,
-    right: -4,
-    minWidth: 200,
+    width: 220,
     maxWidth: 260,
     borderRadius: 16,
     paddingHorizontal: 14,
@@ -97,6 +98,12 @@ const styles = StyleSheet.create({
     shadowRadius: 8,
     elevation: 6
   },
+  containerLeft: {
+    right: -4
+  },
+  containerRight: {
+    left: -4
+  },
   contentArea: {
     flexDirection: 'row',
     alignItems: 'center'
@@ -114,7 +121,6 @@ const styles = StyleSheet.create({
   pointer: {
     position: 'absolute',
     bottom: -8,
-    right: 22,
     width: 0,
     height: 0,
     borderLeftWidth: 8,
@@ -123,6 +129,12 @@ const styles = StyleSheet.create({
     borderLeftColor: 'transparent',
     borderRightColor: 'transparent',
     borderTopColor: '#1a1a2e'
+  },
+  pointerLeft: {
+    right: 22
+  },
+  pointerRight: {
+    left: 22
   }
 });
 //# sourceMappingURL=DiscoveryTooltip.js.map

package/lib/module/components/FloatingOverlayWrapper.js

@@ -0,0 +1,108 @@
+"use strict";
+
+/**
+ * FloatingOverlayWrapper — Cross-platform elevated overlay.
+ *
+ * Platform strategy (in priority order):
+ *
+ * iOS:
+ *   1. `FullWindowOverlay` from react-native-screens (optional peer dep).
+ *      Creates a separate UIWindow at UIWindow.Level.alert+1.
+ *      Renders ABOVE all native Modals, system alerts, and navigation chrome.
+ *   2. Falls back to plain View if react-native-screens is not installed.
+ *
+ * Android (both Old and New Architecture):
+ *   1. Native `MobileAIFloatingOverlay` ViewManager (bundled in this library).
+ *      Creates a Dialog window with TYPE_APPLICATION_PANEL (z=1000),
+ *      above normal app Dialog windows (TYPE_APPLICATION, z=2).
+ *      No SYSTEM_ALERT_WINDOW permission needed — scoped to app's own window.
+ *   2. Falls back to plain View if the app hasn't been rebuilt after install
+ *      (graceful degradation with DEV warning).
+ *
+ * Usage:
+ *   <FloatingOverlayWrapper fallbackStyle={styles.floatingLayer}>
+ *     <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
+ *       {chatBar}
+ *       {consentDialog} ← must be INSIDE the wrapper, AFTER the chat bar in JSX
+ *     </View>
+ *   </FloatingOverlayWrapper>
+ *
+ * Note: FullWindowOverlay on iOS does NOT officially accept style props in its TS definition, 
+ * but passing StyleSheet.absoluteFill is often necessary to prevent dimensions collapsing conditionally.
+ */
+
+// imports consolidated above
+
+// ─── iOS: FullWindowOverlay (react-native-screens optional peer dep) ──────────
+
+let FullWindowOverlay = null;
+if (Platform.OS === 'ios') {
+  try {
+    // Literal string required by Metro bundler — try/catch handles MODULE_NOT_FOUND
+    const screens = require('react-native-screens');
+    FullWindowOverlay = screens.FullWindowOverlay ?? null;
+  } catch {
+    // react-native-screens not installed — falls back to View
+  }
+}
+
+// ─── Android: MobileAIFloatingOverlay (native module bundled in this library) ──
+
+let NativeFloatingOverlay = null;
+if (Platform.OS === 'android') {
+  try {
+    const {
+      requireNativeComponent
+    } = require('react-native');
+    // Throws if ViewManager is not registered (app hasn't been rebuilt after install)
+    NativeFloatingOverlay = requireNativeComponent('MobileAIFloatingOverlay');
+  } catch {
+    if (__DEV__) {
+      console.warn('[MobileAI] MobileAIFloatingOverlay native module not found on Android.\n' + 'The chat bar may appear behind native Modals.\n' + 'Fix: rebuild the app with `npx react-native run-android` or `npx expo run:android`.');
+    }
+  }
+}
+
+// ─── Export: whether a true elevated overlay is active ───────────────────────
+
+/**
+ * True when a native elevated overlay is available on the current platform.
+ * Used by AIConsentDialog to decide whether to render as View vs Modal.
+ *
+ * iOS + react-native-screens installed → true
+ * Android + native rebuild done        → true
+ * Everything else (fallback)           → false
+ */
+export const isNativeOverlayActive = Platform.OS === 'ios' && !!FullWindowOverlay || Platform.OS === 'android' && !!NativeFloatingOverlay;
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+import { Platform, View, StyleSheet } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FloatingOverlayWrapper({
+  children,
+  fallbackStyle
+}) {
+  // iOS: FullWindowOverlay — separate UIWindow above everything
+  if (Platform.OS === 'ios' && FullWindowOverlay) {
+    // @ts-ignore - Some versions of react-native-screens don't type 'style'
+    return /*#__PURE__*/_jsx(FullWindowOverlay, {
+      style: StyleSheet.absoluteFill,
+      children: children
+    });
+  }
+
+  // Android: native elevated Dialog window (TYPE_APPLICATION_PANEL)
+  if (Platform.OS === 'android' && NativeFloatingOverlay) {
+    return /*#__PURE__*/_jsx(NativeFloatingOverlay, {
+      children: children
+    });
+  }
+
+  // Fallback: regular View — same behavior as before this overlay feature
+  return /*#__PURE__*/_jsx(View, {
+    style: fallbackStyle,
+    children: children
+  });
+}
+//# sourceMappingURL=FloatingOverlayWrapper.js.map

package/lib/module/components/Icons.js

@@ -334,4 +334,127 @@ export function AIBadge({
     })]
   });
 }
+// ─── History Icon (clock face: circle + hour + minute hands) ──
+
+export function HistoryIcon({
+  size = 18,
+  color = '#fff'
+}) {
+  const half = size / 2;
+  const stroke = Math.max(1.5, size * 0.09);
+  const ringSize = size * 0.9;
+  const minuteLen = half * 0.72; // from center to 12 o'clock
+  const hourLen = half * 0.52; // from center to 3 o'clock
+
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      width: size,
+      height: size
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        width: ringSize,
+        height: ringSize,
+        borderRadius: ringSize / 2,
+        borderWidth: stroke,
+        borderColor: color,
+        top: (size - ringSize) / 2,
+        left: (size - ringSize) / 2
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        width: stroke,
+        height: minuteLen,
+        backgroundColor: color,
+        borderRadius: stroke,
+        top: half - minuteLen,
+        left: half - stroke / 2
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        width: hourLen,
+        height: stroke,
+        backgroundColor: color,
+        borderRadius: stroke,
+        top: half - stroke / 2,
+        left: half
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        width: stroke * 2,
+        height: stroke * 2,
+        borderRadius: stroke,
+        backgroundColor: color,
+        top: half - stroke,
+        left: half - stroke
+      }
+    })]
+  });
+}
+
+// ─── New Chat Icon (chat bubble + plus) ───────────────────────
+
+export function NewChatIcon({
+  size = 18,
+  color = '#fff'
+}) {
+  const stroke = size * 0.1;
+  const armLen = size * 0.35;
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      width: size,
+      height: size,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: size * 0.72,
+        height: size * 0.62,
+        borderRadius: size * 0.15,
+        borderWidth: stroke,
+        borderColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        bottom: size * 0.22,
+        left: size * 0.1,
+        width: 0,
+        height: 0,
+        borderTopWidth: size * 0.14,
+        borderTopColor: color,
+        borderRightWidth: size * 0.1,
+        borderRightColor: 'transparent'
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.09,
+        right: 0,
+        width: armLen,
+        height: stroke,
+        backgroundColor: color,
+        borderRadius: stroke
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.09 - armLen / 2 + stroke / 2,
+        right: armLen / 2 - stroke / 2,
+        width: stroke,
+        height: armLen,
+        backgroundColor: color,
+        borderRadius: stroke
+      }
+    })]
+  });
+}
 //# sourceMappingURL=Icons.js.map

package/lib/module/config/endpoints.js

@@ -10,13 +10,23 @@
  * to route telemetry through your own backend without touching this file.
  */
 
-const MOBILEAI_BASE = 'http://localhost:3001';
+import { Platform } from 'react-native';
+const isDev = typeof __DEV__ !== 'undefined' ? __DEV__ : process.env.NODE_ENV === 'development';
+const getDevLocalhost = () => {
+  if (Platform.OS === 'android') {
+    return 'http://10.0.2.2:3001';
+  }
+  return 'http://localhost:3001';
+};
+const MOBILEAI_BASE = process.env.EXPO_PUBLIC_MOBILEAI_BASE_URL || process.env.NEXT_PUBLIC_MOBILEAI_BASE_URL || (isDev ? getDevLocalhost() : 'https://api.mobileai.dev');
 export const ENDPOINTS = {
   /** Telemetry event ingest — receives batched SDK events */
   telemetryIngest: `${MOBILEAI_BASE}/api/v1/events`,
   /** Feature flag sync — fetches remote flags for this analyticsKey */
   featureFlags: `${MOBILEAI_BASE}/api/v1/flags`,
   /** Live agent escalation (support handoff) */
-  escalation: `${MOBILEAI_BASE}`
+  escalation: `${MOBILEAI_BASE}`,
+  /** AI conversation history — save and retrieve per-user AI chat sessions */
+  conversations: `${MOBILEAI_BASE}/api/v1/conversations`
 };
 //# sourceMappingURL=endpoints.js.map