@mobileai/react-native 0.9.11 → 0.9.12

package/src/support/EscalationEventSource.ts

@@ -0,0 +1,190 @@
+/**
+ * EscalationEventSource — SSE client using fetch + ReadableStream.
+ *
+ * Uses only the fetch API (available in all React Native runtimes)
+ * to consume Server-Sent Events — no EventSource polyfill needed.
+ * Provides a reliable, auto-reconnecting channel for server-push
+ * events like `ticket_closed` that complements the bidirectional
+ * WebSocket used for chat.
+ *
+ * Lifecycle:
+ * 1. SDK calls connect() → fetch with streaming response
+ * 2. Server holds connection open, pushes `ticket_closed` when agent resolves
+ * 3. On disconnect, auto-reconnects with exponential backoff (max 5 attempts)
+ * 4. If ticket is already closed, server responds immediately with the event
+ */
+
+import { logger } from '../utils/logger';
+
+export interface EscalationEventSourceOptions {
+  url: string;
+  onTicketClosed?: (ticketId: string) => void;
+  onConnected?: (ticketId: string) => void;
+  onError?: (error: Error) => void;
+}
+
+export class EscalationEventSource {
+  private abortController: AbortController | null = null;
+  private intentionalClose = false;
+  private reconnectAttempts = 0;
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  private readonly maxReconnectAttempts = 5;
+  private readonly options: EscalationEventSourceOptions;
+
+  constructor(options: EscalationEventSourceOptions) {
+    this.options = options;
+  }
+
+  connect(): void {
+    this.intentionalClose = false;
+    this.reconnectAttempts = 0;
+    this.openConnection();
+  }
+
+  disconnect(): void {
+    this.intentionalClose = true;
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    if (this.abortController) {
+      this.abortController.abort();
+      this.abortController = null;
+    }
+  }
+
+  private async openConnection(): Promise<void> {
+    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) {
+        logger.warn('EscalationSSE', 'Non-OK response:', response.status);
+        this.scheduleReconnect();
+        return;
+      }
+
+      if (!response.body) {
+        logger.warn('EscalationSSE', 'No readable body — falling back to reading full response');
+        await this.readFullResponse(response);
+        return;
+      }
+
+      this.reconnectAttempts = 0;
+      await this.readStream(response.body);
+    } catch (err) {
+      if (this.intentionalClose) return;
+      if ((err as Error).name === 'AbortError') return;
+      logger.warn('EscalationSSE', 'Connection error:', (err as Error).message);
+      this.options.onError?.(err as Error);
+      this.scheduleReconnect();
+    }
+  }
+
+  private async readStream(body: ReadableStream<Uint8Array>): Promise<void> {
+    const reader = body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+
+    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()!;
+
+        let currentEvent = '';
+        let currentData = '';
+
+        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 && currentData) {
+            this.handleEvent(currentEvent, currentData);
+            currentEvent = '';
+            currentData = '';
+          }
+        }
+      }
+    } catch (err) {
+      if (this.intentionalClose) return;
+      if ((err as Error).name === 'AbortError') return;
+      logger.warn('EscalationSSE', 'Stream read error:', (err as Error).message);
+    }
+
+    if (!this.intentionalClose) {
+      this.scheduleReconnect();
+    }
+  }
+
+  private async readFullResponse(response: Response): Promise<void> {
+    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 && currentData) {
+          this.handleEvent(currentEvent, currentData);
+          currentEvent = '';
+          currentData = '';
+        }
+      }
+    } catch (err) {
+      if (this.intentionalClose) return;
+      logger.warn('EscalationSSE', 'Full response read error:', (err as Error).message);
+    }
+
+    if (!this.intentionalClose) {
+      this.scheduleReconnect();
+    }
+  }
+
+  private handleEvent(event: string, data: string): void {
+    try {
+      const parsed = JSON.parse(data);
+
+      if (event === 'connected') {
+        logger.info('EscalationSSE', 'Connected for ticket:', parsed.ticketId);
+        this.options.onConnected?.(parsed.ticketId);
+      } else if (event === 'ticket_closed') {
+        logger.info('EscalationSSE', 'Ticket closed event:', parsed.ticketId);
+        this.options.onTicketClosed?.(parsed.ticketId);
+        this.intentionalClose = true;
+        this.abortController?.abort();
+      }
+    } catch {
+      // ignore parse error
+    }
+  }
+
+  private scheduleReconnect(): void {
+    if (this.intentionalClose) return;
+    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+      logger.warn('EscalationSSE', 'Max reconnect attempts reached — giving up');
+      return;
+    }
+
+    const delay = Math.min(1000 * 2 ** this.reconnectAttempts, 16_000);
+    this.reconnectAttempts++;
+    logger.info('EscalationSSE', `Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
+
+    this.reconnectTimer = setTimeout(() => {
+      this.openConnection();
+    }, delay);
+  }
+}

package/src/support/SupportChatModal.tsx

@@ -31,6 +31,8 @@ interface SupportChatModalProps {
   isThinking?: boolean;
   /** Optional: externally controlled scroll trigger. Pass when messages update externally. */
   scrollToEndTrigger?: number;
+  /** Ticket status — when 'closed' or 'resolved', input is hidden and a banner is shown. */
+  ticketStatus?: string;
 }
 
 // ─── Helpers ───────────────────────────────────────────────────
@@ -73,6 +75,8 @@ function AgentAvatar() {
 
 // ─── Main Component ────────────────────────────────────────────
 
+const CLOSED_STATUSES = ['closed', 'resolved'];
+
 export function SupportChatModal({
   visible,
   messages,
@@ -81,7 +85,9 @@ export function SupportChatModal({
   isAgentTyping = false,
   isThinking = false,
   scrollToEndTrigger = 0,
+  ticketStatus,
 }: SupportChatModalProps) {
+  const isClosed = !!ticketStatus && CLOSED_STATUSES.includes(ticketStatus);
   const [text, setText] = useState('');
   const [keyboardHeight, setKeyboardHeight] = useState(0);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -147,8 +153,10 @@ export function SupportChatModal({
           <View style={s.headerCenter}>
             <Text style={s.headerTitle}>Support Chat</Text>
             <View style={s.headerStatus}>
-              <View style={s.statusDot} />
-              <Text style={s.headerSubtitle}>Agent online</Text>
+              <View style={[s.statusDot, isClosed && s.statusDotClosed]} />
+              <Text style={s.headerSubtitle}>
+                {isClosed ? 'Conversation closed' : 'Agent online'}
+              </Text>
             </View>
           </View>
           <View style={s.headerBtn} />
@@ -227,26 +235,34 @@ export function SupportChatModal({
           </ScrollView>
         )}
 
-        {/* ── Input Row ── */}
-        <View style={s.inputRow}>
-          <TextInput
-            style={s.input}
-            placeholder="Type a message..."
-            placeholderTextColor="rgba(255,255,255,0.35)"
-            value={text}
-            onChangeText={setText}
-            onSubmitEditing={handleSend}
-            returnKeyType="send"
-            editable={!isThinking}
-          />
-          <Pressable
-            style={[s.sendBtn, text.trim() && !isThinking ? s.sendBtnActive : s.sendBtnInactive]}
-            onPress={handleSend}
-            disabled={!text.trim() || isThinking}
-          >
-            <SendArrowIcon size={18} color={text.trim() && !isThinking ? '#fff' : 'rgba(255,255,255,0.3)'} />
-          </Pressable>
-        </View>
+        {/* ── Input Row or Closed Banner ── */}
+        {isClosed ? (
+          <View style={s.closedBanner}>
+            <Text style={s.closedBannerText}>
+              This conversation has been closed. Start a new request to get help.
+            </Text>
+          </View>
+        ) : (
+          <View style={s.inputRow}>
+            <TextInput
+              style={s.input}
+              placeholder="Type a message..."
+              placeholderTextColor="rgba(255,255,255,0.35)"
+              value={text}
+              onChangeText={setText}
+              onSubmitEditing={handleSend}
+              returnKeyType="send"
+              editable={!isThinking}
+            />
+            <Pressable
+              style={[s.sendBtn, text.trim() && !isThinking ? s.sendBtnActive : s.sendBtnInactive]}
+              onPress={handleSend}
+              disabled={!text.trim() || isThinking}
+            >
+              <SendArrowIcon size={18} color={text.trim() && !isThinking ? '#fff' : 'rgba(255,255,255,0.3)'} />
+            </Pressable>
+          </View>
+        )}
       </View>
     </Modal>
   );
@@ -312,6 +328,9 @@ const s = StyleSheet.create({
     borderRadius: 4,
     backgroundColor: '#34C759',
   },
+  statusDotClosed: {
+    backgroundColor: '#8E8E93',
+  },
   headerSubtitle: {
     color: 'rgba(255,255,255,0.5)',
     fontSize: 12,
@@ -483,6 +502,23 @@ const s = StyleSheet.create({
     fontSize: 14,
   },
 
+  // ── Closed Banner ──
+  closedBanner: {
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    paddingBottom: Platform.OS === 'ios' ? 36 : 16,
+    backgroundColor: 'rgba(255,255,255,0.03)',
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: 'rgba(255,255,255,0.06)',
+    alignItems: 'center',
+  },
+  closedBannerText: {
+    color: 'rgba(255,255,255,0.35)',
+    fontSize: 13,
+    textAlign: 'center',
+    lineHeight: 19,
+  },
+
   // ── Input Row ──
   inputRow: {
     flexDirection: 'row',

package/src/support/escalateTool.ts

@@ -14,6 +14,7 @@ import { EscalationSocket } from './EscalationSocket';
 
 import { ENDPOINTS } from '../config/endpoints';
 import { getDeviceId } from '../services/telemetry/device';
+import { getDeviceMetadata } from '../services/telemetry/deviceMetadata';
 import { logger } from '../utils/logger';
 
 const MOBILEAI_HOST = ENDPOINTS.escalation;
@@ -23,6 +24,7 @@ export interface EscalationToolDeps {
   analyticsKey?: string;
   getContext: () => Omit<EscalationContext, 'conversationSummary'>;
   getHistory: () => Array<{ role: string; content: string }>;
+  getScreenFlow?: () => string[];
   onHumanReply?: (reply: string, ticketId?: string) => void;
   onEscalationStarted?: (ticketId: string, socket: EscalationSocket) => void;
   onTypingChange?: (isTyping: boolean) => void;
@@ -61,7 +63,7 @@ export function createEscalateTool(
     deps = depsOrConfig as EscalationToolDeps;
   }
 
-  const { config, analyticsKey, getContext, getHistory, onHumanReply, onEscalationStarted, onTypingChange, onTicketClosed, userContext, pushToken, pushTokenType } = deps;
+  const { config, analyticsKey, getContext, getHistory, onHumanReply, onEscalationStarted, onTypingChange, onTicketClosed, userContext, pushToken, pushTokenType, getScreenFlow } = deps;
 
   // Determine effective provider
   const provider = config.provider ?? (analyticsKey ? 'mobileai' : 'custom');
@@ -103,7 +105,11 @@ export function createEscalateTool(
                 screen: context.currentScreen,
                 history,
                 stepsBeforeEscalation: context.stepsBeforeEscalation,
-                userContext,
+                userContext: {
+                  ...userContext,
+                  device: getDeviceMetadata(),
+                },
+                screenFlow: getScreenFlow?.() ?? [],
                 pushToken,
                 pushTokenType,
                 deviceId: getDeviceId(),

package/src/support/index.ts

@@ -21,6 +21,7 @@ export { buildSupportPrompt } from './supportPrompt';
 export { createEscalateTool } from './escalateTool';
 export { EscalationSocket } from './EscalationSocket';
 export type { SocketReplyHandler } from './EscalationSocket';
+export { EscalationEventSource } from './EscalationEventSource';
 
 // UI Components
 export { SupportGreeting } from './SupportGreeting';