@mobileai/react-native 0.9.17 → 0.9.18

package/src/support/CSATSurvey.tsx

@@ -1,304 +0,0 @@
-/**
- * CSAT Survey — Customer Satisfaction component.
- *
- * Shown after a support conversation ends (or after idle timeout).
- * Supports three rating types: emoji, stars, thumbs.
- */
-
-
-import { useState } from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  TextInput,
-  StyleSheet,
-} from 'react-native';
-import type { CSATConfig, CSATRating } from './types';
-
-interface CSATSurveyProps {
-  config: CSATConfig;
-  metadata: CSATRating['metadata'];
-  onDismiss: () => void;
-  theme?: {
-    primaryColor?: string;
-    textColor?: string;
-    backgroundColor?: string;
-  };
-}
-
-const EMOJI_OPTIONS = [
-  { emoji: '😡', label: 'Terrible', score: 1 },
-  { emoji: '😞', label: 'Bad', score: 2 },
-  { emoji: '😐', label: 'Okay', score: 3 },
-  { emoji: '😊', label: 'Good', score: 4 },
-  { emoji: '🤩', label: 'Amazing', score: 5 },
-];
-
-const STAR_COUNT = 5;
-
-export function CSATSurvey({
-  config,
-  metadata,
-  onDismiss,
-  theme,
-}: CSATSurveyProps) {
-  const [selectedScore, setSelectedScore] = useState<number | null>(null);
-  const [feedback, setFeedback] = useState('');
-  const [submitted, setSubmitted] = useState(false);
-
-  const primary = theme?.primaryColor ?? '#8b5cf6';
-  const textColor = theme?.textColor ?? '#ffffff';
-  const bgColor = theme?.backgroundColor ?? 'rgba(26, 26, 46, 0.98)';
-  const ratingType = config.ratingType ?? 'emoji';
-  const question = config.question ?? 'How was your experience?';
-
-  const handleSubmit = () => {
-    if (selectedScore === null) return;
-
-    const rating: CSATRating = {
-      score: selectedScore,
-      feedback: feedback.trim() || undefined,
-      metadata,
-    };
-
-    config.onSubmit(rating);
-    setSubmitted(true);
-
-    // Auto-dismiss after 1.5s
-    setTimeout(onDismiss, 1500);
-  };
-
-  if (submitted) {
-    return (
-      <View style={[styles.container, { backgroundColor: bgColor }]}>
-        <Text style={[styles.thankYou, { color: textColor }]}>
-          Thank you for your feedback! 🙏
-        </Text>
-      </View>
-    );
-  }
-
-  return (
-    <View style={[styles.container, { backgroundColor: bgColor }]}>
-      {/* Question */}
-      <Text style={[styles.question, { color: textColor }]}>{question}</Text>
-
-      {/* Rating selector */}
-      <View style={styles.ratingContainer}>
-        {ratingType === 'emoji' && (
-          <View style={styles.emojiRow}>
-            {EMOJI_OPTIONS.map((opt) => (
-              <TouchableOpacity
-                key={opt.score}
-                onPress={() => setSelectedScore(opt.score)}
-                style={[
-                  styles.emojiButton,
-                  selectedScore === opt.score && {
-                    backgroundColor: `${primary}30`,
-                    borderColor: primary,
-                  },
-                ]}
-                activeOpacity={0.7}
-              >
-                <Text style={styles.emoji}>{opt.emoji}</Text>
-                <Text
-                  style={[
-                    styles.emojiLabel,
-                    { color: selectedScore === opt.score ? primary : '#71717a' },
-                  ]}
-                >
-                  {opt.label}
-                </Text>
-              </TouchableOpacity>
-            ))}
-          </View>
-        )}
-
-        {ratingType === 'stars' && (
-          <View style={styles.starsRow}>
-            {Array.from({ length: STAR_COUNT }, (_, i) => i + 1).map(
-              (star) => (
-                <TouchableOpacity
-                  key={star}
-                  onPress={() => setSelectedScore(star)}
-                  activeOpacity={0.7}
-                >
-                  <Text
-                    style={[
-                      styles.star,
-                      {
-                        color:
-                          selectedScore !== null && star <= selectedScore
-                            ? '#fbbf24'
-                            : '#52525b',
-                      },
-                    ]}
-                  >
-                    ★
-                  </Text>
-                </TouchableOpacity>
-              )
-            )}
-          </View>
-        )}
-
-        {ratingType === 'thumbs' && (
-          <View style={styles.thumbsRow}>
-            <TouchableOpacity
-              onPress={() => setSelectedScore(0)}
-              style={[
-                styles.thumbButton,
-                selectedScore === 0 && {
-                  backgroundColor: '#ef444430',
-                  borderColor: '#ef4444',
-                },
-              ]}
-              activeOpacity={0.7}
-            >
-              <Text style={styles.thumbEmoji}>👎</Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              onPress={() => setSelectedScore(1)}
-              style={[
-                styles.thumbButton,
-                selectedScore === 1 && {
-                  backgroundColor: '#22c55e30',
-                  borderColor: '#22c55e',
-                },
-              ]}
-              activeOpacity={0.7}
-            >
-              <Text style={styles.thumbEmoji}>👍</Text>
-            </TouchableOpacity>
-          </View>
-        )}
-      </View>
-
-      {/* Optional feedback text */}
-      {selectedScore !== null && (
-        <TextInput
-          style={[styles.feedbackInput, { color: textColor }]}
-          placeholder="Any additional feedback? (optional)"
-          placeholderTextColor="#52525b"
-          value={feedback}
-          onChangeText={setFeedback}
-          multiline
-          maxLength={500}
-        />
-      )}
-
-      {/* Actions */}
-      <View style={styles.actions}>
-        <TouchableOpacity onPress={onDismiss} activeOpacity={0.7}>
-          <Text style={styles.dismissText}>Skip</Text>
-        </TouchableOpacity>
-        {selectedScore !== null && (
-          <TouchableOpacity
-            style={[styles.submitButton, { backgroundColor: primary }]}
-            onPress={handleSubmit}
-            activeOpacity={0.7}
-          >
-            <Text style={[styles.submitText, { color: textColor }]}>
-              Submit
-            </Text>
-          </TouchableOpacity>
-        )}
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 16,
-    padding: 20,
-    margin: 12,
-  },
-  question: {
-    fontSize: 16,
-    fontWeight: '600',
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-  thankYou: {
-    fontSize: 16,
-    fontWeight: '500',
-    textAlign: 'center',
-    paddingVertical: 12,
-  },
-  ratingContainer: {
-    marginBottom: 12,
-  },
-  emojiRow: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    gap: 8,
-  },
-  emojiButton: {
-    alignItems: 'center',
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: 'transparent',
-  },
-  emoji: {
-    fontSize: 28,
-  },
-  emojiLabel: {
-    fontSize: 10,
-    marginTop: 4,
-    fontWeight: '500',
-  },
-  starsRow: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    gap: 8,
-  },
-  star: {
-    fontSize: 36,
-  },
-  thumbsRow: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    gap: 20,
-  },
-  thumbButton: {
-    padding: 12,
-    borderRadius: 16,
-    borderWidth: 1,
-    borderColor: 'transparent',
-  },
-  thumbEmoji: {
-    fontSize: 36,
-  },
-  feedbackInput: {
-    borderWidth: 1,
-    borderColor: '#3f3f46',
-    borderRadius: 12,
-    padding: 12,
-    fontSize: 14,
-    minHeight: 60,
-    textAlignVertical: 'top',
-    marginBottom: 12,
-  },
-  actions: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  dismissText: {
-    color: '#71717a',
-    fontSize: 14,
-  },
-  submitButton: {
-    paddingHorizontal: 20,
-    paddingVertical: 10,
-    borderRadius: 10,
-  },
-  submitText: {
-    fontSize: 14,
-    fontWeight: '600',
-  },
-});

