@mobileai/react-native 0.9.18 → 0.9.19

package/lib/module/services/telemetry/TouchAutoCapture.js

@@ -16,51 +16,77 @@
 
 // React Native imports not needed — we use Fiber internals directly
 
+// ─── Rage Click Detection ──────────────────────────────────────────
+//
+// Industry-standard approach (FullStory, PostHog, LogRocket):
+// - 3+ taps on the SAME element within a SHORT window
+// - Must be on the SAME screen (screen changes = intentional navigation)
+// - Navigation-style labels ("Next", "Continue") are excluded
+// - 1-second window (PostHog standard) instead of 2s to reduce false positives
+
 const recentTaps = [];
-const RAGE_WINDOW_MS = 2000;
+const RAGE_WINDOW_MS = 1000; // PostHog uses 1s — tighter = fewer false positives
 const RAGE_THRESHOLD = 3;
+const MAX_TAP_BUFFER = 8;
+
+// Labels that are naturally tapped multiple times in sequence (wizards, onboarding, etc.)
+const NAVIGATION_LABELS = new Set(['next', 'continue', 'skip', 'back', 'done', 'ok', 'cancel', 'previous', 'dismiss', 'close', 'got it', 'confirm', 'proceed', 'التالي', 'متابعة', 'تخطي', 'رجوع', 'تم', 'إلغاء', 'إغلاق', 'حسناً']);
+function isNavigationLabel(label) {
+  return NAVIGATION_LABELS.has(label.toLowerCase().trim());
+}
 
 /**
- * Checks if the user is repeatedly tapping the same element in frustration.
- * If rage click detected, emits 'rage_click' event to telemetry.
+ * Checks if the user is rage-tapping an element.
+ *
+ * Industry best-practice criteria:
+ * 1. Same label tapped 3+ times within 1 second
+ * 2. Taps must be on the SAME screen (screen change = not rage, it's navigation)
+ * 3. Navigation labels ("Next", "Skip", etc.) are excluded
  */
 export function checkRageClick(label, telemetry) {
+  // Skip navigation-style labels — sequential tapping is by design
+  if (isNavigationLabel(label)) return;
   const now = Date.now();
+  const currentScreen = telemetry.screen;
   recentTaps.push({
     label,
+    screen: currentScreen,
     ts: now
   });
 
-  // Keep buffer unbounded size of 5
-  if (recentTaps.length > 5) recentTaps.shift();
-  const recent = recentTaps.filter(t => t.label === label && now - t.ts < RAGE_WINDOW_MS);
-  if (recent.length >= RAGE_THRESHOLD) {
+  // Keep buffer bounded
+  if (recentTaps.length > MAX_TAP_BUFFER) recentTaps.shift();
+
+  // Count taps on the SAME label AND SAME screen within the time window
+  const matching = recentTaps.filter(t => t.label === label && t.screen === currentScreen && now - t.ts < RAGE_WINDOW_MS);
+  if (matching.length >= RAGE_THRESHOLD) {
     telemetry.track('rage_click', {
       label,
-      count: recent.length,
-      screen: telemetry.screen
+      count: matching.length,
+      screen: currentScreen
     });
-    recentTaps.length = 0; // reset buffer after emitting to avoid spam
+    // Reset buffer after emitting to avoid duplicate rage events
+    recentTaps.length = 0;
   }
 }
 
 /**
- * Extract a label from a GestureResponderEvent's native target.
+ * Extract a label from a GestureResponderEvent.
  *
- * @param nativeEvent - The nativeEvent from onStartShouldSetResponderCapture
- * @param rootRef - The root View ref (to resolve relative positions)
+ * @param event - The GestureResponderEvent from onStartShouldSetResponderCapture
  * @returns A descriptive label string for the tapped element
  */
-export function extractTouchLabel(nativeEvent) {
+export function extractTouchLabel(event) {
   // Try accessible properties first (most reliable)
-  const target = nativeEvent?.target;
+  const target = event?.nativeEvent?.target;
   if (!target) return 'Unknown Element';
 
-  // React Native internal: _internalFiberInstanceHandleDEV or _nativeTag
+  // React Native internal: _targetInst (synthetic event Fiber ref)
   // We can walk the Fiber tree from the target to find text
   try {
-    // Strategy 1: Walk up the Fiber tree from the touched element
-    let fiber = getFiberFromNativeTag(target);
+    // Strategy 1: Fiber from the SyntheticEvent (works in dev and production RN >= 0.60)
+    // Strategy 2: Walk up the Fiber tree from the touched element via DevTools hook
+    let fiber = event?._targetInst || getFiberFromNativeTag(target);
     if (fiber) {
       // Walk up looking for text content or accessibility labels
       let current = fiber;

package/lib/module/specs/FloatingOverlayNativeComponent.ts

@@ -0,0 +1,19 @@
+/**
+ * Codegen spec for MobileAIFloatingOverlay native view.
+ *
+ * This file is required by React Native's Codegen (New Architecture / Fabric).
+ * It defines the TypeScript interface for the native view. During the build,
+ * Codegen uses this spec to generate C++ glue code that bridges JS and native.
+ *
+ * Consumers don't use this directly — use FloatingOverlayWrapper.tsx instead.
+ *
+ * Naming convention: file must end in NativeComponent.ts (Codegen convention).
+ */
+
+import type { ViewProps } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeProps extends ViewProps {}
+
+// Codegen reads this export to generate the native component interfaces.
+export default codegenNativeComponent<NativeProps>('MobileAIFloatingOverlay');

package/lib/module/support/CSATSurvey.js

@@ -9,6 +9,7 @@
 
 import { useState } from 'react';
 import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native';
+import { MobileAI } from "../services/telemetry/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const EMOJI_OPTIONS = [{
   emoji: '😡',
@@ -31,6 +32,22 @@ const EMOJI_OPTIONS = [{
   label: 'Amazing',
   score: 5
 }];
+const CES_OPTIONS = [{
+  label: 'Very Difficult',
+  score: 1
+}, {
+  label: 'Difficult',
+  score: 2
+}, {
+  label: 'Neutral',
+  score: 3
+}, {
+  label: 'Easy',
+  score: 4
+}, {
+  label: 'Very Easy',
+  score: 5
+}];
 const STAR_COUNT = 5;
 export function CSATSurvey({
   config,
@@ -44,8 +61,10 @@ export function CSATSurvey({
   const primary = theme?.primaryColor ?? '#8b5cf6';
   const textColor = theme?.textColor ?? '#ffffff';
   const bgColor = theme?.backgroundColor ?? 'rgba(26, 26, 46, 0.98)';
+  const surveyType = config.surveyType ?? 'csat';
   const ratingType = config.ratingType ?? 'emoji';
-  const question = config.question ?? 'How was your experience?';
+  const defaultQuestion = surveyType === 'ces' ? 'How easy was it to get the help you needed?' : 'How was your experience?';
+  const question = config.question ?? defaultQuestion;
   const handleSubmit = () => {
     if (selectedScore === null) return;
     const rating = {
@@ -56,6 +75,21 @@ export function CSATSurvey({
     config.onSubmit(rating);
     setSubmitted(true);
 
+    // Track CSAT/CES response
+    const fcrAchieved = selectedScore >= 4 || ratingType === 'thumbs' && selectedScore === 5;
+    const eventName = surveyType === 'ces' ? 'ces_response' : 'csat_response';
+    MobileAI.track(eventName, {
+      score: selectedScore,
+      fcrAchieved,
+      ticketId: metadata?.ticketId
+    });
+    if (fcrAchieved) {
+      MobileAI.track('fcr_achieved', {
+        score: selectedScore,
+        ticketId: metadata?.ticketId
+      });
+    }
+
     // Auto-dismiss after 1.5s
     setTimeout(onDismiss, 1500);
   };
@@ -83,7 +117,28 @@ export function CSATSurvey({
       children: question
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.ratingContainer,
-      children: [ratingType === 'emoji' && /*#__PURE__*/_jsx(View, {
+      children: [surveyType === 'ces' && /*#__PURE__*/_jsx(View, {
+        style: styles.cesRow,
+        children: CES_OPTIONS.map(opt => /*#__PURE__*/_jsxs(TouchableOpacity, {
+          onPress: () => setSelectedScore(opt.score),
+          style: [styles.cesButton, selectedScore === opt.score && {
+            backgroundColor: `${primary}30`,
+            borderColor: primary
+          }],
+          activeOpacity: 0.7,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.cesNumber, {
+              color: selectedScore === opt.score ? primary : textColor
+            }],
+            children: opt.score
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.cesLabel, {
+              color: selectedScore === opt.score ? primary : '#71717a'
+            }],
+            children: opt.label
+          })]
+        }, opt.score))
+      }), surveyType === 'csat' && ratingType === 'emoji' && /*#__PURE__*/_jsx(View, {
         style: styles.emojiRow,
         children: EMOJI_OPTIONS.map(opt => /*#__PURE__*/_jsxs(TouchableOpacity, {
           onPress: () => setSelectedScore(opt.score),
@@ -102,7 +157,7 @@ export function CSATSurvey({
             children: opt.label
           })]
         }, opt.score))
-      }), ratingType === 'stars' && /*#__PURE__*/_jsx(View, {
+      }), surveyType === 'csat' && ratingType === 'stars' && /*#__PURE__*/_jsx(View, {
         style: styles.starsRow,
         children: Array.from({
           length: STAR_COUNT
@@ -116,28 +171,32 @@ export function CSATSurvey({
             children: "\u2605"
           })
         }, star))
-      }), ratingType === 'thumbs' && /*#__PURE__*/_jsxs(View, {
+      }), surveyType === 'csat' && ratingType === 'thumbs' && /*#__PURE__*/_jsxs(View, {
         style: styles.thumbsRow,
         children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: () => setSelectedScore(0),
-          style: [styles.thumbButton, selectedScore === 0 && {
-            backgroundColor: '#ef444430',
+          onPress: () => setSelectedScore(1),
+          style: [styles.thumbButton, selectedScore === 1 && {
+            backgroundColor: 'rgba(239, 68, 68, 0.2)',
             borderColor: '#ef4444'
           }],
           activeOpacity: 0.7,
           children: /*#__PURE__*/_jsx(Text, {
-            style: styles.thumbEmoji,
+            style: [styles.thumbEmoji, selectedScore === 1 && {
+              opacity: 1
+            }],
             children: "\uD83D\uDC4E"
           })
         }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: () => setSelectedScore(1),
-          style: [styles.thumbButton, selectedScore === 1 && {
-            backgroundColor: '#22c55e30',
+          onPress: () => setSelectedScore(5),
+          style: [styles.thumbButton, selectedScore === 5 && {
+            backgroundColor: 'rgba(34, 197, 94, 0.2)',
             borderColor: '#22c55e'
           }],
           activeOpacity: 0.7,
           children: /*#__PURE__*/_jsx(Text, {
-            style: styles.thumbEmoji,
+            style: [styles.thumbEmoji, selectedScore === 5 && {
+              opacity: 1
+            }],
             children: "\uD83D\uDC4D"
           })
         })]
@@ -219,6 +278,30 @@ const styles = StyleSheet.create({
     marginTop: 4,
     fontWeight: '500'
   },
+  cesRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 4
+  },
+  cesButton: {
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 10,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: 'transparent',
+    minWidth: 60
+  },
+  cesNumber: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    marginBottom: 4
+  },
+  cesLabel: {
+    fontSize: 9,
+    fontWeight: '600',
+    textAlign: 'center'
+  },
   starsRow: {
     flexDirection: 'row',
     justifyContent: 'center',

package/lib/module/support/EscalationSocket.js

@@ -14,6 +14,7 @@
  * Handles:
  * - Server heartbeat pings (type: 'ping') — acknowledged silently
  * - Auto-reconnect on unexpected close (max 3 attempts, exponential backoff)
+ * - Message queue — buffers sendText calls while connecting, flushes on open
  */
 
 export class EscalationSocket {
@@ -22,6 +23,10 @@ export class EscalationSocket {
   reconnectAttempts = 0;
   reconnectTimer = null;
   intentionalClose = false;
+  _hasErrored = false;
+
+  /** Messages buffered while the socket is connecting / reconnecting. */
+  messageQueue = [];
   constructor(options) {
     this.onReply = options.onReply;
     this.onError = options.onError;
@@ -32,9 +37,33 @@ export class EscalationSocket {
   connect(wsUrl) {
     this.wsUrl = wsUrl;
     this.intentionalClose = false;
+    this._hasErrored = false;
     this.openConnection();
   }
+
+  /** True if the underlying WebSocket is open and ready to send. */
+  get isConnected() {
+    return this.ws?.readyState === 1; // WebSocket.OPEN
+  }
+
+  /** True if the socket encountered an error (and may not be reliable to reuse). */
+  get hasErrored() {
+    return this._hasErrored;
+  }
+
+  /**
+   * Send a text message to the live agent.
+   *
+   * If the socket is currently connecting or reconnecting, the message is
+   * buffered and sent automatically once the connection is established.
+   * Returns `true` in both cases (connected send + queued send).
+   * Returns `false` only if the socket has no URL (was never connected).
+   */
   sendText(text) {
+    if (!this.wsUrl) {
+      // No URL at all — nothing we can do.
+      return false;
+    }
     if (this.ws?.readyState === 1) {
       // WebSocket.OPEN
       this.ws.send(JSON.stringify({
@@ -43,7 +72,23 @@ export class EscalationSocket {
       }));
       return true;
     }
-    return false;
+
+    // Socket is connecting (CONNECTING=0) or reconnecting (CLOSED=3 → scheduleReconnect).
+    // Queue the message so it is flushed as soon as onopen fires.
+    console.log('[EscalationSocket] ⏳ Socket not open — queuing message for when connected');
+    this.messageQueue.push(JSON.stringify({
+      type: 'user_message',
+      content: text
+    }));
+
+    // If the socket is fully closed (not just connecting), kick off a reconnect now
+    // rather than waiting for scheduleReconnect's timeout to fire.
+    const state = this.ws?.readyState;
+    if (state === undefined || state === 3 /* CLOSED */) {
+      console.log('[EscalationSocket] Socket CLOSED — initiating reconnect to flush queue');
+      this.openConnection();
+    }
+    return true; // optimistic — message is queued
   }
   sendTypingStatus(isTyping) {
     if (this.ws?.readyState === 1) {
@@ -56,6 +101,7 @@ export class EscalationSocket {
   }
   disconnect() {
     this.intentionalClose = true;
+    this.messageQueue = []; // drop queued messages on intentional close
     if (this.reconnectTimer) {
       clearTimeout(this.reconnectTimer);
       this.reconnectTimer = null;
@@ -65,8 +111,26 @@ export class EscalationSocket {
       this.ws = null;
     }
   }
+  flushQueue() {
+    if (this.messageQueue.length === 0) return;
+    console.log(`[EscalationSocket] 🚀 Flushing ${this.messageQueue.length} queued message(s)`);
+    const queue = this.messageQueue.splice(0); // drain atomically
+    for (const payload of queue) {
+      try {
+        this.ws?.send(payload);
+      } catch (err) {
+        console.error('[EscalationSocket] Failed to flush queued message:', err);
+      }
+    }
+  }
   openConnection() {
     if (!this.wsUrl) return;
+
+    // Don't open a second socket if one is already connecting
+    if (this.ws && this.ws.readyState === 0 /* CONNECTING */) {
+      console.log('[EscalationSocket] Already connecting — skipping duplicate openConnection');
+      return;
+    }
     try {
       this.ws = new WebSocket(this.wsUrl);
     } catch (err) {
@@ -76,6 +140,8 @@ export class EscalationSocket {
     this.ws.onopen = () => {
       console.log('[EscalationSocket] ✅ Connected to:', this.wsUrl);
       this.reconnectAttempts = 0;
+      this._hasErrored = false;
+      this.flushQueue(); // send any messages that arrived while connecting
     };
     this.ws.onmessage = event => {
       try {
@@ -107,6 +173,7 @@ export class EscalationSocket {
     };
     this.ws.onerror = event => {
       console.error('[EscalationSocket] ❌ WebSocket error. URL was:', this.wsUrl, event);
+      this._hasErrored = true;
       this.onError?.(event);
     };
     this.ws.onclose = event => {
@@ -118,12 +185,14 @@ export class EscalationSocket {
   scheduleReconnect() {
     if (this.reconnectAttempts >= this.maxReconnectAttempts) {
       console.warn('[EscalationSocket] Max reconnect attempts reached — giving up');
+      this.messageQueue = []; // drop queued messages — connection is permanently lost
       return;
     }
     const delay = Math.min(1000 * 2 ** this.reconnectAttempts, 16_000);
     this.reconnectAttempts++;
     console.log(`[EscalationSocket] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
     this.reconnectTimer = setTimeout(() => {
+      this._hasErrored = false; // clear error flag before reconnect attempt
       this.openConnection();
     }, delay);
   }

package/lib/module/support/ReportedIssueEventSource.js

@@ -0,0 +1,148 @@
+"use strict";
+
+import { logger } from "../utils/logger.js";
+export class ReportedIssueEventSource {
+  abortController = null;
+  intentionalClose = false;
+  reconnectAttempts = 0;
+  reconnectTimer = null;
+  maxReconnectAttempts = 5;
+  constructor(options) {
+    this.options = options;
+  }
+  connect() {
+    this.intentionalClose = false;
+    this.reconnectAttempts = 0;
+    this.openConnection();
+  }
+  disconnect() {
+    this.intentionalClose = true;
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    if (this.abortController) {
+      this.abortController.abort();
+      this.abortController = null;
+    }
+  }
+  async openConnection() {
+    if (this.intentionalClose) return;
+    this.abortController = new AbortController();
+    try {
+      const response = await fetch(this.options.url, {
+        signal: this.abortController.signal,
+        headers: {
+          Accept: 'text/event-stream'
+        }
+      });
+      if (!response.ok) {
+        this.scheduleReconnect();
+        return;
+      }
+      if (!response.body) {
+        await this.readFullResponse(response);
+        return;
+      }
+      this.reconnectAttempts = 0;
+      await this.readStream(response.body);
+    } catch (error) {
+      if (this.intentionalClose) return;
+      if (error.name === 'AbortError') return;
+      this.options.onError?.(error);
+      this.scheduleReconnect();
+    }
+  }
+  async readStream(body) {
+    const reader = body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+    let currentEvent = '';
+    let currentData = '';
+    try {
+      while (true) {
+        const {
+          done,
+          value
+        } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, {
+          stream: true
+        });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() ?? '';
+        for (const line of lines) {
+          if (line.startsWith('event: ')) {
+            currentEvent = line.slice(7).trim();
+          } else if (line.startsWith('data: ')) {
+            currentData = line.slice(6).trim();
+          } else if (line === '' && currentEvent) {
+            this.handleEvent(currentEvent, currentData);
+            currentEvent = '';
+            currentData = '';
+          }
+        }
+      }
+    } catch (error) {
+      if (this.intentionalClose) return;
+      if (error.name === 'AbortError') return;
+      logger.warn('ReportedIssueSSE', 'Stream read error:', error.message);
+    }
+    if (!this.intentionalClose) {
+      this.scheduleReconnect();
+    }
+  }
+  async readFullResponse(response) {
+    try {
+      const text = await response.text();
+      let currentEvent = '';
+      let currentData = '';
+      for (const line of text.split('\n')) {
+        if (line.startsWith('event: ')) {
+          currentEvent = line.slice(7).trim();
+        } else if (line.startsWith('data: ')) {
+          currentData = line.slice(6).trim();
+        } else if (line === '' && currentEvent) {
+          this.handleEvent(currentEvent, currentData);
+          currentEvent = '';
+          currentData = '';
+        }
+      }
+    } catch (error) {
+      if (this.intentionalClose) return;
+      logger.warn('ReportedIssueSSE', 'Full response read error:', error.message);
+    }
+    if (!this.intentionalClose) {
+      this.scheduleReconnect();
+    }
+  }
+  handleEvent(event, data) {
+    try {
+      const parsed = JSON.parse(data);
+      if (event === 'connected') {
+        this.options.onConnected?.();
+        return;
+      }
+      if (event === 'reported_issue_update' && parsed?.issue) {
+        this.options.onIssueUpdate?.(parsed.issue);
+      }
+    } catch {
+      // ignore bad payload
+    }
+  }
+  scheduleReconnect() {
+    if (this.intentionalClose) return;
+    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+      logger.warn('ReportedIssueSSE', 'Max reconnect attempts reached — giving up');
+      return;
+    }
+    const delay = Math.min(1000 * 2 ** this.reconnectAttempts, 16_000);
+    this.reconnectAttempts++;
+    this.reconnectTimer = setTimeout(() => {
+      this.openConnection().catch(() => {
+        // Connection errors are handled inside openConnection.
+      });
+    }, delay);
+  }
+}
+//# sourceMappingURL=ReportedIssueEventSource.js.map

package/lib/module/support/escalateTool.js

@@ -36,6 +36,7 @@ export function createEscalateTool(depsOrConfig, legacyGetContext) {
     analyticsKey,
     getContext,
     getHistory,
+    getToolCalls,
     onHumanReply,
     onEscalationStarted,
     onTypingChange,
@@ -87,6 +88,7 @@ export function createEscalateTool(depsOrConfig, legacyGetContext) {
                   device: getDeviceMetadata()
                 },
                 screenFlow: getScreenFlow?.() ?? [],
+                toolCalls: getToolCalls?.() ?? [],
                 pushToken,
                 pushTokenType,
                 deviceId: getDeviceId()
@@ -131,7 +133,7 @@ export function createEscalateTool(depsOrConfig, legacyGetContext) {
           } catch (err) {
             logger.error('Escalation', 'Network error:', err.message);
           }
-          const message = config.escalationMessage ?? 'Connecting you to a human agent...';
+          const message = config.escalationMessage ?? "Your request has been sent to our support team. A human agent will reply here as soon as possible.";
           return `ESCALATED: ${message}`;
         }
       }
@@ -144,7 +146,7 @@ export function createEscalateTool(depsOrConfig, legacyGetContext) {
         stepsBeforeEscalation: context.stepsBeforeEscalation
       };
       config.onEscalate?.(escalationContext);
-      const message = config.escalationMessage ?? 'Connecting you to a human agent...';
+      const message = config.escalationMessage ?? "Your request has been sent to our support team. A human agent will reply here as soon as possible.";
       return `ESCALATED: ${message}`;
     }
   };

package/lib/module/support/index.js

@@ -11,6 +11,7 @@ export { buildSupportPrompt } from "./supportPrompt.js";
 
 // Escalation tool + WebSocket manager
 export { createEscalateTool } from "./escalateTool.js";
+export { createReportIssueTool } from "./reportIssueTool.js";
 export { EscalationSocket } from "./EscalationSocket.js";
 export { EscalationEventSource } from "./EscalationEventSource.js";