@mobileai/react-native 0.9.27 → 0.9.28

package/lib/module/components/AgentChatBar.js

@@ -6,7 +6,7 @@
  * Does not block underlying UI natively.
  */
 
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { View, TextInput, Pressable, Text, StyleSheet, Animated, PanResponder, ScrollView, Keyboard, Platform, useWindowDimensions } from 'react-native';
 import { MicIcon, SpeakerIcon, SendArrowIcon, StopIcon, LoadingDots, AIBadge, HistoryIcon, NewChatIcon, CloseIcon } from "./Icons.js";
 import { logger } from "../utils/logger.js";
@@ -170,6 +170,7 @@ function TextInputRow({
   text,
   setText,
   onSend,
+  onCancel,
   isThinking,
   isArabic,
   theme
@@ -182,6 +183,14 @@ function TextInputRow({
     // render batch.
     inputRef.current?.clear();
   };
+  const handlePrimaryAction = () => {
+    if (isThinking) {
+      onCancel?.();
+      return;
+    }
+    if (!text.trim()) return;
+    handleSendWithClear();
+  };
   return /*#__PURE__*/_jsxs(View, {
     style: styles.inputRow,
     children: [/*#__PURE__*/_jsx(TextInput, {
@@ -208,10 +217,10 @@ function TextInputRow({
       style: [styles.sendButton, isThinking && styles.sendButtonDisabled, theme?.primaryColor ? {
         backgroundColor: theme.primaryColor
       } : undefined],
-      onPress: handleSendWithClear,
-      disabled: isThinking || !text.trim(),
-      accessibilityLabel: "Send request to AI Agent",
-      children: isThinking ? /*#__PURE__*/_jsx(LoadingDots, {
+      onPress: handlePrimaryAction,
+      disabled: !isThinking && !text.trim(),
+      accessibilityLabel: isThinking ? 'Stop AI Agent request' : 'Send request to AI Agent',
+      children: isThinking ? /*#__PURE__*/_jsx(StopIcon, {
         size: 18,
         color: theme?.textColor || '#fff'
       }) : /*#__PURE__*/_jsx(SendArrowIcon, {
@@ -288,6 +297,7 @@ function VoiceControlsRow({
 
 export function AgentChatBar({
   onSend,
+  onCancel,
   isThinking,
   statusText,
   lastResult,
@@ -318,7 +328,10 @@ export function AgentChatBar({
   onConversationSelect,
   onNewConversation,
   pendingApprovalQuestion,
-  onPendingApprovalAction
+  onPendingApprovalAction,
+  renderMode = 'default',
+  onWindowMetricsChange,
+  windowMetrics
 }) {
   const [text, setText] = useState('');
   const [isExpanded, setIsExpanded] = useState(false);
@@ -336,6 +349,85 @@ export function AgentChatBar({
   const preKeyboardYRef = useRef(null);
   const previousThinkingRef = useRef(false);
   const autoCollapsedForThinkingRef = useRef(false);
+  const dragOriginRef = useRef({
+    x: 0,
+    y: 0
+  });
+  const panPositionRef = useRef({
+    x: 10,
+    y: height - 200
+  });
+  const panelHeightRef = useRef(0);
+  const isExpandedRef = useRef(false);
+  const isAndroidNativeWindow = renderMode === 'android-native-window';
+  const metricsFrameRef = useRef(null);
+  const pendingMetricsRef = useRef(null);
+  const getExpandedWindowHeight = useCallback(measuredPanelHeight => {
+    const minExpandedHeight = mode === 'voice' ? 150 : showHistory ? 280 : mode === 'human' ? 240 : pendingApprovalQuestion ? 220 : 164;
+    const maxExpandedHeight = Math.min(height * 0.65, 520);
+    const naturalHeight = measuredPanelHeight > 0 ? measuredPanelHeight : minExpandedHeight;
+    return Math.max(minExpandedHeight, Math.min(naturalHeight, maxExpandedHeight));
+  }, [height, mode, showHistory]);
+  const getWindowSize = useCallback((expanded = isExpandedRef.current, measuredPanelHeight = panelHeightRef.current) => {
+    return {
+      width: expanded ? 340 : 60,
+      height: expanded ? getExpandedWindowHeight(measuredPanelHeight) : 60
+    };
+  }, [getExpandedWindowHeight]);
+  const clampWindowPosition = useCallback((x, y, expanded = isExpandedRef.current, measuredPanelHeight = panelHeightRef.current) => {
+    const screenInset = 10;
+    const bottomInset = 24;
+    const {
+      width: windowWidth,
+      height: windowHeight
+    } = getWindowSize(expanded, measuredPanelHeight);
+    const maxX = Math.max(screenInset, width - windowWidth - screenInset);
+    const maxY = Math.max(screenInset, height - windowHeight - bottomInset);
+    return {
+      x: Math.min(Math.max(x, screenInset), maxX),
+      y: Math.min(Math.max(y, screenInset), maxY)
+    };
+  }, [getWindowSize, height, width]);
+  const publishWindowMetrics = useCallback((x = panPositionRef.current.x, y = panPositionRef.current.y, expanded = isExpandedRef.current, measuredPanelHeight = panelHeightRef.current) => {
+    if (!onWindowMetricsChange) return;
+    const {
+      x: clampedX,
+      y: clampedY
+    } = clampWindowPosition(x, y, expanded, measuredPanelHeight);
+    const {
+      width: resolvedWidth,
+      height: resolvedHeight
+    } = getWindowSize(expanded, measuredPanelHeight);
+    const nextMetrics = {
+      x: Math.round(clampedX),
+      y: Math.round(clampedY),
+      width: resolvedWidth,
+      height: Math.round(resolvedHeight)
+    };
+    onWindowMetricsChange(nextMetrics);
+  }, [clampWindowPosition, getWindowSize, onWindowMetricsChange]);
+  const publishNativeWindowPosition = useCallback((x, y, expanded = isExpandedRef.current, measuredPanelHeight = panelHeightRef.current) => {
+    const clampedPosition = clampWindowPosition(x, y, expanded, measuredPanelHeight);
+    panPositionRef.current = clampedPosition;
+    publishWindowMetrics(clampedPosition.x, clampedPosition.y, expanded, measuredPanelHeight);
+  }, [clampWindowPosition, publishWindowMetrics]);
+  const scheduleWindowMetricsPublish = useCallback((x = panPositionRef.current.x, y = panPositionRef.current.y, expanded = isExpandedRef.current, measuredPanelHeight = panelHeightRef.current) => {
+    if (!onWindowMetricsChange) return;
+    pendingMetricsRef.current = {
+      x,
+      y,
+      expanded,
+      measuredPanelHeight
+    };
+    if (metricsFrameRef.current != null) return;
+    metricsFrameRef.current = requestAnimationFrame(() => {
+      metricsFrameRef.current = null;
+      const pending = pendingMetricsRef.current;
+      pendingMetricsRef.current = null;
+      if (!pending) return;
+      publishWindowMetrics(pending.x, pending.y, pending.expanded, pending.measuredPanelHeight);
+    });
+  }, [onWindowMetricsChange, publishWindowMetrics]);
 
   // Track incoming AI messages while collapsed
   useEffect(() => {
@@ -350,6 +442,13 @@ export function AgentChatBar({
   useEffect(() => {
     if (autoExpandTrigger > 0) setIsExpanded(true);
   }, [autoExpandTrigger]);
+  useEffect(() => {
+    return () => {
+      if (metricsFrameRef.current != null) {
+        cancelAnimationFrame(metricsFrameRef.current);
+      }
+    };
+  }, []);
   useEffect(() => {
     const wasThinking = previousThinkingRef.current;
     if (pendingApprovalQuestion) {
@@ -365,17 +464,54 @@ export function AgentChatBar({
     x: 10,
     y: height - 200
   })).current;
+  useEffect(() => {
+    if (!isAndroidNativeWindow || !windowMetrics) return;
+    const nextPosition = {
+      x: windowMetrics.x,
+      y: windowMetrics.y
+    };
+    if (panPositionRef.current.x === nextPosition.x && panPositionRef.current.y === nextPosition.y) {
+      return;
+    }
+    panPositionRef.current = nextPosition;
+    pan.setValue(nextPosition);
+  }, [isAndroidNativeWindow, pan, windowMetrics]);
   const tooltipSide = fabX < width / 2 ? 'right' : 'left';
+  const expandedContentMinHeight = getExpandedWindowHeight(0);
   useEffect(() => {
-    const listenerId = pan.x.addListener(({
+    isExpandedRef.current = isExpanded;
+    const clampedPosition = clampWindowPosition(panPositionRef.current.x, panPositionRef.current.y, isExpanded);
+    if (clampedPosition.x !== panPositionRef.current.x || clampedPosition.y !== panPositionRef.current.y) {
+      panPositionRef.current = clampedPosition;
+      pan.setValue(clampedPosition);
+      if (!isAndroidNativeWindow) {
+        setFabX(clampedPosition.x);
+      }
+    }
+    scheduleWindowMetricsPublish(clampedPosition.x, clampedPosition.y, isExpanded);
+  }, [clampWindowPosition, isAndroidNativeWindow, isExpanded, pan, scheduleWindowMetricsPublish]);
+  useEffect(() => {
+    if (isAndroidNativeWindow) return;
+    const xListenerId = pan.x.addListener(({
+      value
+    }) => {
+      panPositionRef.current.x = value;
+      if (!isAndroidNativeWindow) {
+        setFabX(value);
+      }
+      scheduleWindowMetricsPublish(value, panPositionRef.current.y);
+    });
+    const yListenerId = pan.y.addListener(({
       value
     }) => {
-      setFabX(value);
+      panPositionRef.current.y = value;
+      scheduleWindowMetricsPublish(panPositionRef.current.x, value);
     });
     return () => {
-      pan.x.removeListener(listenerId);
+      pan.x.removeListener(xListenerId);
+      pan.y.removeListener(yListenerId);
     };
-  }, [pan.x]);
+  }, [isAndroidNativeWindow, pan.x, pan.y, scheduleWindowMetricsPublish]);
 
   // ─── Keyboard Handling ──────────────────────────────────────
   useEffect(() => {
@@ -384,6 +520,14 @@ export function AgentChatBar({
     const keyboardMargin = 12;
     const showSub = Keyboard.addListener(showEvent, e => {
       if (!isExpanded || mode !== 'text' || panelHeight <= 0) return;
+      if (isAndroidNativeWindow) {
+        const currentY = panPositionRef.current.y;
+        const targetY = Math.max(keyboardMargin, height - e.endCoordinates.height - panelHeight - keyboardMargin);
+        preKeyboardYRef.current = currentY;
+        if (currentY <= targetY) return;
+        publishNativeWindowPosition(panPositionRef.current.x, targetY);
+        return;
+      }
       pan.y.stopAnimation(currentY => {
         const targetY = Math.max(keyboardMargin, height - e.endCoordinates.height - panelHeight - keyboardMargin);
 
@@ -403,6 +547,10 @@ export function AgentChatBar({
       const restoreY = preKeyboardYRef.current;
       if (restoreY == null) return;
       preKeyboardYRef.current = null;
+      if (isAndroidNativeWindow) {
+        publishNativeWindowPosition(panPositionRef.current.x, restoreY);
+        return;
+      }
       Animated.timing(pan.y, {
         toValue: restoreY,
         duration: 200,
@@ -413,31 +561,58 @@ export function AgentChatBar({
       showSub.remove();
       hideSub.remove();
     };
-  }, [height, isExpanded, mode, pan.y, panelHeight]);
-  const panResponder = useRef(PanResponder.create({
+  }, [height, isAndroidNativeWindow, isExpanded, mode, pan.y, panelHeight, publishNativeWindowPosition]);
+  const panResponder = useMemo(() => PanResponder.create({
     onMoveShouldSetPanResponder: (_, gestureState) => {
       return Math.abs(gestureState.dx) > 5 || Math.abs(gestureState.dy) > 5;
     },
     onPanResponderGrant: () => {
-      pan.setOffset({
-        x: pan.x._value,
-        y: pan.y._value
-      });
+      if (isAndroidNativeWindow) {
+        dragOriginRef.current = {
+          ...panPositionRef.current
+        };
+        return;
+      }
+      pan.extractOffset();
       pan.setValue({
         x: 0,
         y: 0
       });
     },
-    onPanResponderMove: Animated.event([null, {
-      dx: pan.x,
-      dy: pan.y
-    }], {
-      useNativeDriver: false
-    }),
+    onPanResponderMove: (event, gestureState) => {
+      if (isAndroidNativeWindow) {
+        publishNativeWindowPosition(dragOriginRef.current.x + gestureState.dx, dragOriginRef.current.y + gestureState.dy);
+        return;
+      }
+      Animated.event([null, {
+        dx: pan.x,
+        dy: pan.y
+      }], {
+        useNativeDriver: false
+      })(event, gestureState);
+    },
     onPanResponderRelease: () => {
+      if (isAndroidNativeWindow) {
+        publishNativeWindowPosition(panPositionRef.current.x, panPositionRef.current.y);
+        return;
+      }
       pan.flattenOffset();
+      const clampedPosition = clampWindowPosition(panPositionRef.current.x, panPositionRef.current.y);
+      Animated.spring(pan, {
+        toValue: clampedPosition,
+        useNativeDriver: false,
+        tension: 120,
+        friction: 14
+      }).start(() => {
+        panPositionRef.current = clampedPosition;
+        if (!isAndroidNativeWindow) {
+          setFabX(clampedPosition.x);
+        }
+        scheduleWindowMetricsPublish(clampedPosition.x, clampedPosition.y);
+      });
     }
-  })).current;
+  }), [clampWindowPosition, isAndroidNativeWindow, pan, publishNativeWindowPosition, scheduleWindowMetricsPublish]);
+  const jsDragHandlers = isAndroidNativeWindow ? undefined : panResponder.panHandlers;
   const handleSend = () => {
     if (text.trim() && !isThinking) {
       onSend(text.trim());
@@ -452,8 +627,8 @@ export function AgentChatBar({
 
   if (!isExpanded) {
     return /*#__PURE__*/_jsxs(Animated.View, {
-      style: [styles.fabContainer, pan.getLayout()],
-      ...panResponder.panHandlers,
+      style: [styles.fabContainer, isAndroidNativeWindow ? styles.fabContainerNativeWindow : pan.getLayout()],
+      ...(jsDragHandlers ?? {}),
       children: [/*#__PURE__*/_jsx(Pressable, {
         style: [styles.fab, theme?.primaryColor ? {
           backgroundColor: theme.primaryColor
@@ -471,13 +646,13 @@ export function AgentChatBar({
         }) : /*#__PURE__*/_jsx(AIBadge, {
           size: 28
         })
-      }), showDiscoveryTooltip && /*#__PURE__*/_jsx(DiscoveryTooltip, {
+      }), showDiscoveryTooltip && !isAndroidNativeWindow && /*#__PURE__*/_jsx(DiscoveryTooltip, {
         language: language,
         primaryColor: theme?.primaryColor,
         message: discoveryTooltipMessage,
         side: tooltipSide,
         onDismiss: () => onTooltipDismiss?.()
-      }), localUnread > 0 && chatMessages.length > 0 && /*#__PURE__*/_jsxs(Pressable, {
+      }), localUnread > 0 && chatMessages.length > 0 && !isAndroidNativeWindow && /*#__PURE__*/_jsxs(Pressable, {
         style: [styles.unreadPopup, isArabic ? styles.unreadPopupRTL : styles.unreadPopupLTR],
         onPress: () => {
           onTooltipDismiss?.();
@@ -503,7 +678,7 @@ export function AgentChatBar({
             children: displayUnread > 99 ? '99+' : displayUnread
           })
         })]
-      }), isThinking && !pendingApprovalQuestion && /*#__PURE__*/_jsxs(Pressable, {
+      }), isThinking && !pendingApprovalQuestion && !isAndroidNativeWindow && /*#__PURE__*/_jsxs(Pressable, {
         style: [styles.statusPopup, isArabic ? styles.unreadPopupRTL : styles.unreadPopupLTR],
         onPress: () => {
           autoCollapsedForThinkingRef.current = false;
@@ -533,7 +708,9 @@ export function AgentChatBar({
   // ─── Expanded Widget ───────────────────────────────────────
 
   return /*#__PURE__*/_jsxs(Animated.View, {
-    style: [styles.expandedContainer, pan.getLayout(), {
+    style: [styles.expandedContainer, isAndroidNativeWindow ? styles.expandedContainerNativeWindow : pan.getLayout(), isAndroidNativeWindow ? {
+      minHeight: expandedContentMinHeight
+    } : null, {
       maxHeight: height * 0.65
     }, theme?.backgroundColor ? {
       backgroundColor: theme.backgroundColor
@@ -541,11 +718,13 @@ export function AgentChatBar({
     onLayout: event => {
       const nextHeight = event.nativeEvent.layout.height;
       if (Math.abs(nextHeight - panelHeight) > 1) {
+        panelHeightRef.current = nextHeight;
         setPanelHeight(nextHeight);
+        scheduleWindowMetricsPublish(panPositionRef.current.x, panPositionRef.current.y, true, nextHeight);
       }
     },
     children: [/*#__PURE__*/_jsx(View, {
-      ...panResponder.panHandlers,
+      ...(jsDragHandlers ?? {}),
       style: styles.dragHandleArea,
       accessibilityLabel: "Drag AI Agent",
       children: /*#__PURE__*/_jsx(View, {
@@ -589,34 +768,36 @@ export function AgentChatBar({
           children: "+"
         })
       })]
-    }), /*#__PURE__*/_jsx(View, {
-      ...panResponder.panHandlers,
-      style: [styles.cornerHandle, styles.cornerTL],
-      pointerEvents: "box-only",
-      children: /*#__PURE__*/_jsx(View, {
-        style: [styles.cornerIndicator, styles.cornerIndicatorTL]
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      ...panResponder.panHandlers,
-      style: [styles.cornerHandle, styles.cornerTR],
-      pointerEvents: "box-only",
-      children: /*#__PURE__*/_jsx(View, {
-        style: [styles.cornerIndicator, styles.cornerIndicatorTR]
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      ...panResponder.panHandlers,
-      style: [styles.cornerHandle, styles.cornerBL],
-      pointerEvents: "box-only",
-      children: /*#__PURE__*/_jsx(View, {
-        style: [styles.cornerIndicator, styles.cornerIndicatorBL]
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      ...panResponder.panHandlers,
-      style: [styles.cornerHandle, styles.cornerBR],
-      pointerEvents: "box-only",
-      children: /*#__PURE__*/_jsx(View, {
-        style: [styles.cornerIndicator, styles.cornerIndicatorBR]
-      })
+    }), !isAndroidNativeWindow && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(View, {
+        ...panResponder.panHandlers,
+        style: [styles.cornerHandle, styles.cornerTL],
+        pointerEvents: "box-only",
+        children: /*#__PURE__*/_jsx(View, {
+          style: [styles.cornerIndicator, styles.cornerIndicatorTL]
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        ...panResponder.panHandlers,
+        style: [styles.cornerHandle, styles.cornerTR],
+        pointerEvents: "box-only",
+        children: /*#__PURE__*/_jsx(View, {
+          style: [styles.cornerIndicator, styles.cornerIndicatorTR]
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        ...panResponder.panHandlers,
+        style: [styles.cornerHandle, styles.cornerBL],
+        pointerEvents: "box-only",
+        children: /*#__PURE__*/_jsx(View, {
+          style: [styles.cornerIndicator, styles.cornerIndicatorBL]
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        ...panResponder.panHandlers,
+        style: [styles.cornerHandle, styles.cornerBR],
+        pointerEvents: "box-only",
+        children: /*#__PURE__*/_jsx(View, {
+          style: [styles.cornerIndicator, styles.cornerIndicatorBR]
+        })
+      })]
     }), !showHistory && /*#__PURE__*/_jsx(ModeSelector, {
       modes: availableModes,
       activeMode: mode,
@@ -811,6 +992,7 @@ export function AgentChatBar({
           text: text,
           setText: setText,
           onSend: handleSend,
+          onCancel: onCancel,
           isThinking: isThinking,
           isArabic: isArabic,
           theme: theme
@@ -869,6 +1051,9 @@ const styles = StyleSheet.create({
     position: 'absolute',
     zIndex: 9999
   },
+  fabContainerNativeWindow: {
+    position: 'relative'
+  },
   fab: {
     width: 60,
     height: 60,
@@ -970,6 +1155,9 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.4,
     shadowRadius: 10
   },
+  expandedContainerNativeWindow: {
+    position: 'relative'
+  },
   dragHandleArea: {
     width: '100%',
     height: 30,
@@ -1052,7 +1240,8 @@ const styles = StyleSheet.create({
     borderBottomRightRadius: 1
   },
   messageList: {
-    marginBottom: 12
+    marginBottom: 12,
+    flexShrink: 1
   },
   messageBubble: {
     padding: 12,
@@ -1094,6 +1283,8 @@ const styles = StyleSheet.create({
     alignItems: 'flex-end',
     gap: 8,
     justifyContent: 'center',
+    minHeight: 48,
+    flexShrink: 0,
     paddingBottom: 2 // Slight padding so buttons don't clip against bottom edge
   },
   approvalPanel: {

package/lib/module/components/FloatingOverlayWrapper.js

@@ -11,13 +11,10 @@
  *      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).
+ * Android:
+ *   1. Uses a native panel dialog window when explicit bounds are provided.
+ *      This keeps the floating agent compact and above native modal surfaces.
+ *   2. Falls back to a plain View otherwise.
  *
  * Usage:
  *   <FloatingOverlayWrapper fallbackStyle={styles.floatingLayer}>
@@ -31,14 +28,14 @@
  * but passing StyleSheet.absoluteFill is often necessary to prevent dimensions collapsing conditionally.
  */
 
-// imports consolidated above
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { DeviceEventEmitter, Platform, View, StyleSheet, findNodeHandle } from 'react-native';
 
 // ─── iOS: FullWindowOverlay (react-native-screens optional peer dep) ──────────
-
+import { jsx as _jsx } from "react/jsx-runtime";
 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 {
@@ -46,43 +43,66 @@ if (Platform.OS === 'ios') {
   }
 }
 
-// ─── Android: MobileAIFloatingOverlay (native module bundled in this library) ──
+// ─── Export: whether a true elevated overlay is active ───────────────────────
 
 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');
+    NativeFloatingOverlay = require('../specs/FloatingOverlayNativeComponent.ts').default;
   } 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`.');
-    }
+    // Falls back to a plain View when the native Android overlay isn't available.
   }
 }
 
-// ─── 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;
+export const isNativeOverlayActive = Platform.OS === 'ios' && !!FullWindowOverlay;
+const ANDROID_WINDOW_DRAG_END_EVENT = 'mobileaiFloatingOverlayDragEnd';
 
 // ─── Component ────────────────────────────────────────────────────────────────
 
-import { Platform, View, StyleSheet } from 'react-native';
-import { jsx as _jsx } from "react/jsx-runtime";
-export function FloatingOverlayWrapper({
+export const FloatingOverlayWrapper = /*#__PURE__*/forwardRef(function FloatingOverlayWrapper({
   children,
+  androidWindowMetrics,
+  onAndroidWindowDragEnd,
   fallbackStyle
-}) {
+}, ref) {
+  const nativeOverlayRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    setAndroidWindowMetrics: metrics => {
+      nativeOverlayRef.current?.setNativeProps?.({
+        windowX: metrics.x,
+        windowY: metrics.y,
+        windowWidth: metrics.width,
+        windowHeight: metrics.height
+      });
+    }
+  }), []);
+  useEffect(() => {
+    if (Platform.OS !== 'android' || !onAndroidWindowDragEnd) return;
+    const subscription = DeviceEventEmitter.addListener(ANDROID_WINDOW_DRAG_END_EVENT, event => {
+      const nativeHandle = findNodeHandle(nativeOverlayRef.current);
+      if (nativeHandle != null && event.viewId != null && event.viewId !== nativeHandle) {
+        return;
+      }
+      if (typeof event.x !== 'number' || typeof event.y !== 'number' || typeof event.width !== 'number' || typeof event.height !== 'number') {
+        return;
+      }
+      onAndroidWindowDragEnd({
+        x: event.x,
+        y: event.y,
+        width: event.width,
+        height: event.height
+      });
+    });
+    return () => subscription.remove();
+  }, [onAndroidWindowDragEnd]);
+
   // iOS: FullWindowOverlay — separate UIWindow above everything
   if (Platform.OS === 'ios' && FullWindowOverlay) {
     // @ts-ignore - Some versions of react-native-screens don't type 'style'
@@ -91,10 +111,15 @@ export function FloatingOverlayWrapper({
       children: children
     });
   }
-
-  // Android: native elevated Dialog window (TYPE_APPLICATION_PANEL)
-  if (Platform.OS === 'android' && NativeFloatingOverlay) {
-    return /*#__PURE__*/_jsx(NativeFloatingOverlay, {
+  if (Platform.OS === 'android' && NativeFloatingOverlay && androidWindowMetrics) {
+    const NativeFloatingOverlayComponent = NativeFloatingOverlay;
+    return /*#__PURE__*/_jsx(NativeFloatingOverlayComponent, {
+      ref: nativeOverlayRef,
+      style: styles.androidAnchor,
+      windowX: androidWindowMetrics.x,
+      windowY: androidWindowMetrics.y,
+      windowWidth: androidWindowMetrics.width,
+      windowHeight: androidWindowMetrics.height,
       children: children
     });
   }
@@ -102,7 +127,18 @@ export function FloatingOverlayWrapper({
   // Fallback: regular View — same behavior as before this overlay feature
   return /*#__PURE__*/_jsx(View, {
     style: fallbackStyle,
+    pointerEvents: "box-none",
     children: children
   });
-}
+});
+FloatingOverlayWrapper.displayName = 'FloatingOverlayWrapper';
+const styles = StyleSheet.create({
+  androidAnchor: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: 1,
+    height: 1
+  }
+});
 //# sourceMappingURL=FloatingOverlayWrapper.js.map

package/lib/module/config/endpoints.js

@@ -10,8 +10,29 @@
  * to route telemetry through your own backend without touching this file.
  */
 
-const MOBILEAI_BASE = process.env.EXPO_PUBLIC_MOBILEAI_BASE_URL || process.env.NEXT_PUBLIC_MOBILEAI_BASE_URL || 'https://mobileai.cloud';
+import { Platform } from 'react-native';
+function resolveMobileAIBase() {
+  const configuredBase = process.env.EXPO_PUBLIC_MOBILEAI_BASE_URL || process.env.NEXT_PUBLIC_MOBILEAI_BASE_URL || 'https://mobileai.cloud';
+
+  // Android emulators cannot reach the host machine via localhost/127.0.0.1.
+  // Translate those hostnames to 10.0.2.2 so the Expo example can talk to the
+  // local dashboard/backend without affecting iOS.
+  if (Platform.OS === 'android') {
+    return configuredBase.replace(/^http:\/\/(localhost|127\.0\.0\.1)(?=[:/]|$)/, 'http://10.0.2.2');
+  }
+  return configuredBase;
+}
+const MOBILEAI_BASE = resolveMobileAIBase();
+function toWebSocketBase(url) {
+  if (url.startsWith('https://')) return `wss://${url.slice('https://'.length)}`;
+  if (url.startsWith('http://')) return `ws://${url.slice('http://'.length)}`;
+  return url;
+}
 export const ENDPOINTS = {
+  /** Hosted MobileAI text proxy — used by default when analyticsKey is set */
+  hostedTextProxy: `${MOBILEAI_BASE}/api/v1/hosted-proxy/text`,
+  /** Hosted MobileAI voice proxy — used by default when analyticsKey is set */
+  hostedVoiceProxy: `${toWebSocketBase(MOBILEAI_BASE)}/ws/hosted-proxy/voice`,
   /** Telemetry event ingest — receives batched SDK events */
   telemetryIngest: `${MOBILEAI_BASE}/api/v1/events`,
   /** Feature flag sync — fetches remote flags for this analyticsKey */