package/src/support/EscalationEventSource.ts

@@ -1,190 +0,0 @@
-/**
- * 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/EscalationSocket.ts

@@ -1,152 +0,0 @@
-/**
- * EscalationSocket — manages a WebSocket connection to the MobileAI platform
- * for receiving real-time replies from human support agents.
- *
- * Lifecycle:
- * 1. SDK calls escalate_to_human → POST /api/v1/escalations → gets { ticketId, wsUrl }
- * 2. EscalationSocket.connect(wsUrl) opens a WS connection
- * 3. Platform pushes { type: 'reply', ticketId, reply } when agent responds
- * 4. onReply callback fires → shown in chat UI as "👤 Human Agent: <reply>"
- * 5. disconnect() on chat close / unmount
- *
- * Handles:
- * - Server heartbeat pings (type: 'ping') — acknowledged silently
- * - Auto-reconnect on unexpected close (max 3 attempts, exponential backoff)
- */
-
-export type SocketReplyHandler = (reply: string, ticketId?: string) => void;
-
-interface EscalationSocketOptions {
-  onReply: SocketReplyHandler;
-  onError?: (error: Event) => void;
-  onTypingChange?: (isTyping: boolean) => void;
-  onTicketClosed?: (ticketId?: string) => void;
-  maxReconnectAttempts?: number;
-}
-
-export class EscalationSocket {
-  private ws: WebSocket | null = null;
-  private wsUrl: string | null = null;
-  private reconnectAttempts = 0;
-  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
-  private intentionalClose = false;
-
-  private readonly onReply: SocketReplyHandler;
-  private readonly onError?: (error: Event) => void;
-  private readonly onTypingChange?: (isTyping: boolean) => void;
-  private readonly onTicketClosed?: (ticketId?: string) => void;
-  private readonly maxReconnectAttempts: number;
-
-  constructor(options: EscalationSocketOptions) {
-    this.onReply = options.onReply;
-    this.onError = options.onError;
-    this.onTypingChange = options.onTypingChange;
-    this.onTicketClosed = options.onTicketClosed;
-    this.maxReconnectAttempts = options.maxReconnectAttempts ?? 3;
-  }
-
-  connect(wsUrl: string): void {
-    this.wsUrl = wsUrl;
-    this.intentionalClose = false;
-    this.openConnection();
-  }
-
-  sendText(text: string): boolean {
-    if (this.ws?.readyState === 1) { // WebSocket.OPEN
-      this.ws.send(JSON.stringify({ type: 'user_message', content: text }));
-      return true;
-    }
-    return false;
-  }
-
-  sendTypingStatus(isTyping: boolean): boolean {
-    if (this.ws?.readyState === 1) {
-      this.ws.send(JSON.stringify({ type: isTyping ? 'typing_start' : 'typing_stop' }));
-      return true;
-    }
-    return false;
-  }
-
-  disconnect(): void {
-    this.intentionalClose = true;
-    if (this.reconnectTimer) {
-      clearTimeout(this.reconnectTimer);
-      this.reconnectTimer = null;
-    }
-    if (this.ws) {
-      this.ws.close();
-      this.ws = null;
-    }
-  }
-
-  private openConnection(): void {
-    if (!this.wsUrl) return;
-
-    try {
-      this.ws = new WebSocket(this.wsUrl);
-    } catch (err) {
-      console.error('[EscalationSocket] Failed to open WebSocket:', err);
-      return;
-    }
-
-    this.ws.onopen = () => {
-      console.log('[EscalationSocket] ✅ Connected to:', this.wsUrl);
-      this.reconnectAttempts = 0;
-    };
-
-    this.ws.onmessage = (event) => {
-      try {
-        const rawData = String(event.data);
-        console.log('[EscalationSocket] Message received:', rawData);
-        const msg = JSON.parse(rawData);
-        if (msg.type === 'ping') {
-          console.log('[EscalationSocket] Heartbeat ping received');
-          return;
-        }
-        if (msg.type === 'reply' && msg.reply) {
-          console.log('[EscalationSocket] Human reply received:', msg.reply);
-          this.onTypingChange?.(false);
-          this.onReply(msg.reply, msg.ticketId);
-        } else if (msg.type === 'typing_start') {
-          this.onTypingChange?.(true);
-        } else if (msg.type === 'typing_stop') {
-          this.onTypingChange?.(false);
-        } else if (msg.type === 'ticket_closed') {
-          console.log('[EscalationSocket] Ticket closed by agent');
-          this.onTypingChange?.(false);
-          this.onTicketClosed?.(msg.ticketId);
-          this.intentionalClose = true;
-          this.ws?.close();
-        }
-      } catch {
-        // Non-JSON message — ignore
-      }
-    };
-
-    this.ws.onerror = (event) => {
-      console.error('[EscalationSocket] ❌ WebSocket error. URL was:', this.wsUrl, event);
-      this.onError?.(event);
-    };
-
-    this.ws.onclose = (event) => {
-      console.warn(`[EscalationSocket] Connection closed. Code=${event.code} Reason="${event.reason}" Intentional=${this.intentionalClose}`);
-      if (this.intentionalClose) return;
-      this.scheduleReconnect();
-    };
-  }
-
-  private scheduleReconnect(): void {
-    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
-      console.warn('[EscalationSocket] Max reconnect attempts reached — giving up');
-      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.openConnection();
-    }, delay);
-  }
-}